初心者がHTMLを使ってみた。第一回「基本編」
スポンサーリンク
どもども皆さん。こんぶです。
僕がブログをはじめて早１ヶ月になります。これまではデフォルトのブログデザインを使ってブログを書いてきたわけですが、なんせ飽きてしまった！
そんなわけでウェブデザインの基本であるHTMLについて、この際記事を書きながら学んでしまおうと思います。
間違い等あるかもですが、知識ゼロの全くの初心者ですので悪しからず。
目次
HTMLとは
HTML(エイチティーエムエル)とは、HyperText Markup Languageの略であり、ウェブのデザインを決める言語のことです。
日頃僕達が閲覧するウェブサイトのほとんどが、このHTMLを使って記述されています。
HTML記述の仕方
ウェブが言語で書かれていると言ってもあまりピンと来ませんね。なのでここで一例をあげたいと思います。
こんな感じです。「皆さんこんにちは。こんぶです。」などちらほら文章らしきものはありますが、なんのこっちゃ！って感じですよね。
では早速実行してみましょう。
余計な記号が消えて見やすくなりましたね。これが実際にウェブサイトに表示されるものです。(以降HTML表記文は青色、実際に表示される文は黄色で表します。)
ではHTML文を詳しく見てみましょう。
HTMLはタグで囲むのが基本！！
もう一度上のHTMLを見てみてください。<○○>…</○○>という表記があるのが分かるでしょうか？<html>…</html>の様なものです。HTMLではこの<○○>をタグと呼びます。
また、<html>のように< >の中に単語だけを含むタグはその命令の「始まり」を表します。
一方で、</html>のように単語の前に / (スラッシュ)が付いたタグは命令の「終わり」を表します。
この「始まり」と「終わり」の両方のタグで命令を挟むことで初めてHTMLは実行されます。
HTML文であることを宣言する
オレンジ色で囲まれた部分に<!DOCTYPE html>というタグがあります。これはこの文がHTMLを用いて書かれた文だということをコンピュータに認識させるためのものです。
こんどは<html>と</html>を囲みました。これはHTMLの始まりと終わりを表し、全ての命令はこのタグの中に記述されます。
この<!DOCTYPE html>と<html>及び</html>はHTMLで文を書く際に必ず付けないといけないものです。難しいことは気にせず「とりあえず付ける」という意識でいいと思います。
headとbody
HTMLによる命令文は大きく2つのセクションに別けられます。それがhead部分とbody部分です。
①head部分
headは<head>と</head>で囲まれた部分のことです。上の例でいえば「こんぶはブログをやってみた。」という部分です。
主にここに書かれた命令はウェブ上に表示されません。コンピュータがこのサイトを認識する際の設定などが書かれる部分になります。
ここでは<title>タグが付けられた命令が入っています。これはこのサイトが「こんぶはブログをやってみた。」というタイトルのサイトですよ、ということをコンピュータに認識させるためのものです。
②body部分
bodyは<body>と</body>で囲まれた部分のことです。ここには主にブラウザに直接表示したいものを書きます。
文章を記述する
ここからはbody部分、すなわち実際にブラウザに表示させる部分の記述について書いていきます。
HTML文中に<p>というタグがあると思います。このタグで囲まれた部分は、文字列の塊を表します。一種の段落のようなものです。
HTMLでは基本的に文章は<p>と</p>で囲まれた部分に記述すると覚えておいてください。
文字の大きさを変更する
題名や見出しなどで文字のサイズを変更したい時は、<h〇>タグを使用します。このタグで囲まれた文章のサイズが変更されます。
〇の部分には1から6までの数字が入ります。数字が大きくなるほど小さいサイズの文字になることに注意してください。
改行する
文章の改行には<br />タグを使用します。基本的にHTMLの文ではスペースキー等で改行しても本文に改行は反映されません。
しかし、このタグをつけることでタグの前後の文を別の段落として表すことができます。
ここで注意が必要なのが、このタグは単体で意味を成すというところです。
今まで紹介したタグのように<〇〇></〇〇>の2つのタグで挟むのではなく、<br />のみを入力することでその役割を果たします。
コメントアウト
HTMLを見る人にどんなプログラムが書かれているか説明したい！という時に使用するタグがコメントアウトです。
コメントアウトには < ! - - と - - > を使用します。
このタグで囲まれた部分はブラウザに表示されません。
まとめ
①HTMLは開始タグと終了タグではさみこむのが基本！
②ブラウザの基本設定はheadに、実際に表示するものはbodyに記述！
③文字サイズは<h>タグで変更！
④改行は<br />タグを使用！
いかがでしたでしょうか？自分もまだ勉強中なので、このシリーズは更新頻度遅めで更新していこうと思いますので気長にお待ちください。
ここまで読んでいただきありがとうございました。
ではでは
