HTMLとは?初心者でも理解できる基礎知識〜

こんにちわ!sirobakoデザイナー見習いの大城です。

WEB知識ゼロの私ですが社長命令で一からスタート致しまして、業務に試行錯誤しながらも奮闘しております٩( ‘ω’ )و

 

よく耳にはするけど、WEBって何だろう?HTMLCSSって。。。?

 

そこで、今回初心者の方でもわかるHTMLをこちらでご紹介したいと思います!

 

 

HTMLとは?

・HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作成するための文字、表、画像、リンクなど、WEBサイトに必要な部品を配置するための言語です。

 

WEBサイト制作するにあたって、コーディング「HTML」、「CSS」は基礎となっております。今私達がスマホやPCでみている画面(WEBページ)は、基本的にはこのHTMLという言語(文字)によって作られています。

 

並んでいる英語の文字は、ソースコードと呼びWebページ内の表示や動作を命令することができます。このように、WEBページは、HTMLでの印づけを使って「構成されている文書」であり、これがブラウザで読み込まれることで、Webページが表示されているのです。

 

HTMLファイルの作り方

HTMLファイルの作り方ですが、「.html」という拡張子をつけることで、HTMLファイルであることをコンピュータが認識してくれます。

 

HTMLタグというものによって構成されています。

 

タグとは、「テキストに意味を与える印」です。タグを付けることでテキストに色を付けたり見出しとして認識させることができます。

タイトルや見出し、リンクなどの他にも装飾や画像の表示など、すべてタグによって作られているのです。WEBサイトを表示するために欠かせない部品と言えるでしょう。

 

まずは、実際にHTMLファイルを作成していきましょう!

 

 

HTMLは以下のように記述します。

このファイルを保存して実行すると、以下のように表示されます!

 

 

これはHTMLファイルです。

 

これはHTMLファイルです。

 

これはHTMLファイルです。

 

うるま市ポータル

 

 

このHTMLでは、h1、h2、h3がそれぞれの見出しとなります。!

 

見出しの下の「うるま市ポータル」の部分がリンクとなりURLと「うるま市ポータル」と記載することで、クリックするとURL先のページへ移動します。

早速、やってみましょう〜( ´ ▽ ` )ノ

 

 

 

リンクを表示させる

リンクを作成した場所へページが移動したい場合、リンクを作成するには<a>タグを使用します。

 

<a>タグの書き方

 

hrefの属性値(“”内)にリンク先の絶対パス(https://〜で始まるもの)あるいは相対パス(在の位置を基準としたもの)を入力します。

最後に必ず終了タグ</a>を入力します。

 

使用例  実際に<a>タグを使用してテキストにリンクを貼ります。

 

https://uruma-portal.okinawa/

 

今回は「うるまポータル」というサイトへのリンクを繋げてみます。

a href〜の部分の””内にパスを入力します。ここでは「うるまポータル」へのリンク(絶対パス)を入力しています。

 

画面ではこのように表示されます。テキストの部分をクリックします。

https://uruma-portal.okinawa/

リンクを作成した場所へページが移動しました!

 

 

引き続き、次回は「CSSとは?〜初心者でも理解できる基礎知識〜」をご紹介したいと思います(*^◇^*)

 

 

 

 

 

まとめ

 

・HTMLとは、WEBページを作るための最も基本的なマークアップ言語。

 

・HTMLは、タグというものによって構成されており、ソースコードをブラウザで読み込まれることで、WEBページが表示される。

 

・タグを使ってリンクを貼り付けページが表示される。

 

 

 

 

 

この記事を書いた人

oshiro

oshiro

うるま市出身!海とコーヒーをこよなく愛する3人の子を持つママです(*^^*) 建設業の事務を5年間勤務努。他、転々とし職業訓練でIllustratorとphotoshopを学び現在はsirobakoのデザイナー見習いとして日々奮闘中です٩( 'ω' )و皆様に楽しんで頂ける記事をこちらでご紹介させていただきます!