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 @@ + + +
+ + ++ 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 @@ + + + + +
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 @@ + + + + + +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 @@ + + + + + + + + +タイトル
elementI 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 @@ + + + + ++ This is my page. + HTMLを今更一から学んでいる。ただ眠いしかし取り組まねばいつまで経っても基礎を疎かにすることになるので気合いでやるぞ + 最高 + +
+<>"'&
+ + + +コメントのそのため、 そのため、コメントには 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