Movatterモバイル変換


[0]ホーム

URL:


Jun Chiba, profile picture
Uploaded byJun Chiba
1,502 views

Html s1

Embed presentation

1Copyright (c) 株式会社HEART QUAKE All rights reserved .HTMLHTMLは、Internet ExplorerやFirefox、Chromeなどのインターネットプラウザ上にウェブページを表⽰示するための⾔言語です。わたしたちがふだん利利⽤用しているウェブサイトは、どのようにして記述されているのか、詳しく⾒見見ていきます。
2Copyright (c) 株式会社HEART QUAKE All rights reserved .ゴールイメージl  HTMLのゴールイメージ-  以下のような簡単なサイトが作成できること
3Copyright (c) 株式会社HEART QUAKE All rights reserved .HTMLとは  (1/2)l  HTML-  ウェブページを作成するために利利⽤用される⾔言語。-  HyperText Markup Languageの略略ü HyperText :複数の⽂文書を相互に関連付け、結び付ける仕組み。「テキストを超える」という意味から。ü HTML →ハイパーテキストに⽬目印をつける⾔言語-  ⽬目印をつける(Markup)というのは、⽂文書の各部分が、どんな役割を持っているのかを⽰示すということ。-  コンピュータに理理解できるように⽂文書の構造を定義することが、HTMLの最も重要な役割。
4Copyright (c) 株式会社HEART QUAKE All rights reserved .HTMLとは  (2/2)HTMLとは?HTMLの基本HTML(エイチティーエムエル、HyperTextMarkup Language)は、ウェブページを作成するために開発された⾔言語です。現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。  HyperText Markup Languageを⽇日本語で表すなら、「ハイパーテキストに⽬目印をつける⾔言語」くらいの意味になります。ハイパーテキスト(HyperText)とは、ハイパーリンクを埋め込むことができる⾼高機能なテキストです。ハイパーリンクというのは、ウェブページで下線の付いたテキストなどをクリックすると別ページへ移動する、あのリンクのことです。  普通の⽂文章<これはタイトル>HTMLとは?<ここまで><これは⾒見見出し>HTMLの基本<ここまで><これは段落落>HTML(エイチティーエムエル、HyperText Markup Language)は、ウェブページを作成するために開発された⾔言語です。現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。  <ここまで><これは段落落>HyperText Markup Languageを⽇日本語で表すなら、「ハイパーテキストに⽬目印をつける⾔言語」くらいの意味になります。ハイパーテキスト(HyperText)とは、ハイパーリンクを埋め込むことができる⾼高機能なテキストです。ハイパーリンクというのは、ウェブページで下線の付いたテキストなどをクリックすると別ページへ移動する、あのリンクのことです。  <ここまでね>マークアップのイメージコンピュータは各部の役割が理理解できないコンピュータは各部の役割を理理解できる!「開始タグ」と呼ぶ
5Copyright (c) 株式会社HEART QUAKE All rights reserved .HTMLの書き⽅方  (1/4)l  Sublime Text2を起動しましょう。l  そこに以下のHTMLを記述し、ファイル名をhello.htmlにして保存したファイルを、ダブルクリックしてみましょう。<html><head><meta charset=”utf-8”><title>ウェブページのタイトル</title></head><body><h2>ウェブページの見出し</h2>ウェブページを作成しました!</body></html>保存する際は、hello.html という名前で保存してください。「”」 をダブルクォーテーションと呼びますこうなればOK!
6Copyright (c) 株式会社HEART QUAKE All rights reserved .⽇日本語が変な⽂文字になったらl  この現象を「⽂文字化け」といいます。⽂文字化けの原因は・・・ü <meta charset = ”utf-8” > と正しく書いてますか?ü ブラウザのエンコードはUTF-8になっていますか?ü ダブルクォーテーション「”」が半⾓角になっていますか?補⾜足chromeを使っている⼈人向け まずはスパナマークをクリックIEを使っている⼈人向けまずはブラウザ上で右クリック
7Copyright (c) 株式会社HEART QUAKE All rights reserved .お疲れ様でした!!

Recommended

PDF
Html s2
PDF
Html s3
PDF
Htmlの書き方入門編
 
