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

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

HTMLのフォームの基礎知識1

HTMLで記述できるフォームとはなんでしょうか?

  • ブラウザの操作画面で、ユーザーの情報を受け付けるもの
  • 目的は、ユーザーの情報を集めるため

 

action

action="#"は、CGIまたはPHPが入りますが、現時点では「NULLリンク」にしておきます。

 

お問い合せフォーム
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせ</title>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<form action="#" method="post">
<p>名前:<input type="text" name="name" size="20" maxlength="10" value="お名前"></p>
<p>内容:<textarea name="subject" rows="5" cols="40">お問い合せ内容</textarea></p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>

 

ラジオボタン
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ラジオボタン</title>
</head>
<body>
<h1>ラジオボタン</h1>
<form action="#" method="post">
<p>性別:
  <input type="radio" name="sex" value="male" checked>男性
  <input type="radio" name="sex" value="female">女性
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>

 

チェックボックス
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>チェックボックス</title>
</head>
<body>
<h1>チェックボックス</h1>
<form action="#" method="post">
<p>スマートフォン:
  <input type="checkbox" name="mobile" value="1" checked>iPhone
  <input type="checkbox" name="mobile" value="2">Android
  <input type="checkbox" name="mobile" value="3">その他
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>

 

リスト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リスト</title>
</head>
<body>
<h1>リスト</h1>
<form action="#" method="post">
<p>言語:
<select name="language">
  <option value="" selected>以下の言語を選択してください</option>
  <option value="1">日本語</option>
  <option value="2">英語</option>
  <option value="3">フランス語</option>
  <option value="4">スペイン語</option>
  <option value="5">韓国語</option>
</select>
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>

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

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

headタグに何を書けば良いのかについて、2回でお伝えすると言いましたが、

書いていたら量が多かったので、3回になります。

それでは、早速、前回の続きを勉強していきましょう。

 

ドキュメント(コンテンツ)

ドキュメントは、多くの人へ効率的に情報を伝達するために適したツールです。

その中に書かれる内容が「コンテンツ」です。

そのドキュメントをHTML形式で書いたものが、Webページです。

そして「body要素」内に書かれる部分を「コンテンツ」と呼びます。

 

以下、ドキュメントを「Webページ」と置き換えて読んでみてください。

 

なぜドキュメントを作成するのか?

誰かが誰かに情報を伝達する手段には、以下の方法があります。

 

  1. 口頭(相手が限られ、残らない)
  2. 手書きのメモ(整理されていない、必要な部分を取り出しにくい)
  3. 電子ドキュメント(複製・再配布が容易、検索可能)

 

いうまでもなく、パーソナルコンピュータが使われる理由がここにあります。

 

電子ドキュメントを作成するコスト

通常の企業に見られるように、ただ誰かが作った大量のドキュメントが効率的な情報伝達に役に立つかと言えば、必ずしもそうではありません。

 

そこには、コミニュケーション・コストの考え方が欠如しています。

 

  1. 作成のコスト(最初に作成するコスト、ツール次第でコスト削減ができる)
  2. 配布のコスト(伝えたい相手に比例して増大する、最新版を得るためのコスト)
  3. 理解のコスト(内容を理解するために必要なコスト、読みやすさがコストに跳ね返る)
  4. 保守のコスト(現状にあわせて、更新するためのコスト)

 

「Word」でドキュメントを作るときには、あまり意識していないコストの問題が、Webページを作ることを意識したとたんに、はっきり見えてきます。

本来、Wordなどのドキュメント作成ツールの場合でも、考える必要があります。



よいドキュメント

WordでもWebページでも、必要とされる要件は同じです。

 

  • 読みやすい
  • 体裁が整っている
  • メンテナンス性が高い

 

もっとも誤解が生じやすいのが「読みやすい(見栄え)」という部分です。

読みやすい(見栄え)
  • 見出しと本文の区別がある
  • 適切な内容の分割がある
  • 結論から内容への誘導がある
  • 必要な場所へ移動できる
