テキストエディタを使用して、HTMLファイルの作成方法、見出し・段落タグについて解説しています。
Dreamweaver等のホームページ作成ソフトを使うことで効率的にWebサイトを作成することができますが、HTMＬタグの意味を知り、ソースコードを読む力をつけるのもとっても大切です。
是非、挑戦してみてください！
覚える事
- テキストエディタを開いてHTMLタグの記述をする。
- HTML形式で保存する。
- 保存したHTMLファイルをブラウザで開いて確認する。
ソース
HTMLファイルのひな形
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html>
動画での解説
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLの練習です！</title> </head> <body> <h1>ビストロ・ドゥ・リヨン</h1> <h2>本格フレンチの味を気軽に楽しめる ビストロ・ドゥ・リヨン</h2> <p>フレンチをもっと楽しく！もっと気軽がコンセプト</p> <p>フランス料理の伝統的な定番料理を、緑が見える店内でゆっくりとお楽しみください。</p> <h3>パーティープランのご案内</h3> <p>記念日や季節のイベント、同窓会など各種パーティーに対応</p> <p>和やかな雰囲気で、ステキな時間を。</p> </body> </html>
HTMLタグ解説
- <!DOCTYPE html>
- HTMLのバージョンを宣言する。
- <html>
- <html>は、文書がHTML/XHTMLで書かれていることを宣言するもの。
HTML文書の最初と最後に記述。
この間に書かれた内容がhtml要素となります。 - <head>
- ページの情報を書き込む場所。ページタイトルやmeta情報、文字コードなど文書全体に関する情報を指定してブラウザや検索ロボットに知らせるための記述です。
ここに記述された部分は画面には、基本的に<title>～</title>タグ内のテキスト以外はブラウザには表示されません。 - <title>
- 文書の内容を表すタイトルを記述します。
- <body>
- bodyにはさまれた部分がブラウザで表示されます。
- <h1>～<h6>
- 見出しのレベルに合わせて、<h1>から<h6>までのタグを使用します。
hの後ろに書かれている数字が小さいほど大きな見出しとなります。
見出しタグはHTML文書の構造を決める大事なタグです。
<h1>から順番に使っていき、ページ内の見だしレベルにあったタグを選ぶようにします。
<h1>見出しレベル1です。</h1>
<h2>見出しレベル2です。</h2>
<h3>見出しレベル3です。</h3>
<h4>見出しレベル4です。</h4>
<h5>見出しレベル5です。</h5>
<h6>見出しレベル6です。</h6> - <p>
- 本文の段落は<p>～</p>で挟んで区切ります。
段落の中には、テキストだけでなく、画像やリンクなどのタグを使用することができます。
補足・ポイント
保存するときの注意点
- Webページ用のファイルはすべて同じフォルダにまとめて保存します。
- 文字コードの指定を確認する。
サクラエディタの場合は、設定→タイプ別設定→支援タブ→デフォルト utf-8と設定しておくと次回から自動的にUTF-8で保存されるようになります。 - ファイル名は、必ず半角英数字で名前をつけて、拡張子を「.html」として保存します。
フリーランスWebデザイナー・Webスクール講師。 子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。 Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール＆コミュニティ】を運営。 フリーランスでWebデザイナーを目指す方々のサポートに注力している。
