はびきのうぇぶ HTMLソース勉強会の問題集のページです。
2024/02/01
ページのソースをコピーして sakura(他のテキストエディタでも構いません)に貼り付け、
拡張子を「.html」、文字コードセットを「UTF-8」で保存してから、ソースに回答してください。
問題①
例えば <title> の場合、
<title>はびきのうぇぶ HTML問題集</title> と書き、
ホームページビルダーの「ページ編集」に貼り付け、「HTMLソース」を見ると
<p><title>はびきのうぇぶ HTML問題集</title></p> となっているので、
この<p>の中身をコピーしてこのページのソースに貼り付けてください。
よく使うタグ・属性の使用例を書いてください。
<a>
ここに書いてください。
属性 alt
ここに書いてください。
<br>
ここに書いてください。
属性 colspan
ここに書いてください。
<div>
ここに書いてください。
<dl>
関連タグも含めて書いてください。
<h2>
ここに書いてください。
<img>
ここに書いてください。
<ol>
ここに書いてください。
<p>
ここに書いてください。
属性 padding
ここに書いてください。
<span>
ここに書いてください。
属性 src
ここに書いてください。
<table>
関連タグも含めて、簡単なテーブルを作ってください。
<title>
ここに書いてください。
<ul>
ここに書いてください。
問題②
例えば 中央配置(センタリング) の場合、
ソースには
<p class="naka">この文章は中央に配置されます</p>
と書き、
スタイルシートには
.naka {text-align:center;}
と書きます。
ソース
ここに基本のソース(タグ)を書いてください。HTML4.01 形式でも HTML Living Standard 形式でも構いません。
新しい形式で書くと、HTML には、
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
CSS の先頭には、
@charset "utf-8"; (HTMLに書いた charset に合わせる)
と必ず書きましょう。
画像の表示
画像が表示されない場合は、ソースかその他の何かが間違っています。
調べて修正しますが、どんなミスが考えられるか教えてください。
<img>
階層(1)
表示したい写真がひとつ下の階層にあるとき、ソースはどう書きますか。
階層(2)
リンクしたいページがひとつ下の階層にあるとき、ソースはどう書きますか。
階層(3)
表示したい写真がひとつ上の階層にあるとき、ソースはどう書きますか。
階層(4)
リンクしたいページがひとつ上の階層にあるとき、ソースはどう書きますか。
インラインフレーム(iframe)
インラインフレームを使って「はびきのうぇぶのサイト」を埋め込んでください。
テーブルを作る(1)
ここに2×2のテーブルで上の段は横に結合した例を書いてください。枠線( border )は<td>だけに指定してください。
テーブルを作る(2)
ここに2×2のテーブルで左の段は縦に結合した例を書いてください。枠線は<table>だけに指定してください。
テーブルを作る(3)
「テーブルを作る(1)」で作ったテーブルを右寄せしてください。
水平線を書く
ここに赤色で太さ4px、長さ600pxの水平線を書いてください。右寄せ、左寄せできますか?
ページ内リンク
ここにこのページにある<img>へ行く(<img>が先頭になる)リンクを書いてください。
リンク(1)
ここに「はびきのうぇぶ」へのリンクを書いてください。
リンク(2)
ここに別ページにリンク先を表示する「はびきのうぇぶ」へのリンクを書いてください。
著作権表示
ここに著作権表示(一番最後に書く表示です)を書いてください。