体裁が整っている
  • 読み手のことを考えてある
  • 必要十分な空きがある
  • 文字の大きさで重要度に変化をつけてある
  • ドキュメント全体の規則性がある
メンテナンス性が高い
  • 繰り返し改訂・追記されることが前提
  • 誰もがルールに則り更新ができる
  • 無駄な作業をせずに価値ある作業に集中できる



つまり、コンテンツを作るということは、文章を書く技術を最大限利用しておこなう行為なのです。

それは、HTMLを暗記するなどという行為とはまったく意味の違うものです。

ですから、このクラスは「まる暗記」はしません。



コンテンツ内容

必ず以下の要素が必要になります。WordもWebページも同じです。

 

  1. 本文
  2. 見出し
  3. 箇条書き
  4. 画像(説明・解説用、イメージ)
  5. 補足要素(引用、脚注)
  6. ハイパーリンク
  7. ヘッダー・フッター(Wordのみ)

 

本文(ほんもん)

紙媒体の場合、日本では「9pt ≒ 13Q、中明朝体、正体、べた組み」と基準が決まっています。

Webページも同様に、ブラウザの標準文字サイズ「16px」が基準となります。

本文の文字サイズを指定しなければ、自動的に「16px」で表示されます。

 

ここで最も重要なことは、文字サイズは「スタイルシート」で設定することです。

とくに、Wordの場合「スタイルシート」を使わなければ、Wordの機能の1/10も利用したことになりません。

もちろん、Webページは言うまでもありません。

 

見出し

本文が数十行にわたって書かれていれば、誰も読む気はおこりません。

ですから、本文は段落ごとに分かれていて、なおかつ内容をわかりやすくまとめた1行、つまり「見出し」が必要になります。

 

見出しには、重要度によってランク付けがあります。

 

Wordの場合は、見出し1→ 見出し2→ 見出し3

Webページの場合は、h1→ h2→ h3→ h4→ h5→ h6

 

という風に基準が決まっています。

WordもWebページも、この指定がなくても表示上問題はありません。

しかし、よいドキュメントである条件

  • 読みやすい
  • 体裁が整っている
  • メンテナンス性が高い

 

を満たしたことにはなりません。

つねに「本文と見出し」の組み合わせで書くことを意識しましょう。

 

箇条書き

しかし、実際には「本文と見出し」だけでは単調なもになってしまいます。

とくに説明する内容などは、全体が比較して見えないと理解につながりません。

そこで利用されるのが、「箇条書き」です。

 

箇条書きには、3種類あります。(Wordでは2種類)

 

番号なし箇条書き

順序の前後が入れ替わっても、意味や価値の変わらない場合に利用します。

 

番号つき箇条書き

順序の前後が入れ替わると、意味の通じない順序が重要なレシピなどの説明に利用します。

 

定義型箇条書き

語句の説明や、日ごとに起こったことを並列で並べて見せるときに利用します。

 

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

今回は、headについての勉強です。

headについての勉強は今回と、次回の2回を予定しています。

headタグについては、以前も勉強したことがありますが、今回と次回は以前よりも丁寧にお伝えします。

それでは、headタグには何を書けば良いのかを勉強してみましょう。

head部
  • UA(user agent)が表示するための必要な条件とページの目的、そして外部との関連づけを記述する
  • あくまでもブラウザが理解するための部分
  • 不可視(非表示)

 

現在のインターネットの利用の仕方は、ほぼ「検索」から始まります。

つまり、検索対象になるWebページを作成しない限り、見られることはないということです。

 

では「検索」は、何を検索するのか?

検索エンジンのサーバーに記録してあるデーターから検索します。

インターネットの世界にある「ありとあらゆるデータ」から検索されるわけではありません。

 

この「検索エンジンのサーバーに記録されること」を、インデックスと呼びます。

 

この「インデックス」をされるためには、HTML文書内の「head部」と「body部」のバランスが必要になります。

 

