Norisuke Official Site

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

HTMLs Page

HTML5.1の勧告時期に合わせてHTML5ページ改定を9月23日に実施

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エディタは、実際に私が業務で使っているエディタです。自作。
のりすけHTMLエディタ
ファイル(F) 編集(E)
<html>
<head>
<title>Web制作の練習</title>
</head>
<body>
初めてのホームページです。
</body>
</html>
      
■Web制作の練習 - Internet Explorer
ファイル(F) 編集(E) 表示(V) ...
← → × ○ □ ...
初めてのホームページです。

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のペイントブラシのカラーパレットなどを利用して、自分の好みの色をみつけるのもよいでしょう。

基本16色

CSS3 では、下記 16個の基本色名が定義されています。

基本色名#rrggbb表記
black#000000
silver#c0c0c0
gray#808080
white#ffffff
maroon#800000
red#ff0000
purple#800080
fuchsia#ff00ff
green#008000
lime#00ff00
olive#808000
yellow#ffff00
navy#000080
blue#0000ff
teal#008080
aqua#00ffff

拡張色

CSS3 では下記 147色の拡張色名が定義されています。

拡張色名#rrggbb表記
aliceblue#f0f8ff
antiquewhite#faebd7
aqua#00ffff
aquamarine#7fffd4
azure#f0ffff
beige#f5f5dc
bisque#ffe4c4
black#000000
blanchedalmond#ffebcd
blue#0000ff
blueviolet#8a2be2
brown#a52a2a
burlywood#deb887
cadetblue#5f9ea0
chartreuse#7fff00
chocolate#d2691e
coral#ff7f50
cornflowerblue#6495ed
cornsilk#fff8dc
crimson#dc143c
cyan#00ffff
darkblue#00008b
darkcyan#008b8b
darkgoldenrod#b8860b
darkgray#a9a9a9
darkgreen#006400
darkgrey#a9a9a9
darkkhaki#bdb76b
darkmagenta#8b008b
darkolivegreen#556b2f
darkorange#ff8c00
darkorchid#9932cc
darkred#8b0000
darksalmon#e9967a
darkseagreen#8fbc8f
darkslateblue#483d8b
darkslategray#2f4f4f
darkslategrey#2f4f4f
darkturquoise#00ced1
darkviolet#9400d3
deeppink#ff1493
deepskyblue#00bfff
dimgray#696969
dimgrey#696969
dodgerblue#1e90ff
firebrick#b22222
floralwhite#fffaf0
forestgreen#228b22
fuchsia#ff00ff
gainsboro#dcdcdc
ghostwhite#f8f8ff
gold#ffd700
goldenrod#daa520
gray#808080
green#008000
greenyellow#adff2f
grey#808080
honeydew#f0fff0
hotpink#ff69b4
indianred#cd5c5c
indigo#4b0082
ivory#fffff0
khaki#f0e68c
lavender#e6e6fa
lavenderblush#fff0f5
lawngreen#7cfc00
lemonchiffon#fffacd
lightblue#add8e6
lightcoral#f08080
lightcyan#e0ffff
lightgoldenrodyellow#fafad2
lightgray#d3d3d3
lightgreen#90ee90
lightgrey#d3d3d3
拡張色名#rrggbb表記
lightpink#ffb6c1
lightsalmon#ffa07a
lightseagreen#20b2aa
lightskyblue#87cefa
lightslategray#778899
lightslategrey#778899
lightsteelblue#b0c4de
lightyellow#ffffe0
lime#00ff00
limegreen#32cd32
linen#faf0e6
magenta#ff00ff
maroon#800000
mediumaquamarine#66cdaa
mediumblue#0000cd
mediumorchid#ba55d3
mediumpurple#9370db
mediumseagreen#3cb371
mediumslateblue#7b68ee
mediumspringgreen#00fa9a
mediumturquoise#48d1cc
mediumvioletred#c71585
midnightblue#191970
mintcream#f5fffa
mistyrose#ffe4e1
moccasin#ffe4b5
navajowhite#ffdead
navy#000080
oldlace#fdf5e6
olive#808000
olivedrab#6b8e23
orange#ffa500
orangered#ff4500
orchid#da70d6
palegoldenrod#eee8aa
palegreen#98fb98
paleturquoise#afeeee
palevioletred#db7093
papayawhip#ffefd5
peachpuff#ffdab9
peru#cd853f
pink#ffc0cb
plum#dda0dd
powderblue#b0e0e6
purple#800080
red#ff0000
rosybrown#bc8f8f
royalblue#4169e1
saddlebrown#8b4513
salmon#fa8072
sandybrown#f4a460
seagreen#2e8b57
seashell#fff5ee
sienna#a0522d
silver#c0c0c0
skyblue#87ceeb
slateblue#6a5acd
slategray#708090
slategrey#708090
snow#fffafa
springgreen#00ff7f
steelblue#4682b4
tan#d2b48c
teal#008080
thistle#d8bfd8
tomato#ff6347
turquoise#40e0d0
violet#ee82ee
wheat#f5deb3
white#ffffff
whitesmoke#f5f5f5
yellow#ffff00
yellowgreen#9acd32

