HTML入門
HTML(Hyper Text Markup Language)とは、ウェブページ上の文章を記述するための言語です。
基本の構造として
<html>
<head>
<title>This is the title</title>
</head>
<body>
Hello World!
</body>
</html>という形をとります。
項目内容
では実際に上のコードを書いてみましょう。
ターミナルを開き
vim index.html
と入力してindex.htmlというhtmlファイルを作ってみましょう。
そこに上で紹介した基本の構造を入力してみましょう。
入力が終わり、保存をしたら
open index.html
とターミナルに打ち込み、実際にブラウザでhtmlファイルを開いてみましょう。
のような画面になっているかと思います。
それではこのコードがどのような意味をもっているのか、パーツごとに見てみましょう。
htmlのコードは、基本的に、タグというものに囲まれています。
基本構造の例で出てくるのは、<html>、<head>、<title>、<body>というタグです。
それぞれ、<>で囲まれていて、</html>、</head>、</title>、</body>というように、タグの終点には/を含む<>が記述されています。
これらのタグで囲むことによって、それぞれのパーツの役割を持たせることが可能になっています。
それぞれの役割は以下のとおりです。
<html>~</html>で囲まれた範囲は、html文で記述されていることを示しています。
<head>~</head>で囲まれた範囲は、ヘッダと呼ばれ、<body>タグよりも先に読み込まれます。
ここに記述されていることは、基本的にはブラウザ上では表示されません。
<title>~</title>で囲まれた範囲は、ブラウザのツールバーに表示されるタイトルになります。
今回の例の場合は、This is the titleと記述されているので、表示されているタイトルも同じくThis is the titleと表示されていることがわかります。
このタグはheadタグに必ず含んでください。
<body>~</body>で囲まれた範囲は、実際にブラウザで見える部分となります。
今回の例の場合は、Hello Worldと記述されているので、実際のブラウザ上でもHello Worldと表示されているのがわかります。
他にも様々なタグというものが存在しているので、気になったものは検索してどういった意味を持っているかを調べると良いと思います。
以上でHTML入門は終了です。お疲れ様でした。
webページを作成する上での基本となりますので、基本構造がどうなっているのか等、把握しておきましょう。