Guide To HTML Website Building Basics

- HTML -
Basic HTML file structure template

If you have already selected HTML as your file’s language in Visual Studio Code (VS
Code), you can shortcut this by typing ! and hitting enter/tab.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Headings
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>
Makes heading text so it pops out for sub-headings.
Paragraph
<p>This is a paragraph</p>
A normal text paragraph.
Text stylings
<b></b> - Bold text
<strong></strong> - Important text
<i></i> - Italic text
<em></em> - Emphasised text
<mark></mark> - Marked text
<small></small> - Smaller text
<del></del> - Deleted text
<ins></ins> - Inserted text
<sub></sub> - Subscript text
<sup></sup> - Superscript text
To add extra decoration to your normal paragraph text. Don’t use them on their own,
always make sure you use them inside the paragraph element.
(Strong is the same as i, important is the same as b)
Images
<img src="thisIsMyImage.img" alt="This is an image of me!">
Displays an image.
● src - the name of your image file
● alt - some extra text to describe the images to screen readers (for visually
impaired people)
Videos
<video src="cat_sleeping_video.mp4" width="500" controls>Video not supported</video>
Displays a video
● src - the name of your video file
● controls - displays the video controls (play button, pause button, etc.)
● The text “Video not supported” will be displayed if there is an error showing your
video
Unordered + ordered lists
<ul>
<li>Himalayan</li>
<li>Chartreux</li>
<li>Bengal</li>
<li>Abyssinian</li>
<li>Persian</li>
</ul>
<ol>
<li>USA</li>
<li>China</li>
<li>Russia</li>
<li>Brazil</li>
<li>France</li>
</ol>
For making lists:
● ul - makes a bullet point list
● li - the list items
● ol - makes a numbered list (1., 2., 3., etc.)
Divs
<div>
<h1>This is a heading</h1>
<p>This is some text</p>
</div>
Used to create sections in your HTML code. Useful for styling blocks of elements in CSS.
IDs + Classes
<div id="introduction" class="article">
</div>
IDs and Classes allow to distinguish different elements when styling in CSS. They are
always in the opening tag of an element, and can be used in any element.
● IDs: Used only for a single unique element
● Classes: Used for many elements that need to share the same style
Links
<a href="anotherHTMLfile.html">This is a link to another HTML file</a>
<a href="https://www.wikipedia.org/" target="_blank">Link to Wikipedia</a>
Used to link to either other HTML files or websites. The target attribute specifies where
to open the linked document. There are two different values to choose from:
● _blank: opens the page in a new tab
● _self: opens the page in the same tab as the HTML file
Title
<title>My New Website</title>
Used in the head tag only. Allows for you to change the website’s name to whatever you
like and will be displayed on your browser’s tab.
Linking an external stylesheet (CSS)

<link href="styles.css" rel="stylesheet">
For linking an external CSS file to your HTML file. Used in the head tag only.
- CSS -
Selectors
/* Universal */
*{
background-color: aqua;
}
/* General */
body {
background-color: bisque;
}
/* ID */
#header {
background-color: brown;
}
/* Class */
.column {
background-color: cadetblue;
}
There a four selector types:
● * : universal, which selects every single element in your HTML
● general: these are when you select the type of HTML element, like body, p, h1,
etc. Any element in your body tag can be selected.
● ID: these are the ID names you set for an element.
● Class: these are the class names you set for an element
Properties
These are all the properties you can use to style elements. A link to w3schools is
provided so you can see all the values you can use. Don’t be limited by these only,
explore other stylings and experiment with them in your code. You can check out
https://www.w3schools.com/css/default.asp for small tutorials on how to do certain
things.
color: https://www.w3schools.com/cssref/pr_text_color.php
Changes the colour of the text. You can use either the built-in colours, RGB values or a
HEX value (#ffffff would be white)
text_align: https://www.w3schools.com/cssref/pr_text_text-align.php
Aligns the text to either the center, left or right.
font-family: https://www.w3schools.com/cssref/pr_font_font-family.php
Change the font. You can either use the built-in fonts or specify your own using Google
Fonts.
height/width: https://www.w3schools.com/css/css_dimension.asp
Changes the height/width of the element.
padding: https://www.w3schools.com/css/css_padding.asp
Create space around an element so it feels less cramped up
borders: https://www.w3schools.com/css/css_border.asp
Create a border around an element
margin: https://www.w3schools.com/css/css_margin.asp
Create space around the elements

Guide To HTML Website Building Basics

Uploaded by

Copyright:

Available Formats

Guide To HTML Website Building Basics

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Guide To HTML Website Building Basics

Uploaded by

Copyright:

Available Formats

- HTML -

Basic HTML file structure template

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Makes heading text so it pops out for sub-headings.

Linking an external stylesheet (CSS)

You might also like