>> HTML講座

HTML講座

　 Q&A 情報掲示板 なんでも質問箱 実践編
　

　こんにちは、さて今日はじめてこのページに来た人も、
毎日勉強するために足を運んでくれている人も、
今日も一緒に楽しんでいきましょう(^o^)。
ここでは、ホームページの作成に必要なHTMLという言語について解説しています。
難しいかもしれないけれど、できるだけわかりやすく解説しているので
あきらめずに楽しく勉強してね。
一つできるごとに何度でも感動していってください。
初めてここへ来た人はまず”はじめに”から読んでいってね。

講座について・・・

■　講座の進め方

HTML講座では各項目ごとに分けて解説しています。
それぞれの項目では[基本編・標準編・応用編]と３つの難易度に分けて解説しています。
必ずしもはじめから読む必要はありませんが、
新しい用語の解説などもしていますので、基本的には前から読んでもらうとわかりやすいと思います。
また、一度読んだだけでは理解しにくい部分もいくつも出てくると思いますが、わかるところから覚えていけば自然と身についていきます。
あまり深く考えずに楽しく勉強していってください。

■　アイコンについて

※　勉強の仕方は様々です｡目次から自分の知りたいものを調べてもいいし、最初から順番に勉強してもらっても結構です。
初めから順番にやってもらえるように作っていますので、初心者の方はできれば初めから読んでいただくことをお勧めします。
各コンテンツは基本編、標準編、応用編と分かれています。それぞれの講座の後にはtop.gif (583 バイト)back2.gif (978 バイト)back.gif (1116 バイト)next.gif (705 バイト)next2.gif (967 バイト)というのがありますので、全てのコンテンツの基本編を先に勉強して、次は標準編、そして応用編と勉強してもらってもいいですし、コンテンツごとに基本から応用まで一気にやっていってもらって全てのコンテンツを読んでもらってもいいです。様々な勉強法があると思いますので、ご自由に利用ください。

※　わかりにくい言葉（例えば上のソースという言葉）などはできるだけ説明していきたいと思います｡また、はじめから読んでいただくと大体の言葉の説明を加えていると思いますのが、それでもわからない語句がある場合は質問してください。本当はわかりにくい言葉は簡単な言葉として全て書き直してもいいんですが、本などを読む時にやっぱりわからない言葉がたくさん出てくるんですね、だからここで説明しながらそういう言葉を使っていくことによって書店に並んでいる本もわかりやすく読めるようになっていくと思います。

※　ブラウザによって使用できるものとできないものがあります。以下のように示したいと思います。
インターネット.gif (941 バイト)・・・インターネットエクスプローラー対応　ネットスケープ.gif (918 バイト)・・・ネットスケープ対応　なし・・・わかりません

※デフォルトという言葉が出てくることがあります。デフォルトとは、初めから指定されている設定のことです。

※more.gif (135 バイト)ではさらに詳しく説明しています。難しい人は特に読む必要はありません。

　

ステップアップ編

１. はじめに[改]
　　・まず、準備をしよう！[改]
 　　・文字を書こう！

２. ホームページを作るための基本
　　[基本編]
　　・htmlの基本的な構造
　　・実際にブラウザで見てみよう！
     [標準編]
　　・コメントをいれよう！

３. 文字をもっといじってみよう！
　　[基本編]
　　・行を変えよう！
　　・文字の大きさを変えよう！PartT
　　・文字をいろいろな形にしてみよう！ＰａｒｔT
　　・文字に色をつけてみよう！
　　・文字の位置を変えてみよう！
　　・[超基本編]まとめ
    [標準編]
　　・アドレスを記入する。
　　・ページのスタイルを決定しよう！
　　　　　┗RRGGBB法色指定
　　・見出しを作ろう！
　　・見出しの位置を変えよう！
　　・テキストの位置を変えよう！
　　・文字の大きさを変えよう！PartU
　　・用途に応じた文字を使おう！
　　・文字（フォント）の種類を変えよう！
　　・ルビを使おう！
    [応用編]
　　・上付添字と下付添字を使おう！
　　・特殊フォントを使用したい！
　　・文字を点滅させたい！
　　・文字をスクロールさせたい！
　　・改行しないで表示したい！
　　・改行候補を示す
　　・文字を思い通りに表示したい！
　　・語句の説明をしたい！
　　・スペースを入れたいPartT
　　・スペースを入れたいPartU
 　　・スペースを入れたいPartU

