Sample Website

This is Page 3

HTML and CSS

HTML stands for Hyper Text Markup Language

HTML is a markup language used to design websites.
With HTML, we can create web pages and even entire websites.
In html we use tags. Most tags have an opening < > and closing < /> tag.
The content of your page (text, images, etc.) goes in between these tags.
There are tags for bold, italics, paragraphs, headers, links, images, and so on.

Necessary tags in each html page are the html tag, head tag, body tag, and DOCTYPE.
I like to include a title tag also, as it reflects the title of your page in the browsers title bar.

Every page needs to include the tags below:

DOCTYPE tag <!DOCTYPE html> - specifies to browsers which Document Type is being used.

Opening html tag <html> - everything between this tag, and matching closing tag is html.

Opening head tag <head> - contains title and other metadata stuff used by search engines.

Closing head tag </head> - used to close off head section and begin body section.

Opening body tag <body> - used to begin main content of your pages

Closing body tag </body> - end of content

Closing html tag </html> - end of html (also the last line).

In that order.

The title tag is not necessary for the site to work, it is optional.
If you include a title tag, place it between the opening and closing head tags (head section).

Example:

<!DOCTYPE html>

<html>

<head>
<title>Home Page</title>
</head>

<body>
Content goes here (between the body tags).
</body>

</html>

That's it.
Notice, all tags have closing tags, except the doctype, which doesn't need one.
If you save that little bit in a text editor (i.e. test.html)
and open it in a browser, you will see that it works.

CSS stands for Cascading Style Sheet

A style sheet is used to style your website.
Everything on your website (text, margins, borders, images, etc.) has properties.
Using style sheets (css) makes designing your website easy by assigning certain properties
to elements within your website.
For instance, if you want all the headers on every page of your site to be the same font, size, and color, you would do this in your style sheet.
If you want all bold text to be Arial, 12pt, green. You would assign those properties in the css file.

Example:

b {
font-family: Arial, Times, sans-serif;
font-size: 12pt;
color: green;
}

Notice the curly brackets and semi-colons, both must be used, and in place.
We also name 3 fonts here, arial is priority (first in line).
If for some reason, someone doesn't have that font installed on their system, times (second in line) would then be used, if that fails, serif would be used. Think of these extra fonts as back-ups.

With CSS, indentation is not absolutely necessary, but keeps code neat, and easily read-able. Also, it's good practice, and sometimes (with other languages) is necessary.

CSS has come a long way and is very useful in many ways. It is very much worth learning if you're into Web Design.

• back to top •

Updates & Other Notes
(in descending order)

Update 5 - Mar 25th, 2023
Small changes here and there. Fixed some typos and other little things.

Update 4 - Nov 11, 2022
Uploading files to GitHub.

Update 3 - Oct 31, 2022
GitHub Pages? Yes you can absolutely use this for GitHub Pages. Short guide on how to do that on page 2.

Update 2 - Oct 30, 2022
At first, this was a 2 column layout, but because I had a lot of space on the right side (almost equal to left) I added a 3rd column here, which turned out for the better since I am actually using it now.

Update 1 - Oct 29, 2022
Eventually I will put any updates and other notes here, in descending order (most recent at top).