DTD

  • Document Type Definition(文書型定義、DTD)とは、文書構造(文書型)を定義するためのスキーマ言語の一つ
  • ごくごく簡単なDTDの説明
  • Strict(厳密型)、Transitional(移行型)、Frameset(フレーム設定型)の三種類がある - 詳細はテキストに入ってから解説します
  • 記述する位置は、ドキュメントの最上位部



HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<htmllang="ja">
<head>
<title>ページタイトル</title>
</head>
<body>
<p>内容</p>
</body>
</html>

 

XHTML 1.0 Transitional
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="ja" xml:lang="ja">
<head>
<title>ページタイトル</title>
</head>
<body>
<p>内容</p>
</body>
</html>
  • XML宣言」は、IE6対策として記述しない場合もあります。

 

HTML5
<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<p>内容</p>
</body>
</html>

 

XHTMLでの記述

  • 2012年末の時点で主流の文書型です(HTML5は限定的)

 

XML宣言(必須)
<?xml version="1.0" encoding="UTF-8"?>

省略する場合もあります。(IE6対策のときに説明します。)

エンコードタイプが「UTF-8」のときのみです。

 

DTD(Document Type Definition)DOCTYPE宣言
  • 厳密な記述を目指していました
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 現在では、Transitional(移行型)に落ち着いています
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

名前空間(xmlns)と言語コードxml:lang)を指定する
  • xmlns:xml name space
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"lang="ja">

 

XML言語は、データを管理するのには適しています。

メリットは、自由な名前を付けて管理しやすくできることです。

そのルールを規定しているのが「名前空間」です。

そのルールに則って名前を付けますよ。という意味になります。

 

HTMLとXHTMLの記述上の違い

  • 要素名、属性名は小文字で記述する
  • 必ず開始タグ・終了タグのセットで記述する(できない場合(非空要素)は、「 /」半角空き+スラッシュで閉じる)
  • meta、hr、br、img などは、空要素として書く
  • ‘id’および‘name’属性をもつ要素は、‘id’属性を使用する

 

<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8" />
<metahttp-equiv="Content-Style-Type"content="text/css" />

 

外部リンク

rel:relative 関係性(HTMLドキュメントに対しCSSファイル)

 

<linkhref="base.css"rel="stylesheet"type="text/css"media="screen, print" />

 

「media属性」は「screen, print」場合によって「tv」を追加します。

※「media="all"」は、旧ブラウザにCSSファイルを認識させないための指定で、現在のようにPCサイトを携帯キャリア(ガラパゴス)で見る場合などに、大きい画像を読み込ませないようにするために使用しません。

 

HTML5

  • XHTMLより簡潔な記述が可能
  • 授業の中では、この記述を基本とします

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>ホームページ</title>
</head>
<body>
<p>内容</p>
</body>
</html>

 

meta

  • Metainformation(メタ情報)の略
  • 「超~」「高次~」「~の間の」「~の後ろの」「~を含む」などの意味を持つ英語の接頭辞
  • metaphorが語源
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<metahttp-equiv="Content-Style-Type"content="text/css">
<metahttp-equiv="Content-Script-Type"content="text/javascript">
<metaname="description"content="サンプル">
<metaname="keywords"content="キーワード1,キーワード2,キーワード3">

 

HTML5の場合
  • 「http-equiv」を自明として省略します
  • 「keywords」も基本的には省略しますが、おまじないとして残すこともあります
<metacharset="UTF-8">
<metaname="description"content="ページの内容を説明する文章">
<metaname="keywords"content="キーワード1,キーワード2,キーワード3">

HTMLの入力練習をして勉強しましょう!

さて、今回は、HTMLの入力練習をして、勉強してみましょう。

HTMLや、CSSはとにかく書きまくるのが大切です。

下記に、書いていますので、なぞるように書いていってください。

 

基本構造

  • Firefox で表示(文法チェック)

 

ここに書いた文字がブラウザのタイトルバーに表示される
この中にタグでマークアップされた文書や画像が、ブラウザーで表示される。

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>ここに書いた文字がブラウザのタイトルバーに表示される</title>
</head>
<body>
<p>この中にタグでマークアップされた文書や画像が、ブラウザーで表示される。</p>
</body>
</html>

