Html1

０からのプログラミング講座
Stage1
本⽂文書のいかなる部分をも、事前の許可なく複写したり転送したりすることはできません。

© Toshiyuki Tanaka & Jun Chiba 1

第1章 HTML

HTMLは、Internet ExplorerやFirefox、Chromeなどのインターネット
プラウザ上にウェブページを表⽰示するための⾔言語です。わたしたちが
ふだん利利⽤用しているウェブサイトは、どのようにして記述されている
のか、詳しく⾒見見ていきます。

2

Copyright (c) 2011-2012 Toshiyuki Tanaka & Jun Chiba All rights reserved .

ゴールイメージ

l  Stage1のゴールイメージ
-  以下のような⾃自⼰己紹介サイトが作成できること

3


HTMLとは (1/2)

l  HTML
-  ウェブページを作成するために利利⽤用される⾔言語。
-  HyperText Markup Languageの略略
ü HyperText :複数の⽂文書を相互に関連付け、結び付ける
仕組み。「テキストを超える」という意味から。

ü HTML →ハイパーテキストに⽬目印をつける⾔言語
-  ⽬目印をつける（Markup）というのは、⽂文書の各部分が、
どんな役割を持っているのかを⽰示すということ。
-  コンピュータに理理解できるように⽂文書の構造を定義するこ
とが、HTMLの最も重要な役割。
4


HTMLとは (2/2)

普通の⽂文章マークアップのイメージ
HTMLとは？ <これはタイトル>HTMLとは？<ここまで>
HTMLの基本 <これは⾒見見出し>HTMLの基本<ここまで>
HTML（エイチティーエムエル、HyperText <これは段落落>HTML（エイチティーエムエル、
Markup Language）は、ウェブページを作成す HyperText Markup Language）は、ウェブペー
るために開発された⾔言語です。現在、インタージを作成するために開発された⾔言語です。現在、
ネット上で公開されてるウェブページのほとんインターネット上で公開されてるウェブページ
どは、HTMLで作成されています。のほとんどは、HTMLで作成されています。 <こ
HyperText Markup Languageを⽇日本語で表すなこまで>
ら、「ハイパーテキストに⽬目印をつける⾔言語」 <これは段落落>HyperText Markup Languageを⽇日
くらいの意味になります。ハイパーテキスト本語で表すなら、「ハイパーテキストに⽬目印を
（HyperText）とは、ハイパーリンクを埋め込む「開始タグ」と呼ぶ
つける⾔言語」くらいの意味になります。ハイ
ことができる⾼高機能なテキストです。ハイパーパーテキスト（HyperText）とは、ハイパーリン
リンクというのは、ウェブページで下線の付いクを埋め込むことができる⾼高機能なテキストで
たテキストなどをクリックすると別ページへ移す。ハイパーリンクというのは、ウェブページ
動する、あのリンクのことです。で下線の付いたテキストなどをクリックすると
別ページへ移動する、あのリンクのことです。
<ここまでね>

コンピュータは各部の役割がコンピュータは各部の役割を
理理解できない理理解できる！ 5


HTMLの書き⽅方 (1/6)

l  勉強道具を揃えよう！でダウンロードしたエディタ(サクラエ
ディタ or KEidt)を起動しましょう。
l  そこに以下のHTMLを記述し、ファイル名をhello.htmlにして
保存したファイルを、ダブルクリックしてみましょう。
<html> 「”」をダブル
<head> クォーテーション
と呼びます
<meta charset=”utf-8”>
<title>ウェブページのタイトル</title>
</head>
<body>
ブラウザで表⽰示
<h2>ウェブページの見出し</h2>
ウェブページを作成しました！こうなればOK
</body>
</html>

時間制限

10min
保存する際は、⽂文字コード（⽂文字コードセット）をUTF-8に設定し、
hello.htmlという名前で保存してください。
ファイル拡張⼦子を変更更するには、拡張⼦子を表⽰示させる必要があります。（詳しくはAPPENDIXをご確認ください）
6


補⾜足⽇日本語が変な⽂文字になったら

l  この現象を「⽂文字化け」といいます。⽂文字化けの原因は・・・
ü <meta charset = ”utf-8” > と正しく書いてますか？
ü ファイルを保存の時にUTF-8を選択しましたか？
ü ブラウザのエンコードはUTF-8になっていますか？
ü ダブルクォーテーション「”」が半⾓角になっていますか？
chromeを
使っている⼈人向けまずはスパナ
マークを
クリック

IEを
使っている⼈人向け

まずはブラウザ
上で右クリック
7



<html>
<head>
<meta charset=”UTF-8” />
HTMLヘッダ <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
<meta name=”keywords” content=”このページのキーワード” />
ブラウザからは
⾒見見えない
<meta name=”description” content=”このページの概要” />
ウェブページに関す <link rel=”stylesheet” href=”style.css” />
る
あれこれを設定する <script type=”text/javascript” src=”common.js”></script>
<title>ウェブページのタイトル</title>
</head>

<body> HTMLは⼤大きく分けて２つの部品に
<h1>ウェブページの見出し</h1> 分けることができます。
ボディ <p>ウェブページを作成しました！</p> １つはこのサイトについての
ブラウザから
</body> あれこれ（タイトルなど）を
⾒見見える記述するヘッダ（頭）、
ウェブページの中⾝身 </html>
をもう⼀一つが実際に画⾯面に表⽰示する
あれこれ記述
内容を記述するボディ（体）です。
8



l  HTMLの記述は⼩小⽂文字、半⾓角で

l  <開始タグ>〜～</終了了タグ>で内容を囲む
タグの種類を指定します。どのようなタグを書くとどうなる
のかはタグの種類によって変わります。
<h2></h2>で囲むと⽂文字が
⾒見見出しなら <h2>文字</h2>
⼤大きくなります。

太字なら <b>セル1</b> ウェブページを作成しました！
はその外側なので普通の⼤大きさに
なります。
-  終了了タグを持たない空要素
<br>や<img>のように、終了了タグを必要としないタグ　　
もあります。

改⾏行行 <br> 画像 <img src=”hoge.jpg”>

image、sourceの略略
breakの略略
表⽰示したい画像ファイルの名前を書く
9



l  タグは⼊入れ⼦子にできる
タグは⼊入れ⼦子（ネスト）にすることができます。例例えば、
<p>タグと<b>タグを⼊入れ⼦子にして、段落落（paragraph）のな
かの特定箇所だけを、強調（b）することができます。

強調したり <p><b>太字</b>普通</p>

画像⼊入れたり <h2><img src=”image/hoge.jpg”>文字だよ</h2>

-  ⼊入れ⼦子にできないタグもある
実はHTMLタグには「ブロック要素」と「インライン要
素」の２種類があり、詳細は省省きますが、インライン要素
のなかにブロック要素をいれることはできません。
ü 詳しく知りたい⼈人は調べてみて下さい。

10



HTMLタグの種類（⼀一例例）

-  h1 〜～ h6 -  a
-  p -  img
-  table -  span
ü tr / th / td -  Input
-  ul / ol -  button
ü li -  select
-  dl ü option
ü dt / dd -  textarea
-  div
-  form エンジニアも全てのタグを
覚えているわけではありません。
タグの意味をみなさんも使いながら徐々に
調べてみましょう覚えて⾏行行きましょう！

「HTMLタグリファレンス」で検索索！
http://www.htmq.com/html/indexm.shtml 11



l  別のファイルへのリンク
HTMLは他ファイルとの関連付けを⾏行行えることが特徴です。
他ファイルの位置を⽰示す⽂文字列列をパス（Path）といいます。
-  絶対パス
どこから⾒見見ても変わることのない位置な場所です。
他のパソコンにあ
るファイルへのリ ü URLで指定する
ンクに使⽤用。
http://からはじまるURLでファイルを指定します。
<a href=”http://google.com/”>文字</a>

-  相対パス
⾃自分のファイルパスからの相対的な位置で指定します。
同じパソコン内で
のリンクに便便利利。
フォルダ構成が変
わっても⼤大丈夫。同じフォルダのファイルひとつ上の階層のフォルダのファイル

<a href=”temrs.html”>文字</a> <a href=”../temrs.html”>文字</a>

絶対パスと相対パスの違いは住所を例例にすると
絶対パスとは、東京都世⽥田⾕谷区三宿・・・のように誰から⾒見見ても変わることのない住所で、
相対パスとは、「お隣隣さん」のように誰を基準にするかで異異なる住所のことです。
12


お疲れ様でした！！

13


Html1

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (15)

Similar to Html1

Similar to Html1 (20)

More from Jun Chiba

More from Jun Chiba (20)

Html1