ホームページ作成・制作のご紹介サイトです

HP作成に必要なもの

ホームページのメリット

HTMLとは?

HP制作のポイント

HP作成@

HP作成A

ホームページ用語集

ホームページを作ってみよう!その1

ホームページをつくるにはHTML(Hyper Text Markup Language)言語を使います。HTML言語は結構簡単なので楽しくやってみましょう♪

タグの役割

タグはホームページを作るための言葉です。例えば、「この分は見出し」や「ここからが本文」といった文章の構成や、「文字の色を変える」、「ここには画像をおく」・「リンク場所の指定」と言ったことを命令します。

例:

<html>

<head>

<title>はじめまして</title>

</head>

<body>

ホームページを作ってみよう

</body>

</html>

<html>

HTML文章のはじまり

<head>

ヘッダー部分の始まり。この部分にはタイトルの説明や、様々な説明を書きます。

<title>

タイトル部のはじまり

はじめまして

ここに書いた文はWebブラウザのタイトル欄に表示されます。

</title>

タイトル部の終わり

</head>

ヘッダー部の終わり

<body>

ボディ(本体)の始まり。以下、</body>の間に書いた文がWebブラウザに表示されます。

ホームページをつくってみよう

この部分がHPとして表示されます。

</body>

ボディの終わり

</html>

HTML文書の終わり

注意すること!

タグは必ず半角で書きましょう!半角で書かないと、タグとして認識されません。
タグは基本的に< >・</ >でワンセットです。

保存の仕方

ファイルで名前を付けて保存を選びます。2回目からは、ファイルで上書き保存でも大丈夫です。上書き保存をすると、前に保存しておいたものは消えてしまうので、消したくなければ、名前を付けて保存を選びましょう。

名前は公開するときのことを考えて、半角でつけた方がいいです。名前は自分の好きなようにつけてOKです!
名前の後に「.html」をつけるのを忘れずに。「html」は「このファイルはHTML文書ですよ」という意味です。

フォルダ

作っているうちにHTMLファイルや画像ファイルなどが増えてきます。それを整理するのにフォルダを使うと便利です。
ファイル名と同じように半角英数で名前を付けましょう。

段落

文章のひとまとまりである段落を表すタグは<P>があります。これは</P>で閉じます。表示されるときは文章の前後に一行空きが出ます。

例:

<P>私の前後には一行あいてるでしょ?</P>
<P>よく覚えていてね。</P>

表示結果

私の前後には一行あいてるでしょ?

 

よく覚えていてね。

 

しかし、文章の前後に一行の空きを空けたくない人もいます。そういう人は<div>を使いましょう。一行の空きがなくなります。これも<div>で閉じます。

例:

<div>私の前後には空きがないでしょう?</div>
<div>これも覚えておいて損はないよ。むしろ、覚えて。</div>

表示結果

私の前後には空きがないでしょう?

これも覚えておいて損はないよ。むしろ、覚えて。といった表示結果になります。

背景色の指定

ページ全体の背景色や文字色、リンクの貼ってある文字色などは自由に設定することができます。。
まずは背景色を指定する方法です。 例えば、背景色を青色にする時は、

<body bgcolor=”red”

と、下線部分を<body>に追加すると、そのページの背景色は赤色になります。
このとき、bodyとbgcolorの間に半角スペースを入れるようにしましょう。 色は"(ダブルクオーテーションマーク)ではさんで記述します。 blue、redのように英単語で指定するか#0000FF、#ff0000のように16進色で書きましょう。
英字は大文字でも小文字でも構いません。

□標準16色

標準16色は、Windows VGAパレットでサポートされている標準的な16色としてピックアップされたものです。I.Eでは1.0以降で、N.N.では2.0以降で対応しています。

□Webセーフカラー216色(Web Safe Colors 216)

OSやブラウザで共通の色は、216色しかありません。これは「Webセーフカラー」と呼ばれます。I.E.では1.0以降で、N.N.では1.1以降で対応しています。

Valuable information

日本郵便
http://www.post.japanpost.jp/
大型免許
http://www.shinshu-komagane.com/pro_driver/

最終更新日:2014/10/16