Infinity web schoolこの講座では【３】のホームページ（家）の作成をメインに進めて行きます。
ただ自分のPCで作成しているだけでは完成しても、それを閲覧できるのは自分だけです。世の中に公開するにはサーバーにアップロードする必要があります。
最終的にドメインを取得して、完成したホームページをサーバーにアップするところまで学習します。
家を建てるには土地が必要です。インターネット上の土地を借りるイメージです。
住所の意味を持つドメイン（URLなどの言い方もします）
https://www.spiritual-adviser.com/ ←これがドメイン
例：東京都渋谷区0-0-0
ドメイン（住所）をサーバー（土地）にあるホームぺージ（家）に登録する。
借りた土地に家を建てて住所を登録するイメージです。
まずは自分のPC（ローカル）で作成して行きます。HTML・CSSや画像を使って作成し、ある程度出来上がってきたらサーバーにアップしてみましょう！
HyperText Markup Language
印をつけてすごいテキストにする言語
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>無題</title>
</head>
<body>
</body>
</html>
<要素名>意味づけの対象</要素名> (開始タグ・終了タグ)
＜br＞タグなど囲まなくてよい要素（空要素）もある
<要素名 属性名＝"属性値">・・・</要素名>
記述例 <h2 style="color:red;">Infinity school</h2>
記述例2 <h2 style="color:red;" class="pickup">Infinity school</h2>
※半角スペースで区切って複数の属性を記述できる
style属性：デザイン定義を行う属性
class属性：要素に名前をつける属性
html5の場合
<meta charset="UTF-8">
テキストファイルを保存する時に、文字データをどのように取り扱うのかを決めているのが文字コードです。
編集中ファイルの文字コードをmetaタグで指定します。
meta要素で指定する情報はブラウザで表示させる必要がないのでhead要素内に記述します。
文字コードをHTMLファイル内に明記することで文字化けを防ぐことができます。
もし保存時の文字コードとmeta要素で指定した文字コードが間違っていると文字化けが発生します。
<title>ページのタイトル</title>
ページタイトルを定義するにはtitleタグを使用します。title要素はhead要素内に定義され、対象となった文字列はブラウザのタイトルバーやタブに表示されます。
<h1>1番重要な見出し</h1> <h2>2番目に重要な見出し</h2> <h3>3番目に重要な見出し</h3> <h4>4番目に重要な見出し</h4> <h5>5番目に重要な見出し</h5> <h6>6番目に重要な見出し</h6>
見出しを定義するにはh1～h6タグを使用します。hの後の数字が小さいほど重要度が高くなります。見出し要素は文書構造の骨格を決める重要な要素なので、なるべく重要度に応じてh1から順に定義されるようにします。そうすることで明確な文書構造になります。
<p>段落内のテキスト</p> <p>段落内のテキスト</p>
段落を定義するにはpタグを使用します。主に文章が段落の対象になります。
※ソースコード上で改行していてもブラウザ上で改行されることはありません。
ブラウザ上で改行させるには＜br＞タグを使用します。br要素は終了タグを持たないのが特徴。
hrタグはブラウザ上に水平線を表示します。brタグ同様、終了タグのない要素なので、文書型宣言を確認してタグを記述しましょう。
HTML5では段落単位での内容の変わり目や文書の区切りという意味が追加されました。
文書内の重要な部分に使用することができます。文章の変化を問わないためemに比べ自由に使うことができます。協調の意味はないため、協調を示す場合はemタグを使いましょう。
1:one 10:ten 100:hundred
pre要素で囲まれると整形済みテキストと認識され、空白文字や改行などを含めソースコードと同じ状態でブラウザに表示されます。主にプログラムコード、アスキーアート、電子メールの内容等をそのまま表示させたい時に使います。
pre要素で定義した部分はbrタグが無くても改行されます。
名前の由来：block quotation（引用文のかたまり）
名前の由来：quotation（引用）
名前の由来：citation（出典・参照先）
名前の由来：insert（追加）
名前の由来：delete（削除）
HTMLは文書構造を定義する言語なので、見た目に関するタグは非推奨となりCSSがその役割を引き継ぐことになりました。しかしHTML5では意味を再定義し直して利用可能となっています。
名前の由来：italic（斜体）
名前の由来：bold（太字）
※強調や重要性の意味はありません。デザインのために印をつける必要があるとき使用することが多い。
リストは項目を箇条書きにする時に使用し「番号なしリスト」「番号付きリスト」「定義リスト」の3種類から選んで定義します。
名前の由来：unordered list(番号なしリスト)
名前の由来：list item(リスト項目)
<ul> <li>Windows</li> <li>Macintosh</li> <li>Linux</li> </ul>
番号なしリストはul要素とli要素を組み合わせて作成します。
ulタグは箇条書きの「枠」をliタグは「リスト項目」を定義します。
これらのタグはセットで使われているため、リスト項目用タグであるli要素の対象文字列部分以外に他のタグを記述することはできません。
名前の由来：ordered list(番号付きリスト)
名前の由来：list item(リスト項目)
<ol> <li>Windows</li> <li>Macintosh</li> <li>Linux</li> </ol>
番号付きリストはol要素とli要素を組み合わせて作成します。ol(ordered list)タグは箇条書きの「枠」を、li(list item)タグは 「リスト項目」を定義します。番号付きリストは項目の先頭に番号マーカーが表示されます。
番号なしリストと同様、これらのタグはセットで使われるため、リスト項目タグである要素の対象文字列部分以外に他のタグを記述することはできません。
通常開始番号は「1」から始まりますが、ol要素にstart属性を記述することで変更できなくなります。
<ol start="5"> <li>Windows</li> <li>Macintosh</li> <li>Linux</li> </ol>
li要素にvalue属性を記述することで連番を変更できます。次の項目は変更した番号から連番になります。
<ol> <li>Windows</li> <li start="5">Macintosh</li> <li>Linux</li> </ol>
名前の由来：definition list、description list(定義リスト)
名前の由来：definition term(定義項目名)
名前の由来：definition description(定義項目の説明)
<dl> <dt>1日目</dt> <dd>18時から東京公演</dd> <dt>2日目</dt> <dd>20時から大阪公演</dd> </dl>
名前の由来：table(表組)
名前の由来：table row(行)
名前の由来：table header cell(見出しセル)
名前の由来：table data cell(データセル、通常)
<table> <tr><th>製品名</th><th>価格</th></tr> <tr><td>ノートPC</td><td>10万円</td></tr> <tr><td>デスクトップPC</td><td>15万円</td></tr> </table>
テーブルはtable要素、tr要素、th要素、td要素を組み合わせて作成します。上記のソースコードではtr要素が３つあるので3行、1行（tr要素）の中にth要素、もしくはtd要素が２つあるので2列、つまり3行2列の表組が作成されます。
今までのリストと同様、テーブルタグもセットで使われるため、th要素・td要素の対象文字列部分以外に他のタグを記述することはできません。
table要素にboeder属性を記述することで枠線を表示することができます。この属性は非推奨ではありませんが、見た目に関するものなのでCSSのborderプロパティで指定する方法を推奨します。border属性もしくはCSSでborderプロパティの指定がない場合、枠線は表示されません。
列を連結する場合、th要素もしくはtd要素にcolspan属性（列をまとめる）を記述し、まとめる列数を数値で指定します。
行を連結する場合、th要素もしくはtd要素にrowspan属性（行をまとめる）を記述し、まとめる行数を数値で指定します。
名前の由来：anchor(アンカー、錨)
a要素を使ってリンクを定義する場合、href属性（Hypertext REFerence）を記述しなければならない。
リンクを定義すると今表示しているページから別のページに表示を切り替えることができます。
リンクの定義にはaタグとhref属性を使用し、href属性の属性値に表示したいページのファイルパスを記述します。
リンク対象文字には下線が引かれ、リンク先ページ見訪問時には文字色「青」、訪問時には文字色「紫」で表示されます。リンクをクリックするとhref属性で指定したページが表示されます。
リンク先を別ウィンドウで表示させる時はtarget属性を使用し、値に「_blank」と指定します。主に外部サイトへのリンクに付与する属性です。
リンクを設定する場合、href属性にファイルの場所を示すファイルパスを記述します。ファイルパスには絶対パスと相対パスの2種類の指定方法があります。ここでは絶対パスと相対パスの2種類の指定方法があります。ここでは絶対パス、相対パスとは何なのかを解説していきます。
主に外部サイトへのリンクに使用されるのが絶対パスです。 絶対パスは私たちが普段使っている住所と同じで、広い地域から狭い地域へと対象を絞っていき該当するファイルを指定します。
http://jobtech.jp/html_css/index.html
httpはHyperText Transfer Protocolの頭文字でHTMLをやりとりする通信規約の意味
ドメインのこと
パス内の「/」はフォルダを意味する。
主に自サイトファイルへのリンクに使用されるのが相対パスです。
相対パスは編集中のファイルからリンク先ファイルへのルートを指定するので、それぞれのファイルの位置によって記述が変わります。
相対パスを指定する場合は次の記号を使用してルートを指定します。
ページ内を移動させる時に使用するのがページ内リンクです。ページ内リンクを定義するには以下の２つの手順を実行します。
<要素名 id="名前">対象のコンテンツ</要素名>
id属性とは要素に名前をつけるための属性で、すべての要素に記述できます。
ブラウザ上の見た目の変かはありません。
属性値には好きな名前をつけることができますが、同一ファイル内に同じ名前が複数存在してはいけないというルールがあります。
またid属性の属性値には半角の英字、数字、-（ハイフン）、_（アンダーバー）のみ使うことができ、頭文字は必ず英語でなければいけません。
id属性はほぼすべての要素に記述することができます。
※HTML4.01,XHTML1.1の場合base,head,html,meta,script,style,titleに指定できない。
id="header" id="news1" id="side_nav" id="menu-2"
id="ｈｅａｄｅｒ" id="1news" id="サイドナビ" id="menu*2"
名前の由来：image(イメージ、画像)
＜img src="ファイルパス" alt="代替文字"＞
画像が表示される
img要素に必ず記述しなければならない必須属性「です。画像の場所を相対パス、もしくは絶対パスで記述します。src属性の名前の由来は「source(参照元)」です。
画僧の説明を委する属性で、なんらかの事情で画像が表示されなかった時、代わりにこの文章を表示します。alt属性の名前の由来は「alternative(代替)」です。
※以前は必須属性でしたがHTML5では文脈上意味を持たない画像（装飾等）では省略可能。
画像の幅を指定する属性です。この属性を指定することで画像の幅を指定することができます。width属性のみ指定した場合、同じ比率で画像の高さが変更されます。必須属性ではないので省略可能。省略時は画像が持つ幅で表示されます。
画像の高さを指定する属性です。この属性を指定することで画像の高さを変更することができます。height属性のみ指定した場合、同じ比率で画像の幅が変更されます。必須属性ではないので省略可能。省略時は画像が持つ高さで表示されます。
画像にリンクを定義するにはimgタグをaタグで囲みます。
<a href="リンク先URL"><img src="ファイルパス" alt="代替文字"></a>
HTMLで意味を持つ記号や特殊な文字をブラウザに表示させる場合、実態参照を使用しなければいけません。たとえばHTMLタグの開始と終了を意味する「<」や「>」がHTMLで意味を持つ記号の代表です。
| 文字 | 実態参照 | 実態名の由来 |
|---|---|---|
| < | ＆lt; | less than |
| > | ＆gt; | greater than |
| " | ＆quot; | quotation |
| & | ＆amp; | ampersand |
| 文字 | 実態参照 | 実態名の由来 |
|---|---|---|
| (半角スペース) | ＆nbsp; | no break space |
| © | ＆copy; | コピーライト |
| ™ | ＆trade; | トレードマーク |
| ♥ | ＆hearts; | ハート |
body要素の中で使われる各要素はブロックレベル要素とインライン要素の二つのカテゴリのどちらかに属します。また、インライン要素の中には置換インライン要素という小カテゴリがあります。
ブロックレベル要素には以下の特徴があります。
| 要素 | 内容 |
|---|---|
| h1,h6 | 見出し |
| p | 段落 |
| ul,ol,dl,li,dt,dd | リスト関連 |
| table,tr,th,td | 表組関連 |
| blockquote | 長い引用文 |
| div | ブロックレベル要素としてグループ化する要素 |
インライン要素には以下の特徴があります。
| 要素 | 内容 |
|---|---|
| a | リンク |
| emstrong | 強調,強い重要性 |
| cite | 引用元 |
| span | インライン要素としてグループ化する要素 |
置換インライン要素はインライン要素の子カテゴリであり、基本性質はインラインと同じです。違っている点は、幅や高さを持てる点だけです。
| 要素 | 内容 |
|---|---|
| img | 画像 |
| input | 入力パーツ |
| select | 選択ボックス |
| button | ボタン |
ブロックレベル要素は改行されて表示され、要素内にブロックレベル要素もインライン要素も含むことができます（例外あり：p要素）。インライン要素には横並びで表示され、要素内にはテキストかインライン要素しか含むことができません。
ブロックレベル要素
ブロックレベル要素
ブロックレベル要素
インライン要素
インライン要素
インライン要素
HTMLコメントの記述
※ブラウザには表示されない
コメントは制作時のメモ書きなどに使用されます。HTMLファイル内に記述されたコメントはブラウザに表示されません。
コメントの記述法は「<!--」でコメントが開始され、「-->」でコメントが終了します。
ただし、コメントはブラウザ上に表示されないだけで、ソースコードを表示させれば誰でも見ることができます。重要な情報をコメントに記述するのはやめましょう。
ブラウザ表示