このサイトは入門サイトなので、「正しい基本」とか「かっこいいデザイン」とか「高機能」とか、ややこしいものはことごとく無視しています。だから日本一簡単なのです。もっと詳しいことが知りたい人はリンク集を利用してください。このサイトは飽くまで「HTMLなんて触ったことも見たこともない初心者に、とりあえず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>や<body>など、「<」と「>」で囲んだものを「タグ」といいます。タグとは「ここからここまではこの要素ですよ」という印になるもの。例えば<html>と</html>で囲んだ部分は「html要素」、さらに<head>と</head>で囲んだ部分は「head要素」、となります。
<html>ここからhtml要素 <head>ここからhead要素 </head>ここまでhead要素 <body>ここからbody要素 </body>ここまでbody要素 </html>ここまでhtml要素
ここからは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
お疲れ様でした。もっと詳しいことが知りたい人は、このリンク集を使ってください。