ホームページ作成勉強５基本タグを勉強しよう基本タグとはホームページを作成する上で全て共通のルールなので、勉強して損は有りません。
下記はFrontPageで作ったホームページデーターです。
このデーターの基本タグ構成から見てみましょう。
ではHTMLタグの見方を説明します。『表示』をクリックして、『HTML』をクリックして下さい、左の画面が右画面に変わります。
| 通常の画面 | HTMLタグ編集の画面 |
 |
 |
基本タグの説明| タグ画面 | HTMLタグ編の説明 |
 |
左の画面を参照いただくと 赤の棒線の部分がHTMLでは必ず必要なタグになります。（大文字小文字は関係ありません。） 下タグは絶対に必要なタグです。 --------------------------------- <HTML> <HEDA> <TITLE> </TITLE> <BODY> </BODY> </HTML> --------------------------- <BODY>〜</BODY>の間に文字・画像・リンクなどホームページで見える部分を書きます。 <BODY>こんにちは</BODY>と書きますと ホームページに こんにちわ と表示されます。 |
もう一度必ず必要なタグの説明。これは非常に重要なので必ず理解してください。| タグ画面 | HHTMLタグ編の説明 |
 |
<HTML> <HEDA> <TITLE> </TITLE> <BODY> ホームページ表示させるところです。 </BODY> </HTML> --------------------------- 上記のように書きますとホームページには 下のように表示 ホームページを表示させるところです。 --------------------------------- <>で囲ったところと <BODY>〜</BODY>以外に書かれた文字・画像・リンクは表示できません。 |
開始タグ、終了タグの説明。| タグ画面 | HTMLタグ編の説明 |
 |
タグには開始タグで始まって、終了タグで終了を宣言しないといけません。 ブラウザーに「ここからはじまります！」と言って 「ここで終わりです！」と教えてあげる意味です。 左図の説明。 <html>(開始タグ)<head>(開始タグ) <titli>(開始タグ) </titli>(終了タグ) </heda>(終了タグ) <body>(開始タグ) </body>(終了タグ) </html>(終了タグ) 開始タグで始まって終了タグで終わると言う決まりが有ります。 ※中には終了タグを必要としないタグも有ります。 これから幾つか説明出てまいりますのでご覧下さい。 |
次に、改行<BR>と行空け<P>について勉強します。HTMLの場合文字の改行は<BR>と言うタグで命令しないといけません。
※<BR>終了タグは不要です。
※2<P>につきましては他用途も有ります。ポジションとして使う時は終了タグが必要ですが
今回説明は省略いたします。
| タグ画面 | HTMLタグ編の説明 |
 |
赤の棒線したタグ<BR>と<P> 文章の最後や画像表示タグの最後に<BR> と入力すると改行され左下から文字入力や画像表示が出来ます。 又文章最後に<P>を入力すると一行あきます。 行開けは<BR>でもOKです。 左の記述の場合は下のように表示されます ----------------------------------- こんにちわ ホームページ改行方法の説明と行空けの説明を致します。 上のように記述すると一行開きます。 |
改行と行開けはすぐ理解できると思います。次に<CENTER></CENTER>を勉強しましょう。
このタグは文章を中央に表示させることが可能になります。
| タグ画面 | HTMLタグ編の説明 |
 |
HP-ムページ中央に表示させたい場合 <center>〜</center>の間に書きます すると下のように表示されます。 中央に表示させることが可能です 中央に表示させたい文字以外に画像 やリンクなど<center>〜</center>の間に書くと 中央に表示可能です。 |
<HR>水平線タグの勉強| タグ画面 | HTMLタグ編の説明 |
 |
棒線のタグ<HR>の説明 左に書いた<HR> これにより下のように棒線が表示されます。 ------------------------------------- 区切りの棒線の表示方法 それぞれ長さが異なる棒線が表示されます。 ------------------------------------ 上をご覧頂くと横の棒線が表示されますよね 長さが異なるのは<HR>に記述を足しているからです。 <HR>は表示されるところ全てに棒線は表示 <HR WIDTH="100">は"ダブルクウォーとで囲んだ数値をピクセル(センチのような単位)で指定します。なので表示される棒の長さは100ピクセルで表示されます。 <HR WIDTH="80%">は表示される面積に対して80%で表示すると言う記述です。 実際使って見ないと感触がつかめないと思いますので練習がてら使って見てください。 |
リンクタグの勉強、リンクタグはホームページにリンクさす方法、ローカル（ホームページデーター）にリンクさせる方法、メール送信リンクさせる方法などなど幾つかの種類が有ります。主要な何点かのリンクタグを勉強します。<A HREF="〜〜〜リンク先アドレス〜〜〜">リンク先名</A>
| タグ画面 | HTMLタグ編の説明 |
 |
開始タグ<a>終了タグ</a>となりますが 左をご覧頂くと <a href="〜"></a>となっております。 余り深く考えなくてOK リンク先を指定する場合は上記のタグになります。 ヤフーにリンクを貼る場合下のように書きます。 <a href="http://www.yahoo.co.jp/"> ヤフーにジャンプ（ここの文字は何でもOK） </a> 上記のように書くと下のように表示されます。 ヤフーにジャンプ <a href="http://www.yahoo.co.jp/"> ↑"〜"のアドレスを変えると変えたアドレスにリンクできます。 ヤフーにジャンプ（ここの文字は何でもOK） </a> 例MSNにリックする場合 <a href="http://www.msn.co.jp/"> MSNへジャンプ </A> |
メール送信タグ| タグ画面 | HTMLタグ編の説明 |
 |
