★HTMLの勉強をしよう★


更新日

Monday, 22-Apr-2002 20:55:01 JST
★michikomouseはホームページを開設して間もない初心者です!
本当にHTMLは難しいけど、いろんなサイトを参考にしたり、本を読んだりして勉強しました。
初心者なりの初心者の人のためのHTMLの使い方を書いていこうと思いますので、みなさん参考にしてください♪



★注意してください!★

*ここでは半角で入力していないためコピーしてペーストしてもうまく表示されません。
自分のところで使う場合には、直接入力で入力しなおしてから使ってください!



★それでははじめましょう!★


 ★まず、メールソフトのOutlookを開いてください。 そして、新規作成→表示→ソースの編集を選択してください!
新規のメールの左下の所に通常のメールではない、編集、ソース、プレビューと言うのがあったら操作は成功です。
メモ帳で編集する方法もありますが、Outlookで編集するとソースを書き、すぐにプレビューが見れます。
HTMLは大文字でも小文字でもかまいませんが、半角で入力してください!


 ★一行目に、<HTML>、2行目に<HEAD>と書いてください!

3行目に<TITLE>自分のページの一番左上(青い部分)に表示したい文字を入力!</TITLE>と書いてください。

 ★4行目に</HEAD>と入力します。お気づきかもしれませんが、初めに<HEAD>と書いたら終わりたい時に</HEAD>と最後につければ、終わりです。
二つで1セットですので、お忘れなく!

★5行目!次に背景の色、文字の色、リンクの色、表示済みのリンク、表示中のリンクの色を設定します。
<BODY BGCOLOR="文字の色の数字を選択" TEXT="色を選択" LINK="色を選択" VLINK="色を選択" ALINK="色を選択">
色は、color=#****** *=0〜f(16進)で作ります。その他英語での入力も可能です。*の所を変更するだけで、簡単に色が変えられます。
黒は#000000、赤は#ff0000、白は#ffffff、青は#0000ff、水色#00ffffなどです。
例えばcolor=red・white・black・brown・green・blue・pink・gray・gold・silver・skyblue・orange・yellow・purple・beige・・・です。

 ★次に文字を中央に表示したい場合は、<P ALIGN="CENTER">中央に表示したいもじをここに入力</P>
右に表示したい場合は、<P ALIGN="RIGHT">右に表示した文字をここに入力</P>
左に表示したい場合は、<P ALIGN="LEFT">左に表示したい文字をここに入力</P>
*それでははじめましょう!以下の分は左揃えの書き方にしています。

 ★次に文章を改行してみましょう!文章を次の行に持っていきたいときには<BR>と入れてください。
<BR>で一行次に行き、<BR>
と何個も書く事により、間隔をあけることができます!

 ★文字を小さくしたり大きくしたりしてみましょう!
文字のサイズを指定するには<FONT SIZE="数字">大きさを変えたい文章を入力</FONT>を使います!
サイズはこのとおりです。
フォントサイズ1 フォントサイズ2 フォントサイズ3
フォントサイズ4 フォントサイズ5 フォントサイズ6
フォントサイズ7
このようになります。

 ★文字の色を部分的に変更してみましょう!
↑のフォントのところだけ、赤になっています。このように、ここの部分だけの色の変更です。
<FONT COLOR="#******">色を変えたい分を入力</FONT>
↑のフォントの大きさを示した時のソースはこうなります。
<FONT COLOR="RED"><FONT SIZE="1">フォントサイズ1</FONT>

 ★文字に他のページのリンクを張りましょう!
このときは、<A HREF="リンクを張りたいところのアドレス">リンクを張りたい文字を入力</A>
例えば、私のHPメインからプロフィールにリンクしたい時。
<A HREF="http://www.geocities.co.jp/SilkRoad-Oasis/6579/profile.html">★プロフィール★<</A>と書きます。
★プロフィール★ となります。(←ここは実際リンクが張ってあり私のプロフィールに行けます。)
次に画像にリンクを張ってみましょう。
<A HREF="リンクを張りたいところのアドレス"><IMG SRC=画像のアドレス(httpで始まるもの)を入力!>
例えば私のプロフィールの画像にリンクを張ってみます。(↓は実際に私のプロフィールに行けます。)

次にメールアドレスをリンクしましょう!
<A HREF="MAILTO:自分のメールアドレス">メールください!などリンクしたい文字を入力</A>
例えばメール待ってます♪(実際私のメールアドレスが登録されていますので、私にメールが来るようになります。)
今まで説明した機能をいろいろ組み合わせてみると、こうなります。

メール待ってます♪

<CENTER><A HREF="MAILTO:mamimafu@hotmail.com"><FONT COLOR="#ff6699" SIZE=4><STORONG>メール待ってます♪</STRONG></FONT></A><CENTER>となります。<STRONG></STRONG>はふと文字にする時に使います。ふと文字は<B></B>でもどちらでもOKです!

 ★次に画像を入れて見ましょう!
<IMG SRC="httpからはじまる自分の入れたい画像のアドレスを入力!">>BR> 例えば、です!