※何も見ないで入力できるまで繰り返すこと。

 

head
  • description(詳細)
  • shortcut icon(ブラウザアイコン)
  • link(外部リンク)
  • script(スクリプトの読み込み)

 

はじめてのHTML入力の練習です。
はじめてのHTML:ヘッド内の記述
こんにちは

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<metaname="description"content="はじめてのHTML入力の練習です。">
<title>はじめてのHTML:ヘッド内の記述</title>
<linkrel="stylesheet"href="style.css">
<linkrel="shortcut icon"href="favicon.icon">
<scriptsrc="myscript.js"></script>
</head>
<body>
<p>こんにちは</p>
</body>
</html>

 

body
  • コメントアウト
  • 大見出し
  • 改行

 

はじめてのHTML:コメントアウトと見出しと改行
コメントアウト、見出しと本文、改行の記述
大見出し
こんにちは
改行ありの こんにちは

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>はじめてのHTML:コメントアウトと見出しと改行</title>
</head>
<body>
<!-- コメントアウト、見出しと本文、改行の記述 -->
<h1>大見出し</h1>
<p>こんにちは</p>
<p>改行ありの<br>こんにちは</p>
</body>
</html>

 

画像を表示

  • img:Image
  • src:Source

f:id:web-lesson:20121117152943j:image

 

はじめてのHTML:画像を表示
大見出し
こんにちは
眼鏡

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>はじめてのHTML:画像を表示</title>
</head>
<body>
<h1>大見出し</h1>
<p>こんにちは</p>
<p><imgsrc="glass.jpg"width="400"height="250"alt="眼鏡"></p>
</body>
</html>

 

リンク

  • link(テキストリンク・画像リンク)
  • target(別ページで開く場合は、_blank)

 

はじめてのHTML:リンク
大見出し
こんにちは
Googleの検索はこちらから
眼鏡

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>はじめてのHTML:リンク</title>
</head>
<body>
<h1>大見出し</h1>
<p>こんにちは</p>
<p>Googleの検索は<ahref="http://google.com"target="_blank">こちら</a>から</p>
<p><ahref="http://google.com"target="_blank"><imgsrc="glass.jpg"width="400"height="250"alt="眼鏡"></a></p>
</body>
</html>

 

リスト

  • ul:Unordered List (順序のないリスト) → 箇条書きリスト
  • ol:Ordered List (順序のあるリスト) → 番号付きリスト
  • li:List Item (リストの項目)

 

番号なしリスト
はじめてのHTML:番号なしリスト
大見出し
こんにちは
眼鏡
新製品の特徴

PCに最適
軽い
安い

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>はじめてのHTML:番号なしリスト</title>
</head>
<body>
<h1>大見出し</h1>
<p>こんにちは</p>
<p><ahref="http://google.com"target="_blank"><imgsrc="glass.jpg"width="400"height="250"alt="眼鏡"></a></p>
<h2>新製品の特徴</h2>
<ul>
<li>PCに最適</li>
<li>軽い</li>
<li>安い</li>
</ul>
</body>
</html>

 

番号付きリスト
はじめてのHTML:番号付きリスト
大見出し
こんにちは
眼鏡
購入の手順
フレームを選択する
検眼する
微調整する

 

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>はじめてのHTML:番号付きリスト</title>
</head>
<body>
<h1>大見出し</h1>
<p>こんにちは</p>
<p><ahref="http://google.com"target="_blank"><imgsrc="glass.jpg"width="400"height="250"alt="眼鏡"></a></p>
<h2>購入の手順</h2>
<ol>
<li>フレームを選択する</li>
<li>検眼する</li>
<li>微調整する</li>
</ol>
</body>
</html>



HTMLの基本的なルールについての勉強 part3

さて、HTMLの基本ルールについての勉強も今回が最後です。

