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

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

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

さて、いいだけHTMLについて書いてきましたが、復習の意味もかねて、

再度HTMLの基本ルールについて勉強しなおしましょう！

こういった、基本の勉強は、つい忘れてしまいがちなので、定期的に勉強をしましょう！

それでは、HTMLの基本構造とルールについて勉強を始めましょう。

記述（マークアップ）のルール

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

 

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

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

 

HTML基本構造

  • 基本構造は「head部」と「body部」

 

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

 

body部
  • 閲覧者が内容を確認する部分
  • 閲覧者のためだけではなく、検索エンジンに情報が蓄積されるような意味付けも必要
  • 可視（表示）



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

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

 

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

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

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

 

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

 

では、どうやったら「インデックス」されるのか。

続きは、また別日にお伝えします！

 

HTMLのtableについての勉強

今回は、HTMLのtableについて勉強しましょう！

以前もtableについては、お伝えしたことがありましたが、見づらい部分が多かったので、改めてお伝えします。

それでは、HTMLのtableについて勉強を始めましょう！

 

scope属性（スコープ）

・th要素やtd要素に scope="" を追加すると、見出しの対象範囲を指定することができる
・この属性で示された情報は、音声ブラウザなどで役立てられることになります

属性値説明
scope="" row 行方向（横列）のセルを対象にする
col 列方向（縦列）のセルを対象にする
rowgroup 行グループ内のセルを対象にする
colgroup 列グループ内のセルを対象にする

 

caption

・表にタイトルを付ける要素
・table開始タグの直後に配置する

<table>
<caption>夜の章 Name of Night</caption>
<tr>
<th>夜の名前</th><th>夜の訪れ</th><th>朝の訪れ</th><th>明るい夜</th>
</tr>
<tr>
<td>空</td><td>薄明</td><td>暁</td><td>良夜</td>
</tr>
<tr>
<td>月</td><td>宵月</td><td>有明</td><td>月華</td>
</tr>
<tr>
<td>星</td><td>宵の明星</td><td>明の明星</td><td>星月夜</td>
</tr>
<tr>
<td>光</td><td>黄道光</td><td>朝末き</td><td>夜天光</td>
</tr>
</table>

demo

colgroup

・表の縦列をグループ化して、属性をまとめて指定したいときに使用する

<table>
<colgroupclass="col1"></colgroup>
<colgroupclass="col2"></colgroup>
<colgroupclass="col3"></colgroup>
<colgroupclass="col4"></colgroup>
<caption>夜の章 Name of Night</caption>
<tr>
<th>夜の名前</th><th>夜の訪れ</th><th>朝の訪れ</th><th>明るい夜</th>
</tr>
<tr>
<td>空</td><td>薄明</td><td>暁</td><td>良夜</td>
</tr>
<tr>
<td>月</td><td>宵月</td><td>有明</td><td>月華</td>
</tr>
<tr>
<td>星</td><td>宵の明星</td><td>明の明星</td><td>星月夜</td>
</tr>
<tr>
<td>光</td><td>黄道光</td><td>朝末き</td><td>夜天光</td>
</tr>
</table>

HTMLの特殊文字についての勉強

今回は、HTMLの特殊文字について勉強をしていきましょう。

HTMLにおける特殊文字とは、通常の入力以外に、下記の表のように入力し、

通常の入力以外に表示させる方法です。

覚えておいて損はないと思います。

何となく、「こういう方法もあるんだな」と考えながら、下記にある表を眺めて、

HTMLにおける特殊文字の勉強をしていきましょう！

 

・HTMLで使われる特殊文字
・OSやブラウザの種類によって一部正しく表示できない場合もある

記号 実体参照 コード参照 名称・解説
  &nbsp; &#160; 半角スペース
& &amp; &#38; アンパサンド
¥ &yen; &#165; 円記号
© &copy; &#169; 著作権記号
® &reg; &#174; 登録商標記号
™ &trade; &#8482; 商標記号
> &gt; &#62; 大なり
< &lt; &#60; 小なり
㎜   &#13212; ミリメートル
㎝   &#13213; センチメートル
㎞   &#13214; キロメートル
㎡   &#13217; 平方メートル
㎥   &#13221; 立方メートル
♠ &spades; &#9824; スペード
♣ &clubs; &#9827; クラブ
♥ &hearts; &#9829; ハート
♦ &diams; &#9830; ダイアモンド

HTMLの特殊文字の参照サイト

・http://e-words.jp/p/r-htmlentity.html
・http://rikiy.jp/report/web/20060130.html

HTMLのマークアップについての勉強

今回は、HTMLのマークアップについて勉強していきましょう。

下記のように、HTMLを入力してみましょう！

 

<htmllang="ja">
<head>
<metacharset="UTF-8">
<metaname="description"content="キーワードから始まる文節を３行">
<title>キーワード カテゴリ｜キーワードを含むページタイトル</title>
</head>
<body>
<h1>優先順位の高い見出し</h1>
<p>本文</p>
<ul>
<li><ahref="#">番号なし個条書き</a></li>
<li><ahref="#">番号なし個条書き</a></li>
<li><ahref="#">番号なし個条書き</a></li>
</ul>
<dl>
<dt>語句（日付）</dt>
<dd>語句説明</dd>
</dl>
<tableborder="1"width="300">
<tr>
<td>0</td><td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td><td>5</td>
</tr>
<tr>
<td>6</td><td>7</td><td>8</td>
</tr>
</table>
</body>
</html>

 

