【STEP3】HTMLの書き方入門

今回はWebページのベース

HTMLのコードを書くためのルールと用語を解説していきます

はじめはきっと、なんのことやらさっぱりわからなくて戸惑うと思います

でもHTMLの書き方のルールはそれほどむずかしくないです

HTMLにはじめてふれる方にもわかりやすく説明していきますね

HTMLってなんだろうね？
わかるとますますおもしろいよ♪

こんなことがわかる！

HTML用語の意味
HTMLの書き方

初心者さん向け♪HTML入門
HTMLを書いてみよう！
まとめ

初心者さん向け♪HTML入門

HTMLというのはWebページの骨組みみたいなものです

Webページを一軒のお家に例えると

HTMLは、柱や梁・壁で仕切ったお部屋の割り付けで、お家の構造そのものという感じです

お家は構造のままでも雨風しのげるけど、やっぱり見栄えもさせたいですよね

次回に説明するCSSというもので、お家に壁紙を貼ったり照明をつけたり、ステキな家具を置いたりしておしゃれに仕上げていく感じです

HTMLは「エイチティーエムエル」とそのまま読みます

Hyper Text Markup Languageハイパーテキストマークアップランゲーｼﾞの略で

「マークアップ」したコンテンツを、
「ハイパーテキスト」でつなぎ合わせる、
コンピューター用の「言語」という意味です

？？？ですよね

説明していきますね

HTMLってなに？

たとえば、
「桜がキレイに咲いた！Webページを作ってみんなにお知らせしたい！」
という場合

・ここは文章で説明するところ
・ここは画像をみてもらおう
・ここはわかりやすいようにリストにしよう
・おもしろくてためになるページが他にあるから紹介しよう

というコンテンツを準備したとします

人間の目で見れば、これは写真だな、とか箇条書きの説明だなということがぱっと見てわかると思うのですが

コンピューターはそれが何なのかわからないのです

Webページというのは、コンピューターが書かれた言葉の意味を読み取り、ブラウザに表示させるものです

そこで人間の言葉をコンピューターが理解できる言葉に書き換えて、ファイルとしてまとめておく必要があります

これがHTMLです

HTMLとは

人間の言葉をコンピューターが読みやすい言葉に変換してまとめたもの

ということです

つぎはHTMLの用語の説明だよ

ハイパーテキストってなんだ？

Hyper Text Markup Languageハイパーテキストマークアップランゲーｼﾞ

ハイパーテキストというのは、文字に関連性を持たせたり結びつけたりすることです

文字の関連性というのは、テキスト（文字・文章）をクリックすると

そのテキストに関係のあるページに移動をしたり
説明文を表示したり

といったインターネットではおなじみの仕組みのことです

「ここに写真を貼るよ」「動画のある場所はここだよ」という指示をして関連性を持たせると画像や動画も表示することができます

マークアップってなんだ？

Hyper Text Markup Languageハイパーテキストマークアップランゲーｼﾞ

Webページに書かれているテキスト（文字・文章）や表示される画像は、タグという目印を使って書かれています

たとえばこんなものです

<div>
　<h1>こんにちは！</h1>
　<p>HTMLの練習をしましょう！</p>
</div>

ここでは

”<h1>こんにちは！</h1>”
　の部分が「見出し」の目印

”<p>HTMLの練習をしましょう！</p>”　
　の部分が「段落」の目印

タグという目印に囲まれて意味を持った文字が

「見出し」とか「段落」というページのコンテンツとしてブラウザに表示されるのです

これがマークアップです

つぎはHTMLの書き方のルールです
HTMLの超基本！
大前提！
知ってておいて欲しい初歩の初歩をまとめているよ

HTMLを書いてみよう！

HTML用語の説明と書き方

要素（Elements）

要素というのは

