ＨＴＭＬとは？
HTML(HyperText Markup Language)は、ホームページを作成する時に使用される言語の一つです。
HTMLを使用して文書を作成することで、文書をわかりやすくしたり文書の中に画像や動画などを
配置することができます。
まずここではＨＴＭＬの組み方をお教えいたします。
以下のコードはＨＴＭＬの基本土台となるものです。
【HTMLコード例】
上記コードを、実際にネットで見ると↓になります。
・まだ<body>と</body>の間になにも打ち込んでいないので、真っ白です。
HTMLを使用して文書を作成することで、文書をわかりやすくしたり文書の中に画像や動画などを
配置することができます。
まずここではＨＴＭＬの組み方をお教えいたします。
以下のコードはＨＴＭＬの基本土台となるものです。
【HTMLコード例】
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> </head> <body> </body> </html>【表示例】
上記コードを、実際にネットで見ると↓になります。
・まだ<body>と</body>の間になにも打ち込んでいないので、真っ白です。
見出しを強調するには
ホームページを作るにあたって、どこが見出しでどこが本文なのか
はっきり明確にしたほうが、見やすいです。
そのためには以下のようなコードにすると早いです。
【HTMLコード例】
上記コードを、実際にネットで見ると↓になります。
・<h1>は見出しのコードです。一番大きい見出しのコードですので、１ページに１回しか使えません。
・二回目以降は<h2>というコードを使います。
はっきり明確にしたほうが、見やすいです。
そのためには以下のようなコードにすると早いです。
【HTMLコード例】
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> </head> <body> <h1>見出しについて</h1> <p> 本文がはいります。 こんな感じにわかりやすく設定しておくことで いくらか読みやすくなります。 </p> </body> </html>【表示例】
上記コードを、実際にネットで見ると↓になります。
・<h1>は見出しのコードです。一番大きい見出しのコードですので、１ページに１回しか使えません。
・二回目以降は<h2>というコードを使います。
画像やリンクについて
ＨＴＭＬを使うことで文書の任意の箇所に画像を挿入することが可能になります。
画像のデータそのものは文書の中に直接画像のデータを記述することはできません。
その為、画像を別の場所にファイルとして保存しておき、文書の中で画像を
表示したい位置に画像を読み込んで表示するように<img>タグを使って記述します。
【HTMLコード例】
*画像は、「img」フォルダの中に「photo.jpg」という名前で保存してある場合。
上記コードを、実際にネットで見ると↓になります。
・本文の下に<img>を使いましたので、しっかり画像が本文の下に挿入されてます。
次はリンクについてです。HTMLを使うことで他のWebページへの移動するための
目印であるリンクを設定することが可能となります。
文書の内の一部分のテキストや画像などに他のページへのリンクを設定しておくと、
Webページを見ている利用者がリンクが設定されたテキストなどをクリックすると設定された
他のWebページへ移動することができます。
【HTMLコード例】
*画像は、「img」フォルダの中に「photo.jpg」という名前で保存してある場合。
上記コードを、実際にネットで見ると↓になります。
・紫色の文字で「検索する」と出てきました。これがリンクしたテキストです。
以上が基本的なところになります。
こういったように様々なコードを組み合わせてホームページを構築していきます。
コード集も用意しましたので、ぜひご参考ください。
画像のデータそのものは文書の中に直接画像のデータを記述することはできません。
その為、画像を別の場所にファイルとして保存しておき、文書の中で画像を
表示したい位置に画像を読み込んで表示するように<img>タグを使って記述します。
【HTMLコード例】
*画像は、「img」フォルダの中に「photo.jpg」という名前で保存してある場合。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> </head> <body> <h1>見出しについて</h1> <p> 本文がはいります。 こんな感じにわかりやすく設定しておくことで いくらか読みやすくなります。 </p>【表示例】<img src="img/photo.jpg">
</body> </html>
上記コードを、実際にネットで見ると↓になります。
・本文の下に<img>を使いましたので、しっかり画像が本文の下に挿入されてます。
次はリンクについてです。HTMLを使うことで他のWebページへの移動するための
目印であるリンクを設定することが可能となります。
文書の内の一部分のテキストや画像などに他のページへのリンクを設定しておくと、
Webページを見ている利用者がリンクが設定されたテキストなどをクリックすると設定された
他のWebページへ移動することができます。
【HTMLコード例】
*画像は、「img」フォルダの中に「photo.jpg」という名前で保存してある場合。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> </head> <body> <h1>見出しについて</h1> <p> 本文がはいります。 こんな感じにわかりやすく設定しておくことで いくらか読みやすくなります。 <a href="http://www.google.co.jp/">検索する</a> </p>【表示例】<img src="img/photo.jpg">
</body> </html>
上記コードを、実際にネットで見ると↓になります。
・紫色の文字で「検索する」と出てきました。これがリンクしたテキストです。
以上が基本的なところになります。
こういったように様々なコードを組み合わせてホームページを構築していきます。
コード集も用意しましたので、ぜひご参考ください。