Download presentation
Presentation is loading. Please wait.
1
専門ゼミⅠ 南ゼミ 特別授業③ ２００２年６月７日 金曜日 ４限目 今泉 裕隆
2
前回のレポート コピー＆ペーストみたいな文が多い 参考HPのアドレスがあればなおよろしい 個人的によいと思うレポート
ー 成田君と青木君のレポート
3
今回の目的 ＨＴＭＬについて プログラミングツールをＤＯＷＮＬＯＡＤ 実践！ＨＴＭＬプログラミング
4
ＨＴＭＬとは？ Hyper-Text Markup Language スクリプト言語：書いた物がそのまま反映 ＨＰを作る際に使われる言語
もはや、ＨＰを作るのに欠かせない存在 他の言語と比べると非常に簡単なので、 とてもとっつきやすく，覚えやすい
5
プログラミングツールをＤＬ まず、下記サイトへアクセス そしてDOWNLOADして、適当なフォルダに保存
そしてDOWNLOADして、適当なフォルダに保存 それを解凍してHTML-EFMF.exeを実行 解凍できない人：LhasaをDLしてください 解凍できても使えない人 ー VB Runtime6 SP5を入れてください
6
実践！ＨＴＭＬプログラミング HTMLプログラムに必要な知識 独創性とユーモアが出来映えを左右すると 言っても過言ではないだろう 文字入力
ファイルの保存 多少の英語理解力 独創性とユーモアが出来映えを左右すると 言っても過言ではないだろう
7
HTMLを書く時のお約束 ファイルの拡張子は，htmかhtmlにする タグと呼ばれるものを巧みに使う タグは確実に閉じる
E.g. 正：<html></html>， 誤：<html><html HPを作る時は個人情報の出し過ぎに注意
8
基本的なタグ一覧 これだけ覚えれば，HTMLはほぼマスター html body title font b i br hr center a
img table これだけ覚えれば，HTMLはほぼマスター
9
htmlタグ：＜ｈｔｍｌ＞ html このタグで囲むと囲まれた区間がhtml表示できる E.g. <html> こんにちは～
10
bodyタグ：＜ｂｏｄｙ＞ body このタグで背景や文字の色などを指定できる 背景色：bgcolor=“色” 文字色：text=“色”
E.g. <html> <body bgcolor=“blue” text=“white”> こんにちは～ </body> </html>
11
titleタグ：＜ｔｉｔｌｅ＞ ブラウザの上のバーにページタイトルを 入れることができる E.g. <html>
ブラウザの上のバーにページタイトルを 入れることができる E.g. <html> <title>Hello!</title> <body bgcolor=“blue” text=“white”> こんにちは～ </body> </html>
12
fontタグ：＜ｆｏｎｔ＞ このタグで囲まれた文字の大きさや色を変えることができる 文字の大きさ：size=“1~7” （3が標準）
文字の色：color=“色” E.g. <html><title>Hello!</title> <body bgcolor=“blue” text=“white”> <font size=“5” color=“yellow”>こんにちは～</font> ごきげんいかがですか？ </body> </html>
13
b(bold)タグ：＜ｂ＞ このタグで囲まれた文字は太字になる E.g. <html>
<title>Hello!</title> <body bgcolor=“blue” text=“white”> <font size=“5” color=“yellow”> <b>こんにちは～</b> おげんきですか． </font> </body> </html>
14
i(italic)タグ：＜ｉ＞ このタグで囲まれると、文字が斜体になる E.g. <html>
<title>Hello!</title> <body bgcolor=“blue” text=“white”> <font size=“5” color=“yellow”>こんにちは～</font> <b>こんにちは～</b> <i>こんにちは～</i> </body> </html>
15
br(break)タグ：＜ｂｒ＞ このタグを入れると改行する E.g. <html>
<title>Hello!</title> <body bgcolor=“blue” text=“white”> <font size=“5” color=“yellow”>こんにちは～</font> <b>こんにちは～</b><br> <i>こんにちは～</i> </body> </html>
16
hr(horizontal ruler?)タグ：＜ｈｒ＞
改行してボーダーラインを入れてくれる E.g. <html> <title>Hello!</title> <body bgcolor=“blue” text=“white”> <font size=“5” color=“yellow”>こんにちは～</font><hr> <b>こんにちは～</b><br> <i>こんにちは～</i> </body> </html>
17
centerタグ：＜ｃｅｎｔｅｒ＞ このタグで囲むと、中央揃えする E.g. <html>
<title>Hello!</title> <body bgcolor=“blue” text=“white”> <font size=“5” color=“yellow”>こんにちは～</font><hr> <center> <b>こんにちは～</b><br> <i>こんにちは～</i> </center> ごきけんいかがですか． </body> </html>
18
ここで一度作ってみよう 今までのタグを使えば、大抵のことはできる プログラムミスをしても問題ないので 各自好きに作ってみる
５～１０分後に再開予定
19
a(anchor)タグ：＜ａ＞ 基本的にリンクを作る時に使われる 他のＨＰへのリンクを貼りたい場合
<a href=“行かせたいＨＰのアドレス”>文字など</a> E.g. <a href=“ メールアドレスのリンクを貼りたい場合 <a href=“mailto:メールアドレス”>文字など</a> E.g. <a
20
img(image)タグ：＜ｉｍｇ＞ 画像(jpeg, gif)などを貼り付ける
<img src=“貼りたい画像のファイル名”> htmlファイルと画像ファイルが同じフォルダにあるときは この書き方で問題ない 違うフォルダの場合は相対パスや絶対パスで指定する 横幅，縦幅はwidth, height で表す <img src=“ファイル名” width=“長さ” height=”長さ”> 長さは数字で表し，単位はピクセルで表す E.g. <img src=“banner.gif” width=“120” height=“40”>
21
tableタグ：＜ｔａｂｌｅ＞ このタグはキレイに書かないと混乱する 書き方は例の通りで，tdで囲まれた部分が表の中身 E.g.２行２列の表
<table border=“2”> <tr><td>Ａ</td><td>Ｂ</td></tr> <tr><td>Ｃ</td><td>Ｄ</td></tr> </table> これにはいくらかoptionがあるが、最初はここから初める
22
参考にするといいＨＰ とほほのＷＷＷ入門
23
Ｈｏｍｅｗｏｒｋ 自己紹介ページをＨＴＭＬを使って作る (注) 自分のHPをSaveし，それを修正する．
Similar presentations
