am1211.com

日本一簡単な初心者のための「HTML入門」


目次

  1. 初心者のためのHTML入門サイト
  2. 用意するもの
  3. HTMLの基本形
  4. HTMLの要素
  5. HTMLに最低限必要な要素
  6. 見出しと段落
  7. リンクする
  8. 画像を表示する
  9. HTML関係のリンク集

初心者のためのHTML入門サイト

このサイトは入門サイトなので、「正しい基本」とか「かっこいいデザイン」とか「高機能」とか、ややこしいものはことごとく無視しています。だから日本一簡単なのです。もっと詳しいことが知りたい人はリンク集を利用してください。このサイトは飽くまで「HTMLなんて触ったことも見たこともない初心者に、とりあえずHTMLを体感してもらおう」というのが目的です。

用意するもの

WEBサーバー
ホームページ(WEBサイト)を公開するためのインターネット上のスペースです。契約しているプロバイダに付いてるものを使うのが一番てっとり早いかもしれません。他にも無料のサービスが沢山あります。「無料 ホームページ」などで検索してみてください。
テキストエディタ(HTML作成ソフト)
Windowsに付いてる「メモ帳」で十分。無料フリーソフトなども多い。
FTPクライアントソフト
HTMLファイルをサーバーに送る(アップロード)ために使う。無料フリーソフトなども多い。初心者におすすめなのが「FFFTP」。 サポートページ初心者マニュアルが用意されているので、このソフトを使えば困ることはないでしょう。

HTMLの基本形

<html>
  <head>
    <title>サンプルHTML</title>
  </head>
  <body>
    <p>HTMLなんて簡単だ!</p>
  </body>
</html>

はい。どうでしょう。HTMLの基本形はこんなに簡単なのです。

こいつを「メモ帳」で名前をつけて保存したものがこれ。 → sample1.html(htmlファイルの拡張子はとりあえず「.html」にしときましょう。)

あなたも「メモ帳」にコピー&ペーストして、htmlファイルを作り、「FTPクライアント」で「サーバー」にアップロードしてみましょう。Internet ExplorerなどのブラウザにURLを打ち込めば、同じ画面が表示されるはずです。(上のsample1.htmlファイルの場合、URLは「 http://html.am1211.com/sample1.html 」です)

HTMLの要素

上の基本形に出てくる<html>や<body>など、「<」と「>」で囲んだものを「タグ」といいます。タグとは「ここからここまではこの要素ですよ」という印になるもの。例えば<html>と</html>で囲んだ部分は「html要素」、さらに<head>と</head>で囲んだ部分は「head要素」、となります。

<html>ここからhtml要素
  <head>ここからhead要素
  </head>ここまでhead要素
  <body>ここからbody要素
  </body>ここまでbody要素
</html>ここまでhtml要素

HTMLに最低限必要な要素

html
HTMLはこのタグで始まり、このタグで終わります。この要素の中にhead要素とbody要素を一個づつ放り込んでください。
head
画面上には表示されないページ情報。title要素などを記述します。
body
画面上に表示される本文。
title
ページタイトル。

見出しと段落

ここからはbody要素、つまり画面に表示される本文についての解説です。

HTMLの見出しはh1からh6まで6つのレベルが用意されています。h1が一番大きな見出し。数字が大きくなるほど小さな見出しになります。

段落はp。改行はbr。

<h1>ラーメン食い倒れ日記</h1>
<h2>6月3日</h2>
<p>ついに幻のラーメンに出会った。</p>
<p>まずかった。</p>
<h2>6月4日</h2>
<p>日本一まずいラーメンを食った。<br>まずかった。</p>

サンプル結果 → sample2.html

リンクする

これぞWWWの醍醐味。サイト内のページにリンクできるだけではありません。他の人のサイトや企業のサイトにもリンクすることもできます。逆に、あなたのページに誰かがリンクしてくれるかもしれません。これって、結構、楽しい。

リンクはaを使いますが、リンク先は、このa要素の開始タグに、属性という付加情報を加えて示します。ここではhrefという属性を使います。

<a href="URL">テキストや画像</a>(要素名と属性は半角のスペースで区切ります)。

<p><a href="http://www.am1211.com/">やるきのない日記</a></p>

サンプル結果 → sample3.html

画像を表示する

まずは表示したい画像を別のファイルとして用意し、FTPクライアントでサーバーに送ります(アップロード)。

その画像のURLをimgタグに示します。

<img src="URL">

<p><img src="http://html.am1211.com/sample.jpg"></p>

サンプル結果 → sample4.html

HTML関係のリンク集

お疲れ様でした。もっと詳しいことが知りたい人は、このリンク集を使ってください。

ごく簡単なHTMLの説明
HTMLを基本から学べます。
Another HTML-lint gateway
HTML文書の文法をチェックし採点します。
とほほのWWW入門
いろいろ載ってます。
HTMLクイックリファレンス
いろいろ載ってます。
CSS2リファレンス
HTMLではないですが。

AX