誰もが少なくともウェブ上で自分の人生の少しを生きています。そして、あなたが生計のためにウェブページを開発するか、ネームプレートのウェブサイトを作成したいのか、それとも単にあなたのコメントがWebサイトにどのように表示されるかをより多くのコントロールしたいのですが、理解しています。あなたのコマンドでのHTMLのことは非常に貴重です。そのことを念頭に置いて、Webサイトの作成方法に関する最初のレッスンでは、Webの主要なマークアップ言語であるHTMLのトップレベルの基本について説明しています。
最近では、ソーシャルメディアと個人的なランディングページを使用してWebプレゼンスを簡単にまとめるのは簡単ですが、実はHTMLとCSSを学ぶ必要がある独自のWebサイトを作成します。幸いなことに、私たちは助けることができます。
上のビデオでは、テキストエディターでセットアップされ、HTMLドキュメントの基本構造を説明し、すぐに知りたいHTMLに関するいくつかのことを紹介します。レッスンの終わりまでに、基本的なHTMLページを作成する方法がわかります。何かを忘れたり、少し追加の参照資料を必要としたりする場合は、以下のテキストをご覧ください。必要なHTMLに関する基本情報が提供されます。
必要なもの
HTMLを書くためのプレーンテキストエディター
HTMLをテストするために選択したWebブラウザ
Webがどのように機能するかについてのあなたの知識を強化したいという願望
ご覧のとおり、あなたは本当に始めるためにあまり必要ありません。
プレーンテキストエディターを取得します
HTMLを書くには、プレーンテキストエディターが必要です。このビデオでは、呼ばれるプレーンテキストエディターを使用していますテキストメイト、しかし、それはあなたに費用がかかります。無料のものが必要な場合は、多くの素晴らしいオプションがあります。メモ帳++（Windows）、コード（Mac）、または崇高なテキストWindowsとMacのいずれかの場合。他にもいくつかのテキスト編集者がいるので、それがそうである限り、あなたが望むものは何でも使うことができます無地テキストエディター。単純なテキストという用語は一種の誤称です（これがその理由です）、基本的には、スタイルのないテキストを説明するために使用され、単に文字、数字、シンボルです。これは、太字、斜体、違いはない、違いはないなどを意味しますが、あなたのプレーンテキストエディターは構文を強調しているかもしれませんが、あなたのコードを読みやすくするために入力するものに基づいてテキストの色を変える機能はあなたのものです'llテキストエディターとファイルに保存されていないものをご覧ください。基本的に、テキスト以外は何も保存しないテキストエディターが必要です（つまり、Microsoft Wordのようなものを使用したくないことを意味します）。
注：このレッスンの目的のために、テキストエディターで作成したすべてのファイルを保存する必要があります。.htmlたとえば、ファイル拡張機能として、「my_first_web_page.html」。選択したプレーンテキストエディターで.htmlドキュメントを編集できますが、ブラウザで表示することもできます。ブラウザで開くときに表示されるものは、テキストエディターで開くときに表示されるものとは大きく異なります。
HTMLドキュメントとは何ですか？
上記のセクションを読むと、ハイパーテキストマークアップ言語の略であるHTMLは、ブラウザがHTMLを使用していると識別するドキュメントタイプとして保存されたテキストの束であると推測したかもしれません。 Webページに画像が表示されている場合は、HTMLドキュメントのテキストで単純に参照されており、ファイルの一部として物理的に含まれていません。 HTMLドキュメントは実際に行うことは、Webブラウザーが解釈できる一連のテキストベースの指示を提供することです。これは、タグでページのテキストをカプセル化することでこれを行います。これについては、すぐに詳しく知ります。また、これらのタグを使用して、Webブラウザーに表示され、画像の表示、ラインブレークの追加などを行うように指示します。さらに進むと、HTMLはCSS（カスケードスタイルシートの略）を使用してスタイルを整えることができます。これは、次のレッスンで学びます。とりあえず、HTMLがブラウザの一連の指示であることを理解してくださいあなた書くつもりです。
タグはHTMLで使用され、ページ上の特定の要素を指定するため、Webブラウザーがそれらをレンダリングする方法を知っています。これがタグのセットのように見えるものです：
上記のタグはHTMLタグです。 HTMLドキュメント全体がこれらのタグの中に入ります。すべてのタグは、シンボル以下で始まり、シンボルより大きいもので終わります。これらの記号はタグのように見えるようにするため、タグと呼ばれます。開始タグには、その内部にHTMLという用語がありますが、エンディングタグにはhtmlという用語があることがわかります。 /は、それが閉鎖タグであると指定しています。このタグは、最初のHTMLタグがHTMLドキュメントの開始であり、2番目の /HTMLクロージングタグが終了であることをWebブラウザーに伝えます。ほとんどのタグはこのように見えます。たとえば、テキストを太字にしたい場合は、これを見るかもしれません。
注：テキストを大胆にする他の方法もありますので、これらの違いが非常に重要な場合があるため、ビデオを完全に説明してください。
また、次のように見えるタグも表示されます。
上記のタグは画像タグです。あなたはおそらくこれをすでに理解していましたが、その仕事は画像を表示することです。このタグについて異なる2つの注目すべきことがあります。まず、エンディングタグはありません。これは、IMGタグが自己閉鎖タグであるためです。開始タグとエンドタグの間には何もないため、エンディングタグは必要ありません。ただし、IMGタグの最後にあることに気付くと、終わりを指定することになります。 HTMLの初期に戻って、それを /画像タグに追加する必要はありませんでしたが、技術的にはまだそうではありませんが、それは適切なフォームです。あなたが気付くもう1つの違いは、タグに属性の束があることです。属性はsrc = "" "やheight =" "のようなものであり、タグについて詳しく説明する情報が含まれています。 IMGタグの場合、ソース（SRC）属性が常に必要です。
SRC属性は、表示する画像ファイルがimage.jpgであることを指定します。ファイル名をリストするだけなので、ブラウザはその画像ファイルをHTMLドキュメントとまったく同じ場所に保持していると想定します。 HTMLドキュメントと同じ場所に画像と呼ばれるフォルダーがあり、そこに画像を保持している場合、 /がフォルダーに入ることを指定するため、SRCを「画像 / Image.jpg」に設定します。外部のWebサイトから画像をロードしたい場合は、画像の完全なURL以外の場合があります（例）。他の属性は、単に画像の高さと幅を指定します。 ImageタグにはSRC属性のみが必要ですが、画像の高さと幅を指定しない場合、ブラウザは離れるスペースの量がわかりません。これはちょっと奇妙に見えるので、IMGタグの高さと幅を指定する方が常に良いです。
ドキュメントで使用できる基本的なタグ要素の一部をすばやく参照するには、このチートシート開始するのに適した場所です。
基本的なHTMLドキュメントの構造
基本的なタグ構造がダウンしたので、基本的なHTMLドキュメントの構造を見てみましょう。これは非常に基本的な外観であり、おそらく完全に開発されたHTMLドキュメントにあるものすべてを絶対に含めるものではありませんが、うまく機能し、物事を素晴らしくシンプルに保ちます。これが非常に基本的な構造です：
HTMLタグ内にはヘッドとボディタグがあることに気付くでしょう。ヘッドタグは、ページタイトル（Webブラウザーのウィンドウまたはタブタイトルとして表示される）、CSSスタイル、その他のメタデータなど、必ずしもページに直接表示されるとは限らない情報をカプセル化します。ボディタグは、その情報をカプセル化します意思ページに表示 - テキスト、画像、リッチメディア。結果のHTMLドキュメントは、Webブラウザで開かれました（保存されたファイルをダブルクリックするか、ブラウザウィンドウにドラッグするだけです）は次のようになります。
例からわかるように、ボディタグにはその内部にいくつかのものがあります。最初に、ヘッダーのIDを含むDivタグがあります。 Divタグは、コンテンツのビットを含むために使用されるため、それらをスタイリングしてCSSで動かすことができます。次のレッスンでCSSに飛び込むとき、これについてさらに学びます。
ヘッダーdivタグ内にはいくつかのテキストがあります。テキストの最初の部分はH1タグ内です。 H1、H2、H3、H4、H5、およびH6タグはすべて、ヘッダーテキストを作成するために使用されます。 H1は最大で、H6は最小です。デフォルトでは、大胆で大きなテキストになりますが、CSSを使用するのが好きなようにスタイリングできます。このHTMLドキュメントにはCSSスタイルの情報がないため、H1タグはテキストを私のページの太字に見せます。この効果は、この投稿に表示される大きなセクションのタイトルテキストに非常に似ています。
H1テキストの下には、通常の非スタイルのテキストがあります。ほとんどのブラウザは、12ptのサイズのTimes New Romanフォントで非スタイルのテキストをレンダリングします。 CSSスタイルの追加を開始すると、デフォルトのスタイルを設定することで、このテキストをスタイリングすることができます。
基本的なHTMLについて本当に知る必要があるのはそれだけです。次のレッスンでは、基本的なCSSをご覧ください。その後、これらのスキルを組み合わせてWebサイトを作成し、追加のリソースを締めくくることを検討して、Webサイトの作成についてさらに学ぶのに役立ちます。また明日ね！
