[HTML] 01. Introduction to HTML

6035 ワード

01-1. ハイパーテキストタグ言語(HTML)の定義と機能


デザイナーも非開発者も一度聞いたことのある単語HTML.HTMLって何?
HTMLは、Webページを作成するための言語です.
HTMLを使用してWebページの構造をキャプチャできます.
HTMLファイルには、画像、テキスト、ビデオ、ボタンなど、Webサイトに表示するコンテンツが含まれています.
ブラウザ(safari、chrome、ie...)HTMLファイルを使用して描画する内容を決定すると、Webページが生成されます.

01-2. HTMLファイル


HTMLは次のようになります.html拡張子付きテキストファイル.必要に応じてファイルの名前を付けることができます.
index.html
main-page.html
loginPage.html
1.html
ブラウザがあれば、HTML合成を使用するかどうかを確認できます.
テキストエディタなどの簡単なコメント作成アプリケーションを開きます.
.html拡張子として保存した後
ファイルをブラウザ(クロム)にドラッグ&ドロップします.

MacBookのテキストエディタを開き、「何でも書いてください」と書いただけですが、ブラウザでは効果的でした.開発者ツールを開いてブラウザがこのファイルをどのように認識しているかを確認したところ、私が書いたことのないコンテンツが追加されたことがわかりました.ブラウザはファイルの拡張子を見て、「あ、これはHTMLです」と確定してテキストを表示します.ただし、1行または1行のコードを取得しようとすると、HTML構文も守られていないため、1つのファイルにテキストがあるだけで、ブラウザはコンテキストに必要なタグを自動的に追加します.

01-3. HTML tag


ブラウザが自分で貼り付けても(上図のように)、開発者は文法に合ったHTMLコードを書くことができる必要があります.HTMLファイルに必要な最低限のタグは以下の通りです.
タグに関するHTML基本用語(tag、content、attribute、element)について説明します.

01-3-1. tag(タグ)、content(コンテンツ)


HTMLでは、画像やテキストを描くには適切なタグが必要です.これでブラウザは「ああ、これはテキストです.それは画像です」と知ることができます.ラベルは<>で囲まれ、以下に示す.
ブラウザにはラベルは表示されません(<ラベル名>および).
すなわち、コンテンツ部分のみが表示される.
コンテンツの左側には開始タグ(opengtag)、コンテンツの右側には終了タグ(opengtag)があります.
終了ラベルカッコを閉じる前に/(スラッシュ)を覚えておいてください.
ほとんどのタグは、開始時に終了する必要があります.すなわち、開始フラグがあれば終了フラグが必要となる.
次のタグには開始タグと終了タグがあります.
<p></p>
<h1></h1>
<h2></h2>
<a></a>
逆に、開始と同時に終了するマークも存在する.
<img>
<br>
上記のタグには、タグとタグの間のコンテンツ部分は必要ありません.後で、私たちは自分で作成してさらに研究します.

01-3-2. attribute(プロパティ)


プロパティは開始タグにあり、1つのタグに複数のプロパティを指定できます.
以下、div、a、imgはタグであり、class、href、src、altは属性である.
<div class="title">시작!</div>
<a href="https://naver.com">네이버로 이동</a>
<img src="./me.png" alt="내사진">
参考資料)https://www.w3schools.com/html/html_attributes.asp

01-3-1. 要素(要素)


<タグ名>で始まり、で終わり、タグ間にコンテンツが含まれる構造を要素と呼びます.終了タグが必要ない場合は、タグ自体が要素です.
<h1>시작!</h1>
<img src="me.png">