祈るFARNHAM：今日、私はするつもりだ HTMLについて少し話し、 ハイパーテキストマークアップ言語。 あなたは、これらの日どこにでもHTMLを参照してください。 実際には、あなたがこれを見ている場合 ブラウザ内のビデオ、あなたがしている 今のHTMLを見て。 HTMLはプログラミング言語ではありません、 むしろ、それが使用するマークアップ言語の ページをレンダリングするためのWebブラウザ インターネット上の。
だから、書いているかを正確に、頼むかもしれない 異なるHTMLでWebページ プログラミングでプログラムを書くことから C言語のような言語？ さて、Cは非常に厳しいとの言語です である必要があり、構文規則 それを実行する前にコンパイル。 あなたは今まで含めるのを忘れてしまった場合 ステートメントの末尾にセミコロン あなたのCコードは、私が話しているか知っている 厳密な構文に関しては約。
Webブラウザは、しかし、もう少しです それはHTMLになると寛容。 あなたのHTMLは文法的でなくても、 正しい、あなたのページは、まだ可能性があり それは可能性があり、ブラウザによって表示されますが、 あなたが意図したとおりに見ていない。 だから、に常に最善です ルールに従います。 直感を得るための最良の方法 物事がどのように機能するかについては、ある 例を経る。
それでは、私たちがここにあることは基本的なものです Webページの青写真。 おそらく、多くのことに気づいた 山括弧の間にある。 さて、それらは単にタグです。 タグは、基本的には、Webブラウザに通知 つまり、ちょっと、何か あなたのように来ている。 しかし覚えておいて、あなたが開くたびに タグは、あなたがされれば、それを閉じる必要があり それを使用して行う。
だから例えば、私はセクションを開き、 オープンして、コードの ブラケット本体、閉じ括弧。 私はその後、私の、この場合には、いくつかのテキストを追加 私はに行ってきましたし、最初のウェブページ このセクションを閉じる、私が使用して、ほぼ この時間を除いて同一のタグ フォワードボディの前にスラッシュ。 一般的に、これはあなたがしている形式です あなたが開いているときはいつでも使用するつもり とタグを閉じる。 一緒に、開始タグと終了タグ 要素と呼ばれるものが構成されている。
あなたが最初の行を見ると、あなたがよ 続く感嘆符を参照してください のDOCTYPE HTML。 これは実際にはブラウザを語っている ファイルは、ウェブページであること HTMLで記述された。 HTMLタグは、基本的に言います、 ここではいくつかのHTMLが付属しています。 その後、我々はしてheadタグを持っている その中にタイトルタグ。 あなたのように考えることができheadタグ ために来る構成するHTMLコード あなたのWebページのの大部分 実際のコンテンツ。
一般的に、あなたのタイトルを置く ここで、ウェブページ、いくつかはありますが 表示されることが他のタグ ここにも。 次のWebページの本体は、付属してい あなたのウェブサイトの実際の肉と骨。 この例では、単純に入れてきた 文、私の最初のウェブページ、 これ、私たちは私たちのサイトを実行すると、検索します このような小さなもの。 弊社のWebページには、あまりにも奇妙ではありません、 しかし、心配しないでください。 我々はすぐにそれを飾るだろう。
したがって、上記のHTML、私たちはあなたを非常にあげる Webページの基本テンプレート、 空想は何もない、ただ裸の骨。 しかし、私は、Webページを作成していた場合、 私が追加したい場合はどう 私自身、言う、の絵？ まあ、私はそれを行うことができます。 する方法はいくつかあります あなたのサイトに画像を追加。 画像は、同じフォルダ内にある場合 HTMLファイルは、あなたがリンクすることができ このようなパスを介して画像。
あなたは、その後、画像タグで開く におけるalt属性インによって イメージのソース。 alt属性の値はいくつかある 場合の代替テキスト、ユーザーができない 画像を参照してください。 別の方法としては、にリンクすることができます このような完全なURLを経由して画像。 今、そのウェブサイトは実際に存在していない、 しかしの絵があった場合には そのアドレスで私は、私が使用することができます インクルードするソースURL 私のウェブサイト上でそのイメージ。 いずれにしても、あなたはずっとで終わる きれいウェブサイト、次のようなもの。
まあ、それはかなりクールだが、私は親切 のここにもいくつかのテキストが欲しい。 それでは、ただ何かを追加してみましょう 上記の超簡単 ヘッダのようなイメージ。 私がこれまで行ってきたすべてのヘッダーを使用している タグ、H1、および改行タグ、BR。 ヘッダータグは、フォントが少しします 少し大きく、より目立つ。 他に改行タグ、 手が冷たいの一種である。 他のほとんどのタグとは異なり、次のものがありません 開閉ブレークタグだけ 1は、上に示した。 ブレークはコンテンツがないためです そして、したがって、空の要素である。
このような空要素は、あなたが開くことができます 単に同時に閉じる にスラッシュを含む 初期化宣言の終わり。 だから今私のウェブサイトが少し見える このようなもの。 より良いが、それはちょっと感じている 行き止まりのような。 脇に行くためにどこにもあります このメイン·ページから。 さて、で、その問題を修正しましょう リンクを含む。
私がここで何をするつもりだと、使用している 属性には、Aと表記して作る 画像へのリンクを、のは、CS50テレビましょう。 そのように、誰もが私にクリックするたびに、 そのブラウザがに送信されます 別の、おそらくより 便利なWebページ。 私はのサイズを最小化しなければならなかった 弊社のWebページがあるので、少しテキスト より高度になっ。 うまくいけば、それはまだ明らかだ。 私のウェブサイトは、まったく同じに見えます 今、私は写真をクリックするたびに、 私のブラウザは、別のものを開きます CS50.tv Webページのタブ。
最後に、のは私がスタイルに行くよと言ってみましょう 後でCSSを使用してこのウェブサイト。 CSSとして知られるものである カスケードスタイルシート。 そして、それは基本的に、効率的に提供 編集する方法とスタイル コードの類似したブロック。 私は自分のHTMLにを整理始めたい それが簡単に後でスタイルを作る。 ここで、私は2つの異なる種類を設定 私のコードを整理するのに役立つ識別子。 私は内部のID属性を使用しました 分割、divタグ、および私が使ってきた クラスは、内部の属性 別のdivタグ。
idとclass属性 同様に機能します。 唯一の違いは、あなただけ持つことができている 一つの要素、特定のIDが、 任意の数の要素 クラスを共有することができます。 したがって、たとえば、私は、クラスを使用することができます 画像を複数回、しかし私はできません 別の部門を作成 IDトップと。 私は、CSSに入っていないが、 一般的に使用される他の言語 HTMLと一緒に、かつて私はスタイリングを開始 CSSを使用した私のコードは、私はこれらを使用することができます 影響を受けた組織の属性 私のWebページの美学。
部門トップの中のすべて 類似したスタイリングや任意のを持つことになります へのHTMLの私のグループの他のグループ クラスImageは、同様の外観を共有することになります。 これは編集しようとするよりもはるかに簡単です とスタイル画像やブロックの 個別テキスト。
だから我々はどのように基礎の上に行ってきました HTMLでWebページを作る。 HTMLは、あまりにも他の機能の束を持っている 他の言語と組み合わせた場合、その CSSやJavaScriptのような、本当にできる ページを目立たせる。 に慣れるための最良の方法 HTMLは、それを周りだけで台無しにされる どのような動作し、何をしないことを参照して下さい。
私の名前は祈るファーナムです。 これはCS50である。
したがって、たとえば、私が使用することができます クラス画像 - いや、非常に多くの属性があります。 私の名前は祈るファーナムです。 これは、CS 650です。 私はCSSを言いたい。 これはCSSです。