(3) 本文を書く実際にページを開いたときに表示される本文を書いてみましょうからの間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存するここで一度ページを保存してみましょうテキストエ

Size: px

Start display at page:

Download "(3) 本文を書く実際にページを開いたときに表示される本文を書いてみましょうからの間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存するここで一度ページを保存してみましょうテキストエ"

えいじろうむらかわ
5 years ago
Views:

1 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 >

2 (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) で上記で作成したページを呼び出してください

3 (7) 文章を追加する本文の文章を追加しましょうパソコンサークルメンバー : 武ベトナムカンボジアの旅 ( 抜粋編 ) の旅行記ですこのままでは文章が横一列の羅列になります (8) 改行をする改行するには改行する文のあとに <br> と記述します <br> パソコンサークルメンバー : ベトナムカンボジアの旅 ( 抜粋編 )<br> 武 <br> (9) 文字を中央揃えにする <center > と </center > で囲むと中央揃えになります <center > </center ><br> <center > パソコンサークルメンバー : 武 </center ><br> <center > ベトナムカンボジアの旅 ( 抜粋編 )</center ><br> パソコンサークルメンバー : 武ベトナムカンボジアの旅 ( 抜粋編 ) の旅行記です

4 (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 > パソコンサークルメンバー : 武ベトナムカンボジアの旅 ( 抜粋編 ) の旅行記です

5 (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 > パソコンサークルメンバー : 武ベトナムカンボジアの旅 ( 抜粋編 ) の旅行記です

6 < ホームページ作成の基礎 > 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= > ここ </a>

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63> 情報処理 C (P.1) 情報処理 C (2011 年度 ) ホームページの作成 http://open.shonan.bunkyo.ac.jp/~ohtan/ テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のことテキストエディタの起動 (TeraPad の場合