メディアデザイン演習3γ
02 HTMLの基本を知ろう

HTMLというものを書いてみよう

前期は、ウェブサイトを表示するために必要なHTMLというプログラムを学びます。
前期合評時の製作目標は、自分が編集長となるウェブマガジンサイトをつくることです。

いよいよ今日から、HTMLを学びます。
はじめに、「HTMLとは何か」という基本的な内容について説明します。 
そして、「UNDER CONSTRUCTION」工事中のページを作成しながら、基本となるHTMLを実際に書いてみましょう。

ウェブサイト作成/閲覧に必要なもの

ブラウザ
HTML 文書を閲覧/出力するためのソフトウェアをブラウザと呼びます。
このページを見るのに使っているアプリケーションツールがブラウザです。

代表的なブラウザには次のものがあります:
 Firefox
 Safari
 Google Chrome
 Opera
  Internet Explorer
 などなど 

ウェブブラウザー一覧表 →外部サイトへ


テキスト・エディタ
HTML 文書は単なるテキストファイルです。
したがって、テキストエディタと呼ばれるツールで作成/編集できます。
この授業では、MacOS X のアプリケーション「mi (みー http://www.mimikaki.net/ )」を使ってHTMLを書いていきます。


FTP クライアント
FTP クライアントとは、サーバ上にファイルを転送するためのソフトウェアです。
ウェブサイトは、自分のマシン上で作成した HTML ファイルや画像ファイルなどを、インターネット上のサーバに転送することで公開します。
FTP でサーバに接続するためには、FTP アドレス、 アカウント名(ログイン名)、パスワードが必要です。
まずは、自分のマシン上で HTML ファイルや画像ファイルを作成します。
完成したらちゃんと見られるかどうか確認した後、FTPクライアントを使ってサーバへ転送して公開します。
この授業では、「Cyberduck (さいばーだっく https://cyberduck.io/index.ja.html )」というアプリケーションを使ってファイルをサーバに転送します。


実際にHTML 文書を作ってみる

まずは真似して書いてみる
以下の文章をその通りに手打ちで写してみましょう。 コピー&ペーストは禁止です。


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>工事中</title>
</head>

<body>
<h1>(自分の名前)のウェブサイト</h1>
<h2>ようこそ!でもまだ完成していません。</h2>
<p>sorry, this web site is now under construction.<br />
この授業のウェブサイトへ
<a href="http://seian.okazawarina-design.info/">リンクする</a>
</p>
</body>
</html>


・書き終わったら、ファイルを保存する
名前をindex.htmlとして、保存先をデスクトップに指定し、テキストエンコーディングを「日本語」と選択して保存しましょう。
これでHTMLファイルが出来ました。

HTML文書はテキスト形式のファイルですが、拡張子に「.html」または「.htm」とつける事でブラウザで表示することが可能になります。
ファイル名は基本的には自由ですが、半角で小文字のアルファベット、もしくは数字や記号の組み合わせでつける様にしましょう。 大文字と小文字は別だと認識されることがあるので気をつけて下さい。

・ブラウザでオフラインのチェックをしてみよう
作成したHTMLファイルをWEBブラウザのアイコンにドラッグ&ドロップします。
きちんと見られましたか? →表示例

もし見られなかったら、打ち間違いの可能性があります。
もう一度一字一句テキストを見直して、打ち間違えた所がないか確認しましょう 。
 


HTMLの基本構造

1つのHTMLファイルは、大きく次の2つのパートとその中の要素で構成されます。  

DOCTYPE宣言では、以降のHTMLがどのバージョンを使って書かれているのかを示します。

その後の内容は全て<html>と</html>の中に書き込まれまれ、html要素の中に含まれるようになります。html要素は必ず二つのパートにわかれます。
1つ目の部分をHTMLのhead要素といい、そこにはそのHTML文章に関する情報を示す要素が入ります。2つ目の部分をbody要素といい、ブラウザで開くと見える(表示される)内容が入ります。この2つをあわせたもの、つまりHTMLの本体をhtml要素といいます。

head要素には、文書のタイトルを示すtitle要素を必ず入れます。


HTMLの基本書式

タグは要素の名前を山括弧( "<" と " >" )で囲んだものです。
つまり、これはh1要素を表すタグということになります。
例えば、head要素を示すタグは<head>となります。  

要素
タグは、開始タグ "<要素名>" で始まり、終了タグ "</要素名>"で終わります。
そして、タグで囲まれた範囲を「要素」と言います。

空要素
<br> ..... このタグは改行を表します。終了タグがありません。
終了タグである"</要素名>"は、省略できるものもあり、空要素と呼ばれています。
 



タグで囲まれた部分の特徴付けは、<要素名 属性名="値">と指定します。
この場合、aが要素名、hrefが属性名、"http://www.google.com"が値です。
 
属性は、「属性名="値"」半角スペース「属性名="値"」といくつでも入れる事が出来ます。
しかし、各要素に入れられる属性は決まっており、要素により必ず入れなければならない属性も有ります。


よく使われる要素

タイトルを決める [ title 要素 ]

<title>文書のタイトル</title>

HTML文書には必ずタイトルが必要です。
タイトルはその名の通りtitle要素で表します。
また、タイトルはそのHTML文書に関する情報なので、head要素の内容になります。

タイトルはブックマークや検索サイトの結果表示にも使われます。
「他の人がタイトルだけを見ても文書の内容が分かる」ようにつけてください。




見出しを表す [ heading 要素 ]

文章が長くなると、見出しを入れて読みやすくなるように工夫します。
見出しを示すのは、h1~h6の6つのheading要素です。
h1が大見出し、h2が中見出しと、数字が大きくなるにつれて下位レベルの見出しになっていきます。

これはH1

これはH2

これはH3

これはH4

これはH5
これはH6


HTML内ではこう書かれています
 <h1>これはH1</h1>
 <h2>これはH2</h2>
 <h3>これはH3</h3>
 <h4>これはH4</h4>
 <h5>これはH5</h5>
 <h6>これはH6</h6>



段落を示す[p 要素]

pは段落を意味するParagraphのことです。
一段落ごとにp要素を使ってマークアップします。

<body>
<p>第一段落目の文章を書きます</p>
<p>次に、第二段落目の
文章を書いてきます </p>
...
</body>
</html>

これはブラウザではこのように ↓ 表示されます

第一段落目の文章を書きます
次に、第二段落目の文章を書いてきます

段落の途中で改行しても、ブラウザで表示するときに取り除かれます。
「段落」は意味のまとまりを示すもので、「見かけ上の改行」という考え方とは異なります。




リンクする [ a 要素 ] [ href 属性 ]

<a href="http://www.google.com/">googleにリンクする</a>

ウェブサイトの醍醐味や特色はリンクにあります。リンクにはリンク元(始点)とリンク先(終点)という情報が必要です。
リンク元になる部分(クリックできる部分)はa要素で示します。 リンク先は、このa要素の開始タグに、属性という付加情報を加えて示します。
ここではhrefという属性を使います(要素名と属性は半角のスペースで区切ります)。

<p>この授業のウェブサイトへ<a href="http://seian.okazawarina-design.info/">リンクする</a></p>
<p>このサイトの別のファイルへ<a href="top.html">リンクする</a></p>

hrefで示しているリンク先のアドレスをURLと呼びます。
同じディレクトリ(フォルダ)にある自分のファイルにリンクするには、ここにそのファイル名を書きます。

URL ー Uniform Resource Locator(ユニフォームリソースロケータ、URL) -Wikipedia
HTML5 要素リスト http://www.html5.jp/tag/elements/



来週の内容

引き続き要素と属性の紹介
次週は、リンクの続きと、画像の表示を学びます。
今日作ったファイルは保存して次週も使える様にしておいて下さい。
 
今日の内容を振り返って、よく理解しておきましょう。
わからない事は早めに質問して下さい。