HTML5+CSS3による文書作成

目次

1 はじめに

今はパーソナルコンピュータ(以下パソコン)やタブレット,スマートフォンに限らず,テレビ,テレビゲーム,音楽プレイヤーなど,インターネットにアクセス可能な家電製品が当たり前な時代です。これらはインターネットという膨大な情報の海を検索する窓としての機能を備えています。

話は変わり,アメリカではパソコンのことを intelligence mirror などといい,知 性を映し出す鏡と称します。すなわちパソコンとは,その前に座った人次第で多様な使い方があり,使う側の知性を映し出す鏡というわけです。パソコンなどのコンピュータは,元々は問題解決のためのツールとして 数学 によって発明されたものです。現在の理数系大学などでの数値解析が正にそれです。

このように身近な家電製品は情報を検索する窓としての機能を有するのですが, その情報を作り出すものとして考えたとき,コンピュータ,ことさらパソコンに勝るものはありません。そこでプログラミング数学では,身近にあるパソコンを使い,コンピュータ本来の数値解析としての道具の使い方を最終的には学んでいくことを目標にします。

このドキュメントは,webサイトを構築する際に使われるHTMLとCSSという言語についてまとめてあります。

1.1 HTMLとは

  • Hyper Text Markup Languageの頭文字をとります。インターネット上に展開されるホームページの基本構造は,ほぼすべてがこの言語で記述されています。
  • HTMLの歴史を辿ると,HTMLはIETF1によって1993年に初の仕様書が提出されます。そして,2年後の1995年にはHTML 2.0が発表されます。
  • 以降はHTMLの管理はIETFではなくW3C(WWW国際コンソーシアム)に移され,2年間隔で1997年にHTML3.2が,1999年にメジャーバージョンアップ,マイナーバージョンアップを経てHTML4.01が勧告されます。このバージョンからDTD2という構造宣言(HTMLバージョンの宣言)をすることになります。これによってHTMLは論理的な文書構造のみを定義し,物理的な表現方法などは後述するCSSで定義することが推奨されます。また同時期に,HTML4.01をベースにしたXHTML1.0が策定されます。
  • その後15年の長い年を経て,2014年にHTML5.0が,2年後の2016年11月にHTML5.1が勧告されます。
  • いわゆるHTML5では,HTML4で必要だったDTDによるHTMLバージョン宣言は必要なくなりましたが,HTML4ではなく,HTML5であることを宣言する必要はあります。詳しくは後述の構造タグで触れます。

1.2 CSSとは

Cascading Style Sheetsの頭文字をとります。上述の通り,HTML4からページの物理的な表現方法であるデザインやスタイルを記述します。

1.3 授業の準備と必要な文具

データ保存用フォルダの作成
Alice サーバ上のH:ドライブ直下に,本授業のファイル保存用フォルダとして, html という名前で新しくフォルダを作成します。よってPathは H:¥html になります。
拡張子を表示します
パソコンはファイルの 拡張子 ( . から後ろのアルファベット)を見て,そのファイルを開くためのプログラムを決定します。WindowsOSは出荷時には,その拡張子が非表示の設定になっていますので,表示に変更します。
メールの署名の更新
メールの署名は,1年次に H:¥signature.txt に設定しました。このファイルを開き,内容を更新します。
A4版クリアファイル(40ポケット)
授業のテキストはこのHTMLページになります。一定のタイミングで印刷したものを配布しますので,それらをファイルするために必要です。
赤黒青3色のボールペン
キーボードの隙間にシャーペンの芯や消しゴムの カスが入ると誤作動の原因になります。

2 HTML5の基本

webページは,HTMLという言語で記述したテキスト文書を,HTMLを解釈するエンジンを積んだブラウザーと呼ばれるソフトウエアで開いて閲覧します。

このように HTMLは単なるテキスト文書 ですから,HTMLの文法(仕様)に従ってテキストエディタで記述し,ファイル名の拡張子を, .html.htm にして保存するだけです。あとは,ブラウザーが解釈してwebページとして出力することになります。

2.1 HTMLタグ

  • HTMLは, 半角記号 の"<"と">"で 各要素 を囲んだ タグ と呼ばれるものでマークアップしながら記述します。
  • そのため,HTMLはしばしば マークアップ言語 ともいわれます。
  • 例えば,文字スタイルを太字にするb3という要素の場合,タグは<b>となります。
  • 実際に記述する際は,<b>太字</b>のように太字にしたい文章を2つのタグで囲みます。
  • このとき,先頭の<b>を 開始タグ ,末尾の</b>を 終了タグ といいます。
  • 次に例を示します。
