HTML入門

ウェブサイト（ホームページ）記述の秘密

ウェブサイト作りの基礎になっている、ＨＴＭＬを、ほんのちょっとだけ勉強しましょう。
このページでは、実際に自分のページを作成しなくても、HTMLの「タグ」の使い方を体験することができます。いろいろなタグを試してみましょう。
ＨＴＭＬとは？
Hyper Text Mark-up Languageの省略形で、「エイチ・ティー・エム・エル」と呼びます。
通常の文章に、タグ< >即ちかぎ括弧をつけて、文書の構造を明示的に示した文章です。また、通常のテキスト（文章）を超越した（ハイパー）なテキスト作成する事が出来るため、「ハイパーテキスト」と呼ばれています。
特に、他の文章や画像などを、自由に文章の中に埋め込むことができます。(例：ここをクリックすると、ヤフーのトップページが表示されます。)
この仕組みを「ハイパーリンク」と呼びますが、HTMLはそのハイパーリンクなども自由に書き込むことのできる言語のことなのです。
HTMLは、本来は文章の構造を示す事が目的です。現在では文字の色やサイズといった文字の装飾表現は、HTMLで実現する事は推奨されていません。
しかし、HTMLの文書をブラウザに通すと、文章の構造が文字のサイズや字下げなどで画面に表示されます。このためHTMLそのものが、文章を豊かに表現させる仕組みとして利用されている現状があります。このページも実際に用いられているHTMLの代表的なタグについて説明した物になっていますが、HTMLの本質は「文章の構造を示すための物である」という事は、心に止めておいて下さい。
１．見出しのための「タグ」
見出しのタグは、非常に良く使われるタグです。形式としては、<H1>見出し</H1> のように使われます。
タグは、必ず「直接入力＝半角英数」で記述します。
それでは、「下に表示」のボタンを押してみてください。
このボタンをクリック
↓↓

記入エリア→
結果
こちらにタグの結果が反映されます
どうですか？見出しとして大きく表示されましたか？
タグは、半角英数である必要がありますが、H2とh2は、同じ働きをします。つまり、大文字と小文字はどちらでも良いのですね。
一方、＜Ｈ３＞は機能していませんでした。これは、全角で入力されたためです。
いろいろなタグ。
それでは、先ほど記入エリアの部分にタグを使って文字を書き、ボタンを押して、様々なタグを試して見ましょう。
下の表の「右側部分」を、記入エリア部分に貼り付けるだけでもオーケーです。
このように表示するには こういうタグを書く
太字（ボールド） <B>太字（ボールド）</B>
斜体（イタリック） <I>斜体（イタリック）</I>
アンダーライン <U>アンダーライン</U>
これが200%の文字
これが100%の文字
これが50%の文字
 これが<span style="font-size:200%;">200%</span>の文字
これが<span style="font-size:100%;">100%</span>の文字
これが<span style="font-size:50%;">50%</span>の文字
現在のHTMLでは、spanタグを用いて、このように記述します。
色の名前での指定
赤い文字		 色の名前での指定
<span style="color:red;">赤い</span>文字
使える「色の名前」の一覧表は、 色見本のページ。
現在のHTMLでは、このようにspanタグを用いて表示します。
色のコード（ＲＧＢ値）での指定
緑の文字		 色のコード（ＲＧＢ値）での指定
<span style="color:#00FF00;">緑の</span>文字
R(赤),G(緑),B(青)の各色を00〜FFの２５６段階で指定します。
RGB：各色の合成色
このように書いても行は変わりません。 このように書いても
行は変わりません。
行を変えるには、
このようにする。		 行を変えるには、<br>このようにする。
線で仕切る
内容を変えるときなど		 線で仕切る<hr>内容を変えるときなど
これは少し小さい文字
だんだんちいさくなります		 これは<SMALL>少し小さい文字</SMALL>
だんだん<SMALL>ちいさく<SMALL>なり<SMALL>ます</SMALL></SMALL></SMALL>
取り消しライン（ストライクアウト） <S>取り消しライン（ストライクアウト）</S>
リスト形式(数字なし)で表示
  • 項目A
  • 項目B
 リスト形式(数字なし)で表示
<UL>
　<LI>項目A</LI>
　<LI>項目B</LI>
</UL>
リスト形式(数字あり：数字は自動的に付与)で表示
  1. 項目あ
  2. 項目い
 リスト形式(数字あり：数字は自動的に付与)で表示
