HTMLウェブページの作り方

WBOY

リリース： 2023-05-06 12:55:08

オリジナル

10024 人が閲覧しました

HTML は Web ページを作成するための標準言語です。HTML の使用を学習すると、美しい Web ページをすぐに作成できます。この記事では、HTML の基本的な構文と Web ページの作成手順を紹介します。

1. HTML の基本構文

HTML は、タグを使用してドキュメントの構造とコンテンツを記述することができるマークアップ言語です。完全な HTML Web ページにはヘッドが含まれます。2 つの部分があります。 : ヘッドとボディ Web ページのプロパティとメタデータはヘッドで定義され、Web ページのコンテンツとスタイルはボディで追加されます。

典型的な HTML Web ページの基本構造は次のとおりです:

<!DOCTYPE html>
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    <h1>一级标题</h1>
    <p>段落1</p>
    <p>段落2</p>
  </body>
</html>

ログイン後にコピー

その中に:

## があります。 HTML5 ドキュメントの Type 宣言は、これが HTML5 Web ページであることをブラウザに伝えます。
は HTML ドキュメントのルート要素であり、Web ページ全体のコンテンツが含まれています。
タイトル (Web ページのタイトル)、メタ (Web ページの説明とキーワード)、リンク (スタイルシート) など、Web ページのいくつかのメタデータが含まれます。 ;
< body> には、テキスト、画像、リンクなど、Web ページの主要なコンテンツが含まれます。

2. Web ページの作成を開始します

Web ページを作成する前に、まず適切なエディタを選択する必要があります。一般的なエディタには、Sublime Text、Visual Studio Code、Atom などが含まれます。ここでは例として Visual Studio Code を選択します。

Visual Studio Code を開き、新しい HTML ファイルを作成します。任意の名前を使用でき、拡張子は .html です。

新しく作成した HTML ファイルに、上で紹介した基本構文に従って HTML コードを記述します。たとえば、次のコードは単純な Web ページ構造を示しています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>我的网页</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一个网页</p>
    <img src="picture.jpg" alt="我的图片">
    <a href="http://www.baidu.com">去百度一下</a>
  </body>
</html>

ログイン後にコピー

Where:

Specify The Web ページ内の中国語を正しく表示できるように、Web ページのエンコード方式は UTF-8 です。

スタイルシート style.css は現在の Web ページにリンクされているため、Web ページのスタイルとコンテンツを分離できます。

は、第 1 レベルのタイトル、`` は段落を表し、`<img>` は画像を表し、`<a>` はリンクを表します。

CSS スタイルの追加

CSS (Cascading Style Sheets) は、Web ページの外観とスタイルを制御するために使用される言語です。 CSS カラー、テキストの色、フォント、サイズ、間隔などを介して変更できます。 Web ページをより美しくするには、いくつかの CSS スタイルを追加する必要があります。

まず、style.css という名前のファイルを作成し、そのファイルを HTML ファイルの head タグに挿入します。コードは次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>我的网页</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    ...
  </body>
</html>

ログイン後にコピー

次に、スタイルにいくつか追加します。 css ファイルのスタイル、例:

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

h1 {
  color: #444;
  font-size: 36px;
  text-align: center;
}

p {
  color: #666;
  font-size: 16px;
  line-height: 1.5;
  margin: 20px 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

a {
  color: #0074D9;
  text-decoration: none;
}

ログイン後にコピー

ここで:

は Web ページ全体のフォント、背景色、その他のスタイルを指定します。 h1
p
img
img
は、リンクの下線の色と削除を指定します。

Web ページの保存とプレビュー

上記の手順を完了したら、HTML ファイルと CSS ファイルを保存し、ブラウザで HTML ファイルを開いてプレビューします。ウェブページを作りました。

見た目が良くない場合は、CSS スタイルの調整と改善を続けることができます。

3. まとめ

上記は HTML Web ページを作成するための基本的な手順です。HTML と CSS の基本構文を学習して習得し、優れたエディターを使用することで、美しい Web ページをすばやく作成できます。ウェブページ。。もちろん、Web ページの作成には継続的な実験と学習が必要ですが、この記事が初心者の方に役立つことを願っています。

以上がHTMLウェブページの作り方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。