2. Outline
• What is HTML?
• Webpage Structure
• What is an Element?
• Common HTML elements
• Commenting HTML
3. Learning Outcomes
• Basic knowledge of Web Design using HTML
• Create a simple web page using the
fundamental HTML Elements
• Display images on a web page
• Including external web pages
• Basic page layout techniques
4. What is HTML?
• A markup language for describing web
documents (web pages).
• Stands for Hyper Text Markup Language
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document
content
6. HTML Tags
• Keywords (tag names) surrounded by angle
brackets:
– <tagname>content</tagname>
• Usually come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the
second tag is the end tag
• The end tag is written like the start tag, but
with a slash before the tag name
7. Web Browsers
• Read HTML documents and display them
• The browser does not display the HTML tags
• Uses tags to determine how to display the
document
• Examples
– Chrome, IE, Firefox, Safari, Opera, Edge
9. <!DOCTYPE> Declaration
• Helps the browser to display a web page
correctly.
• Different document types exist
• Browser must know both type and version.
• The doctype declaration is not case sensitive.
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
10. Common Declarations
• HTML5
– <!DOCTYPE html>
• HTML 4.01
– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
• XHTML 1.0
– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
16. Exercise 1 : Document
• Let’s start by defining the basic structure of your website.
• Create a new folder for your work called “web101”.
• Then inside this folder create a new file called
“index.html”.
• open and close a set of <html></html> tags
• Within this, create the head and body tags
• If you load this in your browser, do you see anything on the
page?
• Now inside your head tag create a <title> tag with I love
owls as your title.
• You should see that the tab bar has changed. If not, double
check your code.
18. HTML Heading
<h1>This is a heading1</h1>
<h2>This is a heading2</h2>
<h3>This is a heading3</h3>
<h4>This is a heading4</h4>
<h5>This is a heading5</h5>
<h6>This is a heading6</h6>
19. HTML Paragraph
• Putting content into a <p> tag will break your
text up into paragraphs.
• This helps make the content of your page
easier to read for the user.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
20. Exercise 2: Paragraphs
• Add a h1 heading tag, which includes the word
Owls, inside the body tag of your page.
• Add the following paragraph inside
your <body> tag, after the <h1>:
<p>
Most birds of prey sport eyes on the sides of their heads,
but the stereoscopic nature of the owl's forward-facing eyes
permits the greater
sense of depth perception necessary for low-light hunting.
</p>
22. Exercise 3: Links
• Let’s add a link to the bottom of your
paragraph:
<a href="http://en.wikipedia.org/wiki/Owl">More information about
owls...</a>
23. HTML DIV
• A div tag lets you group elements together.
• Grouping elements is useful as we can later
style them together (e.g. giving them all the
same colour).
24. Exercise 4 : DIV
• Wrap your existing paragraph and link in a div
and add a new heading to it.
<div>
<h1>Owls</h1>
<p>Most birds of prey sport eyes on the sides of their heads, but the
stereoscopic nature of the owl's forward-facing eyes permits the greater
sense of depth perception necessary for low-light hunting.
<a href="http://en.wikipedia.org/wiki/Owl">More information about
owls...</a>
</p>
</div>
25. HTML List
• There are two types of lists that can included
on a webpage,
– ordered and unordered.
• An unordered list <ul> is defined with bullets
• An ordered list <ol> uses a numbered
sequence.
26. Exercise 5: Lists
• Let’s create a new <h2> then underneath list
the reasons we love owls:
<h2>Why do I like owls so much?</h2>
<ol>
<li>they are adorable</li>
<li>and lovely</li>
<li>and cuddly</li>
</ol>
27. HTML Images
• Images are primarily made up of three attributes
• the <img> tag
– src attribute lets the page know what image we want
to view
– alt attribute provides extra information if the image
cannot be seen on the webpage for any reason
• to see an image on the webpage we need to link
to the image
• this involves telling the webpage where it is and
what it is called.
28. Exercise 6: Images
• Before the main heading of the page, add a
logo image
• The src of the image points to the images
folder
• We have given it a relevant alt attribute
<img src="images/logo.png" alt=”Some logo ">
29. Exercise 7
• Let’s add some more images. This time, we’ll put
them in a list.
• Do this underneath the <h2>Why do I like owls so
much?</h2> heading.
<ul>
<li><img src="images/img1.jpg" alt="adorable"></li>
<li><img src="images/img2.jpg" alt="lovely"></li>
<li><img src="images/img3.jpg" alt="cuddly"></li>
</ul>
30. Formatting Text
• Text can be emphasised or made important.
• Use <strong> for emphasis,
• Use <em> for importance
31. Exercise 8: Formatting
• Let’s emphasise some of the content of your
paragraph
<p> Most birds of prey sport eyes on the
sides of their heads, but the stereoscopic
nature of the owl's forward-facing
<strong>eyes permits the greater sense of
depth perception</strong> necessary for
low-light hunting. </p>
32. HTML Commenting
• You can use a special kind of tag to add notes
to our page that the computer will ignore.
• Comments are particularly useful when
wanting to remind yourself, or other
programmers, how your code works.
<!-- Note to self: this is where the header goes -->
33. Exercise 9: Twitter Share Link
• Add a share on twitter link along with your
other sharing links
<a href="http://twitter.com/home?status=I love
HTML! via @hawkmanacademy">Share your love
HTML on twitter</a>
35. Resources
• HTML elements
– https://developer.mozilla.org/en/docs/Web/HTML/Element
• Special characters
– http://htmlandcssbook.com/extras/html-escape-codes
• The Bare Bones Guide to HTML
– http://werbach.com/barebones/barebones.html
• Web Design Frameworks
– Bootstrap - http://getbootstrap.com/
– Bootstrap Themes - http://wrapbootstrap.com/
Notes de l'éditeur
The DOCTYPE declaration defines the document type to be HTML
The text between <html> and </html> describes an HTML document
The text between <head> and </head> provides information about the document
The text between <title> and </title> provides a title for the document
The text between <body> and </body> describes the visible page content
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes a paragraph
Using this description, a web browser can display a document with a heading and a paragraph.
If you wanted to make this an unordered list, what would you change? How could you check it worked? Try it, then change your list back to an ordered list.
