2017年度講義ノート

栗林ゆき絵

(5)スペイン語HPを書く--表紙ページ作成(HTML入門)--

[1]WEBページの表示のしくみ

ソースファイル(HTMLファイル拡張子.htmまたは.html ＝HTMLタグで記述されたテキストファイル)

ソースファイルは(表示とは異なる) HTML言語で記述。
★課題のサンプル版は講義ノートのトップページにリンクあり
☆指定可能な色名はコピーを別途配布

HPとアップロード(立教大学のサーバーにHPをアップロードします)
FTP(ファイル転送)⇒WEBサーバ上の指定された位置(個人に割り当てられたディスク領域)にファイルを転送する。FTPツール使用。

◎基本タグ
タグは半角。本ページ中では表示のため不等号は全角にしていますのでコピーする際は注意!!　文字列は"～"で囲む。

(1)HTML のソースファイルの基本構成＜HTML＞
＜HEAD＞
--ドキュメントについての情報--
＜TITLE＞タイトル文字列＜/TITLE＞
＜META http-equiv="Content-Type" content="text/html; charset=文字コード名" ＞
＜/HEAD＞
＜BODY＞
--ドキュメント本文--
＜/BODY＞
＜/HTML＞

(2)BODY内で使用する基本タグ
＜B＞あいうえお＜/B> あいうえお太字(Bold)
＜I＞あいうえお＜/I> あいうえお斜体字(Italic)
＜CENTER＞あいうえお＜/CENTER> センタリング
＜FONT SIZE="5"＞あいうえお＜/FONT> 文字の大きさ(1が最小)
＜FONT COLOR="色(数値または名前)"＞あいうえお＜文字の色
＜IMG SRC="画像ファイル名"＞画像の貼り付け
＜BR＞改行
＜HR＞横線
＜HR WIDTH="◇%"＞画面に対する横線の割合
＜P＞～＜/P＞段落
＜P ALIGN="right"＞～＜/P＞右寄せ(left 左、center 中央)

＜A HREF = "リンク先ファイル名またはURL"＞リンク文字列＜/A＞

◎HP作成時の作業手順★初心者は共通課題を全員で実習★上記タグ参照★~~プリント配布~~
0.まず、htmlファイルを入れるフォルダを作成(「HP」フォルダを「informatica」の下に)。

1.ソースファイル(.htm, .html)をテキストエディタ(メモ帳など)で作成、保存。

* メモ帳保存時に「すべてのファイル」を選択してください。

* まず、基本タグ(HTML, HEAD, BODY,の開始と終了タグ)を書き、中を埋めていくとよい。
* 特殊文字を使用する場合は、HEADタグ内に、文字コードを指定するとよい。(下記◎課題欄参照)

2.ブラウザ(Internet Explorer)などで開く。(ファイル→開く→参照)

3.プリントを参考に、表紙ページindex.htmlの基本のレイアウトを作っていきます。

4.その後、サンプル版のソースおよび下記「◎課題」欄を参考に、文字のサイズや色、背景の色等を変えてみましょう。

◎課題(表紙ページ index.html)には以下の項目を必ず入れてください。ページの内容は自由。

[HTML作成初心者]
HP作成ツールを使用せず、必ずタグを手書きしてください!!
＊タグは全て(不等号記号も含めて)半角です!! 本ページ中では表示のため不等号は全角にしていますのでコピーする際は注意!!

(1) ページヘッダに文字コード指定すること。
ヘッダタグ＜HEAD＞～＜/HEAD＞を追加して下さい。
*現状ではほぼ自動判別されますが文字コードを意識してもらうため課題では明示的に記入することとします。(コピペ可。全て半角で。)
＜meta http-equiv="Content-Type" content="text/html; charset=utf-8" ＞(日本語のみの場合は Shijt_JIS)

(2)文字の色指定　＜FONT COLOR="色名もしくは数値(16進数)"＞対象文字列＜/FONT＞

(3)背景色指定 ＜BODY BGCOLOR="色名もしくは数値(16進数)"＞

または背景ファイル指定
＜BODY BACKGROUND="ファイル名"＞
*ファイル名の全角半角、大文字小文字に注意すること。出来ればファイル名はすべて半角小文字が良い。

(4)画像を貼りつける
＜IMG SRC="画像ファイル名"＞
フリーの素材サイトからダウンロードするほか、携帯で撮った写真を利用してもよい。著作権に注意すること!!

(5) 外部サイトへのリンクを張る
外部のサイト(例：立教大学、Yahoo Japan、Yahoo Españaなど)へのリンクをはること。(個人やサークルのブログやHP等でも可)
＜A HREF="http://es.yahoo.com/"＞

(6)ページ間のリンクを張る
表紙ページからスペイン語ページ(下記で作成)へ、スペイン語ページから表紙ページへの、リンクをはること。
＜A HREF="ファイル名"＞

[HTML作成経験者]は下記応用編を自習して、見た目の洒落たページを作ってみましょう。随時質問してください。

[応用編(その1)....テーブルの使用]
(1)テーブルタグを利用して、レイアウトを整える。
(2)テーブルのセルのサイズや背景色、文字色等を変えて、レイアウトを整える。

[応用編(その2)....Javascriptとフォームの使用]
(3)本HP右上のような「最終更新日」の自動表示を入れる。(Javascript....HTML内に記述するプログラミング言語)

(4)表紙ページへ戻るリンクをボタンにする。

テーブル、Javascriptを利用したサンプルページ

[スペイン語情報処理HOME]