Category Archives: HTML

HTML

リンクの作成

Published by:

属性が関係するタグ要素の一つにa要素がある。

aはanchor（アンカー：錨［いかり］）の略。繋ぎとめて固定するなどの意味があります。

何をつなぎとめるかと言うと，アドレスです。

インターネットの世界ではすべてのファイルはアドレスで表わせます。

これをURLと言います。そのアドレス（URL）で指定したファイルとの架け橋をさせるタグです。

たとえば今，デスクトップ上にtest.htmlが存在するとしましょう。

次の内容でtest2.htmlを作成します。

TeraPadを開いて以下の通り入力します。

<html>
<head><title>リンクのテスト</title></head>
<body>
リンクのテストを行ないます<br>
test.htmlを開くには<a href=”test.html”>ここ</a>をクリック<br>
うまく表示できましたか？<br>
</body>
</html>

そして，名前をtest2.htmlにして保存です。

では，test2.htmlをブラウザで開いてみましょう。

link

問題はここからです。上のブラウザ画面の表示の「ここ」の部分をクリックしてみてください。

どうですか？test.htmlが開かれましたね？

このようにa要素はクリックすると開かれるアドレス（URL）への架け橋となるリンクを指定します。

hrefという属性名がどのアドレスのどんなファイルを開くかを指定する部分です。

文字だけでなく先回出てきたimg要素を使って画像をクリックしたらリンク先を開くという事も可能です。

では，これは宿題にしましょう。

ある画像をクリックしたらtest.htmlが開くようなWebサイトを作成してみてください。

 

今日のまとめ：

 

リンクはa要素で示す。

<a href=”アドレス”>XXX</a>

で，XXXをクリックするとアドレスのファイルが開く。

 

HTML

要素と属性

Published by:

既に説明した通りタグは要素で構成されます。

しかし，要素は属性を持ちます。

と説明されても何の事かさっぱり分からないかもしれません。

これまで要出てきたタグでは　見出し　とか　段落　という「何か」という事しか表現できませんでした。

言い方は難しですが，「どんな見出し」とか「どんな段落」というのが表現できません。

たとえば，「赤い文字」の「見出し」とか，文字サイズが15の「段落」とかです。

その場合には属性と呼ばれるものを用います。

属性は以下のように表現します。

<タグ 属性名=属性値>XXXXX</タグ>

 

たとえばimg要素（イメージ要素）を取り上げましょう。

これは画像などを表示させる際に用いる要素です。「どんな」画像かという属性の一つは画像の場所です。

scr属性（ソース属性）が画像の場所を指定する属性名ですので以下のように書きます。

<img src=”aa.jpg” />

この行を含むtest.htmlと同じところ（たとえばデスクトップ）にaa.jpgという画像を置いておくと，ブラウザで開いた時にその画像が表示されます。適当な画像ファイルで試すといいです。

 

お気づきの通り，このimg要素も終了タグが不要なタグとなっています。

srcという属性名=イメージ（画像）ファイルの場所（属性値）となります。

 

今日のまとめ：

 

属性の示し方

<タグ 属性名=属性値>内容</タグ>

HTML

pタグについて

Published by:

先回，brという新しいタグを紹介しました。

他にも様々なタグがあります。たとえばpタグ。これは段落を意味します。

さっそくテスト用のhtmlファイルを作成してみましょう。

 

<html>

<head><title>ｐタグの表示</title></head>

<body>

<p>ここから

ここまでが

一つの段落です

</p>

<p>

ここからは

別の段落です

</p>

</body>

</html>

これをブラウザで開くと以下のようになるはずです。

—————————————————————–

ここから ここまでが 一つの段落です

ここからは 別の段落です

—————————————————————–

改行や空白は無視されて上記のように表示されるでしょう。

「何だ，改行と同じじゃないか」と思われるかもしれません。

中にはそう説明しているサイトがありますが，それは誤りです。

<p>から</p>までの間を一つのまとまりとしてとらえることができる点でbr要素とは異なります。