表1: HTMLタグの基本文法
HTMLコード ブラウザーの画面
重要箇所は<b>太字</b>にします。 重要箇所は太字にします。

2.2 HTMLの基本構造

  • HTMLには基本となる構造があります。
  • これらは<!DOCTYPE html>,<html>・・・</html>,<head>・・・</head>,<body>・・・</body>などのタグで下表のように定義します。
  • これだけでも,webページとして成立します。下表では見出し要素 h1 や段落要素 p のタグも紹介しています。
表2: 基本構造タグ
HTMLコード タグの説明
<!DOCTYPE html> HTML5である宣言
<html> HTML文書の開始
<head> ヘッダ領域の開始(ヘッダの内容はページに表示されない)
<title>タイトル</title> ページタイトル。ブラウザの上の枠に表示される
</head> ヘッダ領域の終了
<body> 本文エリアの開始
<h1>見出し1</h1> 大見出し
<p>段落1</p> 最初の段落
<p>段落2</p> 二つ目の段落
</body> 本文エリアの終了
</html> HTML文書の終了

2.2.1 日本語文字コード方式の指定

  • <head>と</head>の間には,webページに様々な機能を実装するためのタグが用意されていますが,必ず必要になるのが文字のコーディング方式の指定です。
  • 日本語の文字コーディングの方式は歴史的にいくつかありますので,参考に述べます。
    JIS
    電子メールで多く利用される文字コードです。半角英数記号を表すASCIIの文字コード体系を2つ組み合わせて漢字文字を表現する方式です。
    Shift-JIS
    WindowsOSなど古くから日本で使われてきた文字コードです。JISと同じく2つの文字コード体系を組み合わせて漢字文字を表現しますが,JISのように既存のASCIIコードとは重ならない独自のコード体系の組み合わせになります。
    EUC
    UNIX環境で古くから使われてきた文字コードです。Shit-JISと同じく2つの独自の文字コード体系の組み合わせで漢字文字を表現する方式です。
    Unicode
    コンピュータ用の統一文字コードです。日本語だけでなくギリシャ語,韓国語,ロシア語,記号など世界で使われているすべての文字を共通の文字コード体系に統一した方式です。
  • このUnicodeコード体系には,複数の符号方式があり,W3C(WWWの国際コンソーシアム) ではUnicodeの UTF-8 という符号方式を今後は利用していくよう勧告しています。
  • 具体的には,<head>と</head>の間に次のタグを記述するのですが,これもW3Cは<head>開始タグの直後に記述するように勧告しています。次のタグを<head>開始タグの直後に記述します。
表3: 文字コードセットの宣言
<meta http-equiv="Content-Type" content="text/html; charset=XXX">
HTML5では,もっと簡潔に
<meta charset="XXX">
実習01
適当なテキストエディタを起動し,上記の構造タグの例を元に,
  1. ヘッダには適切な文字のコーディング方式
  2. タイトル には 自分の名前(漢字)
  3. 見出し1 には <自分の名前>のプロフィール
  4. 段落1 には 身長:xxx.x cm (xxx.xは小数第1位で)
  5. 段落2 には 趣味:ooo (oooは簡潔に文章で)
  6. ファイル名を my-profile.html として, H:¥html に保存しましょう。

2.3 HTML5に追加された構造化タグ

  • HTML5は,HTML内の情報をより明確に構造化する仕様になっています。そのための新たな構造化タグと呼ばれる要素が追加されています。
  • ブラウザや検索サイトの検索エンジンは,文書構造を明確にしたHTML5に準拠したページを訪問した際,そのページの情報を構造的に正しく取り出せるようになります。
  • これは,取り出す情報に意味を持たせることが可能になるということです。
  • 取り出した情報が無分別なものでなく,すでに分別された意味を持つ情報であれば,その後の発展的な活用が容易になるという優位性があります。
  • 追加される代表的な構造化タグを下表に示します。 これらはすべてbody要素内で使用 します。
