HTML５の絵本 第１章 HTML. 目次 １．HTMLの歴史 ２．HTMLの記述方式 ３．HTML記述する際のエディタ ４．おすすめのホームページ用のレンタルサーバ.

Presentation on theme: "HTML５の絵本 第１章 HTML. 目次 １．HTMLの歴史 ２．HTMLの記述方式 ３．HTML記述する際のエディタ ４．おすすめのホームページ用のレンタルサーバ."— Presentation transcript:

1 HTML５の絵本 第１章 HTML

2 目次 １．HTMLの歴史 ２．HTMLの記述方式 ３．HTML記述する際のエディタ ４．おすすめのホームページ用のレンタルサーバ

3 １．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設立

4 １．HTMLの歴史 ARPANET（1969～90） ARPANET（アーパネット、Advanced Research Projects Agency Network）は、世界で初めて運用されたパケット通信ネットワークであり、今日の世 界的なインターネットの起源である。 ARPANET が核戦争に耐えられるネットワーク構築と何らかの関係があると主張する 間違った噂が始まったが、 ARPANET は、研究用コンピュータの数が限られていて、 それらを使いたいと思っている研究者の多くは地理的に離れたところにいるという 我々の欲求不満が出発点である。 http://ja.wikipedia.org/wiki/ARPANET 1974 年時点の ARPANET の構成

5 １．HTMLの歴史 WWW発表(1990～現在） スイス・ジュネーブにあるCERN(欧州原子核研究機構)で誕生する。 ＜背景＞ CERNは、何千人という科学者が入れ替わり立ち代わりで訪れるため、お互いの研究 状況の確認、論文などの資料を探す、など必要な情報を効率よく行き渡らせる環境 が課題となっていた。これを実現するために、CERNで世界初のサーバーとブラウザが生 まれる。 Webの生みの親はイギリス人のティム・バーナーズ＝リー博士です。インターネットの中 でももっとも重要なシステムであるWWWを発明した。 1990年は、HTML1.0の草案が発表された年。 HTML単体では、論文の文章構造さえマークアップできれば良いと思って作られていた。

6 １．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

7 ２．HTMLの記述方式 ぱっと見のHTML4と５の違い

8 ２．HTMLの記述方式 タグ（要素）と属性 ：終了タグ 属性 ：開始タグ 要素：開始タグと終了タ グで囲まれた部分

9 ３．HTML記述する際のエディタ ez-HTML http://www.w-frontier.com/software/ezhtml.html コードの編集から FTP でのアップロードまで出来るエディタ FTP タブ機能付き。 タグを挿入する時、自動的に閉じタグも挿入してくれるのが便利。 ちょっと編集してアップロードする程度でしたらこれ 1 つで充分な程の機能を備えています。

10 ３．HTML記述する際のエディタ StyleNote http://sn.lowedge.com/ HTML5 、 CSS3 対応です。 Emmet 対応、 CSS のピクセル等の数値をマウスのホイールで変更出来る等、 慣れるとコーディング速度が向上しそう。

11 ３．HTML記述する際のエディタ aptana http://www.aptana.com/ HTML5 、 CSS3 対応です。 Emmet 対応、 プラグイン次第で、 jQuery や JavaScript の入力保管等さまざまな機能を導入できる。

12 ３．HTML記述する際のエディタ Emmet（エディタではありません） http://docs.emmet.io/abbreviations/syntax/ http://docs.emmet.io/abbreviations/syntax/ 本家（英語サイト） http://webya-tm.com/archives/1725 http://webya-tm.com/archives/1725 日本人向け 入力テキスト 「 div#page>div.logo+ul#navigation>li*5>a 」 Ctrl+E ＜ Aptana ＞の場合

13 ３．HTML記述する際のエディタ Emmet（エディタではありません） div>ul>li div+p+bq Ctrl+E 記号入力規則サンプル 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{ ここをクリック } Ctrl+E

14 ４．おすすめのホームページ用のレンタルサーバ

15

16 そのほか metaタグ ◆ FaceBook 用 ◆閲覧対象年齢層の指定 ◆ウェブページ内容の期限切れを伝える ◆キャッシュ制御