HOME | フォントフリー | ホームページ無料素材 | 無料壁紙 | ホームページ無料テンプレート | 無料ホームページ作成 | Javascriptサンプル | 検索エンジン上位表示 | 
無料Wordpressテーマ     無料レンタルサーバー
広告掲載のお問い合わせ

ホームページ作成の手順

ホームページ作成前の下準備
1、作成に必要なソフトについて
2、ホームページを作成する目的
3、データを用意しましょう
4、本サイトで使用する素材の紹介
ホームページのタイトルを決める
1、適切なタイトルの決め方
2、ドメインについて
レイアウトを決めよう
1、イメージを形にしてみましょう
2、サイトマップの作成方法
3、一般的なレイアウトパターン
4、モニターの表示サイズに注意しよう
5、ブラウザの表示に注意しよう
6、作成するページのレイアウトの解説
スタイルシート(CSS)の作成方法
1、全体の枠組みの作成
2、メインメニュー、サイドメニューの設定
3、見出しとリンクの設定
XHTMLの作成方法
1、初期設定を行う
2、ヘッダー、メインメニューの作成
3、メイン、サイドメニュー、フッターの作成
4、メニューページの作成
自分のデザインに変えてみよう
1、画像素材の変更方法
2、無料でロゴやヘッダーを作成する方法
Javascriptを設置してみよう
1、画像を半透明にする方法
2、イメージ写真をフェードで切り替える方法
最後にチェックすべきこと
1、動作確認をしましょう
2、表示の確認を行いましょう
ホームページを公開しよう
1、ホームページを公開する方法
2、検索エンジン対策を行いましょう
ホームページをパワーアップしよう
1、ダウンロードサイトの作成方法
2、便利なタグの紹介
HOME > XHTMLの作成方法 > 初期設定を行う

XHTMLの作成方法

初期設定を行う

このエントリーをはてなブックマークに追加
それではXHTML作成方法を解説していきます。
XHTMLとは?
ここでは簡単に説明しておきますので、より専門的なことは、ご自身で興味があれば調べて下さい。
スタイルシート(CSS)の作成方法はこちらです。
HTMLが新しいタグが増えるたびにバージョンアップされてきました。
その後XMLというプログラム言語が開発され、HTMLとXMLとの懸け橋的な役割と
HTMLの後継という位置づけにあります。
現在 HTMLのバージョンは 4.01ですがそれを、XMLのように直しているのが、XHTML1.0
言うことになります。

XHTMLでの決まりが何点かあり、その部分に関しては注意をする必要があります。
   ・最初にXHTMLの宣言を書き込むこと。
   ・タグ内の要素や属性名は小文字で記入すること。
   ・<b>改行タグは、<b />と / を付けること。/の前にスペースを空けることを推奨。
   ・空要素の最後には必ず / を付けると。
    このようにいくつかの決まりがあるので、タグを書くときに注意しましょう。

スタイルシートを読み込ませる設定を行う

メモ帳を開きこれからXHTMLを作成していきます。
コピーして貼り付けてもよいのですが、練習のために書き写す方がよいでしょう。
XHTML作成方法で一番最初に行うことは、XHTMLの宣言です。
まず初めにXHTMLであるという宣言を記入します、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

 HTMLのときは<html>だけでよかったのですが、
 XHTMLではこのように長くなります。他にも書き方は何通りかあるのですが、まずは
 そのまま書き写して下さい。
次に文字コードやページのタイトルと
検索で重要なMETAタグ、スタイルシートを読み込む指定を行います。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>ホームページのタイトル</title>
<meta name="description" content="検索エンジンで表示されるサイトの説明を書く" />
<meta name="keywords" content="検索の対象となってほしいワードを書く" />
<link href="kihon.css" rel="stylesheet" type="text/css" />
</head>
<body>


この間にホームページの中身を記入していきます。


</body>
</html>

 titleタグmetaタグ検索エンジンに検索してもらう重要なところですので、
 よく検討してワードを決定します。
検索エンジン対策についてはこちらで解説しています>>
 linkタグで先ほど作ったスタイルシート(CSS)を読み込む指定をしています。
 スタイルシート(CSS)作成方法>>
次にスタイルシートで指定した枠組みを読み込むタグを記入していきます。
 <body>と</body>の間に下記を記入して下さい。

<div id="contents">

  <div id="header">
  </div>


  <div id="navbar">
  </div>


  <div id="main">
  </div>


  <div id="side">
  </div>


  <address>
  </address>

</div>

コンテンツをの中に

順番に ヘーダー
       ↓
     メニュー
       ↓
     メイン部分
       ↓

     サイドメニュー
       ↓
     フッター部分

のタグを記入していきます。

これで先ほど作成したスタイルシートをXHTMLが読み込んでくれます。
ここで一度、メモ帳を保存します。
「ファイル」⇒「名前を付けて保存」を選択  index.html として保存します。

ホームページではトップのページのファイル名が必ずindex.htmlとなります。
index.htmlとすることで、ドメインを入力した際、必ずこのページが先頭に表示されるように
なります。

保存する際、下の方にある文字コードをプルダウンで「UTF-8」にしてから保存して下さい。
  作成した index.htmlを ダブルクリックするとブラウザで開きます。
  すでにメモ帳ではなくインターネットのページとして開くはずです。
どうです。壁紙や外枠ができてなんとなくホームページらしきものが出来ているはずです。
次からは、index.htmlファイルを右クリックで「プログラムから開く」を選択し、  「メモ帳」を
選択してから開くようにしてください。

Next Page
 XHTMLの作成方法
2、ヘッダー、メインメニューの作成 >>
         月額105円~/30GB/レンタルサーバー

 【PR】
月額1,050円で本格的なお店のホームページ!
簡単!無料!自分のサイトでダウンロード販売!
無料検索エンジン上位表示補助ツール!LINKopty
ページランク3~5SEOに大変役立つオールドドメイン
無料SEOツール ZERO TOOLSでアクセスアップ!
月額無料のネットショップ機能付きレンタルサーバー
営業・委託販売・SOHO専門!お仕事探し完全無料!

Web作成に便利なサイト

SEO無料ツールの紹介
CGI無料配布サイトの紹介
無料でショッピングサイトを開設
素材が無料で作成できるソフト
無料で使える写真を配布しているサイト
テンプレート無料配布
Flash素材を無料配布しているサイト

PRサイト

SEO対策 アクセスアップ100の技
実践で覚えるスタイルシート作成方法
格安レンタルサーバー比較ランキング
Wordpressテーマ無料ダウンロード
ホームページ作成無料ツールのまとめ
ホームページ作成費用無料!
美少女発見!毎日写真更新dear Girls
美少女写真のdear Girls
Copy Right(C)2011 プロ並みのホームページを作る方法 All rights reserved.