表4: HTML5で追加された構造化タグ
要素名 概要
header ヘッダであることを示します。基本構造の<head>ではなく,<body>内で使用します。
footer フッタであることを示します。<body>内で使用します。
section 1つのセクション(章,節)であることを示します。見出し要素hを入れること。
article 1つの独立したコンテンツのくくりを差します。一つのテーマのページ全体を指します。上記の要素sectionの上のくくりになります。
aside 上のsectionのくくりはページの主たる内容から少し外れた内容に触れる際に使用します。
nav navigationの意になります。一般的には目次やメニューを差します。
  • 既に触れたとおり,HTML5は文章の内容に意味を持たせ,文章の構造化を果たすことでインターネット上のビッグデータのより効果的な活用を目指しているため,上記のような新しいタグが生まれました。
  • 本授業はHTMLの基礎・基本の理解を通して,HTML5が目指す文章の構造というマクロ的理解よりも,よりミクロ的に一つ一つの文章を構成するオブジェクトに焦点を合わせ,論理的な思考の開発を目指します。
  • したがって,HTML5に準拠した新しい要素(タグ)については,上の表以外にも多数ありますが,その紹介と理解および活用は別の書籍等にお願いすることにします。

2.4 コメント(注釈)と特殊文字

2.4.1 コメント(注釈)

  • コメント(注釈)とは,記述はするがページには表示させない文章です。
  • 例えばwebページの作成者が覚え書きとして,あとで確認のために残す文章などになります。
  • コメント(注釈)を残すには,コメントの前後に <!-- コメント(注釈)文 --> のようにします。
  • 次に例を示します。
HTMLコード ブラウザーの画面
プログラミング数学<!-- 2017年度からはHTML5に準拠してます --> プログラミング数学

2.4.2 特殊文字

  • HTMLは開始タグと終了タグでマークアップするため,タグで利用されている半角記号の <> は使えません。
  • それ以外にも&(アンパサンド)も文字コードで利用するため使用できません。
  • また,半角スペースも無視されてしまいます。
  • これらの文字を出力したい場合には,文字実体参照と呼ばれる文字コードを使用します。以下にいくつかを紹介しておきます。
表5: 代表的な文字実体参照
HTMLコード ブラウザーの画面 備考
&lt; < less than
&gt; > greater than
&amp; & ampersand
&copy; © 著作権マーク
&nbsp:   4 non breaking space
&emsp; 5 em size space
&ensp; 6 en size space

2.5 段落,改行要素

2.5.1 段落要素 p

  • 段落要素 p は,すでに利用してきています。これは paragraph の頭文字で定義されています。
  • 日本語の文章では,段落を表す方法として,段落初めのマージンを1文字下げます。英文の場合は,直前に空行を1行挿入します。
  • HTMLでは,英文に倣(なら)って 新しい段落の直前に空行 を入れます。
  • 段落は <p>段落の文章</p> のようにして括り出します。

2.5.2 改行要素 br

  • 改行要素 br は, break の頭文字で定義されています。
  • 改行したい行末の文字の後ろに <br> を挿入するだけです。
  • これまでのタグのように 開始・終了タグで括(くく)る 必要はありません。
練習
コメント(注釈),特殊文字,段落,改行について練習しましょう。
  1. テキストエディターを起動し,ファイル名 lesson.html という名前で L:\html に保存します。
  2. 次の構造タグを打ち<body>〜</body>の中に,色々と試し打ちをして確認しましょう。
  3. 上書き保存後に提出しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Lesson!</title>
</head>
<body>
<!-- 本日の日付(例 20170505) -->
<section>
<h1>コメント,特殊文字などの練習</h1>


</section>
</body>
</html>

2.6 見出し要素

  • 文章の構造は,上述の要素sectionを一つの章の括りにしながら構成します。各章には必ずその章の意味合いを明示するために見出し要素を配置します。
  • 見出し要素はheadingの頭文字のhに続けて,章のランクを数字で示します。
  • 次の表は一般的な文章の構造の例になります。
第1見出し           <section>
  |                    <h1>第1章</h1>
  第2見出し           <section>
    |                    <h2>第1節</h2>
    第3見出し           <section>
                           <h3>第1項</h3>
                          </section>
                       </section>
                     </section>

