【文系大学生がウェブサイト制作に挑む】細かいことは何も分からないけどウェブサイト作ってみた③
こんにちは。小角祈（こかどいのり）です！この記事は文系大学生である私がウェブサイト制作に挑む過程を綴ったシリーズものの記事になります。詳しい説明は以下の画像をご覧ください。
第一回目と二回目の記事はこちらになります。ぜひご覧ください！
それでは，今回は前回よりも少し発展的なHTMLも含めて学んでいきたいと思います。
1.今回使用したHTMLの概要
今回は，HTMLのタグを使って以下のことを行いました。
（前回も行った事は省略）
_________________________________________________________________________________
1.見出しの大きさを2種類用意する
2.数字付きリストを表示させる
3.パラグラフ（段落）を分ける
4.改行する
5.画像を挿入する
6.リンクを貼る（新規タブで開くように）
_________________________________________________________________________________
上記のような作業を行うためには，それぞれこのようなHTMLのタグを使用します。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
1. <h1>,<h2>→見出しの大きさは<h>タグの後ろ側につける数字の大きさで変えることができます。今回は2種類用意したかったので，<h1>と<h2>を使用しました。
2. <ol>→数字付きリストは<ol></ol>でリストにしたい部分を挟み込むことで表現できます。それぞれのリスト項目には<li></li>をつけることも忘れないようにしましょう。
3. <p>→<p></p>で段落にしたい部分を挟み込みます。
4. <br>→改行したい部分の後ろ側にこのタグをつけると改行できます。スラッシュのついたタグで閉じる必要がありません。（HTMLのタグはスラッシュつきのタグで閉じることが基本です！）
5. <img src="">→このタグの" "の間に画像名を入れることで画像を挿入出来ます。さらに，<img src="（画像の元の名前）" alt="">というタグにしてaltの後ろの" "の間に自分でつけた写真の名前を入れると，画像に文字の情報で名前を付けておくことができます。
6. <a href=""></a>→このタグの""の間にリンクを貼り，<a href="（リンク）">小角祈のnote</a>のようにすると，「小角祈のnote」の部分が青く表示されてリンクになります。さらに，<a href="〜" target="_blank">という情報を追加するとリンクが別のタブで開くようになります。
_________________________________________________________________________________
2.今日学んだHTMLを実際に書いて表示させてみた
1.でご紹介したタグを用いて書いたHTMLがこちらになります。
表示させる記事の内容は，私が過去に書いたnoteから持って来たものです。
そしてこれをブラウザで見ると...
こうなります。前回のあの状態から一体何が起こったんだ...というくらい色んな要素が盛り込まれたホームページですね...。
実は，1日でこんなにもHTMLの学習を進めることができたのはこのサイト様と出会ったからです。
このサイト様の説明がとにかく分かりやすい！！私と同じ状態からウェブサイト作りに挑戦している方は是非ご確認ください。
体系的に順を追って説明して下さっているので，たった数時間の学習でかなり成長することができます。
3.最後に
今日は短い時間でたくさんのことを学ぶことが出来ました。もし宜しければ次回の記事も読んでくださると嬉しいです...！
最後までお読みいただきありがとうございました！
この記事が気に入ったらサポートをしてみませんか？