トップページを作成する
メモ帳に下記のように記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>素材集</title>
</head>
<body>
<div>
<h1>- 素材集 -</h1>
</div>
</body>
</html>タイトルと見出しを設定して
htmlフォルダの中に「sozai.html」で保存します。
「sozai.html」を右クリックしてブラウザで確認します。
文字とテーブルを追加する
<p>イラストをクリックしてください</p>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table><table>タグは表を作るときに使用します。
<table>の中に、<tr>を作り、<td>を作る。<td>の中にタグを記述します。
テーブルにデータを追加する
<td></td>に文字と画像を追加します。
<td><img src="https://appli-base.net/images/html/flour1.png"></td>
<td>花の素材</td>
ブラウザで確認
画像にリンクを貼る
<img>を<a></a>タグで囲います。
リンク先の「flour.html」は、後ほど作成します。
画像にカーソルを持っていくと手の形に変わり、リンクが貼られたのがわかります。
さらにデータを追加する
<tr>から</tr>までをコピー。
</tr>の下に貼り付けて、リンク先と画像とタイトルを変更する。
<tr>
<td><a href="vegetable.html"><img src="https://appli-base.net/images/html/vegetable1.png"></a></td>
<td>野菜の素材</td>
</tr>
ブラウザで確認
コピーライトを表示する
誰がこのホームページを管理しているのか、を表示します。
ここではindex.htmlをリンク先にしました。
<p><a href="index.html">Appli Base</a></p>
ブラウザで確認
同じように表示されましたか？
もし表示されない場合は、タグに間違いがないか見直してみましょう。
2025/12/10