４. 画面を少しいじってみよう！
　　[基本編]
　　・罫線を書こう！
　　・背景に色をつけてみよう！
　　・ページ全体の文字の色を決める
　　・まとめ
　  [標準編]
　　・罫線をいろいろいじってみよう！
　　・背景にイメージを使おう！
　　・背景にイメージを使おう！PaｒｔU
　  [応用編]
　　・マージンを指定しよう！
　　・段組を作ろう！
　　・段組みのデザインを指定しよう！

５. URLとは？
　　・ホームページをみんなに見てもらおう！！

６. 表を作ろう！！
　　[基本編]
　　・簡単な表を作ってみよう！
　　・枠線のデザインを変えてみよう！
　　・表の大きさを変えよう！
　　・表に色をつけよう！
　　・まとめ
　  [標準編]
　　・表の位置を指定しよう！
　　・表に見出しをつけよう！
　　・表に題名をつけよう！
　　・セルを結合して幅を指定したい！
　　・セルの中のテキストの位置を指定しよう！
　　・表の背景に画像を使おう！
　　・表と周りの文字の間隔を指定したい！
　  [応用編]
　　・改行場所を指定しよう！
　　・表の枠のスタイルを決定しよう！
　　・表の内側のスタイルを決定しよう！

７. リンクとは？
　  [基本編]
　　・絶対パスと相対パス
　　・基本アドレス
　　・リンク
　　　　　・絶対パスを使ったリンク
　　　　　・相対パスを使ったリンク
　　・メールをもらおう！
　  [標準編]
　　・ページ内の違う場所に移動したい！
　　・違うページの指定した場所に移動したい！
　　・ページを表示するウィンドウを指定しよう！
　　・メールに題名をつけよう！
　  [応用編]
　　・基本アドレス２

８ リストを使おう！
　  [基本編]
　　・点を使ったリスト
　　・いろいろな形のリスト
　　・数字を使ったリスト
　  [標準編]
　　・リストの始まりの番号を変えよう！
　　・リストに他の字を使ってみよう！
　　・言葉をリストの頭に持ってきたい！
　　・たくさんの説明をしたい！

９．画像を使おう！
　  [基本編]
　　・とにかく画像を使いたい！
　　・画像の名前を加えよう！
　　・イメージの大きさを変えよう！
　　・画像の枠を書きたい！
　　・文字を書く場所を指定しよう！
　  [標準編]
　　・画像の横に複数行の文字を書きたい！
　　・画像と文字との間隔を指定しよう！
　  [応用編]
　　・２段階イメージ表示
　　・１つのイメージ内に複数のリンクを貼ろう！
　　・文字を書く場所を指定しよう！２

10．フレーム機能を使ってみよう！
　  [基本編]
　　・まずは画面を分割しよう！
　　・フレームページを表示
　  [標準編]
　　・マージンを指定したい！
　　・スクロールバーの設定
　　・境界線の指定
　　・フレームをサポートしていないブラウザのために
　  [応用編]
　　・ロードするウィンドウを指定しよう！
　　・インラインフレームを作ってみよう！

11．フォームを作ろう！
　  [基本編]
　　・まずはフォームの範囲を決める
　　・一行テキスト入力フォーム
　　・複数行テキスト入力フォーム
　　・選択（チェック）ボタン
　　・選択メニュー（プルダウン）
　　・選択メニュー（フィールド）
　　・決定・リセットボタン
　  [標準編]
　　・フォームの内容をメールで受け取ろう
　　・改行の指定をしよう！
　  [応用編]
　　・自分のパソコンのファイルを送る

1２．その他
　  [基本編]
　　・自動的に別のページへ移動
　　・自分のページを検索されやすくしよう！
　　・検索対象を指定しよう！
　　・音楽を鳴らそう！
　　・変わった見出しを作ろう！
　  [標準編]
　　・お気に入りのアイコンを指定しよう！
　  [応用編]
　　・検索窓をつけよう！
　　・ページ情報を送ろう！

1３．おわりに

　

　

