練習問題１
HTMLを練習してみましょう！
＜ベースファイルを修正して、以下の装飾を実装してください＞
★修正内容
- 「ダルメシアン」部分を<h1>タグで囲む
- 「模様が特徴の犬、他の写真もぜひご覧ください。」部分を<p>タグで囲む
- 文書中の「他の写真」に https://unsplash.com/@webcreatorbox 宛てにリンクを貼る
- 「images」フォルダーにある「dog.jpg」という画像を表示する
- 画像のalt属性は「ダルメシアンの写真」とする
★ベースファイル（ビジュアルコード）
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ベースファイル：ダルメシアン</title>
<meta name=”description” content=”かわいいダルメシアンの子犬”>
<link rel=”stylesheet” href=”css/style.css”>
</head>
<body>
ダルメシアン
模様が特徴の犬。他の写真もぜひご覧ください。
</body>
</html>
④の画像を表示するには、 <img src=”images/dog.jpg” alt=”ダルメシアンの写真”>
と入れます。
入れる場所は ダルメシアン、模様が特徴の、のあとに追加します。
</body>の前です。
修正前は下記のようになっています。（web画面）
＜修正後の画面＞
テンプレートホームページを使ってパソコン楽しみ隊のホームページを作る
1,<Index.html> ホーム
5行目<title>HPWG2025演習</title>
9行目に<style></style>を入れる・・・※別紙参照
<body>
<header>の所logoのマークをパソ隊のロゴにする。下記
<h1 id=”logo”><a href=”index.html”><img src=”images/pasotairogo.JPG” alt=”pasotai LOGO”></a></h1>
</header>
<nav>の所で<li>サービス紹介</li>の所を「活動紹介」とする。
<section>
NPO法人パソコン楽しみ隊へようこそ！
設立趣旨
地域社会において、市民の誰もがICT社会の便利さ楽しさなどを自由に享受し毎日の生活を楽しく活気あるものにすることを願っています。しかしながらパソコン・インターネットを上手く使えない人も多く情報格差がひろがり、高齢者や障害者についてはICT社会の中で取り残されることが危惧されます。 本会はパソコンに関する知識・技能を地域社会に提供し、情報化社会を共有できる便利で楽しい地域構築に寄与することをめざします。 約16年にわたり任意団体として活動して来ましたが、ますますの情報化社会に対応出来るよう団体としてのレベルアップを目指し、組織づくりと社会的信用アップをはかる為、特定非営利活動法人の設立を決意しました。
私たちはNPO法人パソコン楽しみ隊で活動しています。
活動内容 ソースを入れ替える。
| <h3><a href=”menu.html“>活動内容</a></h3> |
| <div class=”container”> |
| <div class=”item”> |
| <img src=”images/kouza2.jpg” alt=”市民ICT講座”> |
| <div class=”caption”>①市民ICT講座</div> |
| </div> |
| <div class=”item”> |
| <img src=”images/kouza3.jpg” alt=”マンツーマン相談”> |
| <div class=”caption”>②マンツーマン相談</div> |
| </div> |
| <div class=”item”> |
| <img src=”images/kouza4.jpg” alt=”お得コーナー”> |
| <div class=”caption”>③お得コーナー</div> |
| </div> |
| <div class=”item”> |
| <img src=”images/pa04.jpg” alt=”教育支援”> |
| <div class=”caption”>④中学校パソコン教育支援</div> |
| </div> |
| <div class=”item”> |
| <img src=”images/pa06.jpg” alt=”ちょいネットカフェ”> |
| <div class=”caption”>⑤ちょいネットカフェ</div> |
| </div> |
| <div class=”item”> |
| <img src=”images/10.jpg” alt=”ホームページ制作支援”> |
| <div class=”caption”>⑥ホームページ制作支援</div> |
| </div> |
| <div class=”item”> |
| <img src=”images/09.jpg” alt=”会員研修会”> |
| <div class=”caption”>⑦会員研修会</div> |
| </div> |
| <div class=”item”> |
| <img src=”images/pa07.png” alt=”イベント”> |
| <div class=”caption”>⑧イベント</div> |
| </div> |
お知らせ
2025/07/24
入会について パソコンでNPO活動をしてみたい方の入会を随時受け付けています。
2025/07/24
2025/07/24ホームページ制作
最新ウェブデザイのホームページ制作ならパソコン楽しみ隊 へ !!
2,<greeting.html>ご挨拶
ご挨拶 目標･方針 法人情報 法人情報 ICT社会の便利さ、楽しさなどを自由に・・・ パソコン楽しみ隊は ICTの利活用による社会参加･地域貢献をめざすNPO法人です。 地域社会において､市民の誰もが、ICT社会の便利さ､楽しさなどを自由に享受し､毎日の生活を楽しく､活気あるものにすることを願って､私たちの持っているノウハウ･技術を提供し､ICT社会普及の促進を目標としております。 高齢者等については､機会が少なく､ICT社会の中で取り残されており､社会との接点を持ち続けるいう観点からも､私たちとしては一番力を注いでいます。 また､子供たちについても､これからのICT社会を考える時､正しく使いこなすことが重要と考え重点的に支援しています。
3,<Menu.html>活動紹介
ICT講座
親子でロボットカーを動かそう！
教育支援
中学校パソコン教育現場への支援に力を入れています
イベント
第29回あびこ子どもまつり 2024年
会員研修会
パソコンのスキルアップと会員相互の交流を通じ、ICT講座の講師やサポーターの育成を図ります。
ホームページ制作受注
ホームページを開設しよう!!HP(ウェブサイト)は団体の顔､最初の”印象”を伝えます。
開発事業
脳活パソコン､スマホ連続講座、マンツーマン相談訪問
4,＜access.html＞アクセス 地図の変更他
※地図 けやきプラザ を入れる
- Google Map を開く
- 画面左上の入力フォームに住所入力
- 検索
- 共有のボタンをクリック
- 地図を埋め込むをくりっく
- HTMLをコピーをクリック
- ソースコードに貼り付ける
CSS style.css に一部加える #container の下に、.item を加える
- .item {
- background-color: rgb(173, 225, 234);
- color: #090000e3;
- padding: 10px;
- }
