基礎からわかる!ゼロからのHTML入門講座

基礎からわかる!ゼロからのHTML入門講座

一昔前、広告の主流は紙媒体、あるいはTVのCMでした。また、通販といえば電話での申込可はがきでの応募がほとんどでした。現代ではどうでしょう?現代で完全に主流となっているのはインターネット上にあるサイトです。

YahooやGoogleといった日に何千万、何億というアクセスが有るサイトに掲載する広告の効果は計り知れなく、ネットショップが上げている利益も莫大なものとなっています。今では、家にいながらHTMLを駆使してインターネット上に自分の商品紹介ページを作成したりすることの出来る時代です。また、ブログなどの無料サービスを利用してそういったサイトを作成することも出来ますが、その場合にもHTMLの知識があるに越したことはありません。

HTMLを身につけて自分のできるの事の枠を広げていくにはどうすればいいか、それを紹介していきます。

目次
  1. HTMLとは
  2. ハイパーテキストとは
  3. マークアップとは
  4. タグとは
  5. HTMLを身につけるための講座
  6. デジタルハリウッド
  7. 東京デザインプレックス研究所
  8. KENスクール
  9. CodeCamp
  10. まとめ

HTMLとは

HTMLとはHyperText Markup Language(ハイパーテキストマークアップランゲージ)の略です。意味としましては、ウェブ上のハイパーテキストを記述するためのマークアップする言語ということになります。ただ、このように書いてもなんのことだかさっぱりわからないかと思います。

mathematics-989125_960_720

ハイパーテキストとは

ハイパーテキスト(HyperText)は、ハイパーリンクを埋め込むことができる高機能なテキストの事です。クリックすると他のページに飛ぶ、この仕組みを実現するのがハイパーテキストです。

また、ウェブページ内に画像や音声・動画などを入れる仕組みもハイパーテキストによって成り立っています。

マークアップとは

マークアップとは、機械が書の構造が認識出来るように、文書の各要素に目印を与えて行く事です。大見出しや小見出し、段落、改行と言った一般的(ウェブに限らない)な文書にあるものから、上記したハイパーリンクや画像を表すウェブならではのもの、などなど様々な目印を与えるマークアップがあります。

タグとは

コンピュータが文書の構造などを認識するための目印です。タグは一般的に<h1>oooo</h1> のように書きます。こちらの場合、ooooという文書を<h1>というタグでマークアップしています。 <img> <br> と言った単独で成り立つタグもあります。

代表的なタグ

一般的によく使われるタグを紹介します。

・<h1>〜<h6>

この<h◯>というタグはそれぞれ見出しを表します。<h1>が一番大きな見出しで<h6>になるに連れて小さい見出しになっていきます。

・<p>

<p>のタグは一段落の文章を表します。新たな段落になったら</p>で一度閉じた後、再度<p>タグで新しい段落を始めます。

・<img>

<img>のタグは画像を入れる時に使用します。文章だけのサイトだけでは見る人も疲れてしまいます。適当に画像を入れて見栄えを良くしましょう。

・<br>

<br>のタグは文章の改行を表します。段落内の文章であるけど、見やすくするために改行を入れる時などに使用しましょう。

この他にもタグはたくさんあります。それぞれがサイト制作をしていく時に使用している内に徐々に覚えていくと良いでしょう。

HTMLの見本


<h1>桃太郎</h1>
<h2>第一章</h2>
昔々あるところに、おじいさんとおばあさんがいました。
<img src="桃太郎の挿絵.jpg">

このようなcodeを書くことで下の画像のように表示されます。
(画像はまた配置する必要があります)

スクリーンショット 2016-03-28 14.44.57

HTMLを身につけるための講座

HTMLを身に付けるために一番いい方法は間違いなく、自分でサイトをいくつも作っていくことです。どんな講座を受講するより、どんな良い本を読むよりも効果があります。スポーツ選手が習ったり、学んだりするよりも、実践して身に着けていくのと全く同じです。ですが、人間、中々モチベーションが続くものではありません。アスリートみたいにストイックに練習し続けることは出来ないものです。一人では。なので、HTMLの学習も周りに同様の人たちがいて一緒に学んでいく、作成していくと非常に効率よく身に着けていくことが出来ます。ここではHTMLを学ぶことの出来る講座を紹介していきます。

デジタルハリウッド

通称デジハリと呼ばれる、老舗(この業界では)の学校です。元々デジタルクリエイターを育てるために作られた学校です。現在では文部省認可の大学・大学院も併設されており、全国から様々な生徒が集まってきています。HTMLの書き方はもちろんのこと、CSSやJavaScriptなど他のファイル作成、様々なソフトを使用した画像制作、といったTOTAL的なWeb制作を学ぶことが出来ます。

デジタルハリウッドのサイトはこちらから

Screenshot 2016-03-25 at 10.12.46

東京デザインプレックス研究所

東京デザインコンプレックス研究所は東京発コンテンポラリーデザインの複合型教育機関と称しており、HTMLをはじめとするWebのデザイン方法も教えてます。渋谷にあり、関東の人にとっては非常に通いやすい場所です。こちらもTOTAL的に学ぶことの出来る場所です。

東京デザインプレックス研究所のサイトはこちらから

Screenshot 2016-03-25 at 10.15.45

KENスクール

KENスクールはPCについての総合的な学校です。総合的ではありますがWeb/DTPだけで30講座以上と、デザインに関しても非常に力を入れています。また、基本的に個別指導ですので、納得行くまで質問し続けることが出来ます。そういった意味で、理解を深めるには最適な学校です。

KENスクールへはこちらから

Screenshot 2016-03-25 at 10.17.28

CodeCamp

CodeCampはオンラインを利用して自宅にいながらHTMLを始めとするWeb制作を学べる学校です。また、オンラインだけでなく、新宿にある教室での授業もあるので、そこで仲間と一緒に学習することも出来ます。また、オンラインの方では、自分の予定に合わせて授業を入れることが出来ますので、忙しい勤め人達にとっては非常に便利な仕組みということが出来ます。

CodeCampのサイトはこちらから

Screenshot 2016-03-25 at 10.18.38

まとめ

HTMLに限らず物事を学ぶということは自分によって学習意欲を高めることが必須というのは間違いありません。ですが、学習意欲を高める環境を与えることは周りの人たちにも出来ます。学校はその最たる例と言えるでしょう。自分に合った学校を見つけることは物事を学ぶ第一歩と言っても過言ではないと思います。

沓掛紳也
ライター
沓掛紳也

関連記事