Skip to content
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

chore: practice mdn #460

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+307 −0
Open

chore: practice mdn #460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
80be2c9
docs: mdn用のapps作成
hulk510 May 1, 2024
d883c59
feat: 進めたところまでコミット
hulk510 May 1, 2024
dc2328e
Merge branch 'main' into tutorial/mdn
hulk510 May 22, 2024
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
1 change: 1 addition & 0 deletions apps/mdn/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
## MDNのドキュメント読んで作っていくだけのオーガニックなサイトのサンプル
56 changes: 56 additions & 0 deletions apps/mdn/advanced-text-formatting/other-semantics.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Other semantics examples</title>
</head>
<body>
<p>
We use <abbr>HTML</abbr>, Hypertext Markup Language, to structure our web
documents.
</p>

<p>
I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen
with the chainsaw.
</p>

<address>
<p>Chris Mills, Manchester, The Grim North, UK</p>
</address>

<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>

<p>
Caffeine's chemical formula is
C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.
</p>

<p>If x<sup>2</sup> is 9, x must equal 3.</p>

<pre><code>const para = document.querySelector('p');

para.onclick = function() {
alert('Owww, stop poking me!');
}</code></pre>

<p>
You shouldn't use presentational elements like
<code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.
</p>

<p>
In the above JavaScript example, <var>para</var> represents a paragraph
element.
</p>

<p>
Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.
</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
</body>
</html>
59 changes: 59 additions & 0 deletions apps/mdn/advanced-text-formatting/task.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Advanced HTML text: Task 1</title>
<style>
body {
background-color: #fff;
color: #333;
font:
1em / 1.4 Helvetica Neue,
Helvetica,
Arial,
sans-serif;
padding: 1em;
margin: 0;
}

h1 {
font-size: 2rem;
margin: 0;
color: purple;
}

dl {
color: gray;
margin: 0.5em 0;
}

dt {
font-weight: bold;
color: purple;
}

* {
box-sizing: border-box;
}
</style>
</head>

<body>
<h1>Advanced HTML Animals</h1>

<dl>
<dt>Llama</dt>
<dd>
Tall, woolly quadruped, pointy ears. Sometimes rideable, but grumpy and
spits a lot. Big fan of list items.
</dd>
<dt>Anaconda</dt>
<dd>
A very large constrictor snake; travels rapidly by way of anchors to
sneak up on his prey.
</dd>
<dt>Hippopotamus</dt>
<dd>His description is bottomless.</dd>
</dl>
</body>
</html>
60 changes: 60 additions & 0 deletions apps/mdn/advanced-text-formatting/task2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Advanced HTML text: Task 2</title>
<style>
body {
background-color: #fff;
color: #333;
font:
1em / 1.4 Helvetica Neue,
Helvetica,
Arial,
sans-serif;
padding: 1em;
margin: 0;
}

h1 {
font-size: 2rem;
margin: 0;
color: purple;
}

p {
margin: 0.5em 0;
}

abbr,
time {
color: green;
}
</style>
</head>

<body>
<h1>Advanced text semantics</h1>

<p>Let's start with a quote:</p>

<blockquote>
<p>
<abbr title="Hypertext Markup Language"> HTML </abbr>, Hypertext Markup
Language is by default accessible, if used correctly.
</p>
</blockquote>

<p>
<abbr title="Cascading Style Sheet">CSS</abbr> can also be used to make
web pages more, or less, accessible.
</p>

<p>Chemical Formulae: H2O (Water), C2H6O (Ethanol).</p>

<p>
Dates: <time> December 25<sup>th</sup> 2019 </time>(Christmas Day),
<time> November 2<sup>nd</sup> 2019 </time> (Día de los Muertos).
</p>
</body>
</html>
38 changes: 38 additions & 0 deletions apps/mdn/head-tag/meta-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Meta examples</title>

<meta name="author" content="Chris Mills" />
<meta
name="description"
content="This is an example page to demonstrate usage of metadata on web pages."
/>

<meta
property="og:image"
content="https://developer.mozilla.org/mdn-social-share.png"
/>
<meta
property="og:description"
content="This is an example page to demonstrate usage of metadata on web pages."
/>
<meta
property="og:title"
content="Metadata; The HTML &lt;head&gt;, on MDN"
/>

<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>

<body>
<h1>Meta examples</h1>

<p>Japanese example: ご飯が熱い。</p>
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
</body>
</html>
22 changes: 22 additions & 0 deletions apps/mdn/head-tag/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
const list = document.createElement('ul');
const info = document.createElement('p');
const html = document.querySelector('html');

info.textContent =
'Below is a dynamic list. Click anywhere on the page to add a new list item. Click an existing list item to change its text to something else.';

document.body.appendChild(info);
document.body.appendChild(list);

html.onclick = function () {
const listItem = document.createElement('li');
const listContent = prompt('What content do you want the list item to have?');
listItem.textContent = listContent;
list.appendChild(listItem);

listItem.onclick = function (e) {
e.stopPropagation();
const listContent = prompt('Enter new content for your list item');
this.textContent = listContent;
};
};
14 changes: 14 additions & 0 deletions apps/mdn/head-tag/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
html {
background-color: green;
font-size: 20px;
}

ul {
background: red;
padding: 10px;
border: 1px solid black;
}

li {
margin-left: 20px;
}
30 changes: 30 additions & 0 deletions apps/mdn/head-tag/title-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!doctype html>
<html lang="en-US">
<head>
<!-- <meta charset="utf-8"> -->
<meta charset="ISO-8859-1" />
<meta name="viewport" content="width=device-width" />
<meta name="author" content="Chris Mills" />
<meta
name="description"
content="The title element is a required child in most documents."
/>
<title>&lt;title&gt; <p>タイトル</p>element</title>
</head>

<body>
<h1>&lt;h1&gt; element</h1>
<h2>ご飯は美味しいです</h2>
<p>I am <em>glad</em> you weren't <em>late</em>.</p>
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>
Caffeine's chemical formula is
C<sup>8hahaha</sup>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.
</p>
<p>If x<sup>supsubp2</sup> is 9, x must equal 3 or -3.</p>
<p>
私の<sup>hello<sub>world</sub></sup
>名前は<sub>haruka</sub>
</p>
</body>
</html>
27 changes: 27 additions & 0 deletions apps/mdn/start-html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My test page</title>
</head>

<body>
<h1>My test page</h1>
<p>
This is my page.
HTMLを今更一から学んでいる。<strong>ただ眠い</strong>しかし取り組まねばいつまで経っても基礎を疎かにすることになるので<strong>気合いで</strong>やるぞ<a
href="https://google.com"
>
最高
</a>
</p>
<img
src="public/images.png"
alt="The Firefox logo: a flaming fox surrounding the Earth."
width="160px"
/>
<p>&lt;&gt;&quot;&apos;&amp;</p>
</body>
</html>

コメントのそのため、 そのため、コメントには
Binary file added apps/mdn/start-html/public/images.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.