HTML入門：見出し、文章、画像、文書情報のタグ
今日からHTMLの勉強を始めます。
そもそもHTMLとは。このページから引用すると…
ハイパーテキスト・マークアップ・ランゲージ
HTML（エイチティーエムエル、HyperText Markup Language）は、ウェブページを作成するために開発された言語です。 現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。
僕も私もいつも見ているあんなページやこんなページを作っている言語。
例によってドットインストールくんに教わっていきます。
HTML入門(全15回)
https://dotinstall.com/lessons/basic_html_v4
※ドットインストールでは事前に以下の学習を済ませるといいそうです。
HTML/CSSの学習環境を整えよう [Windows編 or Mac編] (全4回)
https://dotinstall.com/lessons/basic_pcsetup_win
Mac編
https://dotinstall.com/lessons/basic_pcsetup_mac
#1～#2
Atomでhtmlファイルを編集する方法。
htmlモードにすると予測変換的にタグが書けるので超便利。
#3
タグを使う。以下は一例。
<h1>ああああ</h1> 見出し
<p>いいいい</p> 文章(パラグラフ)
頭の<h1>を開始タグ、最後の</h1>を終了タグ、テキストを開始/終了タグで囲んで意味づけすることをマークアップという。
#4
画像を追加…<img> ※このタグはテキストを囲まないので終了タグがないよ
<img src="(ファイルのパス)">
ファイルのパスはindex.html(現在表示しているページ)から見たときでいい。
1つ下の階層だったら<img src="img/aaa.png">となる。
フォルダの区切りにはスラッシュを使うので注意。
画像サイズを調整するときは<img src="img/aaa.png" width="140" height="140">のように書けばよい。
また、今回書いたsrc="img/aaa.png"やwidth="140"などのことをタグの属性情報という。
<img>タグにはaltという属性も付与できる。ページの表示中などに表示される説明文が設定できるよ！！
#5
タグや属性には大文字・小文字の区別はない。ただし全角・半角は影響するので気をつけろ。特に全角スペース、おめーはダメだ。
#6
「これはhtmlで書かれていますよ」と宣言する必要がある。
そのためには文書の頭に<!DOCTYPE html>とつける。
慣習的にDOCTYPEは大文字だそうな。
どこからどこまでがhtml文書であるかを示すためには、
<html> </html>のタグを使う。
これは日本語のページだぜ！と示すときは<html lang="ja"> </html>と書く。
ヘッダであることを示すには<head> </head>、
本文であることを示すには<body> </body>とする。
#1～#6までのレッスンでは、
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body><img src="img/taro.png" width="140" height="140" alt="太郎のアイコン">
<h1>山田太郎</h1>
<p>HTML勉強中です</p>
</body>
</html>
という感じになっている。
#7
文書に関する情報を設定していく。
今回はheadタグで下記のようにマークアップする。
<meta charset="utf-8">
これでPCが使用する文字コードをUTF-8に指定している。UTF-8が主流らしい。
次は文書のタイトル。
<title> あーるのお勉強ページ </title>
これでchromeのタブに表示される名前が「あーるのお勉強ページ」になる。
また、その名前の左に表示されるアイコンも以下のタグで設定できる。
<link rel="icon" href="(icoファイルのパス)"> ※終了タグなし
icoファイルの作り方は特殊らしいので、暇なときに見てみたい。
文書の説明を加えるには以下のタグ。
<meta name="description" content="あーるのポートフォリオサイトです。">
検索エンジンでの結果に載ったりもするらしいので丁寧に越したことはない。
これで15回中7回が終わったので一度切り上げて続きは明日。
明日はこのレッスンを終了できるようなペースでいきます。金曜だからある程度夜更かしもできるし。
コードとブログを同時に書いているので結構時間がかかる。
明日も仕事と勉強頑張るぞ。
今のところ、このレッスンで作成したindex.htmlは以下の通り。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>あーるのポートフォリオサイト</title>
<link rel="icon" href="favicon.ico">
<meta name="description" content="あーるのポートフォリオサイトです。">
</head>
<body>
<img src="img/taro.png" width="140" height="140" alt="太郎のアイコン">
<h1>山田太郎</h1>
<p>HTML勉強中です</p>
</body>
</html>