第1見出し           <section>
  |                    <h1>第2章</h1>
  第2見出し           <section>
  |                      <h2>第1節</h2>
  |                    </section>
  第2見出し           <section>
                         <h2>第2節</h2>
                       </section>
                     </section>
  • この例からわかることは,要素sectionを 入れ子7 にすることで各章の構造を決めているということ。
  • しかし要素sectionだけでは,その入れ子の構造をよく確認しないと階層の深さがわかりづらいため, 要素hと数字の大きさ で,階層化された構造をわかりやすくしています。
  • 要素hの数字は1〜6 まで用意されています。したがって6つまで階層を下げて見出しを設けることができますが,せいぜい4つくらいで収めた文章の方がわかりやすくて,見やすいです。
  • 見出しですので,要素hの 終了タグの後には自動で改行 が入ります。
  • 世界の国々を構造的に示してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>世界の国々</title>
</head>
<body>
<section> <!------------------------------- 第1見出し(アジア諸国)------------------------>
 <h1>アジア諸国</h1>
  <section> <!---------------------------------- 第2見出し(北アジア)--------------------->
   <h2>北アジア</h2>
   <section> <!-------------------------------------- 第3見出し(ロシア)------------------>
    <h3>ロシア</h3>
     <p>首都:モスクワ</p>
     <p>人口:1億4,651万人</p>
     <p>公用語:ロシア語</p>
   </section>
  </section>

  <section> <!---------------------------------- 第2見出し(東アジア)--------------------->
   <h2>東アジア</h2>
   <section> <!-------------------------------------- 第3見出し(大韓民国)---------------->
    <h3>大韓民国</h3>
     <p>首都:ソウル</p>
     <p>人口:5,150万人</p>
     <p>言語:韓国語</p>
   </section>
   <section> <!-------------------------------------- 第3見出し(中華人民共和国)---------->
    <h3>中華人民共和国</h3>
     <p>首都:北京</p>
     <p>人口:13億7,600万人</p>
     <p>言語:漢語(中国語)</p>
   </section>
   <section> <!-------------------------------------- 第3見出し(朝鮮民主主義人民共和国)-->
    <h3>朝鮮民主主義人民共和国</h3>
     <p>首都:平壌</p>
     <p>人口:2,515万人</p>
     <p>言語:朝鮮語</p>
   </section>
   <section>
    <h3>モンゴル国</h3> <!--------------------------- 第3見出し(モンゴル国)はじまり ----->
     <p>首都:ウランバートル</p>
     <p>人口:311万9,935人</p>
     <p>公用語:モンゴル語</p>
   </section>
   <section>
    <h3>日本</h3> <!--------------------------------- 第3見出し(日本)はじまり ----------->
     <p>首都:</p>
     <p>人口:</p>
     <p>言語:</p>
   </section>
  </section>

</section>
</body>
</html>
実習02
テキストエディタを開いて,上の例のコードをコピー&ペーストし,its-a-world-1.htmlというファイル名で H:\html に保存し,以下の問いに答えましょう。
  1. 東アジア(第2見出し)の1国である日本(第3見出し)の情報を正しく追加し,上書き保存後,提出。
  2. 最後尾に東南アジア(第2見出し)のラオス(第3見出し)の情報を正しく追加し,名前をつけて保存から,ファイル名をits-a-world-2.htmlとして保存後,提出。
  3. 最後尾にヨーロッパ諸国(第1見出し)の西ヨーロッパ(第2見出し)に位置するフランス(第3見出し)の情報を正しく追加し,名前をつけて保存から,ファイル名をits-a-world-3.htmlとして保存後,提出。

2.7 箇条書き要素

2.7.1 記号による箇条書き要素 ul

  • 記号による箇条書き要素 ul は, unordered list の各頭文字で定義されています。
  • この要素は論理的要素になり,実際の箇条書き部分には list item の各頭文字で定義された li 要素で項目ごとに括ります。
  • 例を示します。
表6: 記号による箇条書きの例
HTMLコード ブラウザーの画面
<ul>  
<li>りんご</li> ・りんご
<li>みかん</li> ・みかん
<li>ぶどう</li> ・ぶどう
</ul>  
  • この要素 ul にはHTML4.01では,typeという属性(attribute)の定義が用意されていました。
  • HTML4.01までは,このtype属性(正しくは属性名)の値 circle , square , disc によって表記できる先頭の記号を選択することができましたが, HTML5の現在は,これらの属性は廃止 されています。
  • もし,先頭の記号を変えて箇条書きにアクセントを付けたいならば, 後述するCSSのlist-style-type属性 で指定するようになります。

