1. Introduction to HTML

2. Course Objectives You will learn: Getting Started
Element and Attributes
Cascading Style Sheets (basics)
Tables
Links and Images

3. Ways to Get the Exercise Files
keykitty.com, link is at bottom of page
Can also copy files from the student computer (will show at end of class)

4. Created using HTML code
Web Page Breakdown
A web page
displayed in
a browser
Links to other
web pages
Contains text
and graphics
At it’s core, TEXT & GRAPHICS/ANIMATIONS
Browsers – must test different browsers & versions
Chrome
Firefox
Safari
Edge
Opera
Created using HTML code

5. URL (Uniform Resource Locator)
Protocol
Domain Name

6. IP Address (Internet Protocol Address)
Protocol
Domain Name
Converts to unique IP address for servers
Protocol
IP Address

7. The Website Access Process
User enters URL in a browser
Browser sends a file request
Browser displays web page
Server sends HTML text

8. 3 Layers of Web Page Construction
Content
(HTML)
Presentation
(CSS)
Behavior
(JavaScript)
3 Layers of Web Page Construction

9. html (Hypertext Markup Language)
Page 1-2
Pg 1-2
Hypertext Markup Language
Contains elements (tags) tell browser how to display content.
It is the structure of the web page.
Can write it in any text editor (Notepad++, Visual Studio Code, Sublime Text, Atom).
All formatting information is to be kept separate from structure by use of style sheets.

10. Page 1-2
Pg 1-2
Advantages of HTML5
New elements support streaming-media functionality that is built directly into modern browsers (covered in level 2 course)
New elements help make page structure more meaningful (<header>, <nav>, <footer>)
Content is more accessible to alternative devices
HTML5 provides advanced capabilities for Web application developers

11. Page 1-4
Pg 1-4
HTML Syntax
Consists of predefined elements which build the structure of a web document
Elements are also referred to as tags or nodes
All elements are set in angle brackets
All elements have an array of attributes which provide additional information to the browser
Element
Tag Attribute

12. HTML Syntax <p></p> - Container tag
Page 1-4
Pg 1-4
HTML Syntax
<p>This text is defined as a paragraph.</p>
The end of this text has a line break.<br />
<p></p> - Container tag
Also known as “block level” elements
Can contain content and other tags
Has an opening and closing tag
<br /> - Inline tag
Cannot contain content or other tags
Self-closing structure
Will talk more about this later in course

13. Authoring Guidelines (from XHTML)
Page 1-4
Pg 1-4
Authoring Guidelines (from XHTML)
Write element names and attributes in lowercase
Container tags must have closing tags
Put attribute values in quotation marks
Make sure your HTML code structure is well formed
XHTML Authoring Guidelines vs HTML5 Authoring Guidelines
All tags and attributes must be lowercase Tags can be mixed upper/lower case
All tags must have a closing tag <p /> Some tags to not require closing tag <p>
All tags must be nested correctly Some tags can be improperly nested
All attribute values must have quotes Attribute values do not need to be within quotes

14. Benefits of Following Guidelines
Page 1-4
Pg 1-4
Benefits of Following Guidelines
Content is displayed consistently in a variety of browsers and devices
Content is reliably accessible to site visitors using alternative devices (Braille printers, screen readers)
It’s easier to collaborate with other developers
Consistent code results in fewer mistakes and easier maintenance
You can build Web applications that work with XML

15. Well-formed code Remember: “first to open, last to close”
Page 1-4
Pg 1-5
Well-formed code
<p>This is a paragraph with an emphasized <em>word</em>.</p>
Remember: “first to open, last to close”
This nesting is called the parent-child relationship
<p> is the parent
<em> is the child