第2日目
HTMLファイルの作成
前回「Web-Sample」フォルダーに保存した「report.txt」を開き、名前を付けて保存から同じフォルダーにファイル名「report.html」として保存した。
以下テキストに従い、宣言文、html、head、body、h1、p各要素を追記して各段階ごとにブラウザーで確認した。
リンクを張ってみる
上記report.htmlの「ユニバーサルスタジオ」の部分にリンクを設定した。
リンクはリンク元部分をaタグで括り、リンク先をhref=""の「""」部分に指定します。
<a href="">ユニバーサルスタジオ</a>
ここではユニバーサルスタジオのホームページにリンクを貼ります。
- 新しいブラウザーを開きユニバーサルスタジオ検索します。
- ユニバーサルスタジオのホームページを開きます。
- urlをコピーします。
- 「""」の中に貼り付けます。
<a href="https://www.usj.co.jp/">ユニバーサルスタジオ</a>
ブラウザーで確認します。
注：既に開いているアプリを別ウインドウで開く時はタスクバーのアイコンをshiftキーを押しながらクリックします。又はタスクバーのアイコンを右クリックして当該アプリを選択します。
画像を表示してみる
上記report.htmlの文末にp要素を加え、画像を挿入した。
画像はimgタグで設定し、 src=""の「””」の中に画像のURIを指定します。altの「""」の中に代替えテキストを指定します。
<p><img src="" alt="" ></p>
- 挿入する画像を用意します。
- ここではユニバーサルスタジオのサイトから写真をコピーしました。
- 目的の写真が表示された画面で［スタート］ボタンをクリックして［か］のカテゴリーの中にある［切り取り＆スケッチ］起動します。
- 目的の写真部分をドラッグして選択します。
- ファイル名を指定して保存します。
ここではファイル名「usj.png」として「WebSample」ホルダーに保存しました。
<p><img src="usj.png" alt="ユニバーサルスタジオ" ></p>
report.htmを上書き保存して、ブラウザーで確認します。
スタイルシート（css）を記述する
スタイルシートはstyleタグに書く方法・インラインに書く方法・外部ファイルに書く方法がありますが、ここでは外部ファイルに書く方法を実習した。
- report.htmlのhead要素内に外部で作ったcssファイルを呼び込むlink文を記載します。
<head> <link rel="stylesheet" href="style.css"> </head>
「style.css」は同じフォルダーに保存したcssファイルのファイル名 - report.htmlを上書き保存します。
- 新しいメモ帳を開き下記スタイルを記述します。
h1{ font-size:20px; }
(大見出しのフォントを20pに指定) - 「Web-Sample」フォルダーにファイル名「style.css」として保存します。
- ブラウザーで開いてある「report.html」を更新して大見出しの文字サイズが小さくなったことを確認します。
- style.cssに大見出しの文字色と段落の幅を追記して下記のとおりとします。
h1{
font-size:20px;
color:#ff0000;
}
p{
width:720px;
} - report.html」を更新して結果を確認します。
- 新しいメモ帳を開き、テキスト「スタイルシートを共有する」の下方の囲み記事をコピーして貼り付けます。
- 「Web-Sample」フォルダーにファイル名「report2.html」として保存します。
- ブラウザーで「report2.html」を開いて、大見出しと段落のスタイルが「report.html」と同じになっていることを確認します。