commit 7b7077e36c546c8ce054d012b4c07a09004c2941 parent 6b3973ee2fea48679afbb398ce31008d86e2ca0e Author: minerva-jupiter <ryouturn@gmail.com> Date: Sat, 5 Jul 2025 13:30:15 +0900 add for html.md Diffstat:
| A | html.md | | | 175 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
1 file changed, 175 insertions(+), 0 deletions(-)
diff --git a/html.md b/html.md @@ -0,0 +1,175 @@ +--- +marp: true + +style: | + section{ + background-color: #000; + color: #ffffff; + font-family: "Moralerspace Neon NF","Noto Sans JP"; + } + h1{ + color: #ffffff; + } + table { + color: #000; + } + +--- + +# HTML超入門 +作:てつ + +--- + +# HTMLとは +ハイパーテキストマークアップ言語です。 +ウェブページのコンテンツの記述を担い、安全[^1]な言語です。 + +[^1]:埋め込み等による危険性を除く + +--- + +# タグ + +マークアップ(記号の付加)をするための、 +`<`と`>`に囲まれたものです。 +`<main>`等々、用途や意味が定められています。 + +--- + +# 要素 +タグによって作成されるものを要素といいます。 + +--- + +# タグの書き方について + +タグは通常、開始タグと終了タグで囲むことで、中の要素がそのタグであることを示します。 +```HTML +<html> + <p>文章</p> +</html> +``` +`文章`はpタグであり、htmlタグも付与されている。 + +--- + +# タグの大文字小文字について + +タグは大文字でも小文字でも許容されています。(HTMLでは) +現在は小文字で書くことが一般的です。(XHTMLの登場等で) +なお、古いシステムではすべて大文字であることが一般的でした。 +node.jsのフレームワークを触っていると、先頭のみ大文字という場合も見かけるでしょう。 +これはJavaScriptの命名規則でコンポーネントはアッパーキャメルケース`UpperCamelCase`が採用されているためです。 +いろいろややこしいですが、現代では小文字を使っておけば間違えはないです。 + +--- + +## HTMLタグ + +`<html>` +このタグの中がHTMLであることを示しています。 + +--- + +## headタグ + +これはページのヘッダーではなく、機械的に処理されるヘッドです。 +ページタイトルであったり、そのページのキーワードであったりを示します。 + +--- + +### metaタグ + +metaタグは記法が特殊です。 +`<meta charset="UTF-8">`や +`<meta name="author" content="tetsu">` +のように使います。終了タグは必要ありません。 +終了タグが必要ない要素をvoid要素といいます。 + +--- + +### linkタグ + +主にはcssの場所の指定や、アイコンの場所の指定に使います。 +```HTML +<link rel="stylesheet" href="style.css"> +<link ref="shortcut icon" href="minerva-juppiter.svg" type="image/png"> +``` + +--- + +### titleタグ + +`<title> title </title>` + +--- + +## body + +この要素がページとしてユーザーに表示されるものです。 +この中にヘッダーやフッターや本文があります。 + +--- + +### headerタグ + +おわかりのように、これがページのヘッダーの部分の文字列などを定義するタグです。 +このあたりは、別にpで書いて上の方に持っていけば最悪ヘッダーっぽく見えますが、まともな書き方を心がけましょう。 +また、footerにも言えますが、各要素の中のヘッダーとフッターを用意するということもありえます。 +例えば、カードのヘッダーとフッターが欲しい場合もありますよね。そういう場合もこのタグを使います。 + +--- + +### mainタグ + +いよいよページメインの要素つまり、ページの中身です。 + +--- + +#### article + +ひとまとまりの意味を持つ文章をまとめたものがこのarticleです。 +使っている人が少ない印象がありますが、積極的に使いましょう。 + +--- + +#### div + +みんな大好き`<div>`です。 +Node.jsを見ていても非常に積極的に用いられています。 +div自体に__意味はない__です。 +複数の要素にスタイルを適応するために用いられていることが多いです。 +クローラー達が意味を読み取ることが難しくなるので、やむを得ない場合を除き、使わないべきです。 + +--- + +##### divの悲劇 + +```HTML +<body class="vsc-initialized"> + <!-- ▼ラッパー▼ --> +<div id="wrapper"> + <!-- ▼▼ヘッダー▼▼ --> + <div id="header"> + <div id="title"> + <div id="title_front"> + </div> + <div class="simply-scroll simply-scroll-container"><div class="simply-scroll-clip"><ul id="scroller" class="simply-scroll-list" style="width: 9000px;"> + </div> + <div id="navi"> + </div> + </div> + <!-- ▲▲ヘッダー▲▲ --> + + <!-- ▼▼インフォメーション▼▼ --> + <div id="info"> + </div> + <!-- ▲▲インフォメーション▲▲ --> +``` + +--- + +# 最後に + +HTMLを使いこなして、よきウェブページを書きましょう。