WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

マークアップの復習

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

新規ファイルを作る

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

ファイルの保存

まず中身を記述する前に必ずファイルの保存をしましょう。ファイルを保存する場合は、[ファイル]メニュー →[名前を付けて保存]を選択し、[ファイルの種類]を選択し、ファイル名を入力します。この時必ず[ファイルの種類]は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)を使ってファイルの場所を指定することです。この絶対パスは、おもに他のサイトにリンクしたりする場合に使います。