HTMLまとめ

program

概要

HTMLとは「Hyper Text Markup Language」の略で、Webページの土台となるファイルを作成する言語である。主に＜＞で挟まれた『タグ』と呼ばれる特殊な文字列で囲んで書き込んでいく。

本記事ではWeb制作を勉強していくにあたってHTMLに関する勉強したことを書きまとめたいと思う。

HTMLファイルの骨組み

HTMLで書かれる主なコードは、実際に表示されるbodyと、表示されることはないが、ページのタイトルや説明文、使用する外部ファイルのリンクなどのページの情報を記述するhead部分に分かれる。

body部分の主な構成は、header, main, footer, の三つから構成される。
さらに各種 divタブのようなもので種類を区切り、h1タブやｐタブを使い見出しや文字を記述しWebページを制作していく。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title> title </title>
    <meta name=" " content=" ">
  </head>

  <body>
    <h1></h1>
    <p></P>
  </body>
</html>
各コードの解説

・<!doctype html>
Doctype宣言。そのページがどのバージョンのHTMLで、どの仕様に合わせて作られているのかを書いている。特に指定がない場合「html＝html5」
・<html></html>
Doctype宣言のすぐ後に記述。HTMLの文章だということを表す。また「lang」はWebページの言語を設定。
・<head></head>
ページのタイトルや説明文、使用する外部ファイルのリンクなどのページの情報を記述。
ブラウザには表示されない。
・<meta charset=”UTF-8″>
文字コードを「UTF-8」にするという指定。
・<title></title>
ページのタイトルを記述。
・<meta name=” ” content=” “>
ページについての説明文を記述。
・<body></body>
HTML文書の本体部分

見出し

<h1>~<h6>タグを使用。
hの後の数字が大きくなるほど小さい見出しになる。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

文章の表示

<p>タグを使い文章のまとまりを表示させる。
「p」は英語で段落を意味する「Paragraph」のｐ。

<p>文章</p>

画像の挿入

<img>タグを使用。
src属性を使い「どの画像を表示するのか」を指定する。
また、Webブラウザで画像がうまく読み込めなかった場合に、画像の代わりに表示させるテキストをalt属性を使い記述する。

<img src="image.jpg" alt="text">

リンクの挿入

<a>タグを使用。
<a href=””>と</a>で挟み、リンク先をherf属性で指定する。

<a href="https://google.co.jp">Googleへ</a>

<a href="https://google.co.jp">
  <img src="logo.jpg" alt="google logo">
</a>
解説

デフォルトではリンク部分が青色になり下線がつく。
上のコードは「Googleへ」をクリックするとGoogleのサイトへと飛ぶようになっている。
文字だけでなく画像にリンクを張ることも可。

リストの表示

<ul>タグ + <li>タグを使用。
また、番号のついたリストにする場合は <ol>タグ + <li>タグ を使用する。

「ul」は「Unordered List」の略で、順序の決まっていないリストを意味する。
「li」は「List Item」の略で、箇条書きにするリストアイテムを意味する。
「ol」は「Ordered List」の略で、順序立てたリストを意味する。

<ul>タグだけでは機能せず、<ul>タグ内に<li>タグを使用しリスト項目を追加していく。

<ul>
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
</ul>

<ol>
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
</ol>

表を制作する

表組みは複数のタグを合わせて使用する。

タグ目的
<table>表を示すタグ。表全体を囲む
<tr>「Table Row」の略。
表1行を囲む
<th>「Table Header」の略。
表の見出しとなるセルを作成
<td>「Table Date」の略。
表のデータとなるセルを作成
<table border="1">
  <tr>
    <th>cell1</th>
    <th>cell2</th>
  </tr>
  <tr>
    <th>cell3</th>
    <th>cell4</th>
  </tr>
</table>

フォームの作成

フォームは、<form>タグを使用して作成。
フォームで使用するすべてのパーツを<form>タグで囲む。

主な属性3種

・action :データの送信先ページを指定
・method :データの転送方法の指定。主にgetかpostを入力
・name :フォームの名前を指定

フォームで使うパーツ

<input>タグを主に使い、type属性で用途別に表示するパーツを変える。

属性値用途
text1行のテキスト
search検索するときのテキスト
emailメールアドレス
tel電話番号
urlWebサイトのURL
radioラジオボタン
複数の選択肢から1つを選択してもらう時使用
checkboxチェックボックス
複数の項目選択可能
submitフォームに入力した内容を送信

ブロック要素でのグループ分け

headerページ上部にある要素
navメインのナビゲーションメニュー
articleページ内の記事となる部分
section意味のあるグループをまとめるためのタグ
mainページの核となるコンテンツ全体
aside本文ではない補足情報
footerページ下部にある部分
div意味を持たないブロック要素

参考

・1冊ですべて身につくHTML ＆CSSとWebデザイン入門講座
　著者：Mana
　発行所：SBクリエイティブ株式会社

・Progete　HTML＆CSSコース

コメント

タイトルとURLをコピーしました