html.md (4711B)
1 --- 2 marp: true 3 4 style: | 5 section{ 6 background-color: #000; 7 color: #ffffff; 8 font-family: "Moralerspace Neon NF","Noto Sans JP"; 9 } 10 h1{ 11 color: #ffffff; 12 } 13 table { 14 color: #000; 15 } 16 17 --- 18 19 # HTML超入門 20 作:てつ 21 22 --- 23 24 # HTMLとは 25 ハイパーテキストマークアップ言語です。 26 ウェブページのコンテンツの記述を担い、安全な言語です。 27 28 *埋め込みによる危険性等を除く 29 30 31 --- 32 33 # タグ 34 35 マークアップ(記号の付加)をするための、 36 `<`と`>`に囲まれたものです。 37 `<main>`等々、用途や意味が定められています。 38 39 --- 40 41 # 要素 42 タグによって作成されるものを要素といいます。 43 44 --- 45 46 # タグの書き方について 47 48 タグは通常、開始タグと終了タグで囲むことで、中の要素がそのタグであることを示します。 49 ```HTML 50 <html> 51 <p>文章</p> 52 </html> 53 ``` 54 `文章`はpタグであり、htmlタグも付与されている。 55 56 --- 57 58 # タグの大文字小文字について 59 60 タグは大文字でも小文字でも許容されています。(HTMLでは) 61 現在は小文字で書くことが一般的です。(XHTMLの登場等で) 62 なお、古いシステムではすべて大文字であることが一般的でした。 63 node.jsのフレームワークを触っていると、先頭のみ大文字という場合も見かけるでしょう。 64 これはJavaScriptの命名規則でコンポーネントはアッパーキャメルケース`UpperCamelCase`が採用されているためです。 65 いろいろややこしいですが、現代では小文字を使っておけば間違えはないです。 66 67 --- 68 69 ## HTMLタグ 70 71 `<html>` 72 このタグの中がHTMLであることを示しています。 73 74 --- 75 76 ## headタグ 77 78 これはページのヘッダーではなく、機械的に処理されるヘッドです。 79 ページタイトルであったり、そのページのキーワードであったりを示します。 80 81 --- 82 83 ### metaタグ 84 85 metaタグは記法が特殊です。 86 `<meta charset="UTF-8">`や 87 `<meta name="author" content="tetsu">` 88 のように使います。終了タグは必要ありません。 89 終了タグが必要ない要素をvoid要素といいます。 90 91 --- 92 93 ### linkタグ 94 95 主にはcssの場所の指定や、アイコンの場所の指定に使います。 96 ```HTML 97 <link rel="stylesheet" href="style.css"> 98 <link ref="shortcut icon" href="minerva-juppiter.svg" type="image/png"> 99 ``` 100 101 --- 102 103 ### titleタグ 104 105 `<title> title </title>` 106 107 --- 108 109 ## body 110 111 この要素がページとしてユーザーに表示されるものです。 112 この中にヘッダーやフッターや本文があります。 113 114 --- 115 116 ### headerタグ 117 118 おわかりのように、これがページのヘッダーの部分の文字列などを定義するタグです。 119 このあたりは、別にpで書いて上の方に持っていけば最悪ヘッダーっぽく見えますが、まともな書き方を心がけましょう。 120 また、footerにも言えますが、各要素の中のヘッダーとフッターを用意するということもありえます。 121 例えば、カードのヘッダーとフッターが欲しい場合もありますよね。そういう場合もこのタグを使います。 122 123 --- 124 125 ### mainタグ 126 127 いよいよページメインの要素つまり、ページの中身です。 128 129 --- 130 131 #### article 132 133 ひとまとまりの意味を持つ文章をまとめたものがこのarticleです。 134 使っている人が少ない印象がありますが、積極的に使いましょう。 135 136 --- 137 138 #### div 139 140 みんな大好き`<div>`です。 141 Node.jsを見ていても非常に積極的に用いられています。 142 div自体に__意味はない__です。 143 複数の要素にスタイルを適応するために用いられていることが多いです。 144 クローラー達が意味を読み取ることが難しくなるので、やむを得ない場合を除き、使わないべきです。 145 146 --- 147 148 ##### divの悲劇 149 150 ```HTML 151 <body class="vsc-initialized"> 152 <!-- ▼ラッパー▼ --> 153 <div id="wrapper"> 154 <!-- ▼▼ヘッダー▼▼ --> 155 <div id="header"> 156 <div id="title"> 157 <div id="title_front"> 158 </div> 159 <div class="simply-scroll simply-scroll-container"><div class="simply-scroll-clip"><ul id="scroller" class="simply-scroll-list" style="width: 9000px;"> 160 </div> 161 <div id="navi"> 162 </div> 163 </div> 164 <!-- ▲▲ヘッダー▲▲ --> 165 166 <!-- ▼▼インフォメーション▼▼ --> 167 <div id="info"> 168 </div> 169 <!-- ▲▲インフォメーション▲▲ --> 170 ``` 171 172 --- 173 174 # 最後に 175 176 HTMLを使いこなして、よきウェブページを書きましょう。