おすすめプログラミングスクールの口コミ・評判・体験談がわかる比較サイト

プログラミングスクール 掲載数No1 * プログラミングスクール 掲載数No1 *

HTMLって何?プログラミング初心者の人必見!

プログラミング学習

公開日 : 2019年08月04日 | [更新日] 2020年01月11日

皆さんが普段表示しているWebサイトはどのように動いているのでしょうか?

Webサイトを動かすためには、裏で様々な技術が動いています。

今回は、Webサイトを作るために必要な技術である”HTML”と呼ばれる言語について、プログラミング初心者の方向けにご説明します。

具体的には、
・HTMLとはどんな物なのか?
・HTMLでできること
・HTMLの基本的な書き方
・HTMLの効率的な学習方法
についてご説明します。

これからWebについて勉強してみたいとお考えの方は是非参考にしてみてください!

HTMLとは

HTMLとは

HTML(HyperText Markup Language)とは、Webページを記述するためのマークアップ言語の事です。インターネット上に公開されているWebページはこの言語が基礎となって作られています。

HTMLでは、ハイパーテキストと呼ばれる技術を使うことができ、文字列に他のページへのリンクを埋め込むことができます。

また、文字を記述するほかにも、画像や音声などのデータファイルもリンクで埋め込むことができます。

入門編!HTMLを学ぶとできることになること

HTMLでできること

HTMLは、Webページ制作用に開発された言語です。HTMLを使って、ブログのようなWebページを作ることができます。
一般的なブログサービス(Amebloやはてなブログなど)などで配布されているテンプレートに頼ることなく、自分で1から作る場合は基本的には必ず必要になある知識です。
また、1からではなく、テンプレートを自分でカスタマイズして利用する際にも必要な知識になります。

実際にHTMLのコードを見てみる

HTMLのコード

皆さんが普段閲覧しているWebページは基本的にはHTMLを使用しています。

どのようなHTMLでWebページが書かれているかは、実はとても簡単に見ることができます。

まずは皆さん、普段利用しているサイトを1つ開いてください、

YahooのホームページやGoogle、Youtube等どのサイトでも構いません。

サイトを開いたら、サイト内のどこか適当な場所を右クリックしてください。

すると、色々な項目が表示されてその中に「ページのソースを表示」と呼ばれる項目があるので、その部分をクリックします。

そうすると、大量の文字列が表示されると思います。それがホームページのHTMLコードです。

初心者の方は「難しそう…」となるかもしれません。

ですが、ここまで大きなサイトを作るのには勉強が必要であり、現時点で理解できないのは仕方のないことです。

実際にHTMLを書いて練習してみましょう

実際に練習

ここまでの説明を聞いて、「書くための準備が大変そう…」とか「何から準備すれば良いんだろう…」のような印象を持つ方もいらっしゃるかもしれません。

実は、HTMLはすぐに書き始めることができます。

HTMLはメモ帳があればすぐに書き始めることができるのです。

練習あるのみ!実際にHTMLを書いてみましょう

それでは、実際に書いてみましょう。

まずはメモ帳を開いてください。

<html>
<head>
<title>HTMLを試してみよう!</title>
</head>
<body>
Hello World
</body>
</html>

細かいコードの意味は後から説明します。

上記のコードを打ち込んだら、テキストデータを「お試し.txt」という名前で保存してください。

それでは次に、今作ったWebページを見てみましょう。

作成したWebページを見るために、次はテキストファイルの形式を変更します。

先ほど保存した「お試し.txt」を「お試し.html」という名前に変更してください。

そうすると、テキストファイルをHTMLファイルに変更できます。

形式を変更したら、再度「お試し.html」を開いてください。

すると、ページ上に「Hello World」と描かれたWebページが表示されます。

もしもWebページを開く事ができない場合は、「お試し.html」を右クリックします。その後、「プログラムから開く」の中にある「Google Crome」や「Internet Explorer」等の普段使用しているWebブラウザを選んでください。

そうすると開くことがことができます。

HTMLの基礎文法

HTMLの基礎

HTMLでは、のようなタグを使って記述します。

今回は、HTMLで使用される基本のタグを一部抜粋して解説します。

html

htmlタグは、HTMLファイルを書く際の始まりを示しています。
つまり、この記述をする事で「このファイルはHTMLファイルです!」と宣言をする事ができます。

このタグを使う際は、HTMLファイルの開始位置に、終了位置にと記述します。

head

headタグでは、HTMLファイルの裏側の情報を定義することができます。

ここで設定された情報は、基本的にはブラウザ上には表示されません。

title

titleタグでは、Webページのtitleを決めることができます。

このタグを使うときは、headタグの内部で設定する必要があります。

body

bodyタグでは、Webページ上に表示する本文を書く事ができます。

このbody内に”Hello World”と記述したから、上記の例では”Hello World”と書かれたWebページが完成したという事です。

ページの本文を変えたいときは、このbodyタグ内の情報を書き換えます。

div

divタグでは、特定の範囲を1グループにしてひとまとまりにすることができます。

グループとなった部分をブラウザで表示するときは前後で改行が行われるようになります。

また、align属性を追加する事で文字の設定を行う事ができるようになります。

p

pタグでは、文字列や画像に対して段落を設定することができます。

pタグで囲まれた要素は1つの段落として扱われるようになり、前後に行間隔が空いた状態で表示されるようになります。

a

aタグでは、別のファイルへのリンクを設定することができます。

このタグで囲われた文字列をクリックすると、別のページへ移動する事ができるようになります。

