Web 101 intro to html

Outline
• What is HTML?
• Webpage Structure
• What is an Element?
• Common HTML elements
• Commenting HTML

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

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

HTML Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

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

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

<!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>

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">

HTML Versions
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML 5 2014

What is CSS?
• Used with HTML to style the page.
• No CSS Today!
• Will be covered in the WEB 102 : Intro to CSS

Editors
• Basic Editors
– NotePad
– TextEdit
– Vim
• Power Editors
– Sublime Text
– Brackets
• Professional Editors
– Microsoft WebMatrix
– DreamWeaver

HTML Document
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

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.

Solution 1
<!DOCTYPE html>
<html>
<head>
<title>I love Owls</title>
</head>
<body>
</body>
</html>

HTML Heading
<h1>This is a heading1</h1>

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>

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>

HTML Links
<a href=http://www.meetup.com/learnsoftwaredevelopment>Us on Meetup</a>
• A link lets the user click through to another
webpage.
• The href attribute is used to indicate where you
want the user to go when the link is clicked

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>

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).

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>

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.

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>

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.

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 ">

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>

Formatting Text
• Text can be emphasised or made important.
• Use <strong> for emphasis,
• Use <em> for importance

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>

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.

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>

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/

Web 101 intro to html

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Web 101 intro to html

Similar to Web 101 intro to html (20)

More from Hawkman Academy

More from Hawkman Academy (11)

Recently uploaded

Recently uploaded (16)

Web 101 intro to html

Editor's Notes