4 日本語空白文字は使わない! 多くのプログラミング言語では, 英語の空白文字が区切りとして使われます. 日本語の空白文字は, 見た目が二つ分くらいの空白に見えるだけで, 区切りとして機能しません. 日本語の空白文字は使わないように. できれば, 以下のように無効化するのがベター. コレ 4

5 HTML Hyper Text Markup Language ウエブページを記述する言語ブラウザに食わせると成形 ( 組版 ) してくれる. プログラミング言語と異なり, 多少記述がおかしくても, ブラウザが, がんばって表示してくれる場合が多い. 各種会社等のホームページは, この言語で記述されている. ブラウザがやってることは大雑把には以下 1. HTMLのファイルを各種会社のサーバーからダウンロード 2. ダウンロードしたHTMLファイルに従い画面を表示 5

復習もっとも基本的な例ブラウザが見たいページをリクエストして, そのページのデータがレスポンスとして返ってくる. http://www.a.

6 復習もっとも基本的な例ブラウザが見たいページをリクエストして, そのページのデータがレスポンスとして返ってくる. リクエスト : あるページを指定通常, 80 番ポートの TCP 通信を利用ブラウザレスポンス : ページの内容 6

復習リクエストの実例 GET / HTTP/1.1 Host: www.kanagawa-u.ac.jp User-Agent: 略 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.

7 復習リクエストの実例 GET / HTTP/1.1 Host: User-Agent: 略 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: ja,en-us;q=0.7,en;q=0.3 Accept-Encoding: gzip, deflate Referer: Cookie: 長いので略 Connection: keep-alive 7

8 復習レスポンスの例 HTTP/ OK Date: Mon, 15 Sep :00:06 GMT Server: Apache/ (Scientific Linux) Last-Modified: Thu, 28 Aug :46:13 GMT Etag: "a1b81-686d-501b924552e21" Accept-Ranges: bytes Content-Length: Connection: close Content-Type: text/html 神大のサイト <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> 以下, 長いので略 8

9 HTML ファイルの概要テキストファイルである. 本講義では UTF-8N を使ってください. 文書の論理的な構造と文字修飾等 ( スタイル ) の情報が一応分離されている. 論理的構造 : 箇条書き, 表などスタイル : 文字の大きさ, 斜体, 色, 下線など文字 ( 文書 ) だけでなく, 画像, 動画, 音声などを扱える. はっきり言って, 箇条書き. 9

10 HTML ファイルの大枠一番外枠は以下 <html></html> の中に中身を書く. 現在は,MTML version 5 が一般的. Version 4 より前は, ちょっと最初の行が面倒だった. <!DOCTYPE html> <HTML> なかみだよー </HTML> 10

11 タグ文書の論理的な構造を指定する <TABLE> </TABLE> 等の表現をタグと呼ぶ. HTML ではタグは事前に定められたものだけ使える.( 利用者は新規作成はできない ) タグ名は大文字 / 小文字の区別は無い. タグは以下の二種類の内容を持つ. 内容表示される文字内容等 ( 画像等もあり ). 属性内容を修飾する情報, 例えば文字サイズや色等. タグによって属性の種類は決まっている. タグを覚えることが,HTML を覚えることといっても良いくらい. 11

12 例 <!DOCTYPE html> <html> <head> <title>sample</title> </head> <body> <p> 最初の段落だよー. </p> <p style="text-indent: 1em"> 段落の最初を一文字下げるのに日本語の空白文字は絶対に使わないように. </p> </body> </html> 12

13 sample02a もっとも簡単なサンプル. コメント文もかける. 文字を書けば, そのまま表示される. ただし, 改行は無視され, 単なる空白とみなされる. タブも同様. 空白文字は 1 個も沢山も同じ. ただし, 日本語の空白文字は空白文字では無いので, 並べた数だけ空白が空く. 日本語の空白文字を用いて, 空白の大きさを調整してはいけない! というか, 日本語の空白文字は利用してはならない. 13

14 sample02b 改行 br </br> は書いてはいけない.<br> のみで利用. 改段落 p </p> はわりと省略されることが多い. 14

15 箇条書き sample02c </li> はわりと省略される. 15

16 番号付き箇条書き sample02d 16

17 テーブル sample02e 純粋に表として使われる場合と, 文書全体のレイアウトを整えるのに使われる場合がある. 17

18 ハイパーリンク sample02f コレが無いとページ間の遷移を実現できない. まぁ, 後日話す form や Javascript を使っても可能ではあるが. 18

19 画像を張り込めます. sample02g Jpg, gif, png 等, ポピュラーな画像は対応可能. まぁ, ブラウザ次第. img 19

