HTMLの学習

コンテンツ

ステップに
パート1/2：HTMLの基礎を学ぶ
パート2/2：高度なHTMLの学習
チップ
警告
必需品

HTMLはの略語です ハイパーテキストマークアップ言語、それはコードまたは言語これは、Webサイトの作成に使用されます。これまでにプログラムしたことがない場合は複雑に見えるかもしれませんが、試してみるために必要なのは、単純なワードプロセッシングプログラムとインターネットブラウザだけです。フォーラム、オンラインプロファイル、またはwikiHowの記事から一部のHTMLを認識できる場合があります。 HTMLは、インターネットを使用するすべての人にとって便利なリソースであり、HTMLの学習にかかる時間は予想よりも短い場合があります。

ステップに

パート1/2：HTMLの基礎を学ぶ

HTMLドキュメントを開きます。 メモ帳またはWordforWindowsやTextEditor for Macなど、ほとんどのワードプロセッシングプログラムを使用してHTMLドキュメントを作成できます。新しいドキュメントを開き、トップメニューから[ファイル]→[名前を付けて保存]を選択してドキュメントをWebページとして保存するか、ファイル拡張子を「.doc」、「。rtf」などから「.html」または「.htm」に変更します。 "。
- ドキュメントがリッチテキスト形式（RTF）から「プレーンテキスト」形式に変更されていること、および一部の形式オプションと画像が正しく保存されていないことを示す警告が表示される場合があります。この警告は無視してかまいません。 HTMLドキュメントはこれらのオプションを使用しません。
- .htmlファイルと.htmファイルは同じです。それは両方とも機能します。
ブラウザでドキュメントを表示します。 空白のドキュメントを保存して閉じ、保存した場所のドキュメントをダブルクリックして再度開きます。これで、ドキュメントが空白のWebページとしてブラウザで開かれるはずです。それでも問題が解決しない場合は、ファイルのアイコンをブラウザのアドレスバーにドラッグします。後で、この記事の手順に従ってHTMLドキュメントを編集する場合は、ブラウザに戻ってコードの変更がどのように表示されるかを確認します。
- 注：あなたのウェブページはまだオンラインではありません。このページには他の人がアクセスすることはできず、テストするためにインターネット接続が機能している必要はありません。ブラウザを使用して、HTMLドキュメントをWebサイトであるかのように「読み取る」だけです。
「タグ」とは何かを理解します。 タグは、通常のテキストのように、最終的なWebページには表示されません。タグは、ページとページのコンテンツを表示する方法をブラウザに指示します。開始タグには指示が含まれています。たとえば、テキストを太字で表示するようにブラウザに指示できます。指示が適用される場所をブラウザに通知するには、終了タグが必要です。この例では、開始タグと終了タグの間のすべてのテキストが太字になっています。終了タグも括弧内に配置されますが、最初の括弧の後にスラッシュが続きます。
- 開始タグを角かっこで囲みます。これが開始日です>
- 括弧内に終了タグを記述しますが、最初の括弧の後にスラッシュを置きます。 /これは終了タグです>)
- 機能タグの書き方については、この記事の後半をお読みください。このステップでは、タグの書き方を覚えておく必要があります：>と/>。
- 他のHTMLコースでは、タグは「要素」とも呼ばれ、開始タグと終了タグの間のテキストは「要素コンテンツ」とも呼ばれます。
最初のhtml>タグを記述します。 すべてのHTMLドキュメントは html>タグを付けて、 / html>鬼ごっこ。これは、これらのタグ間のすべてがHTMLで記述されていることをブラウザに通知します。次のタグをドキュメントに追加します。
- 書く html> ドキュメントの上部にあります。
- Enterキーを押すか、Returnキーを数回押してスペースを確保してから、 / html>
- あなたを覚えている すべて この記事では、これら2つのタグの間にあります。
頭を>ドキュメントの一部にします。 タグhtml>と/ html>の間にあなたは頭>開始タグと /頭>-終了タグ。これらのタグの間にもう一度スペースを空けてください。これらのタグの間に書かれたものは、Webページ自体には表示されません。次の手順を試して、情報が表示される場所を確認できるかどうかを確認してください。
- head>タグと/ head>タグの間に書き込みます。 タイトル> そして /タイトル>
- タグtitle>と/ title>の間に次のように記述します。 HTMLの学習方法（写真付き）-wikiHow.
- ドキュメントを保存してブラウザで開きます（または、ページがまだ開いている場合は、ドキュメントを保存してブラウザでページを更新します）。ページ上部のアドレスバーの上に、今書いた内容が表示されますか？
ボディ>セクションを作成します。 この初心者向けドキュメントの他のすべては、本文>セクションに配置され、Webページに表示されます。後タグ/ヘッド>、しかし の前に タグ/ html>あなたが書く ボディ> そして /ボディ>。この記事でさらに説明することはすべて、bodyタグの間に配置します。これで、次のようなドキュメントが作成されます（箇条書きなし）。
- html>
- 頭>
- タイトル> HTMLを学ぶ-wikiHow /タイトル>
- /頭>
- ボディ>
- /ボディ>
- / html>
さまざまなスタイルのテキストを追加します。 これで、実際にブラウザに表示されるものを書き始めました。変更を保存してブラウザ内のページを更新すると、bodyタグ内に書き込んだすべてのものがブラウザに表示されます。書くない兆候のあるものそして >ブラウザはそれをプレーンテキストではなくHTML命令として解釈するためです。たとえば書く こんにちは世界！ （「Helloworld！」の英語。これは、特定のプログラミング言語のプログラミングコースの最初の例としてのグローバル標準テキストです）またはその他のテキストで、テキストの前後に次のタグを付けて、何が起こるかを確認します。
- em> Hello world！/ em> イタリック体のテキストのように見えます： こんにちは世界！
- 強い> Hello world！/強い> 太字のテキストのように見えます： こんにちは世界！
- s> Hello world！/ s> 取り消し線のテキストのように見えます： ~~こんにちは世界！~~
- sup> Hello world！/ sup> 上付き文字のように見えます：
- サブ>ハローワールド！/サブ> キャプションのように見えます： _{こんにちは世界！}
- 組み合わせを試してみてください：どのように見えるか em> strong> Hello world！/ strong> / em> 出て行け？
テキストを段落に分割します。 ドキュメントに異なる行のテキストを配置すると、すべての行が次々に配置されていることがわかります。新しい行と空白行を自分でプログラムする必要があります。
- p>これは別のセクションです。/p>
- この文は最初の行にあり、この文は次の行にあります。
  これは、終了タグを必要としない最初のタグです。このようなタグを1つと呼びます 空のタグ.
