本文へスキップ

WEBコーディングを学ぶためのページです。

HTML

HTML

HTMLとはWEBページ製作をする為の言語のことです。大見出し、小見出しのような見出しのレベルや、改行、段落分けなどの行動をHTMLのタグを使って記述することができます。
テキストエディタを用いてHTMLを記述したファイルを[HTMLファイル」といいます。拡張子は[html」または「htm」で保存します。
このHTMLを適切に保存することで、googleなどの検索エンジンに検索されく、多くのWEBページの中から見つけられやすいページを作ることが出来ます。HTMLは人間ではなくWEBサイト上に表示されるためのコンピューターに対しての意味を伝える為に使用された言語です。

INDEX

一般定義 

<html> HTML文書であることを示す。
書式 <html>・・・</html>
<head> ページタイトル、解析コード、やサーバー等が利用する情報を指定する。
書式 <head>・・・</haed>
<title> ページタイトルを指定する。
書式 <taitle>・・・</title> 
<body> ページとして表示される内容(範囲)を指定する。 
書式 <body>・・・</body>
コメント 書式 <!--コメント本文--> 

文字装飾

<h1>~<h6> 見出しを指定する。
書式 <h1>・・・</h1>、〜、<h6>・・・</h6>
<strong> 文字列を強調表示する(<em>よりも強い強調。一般的には太字で表示される)。
書式 <strong>・・・</strong>
<b> 文字列をボールド(太字)表示する。
書式 <b>・・・</b>
<i> 文字列をイタリック(斜体)表示する。
書式 <i>・・・</i>
<sup> 文字列を上付き文字として表示する。
書式 <sup>・・・</sup>
<sub> 文字列を下付き文字として表示する。
書式 <sub>・・・</sub> 
<pre> 改行や空白など入力されたままの状態で表示する。
書式 <pre>・・・</pre> 

特殊文字 改行なしの空白。
書式 &nbsp;

このページの先頭へ


仕切り 

<p> 段落を作成する。
書式 <p>・・・</p>
<br> 強制的に改行する。
書式 <br>
<hr> 水平線(区切り線)を指定する。
書式 <hr>

リンク

<a> リンクを作成する。
href サイトのURLを指定して、リンクを作成する。
書式 <a href="URL">・・・</a>
同じHTML文書のマーカー位置へのリンクを作成する。
書式 <a href="#マーカー名">・・・</a>
別のHTML文書のマーカー位置へのリンクを作成する。
書式 <a href="URL#マーカー名">・・・</a>
HTML文書内にメールを送信するホットテキストを設定する。
書式 <a href="mailto:メールアドレス">・・・</a>
name HTML文書内にマーカー名を指定する。
書式 <a name="マーカー名">・・・</a>

このページの先頭へ

イメージ/マルチメディア

<img> 指定したイメージデータをインライン表示する。
href 表示するイメージファイルのURLを指定する。
書式 <img src="URL">
URL:ファイル名、ディレクトリ名/ファイル名等
alt イメージの代替文字列を指定する。
書式 <img src="ファイル名" alt="代替文字列"> 
width
height
イメージの幅、高さを指定する。 
書式 <img src="ファイル名" width=”幅” height="高さ"> 
幅、高さ:ピクセル数またはパーセンテージ
usemap クライアントサイドクリッカブルマップを設定する。
書式  <img src="URL" usemap="#マップ名”>
<map> クライアントサイドクリッカブルマップ上の位置とクリックしたときのリンク先を設定する。
shape
coords    
クリックするエリアの形状とデータ(座標)を指定する。
書式  <area shape="形状” coords="データ”>
 形状 データ 
 サークル(円)  x,y,r(中心の座標と半径)
 rect(四角) x1,y1,x2,y2(左上頂点と右下頂点の座標)
 poly(多角形)  x1,y1,x2,y2,・・・(各頂点の座標)
href ハイパーリンク先のURLを指定する。
書式 <area shape="形状" coords="データ">
alt リンク領域の代替文字列を指定する。
書式 <area shape="形状" coords="データ" href="URL# alt="代替文字列">
<object> ActiveXコントロールを表示する。 
data
type
width
height
 ActiveXコントロールのデータ、タイプ、幅、高さを指定する。
書式 <object data="URL" type="MIMEタイプ" width="幅" height="高さ">・・・</object>
MIMEタイプ:application/x-shockwave-flash
<param> ActiveXコントロールが実行されるのに必要な各種の値を指定する。
name
value
  書式 <param name="src" value="URL">
  書式 <param name="loop" value="true/false">

このページの先頭へ

リスト

<ul> 行頭記号(unordeewd list:番号をふらないリスト)をつけたリストを作成する。
書式 <ul>・・・</ul>
<ol> 行頭番号(ordered list:番号をふるリスト)を作成する。
書式 <ol>・・・</ol>
<li> 行頭番号をつけたリストを作成する。
書式 <li>・・・</li>
 備考 アルファベット→<ol type="A"> <ol type="a">
ローマ数字→<ol type="I"> <ol type="i">

テーブル

<table> テーブルを定義する。
書式 <table>・・・</table>
border 枠線を追加する。外枠線の幅(枠線の3D効果)を指定する。
書式 <table border="外枠線の幅">・・・</table>
外枠線の幅:ピクセル数
cellpadding 枠線とセル内容との間隔を指定する。
書式 <table cellpadding="間隔">・・・</table>
間隔:ピクセル数
cellspacing 各セル間の間隔を指定する。 
書式 <table cellspacing="間隔">・・・</table>
間隔:ピクセル数
width 各セル間の間隔を指定する。 
書式 <table width="幅">・・・</table>
幅:ピクセル数、パーセンテージ(%)
<tr> テーブルの行を定義する。
書式 <tr>・・・</tr>
align セル内容の水平方向位置を指定する。
書式 <tr align="値">・・・</tr>
left(左揃え)
center(中央揃え)
right(右揃え)
valign セル内容の垂直方向位置を指定する。
書式 <tr valign="値">・・・</tr>
top(上揃え)
middle(上下中央揃え)
bottom(下揃え)
baseline(ベースラインを揃える)
<th> 見出しセルを定義する。
書式 <th>・・・</th>
align セル内容の水平方向位置を指定する。
書式 <th align="値">・・・</th>
left(左揃え)
center(中央揃え)
right(右揃え)
valign セル内容の垂直方向位置を指定する。
書式 <th valign="値">・・・</th>
top(上揃え)
middle(上下中央揃え)
bottom(下揃え)
baseline(ベースラインを揃える)
rowspan セルの結合(複数行に渡るセルを定義する)。
書式 <th rowspan="セル数">・・・</th> 
colspan セルの結合(複数列に渡るセルを定義する)。
書式 <th colspan="セル数">・・・</th> 
<td> データセルを定義する。
書式 <td>・・・</td>
align セル内容の水平方向位置を指定する。
書式 <td align="値">・・・</td>
left(左揃え)
center(中央揃え)
right(右揃え)
valign セル内容の垂直方向位置を指定する。
書式 <td valign="値">・・・</td>
top(上揃え)
middle(上下中央揃え)
bottom(下揃え)
baseline(ベースラインを揃える)
rowspan セルの結合(複数行に渡るセルを定義する)。
書式 <td rowspan="セル数">・・・</td> 
colspan セルの結合(複数列に渡るセルを定義する)。
書式 <td colspan="セル数">・・・</td> 
<caption> テーブルにタイトルを付加する。
書式 <caption>・・・</caption> 
このページの先頭へ

フォーム

<form> フォームを定義する。
書式 <form>・・・</form>
action
method
実行するCGIをURLまたは、メールアドレスおよびメソッドを指定する。
書式 <form action="アクション" method="アクション">・・・</form>
アクション:CGIのURL、メールアドレス(mailto:メールアドレス)
メソッド:post、get
enctype データを個別のファイルとして送信する。
書式 <form actype="データタイプ" action="アクション" method="メソッド">・・・</form>
データタイプ:file、image
アクション:CGIのURL、メールアドレス(mailto:メールアドレス)
メソッド:post、get
<input> 入力エリアやボタンを表示する。 
width 表示/実行形式の選択およびフィールド名を指定する。 
書式 <input type="機能" name="フィールド名">
機能:
text(テキストボックス)
password(パスワード入力ボックス)
checkbox(チェックボックス)
radio(ラジオボタン)
image(イメージの座標)
hidden(不可視フィールド)
submit(送信ボタン)
reset(リセットボタン)
file(ファイル名入力ボックス)
value データの初期値、ボタン名を設定する。
書式 <input type="機能" name="フィールド名" value="初期値/ボタン名"> 
size テキストボックスまたはファイル名入力ボックスの幅を指定する。
書式 <input name="フィールド名" size="幅"> 
maxiength テキストボックスまたはファイル名入力ボックスへ入力できる最大文字数を指定する。 
書式 <input name="フィールド名" maxiength="最大文字数"> 
checked  チェックボックスにあらかじめチェックをつける。
書式 <input type="checkbox" name="フィールド名" checked>
 ラジオボタンにあらかじめチェックをつける。
書式 <input type="機能" name="フィールド名" value="初期値/ボタン名">
src 表示するイメージファイルのURLを指定する。
書式 <input type="image" src="URL" name="フィールド名"> 
<select> 選択リストを作成する。
name 選択された項目内容を引き渡すときのリスト名を指定する。
書式 <select name="リスト名><ortion>・・・</option></select> 
size フィールド型リストの作成。 
書式 <select name="リスト名" size="行数"><ortion>・・・</option></select> 
行数:表示される行数
multiple フィールド型リストの作成。 
書式 <select name="リスト名" multiple><ortion>・・・</option></select>
<option> 選択項目を指定する。 
selected 選択済として表示する項目を指定する。 
書式 <select name="リスト名" multiple><ortion selected>・・・</option></select>
value 選択項目に対応する値を指定する。 
書式 <select name="リスト名" multiple><ortion value=”数値/アルファベット文字列”>・・・</option></select>
<textarea> テキストボックスフィールドを作成する。
name 項目内容を引き渡す時のボックス名を指定する。
書式 <textarea name="ボックス名">・・・</textarea>
rows  テキストボックスフィールドの高さ(行数)を指定する。
書式 <textarea name="ボックス名" rows="行数">・・・</textarea>
cols テキストボックスフィールドの幅を指定する。
書式 <textarea name="ボックス名" cols="幅">・・・</textarea>

このページの先頭へ



スタッフ写真

サイト運営

WEBコーディング基礎

inserted by FC2 system