練習問題

• トップ

• 事前準備

• フォルダー構造作成

• ビルダーの起動

• ビルダーの初期設定

• 編集画面の設定

• Web ページ

• バージョン選択

• ページ作成

• ファイル保存

• ブラウザ確認

• HTML の基礎

• 文字の入力

• 見出しタグ

• 練習１ index.html

• 段落タグ

• 水平線の挿入

• 練習２ dog.html

• 強調表示

• イメージの配置

• リストの挿入

• リストの入れ子

• 住所・著作情報

• 区画

• リンクの挿入

• ページ内リンク

• トップページ

• CSS の基礎

• スタイルの指定

• 文字フォント指定

• 文字色の指定

• 文字位置指定

• 背景画像

• 画像を回り込む

• ボーダー指定

• 間隔・余白指定

• 中央揃え

• リンクの修飾

• 対象限定スタイル

• トップページ装飾

• 外部 CSS

• レイアウト

• １カラム

• ２カラム

• 参考資料

• 参加者作品

• 問い合わせ

～見出し～

基本的な HTML タグについての練習です。

練習する HTML 要素：　見出し

• hx 要素：
  • <hx> ［見出し項目］ </hx> 　　 x は 1 ～ 6　のいずれか
• 見出しには 6 種類あり、［見出し1］が最上位レベル、［見出し6］が最下位レベルになります。一般的に、文字は太字で、上位レベルの方が大きく表示されます。

見出しタグの設定方法には、以下の二つのケースがあります。

ケース１：　あらかじめ入力されている段落を見出しに変更する

➊ 新規ページ作成で、下図のように文字段落を入力する。

• 

➋ 入力したページは heading.html というファイル名で html フォルダーに保存する。

➌ ページタイトルは 「見出しタグ」 とする。

➍ 下図のように各段落に見出しの指定をする。

• 
•  
• 

• ［HTML ソース］ 画面：
• 

➎ 上書き保存する。

ケース２：　先に見出しの設定を行い、その後文字列を入力する

➊ 新規ページ作成を行います。

➋ 下図のように、まず見出しの設定を行い、そのあと文字列を入力します。

• 
•  
• 

➌ ページタイトルを 「見出しを設定する」 とし、ファイル名を heading2.html として html フォルダー内に保存する。

⇒ 練習１ index.htmlへ進む