PPT
PDF
HTML
PPT
JavaScript&Firebug入門
PPTX
噴水企画Web講習会
PPT
Html講習会資料
PDF
Lesson Html 01
PPTX
Html01
PPTX
Html03
PDF
20080823-TransformingPlainTextToHtml
PDF
Web講座 第1回
PDF
情報編集 (web) 第2回:HTML入門
PDF
Htmlの基礎
PPTX
CSS勉強会(第1回)
PDF
Html&cssの書き方入門編
 
PPTX
Why startups need "Lean Startup" & "Design Sprint"?
PDF
最近のUIデザインプロセス
PDF
Design Sprint 概要 / デザインスプリント概要
PDF
UXのためのUIデザイン
PDF
Design Sprint Process / デザインスプリントの実際のプロセスについて
PDF
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
PDF
コンテンツで改善する UI デザインの極意
PDF
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
PDF
見やすいプレゼン資料の作り方 - リニューアル増量版
PPTX
Html入門
PDF
Html1
PPTX
HTML入門
PDF
芸術情報演習デザイン(web) 第2回:HTML入門

More Related Content

PDF
Html s2
PDF
Html s3
PDF
Htmlの書き方入門編
 
PPT
PDF
HTML
PPT
JavaScript&Firebug入門
PPTX
噴水企画Web講習会
PPT
Html講習会資料
Html s2
Html s3
Htmlの書き方入門編
 
HTML
JavaScript&Firebug入門
噴水企画Web講習会
Html講習会資料

What's hot

PDF
Lesson Html 01
PPTX
Html01
PPTX
Html03
PDF
20080823-TransformingPlainTextToHtml
PDF
Web講座 第1回
PDF
情報編集 (web) 第2回:HTML入門
PDF
Htmlの基礎
PPTX
CSS勉強会(第1回)
PDF
Html&cssの書き方入門編
 
Lesson Html 01
Html01
Html03
20080823-TransformingPlainTextToHtml
Web講座 第1回
情報編集 (web) 第2回:HTML入門
Htmlの基礎
CSS勉強会(第1回)
Html&cssの書き方入門編
 

Viewers also liked

PPTX
Why startups need "Lean Startup" & "Design Sprint"?
PDF
最近のUIデザインプロセス
PDF
Design Sprint 概要 / デザインスプリント概要
PDF
UXのためのUIデザイン
PDF
Design Sprint Process / デザインスプリントの実際のプロセスについて
PDF
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
PDF
コンテンツで改善する UI デザインの極意
PDF
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
PDF
見やすいプレゼン資料の作り方 - リニューアル増量版
Why startups need "Lean Startup" & "Design Sprint"?
最近のUIデザインプロセス
Design Sprint 概要 / デザインスプリント概要
UXのためのUIデザイン
Design Sprint Process / デザインスプリントの実際のプロセスについて
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
コンテンツで改善する UI デザインの極意
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
見やすいプレゼン資料の作り方 - リニューアル増量版

Similar to Html s1

PPTX
Html入門
PDF
Html1
PPTX
HTML入門
PDF
芸術情報演習デザイン(web) 第2回:HTML入門
PDF
HTML初心者講座
PDF
Html part1
PDF
メディア芸術基礎 Ⅰ 第2回 HTML入門
PDF
電技研Web講習
PDF
Webサーバ、HTML
PDF
html5講座 (初心者向け)
PDF
html講座
 
PDF
.インストールをやってみよう
PDF
今日からはじめるHTML5 ver.2012
PDF
HTML初心者向け勉強会
PDF
To write a better HTML
 
PPTX
Html講義
PPTX
前期講座02
PPT
最速HTML勉強会
PDF
マークアップ講座 01b HTML
PDF
Basic HTML Introduction
Html入門
Html1
HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門
HTML初心者講座
Html part1
メディア芸術基礎 Ⅰ 第2回 HTML入門
電技研Web講習
Webサーバ、HTML
html5講座 (初心者向け)
html講座
 
.インストールをやってみよう
今日からはじめるHTML5 ver.2012
HTML初心者向け勉強会
To write a better HTML
 
Html講義
前期講座02
最速HTML勉強会
マークアップ講座 01b HTML
Basic HTML Introduction

More from Jun Chiba