meta

<metaname="keywords"content="">

現在はkeywordsは読み込まないので必要ない。
もし、入れるとしたら３つでOK！
（※10コ20コ入れても意味が無い）
googleが読み込まないと言ってる⇒だから書かなくてOK！

title要素

<title>キーワード カテゴリ(5W1H)｜キーワードの5W1H</title>

－使用しては駄目なもの－
★等の記号、全角スペース
（本文に「★や全角スペース」を探しに行ってしまうので…。）

body要素

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

HTMLのフォームについての勉強　part2

前回の記事でHTMLのフォームに関する勉強はできましたか？

今回も、前回の前回と同様に、HTMLのフォームに関する勉強なのですが、前回の記事があまりにも長くなりそうだったので、今回は前回の続きを書いていきます。

引き続きHTMLのフォームについて勉強して、理解を深めていきましょう！

 

file

・ファイル選択

<formaction="#" methed="post"enctype="multipart/form-data">
<inputtype="file"name="datafile">
</form>

・<form>タグに「enctype="multipart/form-data"」を指定すること


リスト

・メニュータイプの選択肢

<selectname="language">
<optionvalue=""selected>以下の言語を選択してください</option>
<optionvalue="1">日本語</option>
<optionvalue="2">英語</option>
<optionvalue="3">フランス語</option>
<optionvalue="4">スペイン語</option>
<optionvalue="5">韓国語</option>
</select>

・selected
・select要素にsize属性を設定すると、スクロールフィールドを表示します。

<selectsize="3"name="language">
<optionvalue="1"selected>日本語</option>
<optionvalue="2">英語</option>
<optionvalue="3">フランス語</option>
<optionvalue="4">スペイン語</option>
<optionvalue="5">韓国語</option>
</select>

 

お問い合わせフォーム

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>お問い合わせフォーム</title>
</head>
<body>
<h1>お問い合わせフォーム</h1>
<formaction="#"method="post">
<p>名前：<inputtype="text"name="name"size="20"maxlength="10"value="お名前"></p>
<p>性別：
 <inputtype="radio"name="sex"value="male"checked>男性
 <inputtype="radio"name="sex"value="female">女性
</p>
<p>スマートフォン：
 <inputtype="checkbox"name="mobile"value="1"checked>iphone
 <inputtype="checkbox"name="mobile"value="2">Android
 <inputtype="checkbox"name="mobile"value="3">その他
</p>
<p>言語：
<selectname="language">
 <optionvalue=""selected></option>
 <optionvalue="1">日本語</option>
 <optionvalue="2">英語</option>
 <optionvalue="3">フランス語</option>
 <optionvalue="4">スペイン語</option>
 <optionvalue="5">韓国語</option>
</select>
</p>
<p>内容：<textareaname="subject"rows="5"cols="40">お問い合わせ内容</textarea></p>
<p><inputtype="submit"value="送信"></p>
</form>
</body>
</html>

 

HTMLのフォームについての勉強

HTMLのフォームについての勉強をしましょう。

さて、今回はHTMLのフォームについて勉強していきましょう。

以前にも勉強したことはありましたが、丁寧な説明とは言えませんでしたので笑

今回は、自分のHTMLの勉強のためにも、少し丁寧にお伝えできればと思います。

それでは、HTMLのフォームについて勉強していきましょう。

 

フォームの要素

<formaction="CGIまたはPHP" methad="postまたはget">
</form>

action属性…データを受け取るプログラム
　　　　　　（現在は、CGIよりPHPを使います）
method属性…データの送信方法
　　　　　　（お客様の情報を得る時は「post」を使います）

inputの要素

・フォームを構成する様々な入力部品を作成する
・終了タグはありません
・<p>で囲んでブロックレベルにする

<inputtype="値"name="名前" valru="文字列">

・type属性…フォーム部品の種類を指定
　　　　　　・text
　　　　　　・radio
　　　　　　・checkbox
　　　　　　・submit
　　　　　　・password
　　　　　　・reset
　　　　　　・button
　　　　　　・image
　　　　　　・file
　　　　　　・hidden
・name属性…データベースに格納するためのセルの名前
・value属性…配列（文字列）を指定して値を取得する

type属性

text

・1行テキスト領域

<inputtype="text"name="name"size="20"maxlength="10"value="お名前">

・1行テキストボックス
・2行以上にわたる長い文章を入力させたい場合には、<texrea>～</texrea>を使用する

radio

・ラジオボタン

<inputtype="radio"name="sex"value="male"checked>男性
<inputtype="radio"name="sex"value="female">女性

・複数の選択肢の中から一つしか選択できない
・複数を一つのグループとして認識させるには、name属性で同じ名前を付ける
・checked属性…その項目はあらかじめチェックの付いた状態になる

checkbox

・チェックボックス