2.7.2 番号による箇条書き要素 ol

  • 番号による順番付き箇条書き要素 ol は, ordered list の各頭文字で定義されています。
  • この要素も論理的要素になり,実際の箇条書き部分には li 要素で項目ごとに括ります。
  • 例を示します。
表7: 番号による箇条書きの例
HTMLコード ブラウザーの画面
<ol>  
<li>りんご</li> 1. りんご
<li>みかん</li> 2. みかん
<li>ぶどう</li> 3. ぶどう
</ol>  
  • こちらも記号による箇条書き要素 ul と同じくtype属性がありましたが,HTML5で廃止されています。
  • 先頭の番号を数字以外のオーダーに変えたいならば,同様に 後述するCSSのlist-style-type属性 で指定するようになります。

2.7.3 説明文による箇条書き要素 dl

  • 説明文による箇条書き要素 dl は, description list の各頭文字で定義されています。
  • この要素dlは論理的要素になり,実際には説明される文を description term の各頭文字で定義された dt 要素で括って指定します。
  • そして,このdtで定義された説明される文の説明文を description , definition の各頭文字で定義された dd 要素で括ることになります。
  • 実際の表記に関わる dtdd終了タグの後には自動で改行 が入ります。
  • 例を示します。
表8: 説明文による箇条書きの例
HTMLコード ブラウザーの画面
<dl>  
<dt>果物の色,色々</dt> 果物の色
 <dd>りんごは赤い</dd>  りんごは赤い
 <dd>みかんは橙</dd>  みかんは橙
 <dd>ぶどうは紫</dd>  ぶどうは紫
<dt>野菜の色,色々</dt> 野菜の色
 <dd>トマトは赤い</dd>  トマトは赤い 
 <dd>人参は橙</dd>  人参は橙
 <dd>なすは紫</dd>  なすは紫
</dl>  
実習03
これまでの箇条書きの例を実際にエディターで入力して確認します。次の手順で進めましょう。
  1. テキストエディターを起動し,ファイル名 list-practice.html という名前で L:\html に保存します。title要素は,「箇条書きの練習」とします。
  2. 要素 section と見出し要素 h を使って第1見出しを「箇条書きの実習」とします。
  3. 第2見出しとして,「記号による箇条書き」とし,要素 p の段落内でテキストに倣って箇条書きを入力します。
  4. 同様に第2見出しとして,「番号による箇条書き」,つづいて「説明文による箇条書き」とし,テキストに倣って入力します。
  5. 上書き保存後,提出しましょう。

2.8 表組み(table)要素

2.8.1 表組みの基本

  • 表組みは, で構成されます。数学では行列という単元がありますが,これも複数の 未知数(列)複数の方程式(行) の連立を表組みで表したものです。
  • HTMLでは表中の 項目 と,その表の 説明の見出し ,および 罫線 などを定義することができます。
  • 表組みの要素名は table です。この要素は論理的要素になり,実際の表組み,項目,説明の見出しは,それぞれ別に要素があります。
  • 行の要素 tr は, table row の各頭文字で定義されます。
  • 列の要素 td は, table data の各頭文字で定義されます。ただし,項目として使用する場合は th になります。これは, table header の各頭文字で定義されます。 th 要素で指定された項目を指すセルは 太字 になります。
  • 作成した表に説明見出しを入れる場合は,要素 caption を使用します。これは要素 table の最初の要素として<caption>~</caption>の~に指定します。
  • 次に一般的な表の例を示します。
表9: 基本的な表組みの例
HTMLコード ブラウザーの画面
<table>
<caption>果物の値段</caption>
<tr>
<th>品目</th><th>単価(円)</th>
</tr>
<tr>
<td>りんご</td><td>150</td>
</tr>
<tr>
<td>すいか</td><td>1,200</td>
</tr>
</table>
果物の値段
品目単価(円)
りんご150
すいか1,200

2.8.2 行の融合と列の融合の変更

  • 表組みの th あるいは td 要素には 列の融合行の融合 を指定できる属性があります。
  • 列の融合 がわかりやすいので,こちらから説明します。 colspan 属性を使用します。例えば,2列分を融合して一つの枠にまとめるときは, <td colspan=2> などとします。
  • 次の例で確認しましょう。
