HTMLを簡単と思うか難しいと思うかでWeb制作の入り口は変わってきますが、とりあえずここでは「何もわからない」と言う人を対象に学習を進めます。
もうすでにHTMLについては習得していると言う人は、この章は読み飛ばしてください。
また、理解はしているけど、再確認（再学習）したいという人は学習することをおススメします。
この章での学習ポイント
・HTMLとは何か
・タグとは何か
・Webページの基本構造
・最低限必要なHTMLテンプレート
HTMLってなに？
Hyper Text Markup Language の頭文字で、マークアップ言語と呼ばれている言語です。
XMLやXHTMLなど、類似の言語もありますが、一番基本となるのはこのHTMLなので、基本として理解しておきましょう。
HTMLにはHTML4、HTML5などのバージョンがありますが、2021年以降「HTML」といえばHTML5の事を言うので、認識を統一しておくのがいいでしょう。
ちなみに、HTML4は全く知らなくていいのかというと、現在でもまだ10年以上前にホームページを作ってそれから改修をしていない場合にHTML4で作られている場合もあるので、
これについての知識情報もこの章で軽く触れたおきます。
マークアップ言語ってなに？
マークアップ言語は、
「この文章は見出しです」
「ここは画像です」
「ここはリンクです」
というように、文章に意味を付けるための言語です。
タグサンプル
タイトルタグ
<title>ページのタイトル</title>
文章タグ
<span>文章</span>
画像タグ
<img src="画像の">
リンクタグ
<a href="リンク先のURL">リンク文字</a>
このようにHTMLでは、タグを使って文章の役割を指定します。
それぞれのタグの意味を理解しておくと、書けるし読んで理解できるようになってきます。
タグには大きく分けて2種類の書き方（スタイル）が存在します、
通常は文章タグやリンクタグのように、開始タグと閉じタグがあって、その中に文字を書くスタイル。
もう一つは、画像タグのように、閉じタグがないスタイル。
ただし、以下のような書き方をする場合があり、閉じタグがない場合に、タグの最後に/（スラッシュ）を入れる場合もあり、こう書かれたタグは「自己修了タグ」とも呼ばれています。
<img src="画像の" />
XMLやReactなどのJSXでは、修了タグを書かないとエラーになりますが、通常のHTMLでは書かない方が標準です。
必要最低限のHTMLタグ
膨大なタグの種類を全て覚えなくてもいいので、まずは以下の必要最低限覚えておくだけで大丈夫です。
<html>
HTML全体を囲むタグ
<head>
ページ情報を入れる場所
<body>
実際に画面へ表示される内容
<title>
ブラウザのタブ名
<meta>
文字コードやページ情報の設定
<h1> 〜 <h6>
見出し
<p>
段落・文章
<a>
リンク
<img>
画像表示
<div>
ブロックの区切り
<span>
文章の一部分の装飾
<ul>
箇条書きリスト
<li>
リストの項目
<br>
改行
<strong>
強調表示
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTMLサンプル</title>
</head>
<body>
<h1>大見出し</h1>
<p>
これは文章です。
<strong>強調</strong>もできます。
</p>
<a href="https://example.com/">
リンク
</a>
<br>
<img src="image.jpg" alt="サンプル画像">
<ul>
<li>リスト1</li>
<li>リスト2</li>
</ul>
</body>
</html>
上記全部が覚えられない人のための5個のタグ
初心者のうちは、まずこの5つを覚えるだけでも十分です。
<h1>
<p>
<a>
<img>
<div>
この5つだけでも、簡単なホームページは作れるようになります。
HTMLを作りなれてきたら、1つずつ覚えるタグを増やすという覚え方がいいかもですね。
簡単テンプレート
タグを覚えたら、テキストエディタなどで実際にHTMLを作れる状態になりましたが、毎回同じことを書くのがめんどくさいという人のために、テンプレートを用意しておきました。
上記のサンプルコードを合わせて、使うことで、効率よくHTMLを作ることができるようになりますよ。
必要最低限
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<title>タイトル</title>
</head>
<body>
<p>コンテンツ</p>
</body>
</html>
ビジネスページで使うタグ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<link href="favicon.ico" rel="icon" type="image/x-icon">
<link href="favicon.ico" rel="apple-touch-icon" type="image/x-icon">
<link href="https://example.com/" rel="canonical">
<title>タイトル</title>
<meta content="ホームページ説明" name="description">
<!-- OGP -->
<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:image" content="https://example.com/" />
<meta property="og:site_name" content="ホームページタイトル" />
<meta property="og:description" content="ホームページ説明" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="" />
<meta name="twitter:site" content="@アカウント名" />
<meta name="twitter:image" content="https://example.com" />
<meta property="image_src" content="https://example.com" />
</head>
<body>
</body>
</html>
metaタグは、
ページの必要情報で、
OGPは、SNSでURLを共有した時に、
タイトル・説明・画像などを表示させるための設定です。
HTML4について
HTML4の特徴は、DOCTYPE宣言も以下のように長い記述になっていました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML4サンプル</title>
</head>
<body>
<h1>HTML4のページ</h1>
<p>昔のホームページでは、この形式がよく使われていました。</p>
</body>
</html>
現在では、HTML5のシンプルな記述が一般的ですが、古いWebサイトの修正や運用をする場合には、HTML4の知識が必要になる事もあります。
あとがき
HTMLだけ書いても、「テキストと画像だけで、並び順や、デザインが綺麗なホームページが作れない」という人は、次のことを頭に入れておきましょう。
HTMLは構造
CSSは見た目
JavaScriptは動き
HTMLの全てタグを知りたい人は、次のリファレンスページを見てどんどん覚えていきましょう。
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements
ということで、次の章は、CSSを学習していきます。
0 件のコメント:
コメントを投稿