HTMLの一通りの流れをご説明したつもりなので、今回の記事をしっかりと勉強していただければ、HTMLについては大体理解したといっていいでしょう。

といっても、私もまだまだ初心者なんですけどね笑

それでは、HTMLの基礎ルールについて、最後の勉強をしていきましょう。

表組み

table:table

tr:table row

th:table head

td:table description

 

<tableborder="1"summary="カリキュラム内容のイメージ">
<tr>
<th>科目</th>
<td>内容</td>
</tr>
<tr>
<th>国語</th>
<td>正しい文書構造を理解する(パラグラフの概念)</td>
</tr>
<tr>
<th>算数</th>
<td>JavaScriptActionScriptPHPなどでプログラミングの考え方を理解する</td>
</tr>
<tr>
<th>理科</th>
<td>力学からコンピュータの描画を理解する</td>
</tr>
<tr>
<th>社会</th>
<td>デザインの歴史、Webの歴史を通じていま必要なことを理解する</td>
</tr>
<tr>
<th>英語</th>
<td>Webのバックグラウンドから理解するために必要な言葉の理解する</td>
</tr>
<tr>
<th>図工</th>
<td>デザインのルールを理解する</td>
</tr>
</table>

 

f:id:web-css-design:20110923135612j:image

 

文字と枠の修飾は「CSS」でおこないます。

ただし、枠線が見えないと表組みが確認できないため、便宜上「border="1"」を指定します。

最終的には「CSS」設定後、削除します。

 

アドレス

「住所や電話番号」など、ページ内容の管理者の住所を明示するために使用します。

一般的には「著作マーク (c)」を明示する場合にも利用されています。

 

<address>らーめん一番<br>
〒171-0022 東京都新宿区西新宿○-○-○ ラーメン一番ビル 連絡先: 00-0000-0000</address>

 

水平線

hr:horizontal rule

リンク

Webは「リンク」こそ命です。

リンクには3つの使い方があります。

 

  1. テキストリンク
  2. 画像リンク
  3. メールリンク

 

<ahref="移動先のアドレス">◎◎◎のページへ移動</a>
<ahref="移動先のアドレス"><imgsrc="画像の住所"width="幅"height="高さ"alt="代替え文字"></a>
<ahref="xxx@xxx.net">お問い合わせ(メールソフトが起動します)</a>

 

a:anchor

href:hyper reference

 

新規ウィンドウで開く
  • target="_blank"

 

この属性は、HTMLの解釈の変遷により、使わないほうが良いといわれたりしましたが、HTML5では使用可能になっています。

 

<html>
<head>
<title>はじめてのHTML入力練習</title>
</head>
<body>
<h1>結論:大見出し</h1>
<p>要約</p>
<h2>結論:検証</h2>
<p>解説</p>
<ul>
<li>検証の項目</li>
<li>検証の項目</li>
<li>検証の項目</li>
</ul>
<p>解説</p>
<ol>
<li>順序のある検証の項目</li>
<li>順序のある検証の項目</li>
<li>順序のある検証の項目</li>
</ol>
<dl>
<dt>7月23日</dt>
<dd>HTMLの勉強を始めます。</dd>
<dt>7月24日</dt>
<dd>HTMLでwebページを作ってみましょう</dd>
<dt>7月25日</dt>
<dd>定義型リストと表組みの練習</dd>
</dl>
<tableborder="1"summary="カリキュラム内容のイメージ">
<tr>
<th>科目</th>
<td>内容</td>
</tr>
<tr>
<th>国語</th>
<td>正しい文書構造を理解する(パラグラフの概念)</td>
</tr>
<tr>
<th>算数</th>
<td>JavaScriptActionScriptPHPなどでプログラミングの考え方を理解する</td>
</tr>
<tr>
<th>理科</th>
<td>力学からコンピュータの描画を理解する</td>
</tr>
<tr>
<th>社会</th>
<td>デザインの歴史、Webの歴史を通じていま必要なことを理解する</td>
</tr>
<tr>
<th>英語</th>
<td>Webのバックグラウンドから理解するために必要な言葉の理解する</td>
</tr>
<tr>
<th>図工</th>
<td>デザインのルールを理解する</td>
</tr>
</table>
<address>ラーメン一番<br>
〒000-0000 東京都新宿区西新宿○ー○―○ 連絡先:00-0000-0000 03-3981-7201</address>
</body>
</html>

