コンピュータ演習(再) 第12回コンピュータ演習(再) 第13回Webページの作成(2)前回の復習:HTMLファイルの作成(1)
HTMLファイルの作成(2)前回は、HTML(Hyper Text Markup Language)でWebページを作成しました。 タグを使って、構造や意味を意識しながら、文書(Web)ページを作成しました。 今回は、構造以外に、Webページとして必要な情報や、配色などを設定していきます。 今回は、構造以外に、Webページとして必要な情報や、デザインや配色などを設定していきます。Webページに必要な情報HTMLのバージョンの指定HTMLにはいくつかのバージョンがあります。 現在は「4.01」とバージョンで、バージョンによって書き方が多少異なります。 HTMLファイルの最初に次の行を入れて、このファイルがHTMLファイルであることとバージョンを指定します。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
文字コードの指定コンピュータは世界中の国々で使われていますが、その国、その言語圏で使用される言葉を処理できるように、文字コードという文字の一覧表をコンピュータ内部に持っています。日本語の文字コードには、おもにシフトJIS、JIS、EUCの3つがあり、Windowsで利用されているのは、シフトJISです。*1 「head」タグの中で、「meta」タグを使ってHTMLファイルの文字コードを指定します。 もし、ブラウザの使用できる文字コードと、Webページ(HTML)ファイルで使用されている文字コードが合わない場合、「文字化け」という文字が正しく表示されない現象が起こります。<meta http-equiv="content-type" content="text/html; charset=shift_jis">
しかし、HTMLファイルがどの文字コードを使用しているか書いておけば、
ブラウザが解釈して、正しく表示されるようになるます。
それには、<head>タグの中で、<meta>タグを使ってHTMLファイルの文字コードを指定します。
<head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> 署名の更新
<address> 制作年月日: 2003-12-17; 更新年月日: 2004-01-07<br> <a href="mailto:○○">○○^</a> </address> スタイルシートスタイルシートとはワープロソフトのWordには「スタイル」という機能があり、 フォントの種類や色などの書式のまとまりをスタイル(見出し、箇条書き等)として登録することで、 文書全体のデザインを統一できるのと同時に、デザインの変更をしやくすることができます。 HTMLでも、「スタイルシート」という手段があります。 文書の論理的な構造と、見栄えなどの表現の決まりごとを、分けて定義します。<h1>や<p>などのタグが文書の構造を表現するのに対して、 スタイルシートでは、「<h1>タグの文字色は青」「<p>タグの文字の大きさは12pt」 のように表現のルールを決めます。 HTMLでのスタイルシートは、CSS(Cascading Style Sheet)といいます。 CSSを使うことで、タグを使った文書構造とデザインを分けて管理することができます。CSSの書き方CSSの書き方にはいくつか方法があります。 CSSを利用するときには、<head>タグの中に次の行を書いておきます。<head> <meta http-equiv="Content-Style-Type" content="text/css">CSSでは、タグの「属性」に「値」を指定します。 たとえば、<h1>タグの文字色を赤に設定する場合を考えましょう。 (授業では、2.の方法を使います)
色の指定HTMLでは、文字や線の色などを指定できます。 指定するには、色の名前や色の値を使います。
色の変更文字や線に色をつけたり、背景色を設定するには、次のようにします。
文字の装飾文字の大きさや配置を設定するには、次のようにします。
枠の装飾見出しや段落には、通常、見えない枠があります。 枠のスタイルを設定することで、枠を描くことができます。 描いた枠には、太さや色を設定することができます。
参考リンク
|