Skip to content

Commit 56221e9

Browse files
chvmvdchvmvd
authored
Merge pull request #257 from ut-code/develop
HTML の課題をマージ
2 parents 34cd890 + f3a483c commit 56221e9

File tree

6 files changed

+116
-68
lines changed

6 files changed

+116
-68
lines changed

‎docs/6-exercise/1-basis-of-web/_samples/html/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>ut.code(); のウェブサイト</title>
6+
</head>
7+
<body>
8+
<h1>ut.code();</h1>
9+
<img src="logo.svg" alt="ut.code(); のロゴ" />
10+
<h2>ut.code(); とは</h2>
11+
<p>
12+
ut.code(); は、2019
13+
年設立の東京大学のソフトウェアエンジニアリングコミュニティです。
14+
</p>
15+
<h2>主な活動</h2>
16+
<ul>
17+
<li>
18+
学習
19+
<ul>
20+
<li>学習カリキュラムの作成</li>
21+
<li>自主ゼミの開講</li>
22+
<li>「はじめてのプログラミング教室」の出展</li>
23+
</ul>
24+
</li>
25+
<li>
26+
交流
27+
<ul>
28+
<li>作業会の開催</li>
29+
<li>五月祭・駒場祭への出展</li>
30+
<li>合宿の開催</li>
31+
</ul>
32+
</li>
33+
<li>
34+
開発
35+
<ul>
36+
<li>プロジェクトの開発</li>
37+
<li>ブレインストーミングの実施</li>
38+
<li>定例ミーティングの開催</li>
39+
</ul>
40+
</li>
41+
</ul>
42+
</body>
43+
</html>

‎docs/6-exercise/1-basis-of-web/_samples/html/logo.svg‎

Lines changed: 34 additions & 0 deletions
Loading

‎docs/6-exercise/1-basis-of-web/_samples/sos-dan/index.html‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎docs/6-exercise/1-basis-of-web/image.png‎

-418 KB
Binary file not shown.

‎docs/6-exercise/1-basis-of-web/index.md‎

Lines changed: 39 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,11 @@ import ViewSource from "@site/src/components/ViewSource";
1010

1111
---
1212

13-
## 1. SOS 団の Web サイト
13+
## 1. HTML
1414

15-
簡単な[SOS 団の Web サイト](http://haruhi.tv)を作ってみましょう。いきなり飛躍した印象を受けるかもしれませんが、ひよっこエンジニアのキョンでも、団長ハルヒに急かされてからというもの HTML タグを必死に並べ、なんとか SOS 団を外部に知らしめることに成功したのです...と長話はさておき、HTML タグを皆さんもならべてみましょう。
16-
![image.jpg](./image.png)
17-
現在の知識でも作れるよう少し簡単にしました。こんなページを作ってみてください。
15+
HTML を用いて次のようなウェブサイトを作ってみましょう。ut.code(); のロゴは[ここ](./_samples/html/logo.svg)からダウンロードして使用してください。
1816

19-
### ヒント
20-
21-
- 写真を出すには `img` タグを使います。`src` 属性に写真の URL を指定しましょう。
22-
23-
- [SOS 団の Web サイト](http://haruhi.tv)を開き、ダウンロードしたい画像にカーソルを当てて右クリックすると、写真をダウンロードすることができます。
24-
25-
- 何らかの理由で画像読み込みに失敗した時、何の写真を出したかったか説明するために、画像には「代替テキスト」を設定することが多いです。`img` タグでは `alt` 属性で代替テキストを指定できます。余力のある人は実装してみましょう。実装したら、写真ファイルを削除して挙動を確認してみましょう。
26-
27-
- 文章や写真がなんとなく真ん中で一列にきれいに揃えられていますね。実は `table` タグで表を作っています。表といえど境界線がないので気づきにくかったかもしれません。`table` タグに `tr`、`th`、`td`タグをネストさせてきれいな表を作りましょう。全ての `td` タグの `align` 属性にある値を入れると...なんということでしょう。真ん中が縦で揃えられた表が完成します。
28-
29-
- [こちら](https://developer.mozilla.org/ja/docs/Web/HTML/Element)で HTML タグの使い方が簡潔に示されています。
17+
![ut.code(); のウェブサイト](website.png)
3018

3119
### 解答例
3220

@@ -37,40 +25,51 @@ import ViewSource from "@site/src/components/ViewSource";
3725
<html lang="ja">
3826
<head>
3927
<meta charset="UTF-8" />
40-
<title>SOS dan web site</title>
28+
<title>ut.code(); のウェブサイト</title>
4129
</head>
4230
<body>
43-
<table>
44-
<tr>
45-
<th align="center"><h1>SOS団のサイトへようこそ！</h1></th>
46-
</tr>
47-
<tr>
48-
<td align="center"><img src="./zozlogo.jpg" alt="SOS団ロゴ" /></td>
49-
</tr>
50-
<tr>
51-
<td align="center"><h4>入り口</h4></td>
52-
</tr>
53-
<tr>
54-
<td align="center">
55-
メールはこちらから→<img src="./post_no.jpg" alt="ポスト" />
56-
</td>
57-
</tr>
58-
<tr>
59-
<td align="center"><h4>活動内容</h4></td>
60-
</tr>
61-
</table>
31+
<h1>ut.code();</h1>
32+
<img src="logo.svg" alt="ut.code(); のロゴ" />
33+
<h2>ut.code(); とは</h2>
34+
<p>
35+
ut.code(); は、2019
36+
年設立の東京大学のソフトウェアエンジニアリングコミュニティです。
37+
</p>
38+
<h2>主な活動</h2>
39+
<ul>
40+
<li>
41+
学習
42+
<ul>
43+
<li>学習カリキュラムの作成</li>
44+
<li>自主ゼミの開講</li>
45+
<li>「はじめてのプログラミング教室」の出展</li>
46+
</ul>
47+
</li>
48+
<li>
49+
交流
50+
<ul>
51+
<li>作業会の開催</li>
52+
<li>五月祭・駒場祭への出展</li>
53+
<li>合宿の開催</li>
54+
</ul>
55+
</li>
56+
<li>
57+
開発
58+
<ul>
59+
<li>プロジェクトの開発</li>
60+
<li>ブレインストーミングの実施</li>
61+
<li>定例ミーティングの開催</li>
62+
</ul>
63+
</li>
64+
</ul>
6265
</body>
6366
</html>
6467
```
6568

66-
`jpg` ファイルは HTML ファイルと同じ階層に入れているので、`img` タグの `src` 属性は `./ファイル名` となっています。
67-
68-
<ViewSource url={import.meta.url} path="_samples/sos-dan" />
69+
<ViewSource url={import.meta.url} path="_samples/html" />
6970

7071
</Answer>
7172

72-
---
73-
7473
## 2. 名前の長さ
7574

7675
太郎くんは、名前を 4 文字以上 10 文字以下で入力して登録できるウェブサイトを作ろうとしています。そこで、名前の文字数を変数に入れておき、

‎docs/6-exercise/1-basis-of-web/website.png‎

172 KB
Loading

0 commit comments

Comments
 (0)