HTML GETTING STARTED

HTML | GETTING STARTED

ON THIS PAGE
SECTION 1 | GETTING STARTED WITH HTML
SECTION 2 | HELLO WORLD AND TAGS
SECTION 3 | FOLDER STRUCTURE
SECTION 4 | ABOUT CSS

ALSO IN THIS TOPIC
HTML HOME
YOU ARE HERE | GETTING STARTED
HTML TAGS AND ELEMENTS
PAGE STRUCTURE AND LAYOUT
FORMS AND USER INPUT
CSS WITH HTML
HTML QUICK REFERENCE

SECTION 1 | GETTING STARTED WITH HTML

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 <head> section contains meta-information about the document, such as the title of the page (which appears in the browser's title bar or tab), character encoding, and links to external resources like CSS stylesheets or JavaScript files. It is important to note that the content inside the <head> tag is not displayed on the web page itself.

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.

<!DOCTYPE html>
<html>
<head>
<title>MY WEBSITE</title>
</head>
<body>
<p>Hello World</p>
<h1>My first webpage</h1>
</body>
</html>

The code above explained.
DOCTYPE - Looking at the code you will firstly see the DOCTYPE Tag, this is not actually needed however for not keep it as good practice to keep it in.
HTML - You will notice that the opening HTML tag is at the very start and the closing HTML tag is at the end, this tells the browser that all code between the two tags is HTML language, later you will see other tags such as JAVASCRIPT.
HEAD - Holds details about the webpage that are not displayed on the page itself, such as the header.
TITLE - Holds the text that you would like to appear in the header of the web browser (not on your page). For example this page header should be -HTML COMPUTER SCIENCE CAFE
BODY - This is all the content of the webpage. For now just 'Hello World', however later will include buttons, menus, image and dynamic elements.
P - This is the paragraph tag, you can set different text styles and we look at this in the CSS section
H1 - This is another tag to allow you to write text on your web page, different text tags are used to allow you to easily differentiate between text styles, fonts and sizes.

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.

NAVIGATION

GETTING STARTED | Your first webpage
HTML TAGS AND ELEMENTS | An introduction to common tags and elements
PAGE STRUCTURE AND LAYOUT | The concepts of structuring your page
FORMS AND USER INPUT | Various methods of user input such as text box and drop downs
CSS WITH HTML | The relationship between HTML and CSS
HTML QUICK REFERENCE