学習記録 〜ネットワーク基礎 HTML〜 

・IT(ネットワーク)の学習記録

 

・HTMLとは

 HyperText Markup Language

 訪れたウェブサイトの構成をブラウザに対して伝えるために使うマークアップ言語。 

 プログラミング言語ではない。

 全てをタグで囲う(要素名を開き山括弧と閉じ山括弧で囲う)。

 例)<p> MY name is Ken </p>

   <p> → opentag

   </p> → closetag

      → content

   太字 → element

 

・構成

 HTMLにはheadタグとbodyタグがある。

 例)

  <html>

    <head>

     〜

    </head>

    <body>

     〜

    </body>

  </html>

  <head>タグ → メタ情報を記述する。

  メタ情報:そのサイトがどういうものかという情報

       開発者、SEO(Search Engine Optimaization)等

  SEO:このサイトが何をしてしているかをサーチエンジンに教える→headタグの中

     にmetaタグを記述する。

  <meta charset = "utf-8"> → 文字コード

  <body>タグ → サイト内部=コンテンツそのもの・内容

 

・使用頻度の高いタグ

 div : img : p : span : article : main : footer : header : a : input 等

 

・使用できない特殊文字 → タグで使用してしまっている。

 「<」= &lt;「>」= &gt;「"」= &quot;「'」= &apos「&」 = & amp;

 

・classとid

 要素(タグ)にclassまたはidで名前をつけることで、セレクタとして属性値(名前)

 を指定でき、cssで属性値毎に装飾をすることができる。

 class属性:属性値の前にドット( . )をつけることで、CSSを指定できる。

        Webページ内で、同じclass属性の名前を何度も使用することが出来る。

 id属性:属性血の前にシャープ( # )をつけることで、CSSを指定できる。

     webページ内で、同じid属性の名前が重複してはならない。

 

・見出しとパラグラフ

 <p></p> →文章を示す。 

 <h1></h1> → タイトル≒物語の題名

 <h2></h2> → 各節題

  <h1>&<h2>はデフォルトで太文字になる&フォントが決まっている。

 ※なぜ<h1><h2>と<p>を分けるのか→<h1><h2>をサーチエンジン側で優先的に拾う

  太字強調では<strong>、斜体強調では<em>はSEOに効果があるが、同じ強調でも

  太字の<b>と斜体の<i>はSEOに効果がない。

  斜体強調の場合

 

・リスト:箇条書きと番号付きの箇条書き

 <ul>または<ol>

  <li>緑茶</li>

  <li>紅茶</li>

 </ul>または</ol>

 <ul>の場合

 ・緑茶

 ・紅茶

 <ol>の場合

 ①緑茶

 ②紅茶

 

・<br>と<hr>

 <br> → <p>タグの文章の中で改行する

 <hr> → <p>タグの文章の中で線を引いて区切る