ホムつく式 ホームページ作成講座

人気ホームページが作れる簡単作成講座
HTMLとXHTMLのどちらで作成するか決める

1−3 HTMLとXHTMLのどちらで作成するか決める

作成したHTMLファイルを解説したいと思います。
HTMLファイルを編集するときは、マイドキュメントからファイルをクリックして開くのではなく、使用してるホームページ作成ソフトやメモ帳などの文書ソフトから開かないと、編集できないことがあります。
(例 ソフトの起動>ファイル>サイトを開く )

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title></title>

</head>

<body>

</body>

</html>

HTMLとXHTMLのどちらで学ぶべき?

さっきから見てもらっている呪文のようなHTMLソースは、実はHTMLではありません。
ホームページを作成するためにはHTMLとは別に、XHTMLというものがあり、上記はそのXHTMLです。

HTMLだけでも難しそうなのにXHTMLなんて言うと、さらに難しく感じてしまうかもしれませんが、記載方法は、どちらもほとんど同じで、難しくなるというわけではありませんから安心してください。

現在は、多くのホームページではXHTMLが取り入れられ、ブログなどもXHTMLで書かれていることが多いので、これから学ぶのであればXHTMLをお勧めします。


■追記
今までHTMLは開発を終了し、すべてXHTMLに移行することが決定していましたが、突然方向転換で、HTMLの開発が進むことになりました。
今後、HTMLとXHTMLは共存するのではないかと思います。
ホムつくでは、両方共説明しているのでご安心ください。
ネットの世界は、変化が極端で振り回されますが、柔軟に対応していきましょう。


ただ、ホームページ作成ソフトによってはXHTMLに非対応の場合があり、HTMLで作成している人もまだまだ多いので、ホムつく講座では、HTMLとXHTMLのどちらでも学べるように解説しています。

あなたのホームページ作成ソフトが対応しているかは、
新規ページのココを見てください。↓

■XHTML
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"

■HTML
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"

新規ページの表示がHTML形式になっていても、初期設定などでXHTML形式を選べるソフトがあるようです。

簡単に見えるかな・・・

すでにHTMLソースを見た時点で、泣きそうになっている方もいるかもしれませんが、ちょっぴり簡単に見える魔法をかけたいと思います。

チャララララン♪

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

どうですか?なんだかすっきりして簡単そうに見えませんか?
作成するなかで必要なタグだけにしてみました。
説明を分かりやすくするのが目的ですので、実際のあなたの作成画面は簡略化する必要はないですよ。

このページをブックマークする→ Yahoo!ブックマークに登録 Yahoo!ブックマークに登録

初心者さんのためのホームページ作成講座

はじめに

Step1 ホームページの土台を作る
  1. ホームページデータの保存先フォルダを作る
  2. HTMLファイルの作成
  3. HTMLとXHTMLのどちらで作成するか決める
  4. CSS(スタイルシート)の外部ファイルの作成
Step2 CSSレイアウトの構築
  1. CSSレイアウトは<div>で作る
  2. XHTML/HTMLタグへ個別にCSS(スタイルシート)を指定する
  3. 上下に並んだ<div>..</div>を左右に配置させる
  4. Webページの横幅を指定する
  5. 「float」によるCSSレイアウトの崩れを防ぐ
Step3 レイアウトをデザインする
  1. 枠線でレイアウトを区切る
  2. 「border」によるCSSレイアウトの崩れを防ぐ
  3. レイアウトの背景を指定する
Step4 XHTML(HTML)をもっと理解しよう
  1. 超重要!Webページの内容を示すタイトル
  2. 基本は「見出し」と「本文」でコンテンツを作成する
  3. 箇条書きで見やすく整理する
  4. 万能タグ<div>は「class属性」で使いこなそう
Step5 CSS(スタイルシート)でデザインする
  1. 文字のサイズ(フォントサイズ)を指定する
  2. 文字の色を指定する
  3. 文字に背景色を指定する
  4. 何もない空間がデザイン性と可読性をアップさせる
  5. 「padding」と「margin」をコントロールして、文章レイアウトを整える
  6. 上下左右の余白を個別に指定する
  7. 左寄せ、中央、右寄せを指定する
  8. 「auto」でWebページを中央表示させる
Step6 ページ作成からFTPアップロード
  1. Webページの新規作成
  2. ホームページレイアウトの基本構成
  3. 画像を掲載する
  4. 文字を装飾してみよう
  5. リンクでWebページをつなぐ
  6. ホームページの完成とアップロード
このページのトップへ戻る
ホムつく講座の講師は
こんなヤツ!

ホムつく講座の講師はこんなヤツ!ホームページを作っていたら、この楽しさを、あなたに伝えてくなりました。ホムつく式のホームページの作り方を体験してみてください。

→メッセージ

ホームページ作成に
必要なものは?

ホムつく講座がおすすめするソフトやレンタルサーバーを紹介しています。初心者の方や、悩んでいる方は是非参考にしてみてください。

→スタートガイド

ホームページを初めて作るのですが・・

ホームページはXHTMLとCSSで作ります。ほむつく講座では初心者の方にわかりやすいと評判の初心者講座があります。

→初心者講座

もっとデザインを
良くしたい

ホムつく講座では見た目だけが良いデザインではなく、ユーザー(利用者)の方が安心して、ホームページを閲覧できるデザインを学べます。

→Webデザイン

ホームページにアクセスが集まりません

ホームページは作れば沢山のアクセスが集まるわけではありません。そして、アクセスが多いだけのホームページでも意味がありません。あなたのファンができる人気ホームページを作り方を学びましょう。

→人気ホームページ