HTML (ハイパーテキスト マークアップ言語) は、Web ページを構築するための基本言語です。これは非常にシンプルで柔軟なコーディング言語であり、ほぼすべての Web ページは何らかの形式のコード (ColdFusion、XML、XSLT など) で構成されています。 HTML は簡単に習得できますが、すべての機能を習得するには長い時間がかかります。 Web ページをもっとカラフルで興味深いものにしたいですか?基本的な HTML ページの作成方法を学習した後は、基本的な CSS も学習してください。
ステップ
パート1 パート1/4:
ドキュメントを作成
{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5b\/Write-an-HTML-Page-Step-1-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-1-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5b\/Write-an-HTML-Page-Step-1-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-1-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1シンプルなテキスト エディターを開きます。 NotePad は良い選択であり、無料でダウンロードできます。ほとんどのテキスト編集ソフトウェアは HTML を書くことができますが、自動フォーマット機能を備えた複雑なソフトウェアでは HTML ページを整理することが難しくなります。 [1] X研究ソース
TextEdit は、ブラウザーで HTML として認識されない形式でファイルを保存することが多いため、推奨されません。
オンライン HTML エディタを使用することもできます。初心者が専門的な HTML 編集プログラムを使用することはお勧めしません。 [2] X研究ソース
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b2\/Write-an-HTML-Page-Step-2-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-2-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b2\/Write-an-HTML-Page-Step-2-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-2-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2ファイルを Web ページとして保存します。上部のメニューで「ファイル」を選択し、「名前を付けて保存」をクリックします。ファイル形式を「Web ページ」、「.html」、または「.htm」に変更します。見つけやすい場所にあります。
上記の 3 つのオプションは同じであり、違いはありません。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/45\/Write-an-HTML-Page-Step-3-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-3-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/45\/Write-an-HTML-Page-Step-3-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-3-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3ファイルを Web ブラウザーで開きます。ファイルをダブルクリックすると、ブラウザで自動的に開きますが、現時点では空白のページが表示されます。 Firefox や Internet Explorer などのブラウザを開き、 「ファイル」タブから「ファイルを開く」をクリックしてファイルを選択することもできます。
このページはインターネット上では利用できません。お使いのコンピューターでのみ表示できます。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/98\/Write-an-HTML-Page-Step-4-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-4-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/98\/Write-an-HTML-Page-Step-4-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-4-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4 Web ページを更新して、保存した変更を確認します。空のファイルに「<strong>Hello</strong>」と入力します。ブラウザで空白の Web ページを更新すると、ページの上部に太字の「Hello」が表示されます。このチュートリアルを進めながら、新しい HTML をテストすることができます。 .html ファイルを保存し、ブラウザ ウィンドウを更新するだけで、ブラウザが HTML をどのように解釈するかを確認できます。
ブラウザに「<strong>」と「</strong>」が表示される場合、ドキュメントが HTML として正しく解釈されていないことを意味します。別のテキスト エディターまたはブラウザーを使用してください。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/de\/Write-an-HTML-Page-Step-5-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-5-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/de\/Write-an-HTML-Page-Step-5-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-5-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5タグを理解します。 HTML 命令はタグの間に記述され、ブラウザに Web ページを解釈して表示する方法を伝えます。タグは山括弧 <> で囲まれており、Web ページには表示されません。上記の例ではすでに使用しています:
6 ドキュメントを作成します。 HTML ドキュメント内のすべてを削除します。次のテキストをそのまま入力してやり直してください (ドットは無視してください)。この HTML コードは、使用している HTML のバージョンをブラウザに伝えます。Web ページ上のすべてのコンテンツは、<html> タグと </html> タグの間にあります。 [3] X研究ソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
</html>
{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/dd\/Write-an-HTML-Page-Step-7-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-7-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/dd\/Write-an-HTML-Page-Step-7-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-7-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 7 head タグと body タグを追加します。 HTML ドキュメントは 2 つの部分に分かれています。 「ヘッド」部分は、Web ページのタイトルなどの特別な情報です。 「本文」セクションには Web ページのコンテンツが含まれます。これら 2 つのタグをドキュメントに配置します。終了タグを忘れないでください。太字のテキストが新しく追加されました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f9\/Write-an-HTML-Page-Step-12-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-12-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f9\/Write-an-HTML-Page-Step-12-Version-3.jpg\/v4-828px-Write-an-HTML-Page-Step-12-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4 Web ページ上のテキストを配置します。 Enter キーを押すだけではテキストが行に分割されないことに気づいたかもしれません。心配しないでください。次のタグを使用すると、段落や行を区切ったり、他の方法でテキストを配置したりすることができます。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/13\/Write-an-HTML-Page-Step-13-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-13-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/13\/Write-an-HTML-Page-Step-13-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-13-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5注釈テキストを追加します。コメント タグは Web ページには表示されません。Web ページのコンテンツに影響を与えずに、自分だけが閲覧できるコメントを HTML ドキュメントに書き込むために使用できます。 <!---ここにコメントを記入してください。 ---> 末尾のタグを追加しないでください。
一部のタグは単独で存在でき、末尾のタグを必要としません。これは「空のタグ」と呼ばれます。
{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2e\/Write-an-HTML-Page-Step-14-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-14-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2e\/Write-an-HTML-Page-Step-14-Version-3.jpg\/v4-828px-Write-an-HTML-Page-Step-14-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 6すべてのタグをまとめます。これらのタグを覚える最良の方法は、自分の Web ページで使用することです。次の例では、これまでに学習したすべてのタグを使用します。ブラウザがどのようにレンダリングするかを予測し、それをコピーしてドキュメントに貼り付けて確認してみてください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
私は HTML を <del>1</del> <ins>2</ins> 時間ほど学習しているので、準専門家だと思われます。
</本文>
</html>
広告する
パート3 パート3/4:
リンクと画像を追加する
{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7d\/Write-an-HTML-Page-Step-15-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-15-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7d\/Write-an-HTML-Page-Step-15-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-15-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1.属性を理解する。各ラベルに詳細な情報を書き込むことができます。この情報は「属性」と呼ばれ、タグ内の追加の説明情報であり、属性名="特定の値"の形式です。どの HTML タグにも title 属性を設定できます。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/31\/Write-an-HTML-Page-Step-16-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-16-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/31\/Write-an-HTML-Page-Step-16-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-16-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2別の Web ページにリンクします。別の Web ページへのハイパーリンクを作成するには、<a> </a> タグを使用します。 href 属性を使用して、リンク先の Web ページの URL を挿入します。次の例は、現在読んでいる Web ページへのリンクです。
<a href="http://www.wikihow.com/Write-an-HTML-Page">Web サイトの訪問者は、ここのテキストをクリックして、wikihow Web ページへのリンクをたどることができます。 </a>
{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a5\/Write-an-HTML-Page-Step-17-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-17-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a5\/Write-an-HTML-Page-Step-17-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-17-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}3タグにid属性を追加します。 HTML で利用できるもう 1 つの機能は、「id」要素です。どのタグでも、id="example" と記述するか、スペースなしで名前を入力します。 [6] X研究ソース現時点では明確な目的はありませんが、次のステップで使用します。
HTML を検証します。 HTML を検証してコードにエラーがないか確認します。ブラウザでウェブページを正しく表示できませんか?検証を実行すると、問題のあるエラーを見つけるのに役立ちます。また、HTML 仕様の更新により、正しく表示できるものの推奨されなくなったコードも識別できるため、HTML をより深く理解できます。古い HTML も引き続き使用できますが、異なるブラウザで表示すると Web ページに一貫性がなくなったり、問題が発生したりする可能性があります。
W3C の無料オンライン検証サービスを試すか、Web で他の HTML 5 検証サービスを検索してください。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/37\/Write-an-HTML-Page-Step-21-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-21-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/37\/Write-an-HTML-Page-Step-21-Version-3.jpg\/v4-828px-Write-an-HTML-Page-Step-21-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2タグと機能の詳細を確認します。他にも多くの HTML タグと機能があります。興味があれば、さまざまな場所でそれらについて学ぶことができます。
W3schools (中国語と英語) と HTML Dog (英語) には、さらに多くのチュートリアルと、より完全なタグのリストがあります。
お気に入りの Web ページを見つけて、ブラウザの「ページ ソースの表示」機能を使用して、HTML コードを自分で確認します。それをコピーしてドキュメントに貼り付け、変更して自分でテストし、どのような効果があるか確認してください。
その他の関連するオンライン記事を読んでください。
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/94\/Write-an-HTML-Page-Step-22-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-22-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/94\/Write-an-HTML-Page-Step-22-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-22-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3 Web ページをインターネットに公開します。 Web ホスティング サービスを選択し、必要な数の HTML ページを個人ドメインにアップロードするだけです。まず、FTP を使用してソフトウェアをアップロードする必要があります。多くのウェブホストがこのサービスを提供しています。
自分の Web サイトのページまたは画像にリンクする場合、完全な URL を使用する必要はありません。たとえば、ドメイン名が www.superskilledhtmlcoder.com の場合、 <a href="/journal/monday.html">text</a>と入力すると、「www.superskilledhtmlcoder.com/journal/monday.html」にリンクされます。
{"smallUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b4\/Write-an-HTML-Page-Step-23-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-23-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b4\/Write-an-HTML-Page-Step-23-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-23-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":828,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4 CSS を使用してスタイルを追加します。 HTML ページは少し単純に見えますか?色やさまざまなフォントを追加し、要素の配置をより適切に制御するには、基本的な CSS を学ぶ価値があります。 CSS「スタイルシート」を HTML ページに接続すると、特定のタグ内のすべてのテキストのスタイルを自動的に調整し、大きな変更をすばやく行うことができます。メモ帳を使用して簡単な CSS スタイルシートを作成できます。また、HTML Dog と W3schools でもより詳細なチュートリアルが提供されています。
このチュートリアルで使用する doctype は「loose HTML 4.0.1 transitional mode」で、初心者に適したシンプルな形式です。 [11] X研究ソースブラウザで HTML 5 厳密モードとして解釈する場合は、<!DOCTYPE html> に変更します。これは現在推奨されている仕様ですが、ほとんど使用されていません。
広告する
警告する
HTML は、コンテンツを汎用的な形式で保存することを目的としています。背景色や要素の正確な配置など、ページの表示方法を制御することはできません。 HTML にも Web ページのスタイルを制御できる関連タグがありますが、より制御可能で一貫性のある Web ページを作成するには、CSS を使用することを強くお勧めします。
広告する
準備が必要です
NotePadやTextEditなどのシンプルなテキストエディタ
Internet ExplorerやMozilla Firefoxなどのウェブブラウザ
(オプション) Adobe Dreamweaver、Aptana Studio、Microsoft Expression Web などの HTML エディタ
