Firstly you need to choose a platform to type your HTML code, this can be anything from notepad to Visual Studio Code, as long as you save your code with the file extension .html the code should run in your browser. Visual Studio Code is our chosen platform for this section and Microsoft Edge for the web browser.
GET VISUAL STUDIO CODE
SECTION 2 | HELLO WORLD
The structure of an HTML document is quite simple, yet essential for browsers to understand and display the content correctly. Every HTML document begins with a doctype declaration, which specifies the version of HTML being used. For example, the doctype for HTML5 is <!DOCTYPE html>.
To get started with HTML is quite simple, however it can quickly get complex. One of the key aspects to HTML are tags. Tags are like markers, you have an opening tag and a closing tag, the tags mark what the content between the opening tag and closing tag does. For example a <p> tag marks the start of a paragraph and the </p> tag marks the end of that paragraph. Not all tags have a closing tag for example the tag to insert a line break/blank line is <br> and it does not need a closing tag.
Following the doctype, the HTML document is enclosed within opening and closing <html> tags. The content of an HTML document is divided into two main sections: the <head> and the <body>.
The <body> section is where the actual content of the web page resides. This is where you'll use various HTML elements, such as headings, paragraphs, lists, images, and links, to create the content and structure of your web page.
Creating your first 'Hello World' website is quite easy, copy the code below and then to run the code right click on the file and select 'open with' then select your web browser to open the file.
SECTION 3 | FOLDER STRUCTURE
Before continuing it would be a good idea to set up the correct folder structure for saving your work, this will make thinks easier as your code develops. Setting up the correct folder structure is also discussed in the CSS section so if you have already done it then skip this part.
Having this folder structure will make it easy for various pages and elements of your website to link to each other.
Choose where you are going to save your work. 1: Create a folder to hold you work, call it anything you want - keep it meaningful (myWebsite). 2: Inside the folder you created, create a subfolder called 'templates' 3a: Create another folder inside the first folder your created, call it 'static' 3b: Inside the folder called 'static' create another folder called 'css' 3c: Inside the folder called 'static' create another folder called ' images' See the example folder structure below
When you create your HTML file, save it in the route folder (in this example 'MY WEBSITE'), and ensure your folder structure is the same as above. The folder named MY WEBSITE can be called anything you like, but the other folders need the exact name and the exact structure. Don't worry about the two files 'main.py' and myStyles.css' we will create these later.
SECTION 4 | ABOUT CSS
What comes first, the content or the style? At this point you are probably wondering how to style your text, add colour, a background and more. You can do this in HTML, however a more efficient method is to set up a style template in CSS and attach it to your HTML pages and the style will automatically be inherited. So you question at this point is:
Do I continue with HTML then add the style later?
Do I learn about CSS and then come back to HTML?
Do I learn HTML and CSS side by side?
There might not be any one answer for this chicken and the egg question. On this page we cover HTML then add the CSS code later. If you want to learn side by side or the CSS first then Click here to open the Learn CSS page.
Whilst you might be keen to start to add some styles to your website we would recommend progressing with some more HTML first. The next section looks at more tags you can use such as <img> to add images and <a> to add links.