Norisuke Official Site

HTMLでウェブサイトを作ろう!

HTMLs Page

HTML5とは何か?

HTML5とは、狭義には、HTML(HyperText Markup Language)というWebページを作るための言語の最新バージョンを指します。
HTMLはタグ(<html>など)という仕組みで文章を構造化、意味付けをするためのものであって、この様な仕組みを持つ言語をマークアップ言語(他にMathML(数式が書けるマークアップ言語)等がある = 図1)という。HTMLの最大の特徴は、a要素で指定するハイパーリンクです。HTMLをWebサーバーにアップロードして公開し、HTMLの文章の構造や意味をブラウザが解釈すると、Webページが表示されるのです。つまり、HTMLはWebページの文章その物であり、内容を決める指示書である。

マークアップ言語の例

マークアップ言語だけの改良ではなく・・・・

実は、HTML5というキーワードは、マークアップだけではなくもっと広い意味の変化も指している。 狭義のHTMLは、前述の様に文章の構造を中心としたマークアップ部分などに関する仕様を指しているが、広義にはその仕様に伴う周辺技術の進化も指している。つまり、表現力を強化するCSS3や、プログラミング言語のECMAScript(JavaScript)の改良も、HTML5の大きな進化の一部です。

HTML5はどこが作っているのか?

HTMLの仕様は、インターネットの関連企業を中心に構成される標準化団体W3C(World Wide Web Consortium)という団体によって策定されています。
但し、HTML5の仕様策定に関しましては、WHATWG(Web Hypertext Application Tecnology Working Group)というコミュニティーが大きな役割を果たしています。(WHATWGはApple,Mozilla,Opera Softwareの有志により2014年に設立)

バージョンは?

HTML5.1です。W3C(World Wide Web Consortium)が、仕様書として公開していますが、前項「HTML5はどこが作っているのか?」に記したように、業界団体の WHATWG が中心となって策定を進めまています。
2016年11月1日にHTML5.1が遂に勧告されました!

ホームページを作るには。。。

HTMLエディタとホームページ作成ソフト(例:JustSystem ホームページビルダー)の2通りです。 HTMLエディタはタグを覚えなければいけませんが、その一方、ホームページ作成ソフトはタグを覚えなくても作れます。わたしは、ホームページ作成ソフトはあまりお薦めしません。1万5千円以上するのに低機能じゃ意味ないからですね。やはり私は、タグを覚えながらホームページを作ります。(最近は機能がとても良いのですがね)

書き方

<html>
<head>
<title>Web制作の練習</title>
</head>
<body>
初めてのホームページです。
</body>
</html>
      

HTML:プロの究極サンプル

HTML5 SAMPLE CODE
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="generator" content="編集ソフト名など">
<meta name="keywords" content="キーワード1,キーワード2">
<meta name="description" content="ページの説明">
<link rel="stylesheet" href="style.css">
<link rel="contents" href="index.htm" title="目次">
<link rel="prev" href="page23.htm" title="前のページタイトル">
<link rel="next" href="page25.htm" title="次のページタイトル">
<link rev="made" href="mailto:foo@xxx.yyy.zzz">
<title>タイトル</title>
</head>
<body>
<p>本文</p>
</body>
</html>

HTMLでコメント(注釈)を書くには

HTMLソースを編集するときだけ読むことが出来るコメント(注釈、覚え書)を記述しておくと、後からソースコードを読み返す際に理解しやすくなります。コメントには<!-- -->用います。

<!-- タイトルロゴ -->
<img src="icon/title.png" width=88 height=31 alt="○○">
  :
注意:<---------- ---------->としてはいけません。

自分のURL(ドメイン)を取得しよう!

HTMLでホームページを作るからちょっと離れて・・・、ホームページを公開する為の自分のURL(ドメイン)を取得してみましょう。ホームページを公開するには、Webサーバー(HTTPサーバー、または単に サーバー)と呼ばれるコンピュータのハードディスクに、作成したHTMLファイルや画像ファイルをコピーしてやる必要があります。サーバーの利用形態としては次のようなものがあります。
  1. 自分でサーバーを用意する: ホームページを公開する期間(通常は常時)ネットワークに接続されたマシンがあれば、その上でWebサーバー用のソフトウェアを動かすことで、マシンをサーバーとして利用することができます。
  2. 身近な人や部署が用意したサーバーを利用する: 企業や大学でホームページを公開する場合、誰が身近なところですでにサーバーの管理者が居るかもしれません。
  3. プロバイダが用意したサーバーを利用する: プロバイダに加入して自宅などからアクセスしている場合は、この方法が手っ取り早いでしょう。多くのプロバイダがホームページ開設のサービスを有料・無料で行っています。プロバイダのホームページに開設方法や、公開方法が説明されています。 無料のドメインは、サブドメイン(http://*.サービス提供者が指定したドメイン.jp)が普通です。
    独自ドメイン(http://*.jpなど)は、お名前.comなどで安く販売しています。自分専用のドメインが欲しい!と思った方にはいいですね。(このサイトも独自ドメインですね。)

FTPでサーバーにホームページを転送しよう

プロバイダが提供するサーバーにファイルを転送するには、通常 FTP(File Transfer Protocol)クライアント と呼ばれるツールを用います。

FTPクライアントを用いる場合、サーバー名、ログイン名、パスワード の情報を把握しておく必要があります。プロバイダによって若干呼び方が異なるので注意してください。これらの情報はプロバイダから示されます。

色の指定

とほほの色入門・色見本 --とほほのWWW入門(URL:http://www.tohoho-web.com/wwwcolor.htm)
<font color="..."> や <body bgcolor="..."> などの色を指定する属性では、次のような方法で色を指定します。
RGB値は #FF0000 のように、光の三原色である赤(R)、緑(G)、青(B)の配分を00〜FFまでの16進数で記述します。一般に、値が大きいと明るい色、小さいと暗い色、RGBの値の差が大きいとケバケバしい色、差が小さいと淡い色になります。Windowsのペイントブラシのカラーパレットなどを利用して、自分の好みの色をみつけるのもよいでしょう。