Skip to content

Commit 053bb75

Browse files
chvmvdchvmvd
authored
Merge pull request #114 from chvmvd/add-html-article
Add HTML article
2 parents b38f213 + 456f6c9 commit 053bb75

File tree

15 files changed

+240
-0
lines changed

15 files changed

+240
-0
lines changed

‎docs/03extras/04website/01html/index.mdx

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
import InteractiveCodeEditor from "@site/src/components/InteractiveCodeEditor/InteractiveCodeEditor";
6+
7+
# 一般的な Web サイトの作り方
8+
9+
## HTML とは
10+
11+
通常の Web サイトは、HTML を用いて作るのが一般的です。以下に HTML を用いた Hello World! の例を載せます。
12+
13+
<InteractiveCodeEditor
14+
language="html"
15+
defaultValue={`\
16+
<!DOCTYPE html>
17+
<html lang="ja">
18+
<head>
19+
<meta charset="UTF-8" />
20+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
21+
<title>Document</title>
22+
</head>
23+
<body>
24+
<p>Hello World!</p>
25+
</body>
26+
</html>\
27+
`}
28+
/>
29+
30+
様々なことが書いてあり非常にわかりにくいですが、重要なのは `<body>` と `</body>` の間に挟まれた部分です。HTML は、タグと呼ばれるもので内容を囲うことで要素を作ります。今回の場合は、`<body>` と `</body>` で囲まれた部分が内容になっていて、`<p>` と `</p>` で囲まれたところが段落という意味になっています。つまり、`<` と `>` で囲まれる開始タグと `</` と `>` で囲まれる終了タグで内容を挟むことで要素を作ります。終了タグのはじめには、`/` があることに注意してください。
31+
32+
それでは、他のタグも見てみましょう。HTML には、非常に豊富なタグが用意されているので、大抵のことはできます。
33+
34+
### 見出し要素
35+
36+
`<h1>` タグは、見出しを表します。`<h1>Head</h1>` のようにすることで、Head という見出しになります。
37+
38+
<InteractiveCodeEditor
39+
language="html"
40+
defaultValue={`\
41+
<!DOCTYPE html>
42+
<html lang="ja">
43+
<head>
44+
<meta charset="UTF-8" />
45+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
46+
<title>Document</title>
47+
</head>
48+
<body>
49+
<h1>Head</h1>
50+
</body>
51+
</html>\
52+
`}
53+
/>
54+
55+
`<h2>` タグは、`<h1>` タグの一つ下の見出しを表します。同じように `<h3>` タグ、`<h4>` タグ、`<h5>` タグ、`<h6>` タグがあります。
56+
57+
<InteractiveCodeEditor
58+
language="html"
59+
defaultValue={`\
60+
<!DOCTYPE html>
61+
<html lang="ja">
62+
<head>
63+
<meta charset="UTF-8" />
64+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
65+
<title>Document</title>
66+
</head>
67+
<body>
68+
<h1>Heading level 1</h1>
69+
<h2>Heading level 2</h2>
70+
<h3>Heading level 3</h3>
71+
<h4>Heading level 4</h4>
72+
<h5>Heading level 5</h5>
73+
<h6>Heading level 6</h6>
74+
</body>
75+
</html>\
76+
`}
77+
/>
78+
79+
### 番号なし箇条書き
80+
81+
箇条書きもできます。次のように書けば、箇条書きができます。
82+
83+
```html
84+
<ul>
85+
<li>First Item</li>
86+
<li>Second Item</li>
87+
<li>Third Item</li>
88+
</ul>
89+
```
90+
91+
<InteractiveCodeEditor
92+
language="html"
93+
defaultValue={`\
94+
<!DOCTYPE html>
95+
<html lang="ja">
96+
<head>
97+
<meta charset="UTF-8" />
98+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
99+
<title>Document</title>
100+
</head>
101+
<body>
102+
<ul>
103+
<li>First Item</li>
104+
<li>Second Item</li>
105+
<li>Third Item</li>
106+
</ul>
107+
</body>
108+
</html>\
109+
`}
110+
/>
111+
112+
さらに、次のように入れ子にすることもできます。
113+
114+
```html
115+
<ul>
116+
<li>First Item</li>
117+
<li>
118+
Second Item
119+
<ul>
120+
<li>First Sub Item</li>
121+
<li>Second Sub Item</li>
122+
</ul>
123+
</li>
124+
</ul>
125+
```
126+
127+
<InteractiveCodeEditor
128+
language="html"
129+
defaultValue={`\
130+
<!DOCTYPE html>
131+
<html lang="ja">
132+
<head>
133+
<meta charset="UTF-8" />
134+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
135+
<title>Document</title>
136+
</head>
137+
<body>
138+
<ul>
139+
<li>First Item</li>
140+
<li>
141+
Second Item
142+
<ul>
143+
<li>First Sub Item</li>
144+
<li>Second Sub Item</li>
145+
</ul>
146+
</li>
147+
</ul>
148+
</body>
149+
</html>\
150+
`}
151+
/>
152+
153+
### 番号付き箇条書き
154+
155+
番号付きの箇条書きもできます。次のように書けば、番号付きの箇条書きができます。
156+
157+
```html
158+
<ol>
159+
<li>First Item</li>
160+
<li>Second Item</li>
161+
<li>Third Item</li>
162+
</ol>
163+
```
164+
165+
<InteractiveCodeEditor
166+
language="html"
167+
defaultValue={`\
168+
<!DOCTYPE html>
169+
<html lang="ja">
170+
<head>
171+
<meta charset="UTF-8" />
172+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
173+
<title>Document</title>
174+
</head>
175+
<body>
176+
<ol>
177+
<li>First Item</li>
178+
<li>Second Item</li>
179+
<li>Third Item</li>
180+
</ol>
181+
</body>
182+
</html>\
183+
`}
184+
/>
185+
186+
### リンク
187+
188+
リンクは次のように作れます。開始タグと終了タグの間に表示する文字を書いて、href 属性の中にリンク先の URL を記載します。
189+
190+
```html
191+
<a href="https://sikepuri-algorithm.github.io/">Introduction to Algorithms</a>
192+
```
193+
194+
<InteractiveCodeEditor
195+
language="html"
196+
defaultValue={`\
197+
<!DOCTYPE html>
198+
<html lang="ja">
199+
<head>
200+
<meta charset="UTF-8" />
201+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
202+
<title>Document</title>
203+
</head>
204+
<body>
205+
<a href="https://sikepuri-algorithm.github.io/">Introduction to Algorithms</a>
206+
</body>
207+
</html>\
208+
`}
209+
/>
210+
211+
### 画像
212+
213+
画像は、次のようにして表示することができます。src 属性に、画像のパスを書き、alt 属性にその画像の説明を書きます。
214+
215+
```html
216+
<img
217+
src="https://sikepuri-algorithm.github.io/img/favicon.ico"
218+
alt="Introduction to Algorithms"
219+
/>
220+
```
221+
222+
<InteractiveCodeEditor
223+
language="html"
224+
defaultValue={`\
225+
<!DOCTYPE html>
226+
<html lang="ja">
227+
<head>
228+
<meta charset="UTF-8" />
229+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
230+
<title>Document</title>
231+
</head>
232+
<body>
233+
<img
234+
src="https://sikepuri-algorithm.github.io/img/favicon.ico"
235+
alt="Introduction to Algorithms"
236+
/>
237+
</body>
238+
</html>\
239+
`}
240+
/>

