マークアップとは？

マークアップとは、機械が文書の構造を認識出来るように、文書の各要素に目印を与えて行く事です。見出しや段落などと言った紙の文書では当り前にある要素だけでなく、ハイパーリンクのアンカーなどのようなハイパーテキスト独自の要素なども、マークアップに依り認識が可能になります。

要はコンピュータが解るように文章を構造化する事です。マークアップしなくてもブラウザーに文字は表示は出来ますが、その状態では意味や構造を持つ事が出来ません。マークアップする事で構造や意味を明確にしましょう。
HTMLの文章構造には厳密なルールがあり、そのルールに沿ったマークアップを心がけましょう。

では実際にマークアップをしてみましょう。

新規ファイルを作る

ファイルを新規作成する場合は、［ファイル］メニュー →［新規作成］を選択します。

ファイルの保存

まず中身を記述する前に必ずファイルの保存をしましょう。ファイルを保存する場合は、［ファイル］メニュー →［名前を付けて保存］を選択し、［ファイルの種類］を選択し、ファイル名を入力します。この時必ず［ファイルの種類］はHTMLファイルを選択します。

上書き保存

ファイルを上書き保存する場合は、［ファイル］メニュー →［上書き保存］を選択（または、［上書き保存］ボタンをクリック）します。しかし、いちいちメニューからコマンドを選んでいると作業効率が悪いので、授業ではショートカットを積極的に使っていきます。保存のショートカットは「Ctrl」＋「S」なので必ず覚えておきましょう。

マークアップのルール

開始タグ　「<」と「>」の間に「要素」を書く。
終了タグ「」の間に「要素」を書く。

例

<h1>一番重要な見出し</h1>

HTMLの基本形

「html」～「/html」は、そのルールで記述するための「箱」
「head」～「/head」ブラウザに内容のルールを伝える（ブラウザでは不過視、コンピューターに向けた情報）
「body」～「/body」閲覧者に内容の意味を伝える（ブラウザでは可視、人間に向けた情報）

<html>
<head>

</head>
<body>

</body>
</html>

この時大事なのは上から順に書いて行くのではなく、構造と意味を理解し、各タグ毎に記述していきます。

タイトルを追加する

<html>
<head>
<title>はじめてのHTML入力練習</title>
</head>
<body>

</body>
</html>

今回覚えるタグ（要素）

h1～h6 見出し（h1,h2,h3,h4…と、数が大きくなるほど見出しは小さくなります）
段落(文章)
ul(unordered list) 順不同リスト
ol(ordered list) 順序が決まっているリスト
li　リストタグ　（ul もしくは ol と一緒に使います）

画像の挿入とリンク

画像を挿入されるには「img」タグを使用します。

<img src="画像の置いてある場所"  alt="代替え文字">

img = image
src = source

ハイパーリンク

リンクの無いWebサイトはこの世界に存在しません。リンク＝webと言っても良いので、しっかりと理解し覚えておきましょう。

テキストリンク

<a href="移動先の住所（パス）">テキストリンク</a>

a：anchor
href：hyper reference

画像リンク

<a href="移動先の住所（パス）"><img src="画像の置いてある場所" alt="代替え文字"></a>

メールリンク

<a href="mailto:メールアドレス">お問い合わせ</a>

webサイト制作の復習 --2024年5月--