- セクションの名前を明確にするためにヘッダーを作成します。
  h1>ヘッダー/ h1>：可能な最大のヘッダー
  h2>ヘッダー/ h2> （2レベルヘッダー）
  h3>ヘッダー/ h3> （3レベルのヘッダー）
  h4>ヘッダー/ h4> （4レベルのヘッダー）
  h5>ヘッダー/ h5> （可能な限り最小のヘッダー）
リストの作成方法を学びます。 Webページにリストを作成する方法はいくつかあります。次の方法を試して、何が一番好きかを見つけてください。 1組のタグがリスト全体の周りに配置され（順序付けられていないリストのul>および/ ul>タグなど）、異なるタグのペアがリスト内の各アイテムの周りに配置されることに注意してください（li>および/ li>など）。。
- 次のコードを使用して、箇条書きを作成します。
  ul> li>あるアイテム/ li> li>別のアイテム/ li> li>別のアイテム/ li> / ul>
- または、番号付きリストを作成するための次のコード：
  ol> li>アイテム1 / li> li>アイテム2 / li> li>アイテム3 / li> / ol>
- または、いわゆる定義リストを作成するためのこのコード：
  dl> dt>コーヒー/ dt> dd>-温かい飲み物/ dd> dt>ミルク/ dt> dd>-冷たい飲み物/ dd> / dl>
新しい線、水平線、画像でページをより魅力的にします。 それでは、ページに他のものを追加し始めましょう。次のタグを試してください（画像へのリンクを使用できるように、画像をオンラインで投稿する必要があります）。
- 行を挿入します： br> または時間>
- 画像を挿入： img src = "the_url_of_your_image">
ページ上の他の場所へのリンクを挿入します。 このコードを使用して他のページやWebサイトにリンクすることもできますが、まだWebサイトがないため、リンクできるページ上の特定の場所である「アンカー」に焦点を当てます。
- まず、リンク先のページのポイントにa>タグを付けてアンカーを作成します。アンカーに覚えやすい明確な名前を付けます。
  
  a name = "Tips">これはアンカーを配置するテキストです。/a>
- タグhref>を使用して、アンカーまたは別のWebページにリンクします。
  
  a href = "このページのウェブページのURLまたはアンカーの名前">ここにリンクとして表示されるテキストまたは画像を書き込みます。/a>
- 別のページのアンカーにリンクするには、URLの後に＃文字を追加し、その後にアンカーの名前を追加します。たとえば、http：//www.wikihow.com/HTML-leren#Tipsを使用すると、このページの「ヒント」セクションに直接移動できます。

