HTMLの入門〜HTMLの基本を学ぼう!

webクリエイターになる為には必ず使うHTMLについて今回は記事を書いていきます。

HTMLとは?

HTMLとはwebページを作るための言語です。(Hype Text Markup Language)の略になります。インターネット技術の標準団体『W3C』によって、1997年に策定されました。HTMLはwebデザイナーになるには必ず取得しなければいけないプログラム言語です。

HTMLで言語に意味や役割を付けてホームページを作っていきます。

テキストエディタに上記を記入すると
こんな感じになります。

HTMLはタグと言われるもので意味を付けて書いていきます。例えば見出しを記載したいときは<h1>見出しです</h1>と書くと見出しになります。必ずタグは</h1>スラッシュを付けた終了タグで囲います。終了タグを使用しなくて場合もありますが今は省いていきます。

HTMLのルールと宣言

テキスト文書をHTMLと扱うには、『HTMLの記述に従って書いている』ということを1行目に明示する必要があります。

それが文書型宣言(DOCTYPE宣言)と呼ばれる記述です。

必ず1行目に<DOCTYPE html>と記述します。

こうする事によってテキストエディタに『これはHTMLです』と認識させます。

簡単に覚えると必ず<DOCTYPE html>を1行目に記述するって覚えていいと思います。

head要素とbody要素

HTMLでは、webページの中身がhead要素とbody要素の2つに大別されます。それぞれに役割があり、その役割に合わせた内容で構成されなければいけません。2つの大きな違いは、情報が視覚化されるか同課にあります。

webページの基本情報が記述されるhead要素は、ほとんどがコンピューターが読み取るための情報です。CSSファイルを読み込んだりとほとんどが視覚化されない情報ですが1つだけ視覚化されるものがあり、それが『title要素』です。Googleなどで検索し表示されているのがtitle要素になります。

難しく考えず<DOCTYPE html>の次の行に<head long=”ja”></head>と記述しましょう。long=”ja”とは『言語は日本語です』という意味になります。

一方、body要素に入る情報のほとんどが人間の目に触れる内容になります。wedサイトのほとんどはbody要素の中に記述します。簡単に言うとホームページの内容は全てbody要素の中に記述します。

おすすめのテキストエディタ

実際にHTMLを書いてみるとわかりやすいのでテキストエディタで実際に書いてみるといいと思います。テキストエディタは僕はBracketsというソフトを使ってます。

https://brackets.softonic.jp/

ここから無料でダウンロードできます。

まとめ

簡単にまとめるとHTMLはハイパーテキストマークアップランゲージの略。

最初にDOCTYPE宣言をしindex.htmlファイルで保存する(.htmlが入っていればその前はなんでもいい)

<DOCTYPE html> (これはHTMLですって事)

<html long=”ja”> (言語は日本語って意味)

<head> (この中にコンピューターが読みとる情報を入力)

<meta charset=”UTF-8″> (文字コード入力)

<title>タイトルを入力</title> (検索されるタイトルを入力)

</head> (headの終了タグ)

<body> (この中にホームページの内容を記載)

ここに内容を記載していく

</body> (bodyの終了タグ)

</html> (htmlの終了タグ)

今回はこの形を覚えましょう。

この動画がわかりやすいです。

ではでは〜〜〜。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

【簡単な自己紹介】 初めまして、現在Webデザイナーの勉強をしながらゲームのブログを書いてます。 何者なのか?ってのは自己紹介記事に深く書きますが、26歳の時に飲食店をOpenしたが失敗した事があります。 今はネットビジネスにシフトチェンジして頑張ってます。 色々な事に挑戦していきます。 良ければブログ読んでください!