テキストエディタを使用して、HTMLファイルの作成方法、見出し・段落タグについて解説しています。
Dreamweaver等のホームページ作成ソフトを使うことで効率的にWebサイトを作成することができますが、HTMＬタグの意味を知り、ソースコードを読む力をつけるのもとっても大切です。
是非、挑戦してみてください！
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>
hの後ろに書かれている数字が小さいほど大きな見出しとなります。
見出しタグはHTML文書の構造を決める大事なタグです。
<h1>から順番に使っていき、ページ内の見だしレベルにあったタグを選ぶようにします。
<h1>見出しレベル1です。</h1>
<h2>見出しレベル2です。</h2>
<h3>見出しレベル3です。</h3>
<h4>見出しレベル4です。</h4>
<h5>見出しレベル5です。</h5>
<h6>見出しレベル6です。</h6>
段落の中には、テキストだけでなく、画像やリンクなどのタグを使用することができます。
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
TwitterでWebcreatorsTipsをフォローしよう！
Follow @WebcreatorsTips
当サイトは、Webデザイナー、Webスクール講師によるWebデザイン入門講座です。HTML・CSSの超基本からWebデザインのためのPhotoshop・Illustrator講座まで動画でわかりやすく解説しています。
こちらで「フリーランスWebデザイナーになる方法」をテーマに「フリーランスWebデザイナーズマガジン」というメルマガを配信しております。
フクモトが未経験から「フリーランスWebデザイナー」になるまでのスキルアップ方法や考え方、安定的に収入を得られるまでの具体的な方法をお伝えし、あなたの働き方、収入にプラスになるような内容を配信してまいります。
ぜひ、ご登録ください。
メルマガに登録してみる
