作成日：
簡単なHTMLを書き、実際に無料サーバーにアップロードして、ホームページを作るまでをやりましょう。
実際にやってみることで、本当の基礎の基礎、HTMLの規則が実体験として理解できます。
<html>
<body>
<h1>私の初自作ホームページ</h1>
<p>これが初めての私の自作ホームページです！</p>
<br>
<p>こんにちは！</p>
<br>
<br>
<h2>その他リンクはこちら</h2>
<br>
<p>・ブログ</p>
<p><a href="ブログのURL" title="私のブログ">私の日常ブログ</a></p>
<br>
<br>
<p>・日々の写真サイト（クリックすると別窓で開きます）</p>
<p><a href="写真サイトのURL" title="私の写真サイト（別窓で開きます）">私の日々の写真</a></p>
<p><img src="img/sakura003.jpg" width="600px" height="50px" alt="sakura003.jpg"></p>
<br>
<br>
<p>
<a href="img/kohoku_big.jpg" title="画像を別窓で拡大表示" target="_blank">
<img src="img/kohoku_small.jpg" width="400px" height="300px" alt="kohoku_small.jpg">
</a>
</p>
<p>※画像をクリックするともっと大きな写真が見られます。</p>
<br>
<br>
</body>
</html>
<h3>私の好きなメインの食事TOP5</h3>
<ol>
<li>スパゲッティ</li>
<li>カレーライス</li>
<li>丼物</li>
<li>寿司</li>
<li>ラーメン</li>
</ol>
<br>
<h3>私の好きなメインの食事TOP5</h3>
<ul>
<li>スパゲッティ</li>
<li>カレーライス</li>
<li>丼物</li>
<li>寿司</li>
<li>ラーメン</li>
</ul>
<br>
<h3>私の好きなメインの食事TOP5</h3>
<ol>
<li>スパゲッティ</li>
<li>カレーライス</li>
<ul>
<li>カツカレー</li>
<li>バターチキンカレー</li>
<li>ドライカレー</li>
</ul>
<li>丼物</li>
<li>寿司</li>
<li>ラーメン</li>
<ul>
<li>とんこつ</li>
<li>しお</li>
<li>みそ</li>
</ul>
</ol>
@charset "utf-8";
body {
max-width: 1600px;
padding: 1em;
margin: 1em;
overflow-wrap: break-word;
}
img {
padding: 0px;
margin: 1em;
border: 1px solid #333333;
}
.red {
color: red;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/HP001.css">
</head>
<body>
</body>
</html>
「見出し、h1、h2、h3～」「リストを使う」「CSSをコピペで作る」「CSSを使うための設定」を解説しました。
ここまでで、HTMLの基礎の基礎はまあだいたい解説できたと思います。
ページの見出しを付け、文字を書き、画像を貼り、URLリンクも貼り、リストも作れますね。
HTMLが基本的にどういう構造の物かはわかってきたんじゃないかと思います。
次回は「コピペしたCSSの内容解説」「HTMLの最上部に載せておくべき情報を追加する」を解説したいと思います。
CSSは奥が深く、色んな設定ができるので、とりあえず次回は表面的なわかりやすい部分の設定をいくつか紹介したいと思います。
CSSの構造・書き方が「こういうものなのだな」とだいたいわかるようになれればいいな、という感じです。