HTMLドキュメントの構造：HTMLの基本構造を学ぶ

公開: 2020-12-14

HTMLは、ブラウザデータを介してインターネット上でアクセス可能なドキュメントの標準マークアップ言語として使用されています。 HTMLは一連の短い要素、タグ、およびコードで構成されており、構造化された形式で一緒にコンパイルすると、適切なインターネットアクセスで誰でも表示できるWebページを作成します。

それは人々の働き方を変えました。 HTMLとCSSは、JavaScriptとともにWebページ上の要素を作成および操作するために使用されます。HTMLでは、作成者が要素ごとに異なる役割を定義して、作成プロセスで完全なカスタマイズの自由を与えます。

HTMLはハイパーテキストマークアップ言語の略で、Webサイトに表示されるWebページを設計するために使用されます。

まとめると、Webページの構築に役立つ3つの主要な側面があります。

  • HTML構造—構造要素をサポートします
  • CSSスタイル—設計を支援し、それらの構造要素にスタイルを与えます
  • JSインタラクション—これらの要素間のインタラクションを可能にします

HTML構造では、コンテンツをマークするために要素とタグが互いにペアになっています。

インターネット上で利用可能なすべてのページには、HTMLタグが含まれています。 これらのタグは、コンテンツをオンラインで明確かつオープンな視点で表示するのに役立ちます。これは、いつでもモデレートおよび変更できます。 より簡単に説明するために、プログラムで要素とタグがどのように使用されるかを説明しましょう。

開始要素と終了要素は変更されますが、タグは同じままです。 タグは文の前後に挿入され、ページ上でフォーマットできるようにします。 理想的なWebページは、次の3つの主要なセクションで構成されています。

  • タイトル
  • 頭
  • 体

Head要素は、ヘッドセクションの開始/見出しを強調表示するために使用されます。 ヘッドセクションは、常にページに関する説明として役立ちます。 ヘッドタグ内のコンテンツ、つまり見出しは、ページのコンテンツを識別するためのソースとして使用されるものです。

以下にリストされているのは、head要素で使用できるすべてのタグです。

  • <ベース>
  • <リンク>
  • <メタ>
  • <noscript>
  • <スクリプト>
  • <スタイル>
  • <タイトル>

例えば：

<HEAD>

<TITLE>HTMLでのHelloworldの例<TITLE>

</ HEAD>

ブロックレベルの要素は、段落、小見出し、作成するリストなど、Webページの特定のセクションを識別するために使用されます。

段落：<P>および</ P>

見出し、レベル1：<H1>見出し、レベル2：<H2>および</ H2>

水平方向のルール：<HR>中心：<CENTER>

フッター：それを示す特別なタグはありませんが、作成者との連絡が必要なセクションを特定するのに役立つフッターをWebページに配置することをお勧めします。 ニュースレターを購読するためのFAQセクションまたは電子メールが含まれる場合があります。

<HTML>

<HEAD>

<TITLE>靴会社<TITLE>

</ HEAD>

<BODY>

<H1>アメージングシューズへようこそ！ </ H1>：</ H2>

<IMG SRC =。”。http：//example.com/ images /image1.jpg”> <HR>

<CENTER> <A HREF = .. http：//www.example1.com/..>サンプルWebサイトにアクセスしてみませんか

</A>

</ CENTER>

</ BODY>

</ HTML>

上記のセクションでは、 HTML構造のWebページの主な要素について説明しました。

ここで、HTMLソースに移動し、それを使用してプログラム構造とその要素を理解する方法を理解しようとします。

初心者として、これは他のページがどのように開発されているかを理解するのに大いに役立ち、あなた自身のウェブページのためにカスタマイズされたバージョンを作成するための参照として使用することができます。

ウェブページの任意の場所で右ボタンをクリックし、[ページのソースを表示]を選択します。 これにより、ページのソースコードを含むウィンドウが開きます。

ページを検査するには

