HTML 言語クイック スタート ガイド
序文：
HTML (Hypertext Markup Language) は、Web ページの作成に使用されるマークアップ言語です。これはマークアップの形式をとり、タグを使用してページ コンテンツの構造とプレゼンテーションを定義します。この記事は、HTML の基本を理解し、簡単な HTML Web ページの作成を開始できるようにするためのクイック スタートを提供します。
HTMLとは
- HTML は Web ページの基本的な構成要素であり、ページの構造とコンテンツを記述します。
- HTML はタグを使用して、タイトル、段落、画像、リンクなどのさまざまな要素をマークします。
- HTML ファイルには通常、「.html」または「.htm」という拡張子が付いています。
簡単な HTML ページを作成する
- テキスト エディタ (Notepad++、Sublime Text など) を使用して新しいファイルを開きます。
- 基本的な HTML ページ構造として次のコードを入力します。
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML页面</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个示例段落。</p>
</body>
</html>
HTMLの基本構造解析
<!DOCTYPE html>: これは、ドキュメントが HTML5 標準を使用していることを示すドキュメント タイプ宣言です。<html>: HTML ドキュメントのルート要素。ページ全体のコンテンツが含まれます。<head>: ドキュメントのメタデータを定義し、外部リソースを導入するために使用されるヘッダー要素。<title>: Title 要素。ブラウザのタブ バーに表示されるタイトルを定義します。<body>: ページのメイン要素。表示されるページ コンテンツが含まれます。
HTML タグと要素
- タグは HTML 言語の基本単位であり、さまざまなタイプの要素を定義するために使用されます。
- タグの例:
<h1>...</h1>は第 1 レベルの見出しを表し、<p>...</p>は段落などを表します。 - 開始タグと終了タグの間には要素のコンテンツがあります。
- 一部のタグには、他のネストされたタグを含めることができ、タグの階層を形成します。
よく使用される HTML 要素
<h1>~<h6>：タイトルタグ。第１層タイトルから第６層タイトルまで順に重要度が低いことを示す。<p>: 段落タグ。段落を定義します。<a href="URL">...</a>: ハイパーリンクを作成するために使用されるリンク タグ。<img src="image.jpg" alt="描述">: 画像を追加するために使用される画像タグ。<ul>および<li>: 順序なしリストとリスト項目タグ。<table>、<tr>、<td>: テーブル、行、セルのラベル。
スタイルと書式設定を追加する
- CSS (Cascading Style Sheets) を使用して、HTML ページにスタイルと書式設定を追加できます。
- 引入外部CSS文件：
<link rel="stylesheet" href="styles.css">。 - 内联样式：
<p style="color: red;">红色的段落文本</p>。
HTMLページを実行する
- ファイルを「.html」として任意の場所に保存します。
- ファイルをダブルクリックすると、デフォルトのブラウザでファイルが開き、作成した HTML ページが表示されます。
終わり：
おめでとう！これで、HTML 言語の基本を学習し、簡単な HTML ページを作成できました。これは HTML の世界における氷山の一角にすぎません。さらに高度な HTML 要素、CSS スタイル、JavaScript の操作を引き続き学習できます。練習して探求すると、よりリッチで複雑な Web ページを作成できるようになります。
このクイック スタート ガイドがお役に立てば幸いです。 HTML を使用して素晴らしい Web ページを構築できるようお祈りしています。