はじめてのHTML
プログラムを書くためのエディタ(編集ソフト)はVSCodeを使用
１．新規ファイル作成時ファイル名に .html を付ける
２．html:5 と入力しTabキーを押下するとHTMLファイルのテンプレート
が自動入力される
画像の説明
- １行目→この文章はHTMLであるという意味
- ２行目→ページの中身は英語で書かれているという意味(enはEnglish)なので"(ダブルクォート)の間をjaに変更すると日本語になる
- <head></head>の中→UTF-8という文字セットで書かれていて、タイトルがDocumentという意味(タイトルは内容に合わせて変更する)
- <body></body>の間→表示されるページの中身を書く部分
- </html>→HTMLの終わりを示している
様々なHTMLタグ
ｈタグ
header(ヘッダー)の略、見出し
ｈタグは1〜6までの数字で、6段階の大きさの見出しを表現できる
<h1>1番目に大きい見出し</h1>
<h2>2番目に大きい見出し</h2>
<h3>3番目に大きい見出し</h3>
<h4>4番目に大きい見出し</h4>
<h5>5番目に大きい見出し</h5>
<h6>6番目に大きい見出し</h6>
開始タグ 終了タグ
ｐタグ
paragraph(パラグラフ)の略、段落
pタグで囲んだ前後に適当な余白が作られる
ｐタグ内で改行することも可能
改行は<br>タグを利用
aタグ
anchor(アンカー)の略、船のいかり
他のWebサイトへのリンクを設置できる
a → Tabキー押下でテンプレート利用可能
<a href=""></a>
リンクは"(ダブルクォート)の間に記入し、表示される文章はaタグの間に記入する
imgタグ
image(イメージ)の略、画像
画像を読み込むことができる。読み込めなかった時の代替えテキストも指定できる
img → Tabキー押下でテンプレート利用可能
<img src="" alt="" />
src=の後の"の間に画像のリンクを記入
alt=の後の"の間に代替えテキストを記入
代替えテキストは画像ファイルのURLが間違っていたり変更されたりして表示されない時に、何が表示されるはずだったか示す役割がある。また、視覚に障害のあるユーザー向けの読み上げソフトで画像の代わりに読み上げる対象となる。
<!-- -->
