HTMLの基本とは何ですか?

公開: 2023-09-25

HTML (Hypertext Markup Language) は、オレンジ カウンティにおける Web デザインの基本的な構成要素です。 これは、Web ページの構造とコンテンツを作成するために使用されるマークアップ言語であり、すべての Web サイトの基盤です。 おそらくすべての Web デザイナーは、キャリアの中で HTML に遭遇したことがあります。

HTML は、静的 Web ページの作成に使用される標準言語です。静的 Web ページは、HTML コードを手動で編集しないと変更されないページであり、ユーザーが影響を与えることはできません。

コーディング言語の基礎 - Web デザインの HTML -orange-county-pinterest

HTMLの基本

HTML は要素またはタグのセットであり、各要素は特定の Web ページ コンポーネントを表します。 簡単そうに聞こえますよね？ それはそうだからです！ これらの HTML ドキュメントはテキスト エディターを使用して作成され、.html 拡張子を付けて保存されます。 基本的な HTML ドキュメントが適切に動作するには、次の要素が必要です。

<!DOCTYPE> 宣言

<!DOCTYPE> 宣言は、HTML ドキュメントの開始動作として機能し、使用している HTML の特定のバージョンをブラウザーに通知することで準備を整えます。 これは、「ブラウザーさん、HTML5 のリズムに合わせて踊りましょう!」というフレンドリーな紹介だと考えてください。 HTML5 は Web 開発界の現在のスターであり、数多くのエキサイティングな機能と改善をもたらします。 したがって、この宣言を含めると、本質的には、最新の機能満載の HTML エクスペリエンスを準備するようにブラウザーに指示することになります。 これは、Web コンテンツが正しく表示され、優れた HTML5 機能をすべて活用できるようにする方法です。

<!DOCTYPE html>

<HTML> 要素

<html> 要素は HTML ドキュメントの最大のボスであると考えてください。 それは番長であり、トップの犬であり、すべてを秩序づける者です。 上司が会社を管理するのと同じように、<html> 要素は Web ページ全体を管理します。 これは、Web コンテンツの構築に使用する他のすべての要素の開始点およびコンテナーです。

この <html> 要素内には、<head> 要素と <body> 要素を含む Web ページのブループリントがあります。 <head> 要素には、タイトル、メタ タグ、外部リソースへのリンクなど、ドキュメントに関する重要な情報が含まれます。 一方、 <body> 要素には、ユーザーが Web サイトにアクセスしたときに表示されるすべてのコンテンツが含まれています。

つまり、一言で言えば、<html> 要素は HTML ドキュメントの全体像、最高司令官、そして最終的なオーガナイザーです。 これにより、すべてがスムーズに実行され、Web ページが構造化され、視聴者に正しく表示されることが保証されます。

<Head> 要素

<head> 要素はドキュメントの頭脳のようなもので、タイトル、メタ タグ、スタイルシートやスクリプトなどの機能的なものへのリンクなどの重要な情報が含まれています。 したがって、<head> 要素は Web ページには表示されないかもしれませんが、サイトの見栄え、パフォーマンスの向上、ユーザーと検索エンジンの両方との効果的な通信を確保する上で重要な役割を果たします。 これは、Web ページが最高の状態で機能するのを支援するコマンド センターのようなものです。

<Title> 要素

<title> 要素は、ブラウザのタイトル バーに表示されるドキュメントのタイトルを指定します。 これは技術的な要件であるだけでなく、コミュニケーションのための強力なツールでもあります。 Web ページを簡単に認識でき、アクセスしやすく、ユーザーと検索エンジンの両方にとって魅力的なものにするためには、明確かつ簡潔で関連性の高いタイトルを作成することが不可欠です。

<Body> 要素

<body> 要素には、テキスト、画像、ビデオ、その他の要素など、すべての Web ページ コンテンツが含まれます。 これは劇場のメインステージのようなもので、HTML ドキュメント内ですべてのアクションが行われる場所です。 これは Web ページの基本的な構成要素の 1 つであり、その役割は非常に単純ですが不可欠です。ユーザーが Web サイトにアクセスしたときに表示されるすべてのコンテンツが含まれています。

HTML要素

HTML 要素は、山括弧で囲まれた開始タグと終了タグで囲まれます。 開始タグは要素の名前で始まり、その後に名前と値のペアの形式で属性が続きます。 終了タグは開始タグとまったく同じですが、要素名の前に一種の終了コメントとしてスラッシュ (/) が付いています。

たとえば、次のコードは単純な HTML ページを作成します。

<!DOCTYPE html>

<html>

<頭>

<title>初めての HTML ページ</title>

</head>

<本文>

<h1>私のウェブサイトへようこそ</h1>

<p>これは私の最初の HTML ページです。</p>

</body>

</html>

ここで、<html> 要素はルート要素であり、<head> 要素と <body> 要素が含まれています。 <head> 要素には、ドキュメントのタイトルを指定する <title> 要素が含まれます。 <body> 要素には、見出しと段落を含むページ コンテンツが含まれます。 一般的な HTML ドキュメントでは、最初に最大の要素 (この場合は HTML) から始めて、ページを作成しながら小さな部分 (ヘッド、タイトル、本文など) に進む必要があります。

HTML 属性

HTML 属性は要素に関する追加情報を提供し、開始タグに含まれます。 それらは一種の記述子として機能します。 最も一般的な属性には次のものがあります。

ID 属性

id 属性は要素を識別し、JavaScript および CSS で要素を操作します。

クラス属性

class 属性は要素をグループ化して、CSS でスタイル設定できるようにします。

スタイル属性

style 属性は、HTML コード内の個々の要素に直接スタイルを適用できる便利な HTML 機能です。 これは、別のスタイルシートを作成することなく、色、フォント、間隔などを指定して、特定の要素をファッションに変身させるようなものです。 これは、Web サイトの他のスタイルに影響を与えずに、要素の外観を 1 回限りの変更をすばやく加えたい場合に便利です。 したがって、Web デザインの特定の要素に少しの独自性を追加するための頼りになるツールです。

Href 属性

href 属性はリンク内でリンク先ページの URL を指定するために使用されます。

結論

HTML は Web デザインの基礎であり、適切に構造化された Web ページを作成するために不可欠です。 これらは本格的なウェブサイトへの第一歩です。 したがって、Web サイトを構築したい人にとって、HTML の基本を理解することは不可欠です。 HTML は、要素、属性、コンテンツで構成されるマークアップ言語です。 各要素は Web ページの特定のコンポーネントを表し、属性は要素に関する追加情報を提供します。 HTML を使用すると、構造化され、視覚的に魅力的で、インタラクティブな Web サイトを構築できます。

関連記事はこちらからご覧ください: https://www.drivetrafficmedia.com/the-fferent-coding-langages-of-web-design/