初心者向けのHTML:

Webテクノロジーのタイムライン


2009年

2005年

2002

2000年

1998年

1997年

1996

1994

1991

HTML5

AJAX

テーブルレスWebデザイン

XHTML1

CSS2

HTML4

CSS1 + JavaScript

HTML2

HTML

Contents

前書き

Webマスターになり、Webサイトの作成方法を学びたい場合は、HTMLに慣れる可能性が非常に高くなる可能性があります。.

ただし、これは避けられないことです。アクセスするWebサイトのランディングページの大部分は、HTML要素を使用して記述および構造化されているためです。実際、HTMLは すべての既知のWebサイトの74%以上で使用されています, この言語はまた、あなたのサイトのデザインから、それが特徴とするコンテンツの品質まですべてを強化するのに役立ちます.

このガイドでは、Webサイトのコーディング時に使用する個々の要素の例を見る前に、HTMLとその潜在的なアプリケーションの基本原則を探ります。.

HTMLとは?

HTMLのさまざまなサブカテゴリを使用しているWebサイトの割合

HTMLパーセンテージのさまざまなサブカテゴリ

簡単な言葉で, HTMLは標準のマークアップ言語を表します オンラインでウェブページを作成するため。これはハイパーテキストマークアップ言語の略で、その主な機能は、個々のランディングページの構造、レイアウト、およびプレゼンテーションを確立することです。 WebブラウザーはHTML言語を直接表示しませんが、表示され、アクセスしやすく、使いやすいサイトを作成する上で極めて重要な役割を果たします。.

HTMLは、Webページを徐々に構築し、コンテンツのプレゼンテーションを構造化し、Webサイトを生き生きとさせる多数の個々の要素にも支えられています。これらの要素は作成され、「タグ」内に含まれます。これは、見出し、段落、および類似の例などの代替コンテンツを定義します.

以下では、これらの要素とその構成についてさらに詳しく説明するとともに、これらの要素をパーソナライズして、色、リンク、さまざまなタイポグラフィをWebサイトに導入する方法についても説明します。.


HTMLはどこで使用されますか?

HTMLを使用する人気のあるWebサイト

HTMLはどこで使用されますか

ご覧のとおり、HTMLの最も一般的なアプリケーションは、Webサイトを構成する個々のランディングページのデザインです。これは人気のあるコーディングツールの唯一のアプリケーションではありませんが、その追加の使用法を理解すると、新しいウェブマスターとして言語を最大限に活用するのに役立ちます. そこで、HTMLを適用できるその他の方法をいくつか紹介します。

  • 既存のページ内にカスタマイズ可能な要素を作成する

    ブログ投稿のコメントまたはWebサイトでのパブリケーションのユーザー生成コンテンツを許可する場合は、HTMLコードフラグメントを使用してこれを有効にできます。これらの要素により、ユーザーは、モデレーターとして設定した制限に応じて、キーワードを強調し、リンクを埋め込み、コメントをフォーマットできます。.

  • メール用の追加コンテンツを作成する

    電子メールでは、リンク、テキスト、およびプレーンテキストだけでは機能できないその他のさまざまな要素を備えたリッチテキストメッセージの言語としてHTMLも使用されます。したがって、ウェブサイトに関連する電子ブックを電子メールで共有する場合は、HTMLを利用してメッセージの影響を最適化できます.

  • コンピュータにインストールされているオフラインヘルプドキュメントを理解する

    興味深いことに、HTMLは、オフラインでアクセスできるコンピューターベースのヘルプドキュメントの形式として使用されます。したがって、HTMLの基本的な知識があれば、ハードウェアの問題を理解し、問題をより迅速に解決できます。これにより、Webサイトがオフラインになった場合に、Webサイトをより迅速に復元できるようになります。.

HTMLとCSS
HTMLとCSSを見る[チートシート]

HTMLページ構造

</strong><br/> <strong>
ページコンテンツ

html、head、およびbody要素は、1990年代半ばからHTML仕様の一部であり、数年前までは、HTMLドキュメントに構造を与えるために使用される主要な要素でした.
ただし、HTML5がHTMLドキュメントの構造に豊富なセマンティックな意味を追加するために使用できる多数の新しいタグを追加したため、この数年で状況は劇的に変化しました.

