▼スポンサー広告
次の広告へ☺
▼スポンサー広告
次の広告へ☺
HTMLとは(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作るための最も基本的な言語で、
WEBブラウザって言うソフトを使い閲覧します、ソフトは色々種類があるので試してみるのも良いですね！
・
さて、HTMLを書く準備をします！
前書の「ホームページを作ろう!」で書いた通りindex.htmlファイルをメモ帳で開きます！
『 HTMLの書き方 』
STEP1『DOCTYPE宣言』はHTMLのバージョンやブラウザのモードを記入します。
STEP2『HTML宣言』は宣言内はHTMLで書かれている事を示します。
STEP3『HEAD宣言』はページ情報などを記入します。検索エンジンが情報収集するのも「head」内から収集する事が多いようです。
STEP4『body宣言』は宣言内に本文を記入し、観覧者が閲覧できるようになります。
ひとつずつ見て行きましょうね。
STEP1『DOCTYPE宣言』HTMLタグとは(マークアップ)と言われる「<文書の意味>～文書～</文書の意味>」の記号で、文章をその意味ごとに囲んで作成していきます。
●さて、HTMLを書く準備をします！前書で書いた通りindex.htmlファイルをメモ帳で開きます！
●このタグは、「HTML5」で作成しました！って宣言しブラウザを標準モードにします！
ちなみに「DOCTYPE宣言」って言い、略して「DTD」(Document Type Definition、DTD、文書型宣言)この宣言は必須だから覚えておいて下さい！
※上記はバージョン5での説明となっております、他のバージョンで作成する場合、DTDも記入します。
基本構造はこんな感じです！
| [ index.html ]内 | |
|
<!DOCTYPE html> |
説明 ←DOCTYPE宣言 |
|
<html> | ←HTML開始宣言 |
| <head> |
←HEAD開始 この中に各種設定文を書きます。 |
| </head> | ←HEAD終了 |
| <body> |
←BODY開始 この中に表示文を書きます。 |
|
</body> | ←BODY終了 |
|
</html> | ←HTML終了宣言 |
ちなみに「DOCTYPE宣言」って言い、略して「DTD」(Document Type Definition、DTD、文書型宣言)この宣言は必須だから覚えておいて下さい！
<!DOCTYPE html>
※上記はバージョン5での説明となっております、他のバージョンで作成する場合、DTDも記入します。
STEP2『HTML宣言』<html>～</html>内はHTML言語で書かれている事を宣言します！
●地域の宣言はここで行えます。 （下の例では「日本」を宣言しています！）
●ちなみに< >の中身(html)の部分を要素と呼び、その隣(lang)の部分を属性と呼びます！
<html lang="ja">
| [ index.html ]内 | |
|
<!DOCTYPE html> |
説明 ←DOCTYPE宣言 |
|
<html lang="ja"> | ←HTML開始宣言(地域は「日本」で宣言) |
| <head> |
←HEAD開始 この中に各種設定文を書きます。 |
| </head> | ←HEAD終了 |
| <body> |
←BODY開始 この中に表示文を書きます。 |
|
</body> | ←BODY終了 |
|
</html> | ←HTML終了宣言 |
STEP3『HEAD宣言』ホームページの設定をします！<head>から</head>内にはタイトルとかコメントとかその他情報を書いていきます！
●<head>内に書く要素は大きくわけて「title要素」「meta要素」「link要素」の3種類です。
●各要素の説明
title要素の説明
meta要素の説明
link要素の説明
| [ index.html ]内 | |
|
<!DOCTYPE html> |
説明 ←DOCTYPE宣言 |
|
<html lang="ja"> | ←HTML開始宣言(地域は「日本」で宣言) |
|
<head> <title>ページのタイトル</title> <meta charset="utf-8"> <meta name="description" content="説明文"> <link rel="stylesheet" href="ファイルの場所"> |
←HEAD開始 この中にページのタイトルを書きます。 文字コードを指定。 webページの説明説明文。 リンクファイルの場所 |
| </head> | ←HEAD終了 |
| <body> |
←BODY開始 この中に表示文を書きます。 |
|
</body> | ←BODY終了 |
|
</html> | ←HTML終了宣言 |
title要素の説明
<title>ページのタイトルを記入</title>
title属性は検索結果やブラウザのタブ名に反映されます、30文字以内が理想的といわれています。
title属性は検索結果やブラウザのタブ名に反映されます、30文字以内が理想的といわれています。
meta要素の説明
<meta charset="utf-8">
charset属性はホームページの文字コードを指定します！メモ帳で文字コード「UTF-8N」に指定して保存したの覚えてますか？
ここでは「UTF-8」で作成したことを宣言します。文字化けを防ぐために必ず書く事をお勧めします。
charset属性はホームページの文字コードを指定します！メモ帳で文字コード「UTF-8N」に指定して保存したの覚えてますか？
ここでは「UTF-8」で作成したことを宣言します。文字化けを防ぐために必ず書く事をお勧めします。
<meta name="description" content="webページの説明">
name属性で「description」を指定して「content」で説明文を記入します。
この説明文は検索結果の説明文に使用され、120文字以内が理想的といわれています。
name属性で「description」を指定して「content」で説明文を記入します。
この説明文は検索結果の説明文に使用され、120文字以内が理想的といわれています。
link要素の説明
<link rel="stylesheet" href="ファイルの場所">
外部のホームページとの関係性やcss・javascriptファイルの読み込み先などを指定します。
rel属性で「stylesheet」を指定して「href」でファイルの場所とファイル名を記入します。
cssの読み込み方法はこちらの記事で詳しく解説しています。
詳しくはこちら外部のホームページとの関係性やcss・javascriptファイルの読み込み先などを指定します。
rel属性で「stylesheet」を指定して「href」でファイルの場所とファイル名を記入します。
cssの読み込み方法はこちらの記事で詳しく解説しています。
STEP4『body宣言』宣言内に内容文を記入することで、観覧者が閲覧できるようになります。
●文字以外にも「表」や「写真」などの表示もできます。
※表示例
こんにちは
<body>から</body>内にホームページの内容を書き、メモ帳を保存しFTPにアップロードでOKです！
※保存する際にUTF-8Nで保存してください！
以上がHTML基本構造となります。
| [ index.html ]内 | |
|
<!DOCTYPE html> |
説明 ←DOCTYPE宣言 |
|
<html lang="ja"> | ←HTML開始宣言(地域は「日本」で宣言) |
|
<head> <title>ページのタイトル</title> <meta charset="utf-8"> <meta name="description" content="説明文"> <link rel="stylesheet" href="ファイルの場所"> |
←HEAD開始 この中にページのタイトルを書きます。 文字コードを指定。 webページの説明説明文。 リンクファイルの場所 |
| </head> | ←HEAD終了 |
| <body> | ←BODY開始 |
| こんにちは | この中に文を書きます。 |
|
<table> <tr> <td>表です</td> <td>表です</td> </tr> <tr> <td>表です</td> <td>表です</td> </tr> </table> | 表の作成。 |
| <img src="img/apple-touch-icon-180x180.png"> | 写真表示。 |
|
</body> | ←BODY終了 |
|
</html> | ←HTML終了宣言 |
| 表です | 表です |
| 表です | 表です |
<body>から</body>内にホームページの内容を書き、メモ帳を保存しFTPにアップロードでOKです！
※保存する際にUTF-8Nで保存してください！
以上がHTML基本構造となります。
▼スポンサー広告
次の広告へ☺
▼スポンサー広告
次の広告へ☺