表10: 列を融合した表の例
HTMLコード ブラウザーの画面
<table>
<caption>果物</caption>
<tr>
<th colspan=2>果物</th>
</tr>
<tr>
<td>りんご゙</td><td>200</td>
</tr>
<tr>
<td>すいか</td><td>1,200</td>
</tr>
</table>
果物
果物
りんご゙200
すいか1,200
  • 次に 行の融合 です。 rowspan 属性を使用します。2行分を融合して一つの枠にまとめるときは, <td rowspan=2> などとします。
  • 次の例で確認しましょう。
表11: 行を融合した表の例
HTMLコード ブラウザーの画面
<table>
<caption>果物</caption>
<tr>
<th rowspan=3>果物</th><td>りんご</td>
</tr>
<tr>
<td>すいか</td>
</tr>
<tr>
<td>めろん</td>
</tr>
</table>
果物
果物りんご゙
すいか
めろん
実習04
これまでの表組みの例を実際にエディターで入力して確認します。次の手順で進めましょう。
  1. テキストエディターを起動し,ファイル名 table-practice.html という名前で L:\html に保存します。title要素は,「表組みの練習」とします。
  2. 要素 section と見出し要素 h を使って第1見出しを「表組みの実習」とします。
  3. 第2見出しとして,「表組みの基本」とし,要素 p の段落内でテキストに倣って表組みの基本例を入力します。
  4. 同様に第2見出しとして,「列の融合の表組み」,つづいて「行の融合の表組み」としながら,テキストに倣って入力します。
  5. 上書き保存後,提出しましょう。

2.9 画像(img)要素

HTMLで利用できる画像形式は,主に拡張子が jpg(jpeg),gif,png8 のものです。これ以外にもいくつかありますが,本時では触れません。

  • img 要素は論理的要素になり,画像の貼り付けを定義します。
  • 実際に貼り付けたい画像などの指定は 属性 で行います。 属性属性名 = 属性値 の形式で指定します。
  • 属性は半角スペースで区切り ながら要素(タグ)の中に連記します。
  • 以下に,主な 属性名と属性値 を示します。
表12: img要素の属性名と属性値
属性名 属性値
src 貼り付けたい画像のパス
alt 画像が見られない環境下での画像の説明文
title 画像のキャプション(表題)
  • HTML5では, img 要素を用いて画像を貼り付ける際は figure 要素で宣言します。
  • 属性名 title でキャプションを指定した場合は,ブラウザーによって挙動が少し異なりますが,画像上にポインタを合わせるとポップアップで表示されます。
  • ページ上に文字列としてキャプションを表示したい場合には, legend 要素に記述します。
実習05
次の表の左列のコードを入力すると,右列のようなページになることを次の手順で確認しましょう。
  1. まず画像の用意をします。
  2. paintソフトでりんごの絵を描き,JPG形式で apple.jpg という名前で L:\html に保存します。
  3. エディターを起動して,以下の表の左列のコードを入力します。 title 要素は「画像の貼り付け」とし, L:\htmlimg-practice.html という名前で保存します。
  4. ブラウザーで確認しましょう。
表13: imgの実習
HTMLコード(抜粋) ブラウザーの画面
<figure>
<legend>りんご</legend>
<img src="./apple.jpg" alt="りんごの絵" title="りんご">
</figure>
りんごりんごの絵

2.10 ハイパーリンク(a)要素

世界中のwebページと相互リンクで繋がるインターネットは,膨大な情報の海に例えられます。このwebページ最大の特徴であるページの相互リンクを ハイパーリンク といい,それを実現するのが a 要素になります。

  • a 要素9は論理的要素になり,他のページへの ハイパーリンク を定義します。
  • 実際に ハイパーリンク で移動するページの指定などは, img 要素と同様に, 属性 で行います。
  • 属性は半角スペースで区切り ながら要素(タグ)の中に連記します。
  • 以下に,主な 属性名と属性値 を示します。
表14: a要素の属性名と属性値
属性名 属性値
href 移動先のページの URL10 を指定
target ターゲットになる移動先のページをどのように開くかを指定するタイプ名



表15: targetで指定できるタイプ名とその説明
タイプ名 説明
_self 現在のウインドウで移動先のページを開く(初期設定)
_parent 現在のウインドウの親ウインドウで移動先のページを開く
_top 現在のウインドウの最上位階層のウインドウで移動先のページを開く
_blank 新しいウインドウや新しいタブで移動先のページを開く

