blog

ホームページのhtmlは編集ソフト無しで作れるの?

ホームページのhtmlを作成・編集する時、「Dreamweaver」などのhtml編集ソフトがあると大変便利ですが、結構値が張るので初心者には気軽に手が出せません。

また、ブログやCMSなどの記事をhtmlで書くような時にhtml編集ソフトを立ち上げるのは面倒です。

そこで、編集ソフトを使わないでhtmlを作成・編集する方法を紹介いたします。

 

使うものはメモ帳アプリです。
まずはメモ帳アプリにWEBページに書きたい文章を書きましょう。
書き終わったら、文章の頭に「<!DOCTYPE html><body>」、文書の最後に「</body></html>」と書いて、ファイル名の最後に.htmlをつけるか、ファイル形式を「HTML文章」として保存して下さい。

このファイルをWEBブラウザで開くと、先程書いた文章がずらずらと改行抜きで表示されます。
これが一番基本のhtmlです。
<!DOCTYPE html>と</html>に囲まれたものがhtmlで記載されていることを示し、<body>と</body>に囲まれたものが文章本体であることを示します。
このファイルをWEBサーバー上にアップロードすれば、インターネット経由で世界中のどこからでもブラウザを使ってこの文章にアクセスできます。
でも、このままじゃ見栄えが悪いですよね。そこで他のタグの登場です。
メモ帳ではちゃんと改行されてるのに改行無しで表示されるのは、テキストファイル上の改行は無視するからです。

<br>は改行のタグです。改行させたい所にこのタグを入れましょう。
段落分けしたいとことは、段落を<p>と</p>で囲みます。
強調したいところは<strong>と</strong>で囲みます。
見出しは5段階設定できます。<h1>~</h1>で囲んだところが大見出し、メインタイトルとなります、<h2>~</h2>で囲んだところが中見出しという感じで数字が大きくなるほど見出しとしては小さくなります。
他のページへのリンクをはりたいなら<a href=”ページのURL”>と</a>で囲みましょう。
画像を挿入したいなら<img src=”画像のURL”>で挿入できます。
ブラウザでページを表示した時にタイトルを表示させたい場合、<body>タグの前に<head><title>と</title></head>で囲んで書いて下さい。

<head>と</head>で囲まれたものはその文章の様々な属性です。

<title>と</title>で囲むタイトルの他にも、説明やキーワード、使用するスタイルシートやJavascript、タイトルに表示するアイコン(ファビコン)なども設定できます。

 

ブログの記事などをhtmlで書く場合は<body>タグ内の部分だけを書けばOKです。<!DOCTYPE html>や<head>の部分などはブログツールが付けてくれるからです。

 

どうですか?ここまでで最低限のテキストWEBサイトは出来そうですよね。
日頃html編集ソフトを使われている方も、一度手打ちを試してみると、色々発見があると思いますよ。