htamas1210/webtech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ora 8 9

Browse Source
This commit is contained in:
htom
2025-11-14 17:30:19 +01:00
parent 5b19b729c4
commit 9ff15dd9f7
26 changed files with 1044 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
ora8/webtechnologies/Web Technologies.html Normal file
View File

@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Web Technologies</title>
<link rel="stylesheet" href="web-technologies.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Web Technologies</h1>
<p>Last modified: <time datetime="2025-10-11">October 11, 2025</time></p>
</header>
<nav id="toc">
<h2>Table of Contents</h2>
<ul class="toc">
<li>
<a href="#json">JSON</a>
</li>
<li>
<a href="#css">CSS</a>
</li>
<li>
<a href="#html">HTML</a>
</li>
</ul>
</nav>
<main>
<article id="json">
<h2>
<a href="#json">JSON</a>
</h2>
<p>JavaScript Object Notation (JSON) is a lightweight, text-based, language-independent data interchange
format.</p>
<h3>Specifications</h3>
<ul class="specs">
<li>
<a href="https://ecma-international.org/publications-and-standards/standards/ecma-404/">ECMA-404:
The JSON Data Interchange Syntax</a>
</li>
<li>
<a href="https://datatracker.ietf.org/doc/html/rfc8259">RFC 8259: The JavaScript Object Notation
(JSON) Data Interchange Format</a>
</li>
<li>
<a href="https://www.iso.org/standard/71616.html">ISO/IEC 21778:2017: Information technology—The
JSON data interchange syntax</a>
</li>
</ul>
<h3>Sample Code</h3>
<pre class="number-lines">{
"title": "Batman Begins",
"year": 2005,
"rating": "PG-13",
"genres": ["action", "crime", "drama"]
}
</pre>
</article>
<article id="css">
<h2>
<a href="#css">CSS</a>
</h2>
<p>Cascading Style Sheets (CSS) is a language for describing
the rendering of structured documents (such as HTML and XML) on a
variety of media.</p>
<h3>Specifications</h3>
<ul class="specs">
<li>
<a href="https://www.w3.org/Style/CSS/current-work">The list of all CSS specifications</a>
</li>
</ul>
<h3>Sample Code</h3>
<pre class="number-lines">h1, h2, h3, h4, h5, h6 {
text-align: center;
}
table.summary &gt; tbody &gt; tr:nth-child(odd) &gt; td {
background-color: lightgray;
}
</pre>
</article>
<article id="html">
<h2>
<a href="#html">HTML</a>
</h2>
<p>HTML is the World Wide Web's core markup language.</p>
<h3>Specifications</h3>
<ul class="specs">
<li>
<a href="https://html.spec.whatwg.org/">HTML Standard</a>
</li>
</ul>
<h3>Sample Code</h3>
<pre class="number-lines">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Hello, World!&lt;/title&gt;
&lt;meta charset="UTF-8"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Hello, World!&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
</article>
</main>
<footer>
<p class="legal"><small>This work is licensed under a <a
href="https://creativecommons.org/licenses/by/4.0/">Creative Commons "Attribution 4.0
International"</a> license.</small>
<img src="Web%20Technologies_files/80x15.png" alt="CC BY 4.0 license logo">
</p>
</footer>
<script src="script.js"></script>
</body>
</html>

17
ora8/webtechnologies/script.js Normal file
View File

@@ -0,0 +1,17 @@
function wrapTextLinesInSpan(element){
const lines = element.textContent.split('\n').filter(Boolean);
element.textContent = '';
for (let index = 0; index < lines.length; index++) {
const span = document.createElement('span');
span.className = 'line';
span.textContent = lines[index];
element.appendChild(span);
if(index < lines.length - 1){
element.appendChild(document.createTextNode('\n'));
}
}
}
document.querySelectorAll('pre.number-lines').forEach(wrapTextLinesInSpan);

14
ora8/webtechnologies/style.css Normal file
View File

@@ -0,0 +1,14 @@
pre.number-lines{
counter-reset: line-number;
}
pre.number-lines > span.line::before{
border-right: 0.5em solid indigo;
content: counter(line-number);
counter-increment: line-number;
display: inline-block;
margin-right: 0.5em;
padding-right: 0.5em;
text-align: right;
width: 2ch;
}

50
ora8/webtechnologies/web-technologies.css Normal file
View File

@@ -0,0 +1,50 @@
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
body {
background-color: whitesmoke;
font-family: "Noto Sans", sans-serif;
margin: 0;
}
header, nav#toc, article, footer {
background-color: white;
border: thin solid gray;
border-radius: 0.25em;
box-shadow: 0 0 0.25em gray;
margin: 1em;
padding: 1em;
}
ul:is(.toc, .specs) a:hover {
background-color: indigo;
color: white;
}
pre {
background-color: aliceblue;
border-left: 0.5em solid indigo;
font-family: "Noto Sans Mono", monospace;
overflow-x: auto;
padding: 0.5em;
}
footer {
text-align: center;
}
p.legal img {
vertical-align: middle;
}
a:is(:link, :visited) {
color: indigo;
}
h2 > a:is(:link, :visited) {
color: black;
text-decoration: none;
}
h2 > a:hover {
text-decoration: underline;
}