Webページの任意の場所で右ボタンをクリックし、[検査]を選択して、その特定のWebページの作成に使用された要素のリストとタイプを表示します。 HTMLとCSSの両方が含まれ、スタイルパネルから変更できます。

HTMLの基本構造とそのタグについて説明したので、次にHTMLでコンテンツを作成するために必要な基本要素の理解に移りましょう。

<p>このタグは、段落が必要な場合にWebページで使用され、それを終了するために</p>タグが使用されます。

<br>このタグは行を区切るために使用され、連絡先や住所など、主に1行を書き込むために使用されます。

<hr>このタグは、Webページのコンテンツを2つのセクションに分割するために使用されます。

ここにあるすべてのタグは、サンプルのWebページコードに実装されています

学ぶ： 21のWeb開発プロジェクトのアイデア

入力

<html>

<頭>

<title> </ title>

</ head>

<本体>

<h1>HTMLの構造</h1>

<p>

upGradEducationによる<br>

<hr>

基本を学ぶ<br>

<hr>

upGradEducationによる<br>

</ p>

</ body>

</ html>

属性

上記のすべてのタグについて、追加情報が必要な場合に属性が使用されます。 属性は、「値」と「名前」の2つのパラメーターで定義されます。

ここで、「name」パラメータには、割り当てられていると見なされるプロパティの名前を取得する機能があります。 また、「value」パラメーターには、要素に合わせてプロパティ名の値を取得するための同様の関数があります。

<img>この属性は、Webページに画像を追加/埋め込むために使用されます。 このタグは、画像パスを指定するのに役立ちます。 また、<height>と<width>は、それぞれ画像の高さと幅を示します。

<alt>この属性は、接続エラーまたはその他の理由で画像を読み込めない場合に適用されます。 altタグは、画像のサブタイトルとして機能します。

世界のトップ大学のソフトウェアエンジニアリングコースに登録します。 エグゼクティブPGプログラム、高度な証明書プログラム、または修士プログラムを取得して、キャリアを早急に進めましょう。

読む： 8つのエキサイティングなフルスタックプロジェクトのアイデアとトピック

例

<html>

<本体>

<h2>src属性</h2>

<p> HTML画像はimgタグで定義され、画像ソースのファイル名はsrc属性で指定されます：</ p>

<img src =” img_101.jpg” alt =”空の画像” width =” 500” height =” 600”>

</ body>

</ html>

テキストのスタイル、サイズ、フォント、およびテキストに関連するその他の機能を変更するには、<style>タグを使用します

例

<html>

<本体>

<h2>スタイル属性</h2>

<p>この属性は、色などのスタイルを変更するために使用されます：</ p>

<p style =” color：red;”>これは赤い段落です。</ p>

</ body>

</ html>

テキスト変更アプリケーションでは、HTMLは、これらのタグを使用してカスタマイズされた要求に合わせてテキストを変更するためのタグも提供します。

  • <b> –太字のテキスト
  • <strong> –重要なテキスト
  • <i> –斜体のテキスト
  • <em> –強調されたテキスト
  • <マーク>–マークされたテキスト
  • <small> –小さいテキスト
  • <del> –削除されたテキスト
  • <ins> –挿入されたテキスト
  • <sub> –添え字テキスト
  • <sup> –上付きテキスト

記事を要約すると、HTMLの次の機能と基本を学びました。

  • HTML構造
  • タグ、要素、およびそれらのタイプ
  • 基本的なタグとそのアプリケーション

これらの機能、タグ、および属性はすべて、 HTMLの必要性を理解するのに役立ちます。

フルスタックソフトウェア開発の詳細に興味がある場合は、upGrad＆IIIT-Bのフルスタックソフトウェア開発のエグゼクティブPGプログラムをチェックしてください。これは、働く専門家向けに設計されており、500時間以上の厳格なトレーニング、9以上のプロジェクトを提供します。および割り当て、IIIT-B卒業生のステータス、実践的な実践的なキャップストーンプロジェクト、およびトップ企業との雇用支援。

未来のキャリアに備える

ソフトウェアエンジニアリングの修士号を今すぐ申し込む