Course Notes

Course 4542
Getting Started With HTML
4542/CN/A.2/510/A.1
© LEARNING TREE INTERNATIONAL, INC.
All rights reserved.
All trademarked product and company names are the property of their
respective trademark holders.
No part of this publication may be reproduced, stored in a retrieval system, or

transmitted in any form or by any means, electronic, mechanical, photocopying,
recording or otherwise, or translated into any language, without the prior written
permission of the publisher.
Copying software used in this course is prohibited without the express

permission of Learning Tree International, Inc. Making unauthorized copies of
such software violates federal copyright law, which includes both civil and
criminal penalties.
Introduction and Overview
About Your Course Instructor
 Background and education
 Current position
 Experience
© Learning Tree International, Inc. All rights reserved. Not to be reproduced without prior written consent. Intro- 2
Course Schedule
 The course will follow this schedule:
• Start Class
• Morning Break
• Lunch
• Resume Class
• Afternoon Break(s)
• End Time
• Bonus Session
Maximize Your Course Experience
 To maximize the effectiveness of your course, we encourage you to:

• Interact frequently with your instructor and classmates
• Request clarification and further explanation at any time before, during, and
after your course
 Communication protocols:
• If you have any questions, please Chime In to
notify your instructor—especially if you’ve sent
your question using the Chat pod
• If you are using speakers, please keep the
volume low, or mute your microphone when not
speaking to avoid an echo
Need help?
If you experience any technical issues during your course, simply click the Get Assistance
button on your AnyWare Dashboard, or call:
— North America: 1-877-653-8733
— Sweden: 08-506 668 82
— United Kingdom: 0808 722404 or + 44 (0)1372 368960 (outside the UK)
Course Objectives
In this course, you will learn how to
 Develop web pages using HTML5
 Display page content in tables or lists
 Enhance pages with images and links to other documents
 Style content with CSS
© Learning Tree International, Inc. All rights reserved. Not to be reproduced without prior written consent. Intro-5
Course Contents
Introduction and Overview
Chapter 1 Introduction to the World Wide Web
Chapter 2 HTML Syntax
Chapter 3 CSS Styling and Layout
Chapter 4 Course Summary
Next Steps
Our Classroom Environment
In our public courses, we use the following setup:
 Desktop/clients
• Microsoft Windows
• Google Chrome web browser
• Firefox web browser
• Microsoft Internet Explorer
• Opera web browser
• TextPad text editor
• WebStorm IDE
• Notepad++
• Komodo Edit
Hands-On Exercises
 Exercises are located throughout the course
• To help reinforce your learning
 Many have “if you have more time” sections
 Solutions are provided for all exercises
• Located in the C:\web4542\exercises\solutions directory
• Can also be downloaded from My Learning Tree
Chapter 1
Introduction to the World Wide Web

Chapter Objectives
In this chapter, you will
 Investigate the components of the World Wide Web
 Explore the course case study
© Learning Tree International, Inc. All rights reserved. Not to be reproduced without prior written consent. 1-2
Chapter Contents
 Fundamentals of the
World Wide Web
 HTML
 Hands-On Exercise 1.1
Key Components of the World Wide Web
 Client/server architecture
• Web browsers (client) interact with web servers (server)
 Protocol
• Hypertext Transfer Protocol (HTTP)
• Application layer protocol, works on top of TCP/IP
 Markup language
• Hypertext markup language (HTML)
– Displayed by web browsers
• Uses CSS for presentation
 Programming Languages/Frameworks
• Provide client-side and/or server-side functionality
• JavaScript, Java JSP/Servlets, PHP, ASP.NET, etc.
The Hypertext Transfer Protocol (HTTP)
 Web browsers and web servers communicate using HTTP
 HTTP is an application-level protocol
• Requires a TCP/IP connection to be established
• Default port number is 80
– http://www.ltree.com
• Servers can listen on any port number
– http://www.ltree.com:81
HTTP
TCP
IP
Subnetwork
TCP/IP = Transmission Control Protocol/Internet Protocol
Overall Operation of HTTP
Internet/intranet
Web browser Web server
TCP/IP—HTTP
Request Request
Response Response
Client action Server response

1. Browser sends an HTTP request for a document Server responds with the document
2. Client parses the HTML document and sends a
request for page resources (images, style sheet, Server responds with the resource
etc.)
3. Browser continues to request required resources Server responds with the resource
HTML
 Hypertext Markup Language
• A text-based markup language used to create web pages
– Structure and meaning are applied to the content with the use of tags
• Downloaded, interpreted, and displayed by browsers
 This course will focus on creating HTML pages
• Provides an introduction to HTML and CSS
• The markup language for our content
Programming Languages/Frameworks
 Programming languages/frameworks can be used to extend functionality
• HTML, CSS, JavaScript are interpreted by the browser
• Most other items are executed on the server
Web browser Web server
• HTML • Java JSP/Servlets

• CSS • ASP.NET
• JavaScript • PHP
• etc.
CSS = Cascading Style Sheets
JSP = Java Server Pages
PHP = PHP Hypertext Processor
Chapter Contents
 Fundamentals of the
World Wide Web
 HTML
HTML5 Semantics and APIs
 HTML5 functionality can be grouped into three categories:
1. Semantics to define page structure and meaning
– Elements, attributes
2. Cascading Style Sheets (CSS) to control page styling and appearance
3. Application Programming Interfaces (APIs) to allow access to:
– Offline Storage—application cache, localStorage, IndexedDB
– Device Access— geolocation, A/V input, tilt orientation
– Connectivity—WebSockets/server-sent push events, Web Workers
– Multimedia—audio and video
– 3D, Graphics, and Effects—SVG, canvas, WebGL, CSS3 3D features
SVG = Scalable Vector Graphics

WebGL = Web-based Graphics Library
HTML5 Semantics and APIs
 This course will provide an introduction to the HTML semantics and CSS
• Leverage HTML5 to define
– Page structure
– Meaning of content
– Relationships between content
– Can also improve search engine ranking and accessibility
• Leverage CSS to style the HTML for a variety of devices
 The HTML5 APIs require JavaScript
• Functionality is actually provided as JavaScript APIs that take advantage of
advanced browser features
• Important to have a strong understanding of JavaScript to leverage
• Beyond the scope of this course
– This course will focus on the semantic features
Course Case Study
 During the course, you will be working on the Nui Manu Airlines website
• You will explore the completed solution in the next exercise
 There will only be time during the course to edit a few of the pages
• Several additional pages are provided that have already been completed
– Included as examples and a reference
• All files are available to take with you
– Can continue to gain experience by editing them after the class
 Two of the completed pages contain forms
• Using forms on a web page requires server-side processing to handle the
form submission
• Beyond the scope of this course
• The forms on these pages currently cannot be submitted
– But are provided as a example of creating HTML forms
Chapter Contents
 Fundamentals of the
World Wide Web
 HTML
 Hands-On Exercise 1.1
AdaptaLearn™ Enabled
 Electronic, interactive exercise manual
 Offers an enhanced learning experience
• Some courses provide folded steps that adapt to your
skill level
• Code is easily copied from the manual
• After class, the manual can be accessed remotely
for continued reference and practice
 Printed and downloaded copies show all detail levels (hints and answers
are unfolded)
Using AdaptaLearn™ Do Now
1. Launch AdaptaLearn by double-clicking its icon on the desktop

• Move the AdaptaLearn window to the side of your screen or shrink it
to leave room for a work area for your development tools
2. Select an exercise from the exercise menu
• Zoom in and out of the AdaptaLearn window
• Toggle between the AdaptaLearn window and your other windows
3. Look for a folded area introduced with
blue text (not available in all courses)
• Click the text to see how folds work
4. Try to copy and paste text from the
manual
• Some courses have code boxes that
make it easy to copy areas of text
while highlighted (as shown)
Hands-On Exercise 1.1
In your Exercise Manual, please refer to

