HTML(Hyper Text Markup Language)

Warning: count(): Parameter must be an array or an object that implements Countable in /home/xs638785/agile-software.site/public_html/wp-content/plugins/rich-table-of-content/functions.php on line 490

HTMLはWebページの土台となるファイルを作成する言語です。
タグ<>で文字列を囲むことで見出しやリンクを指定しています。

基礎

webサイトにアクセスしたときに一番初めに表示されるページのhtmlは「index.html」とするのが基本です。

構成

<!docktype html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMLの基礎</title>
        <meta name="description" content="HTMLのおさらいをしましょう"
    </head>
    <body>
        <h1>HTMLのタグ</h1>
        <p>タグの種類によって用途が変わります。</p>
    </body>
</html>

Doctype

そのHTMLファイルがどのバージョンのHTMLで作られているのかを記述します。
特に指定がなければHTMLはHTML5のことを指します。

html

これはHTMLの文書であることを表していて、HTMLファイルを作成するときには必ず書きます。
langはWebページの言語を設定できます。Japaneseの略である「ja」を設定しています。

head

headタグの中の情報はブラウザー上には直接表示されません。

文字コードをUTF-8に指定
<title>タグでページのタイトルを指定

文字コード

HTMLの文字コードにはutf-8、Shift_JIS、EUC-JPなどいくつか種類があります。
一般的にはutf-8を用います。

title

<title></title>タグで囲まれた内容がページのタイトルとなります。
このタイトルはウェブブラウザのタブに表示される。

body

<body>タグ内に書かれたものがブラウザー上で表示されます。

コメントアウト

<!--    -->で囲まれた文章はコメントとして認識されウェブブラウザ上には表示されません。

head内にはページの情報を、
body内には実際に表示したいコンテンツを書く

空要素

画面に表示するコンテンツがないタグは空要素

<meta>タグ
<link>タグ
<br>タグ・・・改行を意味するタグ
<img>タグ・・・画像を表示するタグ
<input>タグ・・・フォームのテキストフィールドチェックボックスを表示するタグ

親要素

ある要素から見て1階層上にある要素を親要素、1階下にある要素を子要素といいます。

タグと属性

属性とは要素に対して新たな機能を追加することができます。

<a>タグ

属性	意味	例
href	リンク先のURL	<a href=”http://example.com”></a>

<b>タグ

属性	意味	例
	囲んだテキストを太字にする	<b>受付:</b>

<i>タグ

属性	意味	例
	囲んだテキストをイタリックにする	<i>12%:</i>

<u>タグ

属性	意味	例
	囲んだテキストに下線を引く	<i>12%:</i>

<img>タグ

属性	意味	例
src	画像のファイルパス	<img src=”images/dog.jpg”>

src属性という場所を設定する属性を使って指定する。
alt属性は画像がうまく読み込めなかった場合に画像に代わって表示するテキスト。

index.htmlと同じフォルダに画像がある場合

imagesフォルダの中に画像がある場合

topフォルダの中にindex.htmlファイルがあって、imagesフォルダの中に画像がある場合

<h>タグ

属性	意味	例
<h1>	見出し	<h1>見出しを表示</h1>

<p>タグ

属性	意味	例
<p>	文章の段落を表す	<p></p>