気ままにやっていくプログラミングとかブログ

中学1年生が気ままにプログラムのことを中心に書いていくブログです。

自己流HTML入門1

こんにちは。

Kitachisukuです。

今回からHTML入門書きます。

結構自己流です。

 


 1.HTMLとは?

2.環境をそろえる

3.とりあえず基本的なコードを書いてみよう

4.まとめ


 

 1.HTMLとは?

Webページを記述するための言語です。

このブログははてなブログを使用しているのですが、

内部的にはHTMLで作られています。

 

2.環境をそろえる

まず実行にはブラウザがあれば十分、

つまりこのブログを見ているあなたはほぼ100%OKです。

 

次にHTMLを書くためのソフトです。

これはWindowsMac付属のテキストエディタでもいいですし、

VimVisual Studio Codeなどのテキストエディタを用いてもOKです。

 

スマホの方も、

恐らくストアでググってみればHTMLをかけるソフトとかがあると思うので、

スマホの方はそれを使ってください。

 

Androidの方にはSpack Editorが個人的にはお勧めです。

 

iPhone系は...自分は持ってないので各自探してください。

 

3.とりあえず基本的なコードを書いてみよう

まずエクスプローラーのメニューの中の「表示」というところの、

「ファイル名拡張子」にチェックを付けます。

 

次にお好きなフォルダーに、

「お好きな名前.html」というファイルを作成します。

 

この時ファイルの名前に表示されるようになった、

「.txt」が入っている(お好きな名前.htmlなどはダメ)場合は、

その.txtの部分も変えて「お好きな名前.html」とします。

 

警告が出ますが気にしないでください(深刻なものではないです)。

 

そしたらそのファイルを開いて(好きなソフトで)、

以下のテキストを入力します。

 

身に着けるためにマルコピはしないでください(予測変換はOKです)。

<!DOCTYPE html>
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        Hello World!
    </body>
</html>

これがHTMLの基本的なコードとなります。

 

ではエクスプローラーで

実行する(ファイルをダブルクリック)と以下のように表示されます。

f:id:Kitachisuku:20210126194234j:plain

このように表示されたら成功です。

 

次にコードの説明をしていきます。

 

<!DOCTYPE html>
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        Hello World!
    </body>
</html>

 

まずHTMLは「タグ」というものを組み合わせて記述していく言語です。

タグは<タグ名>で始まり</タグ名>で終わります。

タグの中にタグを入れることもできます。

 

このコードは、

<html>タグの中に<head>タグと<body>タグがあり、

<head>タグの中には<title>タグがあるという状態です。

 

<!DOCTYPE html>
</html>

 

まずこのタグは少し特殊です。

このタグは「HTMLタグ」で、

HTMLに必ず最初に記述しなくてはならない重要なタグです。

 

意味はHTMLを始めるといった意味です。

 

この中の「!DOCTYPE」はバージョン宣言です。

HTMLにはバージョンがあり、

そのバージョンを記述しています。

 

!DOCTYPEだとHTML5が適用されます。

 

次にこの部分です。

 

    <head>
    </head>

 

これを「headタグ」といい、

サイトのタイトルや情報などを記述するタグです。

 

        <title>Hello World!</title>

 

これは「タイトルタグ」というものです。

 

このタイトルタグの中に挟んだ言葉がサイトのタイトルとなります。

 

この例では「Hello World!」に設定しています。

 

そして残っているのが「ボディータグ」で、

これは本文を記述するものです。

 

今回は本文を「Hello World!」に設定しています。

 

4.まとめ

いかがでしたでしょうか。

htmlはこのような形で記述されています。

 

今回のサンプルのタイトルタグ、

ボディータグを編集して表示される文字を変えてみましょう。

 

第一歩はそこから始まります。

 

では。