見出し画像

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を追加して、見た目をおしゃれにする方法を紹介します!

一緒に少しずつレベルアップしていきましょう!

いいなと思ったら応援しよう!

この記事が参加している募集