ホーム > 無料ホームページ作成講座

無料ホームページ作成講座 カテゴリー

使えるタグ属性

使えそうなタグ属性の説明です。

bodyの属性タグ

<body bgcolor="#0000ff">  色の指定
<body background="***.jpg">  壁紙画像の指定
<body text="#ffffff">  全体的な文字色の指定
まとめて使う場合は
<body bgcolor="#0000ff" background="***.jpg" text="#ffffff">

上のbodyタグで言うbgcolorやbackgroundの事を指しています。

他にもdivやpタグにはid、class、align…などの属性を付ける事ができるので
覚えておくとタグの整理にもなり便利だと思います(^^

基本的なタグはこんな感じですが、まだまだ知りたいと言う方はタグ講座をご覧ください♪
簡単なタグばっかりですが「こんな使い方もできる」という説明をしています。

全体的に作成3

先ほどページを作りましたが、・・・正直ショボ過ぎですよね?(^^;
人によってやり方や順番が違うと思いますが、
私の場合は一度枠組みをしてから色や壁紙などのレイアウトをしていきます。

例えば…<h1>私のお部屋</h1>のタグを、
<h1><font color="#ff0000">私のお部屋</font></h1>など、
色を付けるなど、素材を借りてきてホームページに付け加えるなど…
ここからは自分のデザイン力と勝負になります。

私の場合はデザイン力は皆無で、
借りてきたテンプレートをアレンジするデザイン力くらいしかありません(汗
以前は自分で全部やっていたのですが、人様から借りる方が合っているかなぁーっと思いました。。

ですが人様のテンプレートをアレンジする場合はちゃんとした知識も必要なので
初心者さんがテンプレート借りてアレンジするならヘタにいじらない方がいいかもしれません。
ヘタにいじったら全体的なデザインが崩れて、元に戻せなくなってしまったというデメリットもついてきます。
ですので最終的にはそういう点を考慮しながらどうするか決めるのがいいかなと思います。

また別に作成方としてはCSSやPHP、CGIなどで作成する方法もありますので、
HTMLに慣れてきたらCSSやPHPなどに触れていくのも良いと思います(^^

全体的に作成2

先ほどから使っているindex.htmlの<body>~</body>を空にしてください。
TOPページのタイトルを目立たす為に<H1>のタグを使い、左メニューから作っていきます。


<html>
<head>
<title>私のお部屋</title>
</head>
<body>

<table border="1" width="700"> widthは大きさの指定
<tr>
<td colspan="2"> colspanは横方向に連結
<h1>私のホームページへようこそ!(タイトル)</h1>
</td>
</tr>
<tr>
<td> 左メニューの始まり
■メインメニュー<br>
<a href="jikosyoukai.html">自己紹介</a><br>
<a href="profile.html">プロフィール</a><br>
<a href="nikki.html">日記</a><br> ブログの場合ブログのURL
<a href="photo.html">写真</a><br>
<a href="link.html">リンク</a><br>
<a href="***">掲示板</a> ほぼレンタルになるのでURLを指定
</td> 左メニューの終わり

<td valign="top"> 右メニューの始まり
私の事や、日記、写真の紹介をしているホームページです。<br>
お暇な方は覗いていってください。
<p>
また掲示板などの書き込みも大歓迎です。
</p>

</td>
</tr>
</table>

</body>
</html>

■表示例

私のホームページへようこそ!(タイトル)
■メインメニュー
自己紹介
プロフィール
日記
写真
リンク
掲示板
私の事や、日記、写真の紹介をしているホームページです。
お暇な方は覗いていってください。

また掲示板などの書き込みも大歓迎です。

上記の様に表示されていると成功です(^^

profile.html以外は全部「ページを表示できません」と出ますが、
先ほどのprofile.htmlを作った感じでコンテンツを作っていきましょう♪

全体的に作成

では、今までの事含めて全体的な作成方法を説明していきます。
デザインとしては今見ているこのページみたいな感じで、
左枠にメニュー、右がメインと言った形になります。

私のホームページへようこそ!(タイトル)
■メインメニュー
自己紹介
プロフ
日記
写真
リンク
掲示板
私の事や、日記、写真の紹介をしているホームページです。
お暇な方は覗いていってください。

また掲示板などの書き込みも大歓迎です。

上記がデザインが目標です(センスがないのは管理人の仕様です(汗)
次のページはtableタグがメインになってきますので、
tableをちゃんと理解していた方が分かりやすいと思われます(^^;

上記は2カラムと呼ばれているものですが3カラムもできます

私のホームページへようこそ!(タイトル)
■メインメニュー
自己紹介
プロフ
日記
写真
リンク
掲示板
私の事や、日記、写真の紹介をしているホームページです。
お暇な方は覗いていってください。

また掲示板などの書き込みも大歓迎です。

カレンダー
時計プラグイン等

枠を作成

先ほどクリックしても404だったページを作成していきます。
今やっていたindexファイルは一旦置いておいて、新規作成でprofileというファイル名にして、
ホームページ作成開始で使ったタグをそのまま使い、枠を使ったプロフィールの作成をします。


<html>
<head>
<title>プロフィール</title>
 別ページ作成なので別のタイトル名にします
</head>
<body>

<table border="1" bgcolor="#f7f49f"> 枠を作成するタグ
<tr> tableタグを使うのに必須
<td> trタグを使うのに必須
ハンドルネーム   ABC<br>
出身   **県<br>
年齢   **歳<br>
性別   ♂<br>
趣味   インターネット
</td>
</tr>
</table>

</body>
</html>

上記のタグの表示

ハンドルネーム   ABC
出身   **県
年齢   **歳
性別   ♂
趣味   インターネット

上記のように表示されていると成功です(^^

tableタグにはtr、tdが絶対に必要で順番もtrが先でtdが後になります。
trの後にtdはいくつでも付けれますが、trは連続で使えません。
またtableタグの中にあるboderは枠の太さ指定、bgcolorはバックの色指定になっているので、
boderを5にしたりbgcolorを#ff0000にしたり自分なりにアレンジしてみてください(^^

では、先ほど作ったページをIEで開いて、
プロフィールをクリックすると、今作ったページが出ます♪
※indexとprofileは同じフォルダに入れてください。

簡単なタグを入力してみよう

前のページを踏まえて簡単なタグを使ってホームページを作成していきましょう♪
先ほどのタグはそのまま使っていきます。
追加しているタグ部分の色は緑色で説明は黒色です。


<html>
<head>
<title>私のお部屋</title>
</head>
<body>
私のホームページへようこそ!

<br> 行間を空けるタグ
<a href="profile.html">プロフィール</a>  自作成ページ(内部リンク)
<p> 段落を付けるタグ
<font size="5" color="#ff0000">おすすめホームページ</font> 色・大きさ変更タグ
</p> 段落を付けるタグ終了
<a href="http://www.yahoo.co.jp/">yahoo! JAPAN</a>
 外部リンク
</body>
</html>

profile.htmlについてはクリックしても404のままで。(次のページで説明しています)

私のホームページへようこそ!
プロフィール

おすすめホームページ

yahoo! JAPAN

上記のように表示されていると成功です(^^
コピペでも良いんですが覚える為には自分で書いていく事をおすすめします。

実際にホームページを作成してみよう

タグを書いてみよう

最初にくるタグはDOCTYPE宣言なのですが、これは無視していただいて良いです。
ほんとは必須?みたいなのですが、分からなくて適当に付けてしまうと
正しく表示されない場合がありますので(^^;
では、絶対に必要なタグの表記から(黒字は説明です)


<html> html文書で作成するという表記
<head> 頭になる部分。titleなどを入れるのに必要です
<title>私のお部屋</title> ←ブラウザ左上に表示される部分
</head> 頭になる部分を終わりの表記
<body> 体になる部分。ここから本文を書いていくという表記
私のホームページへようこそ! なんでも結構です(^^;
</body> 本文(体になる部分)終了の表記
</html> html終了の表記

赤い文字だけをhtmlエディタやメモ帳などに書いて(ファイル名はindex.htmlで)保存して
IE(インターネットエクスプローラ)で開いてみましょう。

ちゃんと書けている場合は「私のホームページへようこそ!」だけが表示されます(^^
※メモ帳に書いている場合は拡張子txtになっているのを、htmlに変更
※赤色文字の日本語部分(私のお部屋)を変更しておくと分かりやすいです

</html>などに付いてる「/」については、
文章を書く時に「、」や「。」が必要な様に終わる場合は「/」が必要です。
文章に「。」や「、」が無い場合読める事は読めますが読みにくいですよね?(^^;

ホームページの場合タグ終わりの「/」の役割は終わりの意味を指していて、
タグ全部ではありませんがほとんどを「/」で閉じます。

ホームページ作成ってどうやるの?

「ホームページ作成って難しそう…」と思われがちですが、
実はホームページってメモ帳(txtファイル)から作成できるのって知っています?

なので本当はホームページ作成ソフトとかって必要ないんです。
ですが、メモ帳などで作る場合は全部手書きにしないといけませんし、
htmlファイルを編集する場合なども一旦、拡張子をhtml→txt→編集→html→確認…
という作業をしなくてはいけないでメモ帳で作るのはかなり面倒です(^^;

面倒を楽にしてくれるhtmlエディタ

その手順を楽にしてくれるのがhtmlエディタ(ホームページ作成ソフト)です。
htmlを編集するだけではなく、タグのサポートやチェック、プレビュー(確認)など、
色々な便利な機能が付いているホームページ作成ソフトと思ってもらって良いと思います。

有名所がホームページビルダーや、秀丸エディタなどです…両方ともシェアウェア(有料)ですが。。
シェアウェアがあればもちろんフリーウェアも存在します。
フリーのホームページ作成ソフトは こちらから探してみてください。

wordなんか持ってる方でしたwordでも大丈夫だと思います。
基本的には手書きホームページ作成法なので(^^;

ホーム > 無料ホームページ作成講座

検索
当サイト使用のサーバー
サイト情報
メタ情報

▲ページTOPへ