HTMLについて

HTML ( エイチティーエムエル)とは、
ページを構成するための「マークアップ言語」です。

簡単にいうと、HPの文章に意味や役割を持たせる言語です。

段落や見出しなどを明確に分けて、文書の意味を正確に分類、整理して記述します。

今見ているこのホームページもHTMLで書かれています。

HTMLの歴史

HTMLはインターネットを使い世界中の論文をどこでも閲覧することはできないか？という目的で作成されました。

1983年にティム・バーナーズ=リーを中心にバージョン1.0が誕生。

バージョンアップを重ね、機能が追加され、デザインに関する記述までHTMLで行ってきました。

CSSの誕生

構造からデザインまで書いてしまうとHTMLが長くなり複雑になります。

そのためデザイン部分まで抜き出したCSS(シーエスエス)が誕生しました。

文書の構造はHTMLでページの見栄えはCSSの役割が明確に分けられたのです。

HTMLの記述方法

HTMLは文書が書けるソフトとブラウザがあれば作れます。

Windowsは「メモ帳」 Macでは「テキストエディト」というソフトが入っています。

おすすめのテキストエディタ

共通している機能は「コードヒント」と呼ばれる関連する情報が表示されることです。
間違った記述があれば指摘もしてくれる機能でミスが気づきやすくなります。
web開発に特化した自分の使いやすいエディタを利用しましょう。

Atom

Sublime Text

Mi(Macのみ)

TraPad(Windowsのみ)

ブラウザ

ブラウザとはHPを見るためのソフトです。

Windowsは「internet Explorer」というブラウザが入っていますし Macでは「Safari」というブラウザが入っています。これだけでも十分ですが、他によく使われているブラウザをご紹介します。

Google Chrome

Firefox

index.htmlの作成

1. 各OS標準のテキストエディタを起動する

まずはテキストエディタを開きましょう。

2. コードの入力

ひらがな以外のタグは必ず半角半英数字で入力します。

3. ファイルの保存

記述ができたら名前をつけて保存します。

その際、ファイル名の末尾に「.html」をつけます。

例：index.html

4. ファイルの表示

デスクトップに保存したファイルをWクリックすると勝手にファイルが開きます。

画面に何も表示されていない時は、どこかが間違っているので、もう一度確認をしましょう。

5. ファイルの編集

ファイルを編集するときはWクリックではなく、テキストエディタの画面のなかにファイルをドラック＆ドロップすればひらけます。

6.HTMLの解説

HTMLでは基本的にタグと呼ばれる文字列で何かを挟みます。

<◯◯> 〜　◯◯>

先頭の<◯◯>は開始タグ

末尾の◯◯>は終了タグといい「/」スラッシュがつきます。（例外もあります）

html タグ

HTMLファイルでは必ず最初と最後をで囲みます。

これはからまでの間がHTML文であることを宣言しています。

htmlタグの内部にはheadタグとbodyタグを入れます。

head タグ

ページ上に表示されない情報（タイトルや文字コードなど）を入力するタグ。body タグの前に挿入しましょう。

body タグ

画面に表示する文章などの本文部分を入力するタグ。

headタグのあとに挿入しましょう。

title タグ

ページタイトルを入力するタグ。このタグ内入力した内容がブラウザーの

タイトルバーに表示されます。

h1 タグ

見出し入力をするタグ。h1~h6まで6段階のタグがあります。数字が小さいほどじ重要度があり大見出しになります。h1を大見出し、h2を中見出し、h3を小見出しと、段階的に使用します。

p タグ

"paragraph"の略で「段落」を意味するタグ。改行するための使いかたではないので注意しましょう。