コンテンツ

• ステップ
• パート1/2：HTMLの基本を学ぶ
• パート2/2：高度なHTML
• チップ
• 警告
• あなたは何が必要ですか

HTMLは英語の略です ハイパーテキストマークアップ言語 （ハイパーテキストマークアップ言語）。これは、サイトの基本的なマークアップが作成されるコードまたは言語です。プログラミングしたことがない場合、学習は困難に思えるかもしれませんが、実際には、開始するために必要なのは、基本的なテキストエディタとインターネットブラウザだけです。インターネットフォーラム、カスタマイズされたカスタムページ、またはwikiHowの記事で出くわしたHTMLマークアップの例に気付くかもしれません。 HTMLは、あらゆるインターネットユーザーにとって便利なツールであり、基本を学ぶのにかかる時間は思ったよりも短くなります。

ステップ

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

1. 1 HTMLドキュメントを開きます。 ほとんどのテキストエディタ（Windowsの場合はメモ帳またはメモ帳++、Macの場合はTextEdit、GNU / Linuxの場合はgedit）を使用してHTMLファイルを生成できます。新しいドキュメントを作成し、[ファイル]→[Webページ形式で名前を付けて保存]を使用して保存するか、ファイル拡張子を.doc、.rtf、または別の拡張子ではなく.htmlまたは.htmに変更します。
   • ファイルがRTF形式ではなく「プレーンテキスト」として保存される、または形式と画像が保存されないという警告が表示される場合があります。これは問題ありません。 HTMLの場合、これらのオプションは必要ありません。
2. 2 生成されたファイルをブラウザで開きます。 空のファイルを保存し、コンピューターで見つけてダブルクリックして開きます。空白のページがブラウザで開きます。そうでない場合は、ファイルをブラウザのアドレスバーにドラッグします。 HTMLファイルを編集するときに、このページを更新して変更を確認できます。
   • この方法では、インターネット上にWebサイトを作成していないことに注意してください。他の人はこのページにアクセスできず、ローカルページをテストするためにインターネット接続は必要ありません。ブラウザは、HTMLコードを単に解釈し、Webサイトであるかのように「読み取り」ます。
3. 3 マークアップタグとは何かを理解します。 通常のテキストとは異なり、タグはページに表示されません。代わりに、ページとそのコンテンツを表示する方法をブラウザに指示します。 「開始」タグには指示が含まれています。たとえば、テキストを次のように表示する必要があることをブラウザに通知できます。 大胆な..。また、命令が終了するブラウザを示すために「end」タグが必要です。この例では、開始タグと終了タグの間のテキストが太字で表示されます。タグは等しくない記号の中に書かれていますが、終了タグはスラッシュで始まります。
   • 開始タグは、不等式記号の間に書き込まれます。 オープニングタグ>
   • 終了タグでは、タグ記述子（名前）の前にスラッシュが配置されます。 /終了タグ>
   • さまざまなタグがどのように使用されているかを確認するために読んでください。このステップでは、記録形式を覚えておく必要があります。タグは不等式記号の間に書かれています：>と/>
   • 一部のチュートリアルでは、HTMLタグは要素と呼ばれ、開始タグと終了タグの間のテキストは要素コンテンツと呼ばれます。
4. 4 エディターでhtml> tagと入力します。 すべてのHTMLファイルはタグで始まる必要があります html> タグで終わります / html>..。これらのタグは、タグ間のすべてのコンテンツがHTMLであることをブラウザに通知します。次のタグをドキュメントに追加します。
   • 多くの場合、HTMLファイルは次の行で始まります ！DOCTYPE html>つまり、ブラウザはファイル全体をHTMLとして認識する必要があります。この行は必須ではありませんが、互換性の問題のトラブルシューティングに役立ちます。
   • ダイヤル html> ドキュメントの上部にあります。
   • EnterキーまたはReturnキーを複数回押して複数の空白行を作成し、次のように入力します / html>
   • 覚えておいてください 全体 この記事で作成するコードは、これら2つのタグの間に記述する必要があります。
5. 5 ファイルにhead>セクションを作成します。 html>タグと/ html>タグの間に、開始タグを作成します 頭> と終了タグ /頭>..。それらの間にいくつかの空白行を追加します。 head>タグと/ head>タグの間に書き込まれたコンテンツは、ページ自体には表示されません。次の手順に従うと、このタグの目的がわかります。
   • head>タグと/ head>タグの間に、次のように記述します。 タイトル> と /タイトル>
   • title>タグと/ title>タグの間に次のように記述します HTMLを学ぶ方法-wikiHow.
   • 変更を保存し、ブラウザでファイルを開きます（または、ファイルがすでに開いている場合はページを更新します）。アドレスバーの上にあるページタイトルに表示されるテキストを参照してください。
