HTMLページの書き方（写真付き） - チップ

コンテンツ

手順
パート1：HTMLを発見した方法
助言
警告
あなたが必要なもの

HTML（HyperText Markup Language）は、Webページを構築するための基本的な言語です。簡単で柔軟なコーディング言語として作成されました。インターネット上のほぼすべてのWebページは、このコードの何らかの形式（ColdFusion、XML、XSLT）で開発されています。 HTMLは簡単に理解できますが、その包括的な機能に興味がある場合は、長い間HTMLについて学び続けることができます。ウェブサイトに色と楽しさを加えるために、基本的なHTMLページに慣れたらすぐに基本的なCSSを学ぶことができます。

手順

パート1/4：ドキュメントの作成

簡単なテキストエディタを開きます。 NotePadは優れたオプションであり、無料でダウンロードできます。ほとんどのテキストエディタでHTMLを記述できますが、自動フォーマット機能を備えたより複雑なソフトウェアでは、HTMLページの整理が難しくなる可能性があります。
- TextEditは通常、ブラウザがHTMLとして認識しない形式でファイルを保存するため、使用しないでください。
- オンラインのHTMLエディターを使用することもできます。初心者には専用のHTML編集プログラムはお勧めしません。
ファイルをWebページとして保存します。 上部のメニューで[ファイル]→[名前を付けて保存]を選択します。ファイル形式を「Webページ」、「。html」、または「.htm」に変更します。簡単に見つけられる場所にファイルを保存します。
- これらの3つのオプションに違いはありません。
ブラウザでファイルを開きます。 ファイルをダブルクリックすると、ブラウザに空白のWebページとして自動的に開きます。または、FirefoxやInternet Explorerなどのブラウザを開いてから、[ファイル]→[ファイルを開く]を使用してドキュメントを選択することもできます。
- このウェブサイトはオンラインではありません。お使いのコンピューターでのみ表示できます。
Webページを更新して、加えられた変更を確認します。 空のドキュメントに次のように入力します。 こんにちは。ドキュメントを保存します。ブラウザで空白のWebページを更新すると、ページの上部に太字の「Hello」という単語が表示されます。このチュートリアルで新しいHTMLをテストする場合は、.htmドキュメントを保存してから、ブラウザウィンドウを更新して、HTMLがどのようにコンパイルされるかを確認してください。
- 「」という言葉を見たら"そして"''ブラウザに表示されますが、ファイルがHTMLで正しくコンパイルされていません。別のテキストエディタまたは別のブラウザを試してください。
タグを学びます。 HTMLコマンドは、Webページをコンパイルして表示する方法をブラウザに指示する「タグ」で記述されています。それらは常に一重引用符で囲まれています
、および上記の例で使用したようにWebページに表示されません。
- 「スタートカード」または「オープンカード」です。このタグの後に書かれたものはすべて「太字」（Webページでは太字）として定義されます。
- は「終了タグ」または「終了タグ」であり、記号/記号で区別できます。太字の終わりを示します。ほとんどの（すべてではない）タグが機能するには終了タグが必要なので、必ずそれを含めてください。
ドキュメントを作成します。 HTMLドキュメント内のすべてを削除します。書かれたとおりに、次のテキストからやり直してください（箇条書きを除く）。このHTMLコードは、使用しているHTMLのタイプと、すべてのHTMLがタグ内に配置されることをブラウザーに通知します。そして .
頭（頭）と体のタグを追加します。 HTMLドキュメントは2つの部分に分かれています。「トップ」セクションは、ページのタイトルなどの特別な情報用です。「本文」セクションには、ページのメインコンテンツが含まれています。これらのセクションの両方をドキュメントに追加し、終了タグを含めることを忘れないでください。新しく追加されたテキストは太字です。
ページにタイトルを付けます。 ヘッドセクションのカードのほとんどは、初心者で学ぶことは重要ではありません。ただし、titleタグは使いやすく、ブラウザウィンドウの名前またはブラウザタブに表示されるものを決定します。ヘッドラインの開始タグと終了タグをヘッドタグ内に配置し、それらのタグの間に好きなヘッダーを書き込みます。
- 私の最初のHTMLページ。
広告

パート2/4：テキストのフォーマット

あなたの体にテキストを追加します。 このセクションでは、bodyタグのみを扱います。他のテキストは引き続きドキュメントに残りますが、このチュートリアルでは繰り返さないことでスペースを節約します。カードの間に好きなように書いてくださいそして、ページの最初のコンテンツとして表示されます。例えば：
- wikiHowの指示に従ってHTMLページを作成しました。
テキストの見出しを追加します。 見出しタグを使用してページを整理します。見出しタグは、それらの間のテキストをより大きなフォントサイズで表示するようにブラウザに指示します。これらのタグは、検索エンジンやその他のツールでも使用され、Webサイトの内容と編成方法を決定します。

