JAZZ&ART

アクセスカウンタ

zoom RSS HTMLの基本ルール

<<   作成日時 : 2008/08/22 16:06   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

画像

日々ネットで見るWEBサイト。
WEBサイトを記述しているのが、HTML&CSSです。
WEBサイトのデザインは、ソフトで作成する場合が多いのですが、やはり、WEBサイトをデザインする上で欠かせない知識です。
そのHTMLとは何なのか。
タグの構造、タグの属性、タグの要素、HTMLの階層、相対パスと絶対パス、属性値、カラーについて語りたいと思います。

1、HTMLとは
(1)HTML(HyperTextMarkupLanguage)は、WorldWideWebで使用される出版言語で、Webページを作成するための記述言語である
(2)HTMLの記述言語は、どんなPCからも閲覧できる
(3)HTMLは、文章に見出し、段落、表、リストを加えて表示させる。また、クイックすると別のWeb上のページやファイルにリンクする機能を有す。さらに、イメージやムービーのファイルも埋め込み可能である。
(4)HTML文章の表示には、Explorerなどのブラウザが必要である。ブラウザの違いから特定のタグしか表示されないものもあったが、今では、プラットフォームやブラウザの違いを超えて閲覧できるように標準化が進められている。
(5)HTML4.01というのがブラウザの標準であり、企業や大学が参加するW3C(WorldWideWebConsortium)という機関がある。

2、HTMLの構造とタグ
(1)HTML文章の構造
・HTMLバージョン(HTML4.01)情報などの記述
・ヘッダ部分(head要素)で文章に関する情報
・ボディ部分(body要素かframeset要素)で文章のコンテンツ、本体
・ヘッダとボディの前後は、html要素できぎられる
(2)開始タグと終了タグ
・開始タグと終了タグは、半角英数字の< >で囲まれる
・たとえば、文章は、<p>文章</p>で挟まれる
・タグの中には、終了がないものもあり、リストの
  • や改行の<br>がいい例である

    3、要素・属性・属性値
    (1)開始タグの要素
    ・タグの要素は、<p>、水平線の<hr>、イメージの<<mg>、アンカーの<a>である
    ・タグには、属性が追加され、たとえば、

    要素に、属性と属性要素が追加される
    <p align “center”>はじめてのHTML</p>
    <hr width=”80%” noshade>
    (2)表示について
    ・HTMLの要素、属性は、小文字で表示されるのが一般的。
    ・これは、HTML4,01やXHTMLの表示にあわせるためである
    ・属性値である「+3」や「80%」は、「“」でくくる必要がある

    4、ブロック要素とインライン要素
    (1)分けられる要素と種類
    ・Bodyの記述される要素には、ブロック要素とインライン要素がある
    ・インライン要素は、ブロック要素の中に記述する
    ・ブロック要素は、<p> 文章</p>であり、その中に、ブロック要素である<strong>HTML</strong>などが記述される
    <body>
    <p>
    初めての
    <strong>HTML</strong>
    </p>
    </body>

    5、ファイル名
    (1)ファイル名
    ・半角英数字と記号の「-」「_」
    ・スペースは含めない
    ・大文字・小文字は使い分ける
    ・ファイルには、拡張子をつける
    (2)ファイルの管理
    ・ファイルには、イメージなどの外部ファイルを一定の場所に格納し、リンクを張る。
    ・イメージの格納場所名は、「images」が一般的
    ・ファイル名は途中で買えてしまうと、リンクが切れてしまうので注意
    (3)「index.html」の意味
    ・Webサイトのトップページは、「index.html」名がよく使われる
    ・Webサイトは、http://www.hihi.co.jpなどで記述するが、index.htmlを省略している
    ・他のファイルがあった場合でも、優先的に、「index,html」が呼び出される
    ・「index.html」ファイルが無いと、階層リスト(ディレクトリ)が表示される
    ・各階層には、「index,html」ファイルを用意して、読み込み可能にする

    6、階層(ディレクトリ)
    (1)ファイルは、HTMLファイルとイメージファイルの分けて、フォルダに収め、階層(ディレクトリ)に分ける必要がある
    (2)階層
    トップページ(一階層)⇒各ページ(二階層)⇒サブメニュー
    (3)リンクやイメージファイルの指定は、上の階層か下の階層といったように、階層をたどってHTMLを記述していく

    7、ファイルの場所
    (1)URL(UniformResourceLocator)は、ファイルの所在地である
    (2)ファイルの場所は、パス名で現す
    ・パスは、階層構造になっている
    ・インターネット上のパスは、階層の区切りに「/」が使われる
    ・http;//www.hihi.co.jp/koko.index.htmlのように記述される

    8、相対パスと絶対パス
    (1)相対パスは、自分のWebサイト内にあるファイルの指定で、絶対パスは、自分以外のサイトにあるファイルを指定するに使う
    (2)絶対パスの指定は、http://www〜から始まる。インターネット全体に通用するパスなので、リンク元がどこにあっても通用する
    (3)階層の構造
    ・第三階層にある「index.html」ファイルから同じ階層の「top.html」ファイルを呼び出すには、「top.html」で呼び出す
    ・第三階層にある「index.html」ファイルから「images」ファイルにある「title.gif」ファイルを読み出すには、images/title.gifで呼び出す
    ・第三階層にある「index.html」ファイルから第二階層の「images」ファイルにある「link.gif」を呼び出すには、「../link.gif」

    9.属性値の種類
    (1)長さ
    ・ピクセル・・・スクリーン上のピクセルをあらわし、単位なしで指定する
    ・パーセント・・・img要素、object要素などのwidth/height属性、table要素のcellpadding属性で指定する
    ・長さの比率・・・frameset要素のrows/cols属性やcolgroup要素のwidth属性などの属性値で指定する
    たとえば、
    <frameset cols=”2*,3*”famsetborder=”yes”>
    <frame src=”01.html”>
    <frame src=”02.html”>
    </frameset>
    (2)カラー
    ・16進数値・・・R・G・Bを0から255段階を16進数値で分類
    たちえば
    R255・G204・B51⇒FF CC 33⇒#FFCC33
    ・カラーネーム・・・Black、Silver、Grayなどカラーネームは、豊富な種類が用意されている
    ・[MEMO]Webカラー・・・Webで使う216種類の色で、RGB各色256階調の組み合わせをRGB各色6階調(0、51、102、153、204)に制限し、これを組み合わせて使い、6×6×6=216色が使われる
    (3)MIMEタイプ
    ・テキスト・・・txt、html、css、js
    ・画像・・・gif、png、jpg/jpeg
    ・動画・・・mpeg/mpg、qt/mov
    ・アプリケーション・・・pdf、doc、swf、zip
    (4)言語コード
    ・meta要素のlang属性などの属性値として記述する
    ・日本⇒ja、ドイツ⇒de、中国⇒zhなど

    関連情報
    http://www7b.biglobe.ne.jp/keishi_k/designing/index.html

  • テーマ

    関連テーマ 一覧


    月別リンク

    ブログ気持玉

    クリックして気持ちを伝えよう!
    ログインしてクリックすれば、自分のブログへのリンクが付きます。
    →ログインへ

    トラックバック(0件)

    タイトル (本文) ブログ名/日時

    トラックバック用URL help


    自分のブログにトラックバック記事作成(会員用) help

    タイトル
    本 文

    コメント(0件)

    内 容 ニックネーム/日時

    コメントする help

    ニックネーム
    本 文
    HTMLの基本ルール JAZZ&ART/BIGLOBEウェブリブログ
    文字サイズ:       閉じる