ウェブデザインtips-ＨＴＭＬは最低コレだけ知っておこう

HOME＞HTMLの基本

レンタルチャット

kon`s produce webdesign lecture!
<<｜ＨＴＭＬの基本｜ウェブデザインの基本｜カラー使い分け｜>> 　　　LHTML力　　　LHTMLは最低コレだけしっとこ。

HTMLは最低これだけ知っとこ。

■ホームページ作成ソフトを使えば、だいたいホームページを作れてしまうので、すべてのHTMLタグを覚える必要はありません。
ただ、ウェブデザインを実現するためには最低これだけは知っておかないと困ってしまいまうというものを紹介しておきます。

<html></html>	テキストファイルがＨＴＭＬファイルであることを明記するタグ。一番最初と一番最後に記述。
<title></title>	タイトルを記述するタグ。タイトルはアクセスアップを決定的にすることも。
<meta></meta>	そのページの内容などを記述する。見た目にはあまり関係ないが、アクセスアップに重要な役目を果たす。
<br>	改行。ソースの貼り付けなどの目印にもなる。
<body></body>	内容を記述するタグ。このタグの中に主な内容を記述する。
<font></font>	文字の設定をするタグ。文字の大きさ、色、字体などを設定できる
<table></table>	表を作るタグ。ウェブデザインではレイアウトを設定するのに使える。表の項目は<tr><td>などのタグで決定する。
<a href=""></a>	リンクを作るタグ。""内にアドレスをいれるとそのアドレスに対しリンクが張られる。
<img src="">	画像などを挿入するタグ。自分で作成した画像ファイルや素材ファイルを""内に指定すると画像が現れる。

■構造
○ページとして見える内容(文章や画像など)は全て<body></body>タグ間に記述する。
○HTMLタグは半角英数字なら大文字でも小文字でも良い。<font>と<FONT>は同じ意味。
○<タグ></タグ>間に、そのタグが影響を及ぼす。例えばHTMLタグが

<a href="http://konpro.kt.fc2.com/">トップペー</a>ジへ

となっていればhttp://konpro.kt.fc2.com/へのリンクは「トップペー」の部分だけに張られる。トップページへ
○属性を決定するタグを記述するときは半角スペースを空ける。例えば<font>の色を決めるcolorタグを使うときは<fontcolor="red">ではなくfont color="red">とする。

■さて、じゃあこれらのタグを使って簡単なＨＴＭＬファイルを書いてみましょう。
sample2.html

HTMLソース

説明

<html>

<title>ホームページ</title>

<body>

HTMLのなかでも普通に<br>を書けば、そのまま表示される。
改行はタグによって改行される
〈〉で囲まれたタグは<br>ページには表示されない。
<br>
<br>

<font color="blue" size="5" face="impact">フォント</font>
<br>
<table border="1">

<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
</table>

<br>
<a href="htmlbasic.htm">htmlの基本</a>

</body>

</html>

<html>でＨＴＭＬファイルであることを明記
<title>でタイトルを書く。ファイルを開いたときウィンドウの一番上にタイトルが表示される
<body>ここから内容を書くこと

文章を書けばその通りにページに表示される。改行は<br>のタグのところでのみ起こる。.

<font>で字を編集color="色名"で字の色、size="数字"で大きさ、face="フォント名"で字体を決める。

<table>で表をつくりレイアウト。属性borderを使って表の枠線の太さを1にする。
<tr>一行目(横)をつくる。
<td>一行目の１列め(縦)をつくる。そこに1と書く。
<td>一行目の２列め。
<td>一行目の３列め。
</tr>一行目終わり
<tr>二行めを作る
<td>二行めの１列め。

<a href>でリンクを張る。htmmlbasic.htmファイルへリンク。リンクの文にhtmlの基本と記述

</body>内容ここまで

</html>ファイルはここまで。

HTMLは最低これだけ、、、と言ってもたくさん知っているにこしたことはない。
良いウェブデザインをしようと思えばやはりHTMLの知識が深い方が有利なのです。
困ったときはHTML作成支援サイトに頼るのも手でしょう。

　というのも、HTMLをしらずにホームページ作成ソフトだけで作られたサイトと、ちゃんとHTMLを理解して作られたサイトでは歴然とした差が生まれてしまうからです。
後者が全体的にまとまりある体系になっているのに対し、前者はただ上からコンテンツを足していったような作りになっていることが多く、見た目にまとまりがないのです。
(どこのサイトとはあえて言いません。)

　もちろん、まったく見た目にまとまりが無いサイトでも、すごいアクセス数をたたきだしているところもありますので、必ずウェブデザインをしなければならないという話ではありません。

　ただ、キレイなウェブサイト、見てて爽快なウェブサイトを目指すなら、HTMLはかならずその助けになるでしょう。

→次へ

プロの技！ウェブデザインの資料集

画像の代用を考える
オンライン「実践WEBデザイナー塾」

ウェブデザイン関連のページにしてはすごくシンプルな作り。
基本的にはテーブルで構成されていて、画像で立体感をだしている。
上部のグラデーションや右部の影は３Dドラムや３Dテーブルを使ってHTMLのみでもデザインできる。

チュートリアルー第九回

HTMLをいじってみよう！

HTML力が発揮される場面の一つがいろいろな外部素材を利用してのHTML書き換え作業です。
以下のタグはトップページへのバナー(画像)リンクを表したものですので、これを使ってsample2.htmlをsample3.htmlのように書き換えてみてください。

答え

ヒント>>>
　コピー＆ペースト
ウェブ作成だけでなくインターネットで作業する事全般で役に立つ技術です。いわゆる「コピペ」ってやつ。
　ある文章をコピーしてそれを貼り付けることで同じ文章を書く手間が減らせるんですよね。長い文章のときは特にラクです。

やり方はコピーしたい文章を選択(文章の始まりをクリックして終わりまでドラッグすると文字に色がついた状態になる)して右クリック→コピー(Ctrl+Cでも可)、貼り付けたい箇所を右クリックして「貼り付け」(Ctrl+V)です。

topics

もっとHTMLが知りたい・手打ちホームページやってやる。
　「ホームページ作成ソフトを使わずにウェブ作成したいんだけど。」という人もいるはずです。

もちろんHTMLタグや文章を一つ一つ記述してホームページを作ることは可能です。しかしそれはそれでまたずいぶん非効率になりますから、時間がかかるのは覚悟しておいた方が良いでしょう。私もホームページを初めて作った時からずっと「手打ち」で作っていましたが、時間がかかりすぎて途中でやめたくなってしまう事がしょっちゅうでした。

HTMLタグをもっと勉強したい・HTML手打ちでウェブ作成したい人にオススメなのが
■いまさらHTML講座
HPを作りたい方、HTMLはこれだけ知っていればOK
■とほほのWWW入門
代表的なサイト。HTML、スタイルシートなど。

また、「ホームページ作成支援ソフト」を使えばHTMLからのホームページ作成も格段に効率が上がります。ホームページ作成支援ソフトとホームページ作成ソフトが無料でインストールできる(フリーウェア)窓の杜で好みのソフトを探してみると良いかもしれません。

HTML作成支援サイト

■いまさらHTML講座
HPを作りたい方、HTMLはこれだけ知っていればOK
■誰でも解るホームページ作成講座
コース別にHP作成講座がある。
■とほほのWWW入門
代表的なサイト。HTML、スタイルシートなど。
■ホームページ作成ＮＡＶＩ
ＨＰ作成方法・アクセスアップまで役に立つサイトを集めたリンク集。
■簡単ホームページ作成のノウハウ
基本・応用編に分けてホームページ作成を解説
■HP作成支援・HP作成代行サイト*Web-A*
HP作成代行サイト。お役立ちツールもあり。
■簡単ホームページ作成
簡単なホームページ作成とアフィリエイトを紹介しています。

HOME＞HTMLの基本

お問い合わせ

100MB無料ホームページ│ 可愛いサーバロリポップ