HTMLとは！基本記述解説【職業訓練実況Part.1】

どうもアスミです。

前回の記事で、職業訓練を数日間受けての感想を書いていましたが、結構辛辣なことも書いてしまったかなぁと反省しています。

雰囲気や講師の方になれる必要はありますが、学んでいる内容はとても新鮮で楽しく毎日勉強できています。

そんなわけで今後は情報のアウトプットも兼ねて学んだ内容を記事にして投稿していきます。

HTMLやCSSが全く分からない人のための授業なので、初心者にはタメになる内容だと思います。（ほとんど僕の復習が目的ですが）

それではいってみましょう。

HTHLとは

WEBページ構成言語

HTMLは（HyperText Markup Language）の略で、皆さんがいつも目にしているWEBページを構成している基本言語になります。

単純な文字の羅列や画像の差し込みなどは全てこのHTMLで作成することが可能です。

ちなみにHyperText Markup Languageは日本語役では「ハイパーテキストに目印をつける言語」という意味になります。

ハイパーテキストとはハイパーリンクを埋め込むことができるテキストという意味。
要するに他のページのリンクや画像のリンクを埋め込んだりすることができるテキストの事。

WEBに詳しくない方の中には分からない人もいるかと思いますが、画像などはWEBページに直接貼り付けることができず、元の保存場所からリンクを張って間接的に見せているだけなんですね。

タグで構成される

HTMLは様々な「タグ」と呼ばれる印の中になんらかの意味を付与していくことで表現できます。

この「タグ」には様々な種類が存在し、形は基本的に＜＞でくくられ、最後に＜/＞←で閉めます。（例外有り）

例えば＜ｐ＞○○＜/ｐ＞タグで挟む文章は段落という意味を付与されます。

<p>練習中です。記述ミスには気をつけましょう。</p>

他にも『<a href>○○</a>』タグで他ページのURLを挟むことでリンクをという意味を付けることができます。

<a href=”https://asumi.tech/>アスミログ</a>

上記のHTMLを書き込み、実際にブラウザで確認してみると、アスミログ←のようなリンクをつくることができます。（僕のトップページに飛びます）

面白いですね！

早速書いてみよう

色々と文章を観ていてもわからないと思うので実際に書いてみましょう。

百聞は一見にしかずです。

とその前に…。

テキストエディタ『Brakets』

WEBページはテキストエディタにHTMLを書き込むことで作られます。

テキストエディタと言えば一般人であればメモ帳などを想像するかもしれませんが、確かにメモ帳でもWEB制作ができないことはありません。

しかし一般的ではないし、WEB開発専用に用意された無料のテキストエディタも存在します。

その代表格が『Brakets』と呼ばれるGoogleのテキストエディタです。

→高機能テキストエディタ、『Brakets』が凄い！

無料とは思えない超高性能なテキストエディタなので、いまからHTMLを学ぼうと考えている人は是非ともこちらをインストールすることをお勧めします。

下準備

さて、テキストエディタ（『Brakets』）を起動したら早速このエディタの保存場所を指定しましょう。

左上のファイルから「フォルダを開く」を選択し、デスクトップでもCドライブでも好きな場所を指定します。

※あくまで場所を指定するのでフォルダなどの階層を選ぶ

再び左上のファイルから新規作成をクリックし、先ほど選んだ階層内HTMLファイルを好きな名前で作成します。

※名前の最後には「.hthl」という拡張子を必ずつけましょう。

これで『Brakets』を使用してWEBページを作成する準備が完了しました。

記述開始

HTMLの基本構文は下記になります。

<!DOCTYPE html>
<html lang=”en”>
　<head>
　<meta charset=”UTF-8″>
　<title>ドキュメント</title>
　</head>
　<body>
　　<p>練習中です。記述ミスには気をつけましょう。</p>
　</body>
</html>

「１行目」はHTMLのバージョンを指定します。
「２行目」と「１０行目」ではこの間に前述した文がhtmlを使用していることを宣言しています。
「３行目」と「６行目」ではこの間の文章がheadタグによって（基本情報）を記していることを宣言しています。（headは基本情報を記すタグ）
「４行目」はmetaタグによって文字コードを指定します。
「５行目」はtitleタグでタイトルを指定します。
「７行目」と「９行目」ではこのbodyタグの間の記述が本文であることを宣言します。
「８行目」では実際に目に見える本文を記述します。

このように＜html＞や＜body＞などのタグは基本的に最初と最後をしっかりと指定する必要があるので、必ず階層ができるのです。