html言語とは

b0045016_2130049.jpgホームページ作成言語HTML
                                 大西靜麿
Windowsのメモ帳を使ってWebページを作成してみましょう!

1、メモ帳の起動スタート⇒全てのプログラム⇒アクセサリー⇒メモ帳

2、HTML言語でインプット例 (タグの前後の<>は省略)
html ⇒最初に必ず書く
head ⇒タイトルを記入する
title ⇒タイトルバーに表示するタイトル名を記入 /title
/head ⇒タイトルの終わり
body ⇒本文のはじめ
楽しい旅行記ー思いのままに ⇒本文
/body ⇒本文の終わり
/html ⇒HTMLの終わり

3、HTML文書の保存ファイル⇒名前をつけて保存⇒ファイル名⇒index.html
保存場所は「私のホームページ」というフォルダーをマイドキュメントの中に作成しておいたところを指定する

4、保存したファイルを開いてみる
マイドキュメント⇒私のホームページ⇒index.html をダブルクリック

5、Internet Explorerが起動してページが開かれる

6、このファイルをupload する

7、ブログを利用するとHTML言語を使わなくてもそのまま記入してインターネットサーバへ送信(upload)できる
8、title⇒タイトルのインプット 
font⇒フォントサイズ font color属性 
br⇒改行 bgcolor⇒ページの背景色指定

b ⇒太字の設定 /b
u ⇒下線の設定 /u
s ⇒取り消し線の設定 /s

9、見出しの設定 h1⇒大きいサイズ h3⇒次の次に大きさイズ
10、絶対値でのフォントサイズの指定 font size="7"⇒大きいサイズ
font size="6"⇒次に大きいサイズ




divタグについて
(Creating Home Page ホームページの作り方(HP作成法)を解説より参照)

divの役割はたくさんの引き出しをまとめて一度に動かすことが出来るタンスに似ていることから、タンスモデルでよく説明され、引き出しにあたるpやhなどのタグをセットとして管理することが出来ます。
div
h1⇒見出し /h1
p 段落 /p
/div

divタグにclassやidを指定して、cssでスタイルを自在に変更することが出来ます。
idとclassの役割は全く同じですが、使い方が異なります。idは1ページ内で1度しか使用できませんが、classは何度でも使用可能です。
こういうと別の意味に取られるので、補足すると、id="a1"、id="a2"の二つを1回ずつ使用することはできますが、id="a1"だけを2回以上使用するのはだめということです。
idは、classと同じように、pやulなどのdiv以外の要素にももちろん使うことができます。
div id="a1"
div id="a2" class="section"
h1 見出し /h1
p 段落 /p
/div
div id="a3" class="section"
h1 見出し /h1
p 段落 /p
/div
/div


さて、このdivを用いてサイトの構造を組み立てていきます。要領は形の異なる図形を別々に動かして1枚の絵にするような感じです。
サンプルでは3カラムのサイトを作ろうと思っているのでそのようにdivという四角い図形をまず作ります。
a1
a2
b1 b2 b3
c1

上のような構造をdivを使って表すと下記のようになります。
タイトル
/div

div id="a2"
メニューバー
/div

div id="b"
div id="b1" class="section"
左枠
/div
div id="b2" class="section"
中央枠
/div
div id="b3" class="section"
右枠
/div
/div

div id="c1"
アドレス
/div

ここまでできたら、タイトルや枠の中にpやh要素を組み込んで、最後にスタイルシートで配置を整えれば出来上がりです。
なんでclass="section"を使うの?と思われると思いますが、XMLでは必ず使用する文章の構造の明確化を意識したテクニックで、 (X)HTMLでは使用しなくても全く問題ありませんが、今後を考えると使用に慣れておいた方がいいかもしれません。

HTML言語の使い方Web
[PR]

by maronet64 | 2005-02-07 21:11 | パソコン教室 | Comments(0)  

<< Windowsの基本機能いろいろ Excelの基本操作2 >>