HTMLとWebの概念

ハイパーテキストとは

ハイパーテキストは、文書と文書を結びつける、「文書を超えた文書」と言う概念のこと。

この時、テキストを結びつけるリンクのことを「ハイパーリンク」と呼ぶ。

World Wide Webの産みの親であるティム・バーナーズ＝リーは、ハイパーテキストとインターネットを結び付け、Webサーバー、Webブラウザ、Webページによる「世界中の文書情報を簡単に探索することのできるネットワークシステム」を作り上げた。

HTMLは、このWorld Wide Web（wwwと省略されるか、あるいは単にWeb）において文書を記述するためのマークアップ言語である。TeXなどと同様にマークアップ言語であるため、MS-Wordのように結果を見ながら編集することは基本的に出来ないが、HTMLエディタを使うことで可能である場合もある。

HTMLとCSS

HTMLは、文書の意味情報やリンクの体裁を表現するだけで、スタイルやデザインはCSSあるいはスタイルシートと呼ばれる別のテキストの記述によって行う。

HTMLで文書を書いたら、その情報に基づいてCSSを書く。あるいは、逆にCSSに基づいてHTMLを書く。このことによって、マークアップした記述全体に一気にデザインを設定し、スタイルを変えることが可能になる。CSSはとても優れた仕組みである。

WebサーバとWebブラウザ

HTMLを見るためには、Webブラウザと呼ばれるソフトウェアが必要。WebブラウザはHTMLを整形して、きちんとしたプリントされた出力として画面に表示し、そこで踏まれたリンクなどから別のページをリクエストする。別のページは同じWebサーバ上にある場合もあれば、別のWebサーバ上にある場合もある。

Webサーバは、コンテンツであるWebページをWebブラウザに送受信するための、大きなコンピュータ。このコンピュータはネットワークに繋がった状態で常に起動・実行され続けており、さまざまなクライアントの要求に応じてWebページを送ったり、PHPなどのサーバーサイドの処理を行う。この時、PHPなどからSQLのようなデータベース管理システムが呼ばれることも多く、多くの場合、コミュニケーションサイトの情報はPHPなどを通じてSQLデータベースに保管され、PHPなどを通じてHTMLに整形されて、WebサーバからWebブラウザへ送られる。

サーバーサイドとクライアントサイド

HTML+CSSでは、変数や制御構造を用いたプログラミングはできない。あくまで、HTMLとCSSは文書の体裁とスタイルを記述するだけである。

プログラミングを行いたい場合は、PHPなどのサーバーサイドの言語か、JavaScriptのようなクライアントサイドの言語を用いて行う。

サーバーサイドの言語で書かれた記述は、「Webサーバ側」で行われる。そして、Webサーバは処理を行ってHTMLをネットワークでブラウザに送信する。そして、JavaScriptで書かれた記述は、「クライアントのWebブラウザ側」で行われる。

たとえば、掲示板のようにデータをHTMLに整形し、POSTなどで送られたデータをデータベースやサーバ側のデータファイルに投稿するのは、サーバーサイドで行われる。また、ブラウザ側で豪華なエフェクトをかけてブロックを綺麗に表示したり、インタラクティブな操作の処理（リンクを踏んだ時にAjaxのような処理を行ったり、スクロールした時にコンテンツを動的に読み込んだりする）をブラウザ側で行うのは、クライアントサイドで行われる。

最近は、Webの開発にはWebフレームワークを使うことが多く、PHPの開発でもCakePHPやLaravelなどを使うことが多い。またWikiやWordPressの普及などもあって、HTMLを手動で書くことは減ってきている。だが、HTMLの基本を知っておくことはとても役に立つ。

HTML

ヘッダ

<link rel="stylesheet" type="text/css" href="../style.css">

テキスト

<div class="hot_titles">
<h1>表題1</h1>
<p>テキスト1</p>
<h1>表題2</h1>
<p>テキスト2</p>
</div>

.hot_titles h1 {
    margin: 60px 0 30px 0;
    background: #f9ebd1;
    padding: 15px 15px 15px 15px;
    border-bottom: 2px solid #c3003a;
    font-size: 270%;
    color: #a03c44;
}
.hot_titles h1:before {
    content: url("dog4.png");
    margin-right: 15px;
}

テキスト要素

a:link {通常のリンクのスタイル}
a:visited {訪れたことのあるリンクのスタイル}
a:hover {マウスオーバーした時のスタイル}
a:active {クリックしてアクティブにした時のスタイル}

後日注記：span要素であっても、CSSで

display: block;

を設定すれば大きなブロックにできる。blockとinlineを上手く使い分けることがCSSによるスタイライズの肝となる。

後日注記：aタグにtarget="_blank"をつけると、リンクをクリックした際にそのページを新しいウィンドウ（あるいはタブ）を開いて表示します。

後日注記：divやspanにスタイルを指定したい場合は、style属性で直接CSSを指定するか、class属性でセレクタを指定し、そのセレクタに応じたスタイルをCSSファイル内で指定してやればよい。

リストとテーブル

高度な要素

<script type="text/javascript" src="script.js"></script>

後日注記：フレームの中でリンクする際に、aタグにtarget="_parent"をつけると親フレームのページを更新し、target="_self"をつけると子フレームの内部のページを更新します。

特殊文字

HTMLの中で<や>などのHTMLで使われる記号を使いたい時は、&lt;や&gt;のように記述する。

以下のサイトを参考に執筆しました。

• HTML-特殊文字 - HTML タグ リファレンス

入力フォーム

入力フォームは、PHPなどでテキストや選択内容をサーバに送信するために必要。

たとえば、

