ホームページ作り 基本タグ

 ホームページ作成講座

基本タグ講座

トップ 基本構造 基本タグ スタイルシート Webスペース アップロード! さあ!宣伝 広告を貼ろう!
トップページへ

基本タグ

ホームページを作った事のない方でもHPが
作れるように厳選した基本タグを教えていきます。
細かい操作は後ほどします。
まずはここをマスターしましょう〜〜
ホームページ作り講座 ステップ2

〜 基本タグ 〜

本文に入れる基本タグを覚えよう!!

このページに何度も通っている人は下のメニューから!
それ以外の人はちゃんとしたの文章を読みましょう。

 【HTMLタグ基本編】

 超基本タグ もじたぐ 位置指定  画像を貼る ライン body属性

 リンク テーブル レイアウト 


 【HTMLタグ応用編】

 はじめに タグのまとめページ



このステップではbodyの中に入れる基本タグについて勉強していきます。
基本的なものから順番にやっていくので初めのうちは指示通りタグをコピペして下さい。


いきなりこのページに来た人はホームページ作り講座メニューのトップの所から読み進めていって下さい。 ※準備が必要なのでお願いします(;゜▽゜A``



では前回作ったindexページを編集してみましょう!


とりあえず前回作ったページを開きます。
(index)を左クリックで開いて下さい。
下のようなページになっているでしょうか?

  タイトル                             _□×
ファイル  編集  表示  お気に入り ヘルプ
 アドレス ・・・・・・・・・・・・・・・・・

本文

ではとりあえずこれはタスクバーに置いておきましょう!
タイトルバーの_□×の_で下におろせます。
もう一度表示する時は下のバーからクリックで呼び出せます。



それではフォルダの画面に戻って下さい。
そして編集用の画面を開きます。
開き方は次の通りです。



indexのを右クリックしてプログラムから開くを選択してメモ帳(NotePad)を選択して下さい。とりあえずメモ帳で編集するのでメモ帳で編集できる状態にしてくださいね。



では編集する時はいつもこのようにするようにお願いします。
保存する時は上書き保存でOKです。



それでは一度保存の練習をして見ましょう!
本文という文字のよこに「練習」と打ち込んで上書き保存してください。


上書き保存できたでしょうか?
では先ほどタスクバーにしまったindexを開いてみましょう。
そして更新ボタンを押してください。更新はF5キーでもOKです。



下のようになったでしょうか?



  タイトル                             _□×
ファイル  編集  表示  お気に入り ヘルプ
 アドレス ・・・・・・・・・・・・・・・・・

本文練習



これからはこんな感じで、『編集しては上書き保存、indexファイルを更新してチェック』を繰り返します。これから先はチェックして下さいと略しますのでそう指示があったら上の赤字の操作を行って下さい。






厳選タグ

では超基本タグからやりましょう。
ここで紹介しているタグは出来るだけ覚えてください!

前回の復習もかねていますが何度もやって損はありません。
青い部分をコピペまたは打ち込んでいって下さい。






【超基本タグ】

改行: <br>

※前回も言いましたが</br>のような終了タグはありません。


では改行してみましょう。タグをコピペしてチェックしてみましょう。
(これで最後ですよ。チェックは上書き保存→indexファイルを更新)

下のようになりましたか!?


  タイトル                             _□×
ファイル  編集  表示  お気に入り ヘルプ
 アドレス ・・・・・・・・・・・・・・・・・

本文練習

改行!
改行!
改行!


あ!言い忘れていましたがどういうタグを使ったか分かりやすいように言葉を入れた方がいいですよ! 例えば改行の場合は「改行!」など、と。
ちなみに改行タグは指示しなくても入れていって下さい。そうでないと見苦しいページになってしまうので・・・




タイトル: <title>タイトル</title>

すでに入っているタグですね。これはヘッダにいれるタグです。
すでに説明しましたがヘッダは<head>〜</head>の間ですよ。

ではタイトルを変えてチェックしてみましょう!


  初めてのホームページ作り                _□×
ファイル  編集  表示  お気に入り ヘルプ
 アドレス ・・・・・・・・・・・・・・・・・

本文練習

改行!
改行!
改行!


タイトルの部分が変わったでしょうか?



では次からはもじたぐに移ります。









【もじたぐ】


太字: <b>文字</b>

斜体: <i>文字</i>

下線: <u>文字</u>

取り消し線 <s>文字</文字>


では、太字、斜体、下線、取り消し線を練習してチェックしましょう!



  初めてのホームページ作り                _□×
ファイル  編集  表示  お気に入り ヘルプ
 アドレス ・・・・・・・・・・・・・・・・・

本文練習

改行!
改行!
改行!

太字 斜体 下線 取り消し線


上のようにうまくいきましたか?
では次は組み合わせて使ってみましょう。
例えば太字にして下線を付けたい場合は

<b><u>文字</u></b>のようにタグの中にタグを入れればOKです。

いろいろ試してみてください。



  初めてのホームページ作り                _□×
ファイル  編集  表示  お気に入り ヘルプ
 アドレス ・・・・・・・・・・・・・・・・・

本文練習

改行!
改行!
改行!

太字 斜体 下線 取り消し線

太字で下線 斜体で下線 斜体で太字で下線 取り消し下線


組み合わせは成功したでしょうか?


次は文字の大きさを変えてみましょう。
文字の大きさはフォントサイズで決めるか、スタイルシートを使うかですが、ここではフォントサイズを使って説明します。

以下は大きさのサンプルです1から7まであります。

サイズ1
サイズ2
サイズ3
サイズ4
サイズ5
サイズ6
サイズ7

<FONT size="1">サイズ1</FONT>
<FONT size="2">サイズ2</FONT>
<FONT size="3">サイズ3</FONT>
<FONT size="4">サイズ4</FONT>
<FONT size="5">サイズ5</FONT>
<FONT size="6">サイズ6</FONT>
<FONT size="7">サイズ7</FONT>



タグについての補足ですが大文字でも小文字でもどちらでもOKです。

文字のフォントを変えるタグのように数値のみを変えるタグは数多くあるので覚えておきましょう。例えばこのたぐなら <FONT size="数値1から7">文字</FONT>ということです。


ではサイズ7以上は不可能かといわれれば7以上も可能です。
ただしスタイルシートをつかいます。



スタイルシートは次のステップで勉強しますので楽しみにしていて下さい。

ではフォントサイズを練習してチェックして下さい。



  初めてのホームページ作り                _□×
ファイル  編集  表示  お気に入り ヘルプ
 アドレス ・・・・・・・・・・・・・・・・・

本文練習

改行!
改行!
改行!

太字 斜体 下線 取り消し線

太字で下線 斜体で下線 斜体で太字で下線 取り消し下線

サイズ1
サイズ2
サイズ3
サイズ4
サイズ5
サイズ6
サイズ7


上のようになりましたか!?





では次は文字の色を変えてみましょう


これはサンプルです!タグは <FONT color="#ff00ff">文字</FONT>
これはサンプルです!タグは <FONT color="#00ff00">文字</FONT>
これはサンプルです!タグは <FONT color="#0000ff">文字</FONT>
これはサンプルです!タグは <FONT color="#cccc00">文字</FONT>

これもさっきと同じで<FONT color="カラーコード">文字</FONT>というタグで、カラーコードの部分を変えればどんな色でも作ることができます。
カラーコードはこちら

それでは練習してチェックしましょう!



  初めてのホームページ作り                _□×
ファイル  編集  表示  お気に入り ヘルプ
 アドレス ・・・・・・・・・・・・・・・・・
〜略
・・・・・・
サイズ6
サイズ7

文字色ピンク!
文字色黄緑!
文字色青!
文字色黄色!


上のように上手くいきましたか?


では次は大きさと文字色を変える組み合わせをします。



大きさ1で文字色赤←サンプル
このタグはさっきやった組み合わせとはちょっと違います。
<FONT color="#ff0000" size="1">大きさ1で文字色赤</FONT>



上のような感じになります。カラーコードと大きさの部分は半角空きますのでご注意下さい。




下線や太字を混ぜたい場合は下のようになります。
<b><u><FONT color="色" size="サイズ">文字</FONT></u></b>

これでもじたぐは終わりです。この他にももじたぐはありますが基本的なものはこれで終了。
一様他にどんなタグがあるかだけお伝えします。これはホームページビルダーですぐにできますし必要に応じてタグをコピペすれば良いので覚えなくてもOKです。


書体を変える: 書体を変えます!
上に文字: 上に上げたい文字サンプル
下に文字: 下に下げたい文字サンプル
背景に色: サンプル
文字に説明を出す サンプル触れてみて!
文字を動かすシリーズ

右から左
左から右
左右
他にもありますがこの辺で終わりにしますね。



【位置を指定】


今まで作ったページはどんな感じになりましたか?


下のようにずっと左詰でしたよね?

  初めてのホームページ作り                _□×
ファイル  編集  表示  お気に入り ヘルプ
 アドレス ・・・・・・・・・・・・・・・・・

本文練習

改行!

太字 斜体 下線 取り消し線

太字で下線 斜体で下線 斜体で太字で下線 取り消し下線

サイズ1


ここではこのページを下のように変化させます。

  初めてのホームページ作り                _□×
ファイル  編集  表示  お気に入り ヘルプ
 アドレス ・・・・・・・・・・・・・・・・・

本文練習


改行!

太字 斜体 下線 取り消し線

太字で下線 斜体で下線 斜体で太字で下線 取り消し下線

サイズ1

何が変わったかというと本文練習が中央に移動しました!
このように文字の位置など全て、位置を指定する事ができます。
このタグはセンタータグのみ覚えればOKです。では一度すべて中央に寄せて下さい。


タグはこれ <center>〜〜〜</center>

全て中央にする場合は<body>のすぐ後に<cnter>を、</body>のすぐ前に</center>を入れて下さい。ではチェックしてみましょう。



  初めてのホームページ作り                _□×
ファイル  編集  表示  お気に入り ヘルプ
 アドレス ・・・・・・・・・・・・・・・・・

本文練習


改行!

太字 斜体 下線 取り消し線

太字で下線 斜体で下線 斜体で太字で下線 取り消し下線

サイズ1


上のようになりましたか?

本文練習という文字のみを中央にする場合はセンタータグで「本文練習」という文字を挟めばOKです。このように中央にしたい部分にセンタータグをいれれば中央に移動します。



位置指定は中央以外に右寄せがあります。

タグは<div align="right"></div> こんなタグもあることを覚えておいて下さい。





【画像を貼る】


画像を貼る練習をしてみましょう!

←こちらの画像を貼ってみましょう!

まずはこの星の画像を右クリックで名前をつけて保存して下さい。
名前はhosi.gifとなっていると思われますのでそのままでOKです。
保存場所はちゃんとindexファイルがあるフォルダに保存して下さいね。



保存できたでしょうか?
ではメモ帳に次のタグを入れて下さい。


<img src="画像URL">


画像のURLはhosi.gifにして下さい。これでチェックしてみて下さい。



  初めてのホームページ作り                _□×
ファイル  編集  表示  お気に入り ヘルプ
 アドレス ・・・・・・・・・・・・・・・・・

本文練習


改行!

太字 斜体 下線 取り消し線

太字で下線 斜体で下線 斜体で太字で下線 取り消し下線

サイズ1





上のようにちゃんと星が表示されましたか?

もし表示されなかった場合は拡張子を大文字にしてみて下さい。
hosi.GIFとして下さい。



続けてこの星の画像を使って、今度は大きさを変えてみましょう!

タグは <img src=画像URL width=横幅 height=縦幅>

画像URLは先ほどと同じhosi.gifうまくいかなかった人はhosi.GIFでお願いします。
以後もこれと同じように入れて下さい。

横幅、縦幅はピクセルで数値を入れます。

大きさは下を参考に!!!


←100x100 ←50x50 ←25x25 ←14x14



できましたか!?これで画像は終了です。


他にも画像タグはありますが基本は終わりです。
ちなみにどんなタグがあるかだけ解説します。


文字を表示!!! 画像に触れると文字

 右クリック禁止!

右クリック警告あり!

 枠をつける


この他にもいろいろありますが後ほど勉強するということで!!




【水平線・ライン】

前回も一度説明したので覚えているかもしれませんが次は水平線(ライン)の基本を勉強していきます。では基本中の基本から!


ラインのタグは <hr> です! 試しに練習してチェックして下さい。





練習おわった?
前も言いましたがラインにも終了タグはありませんよ。


次はラインの色を変えてみましょう。




タグはこちら <hr color="カラーコード">  カラーコードはこちら



次はラインの横幅や高さを指定してみましょう。


タグはこちら <hr width="横幅"> <hr size="縦幅">

もちろんこのタグも組み合わせ可能ですよ。
もう雰囲気でわかりますよね?こういうタグの場合は・・・
例えば次のような例。


↑これは横幅200 高さ5 色は赤にしております。

タグは次のようになる。 <hr width="横幅" size="高さ" color="カラーコード">


ではここで紹介したタグは練習してチェックしていきましょう!!!
この他にもラインのタグはありますがそれは後ほど!




ちょっと話は変わってbody属性を勉強しましょう!


【body属性】

復習です!
bodyは本文が始まる一番初めのタグですよ!!!!

↓赤い部分

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


この赤い部分をいろいろ変えていきましょう!


手始めに背景色を変えます。 <body bgcolor="カラーコード">


bodyの部分を変えてチェック!背景色が変わったら次へ








次に背景に画像を入れます。 <body background="画像URL">

画像URLは先ほど使ったhosi.gifでOKですよ。

もう一度bodyの部分を変えてチェック!


今の状態はしたのようになっていますか?



  初めてのホームページ作り                _□×
ファイル  編集  表示  お気に入り ヘルプ
 アドレス ・・・・・・・・・・・・・・・・・

本文練習


改行!

太字 斜体 下線 取り消し線

太字で下線 斜体で下線 斜体で太字で下線 取り消し下線

サイズ1




ずいぶん派手なページになってしまいました・・・
ということで普通の<body>に戻しましょう


この他にもbody属性はありますが後ほど勉強します。
ちなみに今回やった背景色や背景画像・紹介はしていませんがテキスト色・リンク色はbody属性ではなくスタイルシートでも可能なのであまりこちらにこだわらなくても良いです。
と、いうよりかは後ほどやるスタイルシートの方がオススメです。



ではいったん基本状態に戻しましょう!
余分な本文は全て消しましょう!
下の状態にして下さい。

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



では次はリンクに移るのでリンク先ようのページを作らなくてはなりません!
とりあえずしばらくは指示通りお願いします。





【リンクを貼る】


リンク用のタグは色々種類があるので基本的なことから順にやっていきましょう!

まずは同ウインドウで開くタグを勉強します。

タグは次のものです。 <a href="アドレス">文字</a>

アドレスはindex.htmlと入れて下さい。


本文の一番初めの方に記述してください。
もちろんお好みで改行したりセンターにしてもかまいません。
「文字」の部分はトップページまたはホームとでも入れて下さい。



下のようになるようかチェックしてください。



  初めてのホームページ作り                _□×
ファイル  編集  表示  お気に入り ヘルプ
 アドレス ・・・・・・・・・・・・・・・・・

トップページ



では、いったん今開いているメモ帳、Webページを閉じて下さい。


フォルダだけが残っている状態にして下さい。


 ○○フォルダ
ファイル  編集  表示  お気に入り  ツール  ヘルプ
← 戻る →  フォルダ

   
 メモ帳  index  hosi



ではリンク先のページをすばやく作る技を行います。
この操作はテンプレートをひとつ作ったあとそれをコピーしていくという操作になります。
今は分からなくても良いので指示通り操作を行って下さい。


まずはindexファイルを右クリックしてコピーして下さい。
そのあとに空いているスペースで右クリックで貼り付けしてください。
貼り付けは5回して下さい。下のようになるようにして下さい。



 ○○フォルダ
ファイル  編集  表示  お気に入り  ツール  ヘルプ
← 戻る →  フォルダ

        
 メモ帳  index  hosi  コピー コピー  コピー コピー コピー



ではコピーしたファイルの名前を変更します。
名前の変更の仕方はファイルの上で右クリック。名前の変更を押してください。

一つ目のファイル名は profile として下さい。

二つ目のファイル名は diary として下さい。

三つ目のファイル名は image として下さい。

四つ目のファイル名は link として下さい。

五つ目のファイル名は page として下さい。



これで一気に5ページ増えました〜〜


とりあえずこのままでは中身のないページなのでタイトルと題名だけでもいれていきます。

profileファイルのみ説明しますので残りの4つは自力で編集して下さい。

まずはprofileファイルを右クリックしてプログラムから開く、メモ帳を選択してメモ帳で編集していきます。

では<title>の中身を変えましょう!
このページはプロフィールページなので『プロフィール』と入れて下さい。

次は本文にプロフィールと入れます。
ここは分かるように自由にタグを使って入れて下さい。
フォントを大きくしたり色を変えたり・・・

上書き保存して下のようになるかチェックして下さい。


  プロフィール                          _□×
ファイル  編集  表示  お気に入り ヘルプ
 アドレス ・・・・・・・・・・・・・・・・・

★プロフィール★

トップページ


この操作を他の4つして下さい。
タグの練習もかねていろいろなタグを使ってみましょう!



他のページは以下のように文字を入れて下さい。

 diary は日記

 image は 画像・アルバム

 link はリンク

 page は自由に題名をつけて下さい。



全て終わったら再びindexを編集しますので、編集できる状態にして下さい。






先ほど作った5つのページのリンクを貼ってみましょう!

同窓リンクのタグは <a href="アドレス">文字</a> ですよ。

もちろんアドレスは5ページともちがいますよ!!

profileページへリンクする場合はprofile.htmlと入れて下さい。

その他も同様でdiary.html   image.html・・・

リンクの一番上には適当に「メニュー」とでも入れておいて下さい。
その他ラインを入れる・センターにするなどお好みで編集してもかまいません。

一度チェックして下さい。下のようになりましたか!?



  初めてのホームページ作り                _□×
ファイル  編集  表示  お気に入り ヘルプ
 アドレス ・・・・・・・・・・・・・・・・・

初めてのホームページ作り


トップページ


★メニュー★

プロフィール

日記

アルバム

リンク

趣味のページ


ちゃんとリンクできていますか?
もしリンクできていないならどこか不具合があるはずです。
もう一度よく読んで下さい。



次は新ウインドウで開くタグです。
indexページはいったん閉じて下さい。
linkページを編集する準備をして下さい。




新ウインドウで開くタグは <a href="アドレス" target="_blank">文字</a>

ではリンクページに貼ってみましょう!

アドレスはフィールドのアドレスでお願いします。
http://field.lolipop.jp/ですよ〜文字のところは『フィールド』でもなんでも良いです。

下のようになりましたか?
チェックしてちゃんとリンクできているか見て下さい。
新しいウインドウで開いていればOKです。



  リンク                              _□×
ファイル  編集  表示  お気に入り ヘルプ
 アドレス ・・・・・・・・・・・・・・・・・

★リンク★

トップページ


フィールド





もちろん自分のサイトでも新ウインドウで開けますよ。
普通は他サイトにリンクするときに新ウインドウで開きます。



画像でもリンクは可能です。

タグは下の通りです。

同窓<a href="URL"><img src="画像URL" border="0"></a>

新窓<a href="URL" target="_blank"><img src="画像URL" border="0"></a>


今編集しているリンクページで練習しちゃって下さい。

画像URLは先ほど使ったhosi.gifを使ってOKです。


タグの最後の方にあるborder="0"っていうのは画像の枠の大きさです。
普通は0です。


下のようにうまくいったらリンクはこれで終了!


  リンク                              _□×
ファイル  編集  表示  お気に入り ヘルプ
 アドレス ・・・・・・・・・・・・・・・・・

★リンク★

トップページ


フィールド








いよいよ来ました↓↓↓




【テーブル】

まずはテーブルについて説明します。一つずつ理解していって下さい。

使い用途:テーブルはレイアウトに使ったりにしたりして使います。

テーブルタグの基本は下の通りです。

<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>



<table>
ではじまり</table>で終わります。

<tr><tr>は列です。 <td><td>は行です。

こんな事をいっても分からないと思うのでいくつかサンプルで説明します。


1行1列の場合

タグは
<TABLE>
<TR>
<TD>
一行一列</TD>
</TR>
</TABLE>


ブラウザ表示

一行一列
(枠の表示タグを入れていないので実際は枠は表示されません)






2行1列の場合

タグは
<TABLE>
<TR>
<TD>
@</TD>
<TD>A</TD>
</TR>
</TABLE>


ブラウザ表示

@ A
(枠の表示タグを入れていないので実際は枠は表示されません)






2行2列の場合

タグは
<TABLE>

<TR>
<TD>
@</TD>
<TD>A</TD>
</TR>

<TR>
<TD>
B</TD>
<TD>C</TD>
</TR>

</TABLE>


ブラウザ表示

@ A
B C
(枠の表示タグを入れていないので実際は枠は表示されません)



こんな感じです。分かっていただけたでしょうか?
実践あるのみです上のサンプルを使って練習して下さい。
もちろん<td>〜</td>の間には適当に文字を入れて下さいね。



次はさっき作ったテーブルに枠を付けます
今の状態ではなにも表示されていないですよね。
この何も表示されていないという状態も結構役立ちますが・・・

枠の表示方法は<table>の部分を少し変えます。

<TABLE border="数値"> のようになります。

ではさっき作ったテーブルタグの<table>の部分のみ変えてチェックして下さい。
数値はなんでもかまいませんが1で良いでしょう。(ただし0は駄目ですよ)

ちゃんと枠が表示されたら次へ。



次は余白(文字とテーブルの間隔)を設定します。

タグは<TABLE border cellpadding="数値">

数値は5以上くらいで試してください。

もちろんこのタグを入れても枠は表示されませんので枠も表示するには
次のようなタグになりますよ。

<TABLE border="枠の数値" border cellpadding="余白の数値">

ではさっき作ったテーブルタグの<table>の部分のみ変えてチェックして下さい。

余白ができていれば次へ行きましょう!(余白有りと無しを作ると分かり易い!



次は表の横幅と高さを指定する方法です。

タグは

横幅指定 <TABLE border="枠の数値" width="横幅">


横幅と高さを指定 <TABLE border="枠の数値" width="横幅" height="高さ">


数値の単位は全てピクセルです。参考までに下にサンプルを置きます。

100x100

200x150

ではさっき作ったテーブルタグの<table>の部分のみ変えてチェックして下さい。

横幅や高さがちゃんと設定できれば次へ



次は表に背景色を付けます

タグは

<TABLE border="枠の数値" bgcolor="背景色のカラーコード">

枠の数値は0でもOKです。0の場合は枠は表示されません。

枠ありサンプル
枠なしサンプル

ではさっき作ったテーブルタグの<table>の部分のみ変えてチェックして下さい。



次は背景に画像を入れます!

タグは

<TABLE border="枠数値" background="画像URL">

サンプルです。
画像は先ほど使った hosi.gif を使って下さい。
(画像URLにはhosi.gifと入れて下さい。

このサンプルは枠非表示、300x90です。


サンプルのように枠を非表示にするといい感じになります。
実際に使うときはこんな画像ではなくもっと良いものを使いましょう!

画像を入れるときは横幅と高さを指定するタグを入れた方がいい感じになりますよ。
横・高さの指定は前にやったので分かりますよね?
このタグに追加すれば良いんですよ。


こんな感じになります。

<TABLE border="枠数値" width="横幅" height="高さ" background="画像URL">

ではさっき作ったテーブルタグの<table>の部分のみ変えてチェックして下さい。


できましたか?


お疲れ様です!これで厳選タグ基本編は全て終了しました!
まだテーブルタグも覚えたてでいまいち実感がわかないかもしれませんが
このテーブルがサイトのレイアウトを考える上でとても重要になります。


↓↓↓↓↓↓ではレイアウトについて少しだけ話します。↓↓↓↓↓↓





【レイアウト】


サイトの形を作るのがテーブルになります。
テーブルは上で勉強した表ですがこれを使ってサイトを形成します。
レイアウトは自由に考えてもらえればそれで良いです。


いろいろなサイトを見て回ってどんな形が良いのかを考えてみると良いかもしてません。

下に幾つかサンプルを用意しました。


題名など
目次 本文

↑ちなみにこれはこのサイトのレイアウトです。


題名など
本文  目次

↑上の逆バージョン



題名など
目次 本文  目次

↑このタイプのサイトも良くあります!



目次  本文


テーブルではなくフレームページですとこんな感じ。
フレームページについては後ほど勉強します!



目次 本文


アイフレームを使ったページだとこんな感じ。
アイフレームに後ほど勉強します。
ちなみにこれはちゃんとテーブルを使いますよ!!!


ってな感じでいろいろレイアウトが考えられます。
これがちょっと違うだけでサイトの雰囲気が全然違います



とりあえず今はテーブルを使って土台を作るんだなぁ〜ということを頭に入れて下さい。


今後の予定について!

一度HTMLタグから離れます。

次はスタイルシートってやつを勉強します。

これを使うといろいろ便利ですので!

スタイルシートを勉強した後は再びHTMLを勉強します!

つまりは応用編のHTMLを勉強しますよ。


スタイルシートの勉強に移りますが、スタイルシートの勉強が終わりましたら
再びこのページに戻って来てください。そしてこのページの上のメニューのHTMLタグ応用編の「初めに」をクリックしてHTMLタグ応用編まで来てください。




では次のステップへ!!!




 ホームページ作り講座〜スタイルシート〜 へGO!





















































HTMLタグ応用編!

まず初めに。

HTMLタグ基本編・スタイルシートを勉強した人がここに来ましたよね!?
ではそれを前提に話を進めていきます!


スタイルシートはもう使えるようになったと思いますので次はHTMLタグの細かいところを解説していきたいと思いますが、細かいタグとないますとだらだらと今のような感じで説明していくことになりますのでここから先は各自で調べるようにしてください。


タグのまとめページを参考にいろんなタグを使って見てください。
(練習のつもりでいろいろ試して下さい)
それが終われば続きを読み進めていって下さい。




タグのまとめページを見ればたいがいのことは分かると思いますがどうしても解説ページを作って欲しいという方がいればメールにて管理人にお知らせください。

このページに随時解説を追加していきますので・・・




最後にディレクトリについて説明いたいます。

ディレクトリとは簡単に言ったらフォルダのことです。
ホームページを作るにあたって全てのファイルを同じフォルダに保存すると整理がつかなくなります。よってフォルダを複数作成することでファイルを整理することができます。




※ディレクトリ(フォルダ)の名前は必ず半角アルファベットまたは数字にして下さい。

ホームページビルダー等を使い出したらディレクトリを使って本格的にやって見てください。

ディレクトリについての詳しい説明も追加予定。




何にしてもページを公開できなければ意味がありません。
まずは自分で作ったサイトを公開状態にするにはどうしたら良いかを次のステップで行います。

次のステップで練習で作ったページを公開するためのウェヴスペースを見つけましょう。



ホームページ作り講座〜Webスペース〜 へGO!








▼ホームページ作り講座メニュー

 @  トップページ
 A  基本構造講座
 B  基本タグ講座
 C  スタイルシート講座
 D  Webスペース講座
 E  アップロード講座
 F  HP宣伝講座
 G  アフィリエイト講座
▼サイトメニュー

 About 〜このサイトについて〜
 Link  〜厳選リンク集・タグ〜
 Mail  〜質問・相互・連絡〜
▼HTMLタグ/HP関連メニュー

 HTMLタグ CSS 一覧 
 HTMLタグ一覧 解説
 CSSスタイルシート一覧 解説
 フレームページの作り方
 FFFTPの使い方 解説


トップページへ




inserted by FC2 system