HTMLドキュメントは、ドキュメントタイプ宣言(非公式には、「doctype」)から始める必要があります。ブラウザでは、doctypeはレンダリングモードの定義に役立ちます。 HTML5はDTDを定義していません。したがって、HTML5では、doctype宣言がよりシンプルで短い.


HTMLページを作成する前に、適切な基本が必要です.

通常、ページは3つの構造要素で構成されます。

1.ヘッダー: ヘッダーには、ロゴやウェブサイト名、ナビゲーションシステムなど、サイトのすべてのページに関連するコンテンツが含まれています。ヘッダーは各ページに表示されます.

2.本体: これは、Webページ上で最大の領域を占めます。表示されているページに固有のコンテンツが含まれています.

3.フッター: フッターのコンテンツには通常、連絡先情報、配送先住所、または法的通知が含まれます。ヘッダーと同様に、フッターはすべてのページに表示されますが、下部に配置されます.

これらの基本的な構造要素が組み合わさると、次のようになります。


あなたはのように、ここにテキストやコードを置くことができます
Google Analyticsトラッキングコード
例.

ページの本文が表示されます
ここに。テキストと画像で埋めます!

次に、ヘッダータグと段落タグを使用してコンテンツを美的に構成する別の例を示します。さらに、ページの本文の下にあるコンテンツのフッタータグをスローしました。


あなたはのように、ここにテキストやコードを置くことができます
Google Analyticsトラッキングコード
例.

私の最初の見出し

mywebsiteへようこそ!

連絡先情報はここに行くことができます


HTMLタグ

HTMLタグ

HTMLコードの開始点は、すべての重要な要素を作成し、Webページを構成するのに役立つ個別のタグです。以下では、最も一般的なタグを調べてから、それらを利用して特定のページ上の要素を生成する方法を検討します。

見出しタグ

Webページを含むすべてのオンラインドキュメントは、見出しで始まります。これらは現在HTMLタグを使用して構築されており、現在の言語では最大6つの可変サイズの要素を使用できます。これにより、追加のタイトル、サブタイトル、強調表示された太字の行でコンテンツを構成することもできます。見出しを開始するには、関連するテキストの前に単に

,

,

,

,

または
希望サイズに応じたタグ.
次に、見出しの最後に終了タグを適用してテキストをカプセル化する必要があり、HTML形式で次のように表示されます。

タグには12のカテゴリがあります。


これは見出しです1

これは見出し2です

これは見出し3です

これは見出し4です

これは見出し5です

これは見出し6です

主要なHTMLタグ技術
ウェブで共有

0.27%

HTML5
キャンバスタグ

0.29%

HTML5
音声タグ

0.69%

HTML5
ビデオタグ

3.1%

HTML5
SVGタグ

6.54%

HTML5
埋め込みタグ


確認すると、これはあなたのウェブサイトで次の美学に変換されます’sランディングページ:

これは見出しです1

これは見出し2です

これは見出し3です

これは見出し4です

これは見出し5です

これは見出し6です

ここでは、ブラウザーが見出しの前後に行を追加しているため、さまざまなサイズの可変見出しがはっきりとわかります。また、見出しテキストの最後の終了タグの外観は少し異なりますが、特定の要素を定義するためにタグを使用するため、次の章でこれについて説明します。.

段落タグ

ビデオとオーディオのサポート
Flash Playerやその他のサードパーティのメディアプレーヤーを忘れて、新しいHTML5でビデオやオーディオに本当にアクセスできるようにします

同様の原則は、開始パラグラフタグにも適用されます。

. これにより、コンテンツを構造化し、関連する段落に分割できます。これにより、より簡単でシームレスな読書体験につながります。もう一度、

タグは、効果を完了するために最後に代替終了タグが適用される前に、関連するテキストの先頭に配置する必要があります。ただし、見出しタグとは異なり、段落で取り上げられているテキストのサイズを変更できるさまざまな数値はありません。. 例えば:

あなたの最初の段落

あなたの第二段落

3番目の段落

世界中のWebサイトによるHTML5ビデオタグの使用

