HTMLを使って自己プロフィールページを作ってみた
はじめに
今回は、前回に引き続きHTMLの勉強を進め、実際に自分のプロフィールページを作ってみました。
参考にしている記事を見ながら、HTMLのタグを使ってプロフィールの内容を作成し、文字だけでなく、リンクや画像も入れてみました。
今回やったこと
今回は、自分のプロフィールを紹介するページを作成しました。
自己紹介や趣味などを書き、HTMLのタグを使ってページの内容を整理しました。
また、今回初めてリンクを設定する方法や、画像を表示する方法も実際に使ってみました。
リンクにはaタグ、画像にはimgタグを使用し、それぞれの属性についても確認しながら作成しました。
実際にブラウザで表示してみると、文字だけだった前回よりもWebページらしくなり、少しずつ自分でWebサイトを作っている感じがしてきました。
今回つまずいたこと
今回、リンクや画像を入れる作業は、まだすぐに書けるようにはなりませんでした。
特に、タグだけでなくhrefやsrcなどの属性も一緒に使う必要があるため、最初は書き方を覚えるのに少し時間がかかりました。
そのため、今回は参考にしている記事を見ながらコードを書きました。
まだ何も見ずに書ける状態ではありませんが、実際に使ってみることで、どのようなときに使うタグなのかは少しずつ分かってきました。
今回学んだこと
今回の作成を通して、以下のことを学びました。
-
h1~h6を使った見出しの作り方 -
pタグを使った文章の表示 -
strongタグを使った文字の強調 -
aタグを使ってリンクを設定する方法 -
href属性について -
imgタグを使って画像を表示する方法 -
src属性について -
alt属性について - HTMLのタグと属性を組み合わせてページを作る方法
今回の感想
今回は実際に自分のプロフィールページを作ってみたことで、HTMLを使ってWebページを作る流れが少し分かってきました。
一方で、リンクや画像の入れ方などはまだすぐに思い出せず、参考記事を確認しながら作成しました。
まだ覚えたことは少ないですが、何度も実際に使っていくことで、少しずつ見なくても書けるようになっていきたいです。
altなどの属性はまだよくわかってないので、これから調べたり記事書いた人に質問して少しづつ理解度を上げていきたいです。
作ったやつは個人情報のってるので載せてません。
参考記事(@tsukino_ さん)