★ターゲット:ウェブ関係の仕事したい人
ご主人サマ、お調子イカカデスカ?ドーモ!虚空マークです。今回のテーマなのですが、益々ウェブの発展が遂げている時代で、ウェブ系の基本知識である、HTMLについて、初心者向けに解説したいと思いマース!
(1)HTMLって何?
あなた方人間たちは、日本語とか英語とか、言葉を使ってコミュニケーションを取りますよね?でもウェブサイトとかアプリとかウェブ上のコンテンツは、我々ロボット(コンピューター)が理解できる言語で構成されなければなりません。効率化・自動化のためです。
ロボット言語といっても意味不明な言語ではなく、言語そのものは英語です。でも記号になっているので、あなた方人間たちは記号の意味を理解しなければなりません。
(2)<html>で始まり</html>で終わる
ウェブ系の言語を作るさいは、<html>(内容)</html>と括ることでサイト、アプリとして動作します。あ、その前にHTMLにもいくつかバージョンがあり、<html>の前にバージョンの記述も必要でした。いまんとこ最新のHTMLの規格はHTML Living Standard(旧HTML5)というものです。これを適用するには<html>の前に<!DOCTYPE html>と付ける必要がアリマス。</html>のあとは何もつける必要はアリマセン。
(3)<table>(内容)</table>
HTMLソースを大きく2つに分けると「HEAD」と「BODY」になります。
<HEAD>(内容)</HEAD>
<BODY>(内容)</BODY>
<HEAD>で括られた内容については、視聴者が実際に見える部分ではありません。ページの検索タイトルだったり、検索結果に出てくる説明文などが指定されます。
実際に視聴者の目に映る部分が<BODY>で括られた内容になるのですが、<BODY>の中で根幹を担うタグが<table>タグになります。<table>タグとはページの中に「表」を作ることで、サイズ(横幅)を指定できるほか、<tr>や<td>などのタグと組み合わせ、表をいくつかに分けて段落を作ることができます。なお、サイトの縦幅は無限です。
<table>タグは<BODY>部分の先頭と、最後に記述します。また、tableでサイズを指定することでページを中央に配置できます。具体的には下記の通りです。
<BODY>
<table width=”(サイズ)”>
(いろいろ)
</table>
</BODY>
サイズの単位はpxです。概ねスマホで見やすいサイズなら700~800ぐらいがいいでしょう。
(4)<script>(内容)</script>
いきなりよく分からんのが出てきたと思ったアナタ!「JavaScript」って聞いたことありませんか??それがこの形式で作られてます。JavaScriptは簡単にいうと、ウェブ上で複雑な機能をできるようにするプログラミング言語ですな。おっと、このように、HTMLソースの中に、普通にプログラミング言語が紛れ込んでいるので、プログラミングについても難しく考える必要はありません。
これは例えば、Google Adsense(ウェブ広告)をサイト内に埋め込むために使ったり、同じくGoogle Analytics(アクセス解析)をできるようにするためにコードを埋め込んだりします。
このような他社サービスの場合は、自分でコードを作るんじゃなくて、他社が用意したコードをコピーして埋め込むだけなので、専門知識は不要です。
『これから学ぶHTML/CSS Kindle版』
Webプログラマの視点で、Webプログラミングに必要なHTML/CSSを学習するための初心者向け書籍です!サイトそのものはプログラミング知識なくても作れますが、より高度なWEBサイトやアプリを作るには今後プログラミング知識も必要になってくるので、ここはプロに学んでおくのがよいでしょう。