エクストリームHTML講座

解説動画

HTMLって何？

HTMLとは、Hyper Text Markup Languageの略

Markupとは、文字にマーキングをすることです。

マーキングは、タグを使うことで表現することができます。

具体的には、以下のように「西暦239年、邪馬台国の女王である卑弥呼は、魏に使いをおくった」というように、「卑弥呼」を目立たせたい時は、

西暦239年、邪馬台国の女王である<b>卑弥呼</b>は、魏に使いをおくった

このbのタグで囲まれた部分は、「太字」になります。

<b>   </b>

以下のものを開始タグと言います。

<b>

以下の/が付いているものを閉じタグと言います。

</b>

開始タグと閉じタグで囲まれた部分に効果を発揮します。

タグの効果

タグには、bタグのようにいろいろな効果があります。
例えば、文字の大きさを変える、太字にする、線を引く…

paiza ラーニングの講義の右側のページを使って以下のコードをコピーして「コードの実行」してみよう。

文字を<b>太字</b>、<i>斜体</i>、<u>下線</u>、<s>取り消し線</s>にします。

タグの意味

bタグ: 太字にする
iタグ: 斜体にする
uタグ: 下線を引く
sタグ: 取り消し線を引く

HTMLファイル

HTMLファイルを作る時、htmlタグを使ってHTMLファイルであることを明記することができます。

<html></html>

HeadとBody

HEAD(頭)　・・・　考えていることは目に見えない
BODY(体)　・・・　体は目に見える部分

HEADは、頭の中身です。
実際は、いろいろなファイルを読み込んだり、HTMLファイルの定義を書きます。

BODYは、我々がWebブラウザ（safariやgoogle chromeなど）を見たときに、実際に目に見える部分です。

HTMLファイルは、以下のようにHTMLタグ、HEADタグ、BODYタグを使って表現します。

<html>
<head>ここでHTMLファイルの定義やファイルを読み込みます</head>
<body>ここに目に見える部分を表示</body>
</html>

基本的なタグ

paiza ラーニングの講義の右側のページを使って以下のコードをコピーして「コードの実行」してみよう。

<h1>見出し１：Webサイト名や大きなタイトルなどに使用する</h1>
<h2>見出し２：大きなタイトルやサブタイトルに使用</h2>
<h3>見出し３：h1やh2の下に小さなタイトルを置きたいときに使用</h3>
<h4>見出し４：h1,h2,h3の下にタイトルを置きたいときに使用</h4>
<h5>見出し５：h4と同じ</h5>
<h6>見出し６：h4と同じ(h6まで作れるよ！）</h6>

<p>pタグは、パラグラフ（段落）という意味のタグです。この作文などで段落で文章を書きますが、その段落の単位で文章を書くことができます。説明文や長い文章を書くときに便利です。</p>

<a href="#">アンカーリンクタグです。ページを移動するときに使います。hrefの中に移動先のURLを書きましょう。</a>

<img src="https://k-sasaking.github.io/clark-programing-manual/img/test-img.png" height="400"/>

<div>divタグで囲まれると、特に効果はないですが、レイアウトとして区切ることができます。１つのブロックとしてまとめるときに便利です。（divは、division:分割という意味）</div>

タグの意味

h1〜h6: header タイトル
p: paragraph 段落
a: anchor link ページ同士の繋がり
img: image 画像
div: division 分割

属性

aタグのhrefやimgタグのsrcのように、タグの中に詳細情報を書くことで効果を発揮するものもあります。

特殊なタグの書き方

※「開始タグ」も「閉じタグ」がなく、imgタグのように単体で書くこともできます。（一部のタグのみ）

<img />

複数のタグで表現できるタグ（リストとテーブル）

<ol>
    <li>olタグもリストの表示をすることができるタグです。</li>
    <li>ulタグとolタグの違いは、「・」か「数字」の違いです。</li>
    <li>liタグはいくつも書くことで、箇条書きなどをするときに便利です。</li>
    <li>olタグとliタグはセットで使いましょう。</li>
</ol>

<ul>
    <li>ulタグはリストの表示をすることができるタグです。</li>
    <li>ulタグの中に、liタグを入れるとはリストの表示をすることができるタグです。</li>
    <li>liタグはいくつも書くことで、箇条書きなどをするときに便利です。</li>
    <li>ulタグとliタグはセットで使いましょう。</li>
</ul>

<table>
    <tr>
        <th>タグ</th>
        <th>タグの説明</th>
        <th>備考</th>
    </tr>
    <tr>
        <td>table</td>
        <td>テーブルタグは表を作るときに使います。</td>
        <td></td>
    </tr>
    <tr>
        <td>tr</td>
        <td>trは、表の行を表すタグです。trのタグの数だけ行を追加できます。</td>
        <td>trはtable rowの略</td>
    </tr>
    <tr>
        <td>th</td>
        <td>thは、表のヘッダータグです。この表の「タグ」「タグの説明」「備考」の部分。trタグの中に書きます。表のヘッダーがいらない場合はなくて良い。</td>
        <td>thはtable headerの略</td>
    </tr>
    <tr>
        <td>td</td>
        <td>tdは、表のデータを挿入するタグです。trタグの中に書きます。</td>
        <td>tdはtable dataの略</td>
    </tr>
</table>

タグの意味

ol: order list 順番のあるリスト
li: list リストの１行
ul: unorder list 順番のないリスト
table: table 表
tr: table row 表の行
th: table header 表のタイトル
td: table data 表の１マス

上記のタグを使って自己紹介ページを作るとどうなる？

サンプル

<html>
<head>
</head>
<body>
   <h1>Webサイトの名前</h1>
   <p>
       私のWebサイトにアクセスありがとうございます。<br/>
       私のWebサイトでは、プロフィールや好きなことの紹介をしています。
   </p>
   <h2>私のプロフィール</h2>
   <table>
       <tr>
            <td>名前</td>        
            <td>〇〇太郎</td>           
       </tr>
       <tr>
            <td>写真</td>        
            <td><img src=""/></td>           
       </tr>
       <tr>
            <td>誕生日</td>        
            <td>20XX年M月D日</td>           
       </tr>
       <tr>
            <td>出身</td>        
            <td>地球</td>           
       </tr>
       <tr>
            <td>趣味</td>        
            <td>プログラミングを勉強すること</td>           
       </tr>
   </table>
   <h2>私の好きなこと</h2>
   <ul>
       <li><a href="#">好きな漫画</a></li>
       <li><a href="#">好きなゲーム</a></li>
       <li><a href="#">好きなYoutube</a></li>
   </ul>
</body>
</html>