Skip to content

「HTML」の節を改訂 #868

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
chvmvd wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

「HTML」の節を改訂 #868

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions docs/1-trial-session/02-html/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,27 @@ import openInBrowserVideo from "./open-in-browser.mp4";
import showFileExtensionsVideo from "./show-file-extensions.mp4";
import reloadBrowserVideo from "./reload-browser.mp4";

Web開発に必ず用いられる言語があります。<Term>**HTML**</Term>とCSS、そしてJavaScriptです。これらは互いに異なる役割をもっています。まずは最も基本となる<Term>HTML</Term>から学んでいきましょう。
世の中には、数多くのウェブサイトが存在しています。これらはどのようにして作られているのでしょうか。実は、**HTML**とCSS、そしてJavaScriptの3つの言語を用いることで作ることができます。これらは互いに異なる役割をもっています。

![Web開発で用いられる言語](./web-development-languages.drawio.svg)
![](./web-development-languages.drawio.svg)

## <Term>HTML</Term>を書き始める
HTMLは、ウェブサイトの構造を表すことができます。CSSは、色や配置などウェブサイトの見た目を変えることができます。JavaScriptは、ウェブサイトに動きを与えることができます。

VS Codeの画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html`と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー (<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) ) を用いてください。
まずは最も基本となる<Term>HTML</Term>から学んでいきましょう。

## はじめてのHTML

VS Codeの画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html`と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー（<kbd>Ctrl+S</kbd>（macOSでは<kbd>Command+S</kbd>））を用いてください。

```html title="index.html"
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Title</title>
<title>タイトル</title>
</head>
<body>
Hello <strong>World</strong>!
Hello HTML!
</body>
</html>
```
Expand Down