前回 「第1回レッスン」を終え、今回からは自主学習を進めていきます。
contents
HTMLとは？
- HyperText Markup Language（ハイパー テキスト マークアップ ランゲェジ）
- Webページを作るための最も基本的なマークアップ言語
- HTMLタグを使って構成され、ブラウザで読み込まれることでWebページが表示される
ホームページもwebページだから、HTMLファイルを作成すればいいわけだね。
タグとは、<>このカッコで括られた箇所を指します。
<H1>ハロー</H1>このように文字列ハローをタグで囲うことで、HTMLを記述することができます。H1については後述します。
HTMLファイルを作成できるソフトを用意しよう
1.テキストエディタを用意しよう
HTMLファイルを作成するためには、まずテキストエディタとよばれるソフトが必要です。もしパソコン内にエディタが無ければ、無料のエディタをダウンロードしましょう。
2.エディタでファイルを保存しよう
エディタをダウンロードして起動すると、コードの記述ができるようになります。
コードを記述してファイルを保存する際に、ファイル名のうしろ、ドットの後に続く「拡張子」と呼ばれる箇所（ファイルの種類）を.htmlと記述することで、HTMLファイルを作成することができます。
下記の画像はSublimeでのファイル保存の画面になります。ファイルタブからSave Asを選択します。
続いてファイル名の入力欄でファイル名+拡張子（この場合は.html）と入力して保存ボタンを押せばHTMLファイルが出来上がります。
（まだ何のコードも書いていないけど…）
HTMLを書いてみよう
とりあえず「ホームページの作り方 HTML」で検索ヒットしたwebサイトの参考コードを丸ごとコピー＆ペーストしてみよう。
1.エディタにコードを貼り付けよう
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ホームページ</title>
</head>
<body>
<h1>ホームページ</h1>
<p>ホームページの作り方</p>
<img src="test.ipg" alt="">
<a href="https://hanesoft.com/archives/1">解説はこちら</a>
</body>
</html>2.ファイルを保存してHTMLファイルを作成しよう
次に、先程のファイル保存と同じ要領でファイルに名前をつけて保存します。新しいフォルダを用意して、格納しておきましょう。
3.ファイルをブラウザで表示させよう
出来上がったHTMLファイルをパソコン上でダブルクリックすると、ブラウザで読み込ませることができます。試しにダブルクリックすると、以下の様に表示させることができます。
この時点では自分のパソコンのデスクトップ上でファイルを表示させて閲覧しているだけの状態なので、世界中に公開されているわけではありません。
自分のパソコン内で見えているだけ。
（ちょっと焦ったわ）
今回HTMLで使用されていたタグ一覧
- DOCTYPE宣言（ドックタイプ宣言）…「これはHTMLで書かれた文章ですよ」とWEBブラウザに教えてあげるために、文書型を定義すること。これはタグではない。
- htmlタグ…「ここからここまでがhtmlですよ」と宣言するためのタグ。ドックタイプ宣言と被っているけど、こちらはタグで、あちらはタグではない。
- headタグ…文書のヘッダ部分を指定するタグ。htmlタグの後に書く。ブラウザの画面上では表示されないが、ブラウザに様々な情報を伝える役目を持つ。
- metaタグ…文書のメタ情報を指定するタグ。meta=メタとは「大前提となる設定」という意味で、ブラウザやロボット型検索エンジンにページの情報を伝える役目を持つ。メタ情報（サイトの制作者や文字コードの指定など）はブラウザ上では表示させないものなので、必ずheadタグ間に記述する。
- bodyタグ…文書の本体部分を指定するタグ。このタグ間に記述されたテキストや画像が実際のブラウザ上に表示される。
- imgタグ…文書内に画像を表示するためのタグ。GIF、JPEG、PNGの画像形式を指定することができる。
- h1タグ…見出しを指定するタグ。見出しの大きさに合わせてh1（最大）からh6（最小）まで指定することができる。
- pタグ…段落を指定するタグ。ブラウザ上ではpタグ後に1行分改行されて表示される。
- ulタグ…順序がない箇条書きのリストを表示するためのタグ。（順序がある番号付きのリストはolタグを使用する）リストの各項目は<li>で記述する。
- aタグ…リンクの出発点や到達点を指定するタグ。
一応タグの用途は調べたけど、まだ理解するまでには至ってないよ。
自主学習1-1について、講師からの評価
この調子でがんばってください。
ちなみに、HTMLタグはHTML4からHTML5になってタグの種類がすごく増えました。（HTML5の5はHTMLのバージョンを意味します）
エンジニアがHTMLタグを全て暗記しているというわけではないですよ。自分の場合、１つ１つ覚えているというよりは種類や用途によって「なんとなく把握している」といった感じです。
何度かWebページを書いていれば、よく使うタグは自然と覚えます。わからなくなったら調べて、それで正しく使えていればまったく問題ありません。
byゴミリョ
次回の記事
にほんブログ村
