HTMLコース じてん

ホームページを つくる「タグ」の きほん

🌟 HTMLの きほんルール 🌟

HTMLは「タグ」という しるし で、コンピューターに「これは みだしだよ」「これは ぶんしょうだよ」と おしえる ことばだよ。

きほんの タグ じてん

<h1> 〜 <h6>
みだし (Heading)

<h1> が いちばん おおきな みだし。
<h2>, <h3> と すうじが おおきくなるほど、みだしは ちいさくなるよ。

かきかた

<h1>おおみだし</h1> <h2>なかみだし</h2>

プレビュー（みため）

おおみだし

なかみだし

<p>
ぶんしょう (Paragraph)

「だんらく」って いみだよ。
ホームページの ふつうの ぶんしょうは、これで かこもう！

かきかた

<p>よろしくね</p>

プレビュー（みため）

よろしくね

<ul> と <li>
てんてんリスト

ul (じゅんばんがないリスト) で ぜんたいを かこんで、
li (リストのこうもく) で ひとつずつ かこむよ。

かきかた

<ul> <li>りんご</li> <li>みかん</li> </ul>

プレビュー（みため）

  • りんご
  • みかん
<ol> と <li>
ばんごうつきリスト

ol (じゅんばんがあるリスト) で ぜんたいを かこむよ。
なかみの li は ul と おなじ！

かきかた

<ol> <li>いちばんめ</li> <li>にばんめ</li> </ol>

プレビュー（みため）

  1. いちばんめ
  2. にばんめ
<a>
リンク (Anchor)

ほかのページへの とびら 🚪 をつくるよ。
a は「いかり⚓」の いみ。
href="とびさき" が かならず ひつよう！

かきかた

<a href="...">Googleへいく</a>

プレビュー（みため）

Googleへいく
<img>
がぞう (Image)

しゃしんや イラストを ひょうじ するよ。🖼️
src="がぞうのばしょ" で がぞうを しテイするんだ。
alt="せつめい" は、がぞうが でないときにでる もじだよ。

かきかた（おわりタグは いらない！）

<img src="..." alt="せつめい">

プレビュー（みため）

キャラクター

ぜんぶ くみあわせた れい（じこしょうかい）

これまで まなんだ タグを ぜんぶ つかうと、こんな ページも つくれるよ！

かきかた

<h1>ぼくの じこしょうかい</h1> <p>はじめまして！HTMLを べんきょうちゅう です。</p> <h2>すきなもの リスト</h2> <ul> <li>ゲーム</li> <li>サッカー</li> </ul> <h2>ペットの しゃしん</h2> <img src="..." alt="うちのねこ">

プレビュー（みため）

ぼくの じこしょうかい

はじめまして！HTMLを べんきょうちゅう です。

すきなもの リスト

  • ゲーム
  • サッカー

ペットの しゃしん

うちのねこ