Lesson 1.2.4 Resource - HTML and CSS Quick Reference Guide
Lesson 1.2.4 Resource - HTML and CSS Quick Reference Guide
HTML
Tag What it defines Example Usage
<!--…--> A comment <!-- This is a comment --> Use comments to explain your HTML code
<!
This must be the first line in your HTML document. It has no
DOCTYPE The document type <!DOCTYPE html>
closing tag.
>
<a href="http://www.australia.com"> The most important attribute of the <a> element is the href
<a> A hyperlink
Australian Tourism</a> attribute, which indicates the link's destination.
The <body> element contains all the contents of an HTML
<body> The document's body <body> (content) </body>
document, such as text, hyperlinks, images, etc.
<br> Line break <br> This tag has no closing tag
A section in the <div id="container"><h1>SEE AMAZING The <div> element is usually used with CSS to lay out a web
<div>
document SCENERY</h1> </div> page
<em>Get free information and travel
<em> Emphasised text Text will be displayed as italic in most browsers.
tips</em>
<form id="subscribe-form">
<p>
An HTML form for user The <form> element can contain form elements such as
<form> <label for="Firstname">Firstname: </label>
input <label> and <input>
<input type="text" name="firstname"> </p>
h1 to h6 have default sizes, which you can change if you
<h1> to <h1>This is heading 1</h1>
HTML headings need to. Use only for headings – not just to make text large or
<h6> <h2>This is heading 2</h2>
bold.
A container for all the <html> The <head> element must include a title for the document
<head>
head elements <head><title>New Zealand</title> </head> and can include styles and scripts.
<hr> Draws a horizontal line <hr> Use to separate two parts of the text or separate topics
Tells the browser that
<!DOCTYPE html>
<html> this is an HTML Place under <!DOCTYPE html>, above <head>
<html>
document
<img> An image <img src=newzealand.jpg width=90%> Use to place an image
Browsers automatically add some space before and after
<p> A paragraph <p>Explore the lakes of New Zealand</p> each <p> element. <p> tags are used for the content of a web
page
<strong> Emphasised text <strong>Book your flight now!</strong> Will be displayed as bold in most browsers
Style information for a <style>body {background-color: grey;} <style> is written in the <head> section and defines all the
<style>
document h1 {color: white; font-size: 24pt;} </style> styles for the document
1
Quick reference guide
CSS
<title> A title for the document <title>New Zealand</title> The title is displayed at the top of the window