From 0930bbb69fd6acf468fd2c31a0ce6f82b6443f14 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 11 Jul 2021 01:20:05 +0900 Subject: Learn/HTML/Introduction_to_HTML を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/07/10 時点の英語版に同期 - conflicting 版を削除 --- .../ja/learn/html/introduction_to_html/index.html | 48 +++++++++++++--------- 1 file changed, 28 insertions(+), 20 deletions(-) (limited to 'files/ja/learn/html/introduction_to_html/index.html') diff --git a/files/ja/learn/html/introduction_to_html/index.html b/files/ja/learn/html/introduction_to_html/index.html index 6711d0012a..b91dc66ee2 100644 --- a/files/ja/learn/html/introduction_to_html/index.html +++ b/files/ja/learn/html/introduction_to_html/index.html @@ -15,51 +15,59 @@ translation_of: Learn/HTML/Introduction_to_HTML ---
{{LearnSidebar}}
-

本来、{{glossary("HTML")}} は、要素で構成される極めてシンプルな言語です。HTMLは、テキストの断片に、文書における他とは異なる意味 (段落なのか？箇条書きなのか？表の一部なのか？) を与え、文書を論理的なセクションに構成し (ヘッダを持つのか？コンテンツを３段組にするのか？ナビゲーションメニューを持つのか？) 、ページに画像や動画のようなコンテンツを貼り付けるために使うことができます。このモジュールでは、これらのうち最初の２つについて紹介し、HTMLを理解する上で知る必要がある基本的な概念や文法について紹介します。

+

本来、{{glossary("HTML")}} は、要素で構成される極めてシンプルな言語です。HTMLは、テキストの断片に、文書における他とは異なる意味 (段落なのか、箇条書きなのか、表の一部なのか) を与え、文書を論理的なセクションに構成し (ヘッダを持つのか、コンテンツを 3 段組にするのか、ナビゲーションメニューを持つのか) 、ページに画像や動画のようなコンテンツを貼り付けるために使うことができます。このモジュールでは、これらのうち最初の 2 つについて紹介し、 HTML を理解する上で知る必要がある基本的な概念や文法について紹介します。

-

前提条件

+
+

フロントエンドのウェブ開発者を目指している方へ

-

このモジュールを始めるにあたり、HTML の知識は一切必要ありません。しかし、最低でもコンピューターを利用したり、ウェブを受動的に利用 (つまり単にそれらを見たり、コンテンツを消費する) したりすることについては、慣れ親しんでいるべきです。基本的なソフトウェアをインストールするに挙がっている基本的な作業環境を整えておき、ファイルを扱うにあるような、ファイルを作成して管理する方法についても理解するべきです。これらの記事は両方共に、完全な初心者用のモジュール「Web入門」の一部です。

+

ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。

+ +

始めましょう

+ +
+ +

前提条件

+ +

このモジュールを始めるにあたり、 HTML の知識は一切必要ありません。しかし、最低でもコンピューターを利用したり、ウェブを受動的に利用する (つまり、ただ見てコンテンツを消費する) ための基本的な知識を持っている必要があります。基本的なソフトウェアをインストールするに挙がっている基本的な作業環境を整えておき、ファイルを扱うにあるような、ファイルを作成して管理する方法についても理解するべきです。これらの記事は両方共に、完全な初心者用のモジュール「Web入門」の一部です。

-

注：自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは JSBin や Thimble のようなオンラインコーディングプログラムで試すことが可能です。

+

注：自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは JSBin や Glitch のようなオンラインコーディングプログラムで試すことが可能です。

-

ガイド

+

ガイド

-

このモジュールは以下の記事を含んでいます。これらを読むことで、HTMLの基礎理論の全てを学び、スキルを試すのに十分な機会が得られるでしょう。

+

このモジュールには、以下の記事が含まれています。これらの記事では、 HTML の基本的な理論をすべて説明し、いくつかのスキルを試すための十分な機会を提供しています。

