You are currently viewing 【HTML】Webサイトの基本のHTMLを学ぼう!「HTMLの基本」【入門編】

【HTML】Webサイトの基本のHTMLを学ぼう!「HTMLの基本」【入門編】

こんにちは、Ka-Chanです。

こちらの記事は、私のメモのようなものです。
HTMLを取得するにつれて学んだことを記事にしてまとめています。

参考になったらと思います。

下記のような手順で学んでいきました。
それでは、今回は「HTMLの基本」についてです!

これから紹介するタグについては今後詳しく説明していくよていです。
なので、「このようなものがあるんだぁ~」という風に考えていただければと思います。






  • HTMLの開発環境を用意しよう!
  • HTMLとは?
  • HTMLの基本
  • HTMLの要素
  • HTMLの属性
  • HTMLの見出し
  • HTMLの段落
  • HTMLのスタイル
  • HTMLの書式
  • HTMLの引用
  • HTMLのコメント
  • HTMLの色
  • HTMLの基本

    HTMLドキュメントについて

    すべてのHTMLドキュメントは、<!DOCTYPE html>のドキュメントタイプ宣言で始まる必要があります。

    HTMLドキュメント自体は<html>で始まり</html>で終わります。

    HTMLのコードが可視化される部分は<body>と</body>間にあるコード内容です。
    例は下記の通りです。body内にある見出しと文章の部分が表示されています。

    HTML見出し

    HTMLの見出しタグは、<h1>~<h6>のタグがあります。

    使い方はそれぞれですが、基本的にこのように考えて使えばよいかと思います。
    <h1>タグは最も重要な見出しにつかいます。<h6>タグは最も重要でない見出しにつかいます。

    それから下記のように大きさが変わっていきます。
    <h1>タグが一番大きく<h6>タグが一番小さいです。

    HTML段落

    HTMLの段落は、<p>タグで表すことができます。

    例は下記のようになります。






    HTMLリンクは<a>タグで表すことができます。

    例は下記のようになります。

    リンクの宛先はhref属性で指定することができます。

    属性は、HMTL要素に関する追加情報を提供するために使用されます。

    属性については、また違う記事で詳しく説明できたらと思います。

    HTML画像

    HTMLで画像を表示するときに使うタグは<img>タグです。

    画像を表示させるために必要なフォルダーの場所を指定するのはsrcです。
    代替テキストはaltで、幅と高さを指定するのはwidthとheightです。

    例は下記のようになります。

    ※下記のようにインターネット上にある画像を表示させることができます。

    See the Pen
    vYNgZzR
    by Nakashima (@ka-chan)
    on CodePen.

    HTMLボタン

    HTMLボタンは<button>タグで表すことができます。

    例は下記のようになります。

    HTMLリスト

    HTMLリストは、<ul>タグ(順序なし・箇条書き)または<ol>(順序付き・番号付きリスト)表で表すことができます。その後<li>タグ(リストアイテム)で表示させるアイテムを指定することができます。

    例は下記のようになります。

    それでは、こちらの記事はこれで終わりです。
    ザックリとHTMLの基本なものを説明していきましたが、また違う記事で一つ一つ説明できたらと思います。

    次の記事はこちらです。






    コメントを残す