100日後にエンジニアになるキミ - 6日目 - HTML - HTMLの基礎1

7938 ワード
HTML 初心者 エンジニア HTML テキストリンク

はい、6日目ですが、ようやく言語の方に入っていきます。

ツール類のインストールを終えていない方は
5日目までの内容をみていただき
ツール類を揃えておいて下さいね。

HTMLについて

HTMLとは

HyperText Markup Language

の略でWEBページなどを作成するための
マークアップ言語になります。

マークアップ言語というのは
文章構造などを記述するための形式言語になり
他にはTex , XML , Markdown　などetcがあります。

ここで言う
ハイパーテキスト(HyperText)とは
文字通りハイパーなテキストの事ですwww

テキストを超えると言う意味合いから
複数の文書(テキスト)を相互に関連づける仕組みをもつ
記述型の言語と言う事でHTMLと言います。

視覚表現や文章構造などを含めた記述を行うことができます。

通常のテキストファイルというのは文字だけですが
HTMLファイルになると、画像やリンクなども含めることができ
より視覚表現に長けたテキストを作ることができる訳です。

ファイルの最後に
「.html」という拡張子がついたものが
HTMLファイルになります。

HTMLの特徴

HTMLファイルをみるためには二つの方法があります。

・テキストエディターで見る
・ブラウザーで見る

テキストエディターで開いた場合は、
HTMLファイルの中身そのものであるソースコードが表示されます。

WEBサイトを見る場合は
ブラウザーで見ることとなります。

閲覧先のサイトのサーバーにアクセスして
HTMLを読み込んでいるのです。

ブラウザで表示した場合
HTMLのソースコードをブラウザーが解釈し
画面左上から描画が始まります。

このHTMLで書かれたデータを解釈し
画面に表示する文字や画像などの配置を計算することを
「HTMLレンダリング」と言っています。

ブラウザーで見た場合はレンダリングが行われた
段組みされた後の結果を見ることになります。

テキストエディターで見たソースコード(一部)

ブラウザーで見たHTMLファイルの結果

またこのソースコードの解釈の仕方も
ブラウザによって異なります。

ブラウザのレンダリング用のプログラムのことを
「HTMLレンダリングエンジン」と呼び
ブラウザ毎でレンダリングエンジンが異なるためです。

Trident (Internet Explorer)
EdgeHTML (Microsoft Edge)
Gecko (Firefox)
WebKit (Safari)
Blink (Chromium, Google Chrome, Opera)

ブラウザーによっては正しく表示させるために
ソースコードを書き直す必要が出てくる場合もあります。

HTMLの仕組み

HTMLでは木構造の「HTMLタグ」を用いて
ハイパーリンクや画像等のマルチメディアの埋め込み、
見出しや段落などドキュメントの抽象構造化、
フォントや文字色など見た目の指定が行えます。

HTMLタグは

< で始まり > で終わります。

HTMLの要素(エレメント)は
開始タグ~終了タグに囲まれた全体を指す概念で
・開始タグ(Start-tag)
・内容(Content)
・終了タグ(End-tag)
の3つから構成されます。

また開始タグ内に任意の属性(attribute)と
属性値(value)のペアを含むことができます。


