HTMLの勉強|Webサイト作りの基礎

初心者向けの向けのHTMLの勉強の仕方を綴っていきます。かくいう私もWebサイト作りの初心者です笑

headには何を書けば良いのかを勉強しましょう!part3

さて、headタグについての最後の勉強です。

今回で、一通りheadタグについての理解ができたと思います。

headタグは、検索エンジン対策としてもとても大事なポイントになりますので、

しっかりと勉強をしましょう!

それでは、headタグについて勉強をしていきましょう。

画像

文字だけが長く続くと、それだけで読む気が起こりにくいものです。

そこで、より情報量が多い「画像」を挿入して、読みやすさのアクセントを作ります。

 

画像には、2種類の使い方があります。

  • 説明・解説のための画像(キャプションなどをつけます)
  • Webページの印象をつくるための画像

 

写真集でもない限り、写真が主張しすぎると全体のバランスを崩す原因にもなりかねません。

 

ハイパーリンク

現在、電子ドキュメントの中でもっとも重要な要素です。

文章の特定の場所から、関連する情報に移動できるような仕組みを指します。

WordでもPDFでも、この仕組みを使うことができるようになっています。

 

もちろん、Webページでは「ハイパーリンク」がなければ役立ちません。



文書構造

上記のドキュメント内容を、見る人が理解しやすくする形を「文書構造」と呼びます。

 

Webページの場合、「読みやすい」「体裁が整っている」「メンテナンス性が高い」以外に、「検索結果が上位表示」するということを求められます。

このことも、正しい文書構造をつくる必然性のひとつになっています。

 

この文書構造こそが「伝えるドキュメントの書き方」の本質です。

そして、Webの勉強は文書構造の書き方を中心におこないます。

プログラミングであっても同じことです。

伝える相手が人から「OS(機械)」に変わるだけのことです。

伝えようとする内容が、的確に効率よく伝わらなければ意味がありません。



記述(マークアップ)のルール

  1. 表示する内容(コンテンツ)は、必ず「開始タグ」と「終了タグ」で囲む
  2. すべて小文字で記述する

 

以下は、記憶する部分ではなく、入力の経験のみが優先されます。

まず、入力してみましょう。

 

段落 <p>

  • 基本的には、2行以上の文章に指定する(1行でも可)
  • 迷ったら、「p要素」にする
  • 段落ブロックの下は、必ず1行分の空きができる

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>アフォーダンス</title>
</head>
<body>
<p>ギブソンの提唱した本来の意味でのアフォーダンスとは「動物と物の間に存在する行為についての関係性そのもの」である。</p>
<p>例えば引き手のついたタンスについて語るのであれば、「"私"はそのタンスについて引いて開けるという行為が可能である」、この可能性が存在するという関係を「このタンスと私には引いて開けるというアフォーダンスが存在する」あるいは「このタンスが引いて開けるという行為をアフォードする」と表現するのである。</p>
<p>要点は行為の可能性そのものであるため、そのタンスが引いて開けられるのだと示すインターフェイスを持つか否か、ひいては"私"自身がそのタンスを引いて開けることが可能だと認識しているか否かは全く関係ない。</p>
<p>タンスに取り付けられているのが「引き手に見えない、あるいは引き手として使用できそうもない引き手」であっても、"私"に引いて開ける事が可能ならば、その両者の間にアフォーダンスは存在するのである。</p>
</body>
</html>




見出し <h1> <h2> <h3>

  • ページ内容を表す1行
  • 優先順位のレベルでマークアップする
  • 見出しの拾い読みでも、ページのツリー講座がわかるように

 

<h1>アフォーダンス</h1>
<h2>デザインにおけるアフォーダンス</h2>
<h3>本来のアフォーダンス</h3>

 

本来は、段落(本文)と組み合わせて記述します。

 

箇条書き <ul> <ol> <dl>

  • 必然性のある箇条書きを利用する
unordered list

順序が置き換わっても意味が伝わる並列な内容に使う。

  • 行頭マークは「黒丸」

 

<ul>
  <li>私が好きな真っ赤なりんご</li>
  <li>あなたが好きなのはバナナ</li>
</ul>

 

ordered list

順序が置き換わっては意味が伝わらない、順序が意味をもつ内容に使う。

  • 行頭は数字

 

<ol>
  <li>まず良く洗ってから皮をむき</li>
  <li>それからおもむろに囓りつく</li>
</ol>

 

definition list

「名称(用語)」と「その説明文(定義)」をセットにしてリスト化するときに使う。

  • リスト全体に対する dl要素:definition list
  • 名称(用語)に対する dt要素:definition term
  • 説明文(定義)に対する dd要素:definition description

 

<dl>
<dt>りんご</dt>
<dd>赤い色をした丸い果物。</dd>
<dt>バナナ</dt>
<dd>黄色い色をした細長い果物。</dd>
</dl>

画像挿入 <img>

<imgsrc="画像の置いてある場所"width="幅"height="高さ"alt="代換え文字">

 

img:images

src:source

 

画像の表示は、HTMLソースをブラウザが解釈して表示する段階で、もう一度サーバーまで「画像の置いてある場所」にとりにいってから表示されます。

このとき、幅・高さなどの情報がないと、その計算をしてから表示されるため、表示が遅くなります。

一般的に「レスポンスが悪い」という状態です。

ハイパーリンク <a>

リンクには「テキストリンク」「画像リンク」「メールリンク」の3種類あります。

詳細は、授業内で説明します。

 

<ahref="移動先の住所(パス)">リンクテキスト</a>

 

a:anchor

href:hyper reference