<OL>
　<LI>項目あ</LI>
　<LI>項目い</LI>
</OL>
サイズ150%でグリーン <span style="color:green;font-size:150%;">サイズ150%でグリーン&</span>
中央揃え
 <DIV align="CENTER">中央揃え</DIV>
ハイパーリンクの実現。Yahoo!に飛ぶ ハイパーリンクの実現。
<A href="https://www.yahoo.co.jp/" target="_blank">Yahoo!</A>に飛ぶ
画像の埋め込み
Nori
<img src="Nori256.gif" alt="Lenna">
表の作成
表の左上 表の右上
表の左下 表の右下
 <TABLE border="1">
<TBODY>
<TR>
　　<TD>表の左上</TD><TD>表の右上</TD>
</TR>
<TR>
　　<TD>表の左下</TD><TD>表の右下</TD>
</TR>
</TBODY>
</TABLE>
これがサイズ６の文字
これがサイズ３の文字
これがサイズ１の文字		 これが<FONT size="6">サイズ６</FONT>の文字
これが<FONT size="3">サイズ３</FONT>の文字
これが<FONT size="1">サイズ１</FONT>の文字
現在のHTMLでは、FONTタグの使用は推奨されていませんが、ほとんどのブラウザでは文字の大きさが変化して表示されます。
色の名前での指定
赤い文字		 色の名前での指定
<FONT color="red">赤い</FONT>文字
現在のHTMLでは、FONTタグの仕様は推奨されていませんが、ほとんどのブラウザでは文字の色が表示されます。
ＨＴＭＬファイルの構造について
実際のＨＴＭＬファイルを知るために、サンプルとして、次のようなファイルを作成したので、その中身を見てみよう。

＞＞日大太郎の自己紹介＜＜

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<title> 日大太郎の自己紹介</title>
</head>
<body>
<!-- ここから本文です。 -->
<p>
私の名前は<span style="color:red;">日大太郎</span>です。<br>
現在<a href="https://www.nihon-u.ac.jp">日本大学</a>に通っています。
出身は、福岡県です。
</p>
<hr>
<p>
好きなものは、次の通りです。
<ul>
<li>食べ放題レストラン</li>
<li>旅行</li>
<li>ジョギング</li>
<li>パソコン</li>
</ul>
よろしくお願いします。
</p>
<hr>
<p>
私の好きなページは、<a href="https://www.mofa.go.jp/mofaj/area/index.html" target="_blank">国・地域（外務省）</a>です。
理由は「世界の国の情報を知ることが出来る」からです。
</p>
<!-- 本文はここまで。 -->
</body>
</html>

ＨＴＭＬファイルは、次のような構造を持っている。
今回学習したのは、<body>部分ということになる。

Google Classroomの課題として提出する方法。(作成方法のビデオもあります)

  1. 下の文書を右クリックで「名前をつけてリンク先を保存」します。（デスクトップが分かり易い）」
    myProfile.html
  2. 保存したファイルをメモ帳で開きます。
    （「全て表示」→「フォルダを開く」→)
    [myProfile.html]ファイルを右クリック→「プログラムから開く」→「別のプログラムを選択」→「その他のアプリ」→「メモ帳」
  3. メモ帳が見つからないときは、タスクバーの「ここに入力して検索」の部分に、notepadと入力してメモ帳を起動
    その後、ファイルメニューから、開く、でmyProfile.htmlを開いて編集する。
  4. 編集が終了したら、myProfile.htmlをクリックしてみて、自分の思ったとおりに作成できている事を確認して下さい。
    (課題の中には、忘れずに本日のキーワードを書き込むこと。)
  5. 出来ていれば、以下の手順で「あなたの課題」として提出します。

MacOSのパソコンで作成する方法
（html形式では無く、txt形式を利用します。）

MacOSのパソコンの場合、標準のテキストエディットでは、ファイルの拡張子（ファイル名のピリオドの後の部分）が.html（.htm）の場合、文字飾りが自動的に表示されてしまい、htmlの形式での編集ができません。そのため、次の手順で課題を実施して下さい。

今回の課題作成手順は、パソコンの環境によっても少しずつ違うことがあるので、問題があれば遠慮無く質問して下さい。