p要素の中で改行したい場合はbr要素を挿入します。

<p>ここから<br>

ここまでが<br>

一つの段落です<br>

</p>

<p>

ここからは<br>

別の段落です<br>

</p>

としてブラウザで開くと，htmlのテキスト文書で改行した部分で改行されて表示されるでしょう。

 

pはパラグラフ（段落）の頭文字です。

ちなみにbrはブレイク（break：改行）の先頭2文字です。

 

今日のまとめ

p要素は段落を意味する

 

HTML

HTMLでの改行

Published by:

基本となるWebサイトの作成に成功しました。

これで文字だけであれば自由自在に作成できるかというとそう甘くはない。

たとえば，以下のような表示にしたいとしよう。

 

 

—————————————————-ここから

ようこそWebの世界へ！

テキストエディターだけで誰でもWebサイトを制作できます。

初めての方も基礎から学べますよ。

—————————————————-ここまで

 

TeraPadを使ってHTMLコードを打ち込んでみましょう。

headタグのところは改行が無意味ですので敢えて一行にまとめています。

<html>

<head><title>見出し</title></head>

<body>

ようこそWebの世界へ！

テキストエディターだけで誰でもWebサイトを制作できます。

初めての方も基礎から学べますよ。

</body>

</html>

 

これをtest2.htmlとして保存してみます。ブラウザで開くと，

test2

test2

このように改行されません。HTMLでは改行は無意味です。改行もスペースもすべて無視されてしまいます。

改行するにはbrタグを使います。以下のようにしてみてください。

<html>

<head><title>見出し</title></head>

<body>

ようこそWebの世界へ！<br>

テキストエディターだけで誰でもWebサイトを制作できます。<br />

初めての方も基礎から学べますよ。<br>

</body>

</html>

保存後にブラウザで開いてみてください。イメージ通りになっていますね？

でも，ここでタグがおかしい事に気づいたのではないでしょうか。

タグは<タグ>XXXX</タグ>のスタイルだったはずです。しかも見たことない<タグ />なんてあります。

そう，このbrタグは特殊なタグで間に挟んだ対象が何かを示す荷札ではなく，その位置で改行になります。

そのため，<br>だけで</br>は不要となっています。

逆に</br>を入れるとブラウザにもよりますが不本意ながらそこでも改行されてしまいます。

また，HTMLの書き方のルールの一つに</タグ>を省略する場合は<タグ />と書けるというのがあります。

なので<br>も<br/>も同じ事を意味するんですね。

 

今日のまとめ

改行は<br>または<br/>

 

 

 

HTML

HTMLの基本構造について

Published by:

さて，先回例として示したのは以下のソースコードでした。

<html>

<head>

<title>見出し</title>

</head>

<body>

こんにちは！

</body>

</html>

タグがいくつか登場しています。

Webで表示されるHTMLファイルは基本的に要素の寄せ集めで構成されます。

タグはその要素が何なのかの荷札や付箋の役割を果たしましたね。

html要素：

<html>から</html>までがWebの標準的な言語であるhtmlという言語形式で記述しているという事を明示する荷札（タグ）という事になります。

そして，HTMLファイルは大きく分けると頭（head）と体（body）で構成されます。

なので最も基本的なHTMLファイルは，

<html>

<head>

</head>

<body>

</body>

</html>

となります。改行は必要ありませんが，見やすくするためにタグ毎に改行させています。

 

head要素：

<head>から</head>まではhead部分になります。

headタグの間に色々と記述が可能なのですが，代表的なものがtitle要素でブラウザの見出しに表示する内容です。

<title>から</title>で挟まれた部分（title要素の内容）をブラウザの見出しにしますよという事を示しています。

test.htmlをブラウザで表示させるとwindowのバーに「見出し」と表示されていたのにお気づきでしたか？

 

body要素：

<body>から</body>までがブラウザに実際に表示させたい内容になります。

