HTML
Hyper Text Markup Language (HTML) is a markup language. The language provides code for formatting the layout and style of a web page.
HTML
Creates the content of the webpage
CSS
Is used to change the appearance of the webpage
Javascript
Is used to add interactivity to the webpage
Main Tags and Structure
<!DOCTYPE html>
<HTML>
<head>
<title></title>
</head>
<body>
</body>
</HTML>
<!DOCTYPE html> - This lets the browser software know the version of HTML it is about to find in the file. It should come before the opening <html> tag.
HTML - Encloses all other content of the page.
HEAD - title, css, scripts and meta tags
TITLE - The title tag which goes in the head area is displayed in the browser window/tab.
BODY - The content of the page goes here
Text Tags
Paragraph Tags
The paragraph tag is <p> and will take a new paragraph break within a section of text.
<p>This is the first paragraph of text. There should be an empty line of text after it</p>
<p>This is the second paragraph. You will notice that the tags are closed and opened.</p>
Headings
The HTML heading elements ( <h1> to <h6> ) are used to show six levels of section headings.
<h1> is the largest heading with <h6> being the smallest.
<h1>Heading level 1 is the largest</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6 is the smallest</h6>
Lists
Unordered Lists
<ul>
<li>Each item is in a list item tag</li>
<li>Each item is in a list item tag</li>
<li>Each item is in a list item tag</li>
</ul>
Ordered Lists
<ol>
<li>Each item is in a list item tag</li>
<li>Each item is in a list item tag</li>
<li>Each item is in a list item tag</li>
</ol>
Text Styling
The HTML <br> element produces a line break in text.
<p>
The UK is made up of different countries.<br>
Scotland is one of these.<br>
<br> <br>
The Capital of Scotland is Edinburgh.
<p>
<p>In a block of text, we can style certain parts using special tags.
<br>
<b> will make text <b>bold</b>,
<br>
<i> will put text in <i>italics</i>
<br>
<u> will <u>underline.<u>
</p>
Media Tags
Image Tags
<IMG> allows you to display graphics on your webpage.
Here is an example piece of code:
<img src = “grand_canyon.jpeg” alt = “This is a photo of the Grand Canyon”>
The alt part of the tag is used to display text in the event the graphic cannot be loaded. It lets the user know what they should be looking at.
Audio
<AUDIO> allows your browser to display an audio player and play an audio file.
Here is an example piece of code:
<audio controls>
<source src = "audio.mp3" type = "audio/mp3">
</audio>
Video
<VIDEO> allows your browser to display an video player and play a video file.
Here is an example piece of code:
<video controls>
<source src = “video.mp4" type = “video/mp4">
</video>
Links and Layout
Hyperlinks
This tag allows you to link to a new webpage or website.
The link tag uses the following format:
<a href = “hyperlink path”> Text you want to appear on your page as a hyperlink </a>
An example piece of code is below:
<a href = "https://www.bbc.co.uk/sport"> Click to navigate to the BBC Sport webpage </a>
Anchor Link
This tag navigates you to a different part of the page you are on. Two things are needed:
An anchor hyperlink
An anchor further down the page to link to
An example of an anchor hyperlink:
< a href = “#video_section”> Click to go to the video section of the page </a>
An example of an anchor used further down the page:
<h2> < a id = video_section” > </a> Video section </h2>
DIV Tag
The <div> tag is used for defining a section of your document and assigning it a name.
With the div tag, you can group large sections of HTML elements together and format them with a CSS.
<div id = “first_section”>
HTML code
</div>
<h1>Using Div Tags</h1>
<div style="background:lime">
<h3>This is a heading in a div element. And all content inside it is styled the same.</h3>
<p>This heading is inside the original div</p>
</div>
<div style="background:lightblue; font-size:12px; color:red;">
<p>This is some text in a seperate div element. All content inside it is styled the same.</p>
</div>
<p>This is some text not inside a DIV.</p>