6. 6 ボディ>セクションを作成します。 この例の他のすべてのタグとテキストは本文セクションに書き込まれ、その内容がページに表示されます。 後 終了タグ/ヘッド>、ただし 前 タグ/ html>タグを追加 ボディ> と /ボディ>..。この記事の残りの部分では、bodyセクションを操作します。ファイルは次のようになります。
   html>
   頭>
   タイトル> HTMLの学習方法-wikiHow /タイトル>
   /頭>
   ボディ>
   /ボディ>
   / html>
7. 7 さまざまなスタイルを使用してテキストを追加します。 ページに実際のコンテンツを追加する時が来ました！ bodyタグの間に書き込んだものはすべて、ブラウザで更新された後、ページに表示されます。 使ってはいけません 記号 また >ブラウザはコンテンツをテキストではなくタグとして解釈しようとするためです。書く こんにちは！ （または好きなものを）次に、これらのタグをテキストに追加して、何が起こるかを確認してください。
   • em>みなさん、こんにちは！/ em> テキストを「イタリック体」にします。 こんにちは！
   • 強い>みなさん、こんにちは！/強い> テキストを「太字」にします。 こんにちは！
   • s>みなさん、こんにちは！/ s> 取り消し線テキスト： こんにちは！
   • sup>みなさん、こんにちは！/ sup> フォントを上付き文字として表示します。
   • サブ>みなさん、こんにちは！/サブ> フォントを下付き文字として表示します。 _{こんにちは！}
   • さまざまなタグを一緒に試してください。それがどのように見えるか em>強い>みなさん、こんにちは！/強い> / em>?
8. 8 テキストを段落に分割します。 HTMLファイルに複数行のテキストを書き込もうとすると、ブラウザに改行が表示されないことがわかります。テキストを段落に分割するには、タグを追加する必要があります。
   • p>これは別の段落です。/p>
   • この文の後には、この行の開始前に改行br>が続きます。
     これは、終了タグを必要としない最初のタグです。これらのタグは「空の」タグと呼ばれます。
   • セクションのタイトルを表示する見出しを作成します。
     h1>見出しテキスト/ h1>：最大のタイトル
     h2>見出しテキスト/ h2> （第2レベルの見出し）
     h3>見出しテキスト/ h3> （第3レベルの見出し）
     h4>見出しテキスト/ h4> （第4レベルの見出し）
     h5>見出しテキスト/ h5> （最小タイトル）
9. 9 リストの作成方法を学びます。 Webページにリストを作成する方法はいくつかあります。以下のオプションを試して、どれが一番好きかを決めてください。リスト全体に1組のタグが必要であり（たとえば、箇条書きの場合はul>と/ ul>）、各リスト項目は異なるタグのペア（たとえば、li>と/）で強調表示されることに注意してください。 li>。
   • 箇条書き：
     ul> li>最初の行/ li> li> 2番目の行/ li> li>など/ li> / ul>
   • 番号付きリスト：
     ol> li> One / li> li> Two / li> li> Three / li> / ol>
   • 定義リスト：
     dl> dt>コーヒー/ dt> dd>-ホットドリンク/ dd> dt>レモネード/ dt> dd>-コールドドリンク/ dd> / dl>
10. 10 を使用してページをレイアウトする 改行、水平線、および ピクチャー. テキスト以外のものをページに追加する時が来ました。詳細については、次のタグを試すか、リンクをたどってください。オンラインホスティングサービスを使用して、投稿する画像へのリンクを作成します。
    • 水平線： 時間>
    • 画像を挿入： img src = "image link">
11. 11 リンクを追加します。 これらのタグを使用して、他のページやサイトへのハイパーリンクを作成できますが、まだWebサイトがないため、アンカーリンク、つまりページ上の特定の場所へのリンクを作成する方法を学習します。
    • ページ上でリンクするa>タグを使用してアンカーを作成します。明確で記憶に残る名前を思い付く：
      
      a name = "Tips">リンク先のテキスト。/a>
    • href>タグを使用して、相対リンクまたは外部リソースへのリンクを作成します。
      
      a href = "ページへのリンクまたはページ内のアンカー名">リンクとして機能するテキストまたは画像。/a>
    • 別のページの相対リンクにリンクするには、メインリンクとアンカーの名前の後に＃記号を追加します。たとえば、https：//en.wikihow.com/learn-HTML#Tipsは、このページのヒントセクションにリンクしています。

パート2/2：高度なHTML