HTMLの基本的なルールについての勉強 part2

さて、前回の続きです。

HTMLを書いて、Web上にアップしたとしても、検索エンジンにすぐにインデックスされるわけではありません。

インデックスされることがなければ、ユーザーは、検索をしてあなたのサイトを見つけることは一生ありません。

どれだけ、素晴らしいサイトを作っても、検索エンジンにインデックスされていなければ、そのサイトは砂漠の上にお店を作っているようなものです。

つまり、誰も見つけることができないってことですね。

では、どうすればすぐにインデックスされるのでしょうか?

と、その前に勉強しなくてはいけないことがありますので、順を追って勉強していきましょう!

その他のmeta
  • 「keywords」は、検索対象ではなくトリガーとしての役割しかありません。Googleは無視されますが「検索エンジンBing」対策として、記述する場合もあります
<metaname="description"content="">
<metaname="keywords"content="">

 

link要素
<linkrel="stylesheet"type="text/css"href="css/style.css"media="screen, print">

 

title要素
  • 「title要素」には日本語サイトの場合は、日本語で記述しますが、何を記述すればよいかを答えなさい。

 

body要素

本来、body内は必要充分なテキストが入力してあるところから進めることが理想です。

その内容は「本文(ほんもん)」として、記述します。

その中から、内容を一目で把握できるように「見出し」を立ち上げます。

つまり、見出しで表すことのできる、文節の塊が「段落」となります。

 

この「見出し+段落」で表す内容が「パラグラフ」と呼ばれます。

「p要素」そのものも「paragraph」と呼ばれますが、段落要素には見出し要素が不可欠であると考えましょう。

 

文章だけが長く続くと、可読性が落ちます。

そこで、箇条書きが利用されます。

1行で完結に表現できるものは、箇条書きにします。

 

特に、Webの表現では「読み物」というよりも「レポート」として読んでもらうことがほとんどです。

まず「結論」を読んでもらい、「検証」で納得してもらうという手法です。

ですから、それには「箇条書き」が有効です。

 

つまりbody内には、常に

 

  1. 見出し
  2. 段落
  3. 箇条書き

 

が記述されることになります。



《課題》

次の内容をマークアップしなさい。

今日の献立
今日は、子供も大人も好きなカレーを作ろうと思います。
カレーの材料
カレー・ルー
豚肉
じゃがいも
たまねぎ
にんじん

 

文書構造に必要な要素

  1. タイトル
  2. 見出しと本文
  3. 箇条書き(番号つき、番号なし)
  4. 補足説明の画像

 

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

 

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

 

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

 

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

 

箇条書き <ul> <ol> <dl>
  • 必然性のある箇条書きを利用する

 

ul(unordered list)

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

  • 行頭マークは「黒丸」
<ul>
  <li>私が好きな真っ赤なりんご</li>
  <li>あなたが好きなのはバナナ</li>
</ul>

 

ol(ordered list)

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

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

 

dl(definition list)

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

  • リスト全体に対する dl要素:definition list
  • 名称(用語)に対する dt要素:definition term
  • 説明文(定義)に対する dd要素:definition description
<dl>
  <dt>りんご</dt>
    <dd>赤い色をした丸い果物。</dd>
  <dt>バナナ</dt>
    <dd>黄色い色をした細長い果物。</dd>
</dl>

 

以下のような場合にも、利用されます。

いわゆる日付で明示する更新情報の場合です。

<dl>
<dt>7月20日</dt>
<dd>ラーメン一番</dd>
<dt>7月21日</dt>
<dd>HTMLの基本構造の入力練習</dd>
<dt>7月22日</dt>
<dd>HTMLの勉強</dd>
</dl>