HTML入門トレーニング

HTMLの構造

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
基本的なHTMLの構造について学びます。
講師:
05:42

字幕

このレッスンでは基本的な HTMLの構造について学びます 実際にHTMLを書き始める前に HTMLの基本的な構造について 学んでおきましょう 画面ではChromeでサンプルファイルを 開いているところです このサンプルファイルは非常に シンプルな作りになっています 画面を見ると左上に「ページのコンテンツ」 と書かれた見出しが表示されています そしてその見出しの下にはその補足 「ページのコンテンツはbodyタグの 内側に…」という説明文が表示されています このようなシンプルなページではありますが 実際にこのページがどのような HTMLで書かれているか ということについてはブラウザ上で 確認することができません そこで便利なのが開発者向けツールです 開発者向けツールは様々なブラウザで 様々な名称に分かれていますが このHTMLがどのようなHTMLの 構造になっているのか ということを簡単に確認することができます 例えばInternet Exploreでは 開発者ツール Firefoxでは Firebug という名前です そして今使っているChromeでは Developer Toolsという名前で その機能は用意されています ブラウザ上で右クリックをして 一番下の「要素を検証」という メニューを選びます するとDeveloper Toolsの中に 含まれる このHTMLの中に含まれる要素を 確認するためのツールが起動します 画面の下側を見てみましょう これが要素を確認するためのツールです HTMLの中にはいくつかの タグが表示されています 一番上にはheadタグ その中にはbodyタグがあります すると画面をみて お気づきになるかと思いますが マウスでハイライトした要素が このブラウザ上でも実際に ハイライトされています この機能を使うことによって 実際に今ブラウザで表示しているHTMLが どのような構造になっているのか ということを見ながら確認することができます これはサンプルページ以外の通常のWebサイトを 閲覧時にも有効な機能です それではこのHTMLファイルを実際に コードエディタで開いてみましょう コードエディタでサンプルページを開きました 基本的なHTMLの構造は とてもサンドイッチに似ています サンドイッチを作るには 2枚のパンが必要ですよね 同じことがHTMLにも言えます HTMLを書くためにはまず HTMLの開始タグが必要です そして開始タグを書いたら今度は 終了タグが合わせて必要になります この開始タグと終了タグのセットがなければ サンドイッチを作ることができない つまりHTMLを作ることができません なおHTMLの一番上には ドキュメントタイプ宣言というものがあります これはブラウザに対してこのHTMLが どのようなバージョンであるか ということを示すものです HTMLの中身には大きく分けて 二つのタグがあります 一つはheadタグ そして もう一つはbodyタグです 上から説明をしていきましょう まずheadタグです headタグの中には このHTMLがどのような役割を持っているか といった情報が入っています 例えばこの最初のmetaタグ ここではutf-8という文字コードでこの HTMLが書かれていることを示しています 二つ目のmetaタグではこのHTMLの description 概要が 「基本的なHTMLドキュメントについて学ぶ ページ」であるということを示しています titleタグではこのHTMLの 実際のタイトル ブラウザ上で表示した時にタグに表示される テキストを指定しています またこの他にも視覚表現 見た目を定義するCSSや ページの動きを制御する JavaScriptファイルを読み込むのも このheadタグの中です そして次のbodyタグ このbodyタグの中にある中身が ブラウザ上で 実際に表示されるコンテンツの中身となります つまり先程ブラウザで 表示していたような見出しの部分 そしてその見出しの下にある本文の部分 といったように実際に ブラウザに表示されているコンテンツが このbodyタグの中身には定義されています このように基本的なHTMLはまず htmlタグで全体を括り その上にはドキュメントタイプ宣言が存在し htmlタグの中身は大きく分けて二つ headタグとbodyタグに分かれており headタグの中身にはそのページが どういうページであるかという情報を定義し bodyタグの中身には実際にブラウザに 表示されるコンテンツを定義する ということになります このレッスンでは基本的な HTMLの構造について学びました

HTML入門トレーニング

HTMLはWebページを作るうえでもっとも重要な言語です。これがきちんと定義されなければ、Webページは正しく表示されません。このコースではHTMLの成り立ちから基本的な構文の書き方、さまざまなタグの意味やその使い方まで幅広い内容を学ぶことができます。またHTMLと並んで重要な言語であるCSSやJavaScriptについても、それぞれその概要を説明します。

5時間43分 (48 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年05月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。