webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

マークアップとは?

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

要はコンピュータが解るように文章を構造化する事です。マークアップしなくてもブラウザーに文字は表示は出来ますが、その状態では意味や構造を持つ事が出来ません。マークアップする事で構造や意味を明確にしましょう。
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>

相対パス絶対パス

パスには相対パス絶対パスの2つがあります。この2つの違いをしっかりと理解する事がWeb初学者とって1番大事な事です。

相対パス

ハードディスクなどでファイルやフォルダの所在を示す文字列(パス)の表記法の一つで、起点となる現在位置から、目的のファイルやフォルダまでの道筋を記述する方式。上位フォルダを「..」であらわす。
ひとつ上の階層を表すには「../」を使います。


絶対パス

絶対パスとは、http://から始まるアドレス(URL)を使ってファイルの場所を指定することです。この絶対パスは、おもに他のサイトにリンクしたりする場合に使います。