ウェブサイトの数
アメリカ
140,008
ロシア
87,508
ドイツ
34,519
イギリス
26,609
フランス
25,697
日本
23,578
台湾
19,798
ウクライナ
19,204
ブラジル
16,773
中国
16,523
世界のその他の地域
265,371

HTML形式以外では、完成したWebページでは次のようにテキストが分解されます。

あなたの最初の段落

あなたの第二段落

3番目の段落

改行タグ

最初の例は最も基本的なHTMLタグを表していますが、別の形式と代替のクローズテイクを利用するものもあります。たとえば、改行すると、テキストの行が分割されて次の行に続くという区別が作成されます。後者はテキストを含む標準のブロック要素ですが、前者は既存の中に分離を作成するので、HTMLのフィールドでは改行と段落の間に中心的な違いがあります

素子.

このため、改行はHTMLの空の要素を表すため、開始タグと終了タグのどちらでも定義されません。代わりに、それらは
既存のタグに挿入できるタグ

テキストを分割し、潜在的に重要な情報を強調する要素。文字brとスラッシュの間の単一のスペースは重要です。そうしないと、HTML形式ではタグを認識できません。.

次に例を示します。

Flashのような以前のリッチインターネットアプリケーションプラットフォームよりもさらに多くのWebインタラクティビティとWebアニメーションの可能性を利用できるHTML5描画タグです.
HTML5を使用してゲームを開発することもできます 鬼ごっこ。 HTML5は、楽しくインタラクティブなゲームを開発するための優れたモバイルフレンドリーな方法を提供します

おはようございます

お問い合わせありがとうございます。他に必要な場合はご連絡いたします.

宜しくお願いします

ジョーンズ氏

適用すると、次のようにテキストが分割されます。

おはようございます,

お問い合わせありがとうございます。他に必要な場合はご連絡いたします.

宜しくお願いします

ジョーンズ氏

ご覧のとおり、既存の段落要素内で何度でも改行を適用できます。ただし、それらが価値を追加し、情報をよりわ​​かりやすくすることができます。また、段落の開始タグと終了タグは変更されず、テキストのレイアウトを修正するために改行タグが含まれていることがわかります。.

これは、HTMLタグを使用して既存の要素を変更する方法の例の1つであり、Webページとコンテンツの視覚的なレイアウトを定義する上で重要な役割を果たします.

横線

HTML5 Canvasタグが使用されているWebサイトのカテゴリ

HTML5 Canvasタグが使用されているWebサイトのカテゴリ

同様に、内部で使用できる他のタグがあります

要素、またはウェブページ上のテキストの本文をさらに分離するため。最も広く使用されているのは


タグは、オンラインドキュメントの代替セクション間に視覚的な水平線を描画する空の要素を作成するのに役立ちます。たとえば、読者に再度焦点を合わせるため、または単に新しい視覚要素を導入するために、テキストの2つの本文の間に線を配置することができます。これは、HTMLでこのような区切りを作成する方法です。

あなたの最初の段落


あなたの第二段落

ここで、hr文字とスラッシュの間の区切りは、空の要素の構成を強調していますが、効果を完了するために必要な終了タグはありません。. これにより、次のビジュアルが作成されます。

あなたの最初の段落
________________________________________

あなたの第二段落

あなたの最初の段落
_______________________

あなたの第二段落

モバイルブラウザーはHTML5を完全に採用しているため、モバイル対応プロジェクトの作成は、小型のタッチスクリーンディスプレイの設計と構築と同じくらい簡単で、レスポンシブデザインが人気です。モバイル向けに最適化できる優れたメタタグがいくつかあります
コンテンツ開発者の78%は、この構造はモバイルアプリの作成に適していると同意しており、68%は、あらゆる種類のアプリの設計に適していると述べています


画像タグ

イメージタグはHTMLの空の要素も表します。これも、終了タグを備えていないことを意味します。これらには、サイトに埋め込む画像のURLに関連する属性のみが含まれているため、これらは 要素の先頭のタグ。これらはWebサイトのどこにでも配置できますが、段落や見出しなどの既存の要素に含めるのは珍しいことです。一般的なHTMLイメージタグがどのように表示されるかを次に示します。

some_text

