HTMLを書いてみましょう

｜ 8819 PV ｜ 2019.01.22

favorite_border

こんにちは。スキルハブの吉田です。
さて、今日は実際にHTMLでコーディングしてみたいと思います。それでは始めましょう！

今日の内容

Demoを見ながら概要をつかむ

まずは無料の14講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

DEMO

今回は、架空の動物園サイトZooloppaと言うものを作っていきたいと思います。

まず始めに、Sublime Text 2を開いていきます。
spotlightで“Sublime Text 2“を検索して開きます。

Sublime Text 2を開くと下の画像の様な画面が出てきます。
ここにHTMLタグを書きます。

画面が出てきたら保存をしていきましょう。
メニューバーの“File”から“Save“を選択します。

Saveを選択すると下の画像の様な画面が出てきます。
そして、あらかじめデスクトップに今回作る架空のサイトZooloppa用のフォルダを用意しておいて、そこに保存します。

ファイル名は『index.html』という名前で保存します。
HTMLのファイル名は必ず半角英数字で入力し、最後に拡張子『.html』を必ず入れてください。

このように拡張子をつけて保存することによってSublimeTextの「補完機能」が使えるようになります。何か入力してTABキーを押すことで続きを保管してくれる機能です。例えばhtmlと打ち込みTABキーを押すと基本構造が自動で書き込まれるというたいへん便利な機能です。

保存ができたら、早速HTMLを書いていきましょう。
HTMLを書く時には、何がともあれ最初に書く物があります。
それは「この文書はHTMLだよ」と言う意味の<html></html>というタグを書きます。
その後、頭の部分を表現する<head></head>、ボディーを表現する<body></body>を書きます。
これがHTMLの基本構造になっていきます。なので最初に書く時は必ずこれを書きます。










　




そして、&lt;head&gt;&lt;/head&gt;の部分をヘッダーといいます。
この中にはページのタイトルを&lt;title&gt;&lt;/title&gt;というタイトルを表すタグを使って書きます。
今回はZooloppaというサイトを作っていきますので、“Zooloppa 東京“というタイトルをつけていきましょう。

<pre>

    <html>
    <head>
        <title>Zooloppa東京</title>
    </head>
    <body>

    </body>
    </html> 

ここまで書けたら、１度保存をしていきましょう。

メニューバーの“File”から“Save“もしくは、ショートカットキー　“Command+S“で保存します。    保存するとどうなっているかというと、デスクトップのZooloppaフォルダの中にindex.htmlというファイルができています。



このファイルをダブルクリックすると、白紙のページが出てきます。

ここまでコーディングしてきたのに白紙じゃないかと不思議に思う方もいるかもしれませんが、これは間違ってないんです。



ここまで書いたものは、ヘッダーの中の<title></title>というタグの中に書いた“Zooloppa 東京”という文字ですが、これはブラウザの見えている部分には表示されません。

ではどこに表示されるかというと、下の画像にあるタブの部分に「Zooloppa東京」とかろうじて表示されます。

実は<head></head>に囲まれた部分、ヘッダーという部分は人間に見える部分を書く場所ではなく、ページの情報を書く場所になっています。

そして人間の見える部分は<body></body>に囲まれた部分、ボディーに書きます。

例えば、下の画像の様に“Zooloppa東京へようこそ”とボディーの中に書いて保存します。

<html>
<head>
    <title>Zooloppa東京</title>
</head>
<body>
    Zooploppa東京へようこそ
</body>
</html>
そしてブラウザの更新ボタンを押すと、下の画像の様にブラウザに“Zooloppa東京へようこそ”と表示されます。

<img src="https://skillhub.s3.amazonaws.com/html_kouza/html_18.png">

このように&lt;body&gt;&lt;/body&gt;の中に書いたものが、いつも皆さんが見ているブラウザの見えてる部分に表示されます。
そしてここで、さらにボディーの中に“今週の特集”という言葉を追記して保存、ブラウザの更新ボタンを押します。

<pre>

    <html>
    <head>
        <title>Zooloppa東京</title>
    </head>
    <body>
        Zooploppa東京へようこそ
        今週の特集
    </body>
    </html>

そうすると下の画像の用にブラウザに“今週の特集”という文字が表示されました。



いかがだったでしょうか？今回は実際にHTMLでコーディングをしてみました。