HTML

Last-modified: 2012-02-02 (木) 19:03:00
 

ここはHTMLの説明場所よー

概要

とはいっても簡単に説明するだけだけどね。
まずHTMLとはHyperText Markup Languageの略でホームページの記述言語の一種で、文書の一部を“<”と“>”で挟まれた「タグ」と呼ばれる特別な文字列で囲うことよって、文章の構造や修飾についての情報を文書に埋め込んで記述することができ、文章の中で表題や段落の区切りを指定したり、箇条書きの項目を列挙したり、文書の一部として画像や音声、動画を埋め込んだり、他の文書へのハイパーリンクを設定したりすることができるもの。

 

基本的にHTMLはページ作成がおもでまああとで説明するけどページの背景とか文字のフォント、画像などの埋め込みができたり、ページのリンクを作れたりするよ
ま、このWikiと比べると貧相だけどね

 

基本の記述方法

とりあえず記述方法を書いていくと以下のようになる

 

<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
     本文
  </body>

</html>

という風になる。
「/」の意味はたとえば<head>~</head>の位置までがその部分までの記述になる
まあタグの詳しい説明は次にする。

<html>

 

範囲は<html>~</html>

 

まあこれはテキストの指定だね。HTML文書を使いますよ~って意味

<head>

 

範囲は<head>~</head>

 

これはヘッダというけど正直省略できるものだから説明いらない希ガス・w・

<title>

 

範囲は<title>~</title>

 

これはブラウザ上部とブラウザ内部のタグに表示されるページのタイトルだよ
ちなみにこれだけは絶対に省略できないもの。

<body>

 

範囲は<body>~</body>

 

ボディとよんで、まあ本文とかかな

ちなみにここで背景の変更や画像の埋め込み、表の作成とかを書く

 

応用の記述方法

うつのめんどくさいので<html>省略

 

 <head>
    <title>タイトル</title>
  </head>
  <body background=XX1.jpg>
    <center><img src=XX2.jpg></center><br>
    <font color="red">文字列1</font><br>
    <font size=5>文字列2</font><br>
    <center><table border=1>
     <caption>表のタイトル</caption>
      <tr><th bgcolor="blue">見出し1</th><th>見出し2</th><th>見出し3</th></tr>
      <tr><td>1の内容1</td><td>2の内容1</td><td>3の内容1</td></tr>
    </table></center>

 </body>

 

とまぁこんな感じに、説明は次の項

<body background=XX1.jpg>

 

これは背景にする画像の設定

 

<center>

 

範囲は<center>~</center>

 

こいつは表や画像をページの中心におくタグ

<br>

 

これは改行タグ

 

<font>

 

範囲は<font>~</font>

 

これは文字列に対する設定
・<font color="red"> フォントの色を赤色に変更する
・<font size=5> フォントサイズをデフォルトより大きくする

<table border=5>

 

範囲は<table border=1>~</table>

 

テーブル(表)を作成する ちなみに1は表の枠の太さ

<caption>

 

範囲は<caption>~</caption>

 

これはそのまま表のタイトル

<tr>

 

範囲は<tr>~</tr>

 

これは表の始端と終端の区切り

<td><th>

 

範囲は<td>~</td>、<th>~</th>

 

これは表の中身と中身の区切り
ちなみに<td>はデフォルトの大きさの文字、<th>はデフォルトよりは太い文字
・<th bgcolor="blue">はその項目の中だけを青色にする

これまでのを私(アラン)が実際にやったもの

source
↑ソースコード

ソースコードの保存形式は「.html」なので注意してね
browser
↑実際にブラウザで見たもの
file
↑赤い枠で囲ったものは今回の編集用に作ってまとめたもの

また青い枠で囲ったものは今回使ったファイル

あ、あと画像使う場合はソースコードがおいてあるフォルダ階層に画像を入れておかないと上手くいかないから注意すること

編集後記

ざっとこんなものこれで大体はできる・・・はず