<form method="post" action="comment_receive.php">
名前: <input type="text" name="username" required></input><br>
投稿内容: <br>
<textarea name="comment" cols="50" rows="5" maxlength="150"></textarea>
</form>

などとなる。

詳しくは「いちばんやさしいPHPの教本 人気講師が教える実践Webプログラミング (「いちばんやさしい教本」シリーズ)」が参考になります。

PHP（言語）も参照のこと。

HTML5

HTML5

HTML5とCSS3では、さまざまなタグや視覚効果が追加された。

HTML5では、<header>、<section>、<article>、<nav>、<footer>などの新しいタグが追加された。

これらを使うことで、検索エンジンにページの各部分の意味を伝えやすくなる。

詳細は以下のページを参照のこと。

• 【ちゃんと使えてる？】HTML5・CSS3の使い方 - くまWeb
• 【爆速】HTML5 + CSS3で簡単にWebデザインしよう！ - Qiita

Webブラウザ（Windows）も参照のこと。

ビデオタグ

自分の書いたブログ「神々とともに生きる詩人」2021/01/21より。

また、HTML5では動画を再生するネイティブなタグなどがサポートされた。このため、外部プラグインが必要なFlashなどは衰退した。

HTML5の意味

インターネットの世界には、とてもたくさんのWebページが存在します。それぞれのWebページに管理人がいて、それぞれが独自のHTMLを書いて公開しています。

ですが、その無数にあるWebページで、それぞれのHTMLはそれぞれ異なるやり方で記述されているため、HTMLの記述はそれぞれのページでバラバラになってしまい、Webの世界は混沌とし、わけがわからなくなってしまいます。

このようなWebの混沌を、HTML5の新しいタグを使うことで、ある程度の「共通のルール」を持たせることができます。

HTML5の新しいタグを使うことで、ヘッダ、フッタ、メニュー、記事、といった各部分の役割と意味を分かりやすくすることができます。「ここがメニューです」とか「ここがメインの記事です」ということを明確に記述できます。

この恩恵を受けるのは、人間ではなく機械から読み取る時です。人間ならば、HTMLが表示された画面を見て、「ここがメニューだな」とか「ここがメインの内容だな」ということが目で見て分かりますが、機械には明示的に書かなければ分かりません。なので、人間ではなく機械に正しくHTMLの部分の意味を伝えるために、そのような共通のタグを指定します。

これらは、特にクロール型の検索エンジンで役に立ちます。クロール型の検索エンジンは、機械的にWebページの内容を解析して、そのWebページがどのような内容のページなのかを解析し、それを検索エンジンに反映させます。HTML5の新しいタグを使うことで、検索エンジンがクロールする際に、Webページの内容を明示的に伝えることができます。

余談

HTMLとSQLの間で様々なことをするのをWebサービスと言う

実際のところ、HTMLによるマークアップのドキュメントと、SQLなどのデータベースによるデータの集積が、Webにおける主役であると言えます。

まず、HTMLで画面を作ります。このHTMLでどのようなことをするかを、PHPやJavaScriptで記述します。そして、そこからSQLなどのデータベースとやり取りし、データベースとHTMLの間で、さまざまなことをします。

HTMLでできることは、「静的なマークアップ文書」です。そして、SQLでできることは、「頻繁に書き換えられるデータベース」です。この二つを繋げ、サーバーを用意することで、掲示板やSNS、動画サイトなどのWebサービスが作れます。

WebデザイナーとかWebプログラマがやっていることは、要するにそういうことです。HTMLとSQLの間で様々なことをするのを、Webサービスだと言っているだけなのです。

データベースやPHP（データベース）も参照のこと。

別ページ

CSS

CSSに関してはCSSを参照のこと。

JavaScript

XMLやJavaScriptに関しては、

・XML

・JavaScript

・JavaScriptフレームワーク

・jQuery

を参照のこと。

Webサーバー・ツール

Web系のサーバーやツールに関しては、

・Webの世界

・Webサーバー

・Webツール

・Webフレームワーク

・CGI

・PHP

・WordPress

・Ruby on Rails

Webブラウザ

Web系のブラウザについては、。

・Mozilla

・WebKit

・Webブラウザ

を参照のこと

簡単な説明

HTML/CSS

• HTML/CSS
  • HTML, CSS
    • セレクタ（IDとクラス）
    • display
      • inline, block, inline-block, noneなどを使い分ける
    • 絶対位置と相対位置
    • フレックスボックス
      • 画面を分割して綺麗に並べられる
    • グリッド
  • XML, JSON

セレクタ

IDには「#」を、クラスには「.」をつけて、「そのクラスの適用されている部分のタグ」だけを指定できる。

IDはJavaScriptやDOMなどから「この場所にHTMLを入れ込み表示せよ」などといった命令をするためにも使う。

セレクタの包括関係（.section h3など）

「sectionクラスのdivタグの中のh3タグ」といった指定が可能。

ページによってh3タイトルの見た目をdivで囲うだけで簡単に変えられたりする。

絶対位置と相対位置

絶対位置に表示することで、画面の特定の場所に要素を表示できる。

親要素に相対位置が設定されていれば、絶対位置でもそこからの相対的な位置になる。

リンク集

HTML

HTML/CSSなど

• HTML5 + UX : HTML5とUXの総合情報フォーラム - @IT

HTMLリファレンス

HTML/CSS

• HTMLクイックリファレンス

Webデザイン（HTML5・CSS/Sass）

以下は楽に見ることの出来るスライド（プレゼンテーション）へのリンク。

• ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７ - コムテブログ

HTML5

スライド。

• HTML5, きちんと。 - SlideShares
• 今からハジメるHTML5マークアップ - SlideShares