1.HTML
こんにちは。やまうちです。
Progateだけで勉強して行ってみようかと思います。
環境構築などは一旦おいておいて、まずは知識のまとめをしていきます。
(もはや自分用←
基礎知識
・タグ→<~>内容</~>の囲ってるやつ
・h1,pは同じ行に羅列しても改行される
・他のものは改行してコードを書かないと改行されないので注意
⑴HTMLの流れ
ページで書きたい文字をとりあえずどんどん羅列していきます。
大まかな流れとしては
①大前提 (今から書いていく形式,書式,言語を宣言)
②前提(タブの内容,外部ファイル使用する(css)などの定義)
③ページに書く内容
(i)ヘッダー(ページ上部の固定部分)
(ii)コンテンツ
(iii)フッター(ページ下部の固定部分)
下みたいな感じになります。
って感じです。
大前提
<html>
<head>前提</head>
<body>内容 ①ヘッダー ②メインコンテンツ ③フッター</body>
</html>
のようなイメージですね。
⑵HTMLの書き方
大前提/前提/内容という大きな3つの枠組みがあるのはわかりましたね。
大枠→html,head body
中枠→div(内容の中のヘッダー/メインコンテンツ/フッター)で分けていました。
あとは文字をひたすら書いていくわけなんですが、どういう文字を書くかで囲うタグが違ってきます。
①見出し(heading):h1~h6(数が増えると文字のサイズが小さくなる)
②段落(paragraph):p
③リンク(anchor:いかり→目印):a
参照するリンク先が必要なのでa href="URL"のように使う
④項目を羅列したい:ol, ul, dt, dd(親要素)でli(子要素)として使う
⑤画像を貼りたい:<img src="~">←閉じタグ要らない
⑥改行したい:br, hr(線をつけて改行)←閉じタグ要らない
など
①〜⑥知っておけば基本問題ありません。
そして最後にそれぞれの項目がわかりやすいように属性,属性名をつけます。
<div class="contents">のように使います。classを属性, contentsを属性名といいます。
このように名前をつけておくと見やすいし、この属性だけ色をつける!などの操作がしやすくなるので、自分のためにもシステム的にもあった方がいいです!
divがあったらclassで名前つけるつもりでいましょう!
これまでの知識を使ったものを実際に見て見ましょう!
左が打ち込んだ内容で、右が実際に出力される内容です!
これHTMLはとりあえずわかったと言っていいはず!
簡単ですね!
ではではー。