とてもカンタンなページのつくりかた

かんたんなページをつくってみよう

見出しと文だけのページをつくってみます。

基本形をコピーする

次のソースをコピーして、テキストエディタに張りつけます。もちろん打ちこんでもかまいません。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>たいとる</title>
</head>
<body>

</body>
</html>

器編-タイトルをつける

タイトルを変更しましょう。 <title>たいとる</title> の「たいとる」を変更します。

中身編-見出しと段落

わざとらしく1行空いてるbodyの中に、見出し(h1〜h6)をつけて、その下にpで囲んで文を入れましょう。見出しを、<h?>見出し</h?>で書きます。?に数字が入ります。文は、<p>文章</p>で書きます。

見出しは、数字を飛ばさないようにします。h2の次は、h3です。h2の次にh4がこないようにしましょう。

例です。好きな文を書きましょう。面倒ならコピーしてもいいです。もっと面倒なら、見るだけでもいいです。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>pngについて</title>
</head>
<body>
<h1>pngのページ</h1>
<p>ここは、pngのおはなしです</p>
<h2>gifとpng</h2>
<p>gifは、はじめは、ただでつかわせたくせに、WWWが広まると、急に、お金をとりだしました。</p>
<p>そこで、pngがとても注目されました。フリーです。w3cもすすめています。</p>
<h2>拡張子png</h2>
<p>pngの拡張子は、.pngです。</p>
</body>
</html>

ここまでで、けっこうそれらしいものができたと思います。


リンクしちゃうページ作り


<p><a href="index.html">目次へ戻ります。</a></p>


このページのまとめ

title,p,h1〜h6,aの使い方を覚えました。とてもよく使うと思います。これらをある程度使いこなしたら、他の使う要素を覚えていったらいいと思います。


目次へ戻ります。


WebSite:ウェブページ作成はうす
WebMaster:人泣礼(Hitonaki Rei)

テレワークならECナビ Yahoo 楽天 LINEがデータ消費ゼロで月額500円〜!
無料ホームページ 無料のクレジットカード 海外格安航空券 海外旅行保険が無料! 海外ホテル