東放学園2012後期スライド

HTMLを書いてみよう！
基本的な記述方法をマスターする

Friday, October 5, 12

今日やること


好きなグループのサイトをつくる


今日の内容
HTMLページのつくりかた基礎

- HTMLとは何かを理解する
- 基本的なツールの紹介
- 基本的なHTMLタグを理解する


3人以上のグループ
（バンドなど）を決める


画像の準備


好きなバンドを検索する
Googleの画像検索で画像を保存する

2. 右クリックで保存
1. クリック


HTMLエディタ


おすすめのエディタ
HTMLを記述するソフトウェア（エディタ）

テキストエディタならなんでもよい。フリー（無料では、Windowsなら
サクラエディタ、MacならMiなどがある。

- サクラエディタ http://sakura-
editor.sourceforge.net/
- Mi http://www.mimikaki.net/
- Sublime Text 2
有料なら選択肢はたくさん

- WebデザイナーならAdobeから販売されている

トップページをつくる


トップを作りながら学ぶ
HTMLの基本構造を書く

見出しタグ

画像を表示する

段落をつくる

リンクをはる


メンバーそれぞれのページを
つくる


トップを作りながら学ぶ
戻るリンクをつくる

あとは同じ


課題1
メンバーページをもう一つ作る

リンクができるようにする


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

ZOOROPPA
ライオン

大見出し画像を挿入

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

Welcome to ZOOROPPA ・トップ
・ぞう

中見出し

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

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

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

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

・トップ
・ライオン


今回のまとめ


HTMLの基本構造
何はともあれ、HTMLは以下を必ず書く

<html>
! <head>
! ! ヘッダ
! </head> HTML文書
! <body>
! ! ボディー
! </body>
</html>


ヘッダ部分
タイトルや概要などを記述する

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


ボディ部分
本文を記述する

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


マークアップ


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

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

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


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

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


東放学園2012後期スライド

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

東放学園2012後期スライド