HTMLを書いてみる

新規ドキュメント作成

  1. Bracketsで管理フォルダーを選択
  2. 新規ドキュメント作成
  3. ファイル名を「index.html」として保存
基本構造を入力する
  1. DOCTYPE宣言を入力
  2. html要素を入力
  3. head要素とbody要素を入力
  4. meta要素を入力
  5. title要素を入力
  6. ブラウザでプレビュー（ブラウザでファイルのパスを入力します）
    ※Bracketsのライブプレビュー（雷アイコン）は使用せずに、ブラウザにファイルのアイコンを重ねて表示します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
</body>
</html>

f:id:web-design-lesson:20160504190921j:plain

コンテンツを入力

  • 見出しと本文の組み合わせ
大見出しと段落
  • hは「heading」の略
<body>
<h1>HTMLを書いてみよう</h1>
<p>練習として簡単なレポート文書を作成してみましょう。</p>
</body>
リスト
  • 箇条書きにすることによって文章のポイントをわかりやすく伝える役割
  • 順序が決められた番号付き箇条書き「ol（ordered list）」
  • 順序を入れ替えても意味が変わらない番号なし箇条書き「ul（unordered list）」
  • 各要素は「li（list item）」として記述
<h2>練習のコツ</h2>
<ul>
<li>焦らない。ゆっくりひとつづつ。</li>
<li>まめに保存。確認。</li>
<li>楽しみながら取り組む。</li>
</ul>
<p>焦らずにひとつずつじっくり進めてください。楽しみながら取り組むことが大切です。ただ、保存はまめにしましょう。</p>


f:id:web-design-lesson:20160504233718j:plain

リンク
<p><a href="http://www.felica.info/kikin/web/boshu.shtml">フェリカテクニカルアカデミーWebサイト制作科募集ページ</a></p>


f:id:web-design-lesson:20160504234927j:plain

画像にはimg要素を使用する

  • 画像を表示するには、img要素を使用しsrc属性に画像ファイルのパスを記述します
  • alt属性は、画像が閲覧できない環境向けに画像との置換が可能なテキスト（代替テキスト）を記述します
  • alt属性は、必須です
<p><img src="img/sample.jpg" alt="フェリカテクニカルアカデミーWebサイト制作科募集ページ"></p>

http://www.felica.info/kikin/web/boshu.shtml

Webページで使える画像のファイル形式

  • PNG（8bitと24bitの２種類。256色かフルカラーを扱う。透過処理が可能）
  • JPEG（フルカラー 約1,677万色の画像を扱うことができ、圧縮率を変更できる）
  • GIF（画像の一部を透明にする透過処理ができ、パラパラ漫画のようなアニメーションにすることも可能）
画像の大きさ
  • 基本的には、表示100％のサイズで作成する
  • レティナディスプレイに対応させる場合は、最適な画像を準備する必要があります

HTMLに画像を挿入

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<h1>HTMLを書いてみよう</h1>
<p>練習として簡単なレポート文書を作成してみましょう。</p>
<h2>練習のコツ</h2>
<ul>
<li>焦らない。ゆっくりひとつづつ。</li>
<li>まめに保存。確認。</li>
<li>楽しみながら取り組む。</li>
</ul>
<p>焦らずにひとつずつじっくり進めてください。楽しみながら取り組むことが大切です。ただ、保存はまめにしましょう。</p>
<p><a href="http://www.felica.info/kikin/web/boshu.shtml">フェリカテクニカルアカデミーWebサイト制作科募集ページ</a></p>
<p><img src="img/sample.jpg" alt="フェリカテクニカルアカデミーWebサイト制作科募集ページ"></p> 
</body>
</html>

読みやすいHTMLを書く

いずれも、適切に利用することは問題ありませんが、初心者は不用意に多用することによりエラーの原因にもなります。
注意して利用しましょう。（初心者が視覚的に追いにくくなるため、HTMLの記述にインデントは使用していません。）
Adobe BracketsまたはDreamweaverを利用している時は、親要素が子要素を包括してたたむ機能があるため、それを利用すればあえてインデントにこだわる必要はありません。