HTML

Organize your files

Organize your things. If you have a big website with a lot of site, then you will be confused if you dont organize your things

Folder

Make a folder to keep things separated.

Folder structure
Example: 1.2.1

File names

When naming your files, choose filenames that make sense and follow the rules below.

URL

URL is a web address to your site.
Here is an example on an URL.

https://www.sub.example.com:3000/path/resource?id=123#section-id
Example: 1.2.2

This might seems a bit hard to understand. Therefore can this example be better

https://dominoeffekten.dk/click.html#operators
Example: 1.2.3

What is HTML?

HTML stands for Hyper Text Markup Language. It is the standard markup languange for web pages. HTML elements are the building blocks of HTML pages, and are represented by < > tags.
The browser window shows exactly the same content that you have made in you coding program.
HTML elements is a start tag <, a end tag > and the content in between

HTML is the skeleton. It provides the basic structure of sites.


CSS is the body. It is used to control the design of the site.


HTML structure

When we are making a webpage does it consits of some basic elements.

Website structure

A visual strucure of a website structure look likes this:

HTMLStructure
Example: 1.2.4

A coded strucure of a website structure look likes this:

<!doctype HTML> 
<html lang="da-DK">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Something something so the site can be found on Google">
<title>This is a site</title>
</head>

<body>
<main>
<section>
<h1>This is a heading</h1>
</section>
</main>
</body>
</html>
Example: 1.2.5

<!doctype HTML>

Doctype stands for Document Type declation or doctype. It tells the browser what type of document.

<html>

Is the root element of an HTML page.

<head>

The head section is a container for metadata (data about data).

<meta>

The meta tag defines metadata about the HTML document. The meta tag always go inside the head element, and are typically used to specify character set, page description and viewport settings. Metadata will not be displayed on the page, but is machine parsable.

<title>

Specifies a title for the document. It must be placed after the meta charset tag.

<body>

Contains the visible page content on the site

<!--comment -->

Make a commet to your code that will not visible in the user's browser

Semantic Markup

A webpage is all about boxes, with alot of content. When you see a website there are often a lot of text, and pictures, but in the back there are a lot of boxes with the text, so we can place the elements in relation to other elements. In HTML there are two types of boxes used to group pices of content. There are the semantic ones and the non-semantic ones.
Non-semantic elements like a div element, does not give the browser any clue of what the content in them are. They are like moving boxes with no description
The most commen non-semantic elements are:

Semantic elements are elements with a meaning. They are moving boxes with a description. In that way the browser know what the content in them are.
The most commen semantic elements are:

Semantic

But why use them?

Header

The header element are used for introduction content or a navigation.
It often contains:

<header> ... </header>
Example: 1.2.6

Nav

The nav element defines the main navigation links. It represents a group of navigation links. The most commen use for nav will be for wrapping an unordered list of links

<nav> ... </nav>
Example: 1.2.7

Main

The main element specifies the main content of a document. It is normallye a sibling to the header and footer elements.

<main> ... </main>
Example: 1.2.8

Section

The semantic tag section defines a section on the web page. It often have a heading and one or more paragraphs.
It often contains:

<section> ... </section>
Example: 1.2.8

Article

The article tag specifies independent, self-contained content.
It is often uses for

<article> ... </article>
Example: 1.2.9

Footer

The footer element defines a footer for a document or section. the position of the element are normally at the end of a section, or bottom of a page.
It often have informations about

<footer> ... </footer>
Example: 1.2.10

A website

<!doctype HTML> 
<html lang="da-DK">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Something something so the site can be found on Google">
<title>This is a site</title>
</head>

<body>
<header>
<nav>
</nav>
</header>
<main>
<section>
<h1>This is a heading</h1>
</section>
</main>
<footer>
<p>This is a footer</p>
</footer>
</body>
</html>
Example: 1.2.11

How add a CSS file

We have talked about how a website should be build, but if we want it to be pretty do we need to add a CSS file

<!--head-->
<link href="../css/stylesheet.css" rel="stylesheet" type="text/css">