1. 1 属性を理解する。 属性はタグ内に書き込まれ、追加情報を示します。属性の形式は次のとおりです。 名前= "値"、 どこ タイトル 属性を定義します（たとえば、 色 色属性の場合）、値はその値を示します（たとえば、 赤 赤の場合）。
   • 属性は、HTMLの基本に関する前のセクションで実際に使用されています。 img>タグは属性を使用します src、相対リンクアンカーは属性を使用します 名前リンクは属性を使用します href..。すでにお気づきのように、すべての属性は次の形式で記述されています ___='___’.
2. 2 HTMLテーブルを試してみてください。 テーブルの作成には、さまざまなタグの使用が含まれます。実験するか、より詳細な手順を読むことができます。
   • テーブルタグを作成します。テーブル> /テーブル>
   • 表の各行の内容をタグで囲みます。 tr>
   • 列見出しは次のタグで定義されます。 th>
   • 後続の行のセル： td>
   • これらのタグの使用例：
     
     テーブル> tr> th>列1：月/ th> th>列2：節約/ th> / tr> tr> td> 1月/ td> td> 5000ルーブル/ td> / tr> /テーブル>
3. 3 追加のヘッドセクションタグを学びます。 すべてのhtmlファイルの先頭にあるhead>タグについてはすでに学習しました。タイトル>タグの他に、このセクションには他のタグがあります。
   • を含むメタタグ メタデータ検索エンジンがサイトのインデックスを作成するために使用します。検索エンジンでサイトを見つけやすくするには、1つ以上の開始メタ>タグを使用します（終了タグは必要ありません）。タグごとに1つの属性と1つの値を使用します。metaname= "description" content = "page description">;またはメタ名= "keywords" content = "カンマ区切りのキーワード">
   • 異なるタイプのエンコーディングを使用して作成され、色、テキストの配置、およびその他の多くの機能を使用してHTMLページを変更できる、スタイルシート（CSS）などのサードパーティファイルを指すリンク>タグ。
   • JavaScriptファイルをページに添付するために使用されるスクリプト>タグ。これらのファイルは、（ユーザーの操作に応じて）インタラクティブにページを変更するために必要です。
4. 4 他のサイトのHTMLコードを試してみてください。 他のWebページのソースコードを表示することは、HTMLを学ぶための優れた方法です。ページを右クリックして、ブラウザのトップメニューから[ソースの表示]などを選択できます。なじみのないタグが何をするのかを理解するか、インターネットでタグに関する情報を検索してみてください。
   • 他の人のサイトを編集することはできませんが、ソースコードをファイルにコピーして、後でタグを試すことができます。 CSSマークアップが利用できない場合があり、色やフォーマットが異なる場合があることに注意してください。
5. 5 より詳細なガイドの探索を開始します。 W3SchoolsやHTMLbookなど、HTMLタグ専用のサイトがインターネット上にたくさんあります。紙の本も販売されていますが、標準が変化し進化するにつれて、最新版を見つけてください。さらに良いことに、CSSをマスターして、サイトのレイアウトと外観をより細かく制御できます。 CSSを学んだ後、Webデザイナーは通常JavaScriptを学びます。

チップ

• メモ帳++は、通常のメモ帳と同様の優れた無料プログラムですが、オンラインのブラウザでコードを保存してテストできます。 （HTML、CSS、Python、JavaScriptなど、ほぼすべての言語もサポートしています。）
• ネット上で簡単なページを見つけ、コードをコンピューターに保存して試してみてください。テキストを移動したり、フォントを変更したり、画像を置き換えたりしてみてください。
• タグを書く場所にノートを置いておくと、いつでも手元に置いておくことができます。このページを印刷して参照することもできます。
• コードを書くときは、自分や他の人が理解できるように注意深く行ってください。使用！-ここにコメントを挿入-> HTMLコメントの場合：ページには反映されませんが、コードド​​キュメントには表示されます。
• XMLとRSSが人気を集めています。 XMLおよびRSSテクノロジを含むページのコードは、経験の浅いユーザーが読んで理解するのがより困難ですが、これらのツールは非常に便利です。
• HTMLのマークアップタグでは大文字と小文字は区別されませんが、標準化とXHTMLの互換性の両方のために、小文字のみを使用することをお勧めします（この記事の例のように）。

警告

• 一部のタグは過去数年間使用されなくなり、同じまたはいくつかの追加の効果を与える新しいタグに置き換えられました。
• ページをテストしたい場合は、W3サイトにアクセスして、最新のHTML要件を確認してください。 HTML標準は時間の経過とともに変化し、一部のタグは、最新のブラウザーでより適切に機能する新しいタグに置き換えられています。

あなたは何が必要ですか

• メモ帳（Windows）やテキストエディット（Mac）などのテキストエディタ
• 紙/メモ帳 （必要はありません）
• メモ帳++（Windows）やTextWrangler（Mac）などのHTMLエディター （必要はありません）