Hands-On Exercise 1.1:
Exploring the Complete Solution
Chapter Summary
In this chapter, you have
 Investigated the components of the World Wide Web
 Explored the course case study
Chapter 2
HTML Syntax
Chapter Objectives
In this chapter, you will learn how to
 Create HTML documents
 Format text with HTML
 Organize data as numbered and bulleted lists
 Use anchors to create links to other documents
 Enhance pages with images
 Organize information in tables
Chapter Contents
 HTML Syntax
 Lists and Anchors
 Images
 Tables
 Character Entities
Basic HTML Syntax
 HTML files consist of text whose content is described by elements
• Originally, HTML elements were used to define the style of the content
• Today, elements should be used to describe the “meaning” or “semantics” of
the content
• The actual styling should be controlled by Cascading Style Sheets (CSS)
 All elements of HTML are denoted by tags More on CSS on
• Tags are text enclosed within < > Chapter 3
• For example:
– <p> is used to define a paragraph element
– <table> tag is used to define a table element
 Tags usually appear in pairs

• To determine the scope of the element they define
• If the start tag is <xyz>, the corresponding end tag is </xyz>
• <p>This text is a paragraph</p>
• Some tags occur alone
– For example, the tag to draw a horizontal line, <hr>, or the tag to create
a line break, <br>
Basic HTML Syntax
 Many browsers apply default styling to be backward compatible
• For example: Most browsers will render <b> as bold and <i> as italic
– Even without using any style sheet
<b>This is bold</b> this is not

<i>This is italic</i>
<i><b>This is bold and italic</b></i>
 It is better to use semantic elements

• And define their exact styling in CSS
• <em> to apply emphasis to an element; most browsers default to italic
• <strong> to apply strong emphasis; most browsers default to bold
<strong>This is strong</strong> this is not

<em>This is emphasized</em>
<em><strong>This is strong and emphasized</strong></em>
Attributes of Elements
 Elements can be modified by attributes
• Attributes appear between the start tag name and the closing greater than ">"
• Attributes have a name and value, expressed as
– <tag attributeName="value">
• Tags can have multiple attributes in any order
 Example:
<img src="home.gif" width="100" height="100" alt="Home logo">
<p id="introduction">…</p>
 id attribute
• Every tag can have one
• The value of the id tag must be unique in the page
– Allows elements to be uniquely identified
id will be used later

with style sheets
HTML and XML
 The Standard Generalized Markup Language (SGML) is a language
specification for creating markup languages
• HTML is an application (or implementation) of SGML
• EXtensible Markup Language (XML) was created as a subset of SGML
 HTML documents can be written to be valid XML documents
• The HTML language does not change, just a few formatting/syntax rules
• Allows the HTML document to be processed by XML tools and applications
 Some view it as good practice to follow the XML rules
• Useful for other text- or XML-processing tools
• But is not required by HTML5
HTML and XML
 XML requires:
• HTML documents to be enclosed in <html> tags specifying the xmlns
attribute
– <html xmlns="http://www.w3.org/1999/xhtml"> … </html>
• All elements to always include end tags: <p> ... </p>
– For elements without end tags (or tags without data), insert a slash before
the closing tag: <hr />, <br />, <img ... />
• Lowercase for tags and attribute names
• Attributes values in quotes: <img src="myphoto.jpg" />
– For attributes that do not have a value, set the value to the name:
<area shape="default" nohref="nohref" />
• Tags should be nested properly
– <em><strong>This is nested properly!</strong></em>
– <em><strong>This is NOT nested properly!</em></strong>
HTML Document Structure
 HTML documents should have a head and a body
• The head contains information about the document
– Examples: <title>, <script>, <meta>, <style>
– The <head> is loaded first by the browser
• The body contains the content that is viewed
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<title> The title goes here </title>
</head>
<body>
The viewable part of the document goes here
</body>
</html>
HTML Document Structure
 A few items should always be specified in the <head>
• Character encoding using <meta charset="…"/>
– Encoding is the mechanism used to store characters in a file
– Examples: UTF-8, UTF-16, UTF-32 (8, 16, or 32 bits per character)
– Latin-based languages need only 8 bits to support required characters
• A title for the page using the <title> tag
– <title>The Page Title</title>
The <!DOCTYPE> Directive
 A DOCTYPE identifies which version of HTML is being used
• Must appear at the very top of every web page
• Short for “document type declaration”
• Used by the browser (or a validator) to render or analyze the page
 DOCTYPEs are essential for the proper rendering and functioning of pages
• A valid DOCTYPE causes browsers to operate in standards-compliant mode
– Browser will render the page according to W3C standards
• An incorrect or missing DOCTYPE causes the browser to render the page in
“quirks” mode
 The HTML5 DOCTYPE is very simple:
• <!DOCTYPE html>
W3C = World Wide Web Consortium
A Note About Course Examples
Every HTML document should always include the DOCTYPE and the
character encoding.
However, these items are often omitted from examples shown in the
course materials simply to conserve space on the slides.
The actual code in provided files for each example will contain these
items.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<title>Where we fly</title>
</head>
<body>
...
</body>
</html>
Browsers Are Tolerant
 Browsers follow the rule of being tolerant of mistakes in the input
• Tags and attributes they don’t understand are ignored
• Most browsers do not enforce or require many rules
– They do not insist that the document begin and end with <html>
– Element names can be in any case: <head> <HEAD> <Head>
– <head> and/or <body> can be omitted
• Can violate the HTML specification
 However, the results may be inconsistent
 It is a good idea to validate pages to ensure they adhere to the
specification
• More on this later
Paragraphs in HTML
 HTML tags must be used to define new lines and paragraphs
• White space and line breaks are normally ignored by browsers
• The <br /> tag defines a line break
• The <p> … </p> tags are used to define a paragraph
Since extra white space is ignored by browsers,

use white space to format your code for readability.
A Simple HTML Page
<html>
<head>
</head><body>

<h1>Vacation Destinations</h1>
O'ahu
Maui
Kaua'i
Grand Cayman
Curacao
Paris
Hong Kong
Stockholm
Toronto
Tokyo
C:\web4542\examples\ch2-SimplePage.html
</body></html>
 Why are all the destinations displayed on the same line?

• How could each destination be displayed on a separate line?
Example Displaying Headings
 There are six levels of headings: <h1, h2, ..., h6>
• Number indicates a logical size
• Browsers render them left aligned and bold
• Paragraph breaks automatically included before and after
<html>
<head>
</head>
<body>
</body>
</html>
 Why is each heading on a separate line?

C:\web4542\examples\ch2-Headings.html
Example Using the <p> Tag: HTML Source
<html>
<head><title>Paragraph tag example</title></head>
<body>
<p>
<strong>O'ahu</strong> is a rich and rewarding destination. O'ahu is the most
diverse of the Hawaiian islands with a dazzling array of attractions,
activities, and venues. Whatever your passion, O'ahu offers you an experience
unlike any other.
</p>
<p>
<strong>Kaua'i</strong> basks amidst the sparkling blue waters of the Pacific
Ocean. Formed six million years ago, the island encompasses roughly 550 square
miles and is the oldest and northernmost of the main Hawaiian Islands.
</p>
<p>
<strong>Grand Cayman</strong> is nestled in the calm, turquoise waters of the
western Caribbean. Grand Cayman is the largest of the 3 Cayman Islands and is
just 480 miles south of Miami.
</p>
</body></html>
C:\web4542\examples\ch2-Paragraphs.html
Example Using the <p> Tag: Browser Output
Horizontal Rule Example
 The <hr> tag was originally defined as a horizontal rule