また、画像の代替テキストを提供する必要があります。これにより、読み込み時間が遅い場合やスクリーンリーダーを使用している場合に、ユーザーが画像を表示しやすくなります。このようにして、ブラウザが画像を見つけられない場合、代替属性の値をビューアに表示します。これも画像タグを使用していますが、別の属性セットが含まれています。

 HTML5 Icon

HTML要素

HTML要素

これまでは、ページ上の要素を定義するために単純なHTMLタグを使用する方法について説明しましたが、画像と改行タグを含む空の要素を使用してそれらをさらにカスタマイズする方法についても調査しました。これは、タグと要素の間に存在する関係、およびそれらを使用してWebサイトのさまざまなタイプのコンテンツを定義する方法を理解するのに役立ちます.

たとえば、HTML言語のすべての側面はタグで表されますが、コンテンツを含む定義済み要素には開始タグと終了タグの両方が必要です。したがって、見出しと段落はHTML要素です。開始タグと終了タグを使用して、関連するテキストをカプセル化および拡張するためです。対照的に、空の要素には属性が含まれるか、コンテンツがまったく含まれないため、終了タグがなくても既存の要素内で使用できます。.

HTML要素の定義

HTML5はどこにも行かず、採用される要素が増えるにつれて、HTML5での開発を開始する企業が増えます。

見出しや段落などの例を使用する場合、開始タグと終了タグを正しく適用することが重要です。開始タグです(など)。

または

)問題の要素を定義します。たとえば、終了タグは、この要素がWebページの残りの部分で継続されないようにします。クロージングを使用しない場合 たとえば、目的の段落の最後にタグを付けます。たとえば、テキストは見苦しく、非常に読みにくい単一のブロックに表示されます。.

すべての終了タグは開始タグと同じですが、前者は関連する文字の前にスラッシュが付いている点が異なります。したがって、

見出し、終了タグは , 段落では常に使用します テキストの区切りを定義します。これはコーディング中に細部に注意を払う必要があり、使用する番号(h1やh2など)が開始タグと終了タグの両方に適用されることを見出しのプログラミング時に注意することが重要です.

さまざまなHTML要素の使用頻度

XHTML要素名

題名
html

a
メタ
img
テーブル
td
tr
br
p
脚本
フォント
div
b
リンク
センター
スパン

入力
スタイル
時間
強い

hl

noscript
地図
範囲
ul
選択する
オプション
h3
h2
フレーム
フレームセット
パラメータ
埋め込む
全角
あなた
オブジェクト
ブロック引用
番号
フレーム
tbody
iframe
小さい
h4
ベース
北欧





























0
10
20
30
40
50
60
70
80
90
100

ネストされたHTML要素の使用

この段階で、HTMLドキュメントとWebページがさまざまな要素のツリーで形成されていることがわかります。これらは、一連のアセットのビルディングブロックとして機能します。これらの要素がどのように形成され、オンラインコンテンツの構造化に使用されるかについても見てきました。ネストされたHTML要素を見て、これを続けます。.

