はじめまして。ドルフィンです
このブログにたどり着いたあなたは、htmlについて学びたい、htmlを今よりも詳しく知りたいとお考えだと思います。
そんな読者の皆様が簡単にhtmlを書けるようになり、簡単にウェブサイトを作れるようになるまで、コーディングを解説していきたいと思います
今回は、HTMLの基本について学んでいきます。
HTMLおすすめエディタ SublimeText3のインストール
SublimeTextとは、HTMLを書くために必要な【エディタ】と呼ばれるものです。
既に自分のエディタを使っているという方は、次のタグ書きから一緒に参加しましょう！
これからはHTMLを書くときは、このSublimeTextを使ってコードを書いていくことになります
まずはこちらのSublimeTextをインストールしてください
初期設定だと、Cドライブの中にこのような形でインストールされると思います。
こちらで特に設定はありませんので、Nextを押し続けてインストールを完了させてください。
インストール後は、windows10をご利用の方であれば、左下のスタートメニューを開いて頂き、メニューの1番上に【最近追加されたもの】という項目があり、SublimeText3というソフトが追加されていると思います。
こちらを早速起動してみましょう！以下のような画面が表示されたことが確認できれば、SublimeText3のインストールは完了です！
※ソフトは英語になっていますが、このままでも差支えありません。日本語化の設定方法も後ほど公開いたします。
ここからは、いよいよHTMLのコーディングに入ります。
HTMLをコーディングしてみよう
左上のFileから、New Fileを選択してください。
新しくタブが追加されたかと思います。ここにhtmlを記入していきましょう
<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> こんにちは！
</body> </html>
こちらをコピーして、SublimeTextに張り付けしてみましょう！
この【<】で始まって【>】で終わる英語の文字たちが、ページを作るために必要な【タグ】と呼ばれるものです。すべてのサイトは、このタグによって作られています。
左上のFileから、Saveを選択します。すると保存の画面になったかと思うので、ファイル名にindex.html という名前を付けて保存します。保存場所はデスクトップなどで構いません。
※SublimeTextは、まだ閉じないでください
保存したら、そのファイルを右クリックして【プログラムから開く】を選択します。
その中から、いつも自分が使っているブラウザを選択してみてください。
こんにちは！と表示されたでしょうか？
このタグ構成はページを作る上での基本となる形です。この形をベースに、あらゆるサイトが作られているのです
では、その内容について触れていきたいと思います
HTMLの基本 DOCTYPEとソースの確認方法
先ほどのSublimeTextからタグを見てみましょう
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
<title>タイトル</title>
</head><body>
こんにちは！
</body>
</html>
1行目の<!DOCTYPE html>とは、これから書く内容がHTMLである、という宣言を行っています。基本的にはどんなサイトでも、1行目にはこのDOCTYPEが必ず宣言されています。
プログラミングの世界では、このような【宣言】という言葉はとてもよく使われます。
それを確認する方法があります。新しいタブで適当なサイトを開いて、Ctrlを押しながらUキーを押してみてください。HTMLタグが大量に現れると思います。
【ページのソース】と言って、あなたが今まさに見ているサイトのHTMLを見ることができる機能です。
そのソースの先頭には、DOCTYPEと書かれていませんか？
どんなサイトでも、この決まりは絶対に守られています。
- HTMLを書くときは、最初に必ずDOCTYPEを宣言をする。
- サイトのHTMLは【ソースを表示】で見ることが出来る
この2つを覚えてもらえると幸いです。
HTMLの基本 headとbody
headタグとbodyタグについて説明します
head(ヘッダ)とbody(ボディ)と読むのですが
headは頭でbodyは体という風に覚えてもらえると分かりやすいと思います。
headタグの中では、CSSやJavaScriptといったHTMLに動きを与えるような部分や、あらかじめ読み込んでおく部分を主に書きます。
そしてbodyタグの中で、基盤となるHTMLタグを書いていくことになります。
ほかのサイトでどうなっているか、ソースの表示から確認してみると分かるかもしれません
まとめ
HTMLを書くとき、他サイト等のHTMLを見るときの内容をまとめると
- SublimeTextを使ってHTMLを編集する
- 他のサイトのHTMLを見るときは、ソースの表示をする
ページのタグ構成についてまとめると
- 一番先頭にはDOCTYPE宣言
- 次にheadタグを読み込んでからbodyタグを読み込む
- headタグにはCSSやJavaScript。bodyタグにページに表示させるためのタグを書き込む
といった流れになります！
今回の記事はここまでとなります。
分からないことなどありましたら、お気軽にコメントください。
コメント