HTMLの基礎
今日は休みです！
数日ぶりにめっちゃ寝た！ゆーて８時間くらいだけど！
全然寝られてなかったから「起きたら夕方になってるかも」って思って寝るけど、
案外早く起きてしまうって、あるあるやな。
さて、昨日に引き続きProgateを進めております。
30分くらいやって、覚えることが多いのので、整理するのも兼ねてブログ書いてます。
今回は
- リンクの作成
- 画像の表示
- リスト＝箇条書きの作成
の３つ。
【リンクの作成】
これは、Webページに表示させた文字にリンクを貼って、
その文字をクリックすれば飛ばしたいページに飛ぶような効果をつけるってことな。
使うタブは、
開始タブ：<a>
終了タブ：</a>
昨日「見出し」で「h」を使ったけど、それが「a」になるっちゅーことですね。
あ、話が逸れるけど、このタブで使うコレ→<>。
これ、昨日はキーボード探したけど見つからなくて、いちいち日本語入力にして「かっこ」って検索して打って、またアルファベッド入力に戻すって面倒なことをしてたんだけど、さっきキーボード見つかりました！
日本語を打つ時の「、」「。」を打つボタンですね。
ひらがなの「ね」「る」が書いてあるとこ。
（使うキーボードによって違うかもだけど…）
アルファベッド入力の状態で、シフト押しながら打つと「<」「>」になりました！
話を戻します。
で、リンクを貼るには<a></a>を使うわけだけども、
問題は、どこのリンクを貼るかってことですね。
作るときに念じながら作れば、そのWebページに飛ぶようになるほど、世の中はまだ進歩していません。残念ですが。
ここからちょっと覚えること多いです。
<a href="http://～～">表示させたい文字</a>
なんのアルファベッドの羅列かは分かりませんが、こうやって打たなくちゃいけないみたいなんです。
もうこれは、根性で覚えるしかない。
【ポイント】
- 開始タブのaの後に半角スペースをぶち込む
- その次に「href＝」って打つ（読み方分からんけど「ハレフ＝」って覚えた）！
- 飛ばしたいアドレスはを「””」で囲う（ダブルクォーテーションっていうらしい）
リンク貼る文字の締めに</a>を入れるのも忘れずにね！
【画像の表示】
これは、まぁテーマの通り、画像を表示させるってことやな。
勉強したのは、自分の持ってる画像ファイルの絵を表示させる方法じゃなくで、画像のアドレスの絵を載せる方法でした。
<img src="http://～～">
imgは「イメージ」のことかな？頑張って覚えましょう。
【ポイント】
- imgの後に半角スペースをぶち込むこと
- その次に「src=」って打つ（今回は「スルク」かい！ややこしいで！）
- 画像のリンクを「””」で囲う
で、今回は「表示させてる文字に効果をつける」ってものじゃなくて、ただ単にそこに画像を載せたいだけだから、終了タグは要りません。
上のように入力するだけで、そこに画像の絵が載っかるみたいですよ。
「ハレフ」と「スルク」、このへんがなんとも覚えにくそうですねぇ。。。頑張ろ。
【リスト＝箇条書きの作成】
・キャベツ
・トマト
・ニンジン
みたいな表示にさせる方法ですね。
<ul>
<li>キャベツ</li>
<li>トマト</li>
<li>ニンジン</li>
</ul>
ってのを使います。
「li」はたぶん「リスト」の「リ」かな？
「ul」は知らん。「ウル」や。まぁとにかく、覚えりゃええねん。
見てわかる通り、箇条書きは、二重でタグを入れるようです。
<ul>は「ここからここまでを箇条書きにしてくれ」の意味。
<li>は「これを箇条書きにしてくれ」の意味。
こんな風に、二重でタグを入れること、要素を要素で囲うことを、
「入れ子」って呼ぶんだってさ。
で、外にある要素（今回なら<ul>）を親要素、
中にある要素（今回なら<li>）を子要素って呼ぶみたいです。
で、データ入力するときには改行、インデント（頭にスペース入れること）をすると見やすいってさ。
インデントは、キーボードの「tab」を押せば勝手にやってくれるっぽい。
Progateではできたけど、ワードとかでもできんのかな？
ちなみにProgateでは「tab」一回押すと、半角スペースが2個分入力される感じでした。
入れ子、親要素、子要素、インデント、覚えておきましょう。
さて、どうでしたでしょうか。
自分的には「昨日勉強した<p>（段落）は、逆を言えば<p>を入れなきゃ改行してくれないってことやろか？」とか「箇条書きした文字にリンク貼るには、入れ子を使うんかな？」って疑問があったりとか、「初歩中の初歩から、覚えるの大変そうだなぁ」って感じです。
まぁ積み重ねやね、何事も積み重ね。
積み重ねでしか結果は残せん。
１日何時間もやって数日ぼーっとするより、ふとした時にちょいちょい思い出すことが、勉強にとって効果的だと思うのです。
今回は、こんな感じでどうでしょうか。
文字の大きさとか色とか付けられるの発見して使ってみましたけども。
文字打ちまくってタイピングも速くなってきてる気がする…。