• Used to draw a horizontal line across the page
 The HTML5 semantics defines an <hr> as a "Thematic break"
• Used to represent a change in topics, sections, concepts, etc.
• By default, browsers still render as a horizontal line for backward compatibility
– Can use CSS to customize the look
<html>
<head>
<title>Examples of a horizontal rule</title>
</head>
<body>
<h1>Examples of a horizontal rule</h1>
<p>This is the first paragraph</p>
<hr />
<p>This paragraph is a new topic</p>
</body>
</html>
C:\web4542\examples\ch2-HorizRule.html
HTML5 Semantics
 HTML5 added many new semantic elements to define
• Structure
• Meaning
• Relationships between content
• Can also improve
– Search engine ranking
– Accessibility
 A few semantic elements added in HTML5:
• <header>
• <nav>
• <menu>
• <article>
• <section>
• <aside>
• <footer>
HTML5 Semantics
 Exact meaning of many tags is up to the page designer
• header might be a branding area or masthead
• footer might contain legal notices, references, or footnotes
• Styling is controlled by CSS
 Meaningful to search engine crawlers and assistive technologies
Creating a Page Structure
 A common web page structure shown below
• Use the HTML semantic elements to define each region
• CSS can be used to position and style each region
• Common to create a template to use for all pages on a site
header <body>
<header>

</header>
<section>

menu
</section>
<nav>
content 
</nav>
<footer>

</footer>
</body>
footer C:\web4542\exercises\pageTemplate.html
Creating HTML Pages
 HTML pages can be created with any text editor
• Simple editors like Notepad, WordPad, etc. could be used
 For this class, the following editors are available
• WebStorm
– IDE for JavaScript, CSS, and HTML
– www.jetbrains.com/webstorm
• Notepad++
– Free editor with support for many programming languages
– notepad-plus-plus.org
• Textpad
– Simple, inexpensive editor with support for many programming languages
– www.textpad.com
• Komodo Edit
– Free, open-source editor with support for many programming languages
– komodoide.com/komodo-edit
• Icons for each editor can be found on your desktop
Chapter Contents
 HTML Syntax

 Images
 Tables

Formatting Web Pages With HTML <body> Elements
Chapter Contents
 HTML Syntax
 Lists and Anchors

 Images
 Tables
Ordered and Unordered Lists
 HTML supports both ordered and unordered lists
• Both lists follow the same pattern
Ordered list Unordered list

<ol> <ul>
Numbering <li>Item1</li> <li>Item1</li>
style <li>Item2</li> <li>Item2</li>
… …
<li>ItemN</li> <li>ItemN</li>
Bullet </ol> </ul>
symbol
Lists are indented
Unordered <ul> and Ordered <ol> Lists
 Unordered lists present data in a list with bullets
• The bullet type should be controlled with CSS
 Ordered lists automatically number or letter a list
• start attribute used to initialize the sequence
– Must be specified as an integer no matter which type
• type attribute can be used to select the numbering style
Type Style
1 1, 2, 3, …
a a, b, c, ...
A A, B, C, ...
i i, ii, iii, ...
I I, II, III, ...
Example of Lists
<html><head><title>Example of Lists </title></head><body>
<p>Destinations and their attractions</p>
<ul>
<li>Paris
<ul>
<li>Eiffel Tower</li>
<li>Louvre Museum</li>
<li>Notre Dame Cathedral</li>
</ul>
</li>
<li>Grand Cayman
<ul>
<li>Turtle Farm</li>
<li>Stingray City</li>
</ul>
</li>
</ul>
<p>Destinations and their attractions ordered</p>
<ol start="5"><li>Paris
<ol type="A"><li>Eiffel Tower</li><li>Louvre Museum</li>
<li>Notre Dame Cathedral </li></ol></li>
<li>Grand Cayman
<ol type="a"><li>Turtle Farm</li><li>Stingray City</li></ol></li></ol>
</body></html>
C:\web4542\examples\ch2-ol-ul-Lists.html
Anchors Aweigh
 An anchor is a link to another page or to a place on the same page
• <a> is used to define an anchor
• The text placed between the opening and closing tags <a> … </a> will be
the active text in the browser
 The link location is given by the href attribute
• See <a href="http://www.learningtree.com">Learning Tree's
Web site</a> for a course description
Using Anchors to Branch Within a Page
 The id attribute can be used to name a section of a page
• Used to link within a page or to a specific location on another page
• Remember, id values must be unique within a single page
<body>
<h1>Welcome to my HTML Tutorial</h1>
<a href="#intro">Introduction</a><br />
<a href="#chap1">Chapter 1</a><br />
<a href="#chap2">Chapter 2</a><br />
<p id="intro">
This document contains a short tutorial on how to write HTML.
...
<p id="chap1">
<b>Chapter 1</b>
In this chapter we learn what a markup language
...
<p id="chap2">
<b>Chapter 2</b>
In this chapter we learn about anchors and their
...
Examples of Anchors
 The href attribute value can be any valid URL
 A few examples of URLs that can be used:
• Perform a Google search passing three keywords
<a href="http://www.google.com/search?q=creating+
html+anchors"> Click Here </a>
• Opens and displays the browser’s mail window

<a href="mailto:sales@xyzcorp.com"> Click Here </a>
• Use FTP to download a file from an FTP server

<a href="ftp://ftp.ltree.com/course4542/outline.docx">
Click Here </a>
 The URL can also be absolute or relative
• All examples above are absolute
• Relative URLs are relative to the file location of the current page
FTP = File Transfer Protocol

URL = uniform resource locator
Examples of Anchors
 Anchors often link to other pages within the same website
• The href value is a relative URL
Pictures of <a href="fleet.html">our fleet</a>
Please visit the <a href="whatsnew.html">What's New</a>

page.
 Anchors can cause the browser to open a new window

• Add target="_blank" to the <a> tag
Pictures of <a href="fleet.html" target="_blank">
our fleet</a>
Relative and Absolute URLs
 A relative URL is a URL that needs some processing before it is valid
• A relative URL is only valid relative to the URL of the current page
 For example, if the current page has an absolute URL:
http://www.ltree.com/docs/index.html
• The link <a href="info.html"> maps to an absolute URL:
http://www.ltree.com/docs/info.html
• The link <a href="images/back.gif"> maps to an absolute URL:
http://www.ltree.com/docs/images/back.gif
• The link <a href="../scripts/updateAccount.php"> maps to an
absolute URL:
http://www.ltree.com/scripts/updateAccount.php
 When creating web pages, relative URLs are preferred whenever possible
• Allow sites to be moved to a different computer without modifying the links
Chapter Contents
 HTML Syntax

 Images
 Tables

Hands-On Exercise 2.2: Adding Lists and Hypertext Links
Chapter Contents
 HTML Syntax
 Images
 Tables
<img /> Tag
 The <img /> tag is used to include an image
• <img src="file.gif" />
 Attributes of <img /> include
• src, a URL to locate the image
– Most common formats are GIF, JPEG, or PNG
• height and width to control the dimensions of the image
– Can use pixels or percentage
– Image is resized to fit (may lose original aspect ratio)
• alt to provide a textual alternative (description)
– Will be used as a textual description if the image cannot be viewed
– Should always provide (required by HTML5 and accessibility standards)
• title to provide a title for an image
– Most browsers use the title as a tooltip
<img src="eiffel.gif" alt="picture of the Eiffel Tower" />
<img src="ltree.gif" alt="Learning Tree Logo“
title="Learning Tree International" />
GIF = graphics interchange format JPEG = Joint Photographic Experts Group PNG = Portable Network Graphics
Examples of Images
<html><head><title>Example of Images</title></head>
<body>
<h3>Example of Images</h3>
<img src="images/ltree.gif" alt="Learning Tree Logo" title="Learning Tree"/>
<img src="images/BadFile.gif" alt="Learning Tree Logo" />
<img src="images/ltree.gif" alt="Learning Tree Logo" width="135" height="29" />
</body></html>
Why is this
image missing?
C:\web4542\examples\ch2-images.html
Image Size
You should always specify width and height for all images
• Even if you are not changing the size
• Speeds display of the page in the browser
– Tells the browser exactly how much space to allocate for the image
 Best to not actually change the size of the image using width and height
