Transcript
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
HTML Page Structure
<!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 YearHTML 1991HTML 2.0 1995HTML 3.2 1997HTML 4.01 1999XHTML 2000HTML 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
Brackets Demo
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><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>
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.
<!-- Note to self: this is where the header goes -->
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>
Questions
?
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/
top related