PDF
【2025年版】新入社員研修で使える楽しくかつ、学びのあるビジネスゲーム7選(ゲーム研修)
PDF
アウトドアでできるチームビルディング研修用ビジネスゲーム「ロゲイニングカード」説明資料
PDF
ジグソーメソッドを用いた情報整理グロープワーク「モンスタービルディング」の説明資料
PDF
ストレスマネジメントを疑似体験できるゲーム型メンタルヘルス研修「ストマネ」説明資料
PPTX
ビジネスマナーをゲーム形式で疑似体験できる研修「マナーストーリーオンライン版」の説明資料
PDF
ビジネスマナーをゲーム形式で疑似体験できる研修「マナーストーリーカード版」の説明資料
PDF
ペーパータワーを拡張した経営シミュレーションゲーム「ペーパータワーforビジネス」説明資料
PDF
プロジェクトマネジメントを疑似体験できるボードゲーム研修「プロジェクトテーマパーク」説明資料
PDF
プログラミングを疑似体験できるパズル型カードゲーム「フローチャートパズル」の説明資料
PDF
営業を疑似体験できるビジネスゲーム研修「ヒアリングチャレンジ カード版」の説明資料
PDF
営業を疑似体験できるビジネスゲーム「ヒアリングチャレンジ オンライン」の説明資料
PDF
ダイバーシティ&インクルージョンを体験できる異文化コミュニケーションゲーム「バーンガ」の説明資料
PDF
チームビルディングに使える企業向けドミノレンタルサービス「ドミノ倒しゲーム」の説明資料
PDF
ジグソーメソッドを用いた地図作成を目的とした情報整理ゲーム「ジグソータウン」の説明資料
PDF
チームビルディングに使えるコンセンサスゲーム「砂漠からの脱出 オンライン版」の説明資料
PDF
チームビルディングに使えるコンセンサスゲーム「砂漠からの脱出 カード版」の説明資料
PDF
チームビルディングに使えるコンセンサスゲーム「雪山での遭難 オンライン版」の説明資料
PDF
チームビルディングに使えるコンセンサスゲーム「雪山での遭難 カード版」の説明資料
PDF
チームビルディングに使える危機管理コンセンサスゲーム「船長の決断 オンライン版」の説明資料
PDF
チームビルディングに使える危機管理コンセンサスゲーム「船長の決断 カード版」の説明資料
【2025年版】新入社員研修で使える楽しくかつ、学びのあるビジネスゲーム7選(ゲーム研修)
アウトドアでできるチームビルディング研修用ビジネスゲーム「ロゲイニングカード」説明資料
ジグソーメソッドを用いた情報整理グロープワーク「モンスタービルディング」の説明資料
ストレスマネジメントを疑似体験できるゲーム型メンタルヘルス研修「ストマネ」説明資料
ビジネスマナーをゲーム形式で疑似体験できる研修「マナーストーリーオンライン版」の説明資料
ビジネスマナーをゲーム形式で疑似体験できる研修「マナーストーリーカード版」の説明資料
ペーパータワーを拡張した経営シミュレーションゲーム「ペーパータワーforビジネス」説明資料
プロジェクトマネジメントを疑似体験できるボードゲーム研修「プロジェクトテーマパーク」説明資料
プログラミングを疑似体験できるパズル型カードゲーム「フローチャートパズル」の説明資料
営業を疑似体験できるビジネスゲーム研修「ヒアリングチャレンジ カード版」の説明資料
営業を疑似体験できるビジネスゲーム「ヒアリングチャレンジ オンライン」の説明資料
ダイバーシティ&インクルージョンを体験できる異文化コミュニケーションゲーム「バーンガ」の説明資料
チームビルディングに使える企業向けドミノレンタルサービス「ドミノ倒しゲーム」の説明資料
ジグソーメソッドを用いた地図作成を目的とした情報整理ゲーム「ジグソータウン」の説明資料
チームビルディングに使えるコンセンサスゲーム「砂漠からの脱出 オンライン版」の説明資料
チームビルディングに使えるコンセンサスゲーム「砂漠からの脱出 カード版」の説明資料
チームビルディングに使えるコンセンサスゲーム「雪山での遭難 オンライン版」の説明資料
チームビルディングに使えるコンセンサスゲーム「雪山での遭難 カード版」の説明資料
チームビルディングに使える危機管理コンセンサスゲーム「船長の決断 オンライン版」の説明資料
チームビルディングに使える危機管理コンセンサスゲーム「船長の決断 カード版」の説明資料