ウェブセーフカラー

#00, #33, #66, #99, #cc, #ff を組み合わせてできる 216色は、256色モードのディスプレイでも、Windowsや Macintoshでも色の差異が少なく、Webで利用する上で安全な色とされています。

#--00-- #--33-- #--66-- #--99-- #--cc-- #--ff--
#000000
#003300
#006600
#009900
#00cc00
#00ff00
#000033
#003333
#006633
#009933
#00cc33
#00ff33
#000066
#003366
#006666
#009966
#00cc66
#00ff66
#000099
#003399
#006699
#009999
#00cc99
#00ff99
#0000cc
#0033cc
#0066cc
#0099cc
#00cccc
#00ffcc
#0000ff
#0033ff
#0066ff
#0099ff
#00ccff
#00ffff
#330000
#333300
#336600
#339900
#33cc00
#33ff00
#330033
#333333
#336633
#339933
#33cc33
#33ff33
#330066
#333366
#336666
#339966
#33cc66
#33ff66
#330099
#333399
#336699
#339999
#33cc99
#33ff99
#3300cc
#3333cc
#3366cc
#3399cc
#33cccc
#33ffcc
#3300ff
#3333ff
#3366ff
#3399ff
#33ccff
#33ffff
#660000
#663300
#666600
#669900
#66cc00
#66ff00
#660033
#663333
#666633
#669933
#66cc33
#66ff33
#660066
#663366
#666666
#669966
#66cc66
#66ff66
#660099
#663399
#666699
#669999
#66cc99
#66ff99
#6600cc
#6633cc
#6666cc
#6699cc
#66cccc
#66ffcc
#6600ff
#6633ff
#6666ff
#6699ff
#66ccff
#66ffff
#990000
#993300
#996600
#999900
#99cc00
#99ff00
#990033
#993333
#996633
#999933
#99cc33
#99ff33
#990066
#993366
#996666
#999966
#99cc66
#99ff66
#990099
#993399
#996699
#999999
#99cc99
#99ff99
#9900cc
#9933cc
#9966cc
#9999cc
#99cccc
#99ffcc
#9900ff
#9933ff
#9966ff
#9999ff
#99ccff
#99ffff
#cc0000
#cc3300
#cc6600
#cc9900
#cccc00
#ccff00
#cc0033
#cc3333
#cc6633
#cc9933
#cccc33
#ccff33
#cc0066
#cc3366
#cc6666
#cc9966
#cccc66
#ccff66
#cc0099
#cc3399
#cc6699
#cc9999
#cccc99
#ccff99
#cc00cc
#cc33cc
#cc66cc
#cc99cc
#cccccc
#ccffcc
#cc00ff
#cc33ff
#cc66ff
#cc99ff
#ccccff
#ccffff
#ff0000
#ff3300
#ff6600
#ff9900
#ffcc00
#ffff00
#ff0033
#ff3333
#ff6633
#ff9933
#ffcc33
#ffff33
#ff0066
#ff3366
#ff6666
#ff9966
#ffcc66
#ffff66
#ff0099
#ff3399
#ff6699
#ff9999
#ffcc99
#ffff99
#ff00cc
#ff33cc
#ff66cc
#ff99cc
#ffcccc
#ffffcc
#ff00ff
#ff33ff
#ff66ff
#ff99ff
#ffccff
#ffffff

文字参照

Æ Ç È Ò Ü æ ð ú Ą Ď Ę Ģ Ĭ Ķ Ĭ Ķ ŀ Ŋ Ŕ Ş Ũ Ų ż Ɔ Ɛ ǂ Ǫ Ǵ Ȓ Ⱥ Ɏ ɘ ɬ ʔ ʨ ʼ ˆ Ϩ ©

&#--;で指定する文字を特に「 特殊文字 とくしゅもじ 」という

HTML5.1 勧告

今月、ウェブ技術の標準化を進めるW3C Web Platform Working Group ウェブ プラットフォーム ウォーキング グループ が、最新のHTML仕様となる【HTML5.1】を2016年9月に勧告する計画を発表した。
このバージョンでは、技術仕様の公開にGitHubが使用されており、従来よりも幅広い層からのアクセスが可能になっている。

Working on HTML5.1 |W3C Blog
https://www.w3.org/blog/2016/04/working-on-html5-1/

HTML5.1 begins to take shape on GitHub | InfoWorld
http://www.infoworld.com/article/3054659/html5/html51-begins-to-take-shape-on-github.html

リンク集

W3C公式サイト HTML5仕様書 WHATWG公式サイト
TOPに戻る