• For example, an image has dimensions of 1280x960 pixels, but is set to
width="320" and height="240"
• Better to resize the image first and save a version at the smaller size
– Will download and display faster
Active Images
 The <a> tag can be used to make images active
• Can be clicked and acts as a hypertext link
• Created in same way as text links
– Just place an <img /> tag between <a> … </a>
<a href="http://www.learningtree.com">
<img src="images/ltree.gif" width="135" height="29"
alt="Learning Tree Logo" />
</a>
Chapter Contents
 HTML Syntax
 Images

 Tables

Hands-On Exercise 2.3: Embedding Images in Web Pages
Chapter Contents
 HTML Syntax
 Images
 Tables
Table Tags
 Several tags are used to create a table
• <table> is used to define a table
– Turn borders on/off with border attribute: border="0", border="1"
• Optional <caption> is used to add a caption to the table
• The <tr> tag identifies a new row of table cells
• <th></th> or <td></td> tags identify a table cell
<html><head><title>A Simple Table</title></head>

<body>
<h1>A Simple Table</h1>
<table border="1">
<caption>Flight Routes</caption>
<tr><th>Origin</th><th>Destination</th></tr>
<tr><td>Toronto</td><td>O'ahu</td></tr>
<tr><td>London</td><td>Maui</td></tr>
</table>
</body></html>
C:\web4542\examples\ch2-SimpleTable.html
Table Content
 Tables can be used to hold virtually anything
• Whatever is placed between <th>…</th> or <td> … </td>
• Text, lists, images, forms, or even tables
 The <th> tag means “table header” and should be used for header cells
• Typically rendered centered and bold
 The <td> tag is short for “table data” and is used for general-purpose
cells
• Typically rendered in the regular typeface and point size
Steps to Create a Table
1. Important to sketch table on paper first
2. Add the <table> tag and the optional <caption> if needed
3. Add the <tr></tr> tags to create a new row
• Within each row, use <th> or <td> tags to create the cells
• The browser sets the number of columns to be the greatest number of
columns in all of the rows
• Blank cells are used to fill extra columns in the rows
4. Don’t forget to close the table with </table>
Table Example
<html><head><title>Table Example</title></head>
<body><h3>Table Example</h3>
<table border="1">
<caption><b>In-flight Menu</b></caption>
<tr>
<td>Kaua'i</td>
<td>Big Island</td>
<td>Chocolate Macadamia nuts</td>
</tr>
<tr>
<td>Maui</td>
<td>O'ahu</td>
<td>Pineapple Icecream</td>
</tr>
<tr>
<td>Grand Cayman</td>
<td>Curacao</td>
<td>Plantain Chips</td>
</tr>
</table></body></html>
C:\web4542\examples\ch2-Table.html
Table Example: Rowspan and Colspan
<html><head><title>Table Rowspan and Colspan Example</title></head>
<body><h3>Table Rowspan and Colspan Example</h3>
<table border="1"><caption><b>In-flight Menu</b></caption>
<tr>
<th rowspan="4">Flights</th>
<th colspan="2">Destinations</th>
<th>Snacks</th>
</tr>
<tr>
<td>Kaua'i</td>
<td>Big Island</td>
<td>Chocolate Macadamia nuts</td>
</tr>
<tr>
<td>Maui</td>
<td>O'ahu</td>
<td>Pineapple Icecream</td>
</tr>
...
</table></body></html>
C:\web4542\examples\ch2-TableRowSpan.html
Grouping Rows With <thead>, <tfoot>, and <tbody>
 Additional table elements can be used to group rows
• The <thead> element is used to group rows as column headers
• The <tfoot> element is used to group rows as column summaries
– Will be displayed at the end of the table
• The <tbody> element is used to group rows containing the content
• Each can contain zero or more rows
 No default formatting applied
• Can style sections with style sheets
Grouping Rows With <thead>, <tfoot>, and <tbody>
<table border="1">
<thead>
<tr>
<th>Origin</th>
<th>Destination</th>
<th>Duration</th>
</tr>
<tr>
<td>Where we fly from</td>
<td>Where we fly to</td>
<td>How long the flight takes</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">This is a footer ...</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Honolulu</td>
<td>Stockholm</td>
<td>23 hours</td>
</tr> ... </tbody> </table>
C:\web4542\examples\ch2-TableRowGrps.html
Chapter Contents
 HTML Syntax
 Images
 Tables


Hands-On Exercise 2.4: Using HTML Tables
Chapter Contents
 HTML Syntax
 Images
 Tables
 Character Entities
HTML Character References
 Certain characters in HTML are treated as special
• To use them as text, you must use an equivalent code or entity
• When available, entities are preferred as they are easier to use and recognize
 Some special characters in HTML and their equivalent references:
Character Character code Character entity

Less than sign < < <
Greater than sign > > >
Ampersand & & &
Double quotes " " "
Space –
Percent % % –
Nonbreaking space
Copyright © ©
An Example Using Character Entities
<html><head>
<title>Character References</title></head>
<body>
<p>To display an HTML anchor example in a browser,
you must enter <br />
<a href="http://www.ltree.com">
Learning Tree Home Page</a></p>
<p>© Learning Tree International</p>

</body></html>
C:\web4542\examples\ch2-CharRefs.html
Chapter Summary
In this chapter, you have learned how to
 Create HTML documents
 Format text with HTML
 Organize data as numbered and bulleted lists
 Use anchors to create links to other documents
 Enhance pages with images
 Organize information in tables
Chapter 3
CSS Styling and Layout

Chapter Objectives
In this chapter, you will learn about
 CSS operation and syntax
 Formatting web pages with CSS
 Styling navigational menus
 Special effects using style sheets
Chapter Contents
 Introduction to CSS
Formatting
 Implementing Optional Styles
 Floating Elements
 Styling Menus
 Additional CSS Examples
CSS Is for Presentation
 Current standards recommend that all presentation be done via Cascading
Style Sheets (CSS)
• Instead of tags and attributes
 Several HTML tags and attributes have been deprecated in favor of CSS
• Deprecated indicates there is a newer alternative
• Most browsers still support them for backward compatibility
– Old tags and attributes may someday become obsolete
 Knowing a few deprecated items can be useful
• Still in wide use today
• Needed to maintain, modify, or update existing sites
 A few deprecated examples you may still find in use today
• <font> tag
• align, border, and color attributes
Introducing Cascading Style Sheets (CSS)
 A style sheet is a collection of rules for customizing HTML tags
• Specifying fonts, colors, indentation, positioning, etc.
 Benefits of CSS:
• Simplifies the HTML page
– Faster to load
– Easier to edit
• Provides fine control over most aspects of HTML layout
– Nicer-looking pages
• Separates layout (style) from content
– Can result in better search-engine rankings
– Styles can be defined and shared across all pages in a site
– Can speed up download and display of pages
• Helps create accessible websites
– There are a wide range of devices in use today
Introducing Cascading Style Sheets (CSS)
 Style sheets can be added to a document between <style> tags in the
<head> section
<style> ... </style>
 Syntax for style properties within a <style> tag:
selector {
property1: value1;
property2: value2;
}
 Styles can be applied to HTML tags by using a tag name as a selector
• h1, h2, p, b, li, a, etc.
• Style is automatically applied to all <style>
h1 {
occurrences of the tag color: black;
text-align: center;
font-size: 200%;
}
</style>
Specifying Colors
 Colors commonly specified by a color name or an RGB value
• HTML specifies 17 color names:
– black, green, silver, lime, gray, olive, white, yellow, orange, maroon, navy,
red, blue, purple, teal, fuchsia, aqua
• CSS specifies 123 additional color names:
– Complete list at: www.w3.org/TR/css3-color/#svg-color
• Can also use RGB (Red, Green, Blue) values as a hexadecimal number
– Can create virtually any color
– Value must start with #
– Each color component value ranges from 00 to FF
black = "#000000" green = "#008000" silver = "#C0C0C0"

white = "#FFFFFF" red = "#FF0000" purple = "#800080"
• RGB values can also be specified as 3 digits for certain values

– color: #369; is the same as color: #336699;
Specifying Colors
 Can specify colors as RGB decimal values
• Each color component value ranges from 0 to 255
• The following will set the background color to green
background-color: rgb(0, 255, 0);
 Can specify colors as HSL (Hue, Saturation, Lightness) values

• Hue is a degree on the color wheel
– 0 is red, 60 is yellow, 120 is green, 180 is cyan, 240 is blue
• Saturation is a percentage value
– 100% is full saturation
• Lightness is also a percentage
– 0% is dark (black), 100% is light (white), and 50% is neutral
• The following will set the background color to green
background-color: hsl(120, 100%, 50%);
Setting Style Properties: Old vs. New
 Originally, HTML specified style settings with a limited set of attributes
• Limited functionality—not all style attributes were available on all tags
• Notice how cluttered the HTML can get
• We do not want to do this anymore
– All the attributes in the example below are deprecated
<html><head><title>Without StyleSheets</title>
</head>
<body bgcolor="white" text="red">
<h1 align="center"><font size="+3" color="#0099ff">Introduction to
css</font> </h1>
<p>Cascading style sheets (CSS) are collections of rules for
customizing HTML tags. They are also fun and easy to use.</p>
</body>
</html>
C:\web4542\examples\CSS\withoutCss.html
Setting Style Properties: Old vs. New
 Using style sheets, style information can placed in the <head>
• Notice how the HTML is now simpler
<html><head><title>A Simple CSS Example</title>

<style>
h1 {
color: #0099ff;
font-size: 200%;
text-align: center;
}
body {
background-color: white;
color: red;
}
</style>
</head> C:\web4542\examples\CSS\withCss.html
<body>
<h1>Introduction to css</h1>
</body></html>
Elements Inherit Style From Their Parents
 Styles are inherited from parent elements
• Styles for the <body> element may apply to all elements on a page
– For example: the color: red in the last example or setting fonts
• <ul> styles apply to <li> children
• <table> styles apply to <td> and <th>
 Styles defined for an element override inherited styles
• Setting the color on an <h1> overrides the inherited color set for <body>
CSS Extends HTML Style Properties
 CSS also provides styling functionality not available in HTML
• Ability to transform text
• Specify indentation
• Easily set margins, padding, and borders
• Control text spacing and alignment
• Define the style for ordered and unordered lists
• Etc.
 See www.w3.org/Style/CSS for complete details
• Course home page links to the CSS specifications
CSS Text Formatting Example
<html><head><title>A Simple CSS Example</title>
<style>
h1 {
color: #0099ff; font-size: 200%;
text-align: center; text-transform: uppercase;
}
p {
padding-left: 40px; background-color: yellow;
}
body {
color: red;
}
</style></head>
<body>
<h1>Introduction to CSS</h1>
</body></html>
C:\web4542\examples\CSS\simpleCss.html
CSS Margin Example
 The example below
• Sets the page margins
• Indents the start of every paragraph
• Displays paragraph text in bold italics
<html><head>
<style>
body {
margin-left: 20%;
margin-right: 20%;
}
p {
font-style: italic;
font-weight: bold
}
</style></head><body>
<p>This indented paragraph has wide margins and
text that is bold italic</p>
</body></html>
C:\web4542\examples\CSS\cssMargin.html
Useful Style Sheet Properties
 Useful CSS properties for customizing general HTML layout:
• font-size, font-weight, font-family, font-style, color,
text-align, text-indent, text-transform, background-color
margin-top, margin-left
• More properties will be introduced later
• Many good references; see links on course home page
 Standard CSS units for defining size and length
• px, em, pt, %
• Avoid using absolute font sizes as this results in non-accessible websites
– Preferred units for font size are em and %
Borders
 CSS provides ability to draw borders around elements
• Can control border color, width, and style
 border-color
• Any valid color
 border-width
• Any valid unit of measure: em, px, etc.
• Cannot be a percentage
 border-style
• none, hidden, dotted, dashed, solid, double, groove, ridge,
inset, outset
Borders
 Borders can be specified as a group or individually for all four sides
 Individual
• Specify color, width, and style for top, right, bottom, and left
– border-left-width: 5px;
– border-left-style: solid;
– border-left-color: blue;
 Group
• Specify color, width, and style for all four borders
– border-width: 2px;
– border-style: dashed;
– border-color: red;
 Can also specify all three properties on one line

• Specify width, style, and color, in that order
– border-left: 5px solid blue;
– border: 2px dashed red;
Getting Started With CSS Do Now
 Open the C:\web4542\exercises\doNow31.html file in a web browser

1. Edit the file and add the following style sheet to the <head> section:
<style>
body {
width:800px;
}
h1 {
margin-top:0;
width:800px; text-align:right;
color:#ffffff; background-color:#003399;
}
h2 {
color:red;
font-style:italic; text-align:center;
border-bottom-color:red; border-bottom-style:solid;
}
</style>
2. Save the file and reload it into a web browser

3. Modify the style sheet to add a green dashed border to all images
Chapter Contents
 Introduction to CSS Formatting
 Implementing Optional
Styles
 Styling Menus
Optional Styles Using the class Attribute
 All examples so far have specified style properties for HTML tags
• All selector names have been tag names
• Styles automatically were applied to the tags
 Also possible to define selector names that can be optionally applied
• Selector name must start with a “.”
• Selector can be applied to an HTML tag when needed
– Single selector can be applied to multiple (different) tags
– Allows style of multiple tags to be changed using a single CSS rule
 These selectors can be applied to an element with the class attribute
Applying Selectors With the class Attribute
<html><head>
<title>A Simple CSS Custom Selector Example</title>
<style>
body {
color: red;
}
.indent {
text-indent: 40px;
}
h1 {
color: #0099ff;
font-size: 200%;
}
</style>
</head>
<body>
<h1 class="indent">CSS Custom Selectors</h1>
<p class="indent">Custom selectors names start with a "."</p>
<p>The selector can then be applied to an html tag with the class
attribute.</p>
</body></html> C:\web4542\examples\CSS\cssCustomSelector.html
Defining Regions With <div> and <span>
 Often easier to apply style to an entire section of a document
• On the previous example, both the <h1> and <p> were indented
• The <div> and <span> tags are commonly used for this
 <div> creates a “division” of the document
• The only formatting is a line feed before and after the <div>…</div> block
• Additional formatting can be applied with style sheets
• Use the <div> to style a multiline section of a page
– A block-level element
 <span> creates an inline section
• Applies no-default styling at all
• Additional formatting can be applied with style sheets
• Use the <span> to style a portion of a single line
– An inline element
 The previous example can be rewritten using <div>
