diff --git a/apps/mdn/README.md b/apps/mdn/README.md new file mode 100644 index 00000000..f989b56d --- /dev/null +++ b/apps/mdn/README.md @@ -0,0 +1 @@ +## MDNのドキュメント読んで作っていくだけのオーガニックなサイトのサンプル diff --git a/apps/mdn/advanced-text-formatting/other-semantics.html b/apps/mdn/advanced-text-formatting/other-semantics.html new file mode 100644 index 00000000..c0a852a9 --- /dev/null +++ b/apps/mdn/advanced-text-formatting/other-semantics.html @@ -0,0 +1,56 @@ + + + + + + Other semantics examples + + +

+ We use HTML, Hypertext Markup Language, to structure our web + documents. +

+ +

+ I think Rev. Green did it in the kitchen + with the chainsaw. +

+ +
+

Chris Mills, Manchester, The Grim North, UK

+
+ +

My birthday is on the 25th of May 2001.

+ +

+ Caffeine's chemical formula is + C8H10N4O2. +

+ +

If x2 is 9, x must equal 3.

+ +
const para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('Owww, stop poking me!');
+}
+ +

+ You shouldn't use presentational elements like + <font> and <center>. +

+ +

+ In the above JavaScript example, para represents a paragraph + element. +

+ +

+ Select all the text with Ctrl/Cmd + A. +

+ +
$ ping mozilla.org
+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
+ + diff --git a/apps/mdn/advanced-text-formatting/task.html b/apps/mdn/advanced-text-formatting/task.html new file mode 100644 index 00000000..40eb6e78 --- /dev/null +++ b/apps/mdn/advanced-text-formatting/task.html @@ -0,0 +1,59 @@ + + + + + Advanced HTML text: Task 1 + + + + +

Advanced HTML Animals

+ +
+
Llama
+
+ Tall, woolly quadruped, pointy ears. Sometimes rideable, but grumpy and + spits a lot. Big fan of list items. +
+
Anaconda
+
+ A very large constrictor snake; travels rapidly by way of anchors to + sneak up on his prey. +
+
Hippopotamus
+
His description is bottomless.
+
+ + diff --git a/apps/mdn/advanced-text-formatting/task2.html b/apps/mdn/advanced-text-formatting/task2.html new file mode 100644 index 00000000..6bdba92c --- /dev/null +++ b/apps/mdn/advanced-text-formatting/task2.html @@ -0,0 +1,60 @@ + + + + + Advanced HTML text: Task 2 + + + + +

Advanced text semantics

+ +

Let's start with a quote:

+ +
+

+ HTML , Hypertext Markup + Language is by default accessible, if used correctly. +

+
+ +

+ CSS can also be used to make + web pages more, or less, accessible. +

+ +

Chemical Formulae: H2O (Water), C2H6O (Ethanol).

+ +

+ Dates: (Christmas Day), + (Día de los Muertos). +

+ + diff --git a/apps/mdn/head-tag/meta-example.html b/apps/mdn/head-tag/meta-example.html new file mode 100644 index 00000000..1425c494 --- /dev/null +++ b/apps/mdn/head-tag/meta-example.html @@ -0,0 +1,38 @@ + + + + + + Meta examples + + + + + + + + + + + + + + +

Meta examples

+ +

Japanese example: ご飯が熱い。

+

I am glad you weren't late.

+ + diff --git a/apps/mdn/head-tag/script.js b/apps/mdn/head-tag/script.js new file mode 100644 index 00000000..697c3e89 --- /dev/null +++ b/apps/mdn/head-tag/script.js @@ -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; + }; +}; diff --git a/apps/mdn/head-tag/style.css b/apps/mdn/head-tag/style.css new file mode 100644 index 00000000..e1ded887 --- /dev/null +++ b/apps/mdn/head-tag/style.css @@ -0,0 +1,14 @@ +html { + background-color: green; + font-size: 20px; +} + +ul { + background: red; + padding: 10px; + border: 1px solid black; +} + +li { + margin-left: 20px; +} diff --git a/apps/mdn/head-tag/title-example.html b/apps/mdn/head-tag/title-example.html new file mode 100644 index 00000000..5e72d86f --- /dev/null +++ b/apps/mdn/head-tag/title-example.html @@ -0,0 +1,30 @@ + + + + + + + + + <title> <p>タイトル</p>element + + + +

<h1> element

+

ご飯は美味しいです

+

I am glad you weren't late.

+

My birthday is on the 25th of May 2001.

+

+ Caffeine's chemical formula is + C8hahahaH10N4O2. +

+

If xsupsubp2 is 9, x must equal 3 or -3.

+

+ 私のhelloworld名前はharuka +

+ + diff --git a/apps/mdn/start-html/index.html b/apps/mdn/start-html/index.html new file mode 100644 index 00000000..afb54a39 --- /dev/null +++ b/apps/mdn/start-html/index.html @@ -0,0 +1,27 @@ + + + + + My test page + + + +

My test page

+

+ This is my page. + HTMLを今更一から学んでいる。ただ眠いしかし取り組まねばいつまで経っても基礎を疎かにすることになるので気合いでやるぞ + 最高 + +

+ The Firefox logo: a flaming fox surrounding the Earth. +

<>"'&

+ + + +コメントのそのため、 そのため、コメントには diff --git a/apps/mdn/start-html/public/images.png b/apps/mdn/start-html/public/images.png new file mode 100644 index 00000000..b8ec5bb4 Binary files /dev/null and b/apps/mdn/start-html/public/images.png differ