< HTML <
Foundation of Web development
Layers of a Web site
What is HTML?
Hypertext Markup Language
Hypertext Markup Language describes:
- Structure
- Content
- Typographic hierarchy
- Rudimentary style (bold, italics, etc.)
HTML Document
It might feel chaotic and unstructured …
But the entire content of the page exists here.
A brief intro to
accessibility
When building a Web site
consider accessibility
issues for users, search
engines and mobile
applications
A user sees:
Search bot/screen reader:
Video on Screen Readers and Accessibility
Mobile device:
There are several things
you can do to create good
experiences for all users:
Write good, descriptive
headlines
Write detailed paragraphs
Write precise page titles
Write descriptive image
tags
Write descriptive links
Don’t say ‘click here!’
Separate content from
style
What is CSS?
Cascading Style Sheets
- Separates style from content
- Easier to change formatting and update an entire Web site
- Eliminates page load
- Flexible design
- Better user accessibility for search bots and screen readers
-Allows you to design for multiple browsers and multiple Operating
System (Linux, PC or Mac) environments
CSS Document
HTML vs. CSS Review
-HTML is used for content and structure
-HTML houses scripting languages and behaviors
-CSS separates style from content
-CSS helps screen readers and users with disabilities read real content
Speaking of accessibility …
< HTML <
Foundation of Web development
What is HTML?
• HTML is the standard markup language for creating Web
pages.
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the
content
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading",
"paragraph", "table", and so on
• Browsers do not display the HTML tags, but use them to
render the content of the page
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
• The <!DOCTYPE html> declaration defines this
document to be HTML5
• The <html> element is the root element of an
HTML page
• The <head> element contains meta information
about the document
• The <title> element specifies a title for the
document
• The <body> element contains the visible page
content
• The <h1> element defines a large heading
• The <p> element defines a paragraph
HTML Tags
• HTML tags are element names surrounded by angle
brackets:
• <tagname>content goes here...</tagname>
• HTML tags normally 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 forward slash inserted before the tag name
Tip: The start tag is also called the opening tag, and the
end tag the closing tag.
Web Browsers
• The purpose of a web browser (Chrome, Edge,
Firefox, Safari) is to read HTML documents and
display them.
• The browser does not display the HTML tags,
but uses them to determine how to display
the document.
HTML Page Structure
Note: Only the content inside the <body> section (the white area above) is
displayed in a browser.
The <!DOCTYPE> Declaration
• The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration represents the
document type, and helps browsers to display web
pages correctly.
• It must only appear once, at the top of the page
(before any HTML tags).
• The <!DOCTYPE> declaration is not case sensitive.
• The <!DOCTYPE> declaration for HTML5 is:
• <!DOCTYPE html>