HTMLについて
HTML ( エイチティーエムエル)とは、
ページを構成するための「マークアップ言語」です。
簡単にいうと、HPの文章に意味や役割を持たせる言語です。
段落や見出しなどを明確に分けて、文書の意味を正確に分類、整理して記述します。
今見ているこのホームページもHTMLで書かれています。
HTMLの歴史
HTMLはインターネットを使い世界中の論文をどこでも閲覧することはできないか?という目的で作成されました。
1983年にティム・バーナーズ=リーを中心にバージョン1.0が誕生。
バージョンアップを重ね、機能が追加され、デザインに関する記述までHTMLで行ってきました。
##CSSの誕生
構造からデザインまで書いてしまうとHTMLが長くなり複雑になります。
そのためデザイン部分まで抜き出したCSS(シーエスエス)が誕生しました。
文書の構造はHTMLでページの見栄えはCSSの役割が明確に分けられたのです。
##HTMLの記述方法
HTMLは文書が書けるソフト
とブラウザ
があれば作れます。
Windowsは「メモ帳」 Macでは「テキストエディト」というソフトが入っています。
おすすめのテキストエディタ
共通している機能は「コードヒント」と呼ばれる関連する情報が表示されることです。
間違った記述があれば指摘もしてくれる機能でミスが気づきやすくなります。
web開発に特化した自分の使いやすいエディタを利用しましょう。
ブラウザ
ブラウザとはHPを見るためのソフトです。
Windowsは「internet Explorer」というブラウザが入っていますし Macでは「Safari」というブラウザが入っています。これだけでも十分ですが、他によく使われているブラウザをご紹介します。
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"の略で「段落」を意味するタグ。改行するための使いかたではないので注意しましょう。