トップページ > ホームページ作成 > ホームページ作成HTMLの基礎

ホームページ作成の基礎、HTMLを覚える

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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

最初に書かれている文章。和訳すると
このファイルはXHTML1.0の文法で、文字コードはシフトJISです。
W3CのXHTMLバージョン1.0の文法に則っていますが、古い文法も使ってるかもしれません。
このページは日本語で書かれています。

といった感じでしょうか?
この部分は変更せず、そのままで大丈夫です。

この次にヘッダーという部分になります。
<head> ここから </head> ここまでの部分です。
このサイトのヘッダーは

1行目  <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
2行目  <meta http-equiv="Content-Script-Type" content="text/javascript" />
3行目  <meta content="ALL" name="ROBOTS" />
4行目  <meta name="robots" content="INDEX,FOLLOW" />
5行目  <title>ホームページ作成方法</title>
6行目  <meta name="Keywords" content="ホームページ,作成" />
7行目  <meta name="Description" content="ホームページ作成とは。ホームページの作り方を解説します。" />
8行目  <link href="style.css" rel="stylesheet" type="text/css" />
9行目  <link rel="shortcut icon" href="img/favicon.ico" />
10行目 <meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
11行目 <link rel="alternate" type="application/rss+xml" title="RSS 1.0" href="rss10.xml" />
12行目 <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />
このように書かれています。

主に説明文なので、書き換える場所は3箇所。
5行目 <title> ここ </title> ここは、そのページのタイトルを入れる場所です。
7行目 そのページの概要です。50文字位の文章で、ページの内容を書きます。
6行目 そのページで重要なキーワードを書く部分です。実際に使われているキーワードを半角のカンマで区切って書きます。
    5個以内にするのが良いとされています。
この3箇所を書き換えましょう。
10行目はスカイプをインストールしているパソコンに、スカイプのリンクボタンを表示させない為の文章です。
スカイプからの着信を期待している人は書かないように。
スカイプから電話なんて掛かってこないし、デザインが崩されるのが許せん!という人は書きましょう。
9行目はファビコン、フェイバリットアイコン、ショートカットアイコンと言われるアイコンを
ブラウザーに表示させる為の文章です。
よろしければコピーしてご利用ください。ファビコンは後でまた説明します。

ヘッダーの次は <body> から </body>(HTMLの一番最後)
ここがボディ部分で、実際に画面に表示される部分です。
それぞれの文章がタグで囲まれています。
このタグの基本を覚えてしまえば簡単です。

SITE MENU

NEWS

google+1

Facebook

Feed

Copyright(C) 東京WEB企画 All Rights Reserved.