<h3> How to Make a Website </h3>
<p> Websites are are documents that use formatting instructions in the Hypertext Markup Language (HTML) to render page content on a display terminal (usually a web browser). Web pages are hosted on a server and accessed with the Hypertext Transfer Protocol (HTTP/HTTPS). There are many ways to create a web page, such as: </p>
<ul>
<li> <b>Static sites</b> consist of pages written in basic HTML files. This method is recommended, as it maximizes the amount of control you have over your site, and builds knowledge of web fundamentals. The downside to static sites is that managing repeated elements such as headers and footers can be tedious for very large websites. </li>
<li> <b>Content management systems</b> (CMS) store page content in a database and provide functionality to edit and apply themes. Thi makes it easier to manage large sites, but comes at the cost of control, flexibility and performance. </li>
<li> <b>Static site generators</b> (SSG) are a compromise between the two, where you generate a website using Markdown files and templates. Popular static site generators include Jekyll, Pelican and Hugo. If you're already very comfortable with HTML/CSS and want a challenge beyond the content on this page, you can also explore the basics of <a href="./staticsites.html">static site generators</a>. </li>
</ul>
<h3> <a href="https://www.w3schools.com/html/html_intro.asp">HyperText Markup Language</a> </h3>
<p>(From W3 Schools) HTML is the standard markup language for creating Web pages.</p>
<ul>
<li>HTML stands for Hyper Text Markup Language</li>
<li>HTML describes the structure of Web pages using markup</li>
<li>HTML elements are the building blocks of HTML pages</li>
<li>HTML elements are represented by tags</li>
<li>HTML tags label pieces of content such as "heading", "paragraph", "table", and so on</li>
<li>Browsers do not display the HTML tags, but use them to render the content of the page</li>
</ul>
<pre><code class="html">
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
</code></pre>
<p>Example explained:</p>
<ul>
<li>The <code><!DOCTYPE html></code> declaration defines this document to be HTML5</li>
<li>The <code><html></code> element is the root element of an HTML
page</li>
<li>The <code><head></code> element contains meta information about the document</li>
<li>The <code><title></code> element specifies a title for the document</li>
<li>The <code><body></code> element contains the visible page content</li>
<li>The <code><h1></code> element defines a large heading</li>
<li>The <code><p></code> element defines a paragraph</li>
</ul>
<h3> HTML Tags</h3>
<p>
HTML tags are element names surrounded by angle brackets
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward slash inserted before the tag name
Only the content inside the <body> section (the white area in the image below) is displayed in a browser.
</p>
<!-- <img src="./coordinates.png" alt="Coordinates"> -->
<h3>HTML Page Structure</h3>
<p>Below is a visualization of an HTML page structure:</p>
<div style="width:99%;border:1px solid grey;padding:3px;margin:0;background-color:#ddd"><html>
<div style="width:90%;border:1px solid grey;padding:3px;margin:20px"><head>
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px"><title>Page title</title>
</div>
</head>
</div>
<div style="width:90%;border:1px solid grey;padding:3px;margin:20px;background-color:#ddd"><body>
<div style="width:90%;border:1px solid grey;padding:3px;margin:20px;background-color:#fff">
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px"><h1>This is a heading</h1></div>
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px"><p>This is a paragraph.</p></div>
<div style="width:90%;border:1px solid grey;padding:5px;margin:20px"><p>This is another paragraph.</p></div>
</div>
</body>
</div>
</html>
</div>
<br><br>
<h3> <a href="https://www.w3schools.com/html/html_links.asp">HTML Elements</a></h3>
<p>An HTML element usually consists of a <strong>start</strong> tag and <strong>end</strong> tag,
with the content inserted in between:</p>
<pre><code class="html">
<tagname>Content goes here...</tagname>
</code> </pre>
<p>The HTML <strong>element</strong> is everything from the start tag to the end tag:</p>
<pre><code class="html">
<p>My first paragraph.</p>
</code> </pre>
<table>
<tr>
<th style="width:33%">Start tag</th>
<th style="width:33%">Element content</th>
<th>End tag</th>
</tr>
<tr>
<td><h1></td>
<td>My First Heading</td>
<td></h1></td>
</tr>
<tr>
<td><p></td>
<td>My first paragraph.</td>
<td></p></td>
</tr>
<tr>
<td><br></td>
<td> </td>
<td> </td>
</tr>
</table>
<p>HTML elements with no content are called empty elements. Empty elements do not have an end tag, such as the <br> element (which indicates a line break).</p>
<p> HTML elements can be nested (elements can contain elements). All HTML documents consist of nested HTML elements. </p>
<h3> <a href="https://www.w3schools.com/html/html_attributes.asp">HTML Attributes</a></h3><ul>
<li>All HTML elements can have <b>attributes</b></li>
<li>Attributes provide <b>additional information</b> about an element</li>
<li>Attributes are always specified in <b>the start tag</b></li>
<li>Attributes usually come in name/value pairs like: <b>name="value"</b></li>
</ul>
<table>
<tr>
<th style="width:15%">Attribute</th>
<th>Description</th>
</tr>
<tr>
<td>alt</td>
<td>Specifies an alternative text for an image, when the image cannot be
displayed</td>
</tr>
<tr>
<td>disabled</td>
<td>Specifies that an input element should be disabled</td>
</tr>
<tr>
<td>href</td>
<td>Specifies the URL (web address) for a link</td>
</tr>
<tr>
<td>id</td>
<td>Specifies a unique id for an element</td>
</tr>
<tr>
<td>src</td>
<td>Specifies the URL (web address) for an image</td>
</tr>
<tr>
<td>style</td>
<td>Specifies an inline CSS style for an element</td>
</tr>
<tr>
<td>title</td>
<td>Specifies extra information about an element (displayed as a tool tip)</td>
</tr>
</table>
<p>A complete list of all attributes for each HTML element, is listed in:
<a href="/tags/ref_attributes.asp">HTML Attribute Reference</a>.</p>
<h3> <a href="https://www.w3schools.com/html/html_formatting.asp">HTML Formatting</a></h3>
<p>HTML also defines special <strong>elements</strong> for defining text with a special <strong>meaning</strong>.<br>
HTML uses elements like <b> and <i> for formatting output, like <b>bold</b> or <i>italic</i> text.</p>
<pre><code class="html">
<b>This text is bold.</b> <i> This text is italic.</i> <br>
This is <sub>subscript</sub> and <sup>superscript</sup>
</code> </pre>
<p><b>This text is bold. </b> <i> This text is italic. <br>
</i> This is<sub> subscript</sub> and <sup>superscript</sup></p>
<table >
<tr>
<th style="width:20%">Tag</th>
<th>Description</th>
</tr>
<tr>
<td><a href="https://www.w3schools.com/tags/tag_b.asp"><b></a></td>
<td>Defines bold text</td>
</tr>
<tr>
<td><a href="https://www.w3schools.com/tags/tag_em.asp"><em></a></td>
<td>Defines emphasized text </td>
</tr>
<tr>
<td><a href="https://www.w3schools.com/tags/tag_i.asp"><i></a></td>
<td>Defines italic text</td>
</tr>
<tr>
<td><a href="https://www.w3schools.com/tags/tag_small.asp"><small></a></td>
<td>Defines smaller text</td>
</tr>
<tr>
<td><a href="https://www.w3schools.com/tags/tag_strong.asp"><strong></a></td>
<td>Defines important text</td>
</tr>
<tr>
<td><a href="https://www.w3schools.com/tags/tag_sub.asp"><sub></a></td>
<td>Defines subscripted text</td>
</tr>
<tr>
<td><a href="https://www.w3schools.com/tags/tag_sup.asp"><sup></a></td>
<td>Defines superscripted text</td>
</tr>
<tr>
<td><a href="https://www.w3schools.com/tags/tag_ins.asp"><ins></a></td>
<td>Defines inserted text</td>
</tr>
<tr>
<td><a href="https://www.w3schools.com/tags/tag_del.asp"><del></a></td>
<td>Defines deleted text</td>
</tr>
<tr>
<td><a href="https://www.w3schools.com/tags/tag_mark.asp"><mark></a></td>
<td>Defines marked/highlighted text</td>
</tr>
</table>
<h3> <a href="https://www.w3schools.com/html/html_links.asp">HTML Links</a></h3>
<p>
<!-- Syntax introduced: <a> <br> -->
HTML links are defined with the <a> tag
The link's destination is specified in the href attribute. Destinations can be local or web-based (absolute URL)
Attributes are used to provide additional information about HTML elements.
</p>
<pre><code class="html">
<a href="https://w3schools.com">This is a link<a/>
</code> </pre>
<h3> <a href="https://www.w3schools.com/html/html_images.asp">HTML Images</a></h3>
<p>
<!-- Syntax introduced: <img> <br> -->
HTML images are defined with the <img> tag
The source file (src), alternative text (alt), width, and height are provided as attributes
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
</p>
<pre><code class="html">
<img src="img_girl.jpg" alt="Girl in a jacket" </img>
</code> </pre>
<h3> Other useful HTML tags</h3>
<p> <a href="https://www.w3schools.com/html/html_headings.asp">HTML Headings</a> <br>
<a href="https://www.w3schools.com/html/html_paragraphs.asp">HTML Paragraphs</a> <br>
<a href="https://www.w3schools.com/html/html_tables.asp">HTML Tables</a> <br>
<a href="https://www.w3schools.com/html/html_lists.asp">HTML Lists</a> <br>
<a href="https://www.w3schools.com/html/html_iframe.asp">HTML Iframes</a> <br>
<a href="https://www.w3schools.com/html/html_entities.asp">HTML Entities</a> <br>
</p>
<h3> <a href="https://www.w3schools.com/css/default.asp">CSS</a> </h3>
</div >
<!-- LIST OF LINKS -->
<h3> <a href="https://www.w3schools.com/css/css_intro.asp">Intro to CSS</a></h3>
<p>CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. CSS can be added to HTML elements in <a href="https://www.w3schools.com/css/css_syntax.asp">3 ways</a>: <br>
Inline - by using the style attribute in HTML elements <br>
Internal - by using a <style> element in the <head> section <br>
External - by using an external CSS file <br>
</p>
<h3> <a href="https://www.w3schools.com/css/css_syntax.asp">CSS Syntax</a></h3>
<h3> <a href="https://www.w3schools.com/css/css_colors.asp">CSS Colors</a></h3>
<h3> <a href="https://www.w3schools.com/css/css_border.asp">CSS Borders</a></h3>
<h3> <a href="https://www.w3schools.com/css/css_margin.asp">CSS Margins</a></h3>
<h3> <a href="https://www.w3schools.com/css/css_padding.asp">CSS Padding</a></h3>
<h3> <a href="https://www.w3schools.com/css/css_font.asp">CSS Fonts</a></h3>