aタグは基本的に単体では使わず、href属性等の別属性とセットで使います。

href属性にはリンク先のファイルのパスを記述します。

同一のWebサイト内のファイルの場所は相対パスで指定します。

また、外部サイトへのリンクであれば直接URLを指定することもできます。

独学も可能?HTML勉強の流れ

勉強の流れ

HTMLには、前項で紹介したタグ以外にも沢山の文法があるので、まずは一通りタグを把握する所から始めるましょう。
こちらに関しては、大体の人が1か月程度で一通りマスターできるようになります。

スクールに通ってもいいですし、こちらに関しては個人的にネット上の無料学習ソフトや教材のみでも習得できるかと思います。
もちろん学ぶ気持ちは大事なので、挫折しないようここの基礎を妥協せずにしっかり学びましょう。
まずは基礎となるHTMLを学習して、プログラミング学習の第一歩を歩みましょう!!

WRITER

学生時代にインドの人材紹介会社にジョインし、新規メディアの立ち上げに従事。日本に帰国後、インターンとしてインバウンド向けサービスを展開するINDIE.incにジョイン、サービスオペレーションを担当。大学卒業後、新卒で大手IT企業に入社し、WEBディレクター業務に従事。その後ケニアにて独立。帰国後はOYO LIFEの日本立ち上げに参画。独特なイラストと共にハンドメイドピアスを販売中。インスタでmAki_earringsと調べてくれる人は神。

オススメの
プログラミングスクール

RUNTEQ

Ruby

ウェブカツ

Webアプリ

ポテパンキャンプ

HTML/CSS/jQuery

TechAcademy(テックアカデミー)

AI・人工知能

TECH::EXPERT(テックエキスパート)

CSS

侍エンジニア塾

HTML/CSS/jQuery

tech boost

HTML/CSS/jQuery

.Pro(ドットプロ)

Python

都道府県から探す

北海道・東北エリア
北海道
青森県
岩手県
秋田県
山形県
福島県
宮城県
関東エリア
東京都
神奈川県
埼玉県
千葉県
茨城県
栃木県
群馬県
山梨県
信越・北陸エリア
新潟県
長野県
富山県
福井県
石川県
東海エリア
愛知県
岐阜県
静岡県
三重県
近畿エリア
大阪府
兵庫県
京都府
滋賀県
奈良県
和歌山県
中国エリア
鳥取県
島根県
岡山県
広島県
山口県
四国エリア
徳島県
香川県
愛媛県
高知県
九州・沖縄エリア
福岡県
佐賀県
長崎県
熊本県
大分県
宮崎県
鹿児島県
沖縄県

コードランとは
コードランとは、プログラミング初心者や副業/フリーランス向けに、プログラミングスクールの評判や口コミを比較できるサイトです。 実際に受講をした方の生の声を配信することで、プログラミングスクール選びの際に、自分にあったスクールを選べるよう、サポートしています。また、コードラン編集部では、プログラミング学習や、副業/フリーランスなどの働き方、副業の時の見積もりの出し方などなどをわかりやすく伝えております。

コードランの特徴①リアルな受講生の声が見れる!
侍エンジニア塾,Progate(プロゲート),TECH::CAMP(テックキャンプ),CODE MONKEY(コードモンキー),インターネットアカデミーなど、プログラミングスクールに実際に通った方の口コミ情報を掲載しております。 中立・公平性を維持するために弊社では口コミ内容の修正、削除は原則行っておりませんので、他のサイトよりも信頼性が高いと評判です。

コードランの特徴②目的にあったプログラミングスクールが見つかる!
東京や大阪などの場所はもちろん、作りたいサービスや、学びたい言語、転職支援があるか、Webサイトを作ってみたい、iOSアプリを作りたいなど、プログラミングを学ぶ目的からスクールを探します。未経験歓迎か、オンラインでの受講があるかなど、プログラミングスクールごとに特徴も選択できるようになっています。もちろん調べる際には価格や時間も大事な要素になってくるかと思いますので、評判や口コミも是非参考にしつつ、目的別に徹底的に比較をして、自分に合ったスクールを見つけてみてください。

コードランの特徴③現役エンジニアの体験談や学習記事がたくさん!
プログラマーと一言に言っても、使っている言語や働く環境が違えば、気付きのヒントや新たな視点は必ずあるはずです。コードランでは現役エンジニアたちが現場で活躍できるようになるまでのストーリーやスクールのインタビューをご紹介しています。また、 IT業務が未経験でもプログラマーになれるの? スキルアップするには何からはじめればいいの? フリーランスはみんなどうやって稼いでるの?実際のお給料は? など、プログラミングを志すみなさん向けの記事を集めています。 今もし何かの壁にぶち当たり悩んでいるのだとしたら、あなたの不安の解決の糸口が見つかるかもしれません。

コードランはこんな方におすすめ
はじめてスクールに通ってみたい方や、独学で学んでプログラマーを目指している方、スキルアップのために新たにスクールを探している方におすすめです。実際の口コミや評判をもとに、コードランではプログラミングスクールを徹底解剖していますので、あなたに合ったプログラミングの学び方やスクールが必ず見つかるはずです。 コードランはブログランキングサイトに参加しています
コードランは、人気ブログランキングのシステムエンジニアおよびアプリ開発、WordPressなどのカテゴリーでランキングに参加しています。また、にほんブログ村 プログラミング教育IT技術ブログWebエンジニアの各カテゴリーのランキングに参加しています。

*1 当社調べ