トップページ>漫文>

HTML文書作成法


HTML文書の作成法を、簡単に解説します。

この文書には、ごく基本的なことしか書かれていません。

 

ここで作成するページはこれです。

 サンプルで作成する画面

 

半分覚書的なものですのでまずは眉に唾をどうぞ。


前提編

 

サイト作成の手順

(1)準備(これは別にどうでも)

●作成する意思の存在 ●テーマの設定
これがあれば何でも出来ます(多分)。 サイトのテーマを考えます。タイトルも。

最低限のマナーは、「他人を不快にさせない」です。

 

●作成ソフトの準備  ●作業の準備
HTMLが記述できるもの、「メモ帳」などでも。

Webサイト作成ソフトの選び方(拙サイト内)

作業フォルダの作成。

構想中のWebサイトと同様の構造にしておきましょう。

 

(2)作成と管理

 

●編集作業(HTML作成) ●作成後の確認作業
以下で解説。このページはこれがメイン。 各種ブラウザで確認。リンクチェックも。

 

●公開 ●管理
WebサイトとしてWWW上に公開します。

Webサイト公開のいろは(拙サイト内)

検索サイト登録、メンテナンスなど、適切な管理を行います。

コンテンツは追加だけでなく、削除・差し替えも行い、

サイトを常にフレッシュな状態に保ちます。そうしなくていいような
作りにするのもひとつです。

 


導入編

●HTMLについての基礎知識

大幅に改編したため、こちらをご覧ください

 

ここから、いきなり実践編。


実践編

 

とりあえず、ここでは

こんなページを作るものとします。

   <記述されている内容>
サンプルで作成する画面  タイトル:鬱色時代にアクセス!

 本文;

 鬱色時代にアクセス!

 http://www.hatosan.com/

 管理人は ううせいじん

 眠い・・・

 

●HTMLに必要な<タグ>

 

HTMLタグの基本は

<命令> 記述 </命令>

の サンドイッチ構造

となります。

 

その中でも、基本となるタグは、

です。

これでHTML文書が記述できます。

ただ、<head> </head>の部分に <title> </title>という

タイトルタグを入れましょう。

 

HTMLは、これらのタグを組み合わせて以下のように記述します。

<html> ※ここからHTMLであることを宣言。

 <head> ※ヘッダ部(タイトルや文書の基本情報を記述)

  <title> </title> ※タイトルを記述

 </head> ※ヘッダ部の終了

 <body> ※本文の開始(ブラウザに表示されるのはここから)

 </body> ※本文の終了

</html> ※HTMLの宣言の終了

 

「メモ帳」などでこれを保存しましょう。

ファイル名は 半角・英数字が原則です。

拡張子は、.htm または .html のどちらかとなります。

htmとhtml、どちらがいい悪いという話ではありません。

が、管理がしやすいので統一することをお勧めします。

なお、htmとhtmlを一括変換するソフトもあります。htm-html変換プログラム

このサイトでは .htmと.html が仲良く共存(笑)しています。いろいろ事情が・・・

 

では以下、

本文を含めてWebページを作っていきましょう。

 

●基本タグの解説

タグの基本(拙サイト内)

 

●本文テキストの作成

本文の作成(拙サイト内)

 

●表(テーブル)の作成

テーブルの作成(拙サイト内)

 

●リンクの貼り付け

リンクの貼り付け(拙サイト内)

 

●画像の貼り付け

画像に関して(拙サイト内)

 

●ヘッダ部について

ヘッダ部(拙サイト内) ※メタタグ、文字コードなど。

 

●フレームについて

・・・ここでは触れません。

 

●コメントについて

<!--  --> の形でメモのようにコメントを入れることが可能です。

 <!-- ここから独り言についての記述-->

 <b> 困ったなぁ</b>

 <!-- ここまで-->

等というメモが可能です。直接編集の際に役立ちます。

 

+++

 

こんな感じです。

では、画像にあるようなHTMLファイルを記述しましょう。

 

ソースはこちら

<html>

<head>
<title>鬱色時代にアクセス!</title>
</head>

<body bgcolor="#FFFFFF">

<p>鬱色時代にアクセス!</p>

<p><a href="http://www.hatosan.com/">http://www.hatosan.com/</a></p>

<p> </p>

<p align="right">管理人は ううせいじん</p>

<p align="center">眠い・・・</p>

</body>
</html>

 

これで完成です。

お疲れ様でした。

 

・・・といいたいところなのですが、

一つおまけコンテンツを用意しました。

 

ソースを比較してみようかしら

 

メモ帳、Frontpage Express/ Netscape Composer /Microsoft Word

 

それぞれがどのようなソースを吐くのか実験して、この項を了と致します。

 

(追記)

ここではあまりにも不十分なので、補遺を作成しております。併せてご覧ください。


http://www.hatosan.com/html/

トップページ | 連絡先

Copyright (C) 2003 Uuseizin. All rights reserved.

ご利用はご自由に。