<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/demo_style.css">
<title>HTML + CSS</title>
</head>
<body>
<div class="body_container">
<header class="header">
<h1 class="header__title">HTML and CSS - The Foundations of the Internet</h1>
</header>
<nav class="nav">
<ul class="nav__list">
<li><a class="nav__link" href="#section1">HTML</a></li>
<li><a class="nav__link" href="#section2">HTML5</a></li>
<li><a class="nav__link" href="#section3">CSS</a></li>
<li><a class="nav__link" href="#section4">Today</a></li>
<li><a class="nav__link" href="#section5">Demo</a></li>
</ul>
</nav>
<main>
<section id="section1">
<h2 class="section__title">HTML: The Backbone of the Web</h2>
<p>HTML, or <b>H</b>yper<b>T</b>ext <b>M</b>arkup <b>L</b>anguage, was created by Tim Berners-Lee,
the father of the World Wide Web. Initially, HTML was a simple language designed to share scientific
documents, but it had a grand dream: to create a universal system that anyone could use
to share information online.</p>
<p>By 1995, HTML 2.0 emerged as the first official standard. It introduced key features like:</p>
<ul>
<li>Forms,</li>
<li>Tables, and</li>
<li>Basic multimedia support.</li>
</ul>
<p>The late 1990s saw the release of HTML 4.01, adding support for stylesheets (aka <i>CSS</i>) and
improved accessibility (like alt text).</p>
</section>
<section id="section2">
<h2 class="section__title">HTML5: The Web's Modern Foundation</h2>
<p>The real revolution began in 2008 with the development of <b>HTML5</b>.
Officially standardized in 2014, HTML5 was designed to meet the demands of modern web applications.</p>
<p>HTML5 introduced a host of new features, including:</p>
<ul>
<li>Semantic tags (like <code><header></code> and <code><footer></code>),
improving SEO and accessibility,</li>
<li>Native multimedia support (like <code><video></code> and <code><audio></code>),</li>
<li>and APIs for offline storage, geolocation, and more.</li>
<li>Improved semantics.</li>
</ul>
<p>HTML5 marked the web's transition from a document-based medium to an application platform, enabling
the creation of rich, interactive experiences.</p>
</section>
<section id="section3">
<h2 class="section__title">CSS: The Web's Visual Language</h2>
<p>CSS, or <b>C</b>ascading <b>S</b>tyle <b>S</b>heets, was introduced in 1996 by the W3C to address
a growing need: separating a webpage's content from its design. Before CSS, styling was embedded
directly within HTML, making it difficult to manage and update websites. (Interestingly,
frameworks like Tailwind seem to be regressing back to the old ways of inline styles,
albeit with a better setup.)</p>
<ol>
<li><b>CSS1</b> <i>(1996)</i> offered basic styling capabilities- fonts, colors, and spacing. It was
a revolutionary step but limited in scope.</li>
<li><b>CSS2</b> <i>(1998)</i> expanded capabilities significantly, adding support for absolute
positioning, z-index, and media types. It enabled complex layouts and greater
design flexibility.</li>
<li>In <i>2011</i>, <b>CSS3</b> introduced a modular approach, allowing individual features
to evolve independently. Key innovations included flexbox and grid layouts,
media queries, transitions, and animations.<br>
CSS3 empowered designers to create visually stunning, highly responsive </li>
</ol>
</section>
<section id="section4">
<h2 class="section__title">A Convergence of Power</h2>
<p>Today, HTML and CSS continue to evolve alongside the web's dynamic needs. They are supported by
a vast ecosystem of tools, frameworks, and libraries.</p>
<p>The evolution of HTML and CSS is not just a tale of technological advancements–it's a testament
to how collaboration and innovation can reshape the way we connect and interact with the world. HTML and CSS
have grown from simple tools into the cornerstones of a digital age, shaping how we experience the internet
today.</p>
</section>
<section id="section5">
<h2 class="section__title">Demo</h2>
<p>This entire page serves as a demo. To get the html of this page, go to
<a href="/demo/html" target="_blank">this page</a>. For the CSS, go
<a href="/demo/css" target="_blank">here</a>.</p>
<h3>HTML</h3>
<p>In a HTML file (ending in <code>.html</code>), there is always a basic structure:</p>
<div class="code-block">
<!-- This is a comment (both multiline and single line comments use this syntax) --><br>
<!DOCTYPE html> <br>
<html lang="en"><br>
<head><br>
<meta charset="UTF-8"><br>
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br>
<link rel="stylesheet" href="/path/to/stylesheet.css"> <br>
<title>Page Title</title> <br>
</head><br>
<style><br>
/* CSS code can go here or in another file goes here */<br>
</style><br>
<script> <br>
// JavaScript code can go here or in another file<br>
</script><br>
<body> <br>
<header> <br>
<h1>Header Title</h1> <br>
</header><br>
<nav><br>
<!-- Navigation links go here --><br>
</nav><br>
<main><br>
<section><br>
<h2>Section Title</h2><br>
<p>Section content goes here</p><br>
</section><br>
</main><br>
<footer><br>
<p>Footer content goes here</p><br>
</footer><br>
</body><br>
</html>
</div>
<p>As you can see, HTML is built using <b>tags</b>. Each tag tells the interpreter (browser) what is within it.
Tags are formatted like so:</p>
<code class="code-block">
<tag [values]> Content </tag>
</code>
<p>There are a few simple tags that can get you started in HTML:</p>
<ul>
<li>Headings: <code><h1></code>, <code><h2></code>, <code><h3></code></li>
<li>Paragraphs: <code><p></code></li>
<li>Links: <code><a href="{url}"></code></li>
<li>Images: <code><img src="{src}"></code></li>
<li>Lists: <code><ol></code> (ordered/numbered list), <code><ul></code> (bulleted list),
<code><li></code> (list item)</li>
<li>Organizational: <code><div></code>, <code><span></code> (inline div)</li>
<li>Text emphasis: <code><b></code> for bold, <code><i></code> for italicized,
<code><u></code> for underlined</li>
</ul>
<p>There are many more tags than the ones listed, such as meta tags (header, main, section, and footer) and
other style tags (iframe, code). Many of those are used in this page.</p>
<p>There are also tags that are necessary for a well-structured document, like <code>head</code>,
<code>html</code>, <code>!DOCTYPE</code> and <code>body</code>.</p>
<p>Tags also have an <b>id</b> or a <b>class</b>, which are organizational indicators that are used
later in CSS styling.</p>
<h3>CSS</h3>
<p>CSS is a language that is used to style HTML. Usually, CSS is written in a separate file(s) and linked
in the document's head, but it can also be written in the document itself. CSS is made up of <b>selectors</b>
and <b>properties</b>. Selectors are used to target specific HTML elements, and properties are used to
style those elements.</p>
<p>Here is an example of CSS:</p>
<div class="code-block">
/* This is a comment */<br>
h1 {<br>
color: blue;<br>
font-size: 24px;<br>
}<br>
p {<br>
color: black;<br>
font-size: 16px;<br>
}<br>
.class {<br>
color: red;<br>
font-size: 20px;<br>
}<br>
#id {<br>
color: green;<br>
font-size: 18px;<br>
}
</div>
<p>As you can see, CSS is made up of selectors and properties. Selectors can be tags, classes, or ids.
Tags are selected by their tag name, classes are selected by a period followed by the class name, and ids
are selected by a hash followed by the id name. Properties are then applied to the selected elements.</p>
<p>There are many properties that can be applied to elements, such as color, font-size, background-color,
and margin. There are also many more selectors that can be used, such as pseudo-classes and pseudo-elements.</p>
<p>CSS can also contain <b>animations.</b> An animation in CSS essentially tells the browser what it wants
certain properties to look like at certain times, and is placed on a selector through the <b>animation</b>
property.</p>
<p>Here is an example of a simple animation that changes the color of text over 10 seconds:</p>
<div class="code-block">
@keyframes colorchange {<br>
0% {<br>
color: red;<br>
}<br>
100% {<br>
color: blue;<br>
}<br>
}<br>
<br>
p {<br>
animation: colorchange 10s infinite;<br>
}
</div>
<h3>Wrapping Up</h3>
<p>HTML and CSS are the building blocks of the web. They are the foundation upon which all websites are built.
HTML is used to create the structure of a webpage, while CSS is used to style that structure. Together, they
allow developers to create beautiful, functional websites that are accessible to all users.</p>
<p>As you continue to learn and grow as a developer, remember that HTML and CSS are just the
beginning. There is so much more to learn and explore in the world of web development. Keep pushing yourself
to learn new things and try new technologies. The web is constantly evolving, and there is always something
new to discover.</p>
</section>
</main>
<footer class="footer">
<p>Made with <3 by <a href="https://github.com/acemavrick" class="github-link">acemavrick</a> and
<a href="https://github.com/tvumcc" class="github-link">tvumcc</a></p>
</footer>
</div>
</body>