#4ゼロからwebの基本「HTML」「CSS」編 〜４日目〜 『実際に入力してみる』
「こんばんは」あるいは「おはようございます」それとも「こんにちは」
ゆーたろです。
前回はテキストエディタで新規ファイルを開いた所までやったと思います。今回はその中に色々打ってみましょう。
今日の勉強のオトモ曲👇
- provided courtesy of iTunes
- テキストエディタに打ち込んでみる
今日から早速テキストエディタに色々打ち込んでみましょう。
前回保存したファイルを開いてみてください。
| １ | <html> |
| ２ | </html> |
| ３ | |
| ４ | |
| ５ | |
| ６ |
となっていると思います。
※HTMLは基本小文字で統一して書く癖をつけておく
HTMLは大文字小文字の区分は無いみたいなのですが、CSSやXMLには大文字小文字の区分がありこれから使うようになった際にエラーで困ってしまう可能性があるので、基本小文字で書くようにしましょう。
HTMLはブラウザに対する指示書の役割を果たしているので
<html> →「ここからhtml要素が始まる」
</html> →「ここでhtml要素終了」
と、指示していることになります。
HTMLでは、前回説明したh.pなどの要素も大抵< >で囲まれた開始タグで始まり、</ >で囲まれた終了タグで終わります。（終了タグのない要素もある）
では、今書いた<html>と</html>の間になんでも好きなことを書いてみましょう。
| １ | <html> |
| ２ | 星の王子さま |
| ３ | </html> |
| ４ | |
| ５ | |
| ６ |
- 拡張子「.html」をつけて保存する
このファイルに適当なファイル名をつけて保存して拡張子は「.html」です。
※拡張子 →ファイル名.拡張子 今回の場合 →ファイル名.html
- テキストエンコーディングを指定する
保存する時の「テキストエンコーディング」は「UTF-8」にしましょう。
※HTML5 のテキストエンコーディングはUTF-8を使用することが推奨されているみたいなので。
テキストエディタによっては「UTF-8」は「BOMあり」「BOM無し」を選択できる場合がありますが、「BOM無し」にしておこう。
※「BOM無し」は「UTF-8N」という表現もあり、windowsのメモ帳は選択肢が「BOMあり」しかないみたいなのでやっぱり前回紹介したようなコーディング用のテキストエディタを使用しましょう。
ちなみに保存したファイルを再度開いたときに、文字化けするなど、うまく開けない場合は、テキストエンコーディングを見直してみるのも一つの手みたいです。
- フォルダを作ってその中に保存しよう
自分の分かりやすい場所にフォルダを作って、その中に保存しましょう。
もちろんフォルダの名前は適当で大丈夫です。 ←簡単な方が後で困らない
※ちなみにMacの「テキストエディット」などはデフォがリッチテキストになってるみたいなので単なるテキストファイルにしてから保存してください。
- ブラウザなどでプレビューする
保存したファイルをブラウザなどでプレビューしてみましょう。
こんな感じに自分が書いた文字だけが表示されていたら成功です。
もし文字化けするのであれば下のように<html>の下に<meta charset="utf-8">というのを追加してみると大丈夫だと思います。
- 最後に
今回はここまでにしましょう。いつも以上に進んだと思います！
説明不足なところもあるかも知れないのでわからない所は調べてみてください。笑
次回は →タイトル<title>要素などをやって行きましょう。
今回のおすすめ商品はこれ👇
朝起きた時の髪質結構良き
