ホーム‎ > ‎HTML入門‎ > ‎

HTML入門 その2

6.基本的なコマンド(続)


リンクの設定
文章や画像に link を設定する tagは,<a href="♦">〜</a>です.
♦には,link先の file 名または URLを入力します. 
 例えば,予め「sample.html」という名前の HTML 文章を同 folder に作成してあるとします.
この時に,
詳しくは,<a href="sample.html">ここ</a>を見てください.
 
と入力すると,「sample.html」への link を貼ることができます.
これは相対 path による link の貼り方ですが,他に絶対 path により link をはる方法があります.
例えば,
<a href="https://sites.google.com/site/keisansugaku/">計算数学実習資料集</a>は東京大学理学部数学科計算数学の授業資料が置いてあります.
 と入力すると,計算数学実習資料集への link を貼ることができます.

画像に link を貼る方法があるので各自調べてみてください.


  背景の設定
まず背景色の設定方法について説明します.
<body>tagを次のように変更することで背景色を設定できます;<body bgcolor="♦">〜< /body>.
但し,♦にはRGBの値を指定するか,直接色名を入力します. 

背景に画像を使用したい場合は,<body bgcolor="♦">〜< /body>.と入力します. 
♦には画像 file 名を書きます.

7.課題②

課題①で作成した自己紹介 page 以外にも,html file を作成し,
Link を結ぶことで個人のhome pageを作成しましょう. 


8.スタイルシート


HTMLは,Webページの構造を記述するものでした.
例えば.見出し,段落,など文章がどのような要素で構成されているのかを指定することができます.

Webページのレイアウトを指定するための言語は他に存在します.
それが,これから紹介する「スタイルシート」です.スタイルシート言語の一つにCSSがあります.

スタイルシートとHTMLを分離することが推奨されています.

外部スタイルシート

スタイルシートの設定の仕方は大きく分けて3つあります.
  1. 外部スタイルシートを読み込む
  2. HTML文章にまとめて設定する
  3. タグに直接スタイルを設定する
1.では,スタイルシートを HTML 文章から独立されることで,役割分担が明確化されます.
サイト全体の雰囲気を統一させたいときに役に立ちます.
ただし,外部スタイルによる設定は他の2つの設定よりも優先順位が低いです(異なるデザイン設定が指定された時は
style属性が優先されます).
スタイルシートの code の解説はせず,使用例を2つ紹介します.

一つ目は,「HTML文章にまとめて設定する」方法についてです.早速例を見てみましょう.

<html>
<head>
<title>Example</title>
<style type="text/css">
h1 {
color:blue;
font-style:italic
}
h2{
color:red;
font-style:bold
}
h3{
color:White;
background-color:green
}
</style>
<head>
<body>
<h1>HTML</h1>
<h2>スタイルシート</h2>
<h3>JavaScript</h3>
<br>
</body>
</html>  

<head>〜<\head>内に,スタイルシートの source code が記述してあります.
ここで記述された code は,同 HTML 文章内全体に及びます.
上の例では,h1書式は,「font の色=青,font=italic」,h2書式は,「fontの色=赤,font=bold」,そして
h3書式は,「fontの色=白,背景色=緑」に設定してあります.



二つ目は,「外部スタイルシートを読み込む」方法です.
まず,text editor で次の source code を入力して,file名を「design.css」とします.
h1 {
  color:white;
  font-style:italic;
    background-color:blue
 }

p { 
color:red;
font:bold;
size:15}
次に,text editor で次の source code を入力し,file名を「example.html」として,「design.css」と同じ folder に
保存しましょう.
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="design.css" type="text/css">
</head>
<body>
<h1>計算数学実習資料</h1>
<h2>HTML</h2>
<p>HTMLとは,…</p>
<h2>スタイルシート</h2>
<p>スタイルシートとは,…</p>
<h3>JavaScript</h3>
<p>JavaScriptとは,…</p>
<br>
</body>
</html>  
すると,次のように browser 上で表示されます.

2つ目の方法では,HTML文章内で,外部のスタイルシートを読み込んでいます.
Web page 内にいくつもの page があり,各 page の design を統一するにはこの方法が便利です.
また,スタイルシートを変更すれば,それを読み込んでいる HTML文章すべての design を変更することができるのも
長所です.


9.JaveScript

ここまで紹介してきた HTML やスタイルシートは,ページの文章構造と design を記述するためのもの,すなわち
web 上にどのように表示させるかを指示するための言語です.
Web page に動的な要素を加えるための言語が JavaScript です.
ここでは,JavaScriptの解説はしないので,他の資料を参考にしてください.


10.課題 ③

課題②で作成した個人 home page の design を外部スタイルシートを用いて記述しましょう. 更に,JavaScript を用いた code を一つ以上取り入れてください.
Comments