1281 更新日2019/06/15

htmlとは？初心者でも理解できるWEBページの仕組み

HTMLはホームページの言語

HTMLとは
HyperText Markup Language(ハイパー・テキスト・マークアップ・ランゲージ)の略で、ホームページを構成する言語のことです。

どのようにホームページになるかは、決められた文法で書きhtml形式(拡張子は.html)で保存することにより、ホームページと認識され表示されます。

HTMLタグで囲むことでテキストをマークアップする

例えば大見出しのタグは<h1>です。閉じタグは</h1>とスラッシュを入れます。

<h1>これは大見出しです</h1>

と言うように開始タグと閉じタグで囲む事によって文章の意味合いをつけていきます。

タグの種類は豊富にあります。最も一般的なタグ、段落を示すHTMLタグは<p>と</p>で囲みます。

<p>これは段落です。</p>

改行は<br>で閉じタグがない単体のタグもあります。

1分でWEBページを作成してみよう！

以下の文法をコピーし、widnowはメモ帳、Macはテキストエディットでhtml形式で保存し、ブラウザで開いてみましょう。タグとタグの間は好きな文字列を入れてみても良いです。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>これは大見出しです。</h1>
<p>これは段落です。これは段落です。</p>
<p>これは段落です。これは段落です。</p>
<br>
<p>これは段落です。これは段落です。</p>
</body>
</html>

WEBページにする手順

❶上記ソースをコピーし、メモ帳orテキストエディットに全てペーストする。

❷保存＞ html形式(macの場合は拡張子を.htmlに)で保存する

❸保存したファイルをアプリケーションを指定してブラウザで開く。

fool

どうですか？WEBページとしてブラウザで開けたでしょうか？超簡単な内容のWEBページ作成ですが、本物の1ページです。頑張ればメモ帳でもかっこいいホームページが作れます。

まとめ：HTMLタグの組み合わせでホームページができる

HTMLはホームページを作るための言語と言うのは理解できたでしょうか？

上記で紹介したタグの他にもかなりの数があり、紹介しきれませんが、WEBデザイナーやプログラマーを志す人であれば、マスターは必須です。

又、HTMLとは別にスタイルや装飾の言語CSSと言う言語もあります。これは主にデザイン部分を調整する時にHTMLと組み合わせて利用します。

かっこいい・機能的なホームページを作りたければ、HTMLとCSSの知識が必須です。

この記事をシェアする

ブログトップへ

「探しているイラストがない！」そんな時はイラスト相談・制作依頼

新規イラスト制作1カット3000円(税別)〜
大きい画像・ベクター形式は
1カット500円〜バラ売り可

商用利用ライセンス3000円(税別)〜

「自分だけの
イラストを作りたい」

snsで利用するキャラクターアイコン、自分だけの可愛いキャラクター・カットイラストなどご要望を詳しくお聞きし、あなただけのイラストを制作致します！
「商用利用目的の
イラストを作りたい」

「Tシャツ・グッズにしたい」「トロフィーのデザイにしたい」「看板や販売するデザインに利用したい」など商用利用ライセンス3000円(税別)〜販売中！
「フリー素材のベクター・
高解像度画像がほしい」

フリーイラストのillust.NOをお教えください！png・jpg・ai・epsなどご希望の形式で1枚500円〜販売致します。※商用ライセンスも別途ご案内可能。