File tree Expand file tree Collapse file tree 4 files changed +53
-0
lines changed
docs/6-exercise/3-javascript Expand file tree Collapse file tree 4 files changed +53
-0
lines changed Original file line number Diff line number Diff line change 1+ <!DOCTYPE html>
2+ < html lang ="ja ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge ">
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7+ < title > SOS Dan web site</ title >
8+ </ head >
9+ < body >
10+
11+
12+ </ body >
13+ </ html >
Original file line number Diff line number Diff line change 1+ # 課題
2+ 簡単な[ SOS団のWebサイト] ( http://haruhi.tv ) を作ってみましょう。いきなり飛躍した印象を受けるかもしれませんが、ひよっこエンジニアのキョンでも、団長ハルヒに急かされてからというものhtmlタグを必死に並べ、なんとかSOS団を外部に知らしめることに成功したのです...と長話はさておき、htmlタグを皆さんもならべてみましょう。
3+ ![ image.jpg] ( ./image.png )
4+ 現在の知識でも作れるよう少し簡単にしました。こんなページを作ってみてください。
5+
6+
7+
8+
9+ __ ヒント__
10+
11+
12+ - 写真を出すには` img ` タグを使います。` src ` 属性に写真のURLを指定しましょう。
13+
14+ - [ SOS団のWebサイト] ( http://haruhi.tv ) を開き、ダウンロードしたい画像にカーソルを当てて右クリックすると、写真をダウンロードすることができます。
15+
16+ - 何らかの理由で画像読み込みに失敗した時、何の写真を出したかったか説明するために、画像には「代替テキスト」を設定することが多いです。` img ` タグでは` alt ` 属性で代替テキストを指定できます。余力のある人は実装してみましょう。実装したら、写真ファイルを削除して挙動を確認してみましょう。
17+
18+ - 文章や写真がなんとなく真ん中で一列にきれいに揃えられていますね。実は` table ` タグで表を作っています。表といえど境界線がないので気づきにくかったかもしれません。` table ` タグに` tr ` ` th ` ` td ` タグをネストさせてきれいな表を作りましょう。全てのtdタグのalign属性にある値を入れると...なんということでしょう。真ん中が縦で揃えられた表が完成します。
19+
20+ - [ こちら] ( http://www.htmq.com/ ) でHTMLタグの使い方が簡潔に示されています。
Original file line number Diff line number Diff line change 1+ # 課題
2+ 簡単な[ SOS団のWebサイト] ( http://haruhi.tv ) を作ってみましょう。いきなり飛躍した印象を受けるかもしれませんが、ひよっこエンジニアのキョンでも、団長ハルヒに急かされてからというものhtmlタグを必死に並べ、なんとかSOS団を外部に知らしめることに成功したのです...と長話はさておき、htmlタグを皆さんもならべてみましょう。
3+ ![ image.jpg] ( ./image.png )
4+ 現在の知識でも作れるよう少し簡単にしました。こんなページを作ってみてください。
5+
6+
7+
8+
9+ __ ヒント__
10+
11+
12+ - 写真を出すには` img ` タグを使います。` src ` 属性に写真のURLを指定しましょう。
13+
14+ - [ SOS団のWebサイト] ( http://haruhi.tv ) を開き、ダウンロードしたい画像にカーソルを当てて右クリックすると、写真をダウンロードすることができます。
15+
16+ - 何らかの理由で画像読み込みに失敗した時、何の写真を出したかったか説明するために、画像には「代替テキスト」を設定することが多いです。` img ` タグでは` alt ` 属性で代替テキストを指定できます。余力のある人は実装してみましょう。実装したら、写真ファイルを削除して挙動を確認してみましょう。
17+
18+ - 文章や写真がなんとなく真ん中で一列にきれいに揃えられていますね。実は` table ` タグで表を作っています。表といえど境界線がないので気づきにくかったかもしれません。` table ` タグに` tr ` ` th ` ` td ` タグをネストさせてきれいな表を作りましょう。全てのtdタグのalign属性にある値を入れると...なんということでしょう。真ん中が縦で揃えられた表が完成します。
19+
20+ - [ こちら] ( http://www.htmq.com/ ) でHTMLタグの使い方が簡潔に示されています。
You can’t perform that action at this time.
0 commit comments