HTMLの基本構造

いよいよHTMLのコードを書いて行きます!

前回作成したHTMLファイルに書いていくので、ファイルの作り方がわからないよって人は下のリンクから前回の資料に飛んでください😊

HTMLの作り方

今回のコード

HTMLの基本的な構造を今日は教えます!

See the Pen eYYRPoE by suguru (@suguru22) on CodePen.

おっと、コピーは厳禁!!

最初はコピペではなく、しっかりAtomに打ち込んだ方が成長スピードが格段に上がります!!

しっかり打ち込みましょう!

HTMLの作り方

ここからは丁寧に説明していきますが、そんなに深く考えなくて大丈夫です!

また、コードの書き方には癖があるので、意味が同じならば自分なりにコードをかえても大丈です😊

<!DOCTYPE html>

HTMLを宣言する文と考えてOKです!

<html lang="ja" dir="ltr"> ~ </html>

HTML記述の範囲を囲っています。

lang=”ja” 言語の指定

英語なら “en”となります!

dir=”ltr” 文の方向指定

日本語・英語は左から右に文を書くので、“ltr”と指定します。

国によっては右から左に文を書くこともあるので、その場合 “rtl” を指定します。

<head> ~ </head>

HTMLに関係する情報を入れると思ってください。

後に紹介しますが、HTMLのタイトルや文字コードを記載したり、

htmlとcssをつなげるリンクを入れたり、htmlとJavaScriptをつなげるリンクを入れたりなどします。

<meta charset="utf-8">

深く説明すると、難しいと感じてしますので

ここでは、文字コードを指定するものと認識しとくくらいで大丈夫です!

文字コードとは?となるかもしれませんが、かなり専門的になるので、

使い方は色々ありますがとりあえず、文字を正しく表示するものと認識してください😀

<title> ~ </title>

サイトのタイトルを指定します!

ここではタイトルをファイル名と同じ【study-01】としています。

<body> ~ </body>

実際にサイトで表示される部分です!

この中にサイトの中身を入れてきます!

<h1> ~ </h1>

見出しのタグです!

h1,h2,h3,h4…数字が大きくなるに連れて文字が小さくなっていきます!

セクションタイトルをつけるとき良く使うので覚えておきましょう!

Atomの小技

HTMLの基本構造は最初のうちは書いたほうが良いですが、

なれてきたら、Atomの便利な機能を使いましょう!

htmlファイル生成後、

html

と記述するだけで、ひな形を勝手に作ってくれます!

とても便利で作業効率が上がるのでなれてきたら使ってみてください!

0