HTMLの書き方講座①

2019.10.28
2022.05.03
HTML

みなさんこんにちはさくちゃんです。

本日はHTMLの書き方について紹介していきます。

1. そもそもHTML とは何か？
2. タグとは？
3. ファイルの準備
4. 実際にコードを書いてみよう

そもそもHTML とは何か？

HTMLは「ハイパー・テキスト・マークアップ・ランゲージ」の略で、Webページを書くための言語です。

<p>ここにテキストを入力</p>

上のような「コード」を入力することで、ブラウザ上で「ここにテキストを入力」と表示されるようになります。

このように文章を書いていき、Webページを作成する言語がHTMLです。
このコードを書くときには、「タグ」と呼ばれるルールにしたがって書いていきます。

タグとは？

コードを書くときは、<p>のような「タグ」を使ってコードを書いていきます。
このコードにはいくつかの種類があり、それぞれ意味を持ちます。

例えば<p>タグであれば、paragraphの「p」を取って段落を意味します。
本文を書くときに使われるタグです。
そのほかにも、見出しを書く <h1> や、画像を挿入する <img> タグなどがあります。

そのほかのタグはこちらを確認

タグを書くときには「開始タグ」で始まり、「終了タグ」で終わるのが基本です。

先ほどの <p>ここにテキストを入力</p> だと

・開始タグ　→　<p>
・終了タグ　→　</p>

になります。終了タグには必ず「 / 」をつけます。

ファイルの準備

HTMLを書くときは、拡張子が「.html」でなければなりません。
「.html」にするとブラウザがHTMLファイルだと認識してくれます。

テキストエディタなどを使い、コードを書いていくことをおすすめします。

※個人的には「Visual Studio Code」をおすすめします。

実際にコードを書いてみよう

ファイルの準備ができたら、実際にコードを書いていきます。
HTMLの基本コードは下のようになります。

<!DOCTYPE html>　　// ドキュメントタイプの宣言
<html lang="ja">　 // HTML文書、言語の指定
    <head>        //ヘッダタグ 文書の情報を書く
        <meta charset="utf-8”>   //文字コードの指定                    
        <title>タイトル</title>　 //ブラウザのタブに表示する名前
    </head>
　　 <body> 
      //ここに文章を記入。
    </body>
</html>

始めにこのコードを書き、<body>タグの中にコード（文章）を書いていきます。

では<body>タグの中に<h1>タグ、<p>タグを書いてみましょう。

<!DOCTYPE html>　　
<html lang="ja">　
    <head>       
        <meta charset="utf-8">
        <title>タイトル</title>
    </head>
    <body>
        <h1>見出し</h1>
        <p>テキスト</p>
    </body>
 </html>

入力したコードをブラウザで確認してみます。

ブラウザで確認する方法は、.htmlファイルをブラウザでドラッグ&ドロップすると確認できます。

今回は以上になります。

オススメの教材

前の記事
文系でもエンジニアになれるの？文系出身からエンジニアになる方法教えます 2019.10.27
次の記事
HTMLの書き方講座② 2019.10.30