HTML

<!DOCTYPE html>
<title> Beavers </title>
<body>

<h1>Header</h1>

<img src="beaver.png">

<h2>General Information</h2>
<p>Beavers are animals that live in forests and like to build dams.</p>

<h2>Substinence</h2>
<p>They eat vegetables and occassionally chew on tree bark.</p>

</body>

HTML (HyperText Markup Language) is a markup language for generating webpages. It is used for HTTP. It consists of formatting tags that wrap around text, and attributes within those tags.

Tags elements in HTML are split into block-level and inline. Block-level: fills up its own "paragraph space", e.g. headers and paragraphs. Inline: contained "within", only takes as much space as necessary, e.g. bold text, italicized text.


Basic Tags

<!-- --> - comment, can go over multiple lines

<p> - paragraph

<h1>-<h6> - header

<img src="image.png"> - image; self-contained tag, additional attribute alt="" for alternative text if image doesn't appear

<a href=""> - hyperlink - connects to another page or file after selecting. Absolute link: <a href="https://landsofgames.com/"> Local : <a href="nextpage.html">

Including "mailto:" within a hyperlink makes the link open in an email client: <a href="mailto:george@ufwiki.com">

The link can lead to a specific part of a page if it is targeted:

<p>
<a href="#sec1">Click here to go to section 1</a>
<a href="#sec2">Click here to go to section 2</a>
</p>
<h2 id="sec1">Section 1</h2>
<p>Text text text</p>
<h2 id="sec2">Section 2</h2>
<p>Text text text</p>
</pre>

Text Within Paragraphs

<b> - bold

<i> - italics

<s> - strikethrough

<mark> - highlighted

<small> - unimportant

Head

Head is the section before <body> containing meta information - mostly through <meta> and <link> tags, which are all self contained.

<title> - name of page, what you see on top of browser

<meta charset=""> - character enconding, ie. ascii or utf-8

<meta author="">

<meta description="">

<link rel="stylesheet" href="style.css"> - links to CSS file that stylizes page

<link rel="icon" href="icon.png"> - icon seen next to text on top of page next to title


Lists and Tables

Lists (can be nested within one another):

<ul> - unordered list, <ol> - ordered (numbered) list, <li> - parameter in list

<ul>
	<li>item in list</li>
	<li>another item</li>
	<li>yet another item</li>
</ul>
  1. item in list
  2. another item
  3. yet another item

An ordered list has the possible attributes "start" (beginning number), "type" (1, A, a, I, i) and "reverse" (9, 8, 7...)

Tables:

<table>, <tr> - table row, <th> - table head, <td> - table cell

<table>
<tr>
<th>Length(m)</th>
<th>Height(m)</th>
</tr>
<tr>
<td>20</td>
<td>30</td>
</tr>
<tr>
<td>40</td>
<td>10</td>
</tr>
</table>
Length(m) Height(m)
20 30
40 10

Advanced Tags

<br> - breaks line, used for thematic break in content; self-contained

<hr> - draws long line + breaks line, used for thematic break in content; self-contained

<div> (block-level) and <span> (inline) - divises section of text for specific CSS

<button> -

<blockquote cite="">:

indented text

<pre> - preformatted text, contains whitespace and line breaks as formatted in editor, great for ASCII art

    example of
            preformatted text
     going through multiple lines

<details> and <summary> - reveals hidden (dynamic) content:

Click here for more info

Extra text. The extra info can be inside anything, not just a paragraph.

<details>
	<summary>Click here for more info</summary>
	<p>Extra text</p>
</details>

Embedding Audio and Video

Embedding audio:

<audio controls>
<source src="sound.ogg" type="audio/ogg">
Your browser does not support audio.
</audio>

Embedding video:

<video controls>
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
Your browser does not support video.
</video>

Iframes

An iframe embed another file (like another html page) inside the page. Links can be opened through iframe if it is targeted.

<a href="newpage.html" target="embed">Open new page</a>
<iframe src="embedded_page.html" name="embed">
Your browser does not support iframes.
</iframe>

Hyperlinks can have a "target" attribute . It lets you choose where the content will open. _blank (new tab), _self (default), _parent (if the link is embedded inside another page, opens on the parent page), _top (if embedded, opens on top) <a href="page.html" target="_blank">.


Fun Things

<p contenteditable> - allows removing of text

<area> - define area inside image map

<img src="space.png" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="11,11,25,37" href="mercury.html">
  <area shape="rect" coords="34,44,270,350" href="earth.html">
</map>

<progress value="50" max="100"> -

<dialog open> - dialog window

<picture> - defines multiple images inside a container, requires CSS to be utilised

<picture>
  <source media="(min-width: 650px)" srcset="img_large.png">
  <source media="(min-width: 465px)" srcset="img_medium.png">
  <img src="img_small.png">
</picture>

Tags of Rare Use

<strong> - important text, similar to bold but bold is for generally highlighted

<em> - emphasized text, similar to italics but italics is for generally italicized

<cite> - title of work

<code> - printf("Hello world");

<kbd> - keyboard keys - press the A key

<q> - quote - This is good said George.

<abbr title="Full Title"> - abbreviation, reveal more info after hovering mouse/device - UFWiki

<figure> and <figcaption> - apply captioned text to image, paragraph...

<figure>
:-)
<figcaption>A smiley face.</figcaption>
</figure>
:-)
A smiley face.

Comment-Like Tags

These tags mostly mark the page for source readability.

<nav> - navigation panel

<main>

<foot> - footer

<address> - contact information

Note: As < and > are used in tags, they cannot be contained in text, use "&gt;", "&gt;", and "&amp;" for the ampersand itself instead.