Html1
- 1. ０からのプログラミング講座 Stage1 本⽂文書のいかなる部分をも、事前の許可なく複写したり転送したりすることはできません。 © Toshiyuki Tanaka & Jun Chiba 1
- 2. 第1章 HTML HTMLは、Internet ExplorerやFirefox、Chromeなどのインターネット プラウザ上にウェブページを表⽰示するための⾔言語です。わたしたちが ふだん利利⽤用しているウェブサイトは、どのようにして記述されている のか、詳しく⾒見見ていきます。 2 Copyright (c) 2011-2012 Toshiyuki Tanaka & Jun Chiba All rights reserved .
- 3. ゴールイメージ l Stage1のゴールイメージ - 以下のような⾃自⼰己紹介サイトが作成できること 3 Copyright (c) 2011-2012 Toshiyuki Tanaka & Jun Chiba All rights reserved .
- 4. HTMLとは (1/2) l HTML - ウェブページを作成するために利利⽤用される⾔言語。 - HyperText Markup Languageの略略 ü HyperText :複数の⽂文書を相互に関連付け、結び付ける 仕組み。「テキストを超える」という意味から。 ü HTML →ハイパーテキストに⽬目印をつける⾔言語 - ⽬目印をつける（Markup）というのは、⽂文書の各部分が、 どんな役割を持っているのかを⽰示すということ。 - コンピュータに理理解できるように⽂文書の構造を定義するこ とが、HTMLの最も重要な役割。 4 Copyright (c) 2011-2012 Toshiyuki Tanaka & Jun Chiba All rights reserved .
- 5. HTMLとは (2/2) 普通の⽂文章 マークアップのイメージ HTMLとは？ <これはタイトル>HTMLとは？<ここまで> HTMLの基本 <これは⾒見見出し>HTMLの基本<ここまで> HTML（エイチティーエムエル、HyperText <これは段落落>HTML（エイチティーエムエル、 Markup Language）は、ウェブページを作成す HyperText Markup Language）は、ウェブペー るために開発された⾔言語です。現在、インター ジを作成するために開発された⾔言語です。現在、 ネット上で公開されてるウェブページのほとん インターネット上で公開されてるウェブページ どは、HTMLで作成されています。 のほとんどは、HTMLで作成されています。 <こ HyperText Markup Languageを⽇日本語で表すな こまで> ら、「ハイパーテキストに⽬目印をつける⾔言語」 <これは段落落>HyperText Markup Languageを⽇日 くらいの意味になります。ハイパーテキスト 本語で表すなら、「ハイパーテキストに⽬目印を （HyperText）とは、ハイパーリンクを埋め込む 「開始タグ」と呼ぶ つける⾔言語」くらいの意味になります。ハイ ことができる⾼高機能なテキストです。ハイパー パーテキスト（HyperText）とは、ハイパーリン リンクというのは、ウェブページで下線の付い クを埋め込むことができる⾼高機能なテキストで たテキストなどをクリックすると別ページへ移 す。ハイパーリンクというのは、ウェブページ 動する、あのリンクのことです。 で下線の付いたテキストなどをクリックすると 別ページへ移動する、あのリンクのことです。 <ここまでね> コンピュータは各部の役割が コンピュータは各部の役割を 理理解できない 理理解できる！ 5 Copyright (c) 2011-2012 Toshiyuki Tanaka & Jun Chiba All rights reserved .
- 6. HTMLの書き⽅方 (1/6) l 勉強道具を揃えよう！でダウンロードしたエディタ(サクラエ ディタ or KEidt)を起動しましょう。 l そこに以下のHTMLを記述し、ファイル名をhello.htmlにして 保存したファイルを、ダブルクリックしてみましょう。 <html> 「”」 をダブル <head> クォーテーション と呼びます <meta charset=”utf-8”> <title>ウェブページのタイトル</title> </head> <body> ブラウザで表⽰示 <h2>ウェブページの見出し</h2> ウェブページを作成しました！ こうなればOK </body> </html> 時間制限 10min 保存する際は、⽂文字コード（⽂文字コードセット）をUTF-8に設定し、 hello.htmlという名前で保存してください。 ファイル拡張⼦子を変更更するには、拡張⼦子を表⽰示させる必要があります。 （詳しくはAPPENDIXをご確認ください） 6 Copyright (c) 2011-2012 Toshiyuki Tanaka & Jun Chiba All rights reserved .
- 7. 補⾜足 ⽇日本語が変な⽂文字になったら l この現象を「⽂文字化け」といいます。⽂文字化けの原因は・・・ ü <meta charset = ”utf-8” > と正しく書いてますか？ ü ファイルを保存の時にUTF-8を選択しましたか？ ü ブラウザのエンコードはUTF-8になっていますか？ ü ダブルクォーテーション「”」が半⾓角になっていますか？ chromeを 使っている⼈人向け まずはスパナ マークを クリック IEを 使っている⼈人向け まずはブラウザ 上で右クリック 7 Copyright (c) 2011-2012 Toshiyuki Tanaka & Jun Chiba All rights reserved .
- 8. HTMLの書き⽅方 (2/6) <html> <head> <meta charset=”UTF-8” /> HTMLヘッダ <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> HTMLは⼤大きく分けて２つの部品に <h1>ウェブページの見出し</h1> 分けることができます。 ボディ <p>ウェブページを作成しました！</p> １つはこのサイトについての ブラウザから </body> あれこれ（タイトルなど）を ⾒見見える 記述するヘッダ（頭）、 ウェブページの中⾝身 </html> を もう⼀一つが実際に画⾯面に表⽰示する あれこれ記述 内容を記述するボディ（体）です。 8 Copyright (c) 2011-2012 Toshiyuki Tanaka & Jun Chiba All rights reserved .
- 9. HTMLの書き⽅方 (3/6) l HTMLの記述は⼩小⽂文字、半⾓角で l <開始タグ>〜～</終了了タグ>で内容を囲む タグの種類を指定します。 どのようなタグを書くとどうなる のかはタグの種類によって変わります。 <h2></h2>で囲むと⽂文字が ⾒見見出しなら <h2>文字</h2> ⼤大きくなります。 太字なら <b>セル1</b> ウェブページを作成しました！ はその外側なので普通の⼤大きさに なります。 - 終了了タグを持たない空要素 <br>や<img>のように、終了了タグを必要としないタグ もあります。 改⾏行行 <br> 画像 <img src=”hoge.jpg”> image、sourceの略略 breakの略略 表⽰示したい画像ファイルの名前を書く 9 Copyright (c) 2011-2012 Toshiyuki Tanaka & Jun Chiba All rights reserved .
- 10. HTMLの書き⽅方 (4/6) l タグは⼊入れ⼦子にできる タグは⼊入れ⼦子（ネスト）にすることができます。 例例えば、 <p>タグと<b>タグを⼊入れ⼦子にして、 段落落（paragraph）のな かの特定箇所だけを、強調（b）することができます。 強調したり <p><b>太字</b>普通</p> 画像⼊入れたり <h2><img src=”image/hoge.jpg”>文字だよ</h2> - ⼊入れ⼦子にできないタグもある 実はHTMLタグには「ブロック要素」と「インライン要 素」の２種類があり、詳細は省省きますが、インライン要素 のなかにブロック要素をいれることはできません。 ü 詳しく知りたい⼈人は調べてみて下さい。 10 Copyright (c) 2011-2012 Toshiyuki Tanaka & Jun Chiba All rights reserved .
- 11. HTMLの書き⽅方 (5/6) HTMLタグの種類（⼀一例例） - h1 〜～ h6 - a - p - img - table - span ü tr / th / td - Input - ul / ol - button ü li - select - dl ü option ü dt / dd - textarea - div - form エンジニアも全てのタグを 覚えているわけではありません。 タグの意味を みなさんも使いながら徐々に 調べてみましょう 覚えて⾏行行きましょう！ 「HTMLタグリファレンス 」で検索索！ http://www.htmq.com/html/indexm.shtml 11 Copyright (c) 2011-2012 Toshiyuki Tanaka & Jun Chiba All rights reserved .
- 12. HTMLの書き⽅方 (6/6) l 別のファイルへのリンク HTMLは他ファイルとの関連付けを⾏行行えることが特徴です。 他ファイルの位置を⽰示す⽂文字列列をパス（Path）といいます。 - 絶対パス どこから⾒見見ても変わることのない位置な場所です。 他のパソコンにあ るファイルへのリ ü URLで指定する ンクに使⽤用。 http://からはじまるURLでファイルを指定します。 <a href=”http://google.com/”>文字</a> - 相対パス ⾃自分のファイルパスからの相対的な位置で指定します。 同じパソコン内で のリンクに便便利利。 フォルダ構成が変 わっても⼤大丈夫。 同じフォルダのファイル ひとつ上の階層のフォルダのファイル <a href=”temrs.html”>文字</a> <a href=”../temrs.html”>文字</a> 絶対パスと相対パスの違いは住所を例例にすると 絶対パスとは、東京都世⽥田⾕谷区三宿・・・のように誰から⾒見見ても変わることのない住所で、 相対パスとは、「お隣隣さん」のように誰を基準にするかで異異なる住所のことです。 12 Copyright (c) 2011-2012 Toshiyuki Tanaka & Jun Chiba All rights reserved .
- 13. お疲れ様でした！！ 13 Copyright (c) 2011-2012 Toshiyuki Tanaka & Jun Chiba All rights reserved .