• Shown on next slide
<div> and <span> Example
<html><head>
<title>A Simple CSS Custom Selector Example</title>
<style>
body {
background-color: white; color: red;
}
.indent {
text-indent: 40px;
}
.highlight {
background-color:yellow;
}
h1 {
}
<div class="indent">
<h1>CSS Custom Selectors</h1>
<p>Custom selectors names must start with a "."</p>
</div>
<p>The selector can then be applied to an html tag with the
<span class="highlight">class attribute</span>.</p>
</body></html>
C:\web4542\examples\CSS\cssCustomSelectorDivSpan.html
Optional Styles Using the id Attribute
 Also possible to define selector names that start with a #
• Selector can be applied to an HTML tag when needed
• Similar to the class selectors just used
 HTML tags refer to these selectors using the id attribute
• The value of the id attribute must be unique in the page
What does this imply?
Applying Styles With id
<html><head><title>Applying styles with id</title>
<style>
#pageTop{
text-align:center; background-color:#003399;
width:800px; height:200px; display:inline-block;
}
#content {
background-color:#33ccff; display:inline-block;
width:800px;
}
</style>
</head> <body>
<div id="pageTop">
<img src="images/4542.png" .../>
<h2>Course 4542<br />
Getting Started with HTML</h2>
</div>
<div id="content">
<h1>You Will Learn How To:</h1>
...
...
</div>
</body></html> C:\web4542\examples\CSS\cssID.html
Which Is Better, class or id?
 Often it is just personal preference
• Both work very similarly
 A few simple rules:
• Use class if a style may be applied more than once per page
• Use id for styling page regions or something that should only occur once
• If using both, id will override properties from a class
Both class and id selector names are case sensitive
 When possible, it is better to avoid class and id completely

• Using elements like <header>, <footer>, <section>, etc. reduce the
need for id="..."
Applying Styles Without ID
 The previous example can be written without using id
<html><head><title>Applying styles with id</title>
<style>
header {
text-align:center; background-color:#003399;
width:800px; height:200px; display:inline-block;
}
section {
background-color:#33ccff; display:inline-block;
width:800px;
}
</style>
</head> <body>
<header>
<img src="images/4542.png" .../>
<h2>Course 4542<br />
Getting Started with HTML</h2>
</header>
<section>
<h1>You Will Learn How To:</h1>
...
...
</section> C:\web4542\examples\CSS\css-header-section.html
</body></html>
Additional Selector Syntax
 Selectors can contain complex syntax, such as:
• tag1, tag2 { ... }
– Apply to both tag1 and tag2
• tag1 tag2 { ... }
– Apply to tag2 only when it is a child of tag1
• tag1.classA
– Apply to tag1 only when it also has a class of classA
– Also works with id instead of class: tag1#idA
• .classB tag2
– Apply to tag2 only when a child of an element with a class of classB
– Also works with id instead of class: #idB tag2
 Any combination of the above can also be used

• ul li a
– Apply to anchors only when they are in list items which are children of
unordered lists
• header h2
Apply to h2 only when they are children of the header
Adding Style Sheets to Pages
 Style sheets can be added to pages in three ways
1. Reference an external URL using the <link> tag
– Allows a single style sheet to be used by several pages
2. Between <style> tags in the <head> section
– All examples have used this so far
3. Within an HTML element with the style attribute (inline)
Storing CSS Style Rules in an External File
 Style rules can be placed in an external CSS file
• The CSS file can be linked to a web page
– Using the <link> tag in the <head> of a web page
• Allows a single style sheet to be used by multiple pages
– Changing the style sheet in one place will affect all pages
<head>
…
<link rel="stylesheet" href="mystyle.css" />
</head>
Can be any URL
The Cascade
 Styles are applied in this order:
1. Browser default settings
2. Linked style sheets and embedded style sheets
– If both exist, the order in which the tags appear determines ordering
– Later styles override earlier styles
3. Inline styles
 The cascading priority order for style rules is
• An inline style (inside an HTML element) has the highest priority
• An inline style overrides styles declared inside the <head> section
• In the <head> section, the order determines priority
The Cascade Example
<html><head><title>A Simple CSS Cascade Example</title>
<style>
body {
background-color: white; color: red;
}
p {
text-indent: 40px;
}
h1 {
text-align: center; text-transform: uppercase;
}
<h1>Introduction to css</h1>
<h1 style="color:green;font-family:arial">Introduction to the css
Cascade</h1>
<p style="font-size:150%">CSS in-line styles take precedence over
styles both in the head and linked style sheets.</p>
</body></html>
C:\web4542\examples\CSS\cssCascade.html
The Cascade Example
Chapter Contents


 Styling Menus

Adding Style and Structure to Web Pages
Chapter Contents

 Floating Elements
 Styling Menus
Floating Elements
 The CSS float property shifts an element to the left or right
• float:left;
• float:right;
• Other content flows around floated elements
 A floated element’s content area is “shrunk to fit”
• Made as narrow as possible to fit the text
• Can be resized with height and width
Float Example Using <div> Do Now
1. The following example creates a box class to style a <div> tag as follows:
• Places a two-pixel solid border around the <div>
• Background color to #ccccff
• Sets the width to 300 pixels
• Floats the <div> to the right
2. Refer to the next slide for the code
3. Try changing the float to
float:left
• Try adding padding: 5px
C:\web4542\examples\CSS\cssBox.html
Float Example Using <div>
<html><head><title>CSS Box</title>
<style>
div.box {
border-style: solid;
border-width: 2px;
border-color: black;
background-color: #ccccff;
width: 300px;
float:right;
padding:6px;
}
</style> </head>
<body><h1><i>Grand Cayman</i></h1><hr />
<div class="box"><i>Grand Cayman</i> is nestled in the calm, turquoise waters

of the western Caribbean. Grand Cayman is the largest of the 3 Cayman Islands
and is just 150 miles south of Cuba or 480 miles south of Miami.</div>
<p>Snorkeling the reefs of Grand Cayman is a real treat. Snorkel the way the
locals do it, just jump in the water and view some of the best nature has to
offer. ...
</p>
...
</body></html> C:\web4542\examples\CSS\cssBox.html
Chapter Contents

 Styling Menus
Setting Link Colors
 CSS uses a special mechanism called pseudo-classes to set the
properties for hypertext links
a:link { color:blue } /* for unvisited links */
a:visited { color:black } /* for visited links */
a:hover { color:red } /* when mouse is over link */
a:active { color:green } /* when link is clicked */
 The order of the class definitions is important

• a:hover must be defined after a:link and a:visited
• a:active must be defined after a:hover
• To help them remember the order, some people use LVHA = LoVe HAte
 To show hypertext links without being underlined until the mouse is
hovered over them:
a { text-decoration: none;}
a:hover{ text-decoration:underline;}
This link is <a href="myfile.html">not underlined</a>
Creating Styled Menus With CSS
 Web pages often need a navigational menu
• How else can users find their way around?
• A vertical menu can be created by styling a <ul> with CSS
 Start with a normal unordered list containing
the desired links:
<ul>
<li><a href="main.html">Home</a></li>
<li><a href="info.html">Company Info</a></li>
<li><a href="whatsnew.html">What's New</a></li>
<li><a href="schedule.html">Flight Schedules</a></li>
<li><a href="fleet.html">Our Fleet</a></li>
<li><a href="frequent.html">Frequent Flyers</a></li>
</ul>
Steps to Style a List as a Menu
1. Create a menu selector #menu {
• Float the menu to the left (or right) float:left;
background-color:#003399;
• Set a background color width:150px;
• Set the width of the menu }
2. Add a <div id="menu"> around the list

<div id="menu"
<ul>
...
</ul>
</div>
3. Create a selector to style the menu’s <ul>