リンクタグの応用編です。 <A HREF="mailto:ratan@cwo.zaq.ne.jp"> メール送信（ここの文字は何でもOK） </A> 上記のように入力すると下のようになります。 メール送信 下 mailto: ここに送信して欲しいメールアドレスを入力します。 <A HREF="mailto:〜"> メール送信（ここの文字は何でも良いです） </A> |
ローカルリンクタグ難しければ読まなくてOKです。
ホームページを作る上で、こんな仕組みになっていることだけ勉強しましょう。
ローカルリンクとは、基本的にホームページとは利用するパソコンのフォルダーイメージと同じです。
仮にhomeフォルダーにトップページが存在するとします。で二ページ目がhomeフォルダー階層内のhome2と言うフォルダーに作ったとします。
少し話がそびれますがホームページを見ているとアドレスがhttp://〜/homepage/naninani/となったページを見かけますのね。これはWWWサーバー内のhomepageと言うフォルダーの階層内のnaninaniフォルダーにデーターがあるのでhttp://〜/homepage/naninani/のようなアドレスになります。
では皆さんのパソコンと同じような画面で見てみましょう。
エクスプロラーと言うアプリケーションでイメージしてみましょう。
まずは下の図をご覧下さい。
homeと言うフォルダーに1ページ目を保存していると仮定します。
naninaniと言うフォルダーに2ページ目を保存しているとします。
では次のリンクの貼り方の説明をご覧下さい。
ローカルにリンクする方法homeファイルからnaninaniフォルダー内を指定しないといけませんその方法は下記参照。
| フォルダー画面（例） | HTMLタグ編の説明 |
 |
ではローカル内のファイルリンク方法の説明 左図は見やすいように他のフォルダーを表示させていますのでご了承ください。 保存ファイルは home index.html naninani index2.html とします。 <a href="naninani/index2.html"> 二ページ目はこちら（ここの文字は何でもOK） </a> 上記のように書くとローカル先にリンク出来ます。 下記のように表示します。 二ページ目はこちら（ここの文字は何でもOK） |
今度はnaninaniフォルダーからhomeのトップページにリンクを張ります。../〜.html としたに有りますが ../〜.html は一つ上の階層を参照しその中の〜.htmlを参照しますと言う指定です。
../を指定することにより一つ上を指定しますので二個上の階層を指定する時は ../../〜.htmlとすればOK
| フォルダー画面（例） | HTMLタグ編の説明 |
 |
ではローカル内のファイルリンク方法の説明 左図は見やすいように他のフォルダーを表示させていますのでご了承ください。 保存ファイルは home index.html naninani index2.html があるとします。 <a href="../index.html"> トップに戻る（ここの文字は何でもOK） </a> 上記のように書くとローカル先にリンク出来ます。 下記のように表示します。 トップに戻る |
今度は少し難しいローカルリンクの指定方法です。初心者の方は特に覚える必要は有りません。
こんな方法もあるんだなと読み流していただきましたら結構です。
homeフォルダー内にnaninaniとhome2フォルダーがあると仮定します。naninaniフォルダー内にnaninani2フォルダーがあると仮定します。
naninani2フォルダーフォルダー内の〜.htmlからhome2フォルダー内の〜.htmlにリンクさせたい時はどのようになけば良いのかを説明します。
画像タグの貼り方。<IMG SRC="〜">の使い方
※終了タグは不要です。
| タグ画面 | HTMLタグ編の説明 |
 |
ホームページに画像を貼り付けたいなら 画像ファイル名を下記の〜のところに画像ファイル名を指定します。 <IMG src="〜"> 左の場合は下記のように表示 但し画像保存するフォルダーが異なる場合は保存先フォルダーを指定しまいといけません。 上でも少し説明しましたが このページはhomeフォルダーとし 仮にaicon_bbs14.gifファイルが別フォルダーnaninaniに保存されているとします。 その時に記述する画像ファイル名は下記のようになります。 <IMG SRC="naninani/aicon_bbs14.gif"> もしこのページがnaninaniで aicon_bbs14.gifファイルが別フォルダーhomeに保存されているとします。 その際記述するタグは下のようになります。 <IMG SRC="../aicon_bbs14.gif"> ※上で説明しましたリンク指定方法のフォルダーとして書いております。 |
今度は画像にリンクタグを指定する方法| タグ画面 | HTMLタグ編の説明 |
 |
上記で説明したリンク先の方法でリンク先の文字が画像に変わるだけです。 上記例参照 <a href="http://www.yahoo.co.jp/"> ヤフーにジャンプ（ここの文字は何でもOK） </a> 赤文字の部分が画像タグに変わるだけ <a href="http://www.yahoo.co.jp/"> <IMG SRC="aicon_bbs14.gif"> </a> 簡単ですね。 左の場合は下記のように表示 |
以上簡単に基本タグの説明をさせて頂きましたいかがでしょうか少しタグが理解できましたでしょうか？
ホームページ作成ソフトを使うと、上記のようにややこしい事をしなくても簡単に
ホームページが作れますが、ちょっと訂正する場合はタグを見れるようにしておいたほうが便利です。
今度は表タグ等の説明を致します。
スポンサードリンク
| |ﾊﾟｿｺﾝ勉強部屋 | ﾊﾟｿｺﾝ勉強部屋2 | ADSL勉強部屋 | メール勉強部屋 | LAN勉強部屋 | ホームページ勉強部屋 | 自宅サーバー勉強部屋 | お役立ちｿﾌﾄの部屋 | C言語勉強 | 無料ゲーム | 無料セキュリティー | Linuxのコーナー | あかかげまる | オンライン通販 | ショップブランドﾊﾟｿｺﾝ | DVDとCD編集ツール | Avast | |
