-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (108 loc) · 4.96 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="only light">
<meta name="Description"
content="Home for beginners to learn HTML, experts to reference elements, and anyone to leverage common templates">
<title>HTML Haus | Hyper Text's Home</title>
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/sane.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!-- <base href="https://html.haus/"> -->
</head>
<body>
<header>
<nav>
<a id="menu-title" href="index.html">HTML<img class="logo" src="img/house-with-tree.png"
alt="House with tree icon"></a>
<ul>
<li><a href="learn.html">Learn</a></li>
<li><a href="practice.html">Practice</a></li>
<li><a href="reference.html">Reference</a></li>
<li><a href="tools.html">Tools</a></li>
</ul>
</nav>
</header>
<main>
<h1 lang="de">Willkommen</h1>
<h2>HTML</h2>
<p><abbr title="Hyper Text Markup Language">HTML</abbr> stands for Hyper Text Markup Language, and it is the
foundation of the web.
HTML is called a markup language, because it's a way to <em>mark up</em> regular text to specify structure. It's
the wood, steel,
and concrete that frames every website and web application. It's the skeleton that the rest of the web builds upon
to define meaning
and present information.
</p>
<img src="img/foundation-600.jpg" sizes="(max-width: 600px) 95vw,
(min-width: 600px) 90vw,
(min-width: 768px) 75vw,
(min-width: 992px) 60vw,
(min-width: 1200px) 50vw, 100vw" srcset="img/foundation-600.jpg 600w,
img/foundation-900.jpg 900w,
img/foundation-1800.jpg 1800w,
img/foundation-2700.jpg 2700w" alt="Concrete pillars at sunset by Mirko Blicke on Unsplash">
<p>
Everything is built on top of HTML's foundation. If you want to learn how to build on the web, you have to start
with HTML.
</p>
<h2 lang="de">Haus</h2>
<p>
<span lang="de">Haus</span> is the German word for house. It comes from Middle High German hūs (pronounced
/haʊ̯s/).
</p>
<p>You can hear it here:</p>
<audio controls>
<source src="assets/De-Haus.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<img src="img/haus-600.jpg" sizes="(max-width: 600px) 95vw,
(min-width: 600px) 90vw,
(min-width: 768px) 75vw,
(min-width: 992px) 60vw,
(min-width: 1200px) 50vw, 100vw" srcset="img/haus-600.jpg 600w,
img/haus-900.jpg 900w,
img/haus-1800.jpg 1800w,
img/haus-2700.jpg 2700w" loading="lazy" alt="Large white rural house by Jesse Roberts on Unsplash">
<p>
HTML.Haus is your home for learning how to build websites using HTML by starting with the foundation, the
structure, the bones of
the internet. HTML.Haus is both a resource for learning HTML from scratch and a reference for advanced users that
want to look up
certain elements. Finally, HTML.Haus also offers a series of copyable HTML5 templates. We invite you to steal them
and
make the web a better, more accessible, easier to navigate wunderland.
</p>
<p lang="de">Willkommen zu Hause!</p>
<h2>Contents</h2>
<p>This website has pages to help you:</p>
<ul>
<li><a href="learn.html">Learn</a>: a single page tutorial on HTML</li>
<li><a href="practice.html">Practice</a>: with an element memorization tool</li>
<li><a href="reference.html">Reference</a>: for broadly supported HTML elements</li>
<li><a href="tools.html">Tools</a>: to help you write better, faster, and stronger HTML</li>
</ul>
<h2>Background</h2>
<p>What is this website and why does it exist?</p>
<p><strong>Modern web development has a problem.</strong> Websites and web applications are built with HTML, CSS,
and JavaScript, yet more properties are
increasingly being built with only JavaScript libraries and frameworks, which abstract away HTML and CSS. This
abstraction has distanced many web developers
from the web's view layer. With that distance they've lost an understanding what purpose HTML serves, why semantic
HTML matters, and when to properly
use elements for great justice.
</p>
<p>HTML.Haus harkens back to web development fundamentals by offering resources for writing HTML.</p>
</main>
<footer>
<a href="learn.html">Learn</a>
<a href="practice.html">Practice</a>
<a href="reference.html">Reference</a>
<a href="tools.html">Tools</a>
<a href="about.html">About</a>
<a href="index.html"><img alt="House with tree icon" class="logo" src="img/house-with-tree.png"></a>
</footer>
</body>
</html>