• Turn off bullets
• Set margin and padding to zero
#menu ul {
list-style:none;
padding:0;
margin:0;
}
4. Set properties for all <a> tags within the menu #menu li a {
• Turn off underlining text-decoration:none;
color:#ffffcc;
• Set the text color padding: 0.3em;
• Set the padding and alignment text-align:center;
• Set display to block }
display:block;
– Causes anchor to expand to full width of list

– Required for hover to work correctly
5. Set the hover properties of the <a> tags
• Set a text and background color
• Turn on underlining for hover
#menu li a:hover {
color:#ffffff;
background-color:#0066cc;
text-decoration:underline;
}
6. If desired, add separators between each item
• Set a bottom border on each list item
#menu li {
border-bottom:1px solid #69c;
}
C:\web4542\examples\CSS\css-ul-Menu.html
Vertical Menu CSS
 Complete style sheet required for a vertical menu
• Included here for reference
#menu { #menu li a:hover {
float:left; color:#ffffff;
background-color:#003399; background-color:#0066cc;
width:150px; text-decoration:underline;
} }
#menu ul { #menu li {
list-style:none; border-bottom:1px solid #69c;
padding:0; }
margin:0;
}
#menu li a {
display:block;
padding:0.3em;
text-align:center;
text-decoration:none;
color:#ffffcc;
}
C:\web4542\examples\CSS\ul-menu.css
<nav> and <menu>
 The previous example styled an unordered list as a menu
• Illustrated the power of CSS
 Better to use a more semantically correct tag to define the menu
• Will be meaningful to assistive technologies and search engines
 menu defines a set of menu items or options
• Often used within nav
• Eliminates need for unordered lists, div, and id or class attributes
• May contain
– List items (li elements)
– Context menu <nav>
– Interactive <menu>
<li><a href="main.html">Home</a></li>
(form) elements <li><a href="info.html">Company Info</a></li>
<li><a href="whatsnew.html">What's New</a></li>
...
</menu>
</nav>
C:\web4542\examples\CSS\css-menu.html
Vertical Menu CSS Using <nav> and <menu>
 Complete style sheet required for a vertical menu now looks like:
nav { nav li a:hover {
float:left; color:#ffffff;
background-color:#003399; background-color:#0066cc;
width:150px; text-decoration:underline;
} }
nav menu { nav li {

list-style:none; border-bottom:1px solid #69c;
padding:0; }
margin:0;
}
nav li a {
display:block;
padding:0.3em;
text-align:center;
text-decoration:none;
color:#ffffcc;
}
C:\web4542\examples\CSS\menu.css
Chapter Contents

 Styling Menus


Hands-On Exercise 3.2: Styling a Navigational Menu
Chapter Contents

 Styling Menus
 Additional CSS Examples
Centering Sections DoNow
Demo/Do Now
 The Nui Manu website is currently displayed left-aligned in the browser

• Will look better to center it
– Need to center the <div id="pageWrapper"> element
• There is no align property in CSS to do this
 Block-level elements (such as div) can be aligned by setting auto margins
margin-left:auto;
margin-right:auto;
 Centering the web page:

1. Edit the nuimanu.css file for your site and add the two lines above to the
#pageWrapper selector to center the section
2. Save the file and reload your site in a browser
Background Images
 CSS background-image can be used to set a background image
background-image: url('images/beachbackground.jpg');
 Can control the position of the image

• Position is X,Y values in pixels, a percentage, or predefined values
– Predefined values for X are left, center, right
– Predefined values for Y are top, center, bottom
background-position: top left;
background-position: 100 100;
 Image can also repeat vertically, horizontally, or no repeat

background-repeat: no-repeat;
background-repeat: repeat-x;
 Can also specify background-size: width height
• Can use pixels, percentage, auto, cover
Background Images in Action Do Now
Demo/Do
 Adding a background image:

1. Double-click C:\web4542\exercises\images\beachbackground.jpg
to view the image; close the viewer when you are done
2. Edit the nuimanu.css file for your site and add the following lines to the
body selector:
background-image: url('images/beachbackground.jpg');
background-repeat: no-repeat;
background-position: top left;
background-size: 100% auto;
3. Save the file and reload your site in a browser

– View the different pages; what happens if the page content is longer than
the image?
– One solution is to set the height to 100% instead of auto, but that causes
the image width to scale differently for each page
– Another solution is to set the background color of the page to blend with
the image
Background Images in Action DoNow
Demo/Do Now
4. In body, change the background-color to #6fbcc6;

5. Save and test your site again
 Your site should now look similar to the following:
CSS Media Queries
 CSS media queries can be used to change page styles based on
characteristics of the viewing device
• Display width, type, orientation, resolution, etc.
• Display type example: screen, print
 Media query can occur when loading a style sheet
<link rel="stylesheet" media="(min-width: 800px)" href="wide.css"/>
 Or within a single style sheet <style>

h1 {
float: left;
}
@media (max-width:800px) {
h1 {
float: none;
}
}
</style>
 Responsive Web Design is designing a site to adapt its layout to fit the
viewing environment
Investigating a Responsive Web Design CSS Do Now
Demo/Do
1. Using an editor, open C:\Web4542\exercises\doNow34-RWD\index.html

• Examine the HTML
• Notice there is a single CSS file referenced
2. Using an editor, open C:\Web4542\exercises\doNow34-RWD\css.rwd
• Notice the use of media queries
3. View this page in a browser
• Try resizing the browser and notice how the image and layout change
‒ Notice the menu changes from horizontal to vertical
• If using Firefox, click on Resize in the web developer toolbar and select View
Responsive Layouts
‒ This will show what the page looks
like in various different device sizes
Click Resize in the Firefox

web developer toolbar
Validating Your HTML
 Validating tools are available to
• Flag syntax errors with respect to HTML or browser versions
• Check spelling
 Reasons for validation:
• To adhere to the standards
• Browsers treat HTML errors differently
• We all are guilty of typos
 Tools can be run locally or remotely
• Some are downloaded and run locally
• Others read your web page by providing the URL
– http://validator.w3.org
Development Tools for Firefox
 The Firefox browser supports customization through extensions
• Many extensions are available for free on the Internet
• The following are installed on the class computers
 HTML Validator extension
• addons.mozilla.org/firefox/addon/html-validator
 Web developer extension
• addons.mozilla.org/firefox/addon/web-developer
• This was just mentioned in the previous Demo/Do Now
Web developer toolbar
HTML validator page

status
Chapter Summary
In this chapter, you have learned about
 CSS operation and syntax
 Formatting web pages with CSS
 Styling navigational menus
 Special effects using style sheets
Chapter 4
Course Summary
Course Summary
In this course, you have learned to
 Develop web pages using HTML5
 Display page content in tables or lists
 Enhance pages with images and links to other documents
 Style content with CSS
Continue enhancing your skills with our After-Course Activity--Sandbox
Related Learning Tree Courses
 1-DAY BOOT CAMP Courses:
• Improving Usability, Accessibility, and SEO With
HTML5 – 4540
• Programming Graphics and Multimedia in HTML5 and
CSS3 – 4541
• Developing Offline Applications With HTML5 – 4543
• Configuring a Web Server – 4548
 Multi-Day Courses:
• Mobile and Responsive Web Design – 2315
• JavaScript for Modern Web Development – 2319
• HTML5 and JavaScript for Modern Web Development – 2320
• Developing a Website – 470
• CSS3 for Responsive Web Design – 522
• Securing Web Applications, Services, and Servers – 940
For more information on these and other related courses,

please visit: LearningTree.com/WebDev
Next Steps:
After-Course Benefits,
Course Evaluation, and
Your Certificate of Achievement
Your Tuition Savings Options
 All prior participants are entitled  Exclusive tuition savings for

to Return to Learn tuition savings U.S. Government Employees
 Multi-course tuition savings  Exclusive tuition savings for

