トップページ＞漫文＞

HTML文書作成法

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

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

　

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

　サンプルで作成する画面

　

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

前提編

　

サイト作成の手順

（１）準備（これは別にどうでも）

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

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

　

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

Webサイト作成ソフトの選び方（拙サイト内）

 作業フォルダの作成。

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

　

（２）作成と管理

　

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

　

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

Webサイト公開のいろは（拙サイト内）

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

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

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

　

導入編

●HTMLについての基礎知識

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

　

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

実践編

　

とりあえず、ここでは

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

　 　＜記述されている内容＞
サンプルで作成する画面 　タイトル：鬱色時代にアクセス！

　本文；

　鬱色時代にアクセス！

　https://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="https://www.hatosan.com/">https://www.hatosan.com/</a></p>

<p>　</p>

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

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

</body>
</html>

　

これで完成です。

お疲れ様でした。

　

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

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

　

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

　

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

　

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

　

(追記）

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

https://www.hatosan.com/html/

＜トップページ | 連絡先＞

Copyright (C) 2003 Uuseizin. All rights reserved.

ご利用はご自由に。