test.htmlでは「こんにちは！」と表示されたはずです。

 

どうですか。意外に簡単だと感じるのではないでしょうか。

<body>から</body>の間に表示させたいものを記載する事で希望のWebサイトを構築できます。

 

試しに何でもいいのでhtmlファイルを作成してブラウザで表示させてみて下さい。

きっと，思った通りの表示にならない事でしょう。

理由は次回に。

 

今日のまとめ

htmlファイルの基本構造

<html>

<head>

</head>

<body>

</body>

</html>

HTML

htmlファイルを作成してみよう！

Published by:

タグについて一つ補足しておくと，タグは入れ子にする事ができる。

つまり，

<taga><tagb>hoge</tagb></taga>

みたいな事が可能です。上記ではtagbはtagaの中に完全に含まれています。一方，

<taga><tagb>hoge</taga></tagb>

これは誤りです。マトリョーシカのように必ず外側のタグの中に内側のタグが完全に含まれる形にする事が必要です。では，それを踏まえてTeraPadを起動させ，以下のように打ち込んでください。

 

<html>

<head>

<title>見出し</title>

</head>

<body>

こんにちは！

</body>

</html>

html

そしてTeraPadのファイルメニューから名前を付けて保存を選択します。その際，今回は保存する場所としてデスクトップを選択し，ファイル名をtest.html（testの後ろにピリオド「.」が必要です）とし「保存」ボタンを押します。

save

TeraPadは開いたままでも閉じても構いません。デスクトップ上にtest.htmlというファイルができている事を確認してください。そして，そのファイルをダブルクリックしてみて下さい。既定のブラウザで開かれるはずです。

（下はInternet Explorerの場合）

IE

 

さあ，これで既にWebサイトを1ページ作成できましたね。

次回は，記入したタグの意味について簡単に説明したいと思います。

HTML

タグについて

Published by:

さっそくTeraPadでWebサイトを作成していきましょう。

その前に，まずはタグについての説明です。

 

TAG（タグ）とは「荷札」や「付箋」を意味する英単語。

Webサイトは基本的にはHTMLという形式で記載していくのですが，ある文字が何を意味するのかを示す「荷札」や「付箋」のような働きをするのがタグです。

たとえば，

山田太郎　男性　２９歳　１７５ｃｍ

佐藤和子　女性　２３歳　１６０ｃｍ

 

という情報がある場合，「荷札」や「付箋」を付けるとしたら，

氏名：山田太郎　性別：男性　年齢：２９歳　身長：１７５ｃｍ

氏名：佐藤和子　性別：女性　年齢：２３歳　身長：１６０ｃｍ

という感じで上記の「氏名：」「性別：」「年齢：」「身長：」が「荷札」や「付箋」の働きをしている。

 

Webサイトを表示するInternetExplorerなどのWebブラウザは「氏名：」が「荷札」だと認識する必要があります。

でも，ある人が「氏名：」を「荷札」として用い，別の人が「（名前）」を「荷札」として用いたいなどと人によって「荷札」にするものが異なるとWebブラウザ側で自動認識ができません。

そこで，Webブラウザではタグは以下の書式とするよう定められています。

<タグ名>内容</タグ名>

もう，この書き方は覚えるしかありません。

そしてタグ名は世界共通で定義されているものしか使えません。タグ名の一例を挙げます。

<title>見出し</title>

タグ名=titleこれはWebブラウザの最上部のバーに表示されるタイトルを「見出し」とする事を示すタグです。

こんな風に

<タグ名>内容</タグ名>

と最初の<XXX>内と最後の</XXX>のXXXで示されるタグは常に同じになります。

※　最後のタグの前には/（スラッシュ）が入る事をお忘れなく。

 

内容が何かを示すXXXが「荷札」の役割をするのがタグという事になります。

 

では，次回は実際にWebサイトを作成してブラウザで表示する事にしましょう。

 

今日のまとめ

タグの書き方：<タグ名>内容</タグ名>