2.10.1 ハイパーリンクの相対パスと絶対パス

href 属性名の属性値の指定方法には, 相対パス絶対パス の大きく2通りがあります。

  1. 相対パス は自身のwebサイト内で作成した別ページへのハイパーリンクに使用します。例えば,htmlフォルダー内にfirst.htmlとsecond.htmlというページがあった場合にそれぞれのページへハイパーリンクするときは,図のようにそれぞれのページ内にHTMLを記述すれば良いです。
    relative-reference.png
  2. 絶対パス は他の人のwebサイトのwebページへのハイパーリンクに使用します。これは, http:// あるいは https:// で始まるものになります。
    • 例えば,本校のwebサイトへハイパーリンクするときは,次のHTMLを記述すれば良いです。
    • <a href="http://www.hs.cuc.ac.jp/" target="_blank">千葉商科大学付属高等学校へ</a>

2.10.2 target 属性と 著作権 の関係について

  • インターネット上のwebページは 著作物 であり,イメージやロゴにはそれぞれ, 肖像権商標権 などが登録されています。
  • そのため,他人のwebサイトへのハイパーリンクを指定する際には, target 属性で target = "_blank" とし,新規ウインドウに表示するようにすべきです。
  • そうせずに, target = "_self"などとし,同じウインドウに他の人に著作権があるページをハイパーリンクした場合,閲覧した人に著作権の誤解を招く行為と見なされます。

2.11 フォーム(form)要素

form 要素を用いることで,閲覧者がインターネットを通じてwebサーバへ 入力したデータなど11 を送信することが可能になります。詳しくは W3CのHTML5.1 を参照。

  • form 要素は入力エリアの枠決めを定義します。送信先となるwebサーバや送信するデータの形式なども属性で指定します。
  • 実際に入力するデータのエリアは, inputselecttextarea などの要素で指定します。
  • まず以下に,*form* 要素の 属性名と属性値 を示します。
表16: form要素の属性名と属性値
属性名 属性値
accept-charset サーバに送信する際の文字コードを指定。"utf-8"など。本時では特に指定はしないことにする
action データの送信先を指定。"/hogehoge.cgi"など。安全性の確保から相対参照が良いとされる
autocomplete 自動で入力データの補完をするか否か。"on"など。初期設定は"on"
enctype 送信するデータの形式を指定。初期設定は"application/x-www-form-urlencoded"。その他に,"multipart/form-data"",text/plain"が指定できる
method 送信方式を指定。"get"と"post"が指定できる
name form自身に名前を指定。この指定によって送信先のプログラムでformの特定が可能になる
novalidade この属性名には属性値がなく,単にnovalidateと記述。入力されたデータが有効な形式になっているかの確認を行わない
target 出力結果の表示先を指定。 a 要素のtargetと同じ属性値になる。

2.11.1 input 要素

input 要素を使用することで, form 要素内に具体的な入力フィールドを表示できます。

  • input 要素は下表の type という 属性名属性値 が用意されています。
  • それぞれ表記や機能が異なります。
表17: type要素の属性名と属性値
属性名 属性値 表示されるタイプ
hidden *    
text *    
search    
tel *    
url *    
email *    
password *    
date    
month    
week    
time    
datetime-local    
number    
range    
color    
checkbox *    
radio *    
file    
submit *    
image    
reset *    
button *    

2.11.2 textarea 要素

textarea 要素を使用することで, form 要素内に複数行のテキストが入力できるフィールドを表示します。

  • 多くの 属性 が用意されています。下のW3CのHTML5.1のリファレンスを開き,訳して内容を確認してみましょう。

    W3C HTML5.1 The textarea element

実習06
上のW3Cの原文から textarea 要素で利用出来るすべての 属性名 と,その機能の説明を次の手順で提出してください。
  1. Emeditor等のエディターに内容を記述する。
  2. ファイル名をtextarea_func.htmlとし,改行LF,文字エンコードUTF-8(BOMなし)で保存する。
  3. フォーマットは,属性名:機能<改行>で列挙する。

2.11.3 select 要素

