LogoMark.png

講演/HTML5の世界/20141022 の変更点


*HTML5の世界
八幡中央高校模擬講義|2014.10.22
~

***はじめに

//-実習室のパソコンは、以下のIDとPWでログインして下さい。
//--ID bauhaus
//--PW W~eimar9

-以下の2つのアプリケーションを用意して下さい。
--Chrome : [[ブラウザ>Browser]]
--mi : [[テキストエディタ>TextEditor]]

-次に、私のこのホームページを開いて下さい。
Google検索キーワード [ 井上貢一 ]
サイト内検索キーワード [ 八幡中央 ]

~



***HTMLとは

HTML(HyperText Markup Language)とは、ウェブ文書を記述するためのマークアップ言語で、文章や画像はもちろん、リスト表記や表組み、他のドキュメントへのハイパーリンクも設定できます。HTMLファイルは、ごく普通のテキストファイル(文字が並んだだけのもの)なので、テキストエディタ(メモ帳のようなもの)で書いて、保存するだけで完成します。
 ひとつのHTMLファイル、すなわちひとつのWebページは、おおよそ以下のような構造のソースコードで記述されています。

 <!DOCTYPE html>
 <html lang="ja">
 
     <head>
        <meta charset="UTF-8">
        <title>Sample Page</title>
     </head>
 
     <body>
         <h1>HOME PAGE</h1>
         <p>
                 この部分が本文記事になります。適当に書き換えて下さい。
          </p>   
     </body>
 
 </html>

ページ全体は<html>に始まって、</html>で終ります。
 <head> ~ </head>
の間はページタイトルなどのヘッダー情報が入り、
 <body> ~ </body>
の間に、ページの本体情報が入ります。

このように、ページ内の情報要素は、<>で囲まれた「開始タグ」と「終了タグ」に挟まれるかたちで記述されることになっています。 開始・終了タグは、それぞれ <要素名>, </要素名> のように表現されますが、必要に応じて要素に属性を付加的に記述することができます。
~

***実際に書いてみよう
-テキストエディタ(mi)を起動して、ファイル>新規 として下さい。
-上のソースコードをそのままコピー&ペーストします。
-index.htmlという名前でデスクトップに保存して下さい。
-ファイルをブラウザにドラッグ&ドロップすると、ページがレンダリングされます。
~

***編集してみよう
-テキストエディタで、適当に内容を書き換えて保存してみて下さい。
-ブラウザの「再読み込み」をすると、内容の変化が確認できます。
~
***リンクを作ってみよう
以下のように書くと、他のページや外部サイトへのリンクができます。
 <a href="http://xxx.xxx.xxxx">ここをクリック!</a>
~

***GoogleMapその他を掲載してみよう
-GoogleMapで、好きな場所を見つけて下さい。
-GoogleMapの右下のアイコンから「地図を共有/埋め込む」を見つけて
「地図を埋め込む」で表示されるソースコードを、
HTMLの中にコピー&ペーストして下さい。
-ブラウザの「再読み込み」をすると、地図の表示が確認できるはずです。
-YouTubeの動画も同様に埋め込み表示することができます。
但し、YouTubeの埋め込みコードを手元のファイルで機能させるには、
src=" の部分に、''http://'' を書き足す必要があります。


~


***HTML5にできること
HTML5では、グラフィック、サウンド、通信、ファイル、位置情報、デバイスコントロールなど、様々なAPI(Application Programming Interface)が使えるようになりました。今までは、個々のマシンごとに用意しなければならなかたアプリケーションも、HTML5を使えば「ブラウザ」という共通の基盤の上で動くものとなります。PC、タブレット、スマートフォンはもちろん、家電製品の操作パネル、屋外のデジタルサイネージなど、様々な場面でHTML5の技術が生かされる時代になりつつあります。

-ブラウザ上で動く様々なツール
--関数電卓 http://web2.0calc.com
--タイマー http://maru.bonyari.jp/timekeeper/timekeeper.html
-enchant.js > [[ブラウザ上で動くゲームが作れます。>http://www.knockknock.jp/archives/category/enchant-js]]
knock knock / Nishida Shingoさんのページ
-WebGL > [[3次元のCGがブラウザ上で動きます。>http://art.kyusan-u.ac.jp/koichi_inoue/MotionCube2014/index.html]]
-WebAudio > [[シンセサイザーやドラムマシンができます。>WebAudio]]
~



***Webデザインに必要なソフトウエア(¥0)
-1) 作るソフト(テキストエディタ)
Webサイトの構成ファイルは、HTML、CSS、JavaScript等のテキストファイルです。したがってまず「作るソフト」として、「メモ帳」のような文字の入力と編集ができる[[テキストエディタ>TextEditor]]が必要です。Dreamweaver、ホームページビルダーなどのオーサリングソフトを利用すれば能率が上がりますが、これらは必須というわけではありません。

-2) 見るソフト(Browser)
Chrome、Firefox、Safari、Internet Explorer、など
参考:[[ブラウザのシェア>http://www.w3counter.com/globalstats.php]]

-3) 転送するソフト(FTPクライアント)
FileZilla、FFFTP、Cyberduck、FireFTP(Firefox拡張)など、出来上がった~.html ファイルや画像データを、自分のパソコンから、リモート(遠隔地にある)・サーバーへ転送するのが、主な役割です。作ったファイルは、サーバーにアップロードすることによって、はじめて世界中から見えるページになります。
~

***





~
~
~