HTMLだけで自己紹介ページを作ってみよう【コピペOK】
「HTMLを勉強しているけど、何を作ればいいかわからない…」
そんな人におすすめなのが、自己紹介ページです。
シンプルなページですが、HTMLの基本タグを一通り使えるので、初心者の練習にぴったりです!
⸻
完成イメージ
表示される内容はこんな感じです。
* タイトル
* 自己紹介
* 趣味
* 将来の目標
たったこれだけでも、立派なWebページになります。
⸻
コードはこちら(コピペOK)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>自己紹介</title>
</head>
<body>
<h1>こんにちは!</h1>
<p>WebデザインとAIを勉強しています。</p>
<h2>プロフィール</h2>
<ul>
<li>名前:○○</li>
<li>趣味:旅行・カフェ巡り</li>
<li>好きなこと:デザイン</li>
<li>目標:Webデザイナーになること</li>
</ul>
<p>最後まで見ていただきありがとうございます!</p>
</body>
</html>
⸻
このコードで学べること
このページでは次のタグを使っています。
* <html>
* <head>
* <title>
* <body>
* <h1>
* <h2>
* <p>
* <ul>
* <li>
4本目で紹介したタグが実際にどう使われるか確認できます。
⸻
ワンポイント
最初は見た目を気にしなくても大丈夫です。
大切なのは、「自分で書いて、ブラウザに表示してみること」。
エラーが出ても、その原因を調べながら進めることで理解が深まります。
⸻
まとめ
HTMLは、知識を読むだけでは身につきません。
実際にコードを書いて、小さなページを完成させることが一番の近道です。
次回は、このページにCSSを追加して、見た目をおしゃれにする方法を紹介します!
一緒に少しずつレベルアップしていきましょう!
