ITコラム

ITコラム

2015.08.12

HTML入門を果たすために知るべき、たった３つの重要ポイント

一見難解で難しそうなHTML。でも実は、HTMLってすごくシンプルでわかりやすい言語なんです。なぜなら、抑えるべきポイントさえ抑えてしまえば、基本的にhtmlは同じことの繰り返しでできてしまうからです。
そこでこの記事では、そのHTML入門時に抑えるべき重要ポイントをご紹介します。これを読めば、あなたのホームページ作成もかなり順調に進むと思います！

まずは歴史を知っておこう。htmlはwebを「カンタン」にするために作られた！
HTMLの超基本形。基本は<div></div>で囲んでおけば大丈夫！
<head>って？<body>って？とりあえず毎回このパッケージをコピーしてから始めよう！
あとは<a>タグ、<img>タグ、<h1>タグを知ってれば大丈夫！

まずは歴史を知っておこう。htmlはwebを「カンタン」にするために作られた！

HTMLは、もともと研究者たちが学術論文を共有するために作られた仕組みです。なので、シンプルに文書が記述できて、かつカンタンに文字の大きさなどで全体構成を上手く表現できるようになっています。
HTMLがここまで広まったのもそのシンプルさ所以のもので、だからHTMLは「誰にでも」「カンタンに」覚えられるモノなのです！
そしてもう一つ覚えて置いて欲しいのが、「デザインはCSS」ということです。
つまり、HTMLはあくまでホームページのコンテンツを記述するためのものなので、覚えることはとても少ないです。あとはオシャレなデザインにするために必要なことは、全部「CSS」にあると思ってもらうのがベストです。

HTMLの超基本形。基本は「<div></div>」で囲んでおけば大丈夫！

HTMLは、「<div></div>」のような”タグ”と呼ばれるもので、文字を囲うことで文章の表現を可能にしています。
つまり、文字はとりあえず「&It;div>&It;/div>」で囲う、とおぼえておけば、もうHTMLの出来上がりです。もしオシャレなデザインを付けたい場合は、これに「CSS」というものを付与することで、デザインをお洒落にします。

<head>って？<body>って？とりあえず毎回このパッケージをコピーしてから始めよう！

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf=8">
<title>タイトル</title>
</head>
<body>
〜〜ここにコンテンツ〜〜
</body>
</html>

こちらはHTMLの「型」として覚えておきましょう。
どんなホームページを作るのにも必ず使います。あとは、「〜〜ここにコンテンツ〜〜」の部分に、上記のdivタグのようなものを入れていくだけで、HTMLの基本的な部分は完成します。

あとは<a>タグ、<img>タグ、<form>タグを知ってれば大丈夫！

あとは、この３つの<a>タグ、<img>タグ、<form>タグだけ！
それぞれに特殊な用法があり、これらを使うことでかなり本格的なホームページが出来上がります。
aタグはリンクを貼るために使います。<a href="リンク先のURL">リンクテキスト</a>のようなタグを作り、「リンク先のURL」の部分にクリックした後に表示したいページのURLを貼り付けることでリンクを作成することができます。
imgタグは、画像を表示するために使います。<img src="表示したい画像のURL"></img>のようなタグを作り、「表示したい画像のURL」の部分に表示したい画像のURLを貼り付けることでその画像を表示することが出来ます。
formタグは若干特殊なためここでは説明しませんが、例えばお問い合わせフォームなどを作ることができます。formをしっかり機能させるには、phpやrubyなどの知識が必要になりますが、一回やれば理解できるので是非機会があったら挑戦してみてください！

いかがでしたでしょうか？たったこれだけ覚えれば、HTMLでホームページのコンテンツが作れるようになります。
あとはCSSとJavascriptでオシャレなデザインやアニメーションをつければ、かなり本格的なホームページが出来上がるはずです！
この機会に、是非みなさんもお試しください！

【PR】もっとプログラミングが勉強したくなったら・・・

プログラミングを勉強する手段はたくさんありますが、もし「最速で」技術を習得したいのであれば、プログラミングスクールに通うことをオススメします！中でも「CodeCamp（コードキャンプ）」は受講者からの評判も大変良く、完全にオンラインであるため全国どこからでも受講することが可能で、更に今なら無料体験を受講することも可能です！
もし興味が有る場合は、下記リンクより、CodeCamp（コードキャンプ）の公式サイトにジャンプしてみてください！

「プログラミングのオンラインスクールのCodeCamp」を無料で体験しよう！ >>