Canadian Government Employees
For more information, call or visit our website:

United States — 1-800-843-8733 or LearningTree.com/Tuition
Canada — 1-800-843-8733 or LearningTree.ca/Tuition
United Kingdom — 0800 282 353 or LearningTree.uk/Tuition
Sweden — 08-506 662 00 or LearningTree.se/Priser
© Learning Tree International, Inc. All rights reserved. Not to be reproduced without prior written consent. Next- 2
After-Course Instructor Coaching ― in My Learning Tree
 You are entitled to FREE After-Course Instructor Coaching

to help you:
• Apply your newly gained skills when you
return to work
• Overcome any start-up hurdles
• Ask questions about specific applications
• Receive guidance through challenging situations
• Complete your After-Course Self-Directed Exercise
NOTE: The best time to receive the maximum value of instructor coaching is when the
course material is still fresh in your mind. Learning Tree is committed to your educational
development, which is why you’ll have up to 90 days to complete your request.
After-Course Instructor Coaching ― in My Learning Tree
 How to access your After-Course
Instructor Coaching Request:
1. LOGIN to your My Learning Tree account at:

U.S. — LearningTree.com/MyCourses
Canada — LearningTree.ca/MyCourses
U.K. — LearningTree.co.uk/MyCourses
Sweden — LearningTree.se/MyCourses
2. Click the link for My Courses / Transcripts
3. Click , then the After-Course

Instructor Coaching link to access your
Coaching Request Form
4. Click SET UP REQUEST, enter your

request, select a preliminary date and time,
and click SUBMIT YOUR REQUEST
After-Course Computing Sandbox — in My Learning Tree
 FREE After-Course Computing Sandbox™ to practice

and experiment with your hands-on exercises
• The Computing Sandbox is a preconfigured virtual
machine that provides after-course remote access to
the same software you used in your course
 With the Computing Sandbox, you can:

• Redo your hands-on exercises
• Develop and test new code
• Experiment with the system
• Complete your After-Course Exercise
NOTE: The Computing Sandbox is not available for all courses. You can access the
Computing Sandbox within your My Learning Tree account for up to 90 days after
completing a select hands-on course.
After-Course Computing Sandbox ― in My Learning Tree
 How to access your After-Course
Computing Sandbox:
1. LOGIN to your My Learning Tree account at:

U.S. — LearningTree.com/MyCourses
Canada — LearningTree.ca/MyCourses
U.K. — LearningTree.co.uk/MyCourses
Sweden — LearningTree.se/MyCourses
2. Click the link for My Courses / Transcripts
3. Click for your course, and find the

information about your Computing Sandbox
4. Click the links and buttons to:

– Download the User Guide
– Download Your Course Notes
– Validate Your Computer
– Launch the Computing Sandbox
Recommend Your Colleagues — Course Contest
 Do you know someone who would benefit from
Learning Tree training?
• You can Recommend Your Colleagues for Learning Tree Training, and
have three chances to win several great prizes, including FREE Courses!
• Your colleagues could be coworkers, managers, friends, neighbors, or
anyone you think would benefit from Learning Tree training
 Course event winner:

• One winner is selected from your specific course event
• The winner will choose one of several great prizes
 Multi-course event winner:

• One winner is selected from up to 10 1-DAY course events
• The winner will choose one of several great prizes
 Grand Prize: FREE Courses!

You and your recommended colleagues can win:
• One Grand Prize Winner is selected each week and receives a FREE Learning Tree course, as
does each of their recommended colleagues
• FREE Course Winners are posted to the Learning Tree website within two weeks of your course
Recommend Your Colleagues
 How to enter the Recommend Your Colleagues
Course Contest:
1. Your instructor will activate the Recommend Your
Colleagues button on your AnyWare Dashboard
2. Click the button to access your entry form
3. Complete the entry form and click

SUBMIT & ENTER ME IN THE CONTEST!
 After your course, you can enter the Monthly Contest!
• In addition to the Recommend Your Colleagues Course Contest, you can
enter to win our Monthly Free Course Contest by recommending more
colleagues and managers from your My Learning Tree account. The winner
will receive a complimentary Learning Tree course, as will each of the
colleagues that were recommended.
NOTE: The Monthly Free Course Contest will be available in your My Learning Tree
account after the second week following your course.
Course Evaluation and Certificate of Achievement
 Your instructor will activate the Course Evaluation and Certificate of
Achievement Request on your AnyWare Dashboard
• Course Evaluation:
– Please provide as many comments as possible!
– Your evaluation of this course is important to Learning Tree
– Your ideas, thoughts and suggestions are taken seriously, and will help us improve
the educational experience for future course participants
• Certificate of Achievement Request:

– Please complete and/or correct your certificate request form accurately
– You will receive your formal Certificate of Achievement, suitable for framing, in
about two weeks at the shipping address you provide
– You will also be able to download your Certificate of Achievement from your
My Learning Tree account on the Monday following your course
Congratulations on completing your course!

We hope you enjoy your FREE After-Course Benefits, and look forward to
seeing you again soon at your next course.

Course Notes

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Course Notes

Uploaded by

Copyright:

Available Formats

Course 4542

Getting Started With HTML

No part of this publication may be reproduced, stored in a retrieval system, or

Copying software used in this course is prohibited without the express

 To maximize the effectiveness of your course, we encourage you to:

Introduction to the World Wide Web

TCP/IP = Transmission Control Protocol/Internet Protocol

Client action Server response

Web browser Web server

• HTML • Java JSP/Servlets

SVG = Scalable Vector Graphics

 Hands-On Exercise 1.1

1. Launch AdaptaLearn by double-clicking its icon on the desktop

In your Exercise Manual, please refer to

 Tags usually appear in pairs

<b>This is bold</b> this is not

 It is better to use semantic elements

<strong>This is strong</strong> this is not

id will be used later

W3C = World Wide Web Consortium

Since extra white space is ignored by browsers,

 Why are all the destinations displayed on the same line?

 Why is each heading on a separate line?

 Hands-On Exercise 2.1

In your Exercise Manual, please refer to

 Lists and Anchors

Ordered list Unordered list

Lists are indented

• Opens and displays the browser’s mail window

• Use FTP to download a file from an FTP server

FTP = File Transfer Protocol

Please visit the <a href="whatsnew.html">What's New</a>

 Anchors can cause the browser to open a new window

 Hands-On Exercise 2.2

In your Exercise Manual, please refer to

 Hands-On Exercise 2.3

In your Exercise Manual, please refer to

<html><head><title>A Simple Table</title></head>

 Hands-On Exercise 2.4

In your Exercise Manual, please refer to

Character Character code Character entity

<p>&copy; Learning Tree International</p>

CSS Styling and Layout

black = "#000000" green = "#008000" silver = "#C0C0C0"

• RGB values can also be specified as 3 digits for certain values

 Can specify colors as HSL (Hue, Saturation, Lightness) values

<html><head><title>A Simple CSS Example</title>

 Can also specify all three properties on one line

 Open the C:\web4542\exercises\doNow31.html file in a web browser

2. Save the file and reload it into a web browser

 Introduction to CSS Formatting

Both class and id selector names are case sensitive

 When possible, it is better to avoid class and id completely

 Any combination of the above can also be used

Can be any URL

 Introduction to CSS Formatting

 Hands-On Exercise 3.1

In your Exercise Manual, please refer to

 Introduction to CSS Formatting

<div class="box"><i>Grand Cayman</i> is nestled in the calm, turquoise waters

 Introduction to CSS Formatting

 The order of the class definitions is important

This link is <a href="myfile.html">not underlined</a>

2. Add a <div id="menu"> around the list

<p>© Learning Tree International</p>