ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 の基礎、パート 1: はじめに
HTML5 は、Web コンテンツを整理するために設計された言語であり、その目的は、標準的で直感的な UI マークアップ言語を作成することにより、Web デザインと開発を容易にすることです。 HTML5 には、ページを切り取ったり分割したりするためのさまざまな手段が用意されており、これにより、サイトを論理的に編成するために使用できるだけでなく、サイトを集約する機能も提供できる切り取りコンポーネントを作成できます。 HTML5 は、情報マッピングの本質を体現し、情報を分割し、情報をタグ付けして使いやすく理解しやすくするため、「情報から Web サイトのデザインへのマッピング手法」と言えます。これは、HTML5 の表現力豊かなセマンティクスと実用的な美しさの基礎であり、デザイナーや開発者は、単純なテキスト コンテンツからリッチでインタラクティブなコンテンツまで、あらゆるレベルでさまざまなコンテンツを公開できるようになります。すべてのマルチメディアが含まれています。
HTML5 は、効率的なデータ管理、描画、ビデオおよびオーディオ ツールを提供し、Web およびポータブル デバイス上でのクロスブラウザー アプリケーションの開発を容易にします。 HTML5 は、柔軟性が向上し、非常に魅力的なインタラクティブな Web サイトの開発をサポートするため、モバイル クラウド コンピューティング サービスの開発を推進するテクノロジーの 1 つです。また、新しいタグと、エレガントな構造、フォーム コントロール、API、マルチメディア、データベース サポート、大幅に向上した処理速度などの強化された機能も導入されています。
HTML5 の新しいタグは非常に刺激的であり、タグにはその機能と使用法がカプセル化されています。以前のバージョンの HTML では、より非説明的なタグが使用されていましたが、HTML5 には非常に説明的で直感的なタグがあり、コンテンツをすぐに識別できる豊富なコンテンツ タグのセットが提供されています。たとえば、頻繁に使用される
< ; セクション> タグと タグには、画像、グラフ、写真を含めることができます。
リスト 5.
図のキャプション
メディア要素
リスト 7 は、
タグの例
ブラウザはビデオタグをサポートしていませんタグには、 タグを含めることができます。この要素を使用すると、代替のビデオ ファイルまたはオーディオ ファイルを指定でき、ブラウザはメディア タイプまたはサポートされているコーデックに基づいてその中から選択できます。リスト 8 には 2 つのオプションがあります。使用しているブラウザーでファイルの WMA バージョンが再生できない場合は、MP3 バージョンを試してください。それ以外の場合は、音声が利用できない理由をユーザーに知らせるメッセージを表示します。
リスト 8.
お使いのブラウザは HTML をサポートしていません「audio」要素。
カリフォルニアにはディズニーランドがあります。
フッターエリアには、ページ、記事、またはcontent 記事の著者や日付などの情報。ページのフッターとして、リスト 11 に示すように、著作権またはその他の重要な法的情報が含まれる場合があります。
リスト 11. タグの例
p>Copyright 2011 Acme United の作成を開始しましょう。あなたのページ。 Acme United の Web ページを作成します。完成したページを図 2 に示します。このページはダウンロードして使用できます (「ダウンロード」セクションを参照)。
図 2. Acme United の Web ページ
それでは、ページを組み立ててみましょう。最初に扱うのは、 です。HTML5 では、 を覚えておく必要があります。これにより、このタグのエントリが簡素化されるだけでなく、将来性も高まります。これは html5 とは呼ばれず、単なる html であることに注意することが重要です。 HTML バージョンがいくつあっても、 は常に html になります。 タグには、 タグの間にネストする必要があります。
リスト 12. タグの例
を使用できます。スクリプト、ブラウザのサポート情報、スタイル シート リンク、メタ情報、その他の初期化関数。ヘッド領域では次のタグを使用できます:
4. ; title> は、ドキュメントの実際のタイトルを格納します。その内容は、ページを閲覧するときに表示されるタイトルです。リスト 13 の タグは、HTML5 ページのレンダリングに使用される CSS3 スタイル シートを識別します。スタイル シートのファイル名は main-stylesheet.css です。リスト 13. タグの例
リンク rel="stylesheet" href="main-stylesheet.css" main-stylesheet.css" />
次に、 タグを使用し、その後に前に紹介した タグと タグを使用します。この例の セクションには、Acme United という架空の会社の名前が含まれており、 セクションには、サブタイトルが「A Simple HTML5 Example」であることを示す情報が含まれています。
これまで、ページの設定に使用された CSS3 をリスト 15 に示しました。まず、ページのフォントを設定し、次にページの本文を調整し、本文のサイズを明確にして、ヘッダー セクション構造の第 1 レベルと第 2 レベルのタイトル タグを設計します。これがヘッダーです。ページに使用したいもの。
リスト 15. CSS3 の例 1
* {
}
body {
width: 800px;margin: 0em auto;
}
header h1 {
font-size: 50px;
margin: 0px;
color: #006;
}
ヘッダー h2 {
font-size: 15px;
margin: 0px;
color: #99f;
font-style: italic;
}
リスト 16 は、メイン サイトのナビゲーションを処理することを目的とした