Home-theater-designers
最近のWebサイトは一般にユーザーフレンドリーなインターフェイスで構築されていますが、基本的なHTMLを知っておくと便利です。次の17個のHTMLサンプルタグ（およびいくつかの追加機能）を知っている場合は、基本的なWebページを最初から作成するか、WordPressなどのアプリで作成されたコードを微調整することができます。
ほとんどのタグの出力を含むHTMLコード例を提供しました。それらの動作を確認したい場合は、記事の最後にあるサンプルHTMLファイルをダウンロードしてください。テキストエディタで遊んだり、ブラウザに読み込んだりして、変更内容を確認できます。
1.1。
このタグは、作成するすべてのHTMLドキュメントの先頭に必要です。これにより、ブラウザはHTMLを読み取っていることを認識し、最新バージョンのHTML5を期待していることが保証されます。
これは実際にはHTMLタグではありませんが、それでも知っておくとよいでしょう。
2.2。
これは、ブラウザにHTMLを読み取っていることを通知するもう1つのタグです。タグはDOCTYPEタグの直後に配置され、ファイルの最後にタグを付けて閉じます。ドキュメント内の他のすべては、これらのタグの間にあります。
3.3。
タグは、ファイルのヘッダーセクションを開始します。ここに入るものはあなたのウェブページに表示されません。代わりに、検索エンジンのメタデータとブラウザの情報が含まれています。
基本的なページの場合、タグにはタイトルが含まれます。それだけです。ただし、含めることができるものは他にもいくつかあります。これについては、後で説明します。
四。
このタグは、ページのタイトルを設定します。あなたがする必要があるのは、このようにあなたのタイトルをタグに入れてそれを閉じることです（私はコンテキストを示すためにヘッダータグも含めました）：
My Website
これは、ブラウザで開いたときにタブタイトルとして表示される名前です。
5.5。
タイトルタグと同様に、メタデータはページのヘッダー領域に配置されます。メタデータは主に検索エンジンによって使用され、ページの内容に関する情報です。さまざまなメタフィールドがありますが、これらは最も一般的に使用されるもののいくつかです。
- 説明 ： ページの基本的な説明。
- キーワード ：あなたのページに適用できるキーワードの選択。
- 著者 ：あなたのページの作者。
- ビューポート ： すべてのデバイスでページの見栄えを良くするためのタグ。
このページに適用される可能性のある例を次に示します。
「viewport」タグには、ページがモバイルデバイスとデスクトップデバイスで適切に表示されるように、コンテンツとして常に「width = device-width、initial-scale = 1.0」が必要です。
6.6。
ヘッダーセクションを閉じると、本文が表示されます。これをタグで開き、タグで閉じます。これは、ファイルの最後、タグの直前にあります。
Webページのすべてのコンテンツは、これらのタグの間にあります。それはそれが聞こえるのと同じくらい簡単です：
Everything you want displayed on your page.
7。
少し小さいヘッダー
サブヘッダー
結果：
ご覧のとおり、レベルごとに小さくなっています。
8.8。
段落タグは新しい段落を開始します。これは通常、2つの改行を挿入します。
たとえば、前の行とこの行の間の区切りを見てください。それは何ですか
タグで十分です。
Your first paragraph.
Your second paragraph.
結果：
あなたの最初の段落。
あなたの2番目の段落。
あなたもすることができます CSSスタイルを使用する テキストサイズを変更する次のような段落タグ内：
This is 50% larger text.
結果：
9.9。
改行タグは、単一の改行を挿入します。
The first line.
The second line (close to the first one).
結果：
同様の方法で作業することは
鬼ごっこ。これにより、ページに水平線が描画され、テキストのセクションを区切るのに適しています。
10.10。
このタグは重要なテキストを定義します。一般的に、それはそれが大胆になることを意味します。ただし、CSSを使用して作成することは可能です テキストの表示が異なります。
Googleでアカウントをデフォルトにする方法
ただし、安全に使用できます 太字のテキストに。
Very important things you want to say. 結果：
あなたが言いたい非常に重要なこと。
あなたがに精通している場合 テキストを太字にするためのタグでも、引き続き使用できます。 HTMLの将来のバージョンで引き続き機能するという保証はありませんが、現時点では機能します。
十一。
お気に入り と 、 と 関連しています。 NS タグは強調されたテキストを識別します。これは通常、イタリック体になることを意味します。繰り返しになりますが、CSSによって強調されたテキストの表示が異なる可能性があります。
An emphasized line. 結果：
強調された線。
NS タグは引き続き機能しますが、HTMLの将来のバージョンで非推奨になる可能性があります。
12.12。
NS 、またはアンカータグを使用すると、リンクを作成できます。単純なリンクは次のようになります。
MUOに行く 'href'属性は、リンクの宛先を識別します。多くの場合、これは別のWebサイトになります。画像やPDFなどのファイルの場合もあります。
その他の便利な属性には、「ターゲット」と「タイトル」があります。 target属性は、次のように、新しいタブまたはウィンドウでリンクを開くためにほぼ排他的に使用されます。
Go to MUO in a new tab 結果：
'title'属性はツールチップを作成します。以下のリンクにカーソルを合わせると、どのように機能するかを確認できます。
Hover over this to see the tool tip 結果：
これにカーソルを合わせると、ツールチップが表示されます
13.13。 ![]()
ページに画像を埋め込む場合は、imageタグを使用する必要があります。通常は、「src」属性と組み合わせて使用します。これは、次のように画像のソースを指定します。
結果：
退屈したときに進むウェブサイト
「高さ」、「幅」、「alt」などの他の属性を使用できます。これがどのように見えるかです：
ご想像のとおり、「height」属性と「width」属性は、画像の高さと幅を設定します。一般に、画像が正しく拡大縮小されるように、そのうちの1つだけを設定することをお勧めします。両方を使用すると、画像が引き伸ばされたり押しつぶされたりする可能性があります。
'alt'タグは、画像を表示できない場合に表示するテキストをブラウザに指示します。画像に含めることをお勧めします。誰かが特に遅い接続や古いブラウザを持っている場合でも、彼らはあなたのページに何があるべきかについての考えを得ることができます。
14.14。
順序付きリストタグを使用すると、順序付きリストを作成できます。一般的に、それはあなたが番号付きのリストを取得することを意味します。リスト内の各アイテムには、リストアイテムタグが必要です（
）、リストは次のようになります。
- First thing
- Second thing
- Third thing
結果：
- 初めにすること
- 2番目のこと
- 3番目のこと
HTML5では、次を使用できます
番号の順序を逆にします。また、start属性を使用して開始値を設定できます。 'type'属性を使用すると、リストアイテムに使用するシンボルのタイプをブラウザに指示できます。これは、「1」、「A」、「a」、「I」、または「i」に設定でき、次のように指定された記号で表示するようにリストを設定します。
15。
順序付けされていないリストは、順序付けられたリストよりもはるかに単純です。それは単に箇条書きです。
- First item
- Second item
- Third item
結果：
- 最初のアイテム
- 2番目のアイテム
- 3番目のアイテム
順序付けされていないリストにも「type」属性があり、「disc」、「circle」、または「square」に設定できます。
16.16。
書式設定にテーブルを使用することは嫌われていますが、ページ上の情報をセグメント化するために行と列を使用したい場合がたくさんあります。テーブルを機能させるには、いくつかのタグが必要です。サンプルのHTMLコードは次のとおりです。
1st column
2nd column
Row 1, column 1
Row 1, column 2
Row 2, column 1
Row 2, column 2
NS
と
タグは、テーブルの開始と終了を指定します。 NSタグにはすべてのテーブルコンテンツが含まれます。 テーブルの各行は、
鬼ごっこ。各行内の各セルは、いずれかにラップされています列ヘッダーのタグ、または 列データのタグ。各行の各列にこれらの1つが必要です。 結果：
1列目 2列目 行1、列1 行1、列2 行2、列1 行2、列2
17.17。
別のWebサイトまたは人を引用していて、ドキュメントの他の部分とは別に引用を設定する場合は、blockquoteタグを使用します。あなたがする必要があるのは、blockquoteタグを開いたり閉じたりすることで引用符を囲むことです：
The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.
結果：
私が想像したように、Webはまだ見ていません。未来はまだ過去よりもはるかに大きいです。
使用される正確なフォーマットは、使用しているブラウザまたはサイトのCSSによって異なる場合があります。ただし、タグは同じままです。
HTMLコードサンプル
これらの17のHTMLの例を使用すると、簡単なWebサイトを作成できるはずです。オンラインテキストエディタで今すぐすべてをテストして、それらがどのように機能するかを感じることができます。
HTMLで一口サイズのレッスンをもっと見るには、コーディング用のいくつかのマイクロラーニングアプリを試してみてください。彼らはあなたがすぐにスピードアップするのを助けます。
共有 共有 つぶやき Eメール 基本的なコーディングを学びたいですか？暇なときに5つの一口サイズのコーディングアプリをお試しください 基本的なコーディングを学びたいが、時間がほとんどない？これらの一口サイズのコーディングアプリは、忙しい一日のほんの数分しかかかりません。
次を読む 関連トピック - プログラミング
- Wordpress
- HTML
- ウェブ開発
- コーディングチュートリアル
著者について アンディベッツ（221件の記事が公開されました） Andyは、テクノロジーについて15年間執筆している、元印刷ジャーナリスト兼雑誌編集者です。その間、彼は数え切れないほどの出版物に貢献し、大規模なテクノロジー企業のためにコピーライティングの仕事を生み出してきました。彼はまた、メディアに専門家のコメントを提供し、業界のイベントでパネルを主催しました。
AndyBettsのその他の作品ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
購読するにはここをクリックしてください