ＨＴＭＬの作り方
ＨＴＭＬの作り方は慣れてしまえは簡単なのですが、初心者が何の知識もなくＨＴＭＬを作るのはかなり苦労をするでしょう。ホームページの作り方を勉強するにはパソコンの基礎知識が必要です。ファイルを開いたり、保存したり。保存先を変更したり、ＦＴＰやレンタルサーバーの登録。しかし、やることは毎回同じです。初心者でも必ずホームページが作れるようになりますので、諦めずに徐々に進めていきましょう。
初心者でもこれだけ覚えれば大丈夫 ＨＴＭＬの作り方
|
ホームページ作成ツール案内 プロ顔負けのサイトが作れるホームページ作成マニュアル案内 http://blo-zou.com/ |
|
アクセスが集まる法則を大公開 爆発的にアクセスが集まるブログとは？人気ブログランキング上位100ブログの検証記録 http://blo-zou.com/ |
|
ホームページを作ってやろうジャマイカ！！ これからホームページを作ってみたい方にお届けする、ホームページ作成の基本からのお勉強♪ http://blo-zou.com/ |
|
プロのＷＥＢデザイナーが動画で教える！簡単ホームページの作り方 初心者の方が自分でホームページを作れるように、すべて動画を使って、具体的にレクチャー http://blo-zou.com/ |
ホームページを作るためにはＨＴＭＬの作り方を知っている必要があります。
ホームページ作成ソフトを使えばワープロ感覚でホームページを作れますが、結局はソフトがＨＴＭLをあなたの代わりに書いているだけなのです。
ＨＴＭＬの知識は今後ホームページを作る上で必ずあなたの強い味方になってくれます。
ここでは初心者がホームページの作成に最低限必要なＨＴＭＬのタグを厳選して紹介していきます。
順番に進めていけば必ずＨＴＭＬの作り方が理解できるようになります。諦めずに最後まで続けましょう。
２．ＨＴＭＬを書く
それではＨＴＭＬの書き方について説明していきます。
左の画像が今回作成するホームページです。
このホームページをこれからＨＴＭＬで作っていきます。
ホームページのレイアウトには通常スタイルシートを使うのですが、今回は初心者がホームページを作れるようになると言うのが趣旨ですのでレイアウトもＨＴＭＬで作っていきます。
スタイルシートに興味がある方はスタイルシートの作り方をごご覧下さい。
それでは、ＨＴＭＬの作り方に入りましょう。
ＨＴＭＬはコンピュータがホームページを表示するときに必要な通訳みたいなものです。
コンピューターには人間の言葉がわかりません。
ホームページの文字の位置や大きさ、色そして、画像の表示等をコンピューターの分かる言葉で書かなければいけません。
その言葉を基にしてコンピューターがホームページを表示するのです。これがＨＴＭＬです。
しかし、コンピューターの言葉は融通が利きません、ＨＴＭＬの書き方を一文字でも間違えるとホームページの表示が思ったものと違くなりおかしくなります。最悪表示されなくなってしまいます。注意して、ゆっくりと確認しながら入力しましょう。
まずは下と同じようにエディターに入力してみましょう。
エディターはメモ帳を使用します。メモ帳の開き方が分からない方はエディター（メモ帳）の使い方を参考にして下さい。
<html lang="ja">
<head>
<title>ＴＨＭＬの作り方</title>
</head>
<body>
<h1>ホームページを作ってみよう！</h1>
<h2>まずはどんなホームページにするか決めよう</h2>
<p>
ホームページを作る前にどんな内容のホームページを作るか決めましょう。<br />
あまり狭いテーマだと内容を充実させるのが難しので初めは大きいテーマから始めましょう。<br />
たとえば、女性だったら、コスメやメイクではなく美容にします。そうすれば美容に関するもの<br />
すべてにおいて記事が書けます。<br />
美容の中にコスメやメイクも入ります。ですから、記事が書きやすいと思います。
</p>
<hr color="#0000FF" width="95%">
<a href="http://www.yahoo.co.jp/">詳しくはyahoo!で検索してみてください。</a>
</body>
</html>
まず<文字>で囲まれているものをタグと言います。
このタグを使うことによってブラウザーに文字や画像を表示できるようにしています。
タグはすべて半角英数字で入力してください。
タグの意味はまだ理解できなくてＯＫです。とにかく入力してみましょう。
キーボードの文字を探すのは大変だと思いますが、めげずに頑張りましょう！
入力できましたか？
お疲れさまでした。それでは、タグの意味について解説します。
<!DOCTYPE HTML ..........html4/loose.dtd">
この１、２行目はおまじないだと思って何も考えずにそのまま入力しましょう。
この意味は後から調べても遅くはありません。とにかく入力します。
<html lang="ja">・・・</html>
この<html lang="ja">タグから最終行の</html>の間にすべての情報を書いていきます。
<head>・・・</head>
ここにＨＴＭＬに関する情報を書きます。
<title>・・・</title>
ここにはホームページのタイトル入れます。
<body>・・・</body>
ここにはブラウザーで表示させてたいテキストや画像を入れます。
<h1>・・・</h1>
これは見出しをつけるタグです。レベル１から６まであります。レベル１の文字が大きくレベル６へ向うにつれて文字が小さくなっていきます。しかしあくまでも見出しとしてこのタグを使って下さい。文字の大きさを変えるために使うのはやめましょう。
<p>・・・</p>
この<p>タグは段落を示すタグです。テキストを<p>タグで囲むと次の行が一行空きます。
段落ごとに<p>タグを使いましょう。
<br />
この<br />タグは改行タグです。ＨＴＭＬではこの改行タグを使わないと改行されません。
エディターで改行されていてもホームページ上では改行されていないので注意が必要です。
<hr color="#0000FF" align="center">
この<hr>タグは水平線を引くタグです。
<hr color="#0000FF" align="center">
これは属性といってタグの細かい設定をするものです。このcolor属性を使って水平線に色を付けます。
色の指定方法はいくつかありますが、ここでは１６進数を使っています。"#0000FF"このダブルクォーテーション（”・・・”）の中に色を指定します。
<hr color="#0000FF" width="95%">
こんどはwidth属性を使ってラインの長さを指定します。ここではブラウザーを基準にして全体の長さの９５％に設定しています。
<a href="http://www.yahoo.co.jp/">詳しくはyahoo!で検索してみてください。</a>
これは、リンクを指定するタグです。hrefの部分にリンク先のＵＲＬを指定します。ここではｙａｈｏｏ！ジャパンのＵＲＬを指定しています。ＵＲＬとは簡単に言うとホームページのある場所を指定するものです。
タグの次のテキスト部分の ”詳しくはyahoo!で検索してみてください。” がホームページ上に表示されます。
いかがでしたか？
今回は本当に基本の基本部分だけを紹介しました。ＨＴＭＬの書き方は、覚えてしまえばそれほど難しいものではありません。今回紹介したタグのほかによく使うタグは限られています。ＨＴＭＬの書き方に慣れてホームページを作ってみましょう。何回も作っていくうちにＨＴＭＬの書き方に慣れてくると思います。
楽しく挑戦してみてください。
次の回は今書いたＨＴＭＬを保存して、ＨＴＭＬが間違いなく書かれているか確認します。
Copyright © 初心者のためのＨＴＭＬの作り方 All rights reserved