は最大の見出しであり、最大で小さい見出しを作成できます。

。あなたのページでそれらを試してみてください：
- 私のページにようこそ。
- wikiHowの指示に従ってHTMLページを作成しました。
- 今日の私の目標：
- 完了した目標：
- 見出しの使用方法を学びます。
- 未完了の目標：
- テキストフォーマットタグの詳細をご覧ください。
テキストフォーマットタグの詳細をご覧ください。 「強い」タグはすでに見てきましたが、テキストをフォーマットする方法は他にもたくさんあります。これらのタグを試すか、同じテキスト文字列に対して一度に複数のタグを使用してみてください。後ろに終了タグを追加することを忘れないでください！
- ブラウザに太字で表示される重要なテキスト。
- 強調されたテキスト。ブラウザにイタリック体で表示されます。
- 通常より少し小さいテキスト。このテキストは、見出しで使用すると自動的にサイズ変更されます。
- ~~テキストは関連性がなくなり、本文のダッシュで表示されます。~~
- テキストは他のドキュメントよりも遅れて挿入され、下線付きで表示されます。
ページ上のテキストを整理します。 「Enter」キーを押すだけでは、テキストが別の行に表示されないことに気付いたかもしれません。これらのタグは、段落や改行を作成したり、他の方法でテキストを配置したりするのに役立ちます。
- 「paragraph」の略で、このタグは、これらのタグ間のすべてのテキストを段落内に保持し、その上下のテキストから分離します。
- このタグは改行を生成します。他のコンテンツに干渉しないため、終了タグを追加しないでください。このタグは、段落ではなく、詩や住所の行で使用してください。
- ```
テキストを非常に正確に表示する必要がある場合、このタグはその中のテキストを固定幅のフォント（各文字は同じ幅）に設定し、間隔を作成できるようにしますタグの代わりに通常の編集のために好きなように空白と改行。
```
- このタグは、ソースから引用されるテキストのタイプを定義します。
  ソースは後で説明できますカードを引用.
非表示のキャプションテキストを追加します。 コメントタグはWebページに表示されません。コンテンツに影響を与えることなく、HTMLドキュメントに自分自身に注釈を付けることができます。終了タグを追加しないでください。
- タグを終了せずに単独で移動するカードは、「空のタグ」と呼ばれます。
それらを一緒に組み合わせます。 これらのタグを覚えておくための最良の方法は、Webサイトで使用することです。これまでに学習した手順でカードを使用する例を次に示します。それらがブラウザにどのように表示されるかを予測してから、それらをドキュメントにコピーして調べてください。
- 私の最初のHTMLページ。
- 私のウェブサイトへようこそ。
- このページをお楽しみください。
  私はあなたのためだけにそれを作りました。
- パート1：HTMLを発見した方法
- 私はすでにHTMLを学びました 1 二時間、だから今私は専門家です。
広告

パート3/4：リンクと画像の追加

属性について学びます。 タグには、属性と呼ばれる追加情報を書き込むことができます。これらの属性は、タグ自体の中にある追加の単語によって表されます。 プロパティ名= "特定の値"。たとえば、任意のHTMLタグにtitle属性を付けることができます。
- 紹介文はこちらです。
  Webページの段落にカーソルを合わせると表示される「About」という段落にタイトルを付けます。
他のウェブサイトへのリンク。 カードの使用他のWebページへのハイパーリンクを作成します。 href属性の使用にリンクするWebページのURLを挿入します。読んでいるWebページにリンクする例を次に示します。
- あなたのウェブサイトへのあなたの訪問者はリンクをたどるためにこのテキストをクリックすることができます。
タグにid属性を追加します。 HTMLタグで使用できるもう1つの属性は、「id」要素です。どのカードにも、 id = "vidu" または、スペースを含まない名前を使用してください。目に見える効果はありませんが、次のステップで使用します。
- たとえば、ドキュメントに次を追加します。
  この段落は、id属性がどのように機能するかを説明するための例として使用されます。
