HOME > オンラインマニュアル
> ホームページ作成ガイド > HTML編 > ホームページ作成の基礎知識
ホームページ作成ガイド
HTML編
ホームページ作成の基礎知識
1. フォルダを作成しよう
|
| |
| まず、作業用のフォルダを作成しましょう。 |
|
フォルダの作成方法
Windowsの場合：
「マイコンピュータ」を開いて「(C:)」を開きます。
「(C:)」が開いたらメニューバーの「ファイル」から「新規作成」の「フォルダ」を作成します。
フォルダ名は半角英数字で適当につけましょう。（例：MyWeb)
Macintoshの場合：
メニューバーの「ファイル」から「新規フォルダ」を選択します。
フォルダ名は半角英数字で適当につけましょう。（例：MyWeb)
|
|
2. HTMLってどうやって書くの？
|
| |
| フォルダを作成したら、早速HTMLを書いてみましょう。なお、今後の説明はメモ帳、simpletextを中心に説明します。 |
メモ帳、simpletextの起動方法
メモ帳の場合（Windows)：
「スタート」から「プログラム」の「アクセサリ」から「メモ帳」を選択して起動します。
simpletextの場合（Macintosh)：
「Macintosh HD」から「アプリケーション」を開き「simple text」を起動します。
HTMLの記入方法
<html>
<head>
<title>やさしいホームページ作成講座 </title>
</head>
<body>
<h1>はじめてのホームページ</h1>
</body>
</html> |
HTMLはフリーフォーマットですので、書式に制限はありません。例えば以下のように記述しても構いません。
| <html><head><title>やさしいホームページ作成講座
</title></head><body><h1>はじめてのホームページ</h1></body></html>
|
ただし、自分や他の人があとでメンテナンスをしやすいようにソースをきれいに記述するよう心がけましょう。
ソースを記述したら、ファイル名をつけて保存しましょう。「index.html」のようにファイル名に「.html」をつけて保存します。トップページはファイル名を「index.html」で付けるのがいいでしょう。
保存をしたら、ブラウザソフトで表示確認します。
ブラウザソフトでの表示確認方法
HTMLファイルをダブルクリックするか、HTMLファイルをブラウザソフトのショートカットアイコンの上までドラッグ&ドロップします。
|
|
3. HTML文書の基本構造
|
| |
| ホームページを作成するのに重要な3つの要素があります。html要素、head要素、body要素です。これらの3つの要素は省略することも可能ですが、省略するのはあまりおすすめできません。
|
ホームページを作成するのに重要な3つの要素があります。html要素、head要素、body要素です。これらの3つの要素は省略することも可能ですが、省略するのはあまりおすすめできません。
<html>…HTMLの要素は全て<html></html>の中に含まれます。[★★★]
<head>…文書のヘッダ情報を 記述します。[★★★]
<body>…本文を記述します。 [★★★]
background="URI"…背景画像
bgcolor="#RRGGBB"…背景色
text="#RRGGBB"…文字色
link="#RRGGBB"…(未訪問)リンク色
vlink="#RRGGBB"…訪問済みリンク色
alink="#RRGGBB"…クリック中のリンク色
色の指定はカラーネームでの指定も可能です。詳しくは、Webセーフカラー、カラーネームリストを参照してください。 |
|
4. ヘッダ内の要素
|
| |
| <head></head>間には、必ずtitle要素を書く必要があります。 |
|
<title>…文書のタイトルを定義します。[★★★]
<link>…主に外部ファイルのスタイルシートを指定するのに使われます。[★★]
href="URI"…文書のリンク先
type="MIME" …MIMEタイプ
rel="リンクタイプ"…リンク先のリンクタイプ
rev="リンクタイプ"…リンク元のリンクタイプ
<meta>…文字コードの指定など各種の情報をヘッダに記録します。[★★]
http-equiv="文字列"…HTTPメッセージヘッダ用の名称
name="文字列"…属性の名前
content="文字列"…属性の値
scheme="文字列"… 属性の値を判断するための記述
<style>… ヘッダ内でスタイルシートの属性を定義します。[★]
type="MIME"…スタイルシートのMIME
title="文字列"…スタイルシーとのタイトル
media="メディア"…スタイルシートのメディア
|
|