「開始タグ<**>」と「終了タグ</**>」で
はさんで囲まれたかたまりのこと

です

言い換えると

ふつうの文字や文章がタグで囲まれると要素

になります

＜**＞○○＜/**＞の　『○○』の部分はコンテンツといって、情報の内容です

文章だったり、画像だったり、リンクだったり

つけるタグによって要素の役割が変わります

Webページに表示したい情報の内容によってつけるタグを選択します

たとえば

この「ｐ」は『段落（paragraphパラグラフ）』という目印です

<p>○○</p>で囲まれた部分は
『p要素』といって
『文章のまとまり』という役割を持ちます

この「h」は『見出し（headlineヘッドライン）』という目印です

<h1>○○</h1>で囲まれた部分は
『h1要素』といって
『見出し』という役割を持ちます

要素を書くときのルール

開始タグと終了タグ（閉じタグとも言います）の間に
テキストなど、Webページに表示したいコンテンツを書く

属性と値とは

属性というのは

タグがどのような動作をするのか指示する役目をします

タグ（要素名）にいろいろな情報をもたせるよということです

タグに追加の設定をしているという目安にもなります

値というのは

追加設定の具体的な指示の内容です

タグに名前をつけるという感覚です

よくわからないと思うので例を挙げて説明しますね

divディブとはグループを作るときによく使う要素名です

divで作るグループ（div要素）はHTMLファイルの中でたくさん作ることができます

そのdivのグループごとにいろいろ情報を設定することができます

ですがdivのグループがたくさんできてしまうと

「このdivタグのグループにはどんなことが書いてあるんだけ？divタグだらけでわけがわからない？？？」となってしまいます

その分類のためにdivタグに名前を付けてあげるという感じです

<div class="training">
　<h1>こんにちは！</h1>
　<p>HTMLの練習をしましょう！</p>
</div>
<div class="challenge">
　<h2>HTMLはWebページの骨組みです</h2>
　<p>おもしろいWebページを作ろう</p>
</div>

ここではふたつのdivのグループがあります

ひとつは「training」という名前のついたグループ

もうひとつは「callenge」という名前のついたグループです

『class属性』はCSSというWebページを装飾するファイルで、文字の色やレイアウトなどをするときに使う属性です

おなじdiv要素ですが、CSSファイルで「training」と「callenge」でそれぞれの別の装飾をすることができます

属性と値を書くときのルール

開始タグの中に書く
要素名と属性の間に半角スペースをあける
値はダブルクォーテーション(″″)で囲む
ひとつのタグ内で複数の
『属性＋値』を設定することができる

HTMLのタグは単体で使われることはほとんどありません

『タグ（要素名）＋属性＋値』とのセットで使われることがほとんどです

HTMLファイルの構成

HTMLファイルはコードの書き方にルールがあります

下のコードを例に確認していきましょう

<html>
　<body>
　　<div>
　　　<h1>こんにちは！</h1>
　　　<p>HTMLの練習をしましょう！</p>
　　</div>
　　<div class="training">
　　　<h2>HTMLはWebページの骨組みです</h2>
　　　<p>おもしろいWebページを作ろう</p>
　　　<p>どんなものができるか<span>ドキドキ</span>しますね</p>
　　　<p>作る楽しみを味わいましょう！</p>
　　</div>
　</body>
</html>

すべてのコードは
<html>・・・</html>の中に入れて書きます

<html>要素の中に<body>要素を書きます

Webページのコンテンツは
<body>・・・</body>の中にすべて書きます

この例では

・<div>要素
・<h1>要素
・<h2>要素
・<p>要素

などのタグで目印をつけてコンテンツを書いています

HTMLファイルの書き方ルール

文章をグループ分けするような感覚で
入れ子構造で書いていく

つぎはHTMLを書いているときに
よく使うタグの紹介だよ

よく使うタグ

HTMLで頻繁に使うタグを一覧にしています

HTMLのタグは100個以上あります

その中でも、もっともよく使うタグをまとめました

<h1>:見出しをつくる

<h1>***</h1>

h1〜h6まであります

数字が少いほど重要度は高くなります

おもにh1タグはコンテンツのテーマ、タイトル

h2〜h6は本文の見出しとして使われます

見出しの目的はコンテンツを区切って読みやすくわかりやすく伝えることです

<h1～h6>（headlineヘッドライン）の
書き方のルール

<h1>大見出し
<h2>～<h6>小見出し
見出しの順番は小さい数字順に
＜h3＞の中（下）に＜h2＞という書き方はNG
<h*>○○</h*>要素で囲まれたテキストは改行される

<p>：段落を作る

<p>***</p>

コンテンツの中身です

文字、本文は＜P＞タグに書きます

<p>（paragraphパラグラフ）の書き方のルール

<p>で開始して</p>で終了するまでが文章のひとかたまり
<p>要素で囲まれたテキストは改行されます
　<p>*** 本文 ***</p>改行
　<p>*** 本文 ***</p>改行
　<p>*** 本文 ***</p>改行

<a>：リンクを貼る

<a hrefｱﾝｶｰｴｲﾁﾚﾌ=”URL”>***</a>

<a>***</a>タグで囲ったテキストがリンクになります

リンクの飛び先指定は、hrefｴｲﾁﾚﾌ属性を追加します

URLの部分に表示させたいリンクを書きます

例)　

<a href=
“https://aoi-challenge.github.io/code（リンクの飛び先指定ＵＲＬ）-challenge/“>
Codeチャレンジブログ(リンクテキスト)@self made
</a>

＜a＞（ｱﾝｶｰﾘﾝｸ）の書き方のルール

リンクを貼りたい場合は
<a href=”URL”>***</a>と書く
＜a＞***＜/a＞で囲まれたテキストがリンクになる
属性は開始タグに書く
＜a＞タグとhref属性はセットで使う
URLはダブルクォーテーション(″″)で囲む

<img>：画像を表示させる

<img srcｲﾒｰｼﾞ　ｿｰｽ=”画像のある場所”>

imgというのは「image」の略です

srcソース属性で別の場所に保管してある画像ファイルを読み込みます

“画像のある場所”を指定して表示させたいリンクを書きます

テキストを囲む必要がないため終了タグはいりません

“画像のある場所”にはふたつの指定のしかたがあります

・http//で指定する
（＝絶対パスといいます）

・HTMLファイルがある同じフォルダの中を指定する
（＝相対パスといいます）

<img>（ｲﾒｰｼﾞ）の書き方のルール

画像を表示したい場合は
<img src=”画像のある場所”>と書く
＜img＞タグとsrc属性はセットで使う
“画像のある場所”はダブルクォーテーション(″″)で囲む
テキストを囲まないので
終了タグ＜/＞はいらない

<li>：リストをつくる

リストの表現のしかたを決めて、その中にリストにしたいテキストを書きます

入れ子構造（階層）にして書いていきます

<ul>は黒点で表示

・***
・***
・***

<ol>番号（連番）で表示

1.***
2.***
3.***

ここで箇条書きにしたいテキストを囲みます

入れ子構造にするには＜li＞＜/li＞の部分をインデント（字下げ）します

<li>（リスト）の書き方のルール

＜ul＞＜ol＞などのタグと＜li＞はセットで使う
入れ子構造にしてひとつのグループにして書く

まとめ

「タグ」という言葉がたくさんでてきましたね

HTMLというのは

文章に目印（タグ）をつけて、意味を持たせて（要素）コンテンツ（情報）をブラウザに表示させる

というコンピューター用の言葉です

タグを使えるようになることは、HTMLの書き方をマスターするはじめの一歩ということです

タグにはたくさんの種類があるけど、よく使うものはそれほど多くはないです

何度か書いていくと書き方のコツみたいなものがわかってくるので、まずはいろいろ書いてみましょう！

次はCSSの入門編です

ここまで読んでくれてどうもありがとう♪