初心者のための HTML チュートリアル
On 9月 28, 2021 by adminWeb マスターになって Web サイトの作成方法を学びたい場合、HTML を使いこなすのはかなり困難だと感じるかもしれません。 実際、HTML は現在、すべての既知の Web サイトの 74% 以上で使用されており、この言語は、サイトのデザインからコンテンツの質まで、すべてを向上させるのに役立ちます。
このガイドでは、HTML の基本原理とその潜在的なアプリケーションを探究し、Web サイトのコーディング時に使用する個々の要素の例を見ていきます。 これは Hyper Text Markup Language の略で、その最も主要な機能は、個々のランディング ページの構造、レイアウト、および表示を確立することです。 Web ブラウザは HTML 言語を直接表示しませんが、目に見え、アクセスしやすく、使いやすいサイトを作成する上で極めて重要な役割を果たします。
HTML はまた、Web ページを徐々に構築し、コンテンツのプレゼンテーションを構成して Web サイトに命を吹き込む、多数の個別の要素によって支えられています。 これらの要素は、見出し、段落、および同様の例など、コンテンツの代替部分を定義する「タグ」内に作成および格納されます。
以下では、これらの要素とその構築についてさらに詳しく調べるとともに、色、リンク、および可変タイポグラフィを Web サイトに導入するためにそれらをカスタマイズする方法についても見ていきます。
Web テクノロジーの年表。
- 1991 – HTML
- 1994 – HTML2
- 1996 – CSS1 + JavaScript
- 1997 – HTML4
- 1998 – CSS2
- 2000 – XHTML1
- 2002 – テーブルレスWebデザイン
- 2005 – AJAX
- 2009 – HTML5
HTMLってどこに使われているの?
HTML を使用している人気のある Web サイト：
- Wikipedia.org
- Google.com
- YouTube.com
- Facebook.com
- Yahoo.com
- Baidu.com
- Baidu.com
- Google.com
- Google.com
- Yahoo!com
- Reddit.com
Wikipedia.org Facebook.com
このように、HTML の最も一般的な用途は、ウェブサイトを構成する個々のランディングページの設計です。 しかし、この人気のあるコーディングツールの唯一の用途ではありませんが、その追加の用途を理解することは、新しいウェブマスターとしてこの言語を最大限に活用するのに役立ちます。
- 既存のページ内にカスタマイズ可能な要素を作成する。 ブログ記事のコメントやユーザーが作成したコンテンツの公開を Web サイトで許可するつもりなら、HTML コード フラグメントを使用してこれを可能にすることができます。 これらの要素により、ユーザーはキーワードを強調したり、リンクを埋め込んだり、モデレーターとして設定した制限に応じてコメントをフォーマットしたりすることができます。
- 電子メール用の追加コンテンツを作成する。 電子メールでは、HTML をリッチテキストメッセージの言語として使用し、リンクやテキストなど、プレーンテキストだけでは表現できないさまざまな要素を盛り込むこともできます。 したがって、Web サイトに関連する電子書籍を電子メールで共有する場合、HTML を利用してメッセージのインパクトを最適化することができます。
- コンピュータにインストールされているオフライン ヘルプ ドキュメントを理解する。 興味深いことに、HTMLはオフラインでアクセス可能なコンピュータベースのヘルプドキュメントのフォーマットとして使用されています。 そのため、HTMLの基本的な知識があれば、ハードウェアの問題を理解し、より早く解決することができ、その結果、ウェブサイトがオフラインになった場合でも、より早く復元できる可能性があります。
HTML ページ構造
HTML ページを構築する前に、基本を所定の位置に置く必要があります。
通常、ページは 3 つの構造要素から構成されます。 ヘッダーには、ロゴまたは Web サイト名、ナビゲーション システムなど、サイト上のすべてのページに関連するコンテンツが含まれます。 ヘッダーは各ページに表示されます。
これらの基本的な構造要素が組み合わされると、次のようになります。
</head>
<body>
ページのメインボディは
ここにあります。 テキストと画像で埋めてください！
</body>
</html>
ここに別の例を示します。header タグと paragraph タグを使ってコンテンツを美しく構造化しています。 さらに、ページのメイン ボディの下にあるコンテンツのためにフッター タグを投入しました。
<html>
<head>
ここにテキストやコード、たとえば
Google Analytics のトラッキング コードを置くことができます。
</head>
<body>
<h1>My First Heading</h1>
<p>Welcome to mywebsite!</p>
<footer>
<p>contact information could go here</p>
</footer>
</body>
</html>
HTMLタグ
HTMLコードの開始点は個々のタグです。 これは、すべての重要な要素を作成するために使用され、ウェブページを構造化するのに役立ちます。
Leading HTML Tags technologies Web での共有
- HTML5 Canvas タグ – 0.27%
- HTML5 Audio タグ – 0.29%
- HTML5 Video タグ – 0.69%
- HTML5 SVG タグ – 3.1%
- HTML5 Embed タグ – 6.1%
- HTML 5 タグ – 0.29％
- HTML5 Video タグ – 0.69％
- HTML 5 SVG タグ – 3.1％ HTML 5 Embed タグ – 6.20%
HTML 5 タグ54%
以下では、最も一般的なタグを見てから、特定のページ上の要素を生成するためにそれらをどのように活用できるかを探ります。 これらは HTML タグを使用して構築され、現在言語では最大 6 つの可変サイズの要素を使用でき、追加のタイトル、サブタイトル、および太字テキストの強調行でコンテンツを構造化することもできます。 見出しを作成するには、<h1> , <h2> , <h3> , <h4> , <h5> または <h6> タグでテキストを前に置き、希望のサイズに合わせて見出しを作成することができます。
そして、見出しの最後に閉じタグを適用してテキストをカプセル化する必要があり、HTML形式で次のように表示されます。
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
確認したら、Webサイトの着陸ページでは以下の美感に翻訳されるでしょう。
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
ここで、可変見出しの各種サイズが明確になり、ブラウザが見出し前後にラインを追加した事実が確認されます。 また、見出しテキストの末尾の終了タグがわずかに異なる外観を持っていることに気づきますが、次の章でタグを使用して特定の要素を定義する際に、これを取り上げます。 これにより、コンテンツを構造化し、関連する段落に分割することができ、その結果、より簡単でシームレスな読書体験につながります。 繰り返しますが、<p>タグは関連するテキストの先頭に配置し、最後に代替の終了タグを適用して効果を完了させます。 しかし、見出しタグとは異なり、段落で紹介されるテキストのサイズを変更できる様々な数値はありません。
たとえば、
<p>Your First Paragraph</p>
<p>Your Second Paragraph</p>
<p>Your Third Paragraph</p>
HTML 形式以外では、これは、完成した Web ページで次のようにテキストを分割します。
Your First Paragraph
Your Second Paragraph
Your Third Paragraph
Line break tags
最初の例は最も基本的な HTML タグですが、異なる形式や別の閉じ方を利用するものもあります。 たとえば、改行タグは、テキストの行を分割し、次の行に続けるという区別を作成します。 後者がテキストを含む標準的なブロック要素であるのに対し、前者は既存の <p> 要素内に区切りを作成します。
このため、改行は HTML では空の要素を示し、したがって開始または終了タグによって定義されません。 その代わりに、<br /> タグによって表現され、既存の <p> 要素に挿入してテキストを分割し、重要な情報を強調することができます。 <be> とフォワード・スラッシュの間の半角スペースが重要で、そうしないと HTML 形式でタグが認識されないからです。
<p>Good morning<br/>
Many thanks for your inquiry, we will contact you if we require anything else.といった具合です。 <br />
Best Regards<br />
Mr.J ones</p>
適用すると、次のようにテキストを分割します：
Good morning,
Manyはあなたの照会に対して感謝します、我々は何か他の要件があればあなたにご連絡させていただきます。
Best Regards
Mr.Jones
ご覧のように、既存の段落要素内で、価値を付加し情報を消化しやすくする限り、好きなだけ頻繁に改行を適用することができます。 また、開段落タグと閉段落タグは変更されず、改行タグは中に含まれるテキストのレイアウトを修正するために使用されることがわかります。
これは、Web ページやコンテンツの視覚的なレイアウトの定義で重要な役割を果たす、既存の要素を変更するために HTML タグを使用できる方法の例の 1 つです。
水平線
同様に、<p> 要素内で使用できるタグや、Web ページ上のテキスト ボディをさらに分離するためのタグが他にもあります。 最も広く使用されているのは <hr> タグで、オンライン・ドキュメントの代替セクションの間に視覚的な水平線を引く空の要素を作成するのに役立ちます。 例えば、読者の焦点を合わせるため、あるいは単に新しい視覚的要素を導入するために、2つのテキスト本文の間に線を置きたいと思うかもしれません。
<p>Your First Paragraph</p>
<hr />
<p>Your Second Paragraph</p>
ここで、hr 文字とスラッシュの間の区切りは空の要素の構築を強調し、もう一度、効果を完成するのに終了タグは必要ありません。 これは次のようなビジュアルを作成します。
Your First Paragraph
Your Second Paragraph
Image tags
Image タグも HTML の空の要素を表し、これもまた終了タグを備えていないことを意味します。 サイトに埋め込む画像の URL に関連する属性を含むだけなので、要素の先頭にある <img > タグで簡単に定義されます。 これらはウェブサイトのどこにでも置くことができますが、段落や見出しなどの既存の要素に含めることは珍しいことです。 以下は、典型的な HTML 画像タグの表示方法です:
<img src=”url” alt=”some_text” style=”width:width;height:height;”>
画像には、読み込み時間が遅い場合やスクリーン リーダーを使っている場合に表示を助ける代替テキストも指定する必要があります。 この方法では、ブラウザが画像を見つけられない場合、alternate属性の値を閲覧者に表示します。 これは再び image タグを使用しますが、異なる属性のセットを含みます:
<img src=” wrongname.gif ” alt =” HTML5 Icon” style=” width: 128px; height: 128px; ” >
HTML 要素
前回は、ページ上の要素を定義するために簡単な HTML タグがどのように使用されるかを調べ、同時に、画像や改行タグを含む空の要素を使用してさらにカスタマイズできる方法を探りました。 これにより、タグと要素の間に存在する関係を理解し、タグを使用して Web サイト上のさまざまな種類のコンテンツを定義する方法を理解することができます。
HTML 言語のすべての側面はタグによって表されますが、たとえば、コンテンツを含む定義済みの要素には開始タグと終了タグの両方が必要です。 ですから、見出しや段落は、関連するテキストをカプセル化し補強するために開始タグと終了タグを使用するので、HTML要素なのです。 対照的に、空の要素は属性を含むか、まったく内容を持たず、終了タグを必要とせずに既存の要素内で使用することができます。
Defining HTML elements
見出しやパラグラフなどの例を使う場合、開始と終了タグの正しい適用が非常に重要です。 たとえば、問題の要素を定義するのは開始タグ（<h1>や<p>など）であり、終了タグはこの要素が Web ページの残りの部分にわたって継続しないようにするものです。
すべての終了タグは、関連する文字の前にスラッシュを備えているという事実を除けば、開始タグと同じです。 したがって、<h1> 見出しの場合、終了タグは </ h1> となり、段落の場合は常に </ p> を使用してテキストの区切りを定義することになります。 このため、コーディングの際には細部にまで注意を払う必要があり、見出しをプログラミングする際には、使用する番号（h1やh2など）が開始と終了の両方のタグに適用されることに注意することが重要です。
ネストしたHTML要素を使う
この段階で、HTML文書やWebページはさまざまな要素のツリーで形成されており、それらが一連の資産の構成要素として機能していることがよくわかります。 空の要素やスタンドアロン タグ (<br / > など) が定義された HTML 要素に組み込まれるように、いわゆる入れ子要素も見出しや段落などのコンテンツ内に収容することが可能です。 これらは、コンテンツに個性を与え、読者の目を特定の興味あるポイントに引きつけるために適用することができます。
Bold, italic and strikethrough text in HTML
例えば、既存のパラグラフ要素内の単語をハイライト表示したいとします。 これは、標準の <p> 要素内の単純なタグを使用して、太字にすることで実現できます。 HTML を使用して、次のようにプログラムします：
<p>I want <b>this</b> word to be bold. </p>
ここで、入れ子要素は開始と終了タグの両方を持ち、それぞれが見出しや段落に関連するものと同様の形式をとります。 これらは既存の要素の中でシームレスに使用することができ、この例では次のような結果をもたらします。
この単語を太字にしたい。
さて、この単語の組版を変更し、イタリック体にもしたいとしましょう。 これは、単に別の入れ子要素を追加することで実現でき、次のようにコード化する必要があります。
<p>I want <b><i>this</b></i> word to be bold.</ p>
見てわかるように、開始と終了の斜体タグは単に<p>要素の中に組み込まれただけです。 これにより、要素内のコンテンツは次のように表示されるように変換されます。
この単語を太字にしたい。
もちろん、この単語を別の方法で強調することを好むと決定することもできます。 したがって、取り消し線（これは <s> および </s> タグによって表されます）などの別の入れ子要素を使用することができます。 これらのタグは <p> 要素内で同じように適用でき、HTML では次のように表示されます：
<p>I want <s>this</s> word to be strikethrough. </p>
この例では、文書またはランディング ページに次のように表示されます。
この単語を取り消し線にします。
これは、タグによって形成できる要素についての洞察を提供し、それによって Web ページの構造とそれが特徴とするコンテンツが定義されます。 これだけでなく、空の要素や入れ子になった要素を使用して、コンテンツをさらに定義することができます。
HTML 属性
タグが要素を構築および定義する構成要素であれば、HTML 属性を使用してその特性（スタイル、色、言語など）をカスタマイズすることが可能です。 全ての HTML 要素はコア属性を持ち、コア情報を提供し、常に stat タグの中で指定されます。 それらはペアで来る傾向があるので、しばしば次のフォーマットで表示されます: name=”value.”
簡単に言うと、名前は設定したいプロパティを表し、値は組み込みたい特定の基準に関連します。
HTML 要素に適用できる属性は多数ありますが、駆け出しのウェブマスターに最も関係のあるものは次のとおりです。 これは ‘lang’ 属性を用いて宣言され、見落としがちですが、スクリーン・リーダーや検索エンジンにとってコンテンツがよりアクセスしやすくなるという利点があります。 通常、以下のフォーマットでドキュメントの最初に表示されます：
<html lang=”en-US” >
lang属性に続き、最初の二文字が言語（この例では英語）を特定するものです。 ハイフンの後、次の二文字は方言を確立しますが、これは全ての言語に存在するわけではありません。
The ‘align’ attribute
HTML 属性のフォーマット（name=”value”）については既に触れましたが、これを最もよく体現しているのは、要素内のコンテンツを整列させようとしたときです。 例えば、特定のページですべての段落を中央揃えにすることを決定し、整列を設定したいプロパティとすることができます。 その後、テキストを左または右に揃える選択肢がありますが、’center’が属性値として設定されます。
たとえば、
<p align="center" >This text is center aligned</p>
これは、<p>要素をページの中央に揃え、ウェブサイトの特定の性質（下記参照）に適した均一なレイアウトを作成します。
このテキストは中央揃え
このテキストは中央揃え
このテキストは中央揃え
「href」属性
目に見えるウェブサイトを構築しようとするなら、インバウンドとアウトバウンドの両方のリンクを組み入れることが重要です。 内部ランディング ページへのバックリンクを含むリンク ポートフォリオを構築することも有効な戦略であるため、HTML.
HTML リンクは、<a>タグで定義され、URL を格納する関連アンカー テキストと一緒に目的リンクが格納されます。 これは、サイトのアドレスを指定する ‘href’ 属性ですが、これは開始タグの一部として組み込まれています。 これは、HTMLでは次のようにコード化されます:
<a href=”https://www.google.com” >Google</a>
これにより、開始タグと終了タグの区別が明確になり、ランディングページでは次のように翻訳されます。
The ‘color’ attribute
This is another important attribute, as the use of color can breathe life into your website while help to create important contrasts and a strong design aesthetic. HTMLでは、色はその名前を使って指定できますが、この目的を達成するためにRGBかHEX値を利用することも可能です。
これはスタイル属性であり、色の選択は設定したい値を表します。 たとえば、大見出しに赤を適用する場合、次のようになります:
<h3 style=”color:red”>Text color set by using red</h3>
適用すると、この要素はウェブサイト上で次のように表示されるようになります。
Text color set by using red
もう一度言いますが、これは HTML で最も適用しやすい属性の 1 つですが、要素を定義する開始と終了タグの間に明確な区別があります。 また、HTML属性のname=”value “形式をさらに強調し、学習のプロセスを容易にし、ウェブサイト全体でこれらを適用します。
Test it yourself
HTMLとその個々の要素の基本理解をもって、次のステップはいくつかの簡単なプロジェクトに取り組み、理論知識を応用して実際的な課題を解決することです。
以下に詳述する演習では、テキストを除いて取り上げ、HTML を使用してさまざまな側面をフォーマットするよう求めています。 ガイドとこれまでに学んだことをすべて使って、自分のWebサイトをコーディングする準備をしながら課題を完了させてください。
<h1>Main Header
<p>Welcome to our website, Example.com! We hope you enjoy reading our content , feel free to reach out to us. </p>
<p>Thanks for visiting! </p>
<p>Learn more. </p>
Questions:
- 正しい終了タグで header 要素を完了します。
- header を太くします。
- header の下に水平線を挿入します。
- カラー属性を使用し、「Thanks for visiting」を緑でシェーディングする
- このハイパーリンク（https://www.w3schools.com/html/）をアンカーテキスト「詳しくはこちら」に挿入する。”
- ページの先頭で、段落を左揃えにするために name=”value” 形式を使用する
HTML 言語の統計と事実
- HTML, head, body要素は1990年代半ばから HTML 仕様に含まれており、数年前までは HTML 文書に構造を与えるための主要要素であったと言えます。 しかし、HTML5 では、HTML ドキュメントの構造に豊富なセマンティックな意味を追加するために使用できる新しいタグが多数追加されたため、状況はここ数年で劇的に変化しました。 ブラウザでは、doctype はレンダリング モードを定義するのに役立ちます。 HTML5 では DTD を定義していないため、HTML5 では doctype 宣言はよりシンプルで短くなります。
- モバイル ブラウザは HTML5 を完全に採用しているので、モバイル対応のプロジェクトを作成することは、より小さなタッチ スクリーン ディスプレイ用に設計および構築するのと同じくらい簡単です。 また、モバイル用に最適化するための優れたメタ タグがいくつかあります。
- 78% のコンテンツ開発者は、この構造がモバイル用アプリの作成に適していることに同意し、68% はあらゆる種類のアプリの設計に適していると回答しています。
- HTML5 には、より優れたユーザー エクスペリエンスとより強力で動的な Web アプリケーションを構築するための優れた API が多数付属しています。
- Drag and Drop (DnD)
- Offline storage database
- Browser history management
- ドキュメント編集
- Timed media playback
- HTML5は1社によりコントロールされているわけではないのです。 その最大の特徴のひとつは、オープン スタンダードであるという事実にあります。 開発者は自由に創造力を発揮し、できる限りの機能や特徴を追加することができます。
- 他のブラウザーと比較して、Google Chrome はアップデートのたびに HTML5 のサポートが含まれていることを確認しています。 さらに、YouTube のデフォルト プレーヤーは HTML5 になり、Google の Flash 広告は HTML5 に変換されるようになりました。
- 開発者による HTML5 の使用状況 (地域別)。
- 北米および中南米 – 70%
- 南米 – 61%
- アジア太平洋 – 60%
- オーストラリア – 60%
- ヨーロッパ – 59%
- アフリカ – 60%
- アジア太平洋 – 60% 北米 – 70%
- 南米 – 70%
- 南米 – 60%
- ヨーロッパ – 60 50%
ヨーロッパ – 70%
ヨーロッパ – 60%
Conclusion
HTML は 1991 年に作成されたばかりですが（その後 1995 年にコーディング言語の最初のバージョンがリリースされました）、HTML は、その後に作成されたものです。 機能的で視覚的に魅力的なウェブサイトをデザインするための重要なツールに成長しました。 HTML の影響力のレベルは進化し続けており、最新の反復（HTML5）は世界中のますます多くの Web サイトで採用されています。
この点で、HTML の基本要素とその適用方法を学ぶことは、成功し、目に見える、そして最終的には競争力のある Web サイトを確立するための最も重要な唯一のステップになります。
コメントを残す