参考(https://bibabosi-rizumu.com/elements-attribute-value/)

この例だと
spanタグで内容はテキスト
属性としてstyle属性があり、属性値はcolor:#ff00ff;

属性値を加える際に、属性値は " で囲みます。

HTML文書の作成

HTML文書はタグを記述し拡張子に.htmlをつければ
HTMLファイルとして保存することができます。

それではHTML文書を作ってみましょう。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML5サンプルだよん</title>
    </head>
    <body>
        <p>HTML5の本文</p>
    </body>
</html>

テキストエディターを開いて
これを打ち込むかコピペしてもらい
出来たら、デスクトップなどに保存してみましょう。

それをブラウザーで開いてみましょう。
ファイルをダブルクリックするか右クリックから開くで開けるはずです。

結果はこんな感じになったはずです。

このサンプルの解説です。

冒頭に <!DOCTYPE html> を付けるとHTML5として解釈されます。

タグは大文字小文字は区別されないのですが、基本小文字で書けば良いです。

<!-- -->で囲んだテキストのことを「コメント」と呼び
コメントとして書かれたテキストはブラウザには表示されません。
ソースコードにメモ書きしたい場合はコメントの書き方をすれば出来ます。

タグには親子関係があり、タグの中にタグを記述することができます。
親子関係のタグはインデント(字下げ)しておき見やすくすると見やすいです。

ブラウザーに表示されるのは
タグの内容(Content)の部分だけです。
タグそのものは表示されません。

もしタグの名前などがそのまま出てきてしまった場合は
タグを閉じ忘れたり、タグの書き方などが間違っています。
開始 - 終了タグで閉じているかどうか見直してみましょう。

HTMLの基本的構造

HTMLの基本的な構造を表す要素としては

<html>
HTML文書のルート要素

<head>
HTML文書のヘッド部分 を指定する要素
HTML文書自身に関する情報(タイトルやスタイルシートに関する情報など)を指定できる

<body>
HTML文書の本体部分を指定する要素

となっています。
この要素がないとHTMLとしては成立しない形態となります。

<!DOCTYPE html>
<html>
    <head>
        ヘッド部分
    </head>
    <body>
        ボディ部分
    </body>
</html>

HTML要素の中に
HEAD,BODY要素が存在するという構造です。

HEAD(ヘッド)内に記述可能な要素

HEAD要素はheadタグの開始タグを書き、その中に要素を書き終了タグで閉じます。
HEAD内に記述可能な構造を表す要素としては下記があります。

<title>
タイトルを指定,ブラウザのタイトルバーに表示される

<link>
href属性で指定したファイルとの関係を定義する

<meta>
文書の情報を定義する

<style>
スタイル情報を記述,type属性の記述が必要(text/css等)

<script>
スクリプト を記述,type属性(text/javascript)と
meta要素でスクリプトタイプの宣言が必要

<head>
    <title>タイトル<title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link type="text/css" rel="stylesheet" href="sample.css">
    <script type="text/javascript" src="sample.js">< script>
</head>

HEAD要素内に書いたものはtitle以外はブラウザー上では表示はされませんが
WEBサイトの情報になるものであるので
そのWEBサイトに関わることを記述します。

特にWEBサイトの情報の詳細部分である metaタグ は
かなり多くの情報を記載することになりますが
metaタグとlinkタグは終了タグが無くて大丈夫です。

次にscriptタグ,linkタグでは外部のcssやjsファイルを読み込みすることが出来ます。

スタイルシート(stylesheet)とは
構造化文書の見た目を記述するコンピュータ言語のことで
一般的にはCSS(カスケードスタイルシート)が用いられます。

CSS(カスケードスタイルシート)は
文書構造と体裁の分離という理念の実現の為に
提唱されたスタイルシートの仕様の一つで
CSSはHTMLに新たなデザイン機能を備えるものです。

スタイルシートを切り替えて表示を変化,効果の重ね合わせなどが
実現可能になっています。

スクリプト(script)は一般的には Javascript を指し
Javascriptはオブジェクト指向のスクリプト言語です。

多くのウェブブラウザ等は標準化されたECMAScriptを実装しており
WEBサイト上の動的な表現を担っています。

同じオブジェクト指向の言語であるJavaとはあまり関係ありません。
インドとインドネシアくらい違うものだと覚えてください。

通常、HTMLファイルの中にはCSSやJavascriptを
直接書き込んで埋め込むこともできますが
デザイン部分、昨日部分を分けて開発されることが多いため
HEAD部分で外部ファイルとして読み込みを行うことがほとんどです。

BODY要素

HEAD要素はブラウザー上では目に見えない部分を記述する場所ですが
BODY要素は目に見える部分を各場所になります。

BODY要素はbodyタグの開始タグを書き、その中に要素を書き終了タグで閉じます。

<body>
    <p>HTMLの中身</p>
</body>

BODY要素ないは何でも書き入れることが可能です。

まとめ

HTMLのファイルの作り方を押さえておき
基本的な構造(要素)を押さえておこう。

次回はタグについてです。

君がエンジニアになるまであと94日

作者の情報

乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython