基本的なHTMLコードを理解するための5つのステップ

基本的なHTMLコードを理解するための5つのステップ

私たちが知っているように、HTMLはWebの重要な部分です。また、HTMLを手動で入力してページを作成するWebデザイナーはほとんどいませんが、それについて少し知っておくと便利です。





HTMLが実際に何であるか、いくつかの基本的な概念、およびHTMLが他の言語とどのように相互作用するかなど、言語のいくつかの基本を見ていきます。これを「ダミーのためのHTML」クラッシュコースと考えてください。



HTMLの基本：HTMLとは何ですか？

HTMLは ハイパーテキストマークアップ言語 。また、プログラミング言語に集中することもありますが、これは正確ではありません。





として マークアップ言語 、HTMLでは、ページの表示レイアウトのみを作成できます。真 プログラミング言語 は、JavaやC ++と同様に、実行されるロジックとコマンドが含まれています。

シンプルですが、HTMLはWeb上のすべてのページのバックボーンです。太字で表示されるテキスト、画像の追加、他のページへのリンクを担当します。詳細を説明するHTMLFAQがあります。



ブラウザのほとんどのウェブページを右クリックして、 ページソースを見る または同様に、その背後にあるHTMLを確認します。これには、HTML以外のコードも多数含まれている可能性がありますが、それをふるいにかけることができます。

マークアップ言語やプログラミング言語の経験がまったくない場合でも、HTMLについて少し学ぶことで、より多くの情報に基づいたWebユーザーになります。 HTMLがどのように機能するかを理解するのに役立つ、5つの基本的な手順を見ていきましょう。途中で例を示します。



ステップ1：タグの概念を理解する

HTMLは次のシステムを使用します タグ ドキュメントのさまざまな要素を分類します。

ほとんどのタグは、影響を受けるテキストをタグ内でラップするためにペアで提供されます。これが簡単な例です（



タグはテキストを作成します 大胆な ;これについては、後で詳しく説明します。）

This is some bold text .

終了タグがスラッシュ（/）で始まることに注意してください。これは、重要な終了タグを意味します。タグを閉じない場合、最初からすべてにその属性があります。

iPodからPCに音楽をダウンロードする

ただし、すべてのタグにペアがあるわけではありません。と呼ばれるいくつかのHTML要素 空の要素 、コンテンツがなく、独自に存在します。例は


改行であるタグ。スラッシュを追加することで、このようなタグを「閉じる」ことができます（


）しかし、それは厳密には必要ではありません。

ステップ2：スケルトンHTMLレイアウト

適切なHTMLドキュメントには、正しくレイアウトされるように特定のタグを定義する必要があります。これらは重要な部分です：

  • すべてのHTMLドキュメントはで始まる必要がありますそのように宣言する。したがって、その終了タグ 、はHTMLファイルの最後の項目です。
  • 次に、セクションには、ページタイトル、ページ上で実行されるさまざまなスクリプトなどの情報が含まれます。名前が示すように、これは通常、最初のの直後に表示されます。鬼ごっこ。エンドユーザーには、これらのタグのコンテンツの多くは表示されません。
  • 最後に、タグは、読者に表示されるページのテキストを保持します（さらに多くのテキスト）。ここには、画像やリンクなどがあります。

以来

セクションはHTMLドキュメントの大部分を構成し、残りのウォークスルーではそれに関連する要素について説明します。

ステップ3：フォーマット用の基本的なHTMLタグ

次に、HTMLドキュメントを構成するいくつかの一般的なタグを見てみましょう。もちろん、すべての要素を網羅することは不可能なので、最も重要な要素のいくつかを確認します。カバーしました さらに多くのHTMLの例 これらがあなたを満足させないならば。

これらのタグがかなり基本的なものに思える場合は、HTMLが1993年に作成されたことを思い出してください。Webは、初期の段階では非常にテキストベースでした。

シンプルなテキストフォーマット

HTMLは、MicrosoftWordにあるような基本的なテキストスタイルをサポートしています。

  • タグはテキストを作成します 大胆な 。
  • タグ（「強調」を表す）は イタリック体 文章。

HTMLは古いものもサポートします

太字のタグと

イタリック体。ただし、上記のものを使用することをお勧めします。

要するに、

と

何かがどのように理解されるべきかを示しますが、後者のタグはそれがどのように見えるべきかを示すだけです。これらの以前のタグは、視覚障害者が使用するスクリーンリーダーでよりアクセスしやすくなっています。

段落およびその他の部門

HTMLの

タグを使用すると、ドキュメントのセクションを定義できます。通常、これは特定の方法でセクションをフォーマットするためにCSS（以下を参照）とペアになっています。

NS

タグを使用すると、テキストを段落に分割できます。ブラウザはこれらの前後に自動的にスペースを置き、テキストを自然に分割できるようにします。

ドキュメントにヘッダーを追加して、

使って

タグ。 H1は最も重要なヘッダーですが、H6は最も重要ではありません。ほぼすべてのMakeUseOf記事は、H2およびH3ヘッダーを使用して情報を整理しています。

ヒッティング 入力 HTMLドキュメントに改行を追加しても、実際には表示されません。代わりに、




改行を追加します。

これらすべてを使用する例を次に示します。


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



ステップ4：画像を挿入する

画像はほとんどのウェブページの重要な部分です。 HTMLを使用して簡単に追加でき、さまざまなプロパティを設定することもできます。

を使用して画像を挿入します

鬼ごっこ。これを

お使いの携帯電話のグリッチを防ぐ方法
src

属性を使用すると、画像の読み込み元を指定できます。

のもう1つの重要な属性

タグは

alt

。代替テキストを使用すると、スクリーンリーダー用に、または画像が正しく読み込まれない場合に画像を説明できます。画像の上にマウスを置くと、代替テキストが表示されます。

使用

width

と

height

画像が表示されるピクセル数を指定する要素。

すべてをまとめると、画像タグは次のようになります。

Dr. Phil

ワールドワイドウェブは、他のページへのリンクがなければ、あまりウェブにはなりません。を使用して

タグを使用すると、任意のテキストの他のページにリンクできます。

内部

タグ、

href

属性は、リンク先を示します。 URLを貼り付けるだけで問題ありません。あなたは使用することができます

title

誰かがリンクにカーソルを合わせたときに表示されるテキストを追加する要素。

基本的なリンクは次のようになります。

Visit Google

NS

タグには他にも多くの可能な要素がありますが、ここではそれらについて詳しく説明しません。

HTMLがCSSおよびJavaScriptとどのように接続するか

HTMLの基本と、それがどのようにWebページを確立するかを見てきました。しかし、ご想像のとおり、HTMLだけでは、最新のWebに対応できません。単純なHTMLWebページは、ほとんどのWebサイトが静的テキストにすぎなかった「Web1.0」の時代に一般的でした。

しかし今、私たちはもっとたくさんあります。 CSS（Cascading Style Sheets）は、HTMLで準備したテキストがどのように見えるかを説明するために使用される言語です。覚えておいてください

話し合ったタグ？この（および他のタグ）内で、

class

属性。次に、付属のCSSドキュメントに、その方法についての説明を書くことができます。

class

見る必要があります。

これらのスタイル要素はHTMLコードでインラインで定義できますが、保守がはるかに難しいため、これは不適切な方法と見なされます。詳細については これらの簡単なCSSの例 。また、チェックしてください CSSファイルを最適化する方法 。

JavaScript

HTMLがコンテンツを定義し、CSSが外観を決定することを確認しました。 Webに不可欠なトリオの最後のメンバーであるJavaScriptを使用すると、Webページは、毎回新しいページをロードすることなく、人々の行動に応答できます。

たとえば、JavaScriptを使用すると、入力したパスワードが要件を満たしていないことをWebサイトが警告してから送信することができます。 Webデザイナーは、JavaScriptを使用して、スライドショー内の画像を循環したり、ユーザーに入力を求めたりする場合があります。

これらはほんの数例です。 JavaScriptは、多くのことを実行できるスクリプト言語であり、HTMLやCSSよりもはるかに複雑です。見る JavaScriptの概要 はるかに。

Webデザインの全範囲を見るのはこの記事の範囲を超えていますが、HTMLは他の言語と相互作用して、今日私たちが知っているWebページを作成していると言えば十分です。

HTMLの進化

HTMLは静的ではないことに注意することが重要です。 HTMLはいくつかの改訂を経ており、最新のものはHTML 5です。特に、この標準は、Adobe Flashのような独自の形式に依存する代わりに、ネイティブビデオの埋め込みをサポートしています。

HTMLの新しいイテレーションでは、特定の古風なタグが非推奨として宣言されることもあります。これらには、次のようなひどいタグが含まれます

と

（それぞれスクロールとフラッシュテキスト）1990年代のウェブサイトのデザインで一般的に見られます。したがって、標準は時間の経過とともに変化することに注意してください。

少しのHTML知識が大いに役立つ

HTMLドキュメントがどのように機能するかについて簡単に説明しました。これで、Webページの構造の基本がわかりました。あなたがウェブページを構築し続けなくても、あなたはあなたが毎日使っているウェブについてもう少し気づいています。

サムスンのarゾーンとは

詳細については、基本的なツールを使用してWeb開発スキルをアップグレードしてから、チェックアウトしてください。 あなたの最初のウェブサイトをデザインする方法に関する私たちのガイド 。

画像クレジット：Belyaevskiy / ✓

共有 共有 つぶやき Eメール VirtualBoxLinuxマシンを過給するための5つのヒント

仮想マシンによって提供されるパフォーマンスの低下にうんざりしていませんか？ VirtualBoxのパフォーマンスを向上させるためにすべきことは次のとおりです。

次を読む 関連トピック
  • プログラミング
  • HTML
  • ウェブ開発
  • JavaScript
  • ウェブマスターツール
  • プログラミング
  • HTML5
著者について ベン・ステグナー（1735件の記事が公開されました）

ベンは、MakeUseOfの副編集長およびオンボーディングマネージャーです。彼は2016年にフルタイムで執筆するためにITの仕事を辞め、振り返ることはありませんでした。彼は7年以上にわたり、プロのライターとして技術チュートリアルやビデオゲームの推奨事項などを扱ってきました。

ベンステグナーのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください