Htmlの書き方入門編

HTMLの書き方(入門編)
HTML4を使ったページ制作

Thursday, May 17, 12

アジェンダ
HTMLページのつくりかた
HTMLとは何か？

ページに意味を与える「HTMLタグ」

基本的なマークアップについて

実習：Webページをつくってみよう

Webサイトのつくりかた
WebサイトとはWebページがまとまったもの

基本的なWebサイト構造


HTMLとは
文書に意味付けをするための言語


HTMLとは
例えばビートルズを紹介するページの場合


HTMLとは
人間は見た目で文書の構造を理解します

大見出し

中見出し
文字の位置や大きさ、レ
小見出し
イアウトなどで文書の構
小見出し造を把握し、内容を理解
する。
大見出し

中見出し

子見出し

子見出し2


HTMLとは
しかし機械は見た目で理解できません

?

?

?
?

?
例えばGoogleはページの
? 見た目だけでは何が書か
れているのかを理解する
?
ことができません
?


文書をマークアップする
文書にタグをつけることをマークアップという

大見出し <h1></h1>

中見出し <h2></h2>

小見出し <h3></h3>

小見出し <h3></h3>

大見出し <h2></h2>

中見出し <h3></h3>
子見出し <h3></h3>
子見出し2 <h4></h4>


文書をマークアップする
文書にタグをつけることをマークアップという

<h1></h1>

<h2></h2>

<h3></h3>

このようにマークアップさ <h3></h3>
れているものであれば、
Googleも内容を理解し、 <h2></h2>
検索された時の表示を正
<h3></h3>
しくすることができます。
<h3></h3>

<h4></h4>


ふたたびHTMLとは
HTMLとは機械でも判断できるように文書をマー
クアップするためのもの
機械が自動処理できるようにするためにHTMLはある

Googleのような検索エンジンは内容をタグで理解する

タグに気をつけてかかないと適切な検索結果として反映されない

HTMLは見た目を整えるための言語ではなく「意味付け」のための言語


HTMLの基本構造
HTMLの基本的な構造を理解しよう！


HTMLの基本構造
何はともあれ、HTMLは以下を必ず書く
<html>
! <head>
! ! ヘッダ
! </head> HTML文書
! <body>
! ! ボディー
! </body>
</html>


ヘッダ部分
タイトルや概要などを記述する
<html>
! <head>
! ! <title></title>
<meta name=”description” content=”ページの概要”> ヘッダ

! </head>
! <body>
! ! ブラウザでは見えない部分。ペー
! </body> ジのタイトルや概要などを記述す
</html> る。Googleなど検索エンジンはこ
の部分を重要視する。


ボディ部分
本文を記述する
<html>
! <head>
! ! <title></title>
<meta name=”description” content=”ページの概要”>
! </head>
! <body>
! ! ページ内容ボディ
! </body>
</html>
ブラウザで見える部分。
ここに本文を記述し、それをマー
クアップする。


基本的なHTMLタグ
基本的なタグの書き方と使い方


ツールと記述のルール


ツールと記述のルール
HTMLを記述するソフトウェア
テキストエディタならなんでもよい。フリー（無料では、Windowsなら
サクラエディタ、MacならMiなどがある。

- サクラエディタ http://sakura-editor.sourceforge.net/
- Mi http://www.mimikaki.net/

記述方法
HTMLタグはすべて小文字… <title></title><head></head>

保存ファイル名の拡張子はhtml… index.html, shop.html

この.htmlが拡張子


ツール
HTMLを記述するソフトウェア
テキストエディタならなんでもよい。フリー（無料では、Windowsなら
サクラエディタ、MacならMiなどがある。

- サクラエディタ http://sakura-editor.sourceforge.net/
- Mi http://www.mimikaki.net/

有料なら選択肢はたくさん
WebデザイナーならAdobeから販売されているDreamweaverがスタン
ダート。


タイトルタグとメタタグ


<title></title>タイトルタグ
ページのタイトルを記述する
ヘッダーの中に記述し、そのページを表すようなタイトル名にする。

<html>
! <head>
! ! <title>ページのタイトル</title>
! </head>
! <body>
! ! ページ内容
! </body>
</html>


タイトルタグとメタタグは重要
検索結果に反映される
クリックするかしないかはこの文言で決まるといっていい。

<html>
! <head>
! <title>人気の商品から選ぶ - 母の日2012 - Yahoo!ショッピング</title>
<meta name=”description” content=”ショッピングの「母の日2012」…”>

! </head>
! <body>
! ! ページ内容
! </body>
</html>


文書に意味付けするタグ


その1
ｈタグ（見出しタグ）
<h1></h1>から<h6></h6>まである。h1が一番大きな見出し。
<h1>大見出しにする文字</h1>

pタグ（段落タグ）
文章のかたまり=段落を囲む時に使用する
<p>文章のかたまり</p>

strongタグ（強調タグ）
協調したい部分を囲むタグ
<strong>強調したい文字</strong>


その2
listタグ（リストタグ）
箇条書きの時に使用する
<ul>文章のかたまり
<li>箇条書きの項目1</li>
<li>箇条書きの項目2</li>
</ul>

imgタグ（画像タグ）
HTML文書内に画像を挿入するときに使用する。
<img src=”ファイル名” alt=”画像を表す言葉”>

aタグ（リンクタグ）
文書同士をリンクでつなぐ場合に使用される
<a href=”リンクさせたいファイル名”>クリックする文字</a>


その3
brタグとhrタグ（改行タグ, 水平線タグ）
改行したい場合は<br>を使用し、区切り線を入れたい場合には<hr>使用
する

もじもじ<br>もじもじもじもじ<hr>もじもじ

blockquoteタグ（引用タグ）
文章を引用する場合に使用する
<blockquote> 引用したい文章</blockquote>


課題
架空のヨーロッパ最大の動物園Zooroppa（ズーロッパ）のトップページ
と動物ページを2ページ作りましょう。

ZOOROPPA
ライオン

大見出し画像を挿入

ライオンの習性
ZOOROPPA □□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□

Welcome to ZOOROPPA ・トップ
・ぞう

中見出し

中見出し
ZOOROPPA
ZOOROPPA とは
各ページ相互にリンクする
ぞう
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□

リストとリンク □□□□□□□□□□□□□□□□□□□□□

動物
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□

・ライオン
・ぞう
ぞうの習性
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□□□□□□□

・トップ
・ライオン


Htmlの書き方入門編

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (9)

Similaire à Htmlの書き方入門編

Similaire à Htmlの書き方入門編 (20)

Plus de touhou

Plus de touhou (7)

Htmlの書き方入門編