ホームページビルダー基礎講座1

タグの特性をみてみる。

編集モードは、基本的に「スタンダード」を選択する。

「標準モード」で新規作成する。

「ページ編集」画面にて基本的に編集が可能。

「HTMLソース」画面にてページのソースをみることができ、またhtmlさえ理解すれば、ここからも編集が可能である。またhtmlを理解する上でとても重要な画面なので時折眺めてみるのもいい。

「プレビュー画面」は、実際にインターネット上で見ることができる画面。若干、違いは出てくることも多い。この画面では編集はできない。

ちょっと復習。

<html>
<head></head>
<body></body>
</html>

htmlは、このように、タグとタグで挟むような形になる。

※基本的にHTML4.01においては、終了タグを省略することできるタグ(<p>や<li>など)もあるが、基本的には、開始タグと終了タグのセットで使う。ただ、<br>や<hr>などは、もともと単独で使うタグもある。

文字の大きさを変えてみる。

大きく。

小さく。

ソースを見てみる。

<font size="+3">文字を打ってみる。</font>

+4から-2までで文字を大きさを変化させることができる。

文字に色をつけてみる。

<font size="+3" color="#000099">文字を打ってみる。</font>

文字を太くしてみる。

<b><font size="+3" color="#000099">文字を打ってみる。</font></b>

文字を斜体にしてみる。

<i><font size="+3" color="#000099">文字を打ってみる。</font></i>

文字にアンダーラインをつけてみる。

<u><font size="+3" color="#000099">文字を打ってみる。</font></u>

ここで理解できるのは、このように開始タグと終了タグで挟み込むこと。

HTMLとは、テキスト文や画像などの要素をタグで挟み込むことです。

装飾をつかさどるタグは、将来的には、スタイルシートを使ったほうがよい。

HTMLの装飾的な部分はCSSスタイルシートに任せるようにしないといけない。

現在使っているホームページビルダーの初期設定、HTMLのバージョンHTML4.01から、将来的には、XHTML1.0への移行を考えると、HTMLとCSSの分離は必須となる。

ちょっとスタイルシートマネージャーをいじってみよう！

スタイルシートを覚えてしまえば、結構楽しみものである。

<h1>～<h6>見出しタグ

ホームページを作る上で重要なタグ。

見出しがなければ、ホームページを構造的に理解ができない。

本の目次のようなものと考えてもらえればOK!

<p>段落タグ

本文を書いていく時に、基本文は、段落に分けて書いていくので<p>タグは、必要。

<p>ここに文章を書いていくわけですが、一つの段落として書いていけば、改行タグなどは
不要になる。</p>

<ul><li>リストタグ

他にも<ol><li>、<dl><dt><dd>などもある。

<a>アンカータグ

ハイパーリンクのタグ。

<a href="リンク先アドレス" >テキストまたは画像など</a>

このタグは、属性などもあって複雑そうだが、ホームページビルダーの編集画面から操作すればそう覚える必要もない。ただ、重要なタグなので、しっかり理解しておいてほしい。

<img>イメージタグ

画像（.jpg、.gif、.png)などの画像をページに張り付けるタグ。

<img src="画像アドレス" width="00" height="00" alt="画像説明文">

このタグも、属性などもあって複雑そうだが、ホームページビルダーの編集画面から操作すればそう覚える必要もない。ただ、重要なタグなので、しっかり理解しておいてほしい。なおこのタグには終了タグがない。

<div>のブロック要素

基本的には、この<div>タグを利用して、レイアウトを決めていきたいのだが、初級講座としては、最初は、<table>タグを覚えてもらってのレイアウトとなる。将来的には、<div>タグにてスタイルシートを利用したレイアウトを奨励する。

もちろんこれだけではないが、基本構造となるタグはこれを理解してもらいたい。

一度に覚えようとしなくても、使うときに随時、他のタグを覚えていけばよい。

逆に、<font><b><i><u>などのタグなど覚える必要がない。

どれもスタイルシートを使うようになると不要になる。