20 H1, h2, h3 等の見出し私はあまり使わない. sample02h 20

21 div と span sample02i 箇条書きや表等の文書の意味は持たず, 単に文書の部分を区切るのに用いられる. 後述の style を使わないと, ほとんど意味が無い. 特定区間の文字を大きくしたり, 色をつけたりするのに用いるのが普通. Div 段落等の文書の一部を区切る.Divで区切るとデフォルトで改行される. Span 文の一部を区切る. 改行等の変化は無い. 21

22 特殊文字 < 等のタグに使われている文字の表示. スペースもあるが, 複数のスペースをあけるのに, を複数使うのはお勧めしない模様. HTML 特殊文字一覧でググればリストが得られる, 例えば, スペース < < > > & & " " 22

23 属性既に沢山でてきているが, <tag name1="var1" name2="var2"> の形でタグに付記できるのが属性とその値. 属性名 =" 値 " の形で書く. タグによって使える属性はまちまちだが,style 属性については, 当該タグで指定された要素の見た目を指定する属性として重要. 23

24 タグについて全部を授業で解説しても眠いだけです. タグ利用の詳細はググって調べてください. 図書として, タグ辞典のようなものも売ってますので, 気になる人は買ってもよいでしょう. 24

25 スタイルシートタグで区切られた文書の体裁 ( 見た目 ) を設定するための仕組み. 体裁 : フォントの大きさ, 色,face( イタリック等 ) それぞれにプロパティと呼ばれる. タグの属性 style の値として設定する. 値は, プロパティ名 : その値 ; のリストで表現される ( 下記の例を参照 ). 無論, タグによって, 設定できるプロパティは様々. ググって調べてください. ただ <span style="color: red; font-size: 200%" > うろつく </span> のみ. 25

26 文字に関する主なプロパティ color 文字の色,red 等の名前で指定できるものもあるが, RGB を数値で表現することもできる. font-size 大きさ,120% 等, 相対サイズでも指定できるが,px や pt 等の絶対サイズの指定もできる. font-weight フォントの太さ bold 等 font-style italic, oblique 等 text-decoration underline, overline, line-through, blink 等 26

27 境界線の主なプロパティ div や span 等の境界線の見た目 border-style デフォルトは none すなわち非表示. 表示したければ, solid dashed 等を使う. border-color 色, デフォルトは直前に描画した色の模様. border-width 幅.1pt, 1px 1cm 等の実数も使えるが,thin, medium, thick 等も使える模様. 尚, 矩形の上下左右を別々に設定できる. 27

28 領域のプロパティただし,span 等の行内プロパティでは使えない. width 領域の幅. 絶対値も使えるが, 親要素の 50% 等, 相対値も使える. デフォルトは auto で画面いっぱいに使う. height 基準サイズの 200% 等の指定ができるはずだが, なんかうまく動かない. 5cm 等, 絶対値はうまくゆく. 28

29 マージンのプロパティ領域の外側の余白を margin と呼ぶ. margin-top margin-bottom margin-left margin-right それぞれ, マージンの上下左右のサイズ. 1pt 1cm 等の絶対値で指定できる. 親要素の幅の 50% 等の相対値も指定できるようだ. 29

30 パディングのプロパティ領域の内側の余白を padding と呼ぶ. padding-top padding-bottom padding-left padding-right それぞれ, パディングの上下左右のサイズ. 1pt 1cm 等の絶対値で指定できる. 親要素の幅の 50% 等の相対値も指定できるようだ. 30

31 箇条書きのプロパティ list-style-type 順番無し none disc circle square 順番あり lower-roman upper-roman lower-alpha upperalpha decimal decimal-leading-zero 等 list-style-position inside もしくは outside 31

32 本日の演習 ( 演習 1) 以下のようなページを表示するための HTML ファイルを作成せよ. 箇条書きの文法を用いよ. ファイル名 ex01.html 提出は dotcampus へ. 簡単なので授業中に出してください. 32

合宿事前講座 Web 開発の基本編その 2 情報研究会モブ薗田海樹 The. H.30 情報研究会 1

合宿事前講座 Web 開発の基本編その 2 情報研究会モブ薗田海樹 The. H.30 情報研究会 1 合宿事前講座 Web 開発の基本編その 2 情報研究会モブ薗田海樹 2018 6.12 The. 1 前回の復習 n ブラウザって何? n Web サイトのキホンを作ってみよう 2 ブラウザとは?HTML とは?? n ブラウザとは? WEB ページを閲覧するためのソフトウェア p HTML というブラウザに言語を表示する言語によって表示されている n HTML とは? p Hyper Text

目次