タグ辞典編
２. ホームページを作るための基本
　　・<html>〜</html>
　　・<HEAD>〜</HEAD>
　　・<BODY>〜</BODY>
　　・<TITLE>〜</TITLE>
　　・<!-- 〜 -->
３. 文字をもっといじってみよう！
　　・<BR>
　　・<P>（〜</P>）
　　・<FONT SIZE="■">〜</FONT>
　　・<BIG>〜<BIG>
　　・<SMALL>〜</SMALL>
　　・<B>〜</B>
　　・<I >〜</I >
　　・<S>〜</S>
　　・<TT>〜</TT>
　　・<U>〜</U>
　　・<FONT COLOR="■">〜</FONT>
　　・<CENTER>〜</CENTER>
　　・<P ALIGN"■">〜</P>
　　・<ADRESS>〜</ADRESS>
　　・<BODY TEXT="■">〜</BODY>
　　・<BODY LINK="■">〜</BODY>
　　・<BODY ALINK="■">〜</BODY>
　　・<BODY VLINK="■">〜</BODY>
　　★色指定・・・#RRGGBB法についてPart1★
　　・<H■>〜</H■>
　　・<H■ ALIGN="■">〜</H■>
　　・<DIV ALIGN="■">〜</DIV>
　　・<BASEFONT SIZE="■">
　　　<FONT SIZE="■">〜</FONT>
　　・<EM>〜</EM>
　　・<STRONG>〜</STRONG>
　　・<CITE>〜</CITE>
　　・<CODE>〜</CODE>
　　・<DFN>〜</DFN>
　　・<KBD>〜</KBD>
　　・<SAMP>〜</SAMP>
　　・<VAR>〜</VAR>
　　・<FONT FACE="■">〜</FONT>
　　・<SUP>〜</SUP>
　　・<SUB>〜</SUB>
　　・&■　・・・・　特殊フォント
　　・<BLINK>〜</BLINK>
　　・<MARQUEE>〜</MARQUEE>
　　・<NOBR>〜</NOBR>
　　・<NOBR>〜<WBR>〜</NOBR>
　　・<PRE>〜</PRE>
　　・<A TITLE="■">〜</A>
　　・<SPACE TYPE="■" SIZE="▲">
　　・<RUBY><RB><RT></RUBY>

４. 画面を少しいじってみよう！
　　・<HR>
　　・<BODY BGCOLOR="■">〜</BODY>
　　・<BODY TEXT="■">〜</BODY>
　　・<HR SIZE="■">
　　・<HR WIDTH="■">
　　・<HR ALIGN="■">
　　・<HR COLOR="■">
　　・<HR NONSHADE>
　　・<BODY BACKGROUND="■">〜</BODY>
　　・<BODY BACKGROUND="■"
　　　BGPROPERTIES="■">〜</BODY>
　　・<BODY TOPMARGIN="■" LEFTMARGIN="■">
　　　〜</BODY>
　　・<MULTICOL COLS="■">〜</MULTICOL>
　　・<MULTICOL GUTTTER="■" WIDTH="▲">〜</MULTICOL>

６. 表を作ろう！！
　　・<TABLE>〜</TABLE>
　　・<TABLE BORDER>〜</TABLE>
　　・<TR>〜</TR>
　　・<TD>〜</TD>
　　・<TABLE BORDER="■">〜</TABLE>
　　・<TABLE CELLSPACING="■">〜</TABLE>
　　・<TABLE CELLPADDING="■">〜</TABLE>
　　・<TABLE WIDTH="■" HEIGHT="■">〜</TABLE>
　　・<TABLE BORDERCOLOR="■">〜</TABLE>
　　・<TABLE BORDERCOLORLIGHT="■">〜</TABLE>
　　・<TABLE BORDECOLORDARK="■">〜</TABLE>
　　・<TD BGCOLOR="■">〜</TD>
　　・<TABLE ALIGN="■">〜</TABLE>
　　・<TH>〜</TH>
　　・<CAPTION>〜</CAPTION>
　　・<CAPTION ALIGN="■" VALIGN="■">〜</CAPTION>
　　・<TD COLSPAN="■">〜</TD>
　　・<TD ROWSPAN="■">〜</TD>
　　・<TD ALIGN="■" VALIGN="■">〜</TD>
　　・<TABLE BACKGROUND>〜</TABLE>
　　・<TABLE VSPACE="■" HSPACE="▲">〜</TABLE>
　　・<TD NOWRAP>〜<BR>〜</TD>
　　・<TABLE FRAME="■">〜</TABLE>
　　・<TABLE RULES="■">〜</TABLE>

７.リンクとは
　　・<BASE HREF="■">
　　・<A HREF="■">〜</A>
　　・<A HREF="mailto:■">〜</A>
　　・<A HREF="#■">〜</A>
　　　<A NAME="■">〜</A>
　　・<A HREF="■#▲">〜</A>
　　　<A NAME="▲">〜</A>
　　・<A HREF="■" TARGET="▲">〜</A>
　　・<A HREF="mailto:■?subject=▲">〜</A>

