著者:
Florence Bailey
作成日:
20 行進 2021
更新日:
1 J 2024
![HTMLとCSSでホームページを作る方法を完全解説【Web制作初心者向け】](https://i.ytimg.com/vi/iIJnE8JDOm4/hqdefault.jpg)
コンテンツ
HTML(Hypertext Markup Language)は、Webページを開発するための主要なプログラミング言語です。シンプルで便利なプログラミング言語として作成されました。インターネット上のほとんどのページは、この言語のいずれかの形式(ColdFusion、XML、XSLT)を使用して開発されています。この記事を読んだ後は、インターネット上の他のリソースを使用してトレーニングを続けることができます。このトピックに関連する他の記事をインターネットで検索してみてください。
ステップ
方法1/1:HTMLページを作成する
1 ここに示されている手順の1つに慣れる前に、「必要なもの」のセクションを参照してください。
2 この問題を理解し始める前に知っておくべきこと:
- 3 基礎。 タグについて聞いたことがありますか?タグは山かっこで囲まれ、単語が内側にあります。終了タグは同じ形式で記述されていますが、最初の山括弧の後にスラッシュが追加されています。属性は、タグに詳細を追加するために使用されるタグ内のオプションの単語です。
- 4 ドキュメントの始まり。 使用しているテキストエディタで、次のように貼り付けます。
html>ヘッド>タイトル> wikiHow /タイトル> /ヘッド>ボディ> Hello World /ボディ> / html>ビッグ> /ビッグ>
タグは同じタグで閉じる必要がありますが、最初の山括弧の後にスラッシュを付けます。タグなどの例外があります メタ また DOCTYPE. 5 DOCTYPE
- 通常、ほとんどのWebページは設定されています DOCTYPE」。これは、エンコーディングと、それがWebブラウザによってどのように認識されるかを決定するのに役立ちます。ほとんどのページはそれがなくても機能します。「しかし、一致させたい場合はこれが必要です(インターネット上のエンコーディングのタイプとその使用方法を規制します)..。 HTML 4.01のDOCTYPEを以下に示します。!DOCTYPE html PUBLIC "-// W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">これは1つです最も一般的な インターネット全体のページで使用されるDOCTYPE。最初に「html」を説明するページのタイプを指し、次にエンコーディングのタイプを強調表示し、最後にDOCTYPEの場所を示します。これにより、Webブラウザのページが説明されます。
- HTMLにはさまざまな種類があります(長年にわたって開発されたさまざまなバージョン)。たとえば、新しいタグや特定のタグを使用します。一部のタグは非推奨になりました(代わりに、他のより便利なタグが使用されます)。
- b>および i> -これは現在タグに課されているものです。タグはテキストの変換に使用されますが、仕様には使用されないためです。その結果、他のタグがタグに置き換わるようになります。鬼ごっこ 強い> の代替品です b>、 と em>、の代替品 i>.
- 以前のタグをフォーマット以上のタグに置き換えることが重要です。テキストが翻訳された場合、フォーマットだけでなく、その意味も同じままです。これは意味的に正しいです。
- XHTMLバージョン2.0では、b>と i> HTMLバージョン3以降と同様に使用されません。
6 HTML「カプセル化ルール」。
- 現在使用されているより重要なタグを見てみましょう。ページの作成時には、単純な構造が使用されます。タグが開かれた場合、結果として、 閉じてください..。これは構造全体に適用されます。 XHTMLレイアウト構造の有効な例を次に示します。
- !DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- html xmlns = "http://www.w3.org/1999/xhtml">
- 頭>
- meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
- タイトル> Hello World!/タイトル>
- /頭>
- ボディ>
- h1> Hello World!/ h1>
- /ボディ>
- / html>
- メッセージを発行するサンプルコード こんにちは世界..。これはテストと呼ばれます こんにちは世界.
7 見出し
- Webページのタイトルは、タグ間のコンテンツです 頭>..。このコンテンツはユーザーが表示できません(ページのタイトルに表示されているタイトルのみ)。タグ間の情報 頭>、次のような他のタグを囲むことができます。
- METAタグは、検索エンジンやその他のユーティリティに役立つ情報に使用されます。
- スタイル(CSS)などのドキュメント間のリンクを作成するLINKタグ。
- SCRIPTタグ。これには、(別のドキュメントから)リモートアクセスする機能を備えたほとんどすべてのWebコーディングが含まれます。
- STYLEタグ。これは、基本的にページに適用できるスタイルです。
- TITLEタグは、Webブラウザでページのタイトルとして表示されるタイトルです。
- このWebサイトから取得したヘッダーの例でこれらのいくつかのデモを見てみましょう(短縮されています):
- 頭>
- タイトル> ... /タイトル>
- meta name = "description" content = "..." />
- link rel = "stylesheet" type = "text / css" href = "..." />
- meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
- style type = "text / css" media = "all"> ... / style>
- スクリプトタイプ= "text / javascript" src = "..."> /スクリプト>
- /頭>
気づかなかった場合は、個々のタグが強調表示され、実際の情報は削除されています。例はかなり短く、にあるほぼすべてのタグを示しています。 頭>HTMLコメントを除いて(これについては簡単なタグで説明します)。
- Webページのタイトルは、タグ間のコンテンツです 頭>..。このコンテンツはユーザーが表示できません(ページのタイトルに表示されているタイトルのみ)。タグ間の情報 頭>、次のような他のタグを囲むことができます。
8 どこでもシンプルなタグ
- 先に進んで、他のタグを見てみましょう。タグ付けに注意し、経験則「カプセル化」を覚えておいてください。
- 強い>重要なテキストを強調します。
- small>テキストを小さくします。フォントサイズは1〜7の標準単位で測定され、3がデフォルトのテキストサイズです。 ..。
- pre>リッチテキストのブロックを定義します。正しいので、そのようなテキストは同じサイズのフォントで入力され、単語の間にすべてのスペースがあります。
- em>テキストをフレーズとして表示します。
- del>テキストを削除します。
- ins>ドキュメントに挿入されたテキストを定義します。
- h1>多くの見出しタグの1つ。この種のタグは「h」で始まり、数が異なります。必ず同じ番号のタグを閉じてください。
- p>段落を定義します。
- !--- ... --->他のタグとは異なり、コメントはタグ自体の中にある必要があります。この情報は、コードを表示したときにのみ表示されます。
- blockquote>引用を表示し、cite>タグとともに使用できます。
- 上記のいくつかの例は、既存のタグの完全なリストではありません。他の人について知るには、にアクセスしてください。
- 先に進んで、他のタグを見てみましょう。タグ付けに注意し、経験則「カプセル化」を覚えておいてください。
9 明確な構造の作成
- ページは、情報を段落に解析できるように、データをタグの単純なセットに保持するように設計されています。コンピュータはデータを認識します;それは文脈または概念的な接続について知りません。コンピューターに適したHTMLページを作成する必要があります。これは、divタグを使用することで実現されます。膨大な数のページを作成するのに役立ちます。 CSSを使用してスタイルを設定でき、レイアウト用の大きなコードテーブルを作成するよりも簡単です。
- div>このタグは、スタイルを設定し、ユーザーとコンピューターの両方が理解できる個別の情報ブロックを使用できるため、特別です。
- divタグを使用する単純なHTMLレイアウトを見てみましょう。
- !DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- html xmlns = "http://www.w3.org/1999/xhtml">
- 頭>
- meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
- タイトル> Hello World!/タイトル>
- /頭>
- ボディ>
- h1> Hello World!/ h1>
- div id = "contentOne">
- p>これはdiv#contentOneのテキストです。/p>
- div>
- p> divのサブセクションの段落#contentOne / p>
- / div>
- / div>
- /ボディ>
- / html>
- div>タグを使用すると、CSSおよびJavascriptでの作業中にスタイルを見つけて変更するのに役立ちます。 HTMLは、さまざまなエンコーディングを使用してCSSスタイルとJavascriptを操作し、より優れた応答性の高いユーザーエクスペリエンスを作成します。
- ページは、情報を段落に解析できるように、データをタグの単純なセットに保持するように設計されています。コンピュータはデータを認識します;それは文脈または概念的な接続について知りません。コンピューターに適したHTMLページを作成する必要があります。これは、divタグを使用することで実現されます。膨大な数のページを作成するのに役立ちます。 CSSを使用してスタイルを設定でき、レイアウト用の大きなコードテーブルを作成するよりも簡単です。
チップ
- この記事を読んだ後、立ち止まって、あなたが知る必要があるすべてを学んだと思ってはいけません。特にこのテクノロジーでは、常に学ぶべきことがあります。
- コードを学び、理解し、書きます。
- 一部のタグは>のみを使用することに注意してください。 Paraとbrはいくつかの例です。 >で開いた他のタグは、さらに閉じる必要があります。たとえば、「div> / div>」です。
- 人々は新しい発見を期待しているので、再発明、設計、またはコーディングします。
- 多くのことを学んだら、サーバープログラミングを学んでみてください。
- CSSとJavascriptの操作方法を学びます。
警告
- HTMLはコンテンツの編集がすべてであることを忘れないでください。つまり、HTMLは、認識された形式でコンテンツを保存するためにのみ使用されます。その他の変更は、CSSなどの他のテクノロジーを使用して行う必要があります。それはまた、「意味的に正しい」を行うことを意味します他の人がそれを認めなくても。他のプログラミング言語は、Webページ(CSS、Javascript、およびXML)の構築に役立ちます。 HTMLはコンテンツコンストラクターです。
あなたは何が必要ですか
- ANSIエンコーディングをサポートするテキストエディタ
- InternetExplorerやMozillaFirefoxなどのWebブラウザ
- (オプション)Adobe Dreamweaver、Aptana Studio、Microsoft ExpressionWebなどのwysiwygまたはwykiwygHTMLエディター