‎docs/03extras/04website/01npm/index.mdx renamed to ‎docs/03extras/04website/02npm/index.mdx

File renamed without changes.

‎docs/03extras/04website/01npm/install_curl.mp4 renamed to ‎docs/03extras/04website/02npm/install_curl.mp4

File renamed without changes.

‎docs/03extras/04website/01npm/install_npm.mp4 renamed to ‎docs/03extras/04website/02npm/install_npm.mp4

File renamed without changes.

‎docs/03extras/04website/02docusaurus/edit_docusaurus.mp4 renamed to ‎docs/03extras/04website/03docusaurus/edit_docusaurus.mp4

File renamed without changes.

‎docs/03extras/04website/02docusaurus/index.mdx renamed to ‎docs/03extras/04website/03docusaurus/index.mdx

File renamed without changes.

‎docs/03extras/04website/02docusaurus/install_docusaurus.mp4 renamed to ‎docs/03extras/04website/03docusaurus/install_docusaurus.mp4

File renamed without changes.

‎docs/03extras/04website/03GitHub/index.mdx renamed to ‎docs/03extras/04website/04GitHub/index.mdx

File renamed without changes.

‎docs/03extras/04website/03GitHub/push_to_github.mp4 renamed to ‎docs/03extras/04website/04GitHub/push_to_github.mp4

File renamed without changes.

‎docs/03extras/04website/03GitHub/setup_git.mp4 renamed to ‎docs/03extras/04website/04GitHub/setup_git.mp4

File renamed without changes.

0 commit comments

Comments
 (0)