<inputtype="checkbox"name="mobile"value="1"checked>iphone
<inputtype="checkbox"name="mobile"value="2">Android
<inputtype="checkbox"name="mobile"value="3">その他

・複数選択が可能
・checked属性…その項目はあらかじめチェックの付いた状態になる

submit

・送信ボタン

<inputtype="submit"value="送信">

・ボタンで入力情報を送信するものは全て「submit」
・value…送信ボタンの名前

password

・パスワード用領域

<inputtype="password"value="password">

 

reset

・リセットボタン

<inputtype="reset"value="リセット">

・value…リセットボタンの名前

button

・汎用ボタン

<inputtype="button"value="ボタン">

・value…汎用ボタンの名前

image

・画像を使用した送信ボタン

<inputtype="image"src="img/img01.jpg"name="button"alt="送信する"align="middle">

src…ボタンに使用する画像のURL
alt…画像の代わりになるテキスト
align…画像に並ぶテキストの位置
　　　 (top、middle、bottom、left、right)
　　　 ※このalign属性は、HTML 4.01では非推奨です

 

HTMLでページを作成してみましょう！

HTMLの勉強は進んでいますか？

今回は、HTMLでページを作る勉強をしてみましょう。

下記のように、HTMLを書いていって、ページを作り、

どこがどんな風にHTMLとして書かれているかを理解しながら書いてくださいね！

では、HTMLでページを作る勉強を始めましょう！

 

ページを作成する

index.html(トップページ)
｜
｜－－item－－index.html（商品ページ） 
｜
｜－－order－－index.html（注文ページ）
｜
｜－－shop－－index.html（店舗ページ）
｜
｜－－contact－－index.html（お問い合わせページ）

 

トップページ

index.html

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>トップページ｜ケーキショップ</title>
<linkrel="stylesheet"href="css/style.css"media="all">
</head>
<bodyid="top">
<h1>トップページ</h1>
<ul>
<liclass="this">HOME</li>
<li><ahref="item/index.html">ITEM</a></li>
<li><ahref="order/index.html">ORDER</a></li>
<li><ahref="shop/index.html">SHOP</a></li>
<li><ahref="contact/index.html">CONTACT</a></li>
</ul>
</body>
</html>

商品ページ

item/index.html

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>商品ページ｜ケーキショップ</title>
<linkrel="stylesheet"href="../css/style.css"media="all">
</head>
<bodyid="item">
<h1>商品ページ</h1>
<ul>
<li><ahref="../index.html">HOME</a></li>
<liclass="this">ITEM</li>
<li><ahref="../order/index.html">ORDER</a></li>
<li><ahref="../shop/index.html">SHOP</a></li>
<li><ahref="../contact/index.html">CONTACT</a></li>
</ul>
</body>
</html>

注文ページ

order/index.html

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>注文ページ｜ケーキショップ</title>
<linkrel="stylesheet"href="../css/style.css"media="all">
</head>
<bodyid="order">
<h1>注文ページ</h1>
<ul>
<li><ahref="../index.html">HOME</a></li>
<li><ahref="../item/index.html">ITEM</a></li>
<liclass="this">ORDER</li>
<li><ahref="../shop/index.html">SHOP</a></li>
<li><ahref="../contact/index.html">CONTACT</a></li>
</ul>
</body>
</html>

店舗ページ

shop/index.html

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>店舗ページ｜ケーキショップ</title>
<linkrel="stylesheet"href="../css/style.css"media="all">
</head>
<bodyid="shop">
<h1>店舗ページ</h1>
<ul>
<li><ahref="../index.html">HOME</a></li>
<li><ahref="../item/index.html">ITEM</a></li>
<li><ahref="../order/index.html">ORDER</a></li>
<liclass="this">SHOP</li>
<li><ahref="../contact/index.html">CONTACT</a></li>
</ul>
</body>
</html>

お問い合わせページ

contact/index.html

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>お問い合わせページ｜ケーキショップ</title>
<linkrel="stylesheet"href="../css/style.css"media="all">
</head>
<bodyid="contact">
<h1>お問い合わせページ</h1>
<ul>
<li><ahref="../index.html">HOME</a></li>
<li><ahref="../item/index.html">ITEM</a></li>
<li><ahref="../order/index.html">ORDER</a></li>
<li><ahref="../shop/index.html">SHOP</a></li>
<liclass="this">CONTACT</li>
</ul>
</body>
</html>

スタイルシート（CSS）

・リストの黒丸をとる
・ナビゲーションを横に並べる
・リンクの下線をとる
・今いる場所に色をつける
・各ページの背景色を変える

@charset "UTF-8";

body#top {
  background: #FC9;
}
body#item {
  background: #6CF;
}
body#order {
  background: #FCF;
}
body#shop {
  background: #9F9;
}
body#contact {
  background: #CCC;
}
h1 {
  color: #FFF;
}
ul {
  list-style-type: none;
}
li {
  float: left;
  width: 150px;
  height: 50px;
  background: #FFF;
  text-align: center;
  line-height: 50px;
}
li a {
  display: block;
  text-decoration: none;
}
li.this {
  display: block;
  background: #FF4500;
}