開発担当者コラム
2015.11.20
HTMLについて 新人、サービスを作る。

そんなこんなで入社してあっという間に日が立っていきます。

 

さて前回新しいサービスを作ろうといきごんだものの、
プログラミングっぽい言葉の羅列に完全ノックアウト。

「ジャバ」ときいても風呂掃除レベルです。

 

 

実はそんな僕でも一歩ずつ勉強をしています。

間違った内容もあるかもしれませんけど))))

 

ホームページを作るために勉強したこと

 

HTMLってなんだ??

 

「ホームページ 作り方」とかで検索するとHTMLという言葉にあたります。

ホームページを作るためにはHTMLの知識が必要。ということです。

まずはここから!

と早速読み進めてみました。

 

 

 

 

 

 

 

 

「・・・・・・」

 

 

 

 

 

 

 

 

 

 

 

「・・・・・・・・・・・・」

 

 

 

 

 

 

 

 

 

 

blog1

今日はここまで))))))))))))))))))

 

 

 

 

 

HTML

WEBサイトを作成したり、WEBブラウザを用いるサービスの表示画面作成などに用いられます。いまでは専門的なHTML知識がなくてもウェブサイトを作成できるツールやCMSと呼ばれるものが多く出回っているので、必ずしもサイト作成に必要とは言えなくなってきました。

しかしサイト運営者の方であれば、基礎的な理解は持たれていた方がよいでしょう。

HTMLにも様々なバージョンがあり、現行ではHTML5と呼ばれるものが最新となっています。

HTMLは何をするものか?

HTMLとは、HyperText Markup Language の略称ですが、文章に対して意味を付与していくための言語です。

ただのテキストの羅列に対して、文章/画像/見出し/色/引用分/リンク などの意味を与えることによりWEBサイトとして様々な意味づけ・装飾が機能しだします。

HTMLの書式・タグ

<hogehoge> ~</hogehoge>

のように< >内にタグと呼ばれる様々な要素を挿入します。

タグは下記のように入れ子構造を用いて記述されます。

<hogehoge1><hogehoge2></hogehoge2></hogehoge1>

HTMLタグも非常に多くの種類がありますので、全てを覚える必要はないでしょう。代表的な物を紹介していきます。

HTMLタグ <html></html>

HTML文章はこのようなhtmlタグで囲います。

HEADタグ <head></head>

文章自体の意味を記述します。通常、サイトのユーザーの目には見えない情報が記述されます。例titleタグ metaタグ

titleタグ <title></title>

ブラウザを開いたときのタブや、検索エンジンの検索結果に表示されるテキストを記述します。headタグ内に記載するためサイトに訪れているユーザーには見えないテキストですが、検索エンジンがサイト内容を理解するにあたり重要度の高いタグと言われています。

metaタグ

こちらも目には見えないサイト情報を記載します。

代表的な例では

meta description
<meta name=“description” content=“文章の概要”>

検索結果上のタイトル下部に表示されるテキストです。

文章の概要を伝えます。

その他metaタグにも様々な種類が存在します。

BODYタグ <body></body>

サイトの本文 ユーザーの目に見える情報の記載部分に用いられます。

html head body タグの並びは

<html>

<head></head>

<body></body>

</html>

のように、htmlタグで全体を囲み、headを上部 bodyを下部に記載します。

a タグ <a href=””></a>

aタグは文字からリンクを設定するときに使用します。

<a href=“http://www.allgrow.co.jp/”></a>

このように””の内側に、リンク先を記述します。

このままではまだリンクとして機能しません。

<a href=“http://www.allgrow.co.jp/”>オルグロー公式サイトのTOPページ</a>

のように、アンカーテキストと呼ばれるリンク文字列を設定すると

オルグロー公式サイトのTOPページ

のようにリンクが機能します。

まとめ

文章の意味、日常生活でも文脈を捉えて行間を読むことを求められる場合もありますが、WEB上では曖昧には記述できません。日常生活でタグが求められたとしたら。。

<そのあとが狙い>「今日空いてる?ご飯いかない?」</そのあとが狙い>

<すぐ帰る>「いいよ~」</すぐ帰る>

まぁ、、話は早いかもしれませんね。

オルグロー 公式 オルグロー 企業理念 オルグロー 社長挨拶 オルグロー 会社情報