空の要素とスタンドアロンタグ(
定義済みのHTML要素に組み込むことができます。いわゆるネストされた要素も、見出しや段落などのコンテンツ内に格納できます。これらには、太字や斜体のレタリングや下線付きのテキストなどの例が含まれていますが、それらを適用してコンテンツに個性を追加し、特定の関心点に読者の目を引くことができます。.

HTMLの太字、斜体、下線付きテキスト

しましょう’■既存の段落要素内の単語を強調表示する場合。これは、標準内の単純なタグを使用して太字にすることで実現できます。

素子。 HTMLを使用して、次のようにプログラムします。

が欲しいです この 大胆になる言葉.


ここで、ネストされた要素には開始タグと終了タグの両方があり、各タグは見出しと段落に関連付けられているものと同様の形式に従います。既存の要素内でシームレスに使用でき、この場合、次の結果が得られます。

が欲しいです この 大胆になる言葉.

さあ、’イタリックにするために、この単語のタイポグラフィも変更したいとします。これは、次のようにコーディングする必要がある別のネストされた要素を追加するだけで実現できます。

が欲しいです この 大胆になる言葉.

ご覧のとおり、開始と終了のイタリックタグは単に

素子。これにより、要素内のコンテンツが変換され、次のように表示されます。

HTMLタイトルは、ページが何であるかを理解するために検索エンジンが使用する最も重要なHTMLシグナルであり続けています。実際、HTMLタイトルが不適切または説明的でないと見なされると、Googleはそれらを変更します
が欲しいです この 大胆になる言葉.

もちろん、この単語を別の方法で強調したい場合もあります。したがって、下線などの別のネストされた要素を使用できます(これは そして タグ。これらのタグは、同じ方法で

要素。HTMLでは次のように表示されます。

が欲しいです この 下線を引く言葉.

この場合、テキストはドキュメントまたはランディングページに次のように表示されます。

HTML5で導入された新しいセマンティック要素により、新進の開発者は読みやすくなります。行ごとに表示される代わりに
そして 要素、以下のようなより定義されたタグ
,
そして
が欲しいです この 下線を引く言葉.

これにより、タグによって形成される要素への洞察が提供されます。タグは、Webページの構造とそれらが特徴とするコンテンツを定義します。これだけでなく、空のネストされた要素を使用して、コンテンツをさらに定義することもできます.

HTML属性

グローバル属性は、すべてのHTML要素に共通の属性です。属性は一部の要素に影響を与えない場合がありますが、すべての要素で使用できます。標準で指定されていないものも含め、すべてのHTML要素でグローバル属性を指定できます。


タグが要素を構築および定義するビルディングブロックである場合、HTML属性を使用して、その特性(スタイル、色、言語など)をカスタマイズできます。すべてのHTML要素にはコア属性があり、コア情報を提供し、常にstatタグ内で指定されます。ペアになる傾向があるため、多くの場合、次の形式で表示されます:name =”値.“

簡単に言うと、名前は設定するプロパティを表し、値は組み込む特定の基準に関連しています.

HTML要素に適用できる属性は多数ありますが、生まれたばかりのWebマスターに最も関連する属性は次のとおりです。

「Lang」属性

単一の最も基本的な属性であり、これはドキュメントの言語とその要素を定義します。これは、 ‘lang’ 属性は見落とされがちですが、スクリーンリーダーや検索エンジンがコンテンツにアクセスしやすくなるという利点があります。通常、ドキュメントの最初に次の形式で表示されます。

次のようないくつかの基本的な属性タイプが認識されています。

必須属性, 特定の要素タイプがその要素タイプを正しく機能させるために必要

オプションの属性, 要素タイプのデフォルト機能を変更するために使用されます

標準属性, 多数の要素タイプでサポートされています

イベント属性, 要素タイプに特定の状況で実行されるスクリプトを指定させるために使用されます


lang属性に続いて、最初の2文字は言語(この例では英語)を指定します。ハイフンの後、次の2文字は方言を確立しますが、これはすべての言語に存在するわけではありません。視聴者に適切にリーチするには、この属性を正しく取得することが重要です.

「整列」属性

HTML属性の形式(name =”値)、そしてこれを最もよく実現するのは、要素内でコンテンツを揃えようとする場合です。たとえば、すべての段落を特定のページの中央に配置することを決定できます。たとえば、配置は設定するプロパティです。その後, ’センター’ は属性の値ですが、テキストを左揃えにするか右揃えにするかを選択できます. 例えば:

このテキストは中央揃えです

HTML5で作成されたアプリの種類

生産性
54%
ユーティリティ
38%
消費者
35%
ロブ
22%
ソーシャルネットワーキング
18%
エンターテインメント
17%
暮らし
12%
トラベル
9%
ゲーム
8%
その他の
13%

これはあなたを揃えます

要素をページの中央に配置し、Webサイトの特定の性質に合わせて均一なレイアウトを作成します(以下を参照):

このテキストは中央揃えです
このテキストは中央揃えです
このテキストは中央揃えです

「Href」属性

HTML5には、優れたユーザーエクスペリエンスとより強力でダイナミックなWebアプリケーションを構築できる多数の優れたAPIも付属しています。以下にネイティブAPIのクイックリストを示します。
  • ドラッグアンドドロップ(DnD)
  • オフラインストレージデータベース
  • ブラウザ履歴管理
  • ドキュメント編集
  • 時限メディア再生

目に見えるWebサイトを構築する場合は、受信リンクと送信リンクの両方を組み込むことが重要です。内部ランディングページへのバックリンクを含むリンクポートフォリオを構築することも実行可能な戦略なので、HTMLでこれらをコーディングする方法を学ぶ必要があります.

HTMLリンクは、 タグ。リンク先のリンクと、URLを格納する関連アンカーテキストが含まれます。それは ‘href ’ サイトアドレスを指定する属性ですが、これは開始タグの一部として組み込まれています。次のようにHTMLでコーディングされます。

グーグル

これは開始タグと終了タグの違いを明確に強調しており、ランディングページでは次のように変換されます。

HTML5は1つの会社によって管理されていません。その最高の機能の1つは、オープンスタンダードであることです。開発者は自由に創造性を発揮させ、可能な限り多くの機能や機能を追加できます。


「色」属性

色の使用は、重要なコントラストと強力なデザインの美しさを生み出すのに役立ちながら、Webサイトに活気を与えることができるため、これは別の重要な属性です。 HTMLでは、名前を使用して色を指定できますが、RGBまたはHEX値を使用してこの目的を達成することもできます。前者のオプションは従うのが最も簡単ですが、ページの見出し、段落、その他の要素にも適用できます.

HTML5キャンバス
HTML5キャンバスを表示[チートシート]

これはスタイル属性であり、色の選択は設定する値を表します。たとえば、主見出しに赤を適用すると、次のようになります。

赤を使用して設定された背景色

適用すると、この要素はWebサイトに次のように表示されます。

赤を使用して背景色を設定
他のブラウザと比較すると、Google Chromeのすべてのアップデートでは、HTML5のサポートが確実に含まれています。さらに、YouTubeのデフォルトプレーヤーはHTML5になり、GoogleのFlash広告はHTML5に変換されるようになりました。


ここでも、要素を定義する開始タグと終了タグの間に明確な違いがありますが、これはHTMLに適用する最も簡単な属性の1つです。また、name =”HTML属性の値形式。これらを学習および適用するプロセスをWebサイト全体ではるかに簡単にします。.

自分を試す

HTMLとその個々の要素の基本を理解したら、次のステップは、いくつかの単純なプロジェクトに着手し、理論的な知識を適用して実際の課題を解決することです.

HTML5を実行するブラウザベースのアプリケーションは、地理位置情報を使用しても問題ありません

以下で詳しく説明する演習では、テキストを除き、HTMLを使用してさまざまな側面をフォーマットするように求めました. ガイドとこれまでに学んだすべてを使用して、独自のWebサイトをコーディングする準備をしながら、チャレンジを完了します.
________________________________________

メインヘッダー

当社のウェブサイト、Example.comへようこそ!私たちのコンテンツをお楽しみください。お気軽にご連絡ください.

訪問してくれてありがとう!

もっと詳しく知る.

開発者によるHTML5の使用
(地域別)

北およびラテンアメリカ
70%
南アメリカ
61%
ASPAC
60%
オーストラリア
60%
ヨーロッパ
59%
アフリカ
50%

________________________________________

質問:

  1. 正しい終了タグでヘッダー要素を完成させます.
  2. ヘッダーを太字にします.
  3. ヘッダーの下に水平線を挿入します.
  4. 色属性と色合いを使用する ‘訪問してくれてありがとう’ 緑で
  5. このハイパーリンクを挿入(https://www.w3schools.com/html/)アンカーテキストに “学ぶ
    もっと.”
  6. ページの先頭で、name =を使用します”段落を左揃えにする値の形式


結論

HTMLは1991年に作成されたばかりですが(最初のバージョンのコーディング言語は1995年にリリースされました)、機能的で視覚的に魅力的なWebサイトの設計において、すぐに独創的なツールになりました。 HTMLの影響のレベルも進化し続けており、最新のイテレーション(HTML5)が世界中のますます多くのWebサイトに採用されています.

この点で、HTMLの基本的な要素とその適用方法を学ぶことは、成功し、目に見える、最終的に競争力のあるWebサイトを確立するための最も重要なステップです。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map