1. はじめの準備 (1) フォルダの作成 ホームページ作成の基礎 これから作るホームページのデータを ホームページ用 として保存 ( 保管 ) するフォルダを作成します ホームページで使う作成したファイル画像 写真 音楽などファイルは すべて同じフォルダに保存します デスクトップやマイドキュメントの中 ( 任意 ) で 右クリック 新規作成 (N) フォルダ (F) で新しいフォルダができます ( 下図 ) フォルダの名前はわかりや すい名前にして下さい ( 例 MyHomePag e) このようなアイコンがフォルダです (2) テキストエディタ ( メモ帳 ) の用意 HTML で作成する場合 テキストエディタ ( 文字を編集するソフト ) が必要になり ます Window sの場合メモ帳やワードパットが標準付属されています Window sの場合 2. ページの作成 プログラム アクセサリ メモ帳またはワードパット (1) まず HTML ファイルとしての最低限な記述です <html > <タグ名 >~</ タグ名 >( 開始タグ~ 終了タグ ) という <head > 形で記述します <title > </title > <body>~</body> で囲まれた文字や画像が実際にホー </head > ムページを開いた時に見える部分です </html > (2) ページのタイトルを書く ページにタイトルをつけます <title > から </title > の間がタイトルを書く場所で す これはブラウザの左上に表示されるページタイトルなので ページには表示 されません <html > <head > <title > 武のホームページ </title > </head > </html >
(3) 本文を書く 実際にページを開いたときに表示される本文を書いてみましょう から の間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存する ここで一度ページを保存してみましょう テキストエディタの左上のタブから ファイル (F) 名前を付けて保存 (A) を選択 名前を付けて保存 と言う画面がで たら ファイル名 (N) にファイル名を書いてください 今回はトップページなので index.ht m または index.htm l として下さい 同画面の 保存する場所(I) は フォルダの作成 で作ったホームページ専用フォルダを選択します 最後に 保存 (S) をクリックすると保存完了です (5) ブラウザで表示してみる ホームページ専用フォルダを開き その中に保存された index.ht m または index.htm l をダブルクリックで開いてみて下さい ブラウザが起動し 上記 で作成したページが表示されるはずです 下図参照 これで初めてのホームページの出来あがりになります (6) 編集する ( 更新 ) 一度保存したファイルを再編集してみましょう もう一度テキストエディタを開きます 開き方にはいくつかあり 上記のブラウザ左上にある表示 (V) ソース (C) で そのページソースがテキストエディタ表示されます 他の方法としては スタート プログラム (P) アクセサリでメモ帳を開いて下さい メモ帳が起動すれば メモ帳の左上のタブから 開く (O) で上記で作成したページを呼び出してください
(7) 文章を追加する 本文の文章を追加しましょう パソコンサークルメンバー : 武 ベトナム カンボジアの旅 ( 抜粋編 ) の旅行記です このままでは 文章が横一列の羅列になります (8) 改行をする 改行するには 改行する文のあとに <br> と記述します <br> パソコンサークルメンバー : ベトナム カンボジアの旅 ( 抜粋編 )<br> 武 <br> (9) 文字を中央揃えにする <center > と </center > で囲むと中央揃えになります <center > </center ><br> <center > パソコンサークルメンバー : 武 </center ><br> <center > ベトナム カンボジアの旅 ( 抜粋編 )</center ><br> パソコンサークルメンバー : 武ベトナム カンボジアの旅 ( 抜粋編 ) の旅行記です
(10) 文字の大きさを変える <font = 大きさを size1~6で指定 > と </font > で囲むと文字の大きさが変わります size=6 > </font ></center><br > <center > パソコンサークルメンバー : 武 </center><br > パソコンサークルメンバー : 武ベトナム カンボジアの旅 ( 抜粋編 ) の旅行記です (11) 文字を太字にする <b> と </b> で囲まれた文字が太字になります size=6 ><b> </b></font ></center><br > <center > パソコンサークルメンバー : 武 </center><br > パソコンサークルメンバー : 武ベトナム カンボジアの旅 ( 抜粋編 ) の旅行記です
(12) 文字の色を変える <font = color 色の名前 > と </font > で囲まれた文字の色が変わります size=6 color=re d><b> </b></font ></center><br > <center > パソコンサークルメンバー : 武 </center><br > の旅 行記です <br> パソコンサークルメンバー : 武ベトナム カンボジアの旅 ( 抜粋編 ) の旅行記です (13) 背景の色を変える タグを <bodybgcolor= 色の名前 > と書き換えると背景色が変わります <bod y bgcolor=skyblu e> size=6><b > </b></font ></center><br > <center > パソコンサークルメンバー : 武 </center><br > パソコンサークルメンバー : 武ベトナム カンボジアの旅 ( 抜粋編 ) の旅行記です
< ホームページ作成の基礎 > HTML 基本タグ一覧 項目何をするかタグ使用例 ページ全体 文字の装飾 画像の表示 最低限必要な記述 <html> </html> <head> </head> <title> </title> <body> </body> ページの背景色を設定 <body bgcolor= > ページの背景画像を設定 <body background= > <html> <head> <title> タイトルを書く </title> <body> 本文を書く </body> </html> <body bgcolor= white > または <body bgcolor= #FFFFFF > <body background= sora16.jpg > 文字の大きさを指定 <font size= > <font size= 3 > 文字 </font> </font> 文字の色を指定 <font color= > <font size= 3 color= red > 文 </font> </font> 文字を太字に指定 <b> </b> <b> 文字 </b> 文字を斜体に指定 <I> </I> <I> 文字 </I> 改行する <br> ( 終了タグ不要 ) ~ 文章 ~ <br> 中央揃えに指定 <center> </center> <center> 文章 </center> 左寄せに指定 右寄せに指定 <div align=left> </div> <div align=right> </div> <div align=left> 文章 </div> <div align=right>> 文章 </div> ホームページで使うことが出来る画像の種類は gif 形式か jpeg (jpg) です gif は小さいマーク ロゴ ミニバナー等 jpeg は主にスキャナやデジカメの写真に適しています jpg 画像を表示する <img src=".jpg"> ( 終了タグ不要 ) 画像のサイズを指定 <img src=".jpg" width=" " <img src="kinen.jpg"> height=" "> 画像のまわりに文字を回 <img src=" り込ませる align= > 回り込みの解除 <br clear= > <br clear= left > 菱の実会パソコンサークル <img src="kinen.jpg" width="200" height="120"> <img src=" align= left > ( 画像を左に 文章を右に配置 ) 画像と文字の間隔を指定 <img src hspace vspace> <img src= hspace= 10 vspace= 4 > 表を作る表を作成する <table> <table> <tr> <td> <tr> 一行目 <td> 一列目 </td></tr></table> </td></tr></table> 表のサイズを指定 <table width= > <table width= 80% > </table> ( ヒ クセル値又は %) ( ヒ クセル値又は % で指定 ) 表に枠をつける <table border= > <table border= 1 > </table> ( 太さをヒ クセル値で ) ( 太さをヒ クセル値で指定 ) 表の背景色を指定 <table <table bgcolor= yellow > </table> bgcolor= > ( 色名またはカラーコート で指定 ) セルとセルの間隔を指定 <table cellspacing= cellpadding= > Cellspacing( セルの間隔をヒ クセル値で ) cellpadding( セル内の余白 ) セル内の表示位置 <td align= > <td align= left > (left center,right を指定 ) リンクを貼る 指定した URL にシ ャンフ <a href= > </a> <a href= http://www.co.jp > ここ </a>