▲TOPへ戻る

HTML始め方 超基礎 これだけは覚えておきたいタグや設定

HTMLとは?

Hyper Text Markup Language

Hyper Text : 高機能な文章を

Markup : 意味付けする

Language : 言語

⇒ コンピューターが認識できる文章構造を作るための言語

⇒ 文章構造 : 見出し、本文、画像、表

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

HTMLでできること

  1. HTMLタグを使って文章を組み立て(マークアップ)、Webサイトやアプリをつくる。
  2. CSSやJavascriptなどをいっしょに使って、デザインや動きのあるWebサイトをつくる。
  3. ほとんどのWebサイトにはHTMLが使われている。

HTMLを表示させてみよう‼

HTML
  <!DOCTYPE htmlCode>
      <p>こんにちは!</p>

HTMLの基本構造

HTML
<!DOCTYPE htmlCode>
  <html>
    <head>
          <!-- 基本情報 -->
          <!-- ページには表示されない -->
    </head>
    <body>
          <!-- タグを書いていく -->
          <!-- ページに表示される -->      
    </body>
  </html>

覚えるべきタグ

見出し 装飾 リスト フォーム レイアウト 意味なし
h1 p ul table form header div
h2 a ol tr input nav span
h3 strong li th select footer
h4 br dl td option article
h5 img dt textarea section
dd aside

idとclass(クラス)

idとは、英語【identification】のid。学籍番号がその学校内で1つしかないように、 idも1ページ上で、1つしか設定できない。

classとは、学級内に複数の生徒が存在するように、 classは1ページ上で、複数設定できる。

HTML
<!-- これはダメ‼ -->
<div id="test">こんにちは!</div>
<div id="test">こんにちは!</div>
HTML
<!-- これはOK‼ -->
<div class="test">こんにちは!</div>
<div class="test">こんにちは!</div>

classは同じ名前を1ページ中で何度でも使えるが、idは1ページ中に1度しか使えない。

CSSの書き方

CSS
  /* id */
  #test {
    color: red;
  }
  /* class */
  .test {
    color: red;
  }

例1

HTML
<style>
    div{
      color: blue;
    }
    .test{
      color: red;
    }
</style>

<div>こんにちは!</div>
<div>こんにちは!</div>
<div class="test">こんにちは!</div>

結果

こんにちは!
こんにちは!
こんにちは!

例2

HTML
  <style>
    .test2{
      color: red;
    }
    </style>
    
    <h2 class="test2">こんにちは!</h2>
    <p class="test2">こんにちは!</p>
    <div class="test2">こんにちは!</div>

結果

こんにちは!

こんにちは!

こんにちは!

(おや)要素(ようそ)()要素(ようそ)(まご)要素(ようそ)

HTML
<div>親要素
    </div>子要素
        <div>孫要素</div>
    </div>
</div>
親要素
子要素
孫要素

ブロックレベル要素 と インライン要素

ブロックレベル要素 : Block-Level Elements

インライン要素 : Inline Elements

幅と高さの指定 横幅の初期値 他の要素との並び方
ブロックレベル要素 可能 親要素の幅と同じになる 縦並び
インライン要素 不可能 内容により決まる 横並び

やってみよう!

HTML
<head>
    <style>
    div {
      background: blue;
      border: 1px solid black
    }
    span {
      background: red;
      border: 1px solid black
    }
    </style>
</head>
<body>  <!-- 親要素 -->

  <div>div1</div>  <!-- 子要素 -->
  <div>div2</div>  <!-- 子要素 -->

  <span>span1</span><span>span2</span>  <!-- 子要素 -->
  <span>span3</span>  <!-- 子要素 -->

</body>

結果

div1
div2
span1span2 span3

a タグ

アンカー【anchor】:(いかり)
指定したリンクへジャンプする。

書き方

HTML
  <a href="https://baidu.com">バイドゥ‼</a>
バイドゥ‼

imgタグ

画像(image)を表示する。

書き方

HTML
  <img src="./img/cat.jpg" alt="ネコ">
ネコ

画像が表示されなかった時

ネコ

絶対パスと相対パス

絶対パス

そのファイルが保存されている場所

絶対パス

これが絶対パス

https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00616-1538.jpg

相対パス

そのファイルを基準として、ファイルが置かれている場所

同じ階層 : ./

一つ上の階層 : ../

一つ下の階層 : /

階層
  <img src="./img/img_02.jpg">

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<

パソコン

javascript

カメラ

ブログ

サイト内検索👇