HTML
HTMLファイルの型
<!DOCTYPE html>はhtmlのバージョン(HTML5)を宣言している。
<head>要素はページに関する情報。Webページの設定を記述する。
<body>要素は実際に表示したい内容を記述する。
注意)
headを記述し終えてから、bodyを記述すること
relはファイルとの関係性を示す。rel="stylesheet"ならcssファイルとの関係性。
hrefにページのurlを記述する
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel = "stylesheet" href="stylesheet.css">
</head>
<body>
</body>
</html>
ブロック要素とインライン要素
ブロック要素 : 前後で改行が入り、親要素の幅いっぱいに広がる要素。
インライン要素 : インライン要素の前後で改行が入らない。インライン要素はCSSのプロパティでwidthやheightを調整できない。ただし、marginは左右方向のみ調整できる。
ブロック要素の例) <div> <h1> <p>
インライン要素の例) <span> <a>
タグ(HTML)
<h1> </h1>
h1(見出し)。h1~h6まで存在。
ブロック要素。
<a> </a>
#リンク先が存在しない時はhref="#"を指定
<a href="#"> </a>
<a href="url"> </a>
#クリックしたいときに別の新しいタグでページを開きたいときは以下の属性を追加。
<a href="url" target="_blank"> </a>
a(リンク)という意味付けをもつ。リンクの飛び先を設定するにはhref属性が必要。
インライン要素。
<p> </p>
p(aragraph)タグで段落に分ける。自動的に改行される。
ブロック要素。
<span> </span>
#例
この部分が<span class="change_red">赤色</span>に見える。
spanは文の一部をインライン要素にする。つまり文中の一部にCSSを適用したいときに使用する。
<img src ="url">
#オプションこと「属性」を追加できる。widthやheightで横幅や縦幅を調整する。altは説明。
<img src="url" width="100" height="100" alt="このイメージの説明">
imgは画像を表示させるタグ。src属性のurl部分に画像リンクを載せる。
<li>
<ul>a</ul>
<ul>b</ul>
<ul>c</ul>
</li>
<li>
<ol>金賞</ol>
<ol>銀賞</ol>
<ol>銅賞</ol>
</li>
liはリストをつくる。ulは黒点が先頭につく。olは数字が連続でつく。
<div>
</div>
<section>
</section>
<article>
</article>
レイアウトタグ。
以下はclassをつけた例。複数のclassをつけるにはスペースで区切る。
<div class="example1 example2">
サンプルテキスト
</div>
<form>
<p>コメント</p>
<input>
<p>コメント(複数行)</p>
<textarea></textarea>
</form>
input要素は1行のテキスト入力を受け取る。<input>だけで良い。
textarea要素は複数行のテキスト入力を受け取る。
☆送信ボタンの作成。
<form>
<input type="submit">
<p></p>
<input type="submit" value="保存">
</form>
type属性をsubmitにすると送信ボタンが作成される。
value属性でテキストを変更できる。
参考文献
サルワカ
https://saruwakakun.com/html-css/basic/link-rel
TAG index
https://www.tagindex.com/html_tag/form/input_submit.html
Progate
https://prog-8.com/languages/html
ドットインストール
https://dotinstall.com/lessons/basic_html_v5
https://dotinstall.com/lessons/basic_css_v5