０からのプログラミング講座
第
1
講
© HEART QUAKE
ウェブページの仕組み URLを⼊入⼒力力する あなた 1 リクエスト サーバー ブラウザ 2 リクエストを解析 ＋処理理 HTMLや画像を返却 HTMLを解釈して ウェブページとして表⽰示 3 ブラウザに 表⽰示するウェブページの内容を 指⽰示するために使われるコン ピュータ⾔言語、それがHTML 4講 HTML、Java、MySQLの連動 1講 HTML 3講 MySQL 2講 Java
第1章 HTML
HTMLは、Internet ExplorerやFirefox、Chromeなどのインターネット
プラウザ上にウェブページを表⽰示するための⾔言語です。わたしたちが
ふだん利利⽤用しているウェブサイトは、どのようにして記述されている のか、詳しく⾒見見ていきます。
ゴールイメージ
l 「HTML」の完了了条件
HTMLとは (1/2)
l HTML
-
ウェブページを作成するために利利⽤用される⾔言語。
-
HyperText Markup Languageの略略
ü HyperText :複数の⽂文書を相互に関連付け、結び付ける 仕組み。「テキストを超える」という意味から。 ü HTML →ハイパーテキストに⽬目印をつける⾔言語
-
⽬目印をつける（Markup）というのは、⽂文書の各部分が、 どんな役割を持っているのかを⽰示すということ。
-
コンピュータに理理解できるように⽂文書の構造を定義するこ とが、HTMLの最も重要な役割。
HTMLとは (2/2) HTMLとは？ HTMLの基本 HTML（エイチティーエムエル、HyperText Markup Language）は、ウェブページを作成す るために開発された⾔言語です。現在、インター ネット上で公開されてるウェブページのほとん どは、HTMLで作成されています。
HyperText Markup Languageを⽇日本語で表すな ら、「ハイパーテキストに⽬目印をつける⾔言語」 くらいの意味になります。ハイパーテキスト （HyperText）とは、ハイパーリンクを埋め込む ことができる⾼高機能なテキストです。ハイパー リンクというのは、ウェブページで下線の付い たテキストなどをクリックすると別ページへ移 動する、あのリンクのことです。 普通の⽂文章 <これはタイトル>HTMLとは？<ここまで> <これは⾒見見出し>HTMLの基本<ここまで> <これは段落落>HTML（エイチティーエムエル、 HyperText Markup Language）は、ウェブペー ジを作成するために開発された⾔言語です。現在、 インターネット上で公開されてるウェブページ のほとんどは、HTMLで作成されています。 <こ こまで>
<これは段落落>HyperText Markup Languageを⽇日 本語で表すなら、「ハイパーテキストに⽬目印を つける⾔言語」くらいの意味になります。ハイ パーテキスト（HyperText）とは、ハイパーリン クを埋め込むことができる⾼高機能なテキストで す。ハイパーリンクというのは、ウェブページ で下線の付いたテキストなどをクリックすると 別ページへ移動する、あのリンクのことです。 <ここまでね> マークアップのイメージ コンピュータは各部の役割が コンピュータは各部の役割を 「開始タグ」と呼ぶ
HTMLの書き⽅方 (1/4) l HTMLは⾮非常に簡単な⾔言語です。簡易易なウェブページであれ ば、数種類タグを覚えるだけで作成することができます。 l .htmlファイルを作成、内容を記述し、「サーバーで実⾏行行」を すればウェブページの出来上がり。 <html> <head> <meta charset=”utf-8”> <title>ウェブページのタイトル</title> </head> <body> <h2>ウェブページの見出し</h2> ウェブページを作成しました！ </body> </html> ブラウザで表⽰示 「”」をダブルクォーテーション と呼びます 10min 時間制限 保存する際は、hello.htmlという名前で作成してください。
HTMLの書き⽅方 (2/4)
<html> <head>
<meta charset=”UTF-8”/>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”/>
<meta name=”keywords” content=”このページのキーワード” />
<meta name=”description” content=”このページの概要”/>
<link rel=”stylesheet” href=”style.css” />
<script type=”text/javascript” src=”common.js”></script> <title>ウェブページのタイトル</title> </head> <body> <h1>ウェブページの見出し</h1> <p>ウェブページを作成しました！</p> </body> </html> HTMLヘッダ ボディ ブラウザからは ⾒見見えない ウェブページに関す る あれこれを設定する ブラウザから ⾒見見える ウェブページの中⾝身 を あれこれ記述
HTMLの書き⽅方 (3/4) l HTMLの記述は⼩小⽂文字・半⾓角で l <開始タグ>〜～</終了了タグ>で内容を囲む 要素（element）の種類を指定します。 どのような要素に割 り当てるかは、 タグの種類を使い分けます。
-
要素内容を持たない空要素 <br>や<img>のように、要素内容を持たない空要素 （empty element）と呼ばれるものもあります。 <h2>文字</h2> <table><tr><td>セル1</td><td>セル2</td></tr></table> ⾒見見出しなら 表なら <br> <img src=”hoge.jpg”> 改⾏行行 画像 表⽰示したい画像 ファイルの名前 breakの略略
HTMLの書き⽅方 (4/4)
-
h1 〜～ h6
-
p
-
table ü tr / th / td
-
ul / ol ü li
-
dl ü dt / dd
-
div
-
form
-
a
-
img
-
span
-
Input
-
button
-
select ü option
-
textarea HTMLタグリファレンス : http://www.htmq.com/html/indexm.shtml タグの意味を 調べてみましょう HTMLタグの例例
実習 (1/3) l ⾃自⼰己紹介ページを作成してみましょう
-
テキストエディタで以下の画像と同じ内容、スタイルの HTMLファイルを作成してください。 リンク <a href・・・> 15min 時間制限 ページタイトル <title> ⾒見見出し1 <h1> ヒント：「HTML リンク」で検索索！ 参考サイト：http://www.htmq.com/html/a.shtml
実習 (2/3) l ⾃自⼰己紹介ページに画像を表⽰示してみましょう 10min 時間制限 ヒント：「HTML 画像」で検索索！ 参考サイト：http://www.asahi-net.or.jp/~ax2s-kmtn/ref/html/hp8.html 画像 <img> ※htmlファイルと同じ フォルダに画像ファイル が存在すること ※注意 画像のファイル名は⽇日本語(例例：画像.jpg) ではなく、半⾓角英数字(例例：gazo.jpg) にすること
実習 (3/3) l ⾃自⼰己紹介ページ表組みを表⽰示してみましょう ⾒見見出し2 <h2> 表組み <table><tr><td> ヒント：「HTML テーブル」で検索索！ 参考サイト：http://www.kanzaki.com/docs/html/htminfo16.html 応⽤用課題
ウェブページを公開する 1. HTMLファイル、画像ファイル、CSSファ イル（後述）などを⽤用意します 2. ウェブサーバを⽤用意します ウェブサーバとはインターネットから24 時間365⽇日接続できる、公開されたコン ピュータ、というイメージです ⼀一般的には「レンタルサーバ」と呼ばれる サービスを利利⽤用します 3. FTPソフトでアップロード
FTP(File Transfer Protocol)とは、ファイ ルを転送するための通信のことです。 FTPの通信⽅方式を利利⽤用し、ファイルを転送 するソフトウェアを使って、サーバへ1.で ⽤用意したファイルを「アップロード」しま す。FFFTPという無料料ソフトが有名です。 4. ブラウザでアクセスしてみましょう ウェブサーバ あなた 利利⽤用者 FTPで ファイルを アップロード
HTML5(1/2) l HTML5の特徴
-
Flashでしかできなかったことができるように！ ü ⾳音声や動画の埋め込みが簡単にできる！ ü グラフィックデザインの表⽰示が簡単にできる！
-
HTML4ではできなかったこと ü 位置情報を取得できる ü クライアント側にデータベースを 保持できる ü フォーム機能の充実
HTML5(2/2) l 簡潔になったHTML5の書き⽅方 <!DOCTYPE html> <html lang="ja"> <head> <meta charset=”utf-8” /> </head> <body> ・・・ </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" “http://www.w3.org/TR/・・・"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> ・・・ </body> </html> HTML5 HTML4
XML(1/2)
l XML
-
EXtensible Markup Languageの略略
ü extensible: 『拡張可能な』の意 ü HTMLはタグの意味があらかじめ決められているのに 対し（例例：h2、table、img） ü XMLはその意味を独⾃自に決めることができる ü 従ってシステム間でタグの意味を ü 独⾃自に決めて、データの連携を ü ⾏行行うことができる。
XML(2/2) l システム間のデータ連携に利利⽤用されるXML NP こういうデータを下さい ◯◯というタグで お願いします。 かしこまりました。 ベンダー どのタグにデータを ⼊入れたらいいですか？ <xml> <売上> <顧客ID> </顧客ID> <金額> </金額> </売上> </xml>
URLの仕組み (1/4) l FTPソフトでアップロードしたファイルには、 どうやってアクセスする？
-
ウェブサーバにはドメインが割り当てられています。
-
ウェブサーバ上にあるファイルには、 ドメイン + ファイルの場所 をURLとして、インターネッ トを通じてアクセスすることができます。 実習で使⽤用するウェブサーバには a1.zeroprm.comというドメインが 割り当てられています。 ウェブサーバ
a1.zeroprm.com / b3 / chiba / hello.html
chiba b3
URLの仕組み (2/4) l ファイル名に使える⽂文字列列は？
-
作成するHTMLファイルや画像ファイルは、どんな名前をつけて もよいのでしょうか？ ü いいえ、使⽤用できるのは半⾓角英数字と、ハイフン（-）、ア ンダースコア（_）のみです。 - 全⾓角⽂文字や、スペース、ハイフンとアンダースコア以外 の記号は使⽤用できません。 ü 拡張⼦子も重要です。ファイル名の最後に、「.html」をつける と、ファイルはHTMLファイルとして認識識されます。この 「.html」部分を拡張⼦子と呼びます。 正しいファイル名 誤ったファイル名 Ｉｎｄｅｘ.html × 全⾓角⽂文字が使われている Index .html ×半⾓角スペースが使われている iLoveYou!.html ×使⽤用できない記号が含まれている Index.html profile.html self_intro.html my-home.html iLoveYou.html
URLの仕組み (3/4) 192.13X.1.1 192.13X.1.2 192.13X.1.3 インターネット上の 住所を表します 1 1 0 0 0 0 0 0 1 0 0 0 1 0 X X 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 1 192. 13X. l IPアドレスで場所を調べる
-
Webや電子メールなど、
-
インターネット上の便利なサービスを
-
利用するためには、IPアドレスという
-
数値が必要になります。
-
IPアドレスはインターネット上で
-
端末を識別する住所のようなものです。
URLの仕組み (4/4) l ドメインネームシステム（DNS）で変換する
-
IPアドレスに対応する名前をドメイン名と言います。
-
例えば、netprotec-ons.co.jp のような名前がドメイン名です。 ü ドメイン名は、「組織名＋組織の種別＋国名」 からなります。
-
ドメイン名からIPアドレスを変換する仕組みを
-
DNS (ドメインネームシステム)といいます。
netprotections. co . jp
組織名 組織 種別 国名192.1XX.1.1
ドメイン名 IPアドレスウェブサービスとの連携 l HTMLは前述のとおり、外部にあるさまざまなファイルやコ ンテンツを、簡単にページ上に関連付け、表⽰示することがで きます。 l この機能を利利⽤用して、多くのウェブサービスが、コンテンツ をユーザが⾃自分のホームページに埋め込むことができるサー ビスを⽤用意しています。 l たとえば
-
Youtubeでは動画を簡単に埋め込むことができます
-
Google Mapでは地図を簡単に埋め込むことができます
-
Twitterではタイムラインを簡単に埋め込むことができます l さきほど実習で作成した⾃自⼰己紹介ページに、それぞれ埋め込 んで表⽰示してみましょう。
いろいろなものを埋め込む（Google Map） 地名を検索索する 1 「リンク」ボタンを クリック 2 「埋め込み」コードを HTMLに挿⼊入 3
いろいろなものを埋め込む（Youtube）
Try it yourself
いろいろなものを埋め込む（Facebook「いいね」）
Facebook Developers: http://developers.facebook.com/docs/reference/plugins/like/
Try it yourself
(
注) HTML5ではなく、
iframe
を選択すること
HTMLフォーム l ウェブサイトには左図のように ユーザーが情報を送信するために 使⽤用するフォームという機能が あります。
-
これをHTMLで実現するのが HTMLフォームです。 l 会員情報の登録欄や、検索索条件の⼊入⼒力力欄など、フォームの利利 ⽤用範囲は⾮非常に多岐にわたります。
-
たとえば、会員登録ページ、じゃらんの検索索ページ、 Twitterの投稿 / 検索索ページ なども全てHTMLフォームを 使⽤用しています。
HTMLフォームを構成するフォーム部 品は、その記述の⽅方法により、⾒見見栄え や機能が⼤大きく異異なります。
フォーム部品の種類
テキストボックス型
<input type=”text” name=”shimei” size=”40”>
ラジオボックス型
<input type=”radio” name=”gender” value=”male”>男 <input type=”radio” name=”gender” value=”female”>女
プルダウン型 <select name=”blood”> <option value=”A”>A型</option> <option value=”B”>B型</option> <option value=”O”>O型</option> <option value=”AB”>AB型</option> </select> テキストエリア型
< textarea name=”kanso” rows=”4” cols=”40”> </textarea>
ボタン型
<input type=”submit” value=”送信”> <input type=”reset” value=”リセット”>
フォームの作成⽅方法
<form action=”sousin.php” method=”get”>
名前：<input type=”text” name=”shimei”>
性別：<input type=”radio” name=”gender” value=”male”>男 <input type=”radio” name=”gender” value=”female”>女 血液型：<select name=”blood”> <option value=”A”>A型</option> <option value=”B”>B型</option> <option value=”O”>O型</option> <option value=”AB”>AB型</option> </select> ご感想：<br>
<textarea name=”kanso” rows=”4” cols=”40”></textarea>
<input type=”submit” value=”送信”><input type=”reset” value=”リセット”>
</form> 送信ボタンがおされると⼊入⼒力力されたデータを引き継いで sousin.php が実⾏行行されることを意味しています ※詳細は2講にて この間が Formタグ name = “shimei” は テキストボックスにshimeiという名前をつけた ことを意味しています。 ※詳細2講にて
Try it yourself
前の２ページを参考にしてください
①顧客企業名 l 以下のような⼊入⼒力力フォームを作成してみましょう-
顧客企業の情報登録を⾏行行うフォームです。
-
企業名、URL、所在地、担当者を⼊入⼒力力させます。
-
所在地は国内、国外から選ばせます。 ②URL ③所在地 ④担当者名 ポイント 表⽰示がキレイにいかない場合は 改⾏行行タグ <br> を書くとキレイになります 課題 20min 時間制限 kadai.html
CSS
CSSは、ウェブサイトを「デザイン」するための⾔言語です。HTMLは 原則としてウェブサイトの「構造」を表すための⾔言語であり、⾊色や フォント、配置といったデザインはCSSによって⾏行行われます。
CSSとは(1/2) l HTMLのみで作成したページは、装飾もなく、⾮非常に味気な いものでした。 l なぜならHTMLは、「⽂文章の構造」を定義するための⾔言語で あり、「デザイン」を定義するための⾔言語ではないからです。 l ウェブページでは、デザインをCSSという⾔言語によって定義 します。
-
CSSはCascading Style Sheetsの略略です
-
HTMLがウェブページ内の各要素の意味や情報構造を定義 するのに対して、CSSではそれらをどのように装飾するか を定義します。
-
例例えば、ウェブページが表⽰示される際の⾊色、サイズ、レイ アウトや、 プリンタで印刷・出⼒力力される際のスタイルな どを細かに指定することができます。 HTML CSS スタイルを別に定義
CSSとは(2/2) l CSSとはパワーポイントのスライドマスター
-
全てのページに会社のロゴや、コピーライトを⼊入れるのは ⾯面倒くさい。。。
-
１箇所修正したら全部修正しないと⾏行行けない。。。 HTML CSS スタイルを別に定義 HTML HTML
CSSの書き⽅方 (1/3) l CSSの基本書式 (1)
-
CSSはHTMLヘッダ中で指定を⾏行行います。
-
または、CSSファイルを別途作成し、HTMLヘッダ内で読 み込ませることで、複数のページで共通のCSSファイルを 利利⽤用することができます。
<link rel="stylesheet" href="style.css">
CSS/Sample1 <style type="text/css"> p { color: red; } </style> これはpタグを⾚赤⾊色に変えるCSSの記述 です。
CSSの書き⽅方 (2/3) l CSSの基本書式 (2)
-
CSSでスタイルを指定するには、 どの部分に対して ･･･ セレクタ どのスタイルを ･･･ プロパティ どのように ･･･ 値 適⽤用するかを指定します。
-
以下の使⽤用例例では、p要素の⾊色を⻘青くし、フォントサイズ を30pxに変更更するスタイルを指定しています。 p { color: blue; font-size: 30px; } CSS/Sample２ こんなCSSを使わなくても、<h1>を使うと、⽂文字は⼤大きく表⽰示されるよ そんな疑問もごもっとも。実はブラウザがデフォルトのスタイルというを持ってい て、CSSが適⽤用されていないときには、⾃自動的にそのデフォルトスタイルが適⽤用さ セレクタ HTML⽂文中の特定の要素を選択する ために使⽤用します。 たとえば、要素の種類で選択するタ イプセレクタでは、pやh2といった タグの種類で、CSSの適⽤用範囲を決 めることができます。 このほかに、各要素に属性として与 えられたidやclassもセレクタとして 利利⽤用できます。
CSSの書き⽅方 (3/3) l CSSの基本書式 (3)
-
pなどの要素によらず、要素の属性として指定されたidや classで、スタイルを指定することもできます。
-
たとえば、次のようなHTMLがあったとしましょう。
-
このHTMLにあるクラス「blue_text」に、⼀一律律⾊色を⻘青くし、 フォントサイズを30pxに変更更するCSSを定義してみま しょう。 <h2 class=”blue_text” id=”blue_title”>見出しだよ</h2> <p class=”blue_text”>段落だよ</p> .blue_text { color: blue; font-size: 30px; } CSS/Sample3
HTMLの書き⽅方 l 別のファイルを指定する HTMLは他ファイルとの関連付けを⾏行行えることが特徴です。 他ファイルの位置を⽰示す⽂文字列列をパス（Path）といいます。
-
絶対パス どこから⾒見見ても変わることのない位置な場所です。 ü URLで指定する http://からはじまるURLでファイルを指定します。
-
相対パス ⾃自分のファイルパスからの相対的な位置で指定します。 他のサーバにある ファイルへのリン クに使⽤用。 同じサーバ内での リンクに便便利利。 ドメインが変わっ ても⼤大丈夫。
<a href=”http://google.com/”>文字</a>
<a href=”temrs.html”>文字</a> <a href=”../temrs.html”>文字</a>
同じディレクトリのファイル ひとつ上の階層のディレクトリのファイル
ほかにも、あらかじめ決められた、基準となるディレクトリから⾒見見た、
ファイルの位置を絶対的に記述する⽅方法もあります。
例例) /dir1/dir2/page1.html
APPENDIX l ⽂文字コードとテキストエディタ
-
⽂文字はコンピュータ上では固有の数字であらわされている。 ⽇日本語の場合はこのコード体系が全部で3種類あります。 ü UTF-8 ü Shift-JIS ü EUC-JP
-
Windowsのメモ帳ではこのうち、Shift-JISにしか対応して いないため、ウェブページをコーディングするには不不向き である。
-
そこでHTMLの記述には、フリーかつ⾼高性能なテキストエ ディタを使⽤用することが多い。 ü さくらエディタ ü TeraPad ü 秀丸（有料料） このうち、海外でも広く普及しているUTF-‐‑‒8の利利⽤用が国内でも 広がっており、現在は多くのウェブページがこの⽂文字コードで 記述されています。 補⾜足
まとめ 第1講で学んだこと l HTMLとは何の略略かを知り、いくつかのHTMLタグを利利⽤用して 実際に⾃自⼰己紹介ページを作りました。 l GoogleマップやYoutubeといった既存のウェブサービスの 埋め込みコードを取得して⾃自分のサイトに埋め込む⽅方法を 学びました。 l ⼊入⼒力力フォームの作り⽅方を知り、実際に⾃自分で⼊入⼒力力フォームの 作成を⾏行行うことが出来ました。