select 要素を使用することで, form 要素内にドロップメニュー形式のフィールドを表示します。

  • select 要素内は,空かあるいは, option , optgroup 要素などを記述します。
  • こちらも,下のW3CのHTML5.1のリファレンスを開き,訳して内容を確認してみましょう。

    W3C HTML5.1 The select element

実習07
上のW3Cの原文から select 要素と option 要素を利用した例をHTMLを次の手順で作成しましょう。
  1. Emeditor等のエディターに内容を記述する。
  2. 原文のEXAMPLE 46(かなり下の方にスクロールする)を参考にアレンジした例を作成しましょう。
  3. ファイル名をselect_sample.htmlとし,改行LF,文字エンコードUTF-8(BOMなし)で保存する。

2.11.4 button 要素

  • button 要素は,ボタンをページ上に作成します。
  • input 要素の type 属性の値に同様な button があり,こちらもボタンを作成できました。違いは, button 要素は,ボタンの中に文字や画像を入れることができるなどの拡張性に優れる点です。
  • 今回も下のW3Cの原文を確認しますが,特に type 属性についてよく確認しましょう。

    W3C HTML5.1 The button element

実習08
上のW3Cの原文から button 要素についてのレポートを次の手順で提出しましょう。
  1. Emeditor等のエディターに内容を記述する。
  2. type 属性の属性値submit,reset,buttonの3つについて実習06に倣ってレポートする。大見出名を"button要素のtype属性"とする。
  3. その下に続けて,大見出名を"EXAMPLE"として,W3Cの原文のEXAMPLE 45を参考にして,アレンジした例を一つ作成しましょう。
  4. ファイル名をbutton_func_example.htmlとし,改行LF,文字エンコードUTF-8(BOMなし)で保存する。

3 インターネットの仕組み

3.1 webサーバ

  • インターネットに公開するファイルを保存し,ホームページとしてブラウザーなどで閲覧のサービスを提供するコンピュータのことを webサーバ と言います。
  • web サーバは, 世界中のwebサーバと相互 につながり合っています。
  • 個人のパソコンとは違い世界中からの閲覧の要求に応答しなければならないため,原則24時間稼動します。そのため 耐久性 が求められます。また,悪意のあるアクセスに対して 脆弱であってはなりません
  • コンピュータを動かす基本ソフトのことを OS(WindowsやMacOS,Androidなど) といいますが,このようにwebサーバには耐久性や強固さが求められます。
  • それらに特化したものがはwebサーバのOSとして使用されます。これを サーバOS などとも言います。
  • 現在世界中で稼働しているwebサーバのOSは,WindowsやMacOS以外にも *Linux,BSD,Soralis *などといったはじめて耳にするようなものが多くあります。

3.2 HTTP(Hyper Text Transfer Protocol)

脚注:

1

Internet Engineering Task Forceの頭文字。インターネットで利用される技術の標準化を策定する世界的に開かれた組織

2

Document Type Definitionの頭文字。文章型定義のこと。HTML4.01では,HTML文書の冒頭に
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
を宣言し,そのHTML文書の構造の宣言をすることになりました。strict.dtdは厳格にHTML4準拠タイプ(標準モード)を定義していますが,それ以外にloose.dtd,frameset.dtdの合わせて3つが用意されいます。前者がHTML3.2からの移行タイプ(互換モード),後者が同じくHTML3.2からの移行タイプでフレームの仕様を含めたもの(互換モード)になっています。

3

boldの頭文字

4

これは半角スペースの幅で,かつ,強制的に改行をさせないコード

5

アルファベットのmと同じ幅のスペース。行末では自動改行する

6

アルファベットのnと同じ幅のスペース。行末では自動改行する

7

[a-{b-(c+d)}]のように内側に向かってカッコで括る様子

8

jpg(jpeg):joint photographic experts group(この画像圧縮技術を開発したチーム名),gif:graphic interchange format,png:portable network graphicsのそれぞれ頭文字を指す

9

anchorの頭文字

10

Uniform Resource Locatorの頭文字

11

必ずしも閲覧者が主体的に入力したデータだけがwebサーバに送られる訳ではありません。環境変数と言われる変数やwebページ作成者が透過的に入力したデータなども期せずして送信されることはあります。

著者: 千葉商科大学付属高等学校 数学科 樽 正人

Email: scorpion@hs.cuc.ac.jp

Created: 2017-09-13 水 10:31

Emacs 25.2.1 (Org mode 8.2.10)

Validate