site_make

htmlの基礎構造

2015-02-11

htmlの基礎構造

htmlbase

ページを作るのに書かなければいけないことがあります。
htmlで書くときは外回りから組み上げていくのが基本ですがこれはホントの一番外側にあたる部分です。

表示された時にはまだ映らないというか、レイアウト以前のページ情報(ブラウザの上に出ているタブの部分や検索されたときのページ説明、キーワードなど)などですね。

ほかにもSNSのときに表示するogpなど多くの情報が書けたりもするのですが初心者向けですので最低限で・・・

後半はbodyタグの中身についてです。
ここはページとして表示される部分ですので細かくは書きませんがhtml5では専用のタグがいくつか追加されましたので使いどころだけ説明しています。
いままでは<div>で書いていた部分ですので細かくロボットに見られてしまいますね。

htmlの大外枠


 <!DOCTYPE html> //html5で書いてますよ
 <html>

   <head>
     ここにページ設定(WEBでは見えない)
   </head>

   <body>
     ここにコンテンツ(WEBで映るとこ)
   </body>

 </html>

DOCTYPE html

DOCTYPEとはバージョンいくつのhtmlで書かれているかをブラウザに教えます。

html5ならこれだけ


 <!DOCTYPE html>

xhtml Transitionalなら


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html4 Transitionalなら


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

こんな感じでhtmlのバージョンによって書き方が変わりますので注意しましょう。

headタグ

<head>にはmeta情報というものを書きます。最低限これは必要なので書きておきましょう。SEOにも関わってきますので・・・。


 <meta name="description" content="" >//ページの説明文
 <title>タイトル</title>//ページタイトル
 <link rel="stylesheet" type="text/css" href="***.css" >//cssの読み込み
 <script type="text/javascript" ></script>//javascriptの読み込み

もちろん他にもkeywordやSNSの表示設定、言語指定もありますがhtml5での最低限指定ですので必要なら記述しましょう。
cssとjavascriptは使うならばここって感じでしょうか。理由はまた機会があるときに。

bodyタグ

ここがWEBで見た時に画面に表示される部分ですね。この中にはルールはありませんが定番的に決まっている入力項目があります。html5には専用タグまで用意されたものもあります。

html_img01
全体のイメージ

<header>
これはヘッダー部分を作るタグです。画面の上にロゴやメニューがすべてのページに表示されていますよね。そこがヘッダーです。

<nav>
ヘッダーにあるメインメニュー(グローバルメニュー)用のタグです。

<footer>
フッターを作るタグです。やっぱりすべてのページの一番下の部分も同じコンテンツが表示されてますよね。それがフッターです。

bodyの中身について

ヘッダーとフッターの間にページごとのコンテンツを入れていくのが基本構造となります。これは守っておくことでユーザーが分りやすいサイトを作ることができます。
ユーザーは「ここにはこれがある」と先入観をもってサイトを見ていますので「ここにはこれが・・・ない?」となるとサイトから帰ってしまいますからね。
未熟者ほど奇をてらうです。

copyright 2017 eo
  プロフィール  PR:無料HP  湯沢自動車学校  ゲーム 制作  IID  中古ホイール 三重  タイヤ 格安  Webディレクター 専門学校  BATTLEZ  秩父自動車学校  水晶  長崎 合宿免許  音楽 専門学校 福岡  ランドクルーザー トヨタ 中古  リノベーションセミナー