はびきのうぇぶ HTMLソース勉強会の問題集のページです。

2024/02/01

ページのソースをコピーして sakura(他のテキストエディタでも構いません)に貼り付け、
拡張子を「.html」、文字コードセットを「UTF-8」で保存してから、ソースに回答してください。


問題①

例えば <title> の場合、
<title>はびきのうぇぶ HTML問題集</title> と書き、
ホームページビルダーの「ページ編集」に貼り付け、「HTMLソース」を見ると
<p>&lt;title&gt;はびきのうぇぶ HTML問題集&lt;/title&gt;</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>
次のURLにある私の画像を右配置で表示してください。
2021年 HP作成総まとめ( https://joywave.net/habikino/2021matome/top.html )
階層(1)
表示したい写真がひとつ下の階層にあるとき、ソースはどう書きますか。
階層(2)
リンクしたいページがひとつ下の階層にあるとき、ソースはどう書きますか。
階層(3)
表示したい写真がひとつ上の階層にあるとき、ソースはどう書きますか。
階層(4)
リンクしたいページがひとつ上の階層にあるとき、ソースはどう書きますか。
インラインフレーム(iframe)
インラインフレームを使って「はびきのうぇぶのサイト」を埋め込んでください。
テーブルを作る(1)
ここに2×2のテーブルで上の段は横に結合した例を書いてください。枠線( border )は<td>だけに指定してください。
テーブルを作る(2)
ここに2×2のテーブルで左の段は縦に結合した例を書いてください。枠線は<table>だけに指定してください。
テーブルを作る(3)
「テーブルを作る(1)」で作ったテーブルを右寄せしてください。
水平線を書く
ここに赤色で太さ4px、長さ600pxの水平線を書いてください。右寄せ、左寄せできますか?
ページ内リンク
ここにこのページにある<img>へ行く(<img>が先頭になる)リンクを書いてください。
リンク(1)
ここに「はびきのうぇぶ」へのリンクを書いてください。
リンク(2)
ここに別ページにリンク先を表示する「はびきのうぇぶ」へのリンクを書いてください。
著作権表示
ここに著作権表示(一番最後に書く表示です)を書いてください。