８.リストを使おう！
　　・<UL><LI >〜<LI >〜</UL>
　　・<UL><LI  TYPE="■">〜<LI >〜</UL>
　　・<OL><LI >〜<LI >〜</OL>
　　・<OL START="■"><LI >〜<LI >〜</OL>
　　・<OL><LI  VALUE="■" >〜<LI >〜</OL>
　　・<OL TYPE="■"><LI >〜<LI >〜</OL>
　　・<OL><LI  TYPE="■" >〜<LI >〜</OL>
　　・<OL><DT>〜<DD>〜</OL>
　　・<BLOCKQUOTE >〜</BLOCKQUOTE>

９.画像を使おう！
　　・<IMG SRC="■">
　　・<IMG SRC="■" ALT="▲">
　　・<IMG SRC="■" WIDTH="▲" HEIGHT="★">
　　・<IMG SRC="■" BORDER>
　　・<IMG SRC="■" ALIGN="▲">(縦位置)
　　・<IMG SRC="■" ALIGN="▲">(左右)
　　・<BR CLEAR="all">
　　・<IMG SRC="■" VSPACE="▲" HSPACE="★">
　　・<IMG SRC="■" LOWSRC="▲">
　　・<IMG SRC="■" USEMAP="#▲">
　　・<MAP NAME="★">〜</MAP>
　　・<AREA SHAPE="◆" COORDS="□" HREF="△" ALT="☆">
　　・<IMG SRC="■" ALIGN="▲">

１０.フレーム機能を使ってみよう！
　　・<FRAMESET COLS="■">〜</FRAMESET>
　　・<FRAMESET ROWS="■">〜</FRAMESET>
　　・<FRAME SRC="■">
　　・<FRAME SRC="■" MARGINWIDTH="▲"
　　　 MARGINHEIGHT="★">
　　・<FRAME SEC="■" SCROLLING="▲">
　　・<FRAME SEC="■" NORESIZE>
　　・<FRAME SEC="■" FRAMEBORDER="▲">
　　・<FRAME SEC="■" BORDERCOLOR="▲">
　　・<NOFRAMES>〜</NOFRAMES>
　　・<A HREF="■" TARGET="▲">〜</A>
　　・<FRAME SRC="★" NAME="▲">
　　　<A HREF="■" TARGET="▲">
　　・<IFRAME SRC="■">〜</IFRAME>

１１.フォームを作ろう！
　　・<FORM>〜</FORM>
　　・<INPUT TYPE="■" ▲>
　　・<TEXTAREA>〜</TEXTAREA>
　　・<INPUT TYPE="radio" ▲>
　　・<INPUT TYPE="checkbox" ▲>
　　・<SELECT NAME="■"><OPTION ▲>〜</SELECT>
　　・<SELECT SIZE="★"NAME="■"><OPTION ▲>
　　　〜</SELECT>
　　・<FORM TYPE="submit" NAME="■" VALUE="▲">
　　・<FORM TYPE="reset" VALUE="▲">
　　・<FORM ACTION="mailto:■" METHOD="POST">
　　・<TEXTAREA WRAP="■">
　　・ENCTYPE="multipart/form-data"
　　・<INPUT TYPE="file">

１２.その他
　　・<META HTTP-EQUIV="Reflesh" CONTENT="■;URL=▲">
　　・<META NAME="keyword" CONTENT="■">
　　・<META NAME="description" CONTENT="■">
　　・<META NAME="ROBOTS" CONTENT="NOFOLLOW">
　　・<META NAME="ROBOTS" CONTENT="NOINDEX">
　　・<META NAME="ROBOTS" CONTENT="NOFOLLOW,NOINDEX">
　　・<BGSOUND SRC="■" LOOP="▲">
　　・<ISINDEX PROMPT"■">
　　・<META HTTP-EQUIV="■" CONTENT="▲">

　

　

更によいページを目指すために
はじめに
１．ブラウザによる表示の違い
２．バグの利用について
３．html文について
４．間違ったタグを使ったら？
５．画像について（GIF,JPEG）
６．相対パスについて
７．フォームでのメール送信について
８．絶対パスと相対パスのどっちがいいの？ 		更に詳しく
１．URLエンコーディング

　

≪参考≫
その他のタグ・属性

　

　 Q&A 情報掲示板 なんでも質問箱 実践編