Submit Search
Upload
Html1
•
0 likes
•
1,382 views
Jun Chiba
Follow
Stage1 資料に出てくるURLはこちらです! http://www.htmq.com/html/indexm.shtml
Read less
Read more
Report
Share
Report
Share
1 of 13
Recommended
Html入門
Html入門
GIG inc.
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座
Atsushi Miura
Html
Html
Minoru Uchida
Tugas sim I
Tugas sim I
achilchuy
Earthquake Keynote
Earthquake Keynote
myrossroom7
Introduzione all' IVA
Introduzione all' IVA
roberto cossu
Academic law librarians: wallflowers or social butterflies?
Academic law librarians: wallflowers or social butterflies?
Maria Bell
Gestione impresa.lez2
Gestione impresa.lez2
roberto cossu
Recommended
Html入門
Html入門
GIG inc.
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座
Atsushi Miura
Html
Html
Minoru Uchida
Tugas sim I
Tugas sim I
achilchuy
Earthquake Keynote
Earthquake Keynote
myrossroom7
Introduzione all' IVA
Introduzione all' IVA
roberto cossu
Academic law librarians: wallflowers or social butterflies?
Academic law librarians: wallflowers or social butterflies?
Maria Bell
Gestione impresa.lez2
Gestione impresa.lez2
roberto cossu
System4 comment
System4 comment
Jun Chiba
Yo Soy
Yo Soy
Francisco Ernesto
All about me
All about me
nnarayan
Gestione impresa.lez5
Gestione impresa.lez5
roberto cossu
Developing digital literacies in undergraduate students: SADL project
Developing digital literacies in undergraduate students: SADL project
Maria Bell
Transitions from School to Higher Education: understanding the needs of unde...
Transitions from School to Higher Education: understanding the needs of unde...
Maria Bell
20140521【コヨーテクラブ】エンジニア採用について
20140521【コヨーテクラブ】エンジニア採用について
Jun Chiba
Secker, Bell & Wrathall: implementing new curriculum for IL
Secker, Bell & Wrathall: implementing new curriculum for IL
Maria Bell
Intoduzione al bilancio
Intoduzione al bilancio
roberto cossu
BBDO SF SXSW Recap
BBDO SF SXSW Recap
BBDO_SF
Il bilancio aziendale
Il bilancio aziendale
roberto cossu
Attività economica e l'azienda
Attività economica e l'azienda
roberto cossu
Speed Thinking overview
Speed Thinking overview
speedthink
Algo battle
Algo battle
Jun Chiba
採用グループワーク、内定者懇親会で使えるワークスタイルトランプ
採用グループワーク、内定者懇親会で使えるワークスタイルトランプ
Jun Chiba
HTML
HTML
Jun Chiba
Html s1
Html s1
Jun Chiba
噴水企画Web講習会
噴水企画Web講習会
Kenta Moriuchi
Html s2
Html s2
Jun Chiba
Lesson Html 01
Lesson Html 01
kamihide
Html part1
Html part1
job one
フィーチャーフォンUIガイドライン
フィーチャーフォンUIガイドライン
MultiDeviceLab
More Related Content
Viewers also liked
System4 comment
System4 comment
Jun Chiba
Yo Soy
Yo Soy
Francisco Ernesto
All about me
All about me
nnarayan
Gestione impresa.lez5
Gestione impresa.lez5
roberto cossu
Developing digital literacies in undergraduate students: SADL project
Developing digital literacies in undergraduate students: SADL project
Maria Bell
Transitions from School to Higher Education: understanding the needs of unde...
Transitions from School to Higher Education: understanding the needs of unde...
Maria Bell
20140521【コヨーテクラブ】エンジニア採用について
20140521【コヨーテクラブ】エンジニア採用について
Jun Chiba
Secker, Bell & Wrathall: implementing new curriculum for IL
Secker, Bell & Wrathall: implementing new curriculum for IL
Maria Bell
Intoduzione al bilancio
Intoduzione al bilancio
roberto cossu
BBDO SF SXSW Recap
BBDO SF SXSW Recap
BBDO_SF
Il bilancio aziendale
Il bilancio aziendale
roberto cossu
Attività economica e l'azienda
Attività economica e l'azienda
roberto cossu
Speed Thinking overview
Speed Thinking overview
speedthink
Algo battle
Algo battle
Jun Chiba
採用グループワーク、内定者懇親会で使えるワークスタイルトランプ
採用グループワーク、内定者懇親会で使えるワークスタイルトランプ
Jun Chiba
Viewers also liked
(15)
System4 comment
System4 comment
Yo Soy
Yo Soy
All about me
All about me
Gestione impresa.lez5
Gestione impresa.lez5
Developing digital literacies in undergraduate students: SADL project
Developing digital literacies in undergraduate students: SADL project
Transitions from School to Higher Education: understanding the needs of unde...
Transitions from School to Higher Education: understanding the needs of unde...
20140521【コヨーテクラブ】エンジニア採用について
20140521【コヨーテクラブ】エンジニア採用について
Secker, Bell & Wrathall: implementing new curriculum for IL
Secker, Bell & Wrathall: implementing new curriculum for IL
Intoduzione al bilancio
Intoduzione al bilancio
BBDO SF SXSW Recap
BBDO SF SXSW Recap
Il bilancio aziendale
Il bilancio aziendale
Attività economica e l'azienda
Attività economica e l'azienda
Speed Thinking overview
Speed Thinking overview
Algo battle
Algo battle
採用グループワーク、内定者懇親会で使えるワークスタイルトランプ
採用グループワーク、内定者懇親会で使えるワークスタイルトランプ
Similar to Html1
HTML
HTML
Jun Chiba
Html s1
Html s1
Jun Chiba
噴水企画Web講習会
噴水企画Web講習会
Kenta Moriuchi
Html s2
Html s2
Jun Chiba
Lesson Html 01
Lesson Html 01
kamihide
Html part1
Html part1
job one
フィーチャーフォンUIガイドライン
フィーチャーフォンUIガイドライン
MultiDeviceLab
今日からはじめるHTML5 ver.2012
今日からはじめるHTML5 ver.2012
Yasuhito Yabe
IODD 2015 in Shiga / Biwako 中級者プログラム「Beginner's Dev Camp」
IODD 2015 in Shiga / Biwako 中級者プログラム「Beginner's Dev Camp」
Code for Shiga / Biwako
Html&cssの書き方入門編
Html&cssの書き方入門編
touhou
HTML入門
HTML入門
sayoko miura
HTML初心者向け勉強会
HTML初心者向け勉強会
SakiKomuro
Htmlの書き方入門編
Htmlの書き方入門編
touhou
Html講習会資料
Html講習会資料
竹島 泉
メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門
Atsushi Tadokoro
初めてのHtml5 20120612
初めてのHtml5 20120612
yohei iwakura
20080823-TransformingPlainTextToHtml
20080823-TransformingPlainTextToHtml
Koji SHIMADA
Attractive HTML5
Attractive HTML5
Sho Ito
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
DIVE INTO CODE Corp.
Php s3
Php s3
Jun Chiba
Similar to Html1
(20)
HTML
HTML
Html s1
Html s1
噴水企画Web講習会
噴水企画Web講習会
Html s2
Html s2
Lesson Html 01
Lesson Html 01
Html part1
Html part1
フィーチャーフォンUIガイドライン
フィーチャーフォンUIガイドライン
今日からはじめるHTML5 ver.2012
今日からはじめるHTML5 ver.2012
IODD 2015 in Shiga / Biwako 中級者プログラム「Beginner's Dev Camp」
IODD 2015 in Shiga / Biwako 中級者プログラム「Beginner's Dev Camp」
Html&cssの書き方入門編
Html&cssの書き方入門編
HTML入門
HTML入門
HTML初心者向け勉強会
HTML初心者向け勉強会
Htmlの書き方入門編
Htmlの書き方入門編
Html講習会資料
Html講習会資料
メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門
初めてのHtml5 20120612
初めてのHtml5 20120612
20080823-TransformingPlainTextToHtml
20080823-TransformingPlainTextToHtml
Attractive HTML5
Attractive HTML5
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
Php s3
Php s3
More from Jun Chiba
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
Jun Chiba
答えのないコンセンサスゲーム「無人島での出来事」運営用パワーポイントスライド説明資料
答えのないコンセンサスゲーム「無人島での出来事」運営用パワーポイントスライド説明資料
Jun Chiba
合意形成(コンセンサス)ゲーム「月での遭難 in 2025」(NASAゲーム2025)
合意形成(コンセンサス)ゲーム「月での遭難 in 2025」(NASAゲーム2025)
Jun Chiba
システム思考、全体最適、SCMを体験から学ぶボードゲーム「ビールゲーム」概要説明資料
システム思考、全体最適、SCMを体験から学ぶボードゲーム「ビールゲーム」概要説明資料
Jun Chiba
財務・会計を楽しく学ぶビジネスゲーム型財務・会計研修「財務の虎Lv.1」の概要説明資料
財務・会計を楽しく学ぶビジネスゲーム型財務・会計研修「財務の虎Lv.1」の概要説明資料
Jun Chiba
プロジェクトマネジメントを疑似体験するボードゲーム型企業研修「プロジェクトテーマパーク」
プロジェクトマネジメントを疑似体験するボードゲーム型企業研修「プロジェクトテーマパーク」
Jun Chiba
バルーンバ人文化を探れ!パワーポイント・動画マニュアル販売用のスライドシェア資料
バルーンバ人文化を探れ!パワーポイント・動画マニュアル販売用のスライドシェア資料
Jun Chiba
内定者/新入社員向け ビジネスライティング研修用パワーポイントスライド販売用サンプル
内定者/新入社員向け ビジネスライティング研修用パワーポイントスライド販売用サンプル
Jun Chiba
図形伝達ゲーム「グラコミ」
図形伝達ゲーム「グラコミ」
Jun Chiba
傾聴力を高めるビジネスゲーム「傾聴チャレンジ」
傾聴力を高めるビジネスゲーム「傾聴チャレンジ」
Jun Chiba
無料アイスブレイクスライドサンプル
無料アイスブレイクスライドサンプル
Jun Chiba
ストレスマネジメント体験ゲーム「ストマネ」
ストレスマネジメント体験ゲーム「ストマネ」
Jun Chiba
ベストチームオンライン説明スライド
ベストチームオンライン説明スライド
Jun Chiba
死の疑似体験ワーク 対面版
死の疑似体験ワーク 対面版
Jun Chiba
地図作成ゲーム「ジグソータウン」説明資料
地図作成ゲーム「ジグソータウン」説明資料
Jun Chiba
プロジェクトテーマパーク説明資料
プロジェクトテーマパーク説明資料
Jun Chiba
死の疑似体験ワーク(対面版)説明資料
死の疑似体験ワーク(対面版)説明資料
Jun Chiba
ヘリウムリング&フープリレー
ヘリウムリング&フープリレー
Jun Chiba
世界記録を目指すマシュマロチャレンジ
世界記録を目指すマシュマロチャレンジ
Jun Chiba
相互理解ワークショップ、内定者懇親会で使えるワークスタイルトランプ
相互理解ワークショップ、内定者懇親会で使えるワークスタイルトランプ
Jun Chiba
More from Jun Chiba
(20)
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
セルフケア研修で使えるカードゲーム『攻略!きみのストレスを発見せよ!: ゲームで身につくストレスマネジメント』
答えのないコンセンサスゲーム「無人島での出来事」運営用パワーポイントスライド説明資料
答えのないコンセンサスゲーム「無人島での出来事」運営用パワーポイントスライド説明資料
合意形成(コンセンサス)ゲーム「月での遭難 in 2025」(NASAゲーム2025)
合意形成(コンセンサス)ゲーム「月での遭難 in 2025」(NASAゲーム2025)
システム思考、全体最適、SCMを体験から学ぶボードゲーム「ビールゲーム」概要説明資料
システム思考、全体最適、SCMを体験から学ぶボードゲーム「ビールゲーム」概要説明資料
財務・会計を楽しく学ぶビジネスゲーム型財務・会計研修「財務の虎Lv.1」の概要説明資料
財務・会計を楽しく学ぶビジネスゲーム型財務・会計研修「財務の虎Lv.1」の概要説明資料
プロジェクトマネジメントを疑似体験するボードゲーム型企業研修「プロジェクトテーマパーク」
プロジェクトマネジメントを疑似体験するボードゲーム型企業研修「プロジェクトテーマパーク」
バルーンバ人文化を探れ!パワーポイント・動画マニュアル販売用のスライドシェア資料
バルーンバ人文化を探れ!パワーポイント・動画マニュアル販売用のスライドシェア資料
内定者/新入社員向け ビジネスライティング研修用パワーポイントスライド販売用サンプル
内定者/新入社員向け ビジネスライティング研修用パワーポイントスライド販売用サンプル
図形伝達ゲーム「グラコミ」
図形伝達ゲーム「グラコミ」
傾聴力を高めるビジネスゲーム「傾聴チャレンジ」
傾聴力を高めるビジネスゲーム「傾聴チャレンジ」
無料アイスブレイクスライドサンプル
無料アイスブレイクスライドサンプル
ストレスマネジメント体験ゲーム「ストマネ」
ストレスマネジメント体験ゲーム「ストマネ」
ベストチームオンライン説明スライド
ベストチームオンライン説明スライド
死の疑似体験ワーク 対面版
死の疑似体験ワーク 対面版
地図作成ゲーム「ジグソータウン」説明資料
地図作成ゲーム「ジグソータウン」説明資料
プロジェクトテーマパーク説明資料
プロジェクトテーマパーク説明資料
死の疑似体験ワーク(対面版)説明資料
死の疑似体験ワーク(対面版)説明資料
ヘリウムリング&フープリレー
ヘリウムリング&フープリレー
世界記録を目指すマシュマロチャレンジ
世界記録を目指すマシュマロチャレンジ
相互理解ワークショップ、内定者懇親会で使えるワークスタイルトランプ
相互理解ワークショップ、内定者懇親会で使えるワークスタイルトランプ
Html1
1.
0からのプログラミング講座
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は⼤大きく分けて2つの部品に <h1>ウェブページの見出し</h1> 分けることができます。 ボディ <p>ウェブページを作成しました!</p> 1つはこのサイトについての ブラウザから </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タグには「ブロック要素」と「インライン要 素」の2種類があり、詳細は省省きますが、インライン要素 のなかにブロック要素をいれることはできません。 ü 詳しく知りたい⼈人は調べてみて下さい。 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 .