現場力向上第1回 - Web Circle

HTML５の絵本
第１章 HTML
目次
１．HTMLの歴史
２．HTMLの記述方式
３．HTML記述する際のエディタ
４．おすすめのホームページ用のレンタルサーバ
１．HTMLの歴史
インターネットの歴史の概要
•
1969：ARPANET始動、UCLAとスタンフォード大
•
1971：初のemailを送受信
•
1983：TCP/IPの採用
•
1984：村井純が慶應義塾大学と東京工業大学を接続。日本におけるインターネットの起源 (JUNET)
•
1988：商用インターネットがアメリカで開始
•
1989：商用ネットワークとNSFNetとの接続が開始
•
1990：ARPANET終了
•
1991：Tim Berners-Lee、WWW発表
•
1993：Mosaic発表 (後のNetscape)
•
1995：Yahoo! 設立
•
1998：Google設立
１．HTMLの歴史
ARPANET（1969～90）
ARPANET（アーパネット、Advanced Research Projects Agency
Network）は、世界で初めて運用されたパケット通信ネットワークであり、今日の世
界的なインターネットの起源である。
ARPANETが核戦争に耐えられるネットワーク構築と何らかの関係があると主張する
間違った噂が始まったが、ARPANETは、研究用コンピュータの数が限られていて、
それらを使いたいと思っている研究者の多くは地理的に離れたところにいるという
我々の欲求不満が出発点である。
http://ja.wikipedia.org/wiki/ARPANET
1974年時点のARPANETの構成
１．HTMLの歴史
WWW発表(1990～現在）
スイス・ジュネーブにあるCERN(欧州原子核研究機構)で誕生する。
＜背景＞
CERNは、何千人という科学者が入れ替わり立ち代わりで訪れるため、お互いの研究
状況の確認、論文などの資料を探す、など必要な情報を効率よく行き渡らせる環境
が課題となっていた。これを実現するために、CERNで世界初のサーバーとブラウザが生
まれる。
Webの生みの親はイギリス人のティム・バーナーズ＝リー博士です。インターネットの中
でももっとも重要なシステムであるWWWを発明した。
1990年は、HTML1.0の草案が発表された年。
HTML単体では、論文の文章構造さえマークアップできれば良いと思って作られていた。
１．HTMLの歴史
インターネット歴史年表 - JPNIC
https://www.nic.ad.jp/timeline/
WWWの歴史.htm
http://www.tohoho-web.com/wwwxx018.htm
[HTMLの歴史] HTMLの誕生からHTML5までをザッと要点紹介 - NAVER まとめ
http://matome.naver.jp/odai/2136874479784697001
２．HTMLの記述方式
ぱっと見のHTML4と５の違い
２．HTMLの記述方式
タグ（要素）と属性
要素：開始タグと終了タ
グで囲まれた部分
<h1>：開始タグ
</h1>：終了タグ
属性
３．HTML記述する際のエディタ
ez-HTML
http://www.w-frontier.com/software/ezhtml.html
コードの編集からFTPでのアップロードまで出来るエディタ
タブ機能付き。
タグを挿入する時、自動的に閉じタグも挿入してくれるのが便利。
ちょっと編集してアップロードする程度でしたらこれ1つで充分な程の機能を備えています。
３．HTML記述する際のエディタ
StyleNote
http://sn.lowedge.com/
HTML5、CSS3対応です。
Emmet対応、CSSのピクセル等の数値をマウスのホイールで変更出来る等、
慣れるとコーディング速度が向上しそう。
３．HTML記述する際のエディタ
aptana
http://www.aptana.com/
HTML5、CSS3対応です。
Emmet対応、
プラグイン次第で、jQueryやJavaScriptの入力保管等さまざまな機能を導入できる。
３．HTML記述する際のエディタ
Emmet（エディタではありません）
http://docs.emmet.io/abbreviations/syntax/
http://webya-tm.com/archives/1725
本家（英語サイト）
日本人向け
＜Aptana＞の場合
入力テキスト
「div#page>div.logo+ul#navigation>li*5>a」
Ctrl+E
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
３．HTML記述する際のエディタ
Emmet（エディタではありません）
div>ul>li
div+p+bq
Ctrl+E
Ctrl+E
<div>
<ul>
<li></li>
</ul>
</div>
記号
入力規則
サンプル
div, a, ulなど
タグは<>をつけない
div, a, ulなど
>
子要素にする
div>ul>li
+
縦にタグを並べる
header+div+footer
^
一つ前の要素に組み込む
div+div>p>span+em^bq
*
同じものを増やす
ul>li*5
()
グループにする
div>(header+ul>li*3>a)+footer>p
#ID名, .class名
IDとclassを指定する
div#header+div.text
[]
HTMLの中身を指定する
td[title="こんにちは" colspan=5]
$*
ナンバリングする
ul>li.item$*5
{}
テキストにする
a{ここをクリック}
<div></div>
<p></p>
<blockquote></blockquote>
４．おすすめのホームページ用のレンタルサーバ
４．おすすめのホームページ用のレンタルサーバ
そのほか
metaタグ
◆キャッシュ制御
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
◆閲覧対象年齢層の指定
<META NAME="rating" CONTENT="safe for kids">
◆ウェブページ内容の期限切れを伝える
<META NAME="Expires" CONTENT="December 31, 2002">
◆ FaceBook用
<meta property="og:title" content="タイトル" />
<meta property="og:description" content="説明文" />
<meta property="og:type" content="タイプ" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="こサムネイル画像のURL" />

Download Report