パート2/2：高度なHTMLの学習

属性について学びます。 属性はタグ内に配置され、開始タグと終了タグの間の「要素コンテンツ」をさらに調整するために使用されます。彼らは決して独立していません。それらは次のように書かれています： 名前= "値". 名前属性の名前（「色」など）を表し、値この特定のケースについて説明します（例：「赤」）。
- この記事の前の部分をよく見ていた場合は、すでに属性に遭遇しています。 img>タグは属性を使用します src、アンカーは属性を使用します名前リンクは属性を使用します href。あなたはそれらがすべてサイズであると言うことができます ___='___’ フォローする。
HTMLテーブルを試してみてください。 表またはグラフを作成するには、いくつかのタグが必要です。
- テーブル全体の周りのテーブルタグ（英語では「table」）から始めます。テーブル> /テーブル>
- 各行のコンテンツの周りにタグを配置します。 tr>
- 最初の行に列ヘッダーを配置します。 th>
- セルを連続した行に配置します。 td>
- これは、これらすべてがどのように組み合わされるかの例です。
  
  表> tr> th>列1：月/ th> th>列2：節約されたお金/ th> / tr> tr> td> 1月/ td> td>€100 / td> / tr> /表>
ヘッドセクションで使用されている他のタグについて説明します。 各ドキュメントの先頭に配置するタグヘッド>についてはすでに学習しました。タイトル>タグに加えて、ヘッドセクションに他のタグがある場合があります。
- メタタグは作成に使用されます メタデータ Webページについて。このデータは、検索エンジンがWebページを分類するために使用されます。ページを検索エンジンに表示するには、1つ以上のメタタグを配置できます（終了タグは必要ありません）。各タグには、名前属性とコンテンツ属性が1つだけ含まれている必要があります。例：meta name = "description" content = "put here説明 ">;またはmetaname = "keywords" content = "ここにキーワードのリストを記述し、常にコンマで区切ってください">
- link>タグは、他のファイルをページにリンクするために使用されます。通常、CSSスタイルシートをHTMLページに関連付けるために使用されます。これらのページは、異なる種類のコードで構成され、ページの全体的なスタイルを決定するために使用されます。
- script>タグは、javascriptファイルをHTMLページに関連付けるために使用されます。 Javascriptを使用すると、ユーザーがページで何かをした場合にページを変更できます。
既存のページのHTMLで遊んでください。 Webページのソースコードを表示することは、HTMLの知識を広げるための優れた方法です。ページを右クリックして、[ソースの表示]、[ページのソースの表示]などを選択します。知らない特定のタグが何をしているのかを調べるか、オンラインで答えを検索してください。
- 他の人のWebサイトを編集することはできませんが、HTMLコードを自分のドキュメントにコピーして、さまざまな調整がどのように行われるかを確認することができます。注：多くのWebサイトはCSSスタイルシートを使用しているため、多くの色や他のスタイルを表示できない場合があります。
より詳細な記事を読んで、HTMLについて学びましょう。 W3SchoolsやCodecademyなど、より多くのHTMLタグを習得するための多くのリソースがインターネット上にあります。利用可能なHTMLブックも多数ありますが、HTML標準は随時変更されるため、最新版を使用していることを確認してください。 HTMLを適切なレベルで習得したら、CSSを使用して、Webページのデザインとスタイルをより細かく制御できます。その後、次のステップは通常javascriptです。

チップ

インターネット上で簡単なWebページを見つけて、コードをいじり始めると便利です。テキストを移動したり、フォントを変更したり、画像を変更したりしてみてください。
ノートブックを使用してコードを書き留めることができるので、しばらく覚えていない場合に頼ることができます。このページを印刷して、参照用に保管することもできます。
XMLとRSSは、最近Webサイトでますます使用されています。特にソースコードで見ると、コードは人間の目にはアクセスできないように見えるかもしれませんが、機能は便利です。
HTML内で使用されるタグでは大文字と小文字は区別されませんが、デフォルトでは小文字が使用されます（この記事で使用しているように）。 XHTMLとの互換性のためにも、タグには小文字を使用することを強くお勧めします。

警告

一部のタグは使用されなくなり、同じことを行う他のタグに置き換えられましたが、多くの場合、より多くのオプションが提供されます。
ページがHTML標準に準拠していることを確認する場合は、W3 Webサイトにアクセスして、現在の標準に対してコードをテストしてください。多くのタグは廃止され、最新のブラウザでより適切に機能するタグに置き換えられました。