目次
1.目的
2.HTMLとは
3.HTMLの基本構成
ーHTMLの要素
ーHTMLの書き方
4.終わりに
1.目的
HTML言語を全く触ったことがないような超初心者に向けて、まずHTMLとはどういったものなのかからHTMLの基本的な書き方まで一緒に学んでいきます。
2.HTMLとは
まずHTMLとは「Hypertext Markup Langage」の略で、「Hypertext」とは複数の文書を相互に関連づける仕組みのことであり主な例として「URL」があります。次に「Markup」とはテキスト中に書体などの標識情報を埋め込むことであり、一般的にタグ付けと同じようなものです。
つまり、HTMLとは「文書にタグ付けすることで色々な機能を持たせ、Web上などでさまざまな文書と共有可能にする言語」ということです。
3.HTMLの基本構成
さて、HTML言語がどういうことをする言語なのかわかってきたところで、HTML言語の基本的な書き方を説明していきます。
HTMLの要素
まずはHTMLの最も重要なところである、要素について見ていきます。
<p>タグの中身だよ</p>
・上記の< >で囲んだ中身が要素の名前です。上記での場合はpが要素の名前となります。この要素の名前を指定することで、テキストに与える効果を設定することができます。
・要素の名前を< >で囲むとタグとなります。タグの中で、<p>のような形を開始タグと言い、どこから要素が始まるのかを表しています。また、</p>のような形を終了タグと言い、要素が適用される範囲の終わりを表しています。
・タグで囲まれた中身をコンテンツと言います。今回の場合、タグの中身だよの部分がコンテンツにあたり、要素の効果が適用される内容のことです。
・タグとコンテンツを合わせて要素と呼びます。今回の場合、<p>タグの中身だよ</p>が要素にあたります。
<a href="リンク先URL"> タグの中身 </a>
また、特定のタグに関しては要素の追加情報である属性を入れることができる。上記では、href="リンク先URL"が属性であり、開始タグの中の要素の名前の後ろに入れます。<a>~</a>自体はリンクを作る要素だが、属性でリンク先を指定することができ、<a>~</a>で作ったリンクから属性で指定したリンク先に飛ぶことができる。
要素の名前と属性の間に「半角スペース」
HTMLの書き方
ようやくHTMLの基本的な書き方について学んでいきます。
<!DOCTYPE html>
<html>
<head>
<title>Charme</title>
</head>
<body>
<h1>HTMLの超入門編</h1>
<p>HTMLについて</p>
</body>
</html>
・<!DOCTYPE html>はこれがHTML文書であることを表すもので、おまじないとしてHTML文書の初めに必ず書きます。
・<html> </html>はこのタグの中身がHTMLで書かれたコードであることを表しています。HTMLのコードを書く際は必ず書きます。
・<head> </head>はWebページを作成した際に、そのWebページに訪問してきた人が直接見ることはあまりなく、検索エンジンに対して与える情報をこのタグの中に入れます。例えば、headタグ内にあるtitleタグの場合、検索結果となる、タイトルを与えることができ、これは検索エンジンに対して検索結果という情報を与えているということです。
・<body> </body>は訪問者が直接見ることになる部分で、画面内に表示されるのはこの部分となります。大見出しを表す<h1> </h1>や、段落を表す<p> </p>が中に入ります。
4.終わりに
まずはHTMLの基本中の基本を勉強してみました。これでHTMLがどういった言語なのか少しわかったかと思います。
次回は、HTMLでよく使う基本的な要素について勉強していこうと思います。