1か月授業内容まとめ - テキスト(5)マークアップのルール

覚えておきたいマークアップのルール

  • テキスト、P.035
  • 要素の入れ子(ネスト)と親子関係

f:id:web-css-design:20160903212107p:plain

f:id:web-css-design:20160903213613p:plain

POINT

  • テキスト、P.037
  • アークアップの肝は、コンテンツの内容を理解して「文書構造」を見つけること
  • HTMLの文書構造の基本は「見出し」「段落」「箇条書き」
  • 要素の入れ子・内包関係のルールを厳守しよう

改行を挿入する

  • テキスト、P.039
  • ひと段落の中の読みやすさを作るために、強制的に改行を作ります
  • 終了タグのない「空要素」です

重要な語句を強調する

  • テキスト、P.039
  • あくまでも「重要である」ことを意味付けします
  • デザイン的に太く見せたいためにstrong要素を使用することはできません

画像を挿入する

  • テキスト、P.040
  • 「image source」を意味する「img要素」と「src属性」をセットで記述します
  • width属性とheight属性は、マルチデバイスに対応させる必要のある現在は、記述しません
  • 「alt属性」は、適切な代替テキスト入れますが、文字が入らなくても必須です(記述しない場合は、文法エラーです)
ブロックレベル要素とインラインレベル要素
  • 画像は、インラインレベル要素のためブロックレベル要素の中に入れる必要があります

f:id:web-css-design:20160903222656p:plain

<p><img src="img/subaru.jpg" alt="すばる"></p>

リンクを設定する

  • テキスト、P.040
  • テキストリンク、画像リンク、メールリンクの3種類のリンクがあります
  • メールリンクは、セキュリティの観点から今では使用されることはありません
ハイパーリンクとは
  • 遷移先の情報を記述して、クリックするとその内容が表示されるようにする仕組みです
<a href="index.html">コンテンツ</a>

絶対パス相対パス

  • テキスト、P.044
  • ハイパーリンクを利用するときに、そのファイル(またはWebページ)がある場所を記述する仕組みのことです
絶対パス
  • http から始まるWebサイトのアドレスを使ってファイル(またはWebページ)がある場所を記述する
相対パス
  • 現在のファイルから目的のファイルまでの相対的な位置関係を記述する

著作表記

  • サイト制作時に初心者の場合、テキストや画像が全て自分の作成したものとは限りません
  • そのときには「All Right Reserved.」という記述は、しないようにしましょう