「HTML用語解説」ホームページ制作入門

これまでに学んできた内容について詳しく説明していきたいと思います。次のような簡単な例を使って説明します。

基本用語

<>で囲まれている部分をタグ、左側のタグを開始タグ
右側の/が含まれるタグを終了タグ、開始タグと終了タグとその間にある文字を含めて要素と呼びます。

用語 対応箇所
タグ <p class="sample">, </p>
開始タグ <p class="sample">
終了タグ </p>
要素 <p class="sample">テキスト</p>

また、=の左側の文字が属性、右側の"で囲まれている部分が属性値です。属性も属性値も一つの要素に複数並べることができます。

用語 対応箇所
属性 class
属性値 sample

重要なタグ

重要なタグといっても多くはありません。

タグ 説明
html HTMLであることを示す。
head ホームページのタイトル、メタ情報、外部ファイルの読み込みなどを設定する。
title ホームページのタイトルを示す。headの内側に書く。
body ホームページの本文。
hx 見出しを示す。xに入る数字が小さいほど文字が大きくなる。
a 別のページへのハイパーリンクを定義する。
img 画像を表示する。
p 段落を示す。
ol 順序付きの箇条書きを示す。
ul 順序なしの箇条書きを示す。
li 箇条書きの各項目を示す。
table 表を示す。
tr 表の各行を示す。
td 表の各セルを示す。

重要な属性

どの要素にでも適用できる属性の中で重要なものを2つ覚えておきましょう。idclassの2つです。これらは要素を特定するために必要です。

  • id: 要素に個別の名前を設定できる
  • class: 複数の要素に同じ名前を設定できる

idclassは頻繁に使いますので、覚えておきましょう。

GitHubのリポジトリをローカルに反映 & プッシュまでの流れ

リポジトリの作成

まずは、リポジトリの作成からはじめます。リポジトリについては多分どこかで説明します。GitHubにあるリポジトリはリモートリポジトリ、自分のパソコンにあるリポジトリはローカルリポジトリと呼びます。

  • 所有者 taishi41228
  • リポジトリ名 ty-test-repo
  • 公開状態 Public

公開鍵を設置する

こちらにアクセスします。https://github.com/settings/keys

公開鍵をコピーして貼り付けます。

SSH接続を確認する

リモートリポジトリをクローンする

コミットとプッシュ

GitHubの解説通りにコミットとプッシュします。

これで一連の作業は終わりです。

「画像を表示しよう」ホームページ制作入門

今回は画像を表示します。画像を表示する前に知っておく必要があるものがあります。ファイルのパスです。簡単に言うとファイルが存在している場所までの道筋のことです。パスには絶対パスと相対パスがあります。

絶対パス

絶対パスは上から順番にディレクトリ(フォルダとほぼ同意)をたどっていくパスのことです。最も上のディレクトリのことをルートディレクトリと表現します。

相対パス

一方、相対パスは現在いる場所を起点として順番にディレクトリをたどっていくパスのことです。

パスについて知ったところでHTMLの書き方について解説します。

このように書きます。

例えば、現在のディレクトリ(HTMLファイルがある場所)に新たなディレクトリ image を作ってそこに画像ファイル img.png を置きます。そのときの画像のパスは image/img.png となります。画像の代わりの文となっているところは画像が見つからない場合に表示されるものです。その他にも画像の幅や高さを決めることもできます。

いろいろな画像ファイルを用意してどのように表示されるか確認してみるといいと思います。

「リンクや箇条書き」ホームページ制作入門

リンクと箇条書きの方法を覚えて、よく見ているページのリンク集を作ってみたいと思います。

 リンク

ホームページというのは基本的に複数のページを行ったり来たりするものです。ページ間の移動のために設置するものをリンクと呼びます。

という形で表します。リンクはホームページを作る上でかなり重要ですので、必ず覚えるようにしましょう。次のようにテキストエディタに入力して、保存します。

箇条書き

また、箇条書きも重要になってきます。箇条書きはメニューを作るときにもよく利用されています。次に示すような形で表します。

アイテムが増えていくたびに <li></li> を追加していけばよいということです。箇条書きは2種類あります。 <ul></ul> は順序なしの箇条書き、 <ol></ol> は順序ありの箇条書きです。

リンクと箇条書きを組み合わせるとリンク集が作れるようになります。

「タイトルや見出しをつけよう」ホームページ制作入門

Wordなどで文書作成するときにタイトルや見出しは重要ですよね。もちろん、ホームページ制作でも重要になります。タイトルはもちろん重要ですが、見出しがあればどこが重要なのか簡単に見分けることができます。

タグによる表現

タイトルや見出しはタグと呼ばれる文字ではさむことで表現できます。

タイトル

タイトルは <title>タイトル</title>で表します。ホームページのタイトルはブラウザの上部やタブに表示されます。

見出し

見出しは <hx>見出し</hx> で表します。 xには1から6までの数字が入ります。1から6まで数字が増えていくごとに文字の大きさは小さくなって行きます。

具体例

タイトルは「ほげほげのホームページ トップ」、見出しは「ほげほげのホームページ」となっていることはわかりますよね。ちなみに、見出しの下にある <p></p> で囲まれた部分は段落です。文章を書くところです。その他の部分はとりあえず今は呪文だと思っておきましょう。