What does HTML look like

 

task

Below is an example of what HTML code looks like. Note the colours - they show different parts of the code that we will discuss later.

Copy the text version of the code that is shown to the right. Paste it into Notepad and then save it with the extension .html

You have now created your very first web page. Open the file in a web browser to see what it looks like.


 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

 

HTML elements are the building blocks of HTML pages

HTML elements are represented by tags

HTML tags label pieces of content such as "heading", "paragraph", "table", and so on

Browsers do not display the HTML tags, but use them to render the content of the page


All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

(see example at the top of the page!)

An HTML element usually consists of a start tag and end tag, with the content inserted in between:

<tagname>Content goes here...</tagname>

Example of Basic Tags

Type of Element

Example

Headings

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

Paragraphs

<p>This is a paragraph.</p>

Links

<a href="https://www.google.com.au">Click Here for Google</a>

Images

<img src="images/Loreto_Crest.png" width="150" height="129" alt="Loreto"/>

Please note: HTML Attributes can have Values. In the example above width has a value of 150