Html s1

  • 1.
    1Copyright (c) 株式会社HEARTQUAKE All rights reserved .HTMLHTMLは、Internet ExplorerやFirefox、Chromeなどのインターネットプラウザ上にウェブページを表⽰示するための⾔言語です。わたしたちがふだん利利⽤用しているウェブサイトは、どのようにして記述されているのか、詳しく⾒見見ていきます。
  • 2.
    2Copyright (c) 株式会社HEARTQUAKE All rights reserved .ゴールイメージl  HTMLのゴールイメージ-  以下のような簡単なサイトが作成できること
  • 3.
    3Copyright (c) 株式会社HEARTQUAKE All rights reserved .HTMLとは  (1/2)l  HTML-  ウェブページを作成するために利利⽤用される⾔言語。-  HyperText Markup Languageの略略ü HyperText :複数の⽂文書を相互に関連付け、結び付ける仕組み。「テキストを超える」という意味から。ü HTML →ハイパーテキストに⽬目印をつける⾔言語-  ⽬目印をつける(Markup)というのは、⽂文書の各部分が、どんな役割を持っているのかを⽰示すということ。-  コンピュータに理理解できるように⽂文書の構造を定義することが、HTMLの最も重要な役割。
  • 4.
    4Copyright (c) 株式会社HEARTQUAKE All rights reserved .HTMLとは  (2/2)HTMLとは?HTMLの基本HTML(エイチティーエムエル、HyperTextMarkup Language)は、ウェブページを作成するために開発された⾔言語です。現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。  HyperText Markup Languageを⽇日本語で表すなら、「ハイパーテキストに⽬目印をつける⾔言語」くらいの意味になります。ハイパーテキスト(HyperText)とは、ハイパーリンクを埋め込むことができる⾼高機能なテキストです。ハイパーリンクというのは、ウェブページで下線の付いたテキストなどをクリックすると別ページへ移動する、あのリンクのことです。  普通の⽂文章<これはタイトル>HTMLとは?<ここまで><これは⾒見見出し>HTMLの基本<ここまで><これは段落落>HTML(エイチティーエムエル、HyperText Markup Language)は、ウェブページを作成するために開発された⾔言語です。現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。  <ここまで><これは段落落>HyperText Markup Languageを⽇日本語で表すなら、「ハイパーテキストに⽬目印をつける⾔言語」くらいの意味になります。ハイパーテキスト(HyperText)とは、ハイパーリンクを埋め込むことができる⾼高機能なテキストです。ハイパーリンクというのは、ウェブページで下線の付いたテキストなどをクリックすると別ページへ移動する、あのリンクのことです。  <ここまでね>マークアップのイメージコンピュータは各部の役割が理理解できないコンピュータは各部の役割を理理解できる!「開始タグ」と呼ぶ
  • 5.
    5Copyright (c) 株式会社HEARTQUAKE All rights reserved .HTMLの書き⽅方  (1/4)l  Sublime Text2を起動しましょう。l  そこに以下のHTMLを記述し、ファイル名をhello.htmlにして保存したファイルを、ダブルクリックしてみましょう。<html><head><meta charset=”utf-8”><title>ウェブページのタイトル</title></head><body><h2>ウェブページの見出し</h2>ウェブページを作成しました!</body></html>保存する際は、hello.html という名前で保存してください。「”」 をダブルクォーテーションと呼びますこうなればOK!
  • 6.
    6Copyright (c) 株式会社HEARTQUAKE All rights reserved .⽇日本語が変な⽂文字になったらl  この現象を「⽂文字化け」といいます。⽂文字化けの原因は・・・ü <meta charset = ”utf-8” > と正しく書いてますか?ü ブラウザのエンコードはUTF-8になっていますか?ü ダブルクォーテーション「”」が半⾓角になっていますか?補⾜足chromeを使っている⼈人向け まずはスパナマークをクリックIEを使っている⼈人向けまずはブラウザ上で右クリック
  • 7.
    7Copyright (c) 株式会社HEARTQUAKE All rights reserved .お疲れ様でした!!

[8]ページ先頭

©2009-2025 Movatter.jp