-
HTML入門
-
HTML を開始するための、完全な基本を網羅します — 要素、属性やその他の重要な用語を定義します。この用語を聞いたことがあるかもしれませんし、ここが言語に溶け込んでいる所です。また HTML 要素が構成される方法や、典型的な HTML ページが校正される方法を示し、その他の重要な言語機能を説明します。進むにつれ、HTML で遊んでみて、興味が沸いてくるでしょう！
+
HTML 入門
+
始めに、 HTML の絶対的な基本を網羅します。 — 要素、属性、その他の重要な用語を定義し、それらが言語のどこに当てはまるかを示しています。また、典型的な HTML ページがどのように構成されているか、 HTML 要素がどのように構成されているかを示し、その他の重要な基本的言語機能を説明します。また、 HTML に興味を持ってもらうために、いくつかの HTML で遊んでみましょう。
Headとは? HTML のメタデータ
-
HTML ドキュメントの Head は、ページが読み込まれてもウェブブラウザーで表示されない部分です。これはページ{{htmlelement("title", "タイトル")}}や、(HTML コンテンツを CSS でスタイリングする場合に) {{glossary("CSS")}} へのリンクや、カスタム favicon や、メタデータ (HTML についてのデータ、例えば誰が書いたかや、文書を記述する重要なキーワードなど) です。
+
HTML 文書の {{Glossary("Head","head")}} は、ページが読み込まれたときにウェブブラウザーに表示されない部分です。ここには、ページのタイトル ({{htmlelement("title")}})、 {{glossary("CSS")}} へのリンク (HTML コンテンツを CSS でスタイル付けしたい場合)、独自のファビコンへのリンク、メタデータ (誰が書いたか、文書を説明する重要なキーワードなど、 HTML に関するデータ) などの情報が含まれています。
HTML テキストの基礎
HTML の主な役割の1つは、テキストの意味付け (セマンティクスとしても知られます) で、それによってブラウザーは正しくテキストを表示する方法がわかります。この記事では HTML を使ってテキストブロックを見出しとパラグラフに分けたり、単語を強調/重要にしたり、リストを作成したりする方法を見て行きます。
ハイパーリンクを作成する
ハイパーリンクは本当に重要です — これはウェブをウェブにしているものです。この記事ではリンクを作成するのに必要な文法を表して、リンクの最も良いやり方を考察します。
上級のテキスト整形
HTML ではテキスト整形用として、HTML テキストの基礎 の記事で扱ってきてない多くの要素があります。ここでの要素はあまり知られてないですが、知っておくと役立ちます。ここでは引用や、説明リストや、コンピューターのコードや関連するテキスト、下付き上付きや、連絡先情報などのマークアップを学習します。
-
ドキュメントとウェブサイトの構造
-
ページの個々の部分 (例えば「パラグラフ」や「画像」) を定義するのと同様に、ウェブサイトのエリアも (例えば「ヘッダー」、「ナビゲーションメニュー」、「本文のカラム」) HTML で定義されます。この記事では基本的なウェブサイトの構造を計画する方法と、構造を表現する HTML を書く方法を見て行きます。
-
HTMLをデバッグする
+
文書とウェブサイトの構造
+
ページの個々の部分 (例えば「段落」や「画像」) を定義するのと同様に、ウェブサイトの領域 (例えば「ヘッダー」、「ナビゲーションメニュー」、「本文のカラム」) も HTML で定義されます。この記事では基本的なウェブサイトの構造を計画する方法と、構造を表現する HTML を書く方法を見て行きます。
+
HTML をデバッグする
HTML を書くのは良いですが、うまくいかなくて、コードのエラーが収まらない場合はどうでしょうか？この記事では手助けとなるいくつかのツールを紹介します。
-

評価

+

評価

-

以下の評価で、上記のガイドにある HTML 基礎の理解をテストできます。

+

以下の評価で、上記のガイドにある HTML 基礎の理解度をテストすることができます。

手紙をマークアップする
-
早かれ遅かれ、手紙を書くことを学びます; これはテキストフォーマットの技術をテストするのにも役立ちます！この評価ではマークアップすべき手紙が与えられます。
+
早かれ遅かれ、手紙を書くことを学びます。これはテキストフォーマットの技術をテストするのにも役立ちます！この評価ではマークアップすべき手紙が与えられます。
コンテンツページを構造化する
この評価では、ヘッダー・フッター・ナビゲーションメニュー・メインコンテンツ・サイドバーを含む、簡単なコンテンツページを構造化する HTML の能力をテストします。
-

関連情報

+
+

フィードバック

-
-
Web literacy basics 1
-
HTML 概論のモジュールで話されたたくさんのスキルを見て回ったりテストしたりできる、素晴らしい Mozilla ファウンデーションのコースです。学習者はこの6つのモジュールにて Web について読んだり書いたり参加したりするのに慣れていきます。製作と共同作業を通じて Web の基礎を発見してください。
-
+

今回のようなガイドやチュートリアルの改善のために、こちらのアンケートにご協力ください。

+
-- cgit v1.2.3-54-g00ecf