特定のIDを持つ要素へのリンク。 これで、ハイパーリンクタグを使用できます。、同じページの別の場所にリンクします。 URLの代わりに、＃記号を使用し、その後にリンク先のid値を使用します。例えば、このテキストは、IDが「vidu」のテキストにリンクします。
- すべてのHTML値は大文字と小文字が区別されます。「#VIDU」と「#vidu」は両方とも同じ場所にリンクします。
- ページが短すぎてページ全体を一度に表示できない場合は、ブラウザのリンクをクリックしても何も起こらない可能性があります。スクロールバーが表示されるまでウィンドウのサイズを変更してから、再試行してください。
写真を追加します。 カードは空のタグです。つまり、終了タグは必要ありません。ブラウザが画像を表示するために必要なすべての情報は、属性を使用して追加されます。 wikiHowロゴを表示する例を次に示します。各属性の説明は次のとおりです。
- プロパティ src = "" 写真の場所をブラウザに通知します。（他の人のサイトから写真を投稿することは不適切と見なされることに注意してください。ページがアクティブでなくなると、写真は消えます。）
- プロパティ スタイル= "" 多くのことができますが、最も重要なのは、画像の幅と高さをピクセル単位で設定するために使用されることです。（代わりに、個別の属性width = ""とheight = ""を使用することもできますが、CSSを使用すると、サイズ変更の問題が発生する可能性があります。）
- プロパティ alt = "" は、画像の読み込みに失敗した場合にユーザーに表示される画像の簡単な説明です。これは、目の見えないWebサイト訪問者のスクリーンリーダーに使用されるため、要件と見なされます。
広告

パート4/4：詳細Webサイトの追加とオンライン化

HTMLを確認します。 HTML検証は、コードのエラーをチェックします。サイトが正しく表示されていない場合、検証は問題の原因となっているエラーを見つけるのに役立ちます。また、コードが表示時に見栄えがよいと判断することでHTMLについて詳しく知ることもできますが、HTML標準が新しく更新されたため、推奨されなくなりました。無効なHTMLを使用してもサイトが役に立たなくなることはありませんが、問題が発生したり、さまざまなブラウザで表示が不安定になる可能性があります。
- W3Cの無料のオンライン検証サービスを試すか、別のHTML5検証ツールをオンラインで検索してください。
タグと属性の詳細をご覧ください。 他にも多くのHTMLタグと属性があり、それらを学ぶ場所はたくさんあります。
- その他のチュートリアルとタグの完全なリストについては、w3schoolsとHTMLDogをお試しください。
- 見た目が気に入ったWebページを見つけたら、ブラウザの「ページソースの表示」機能を使用してHTMLコードを自分で取得します。それをドキュメントにコピーして、どのように機能するかを調べてください。
- 他の記事を読んで、HTMLでテーブルを作成する方法、メタタグを使用して検索エンジンでテーブルを見つける可能性を高める方法、または部門を使用する方法について学びます。 CSSを介したスタイル設定に役立つように、ページ上の領域を設定します）およびスパン（テキスト要素のスタイルを指定するために使用）。
あなたのウェブサイトをオンラインにします。 Webサイトをホストするサービスを選択すると、個人のWebドメインに必要な数のHTMLページをアップロードできます。これを行うには、FTPアップロードソフトウェアを使用する必要がありますが、多くのWebレンタルサービスもこのサービスを提供しています。
- サイトに直接あるページや画像にリンクする場合は、完全なアドレスを使用する必要があります。たとえば、ドメイン名がwww.chuyengiahtmlsieudang.comの場合、テキストはこれらのタグにあります「www.chuyengiahtmlsieudang.com/nhatky/thuhai.html」にリンクします
CSSでスタイルを追加します。 HTMLページが少し単調に見える場合は、CSSの基本を学習して、色やさまざまなフォントを追加し、要素を配置する場所をより適切に制御してみてください。 CSSの「スタイルシート」をHTMLページにリンクすると、その場で強力な変更を加えることができ、特定のタグ内のすべてのテキストのスタイルを自動的に調整できます。ここで基本的なフォーマットレイヤーを少し試してみるか、HTMLDogのCSSチュートリアルでより詳細なチュートリアルに飛び込むことができます。
あなたのウェブサイトにJavaScriptを追加します。 JavaScriptは、HTMLページに多くの機能を追加するために使用されるプログラミング言語です。 JavaScriptコマンドは開始タグと終了タグの間に挿入されます、およびインタラクティブボタンの追加、数学の問題の計算などに使用できます。詳細については、w3cの例をご覧ください。広告

助言

このチュートリアルで使用されるdoctype宣言（使用されるドキュメントタイプ宣言）は、簡単な形式である「ルーズHTML 4.0.1トランジショナル」（HTML 4.0.1はタイトトランジションではありません）です。初心者が使用するため。使用する（）ブラウザに厳密なHTML 5形式でコンパイルさせる代わりに、推奨される（あまり一般的ではありませんが）標準スタイルです。