FC2ブログ
WebBox norijin note
WebBox norijin
Category: スポンサー広告  

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

TOP > スポンサー広告 > HTML5入門:タグの意味と使い方!!文書の基本構造編 vol.1 

Category: HTML5   Tags: HTML5  head  body  link  title  base  

HTML5入門:タグの意味と使い方!!文書の基本構造編 vol.1 

HTML入門:タグの意味と使い方!!文書の基本構造編 vol.1 

前回までは、「HTML5の基礎知識」について勉強してきました。今回から、2回にわけて「HTML5入門:タグの意味と使い方!!文書の基本構造 」について勉強していきたいと思います。興味あるかたはどうぞ...

HTML5:文書の基本構造を定義する(html,head,body)



要素解説 html
カテゴリー なし
利用できる場所 文書の基本要素として
コンテンツモデル 最初にhead要素、その次にbody要素
要素解説 head
カテゴリー なし
利用できる場所 html要素の最初の要素として
コンテンツモデル iframe要素もsrcdoc属性で指定された文書で使う場合:メタデータ・コンテンツに属する要素を0個以上/それ以外の場合:メタデータ・コンテンツを1個以上(title属性は必須)
要素解説 html
カテゴリー セクション・ルート
利用できる場所 html要素の2番目の要素として
コンテンツモデル フロー・コンテンツ


 HTMLで記述される文書の基本的な構造は、html,head,bodyの3つの要素で定義されています。


HTML入門:タグの意味と使い方!!html要素

 html要素はHTML文書のルートを表し、HTML文書に記述される内容をすべて含む要素です。
ただし、DOCTYPE宣言だけは、<html>タグよりも前に記述します。

 html要素の中にはhead要素とbody要素をこの順で1つずつ入れ、それ以外の要素はすべてhead要素かbody要素の中に入れます。また、html要素にはグローバル属性のlang属性を指定し、文書の言語を表すといいでしょう。


HTML5入門:タグの意味と使い方!!head要素

 head要素は文書のタイトルや基準となるURL、製作者の情報をはじめとした、文書に関する各種の情報を入れる要素です。head要素内に記述された内容は、基本的にtitle要素内のテキスト以外、ブラウザに表示されません。


HTML5入門:タグの意味と使い方!!body要素

 body要素、文書の本文を表します。body要素内に記述された内容が、実際にブラウザに表示される部分になります。

<!DOCTYPE html>
<html lang="ja">
<head>
文書情報
</head>
<body>
文書内容
</body>
</html>


HTML5:文書にタイトルを付けたい(title)



要素解説 title
カテゴリー メタデータ・コンテンンツ
利用できる場所 head要素内に1つだけ
コンテンツモデル テキスト


 文書のタイトルはtitle要素で表します。head要素の中で、1つだけ指定できます。
 一般的にはここに指定されたテキストがブラウザのタイトルバーやタブバーに表示され、ブックマーク(お気に入り)に登録するときのデフォルトのタイトル、履歴などに使われる。また、検索エンジンの検索結果としても表示されます。そのため、ページの内容を表すようなわかりやすいタイトルを、文字数にも気を付けながら指定してください。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF8">
<title>文書のタイトル</title>
</head>
<body>
<p>title要素は文書のタイトルを表します</p>
</body>
</html>

HTML5:基準となるURLを指定したい(base,href,target)



<base ★>
★= href= "絶対パス"
    target= "ウィンドウ名", "_brank", "_self", "_parent", "_top"

要素解説 base
カテゴリー メタデータ・コンテンンツ
利用できる場所 head要素内に1つだけ
コンテンツモデル


 そのHTML文書の基準となるURLはbase要素で表します。head要素の中で、1つだけ指定できます。base要素には、href属性とtarget属性のいずれか
、または、両方を示します。

HTML5入門:タグの意味と使い方!!href属性
 HTML文書の基準と異なるURLを、絶対パスで指定します。この指定を行うと、それ以降に現れる相対URLが、このURLを基準としてブラウザに認識されるようになります。

HTML5入門:タグの意味と使い方!!target属性
 リンク先の文書を読み込むデフォルトのウィンドウを指定します。指定できる値は次の通りです。

 ・ウィンドウ名   指定した名前のウィンドウに表示
 ・_blank      新しいウィンドウを開いて表示
 ・_self       リンク元と同じウィンドウに表示
 ・_parent     現在のウィンドウに親があれば、その親ウィンドウに表示
 ・_top       最上位にウィンドウ(現在のブラウザ領域内全体)に表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF8">
<title>基準となるURLを指定したい</title>
<base href="http://www.○○○.○○.○○/index.html" target="_blank" >
</head>
<body>
<p>株式会社○○は<a href="○○.html">こんな会社</a>です。</p>
</body>
</html>

HTML5:文書同士の関係を表したい(link,rel,href)



<link rel="★" href="◆">
★=キーワード(stylesheet,next,prev,authorなど)
◆=URL

要素解説 link
カテゴリー メタデータ・コンテンンツ
利用できる場所 メタデータ・コンテンツが期待される場所/head要素の子要素であるnoscript要素内
コンテンツモデル


 HTML文書を別のファイルと関連付け、それをどのような関係であるのかを表すには、link要素を使います。関連付けるファイルのURLをhref属性で指定し、その関係性を表すキーワードをrel属性で指定します。関連付けるファイルのMIMEタイプを指定する場合は、type属性で指定します。

HTML5入門:タグの意味と使い方!!rel属性

 関連付けるファイルがこのHTML文書から見てどのような関係であるかを、既定のキーワードで指定します。キーワードについてはまたあとで表にしておきます。
 スタイルシート用の外部ファイルを読み込むときにも、link属性を利用します。例えば、style.cssというファイルを読み込む場合はこのように書きます。


<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="style/css">

下記がサンプルソース

<!DOCTYPE html;>
<htaml lang="ja">
<head>
<meta charset="UTF8">
<title>文書同士の関係を表したい</title>
<link rel="stylesheet" href="style.css" html="text/css">
<link rel="help" href="help.html">
<link rel="prev" href="chapter2.html">
<link rel="next" href="chapter4.html">
<link rel="author" href="profile">
</head>
<body>
サイトの内容をここに書きます
</body>
</html>


関連記事

テーマ : インターネットサービス    ジャンル : コンピュータ

TOP > HTML5 > HTML5入門:タグの意味と使い方!!文書の基本構造編 vol.1 

LEAVE
'A'
COMMENT






11-2018
SUN MON TUE WED THU FRI SAT
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

10   12

月別アーカイブ
タグクラウド
全記事表示リンク

 About
WebBox norijin note

はじめまして!!
1983年4月生まれのAB型。広島出身の元美容師で、その後、大阪にてIT企業に勤め、現在三人で会社を立ち上げる為、日々精進しています。
 ブログでは、WEBについて勉強した内容や、自分が使ってて便利な情報を気ままに発信しています。

 Contact
メールフォーム

名前:
メール:
件名:
本文:

 link
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。