初心者でも出来るHTML入門1

4543 ワード
新人プログラマ応援 プログラミング初心者 プログラミング入門 プログラミング教育 HTML5 HTML5 テキストリンク

1.HTMLとは

HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作成するために開発された言語です。
インターネット上で公開されてるWebページのほとんどは、HTMLで作成されています。

2.HTMLの準備

HTMLを学ぶために必要な準備は、

  • webブラウザ　→　Internet Explorer , Google Chrome , Firefox , Safariなど
  • エディタ　→　メモ帳 , テキストエディット , サクラエディタ , Atomなど

上記を用意できたら、エディタにhtmlのコードを書き、ブラウザで確認をします。

3.HTMLの記述

3-1.基本の記述

HTMLは拡張子に.htmlと記述します。
（ファイル名が、index.htmlのように最後に.htmlをつける）

<!DOCTYPE html>
<html>
    <head>
        <!-- 付加情報 -->
    </head>

    <body>
        <!-- コンテンツ -->
    </body>
</html>

上記はhtmlの最低限記述するコードです。順に解説していきます。

  • 1行目の <!DOCTYPE html> は、「文書がHTML5で作成されたことを宣言する」という意味になります。
  • htmlでは、 < と > に囲まれた半角の英数字を タグ と呼び、<開始タグ> と </終了タグ> の2つを1セットとして使用します。

    例：html 開始タグ ⇒ <html> , html 終了タグ ⇒ </html>
  • <開始タグ> と </終了タグ> で囲まれた全体を 要素 と呼びます。

    例：head 要素 ⇒ <head> ～ </head>
  • htmlでは、文書型宣言以外は全て html 要素内（ <html> ～ </html> ）に書きます。
  • head 要素には、 付加情報 、 body 要素には、 コンテンツ を書きます。
  • htmlでは、 <!-- と --> で囲むことで中の文字をコメント化（htmlに影響を与えない文字化）できます。

以上がhtmlの最低限記述するコードです。

3-2.記述例

index.html
<!DOCTYPE html>
<html>
    <head>
        <!-- 付加情報 -->
        
        <!-- タイトル -->
        <title>タイトル名</title>
        <!-- 文字コード -->
        <meta charset="utf-8" />
    </head>

    <body>
        <!-- コンテンツ -->
        <h1>Hello</h1>
    </body>
</html>

上記はhtmlの具体的な記述例です。
中身の文をコピーして、文字コードは UTF-8 を指定し、ファイル名を index.html でデスクトップに保存するとブラウザではこうなります↓↓


画像のようになれば成功です。

4.GitHub

GitHubにソースコードを公開しています。

5.関連