html5 Essentials

HTML5 Essentials
Patrick Loner
1 Introduction to HTML5
u What is HTML?
u The Current State of HTML
u HTML Resources
u Choosing a Code Editor
u The Relationship of HTML, CSS, and JavaScript
What is HTML?
u Hypertext Markup Language (HTML)

u The mortar that holds web pages together
u The markup language that defines structure, content, and sometimes style
u Simply text documents using a specific coding language
u Not nearly as difficult as you might think once you have the basics
What is HTML?
Hello World!
This is a sample web page that shows
that at the heart of web pages comes
content and style!
It really isn't all that difficult, but it can
be pretty unimpressive
What is HTML?
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a sample web page that shows that at the heart of web pages comes
content and style!</p>
<p>It really isn't all that difficult, and it can be pretty unimpressive</p>
</body>
</html>
What is HTML?
u Exploring a sample web page

The Current State of HTML
u HTMLs history
u Started in 1991
HTML Resources
u Although the basic syntax of HTML is understandable there is a lot to learn

u Elements
u Attributes
u Syntax
u Usage
u Best practices
u HTML semantics is a large topic but very important in HTML5
u Knowing where to get reference information is critical
HTML Resources
u www.w3.org/TR/html5
u www.whatwg.org/specs/web-apps/current-work/multipage
u www.webplatform.org
u https://developer.Mozilla.org/en-us/docs/web/HTML/Reference
Choosing a Code Editor
u At the heart HTML files are simply text files with an htm or html extension
u While basic text editors can be used its often better to choose a more capable
code editor
u Stay away from word processors for html authoring
u Options
u Notepad
u Notepad++
u TextEdit (Mac)
u Brackets
u Aptana
u Visual Studio Express
u Countless others
Choosing a Code Editor
u Demo some different editors

The Relationship of HTML, CSS, and
JavaScript
u This course covers the essentials of HTML but its difficult to do so without
understanding the role of two other technologies
u Cascading Style Sheets (CSS)
u JavaScript
u In properly formatted web design
u HTML structures the page and defines the content
u CSS styles the page and presents the content
u JavaScript controls how the web page behaves
u HTML is the most important of these three elements
Summary
2 The Structure and Components
u The HTML Document

u DOCTYPE Declaration
u The Head
u The Body
u The Footer
The HTML Document
u The HTML document uses markup language to produce web pages

u The specific parts to the HTML document are
u Doctype declaration
u The head
u The body
u The footer
u HTML documents us
u Tags <p> <h1> <em>
u Elements <p>This is a paragraph</p>
u Block level <p>
u Inline <span>, <em>, <img>, <a>, etc
u Attributes <style =font-family: Verdana;>
The HTML Document
u Basics of HTML syntax (demo)

DOCTYPE Declaration
u The DOCTYPE declaration

u Defines the version of HTML that you will be using
u <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
u <!DOCTYPE html>
u Allows for the use of markup validators

u Standard portion of all HTML documents
The Head
u The head is the first portion of the html structured document

u Contains information and metadata that is not part of the content of the page
u Enhances the content
u Metadata tags
u Links to external style sheets
u Internal styling
u Title of the web page to appear in the browser window
The Body
u The body of the HTML document is the portion that defines all the important
content of your web page
u What you want your visitors to see is all found in the body
u Includes structure to define the content
u Various elements and attributes
u Headings
u Paragraphs
u Sections
u Lists
u Images and media
u Can include styling of the content

The Footer
u A footer appears at the bottom of the HTML web page

u Typically defines information about the section
u Author
u Related content
u Copyright data
u Navigation elements
u A webpage can have multiple footers if necessary

Summary
3 Formatting the Page
u Using Headings
u Creating Paragraphs
u Emphasizing Text
u Controlling Line Breaks and Whitespace
u Creating Lists
u Working with Tables
Using Headings
u Heading elements implement six levels of document headings

u <h1> is the greatest
u <h6> is the least
u Used to briefly describe the content of the section it introduces
u May be used by user agents to construct an outline for the document
automatically
Using Headings
Using Headings
u Cautions
u Do not use headings to decrease font size
u Only use headings when there is semantic meaning, remember that HTML should be
used to define the content not to style it
u Avoid skipping headings
u Best Practices
u Use <header> and <hgroup> elements to further structure the content
Using Headings
.
Creating Paragraphs
u Paragraphs are the most basic element in an HTML document

u Define a paragraph of related text
u <p>This is a very short paragraph. It only has two sentences.</p>
u Block level elements

u A paragraph can contain any amount of text, from a single character to thousands
of words, but is typically used in the standard literary sense to contain one to a
few sentences.
u There is no need to overuse <p>; if the content is actually a list, heading, link, or
other specific type of content, there are many suitable elements available
Creating Paragraphs
Emphasizing Text
u HTML contains four elements that are used to emphasize certain bits of text
as a way of differentiating it from its surrounding content
u Normally means a change in font style for most browsers such as bold or italics
u Screen readers will interpret this and result in a change in voice
u Elements
u <em>
u <i>
u <strong>
u <b>
Emphasizing Text
u The <em> element

u Marks text that has a stressed emphasis
u This emphasis would subtly change the meaning of the sentence
u <p><em>Please</em> remember to unplug the kettle at night.</p>
u Do not use for presentational purposes but only when additional emphasis is
needed
Emphasizing Text
u The <i> element

u Used to simply mean Italics and was considered a presentational attribute in HTML4 and
its use frowned upon
u Has been redefined in HTML5 and does have valid uses
u Represents a span of text in an alternate voice or mood, or otherwise offset from the normal
prose
u Use with
u Technical terms
u Idiomatic phrases from other languages
u Names of books or ships
u Other prose where it is common to italicize but no additional emphasis is required
u <p>As we sailed into port, we spied the <i>Black Pearl</i> moored at the dock.</p>
u <p>She really does add that little bit of <i lang="fr">je ne sais quoi</i>.</p>
Emphasizing Text
u If you are confused you are not alone

u Its common that these two elements are confusing because they appear to
produce the exact same result text that is italicized
u The visual result is indeed the same
u The semantic result is different
u Use <em> when you really require additional emphasis placed on the content
contained inside the <em> tags
u Use <i> when no emphasis is required
Emphasizing Text
u The <strong> element is used to mark importance, seriousness, or urgency of

particular text in comparison with the text around it
u Most browsers will render <strong> as bolded text
u As with other emphasis markers do not use as a formatting tool but only when
applicable
u <p>There are twenty different species living inside this enclosure.
<strong>Warning! Do not feed them: they will eat your shoes.</strong></p>
Emphasizing Text
u The bold element <b> is used to simply instruct the browser to display the
inline text as bold
u The use of this element was frowned upon due to its presentational nature
u HTML5 has redefined <b>
u Identifies content that is stylistically offset from the rest of the text, but no more
important in ter
u <p>In this article, Chris Mills will show you how to combine <b>HTML5</b>,
<b>CSS3</b>, <b>coloured card</b>, and <b>string</b> to create an attractive
mobile for your child's bedroom.</p>ms of its meaning
Controlling Line Breaks and Whitespace
Demo using <br> and and <pre>

Creating Lists
u Lists are powerful tools used to group together similar elements and give site
visitors an easy way to view groups of information
u Lists can be created for just about any type of content
u Lists use at least two components
u A markup element that tells the browser a list is on the way
u A markup element that tells the browser this particular item goes into a list
u Three types of lists

u Ordered lists
u Unordered lists
u Definition lists
Creating Lists
u Another name for an ordered list would be a numbered list because the
browser will by default assign numeric values to items in the list
u The <ol> element represents a list where the items have been intentionally
ordered and where changing the order of the list would change the meaning
u <ol> represents the name and beginning of a list
u <li>List Item</li>
u <li>List Item</li>
u Another name for an unordered list would be a bulleted list

u The <ul> element represents a list where the items have no particular order or
importance
Creating Lists
u Demo Working with OL and UL

u Show nesting a UL within an OL
Creating Lists
u Another type of list is the definition list that includes various name-value
groups
u Consists of definition terms <dt> followed by definitions of those terms <dd>
u Used for
u Terms and definitions
u Metadata topics and values
u Questions and answers
u Any other group of name-value data
Creating Lists
u Demo
Working with Tables
u Tables got a bad name in previous versions of HTML as they were used to
control the presentation of data not a job of the markup language
u Tables still make sense in many situations
u Lots of numbers
u Numerous fields of text that naturally fall into rows and columns
Working with Tables
u There is a lot of markup that occurs in order to create and work with tables
u <table> - denotes the start and end of a table
u Contains a border attribute which acts as a toggle to turn the border on/off
u <tr> - denotes a table row a basic building block of HTML tables

u <td> - provides the data for the rows which ultimately defines the columns as well
u <thead> - defines the header for the table complete with <tr> and <td>
u <tbody> - defines the body of the table, a table can have multiple body sections
u <tfooter> - defines the footer
u <caption> - only one supported must come directly following <table>
u <colgroup> - only one supported must come directly following <caption>
Working with Tables
Month Sales Total Revenue

July 7 $1,500.00
August 12 $4,200.00
September 16 $3,200.00
October 15 $3,000.00
Working with Tables
u You can spice things up a bit

u Use <colgroup> and styles to changes the styles of individual columns
u Use the colspan attribute to create <th> or <td> elements that span multiple
columns
u Use CSS to control all presentational elements of the table such as borders,
placement, shadows, etc.
Working with Tables
Summary
4 Structuring Content
u Why Structure Matters

u Controlling Document Outlines
u Structure Elements
Why Structure Matters
u All web pages have a sort of structure Company Information

that we come to both recognize and
Navigation Menu
expect
u Pages are structured into various
sections such as navigation menus, main
content, additional content and so forth
Additional
Main Content
u This is so common we intuitively Related Content
recognize it but what about those who
are impaired?
u In addition people use search engines Copyrights Contact Info Navigation
which rely on the structure of the data
u Without structuring elements your page doesnt actually have a structure

regardless of how it appears
u Those who are visually or otherwise impaired and are using screen readers
and other technologies rely on the underlying structure of the document
u Its easy to forget but its best practice to develop web pages with this in
mind and it doesnt take a lot of extra work
u Semantics
u The use of HTML markup to enhance and reinforce thee meaning of the pages
content rather than merely concerning the look and feel of the content
u Semantic elements are elements with meaning that help to define the page
content and can be used as opposed to non-semantic elements like <div> and
<span>
u Semantic elements
u <article>
u <aside>
u <section>
u <nav>
u <header>
u <footer>
u Several additional elements exist as well
Controlling Document Outlines
u HTML uses semantic elements like headings and sectioning tags to describe
the outline of the pages contents very similar to a table of contents
u Provides the ability to skim and search your files
u Identifies different types of content and how it relates to other content
Controlling Document Outlines
u Demo
Structuring Elements
u The <nav> element defines a set of navigational links within a page

u Intended for large blocks of navigational links
u Not all links in the document should be inside a <nav> element
u Demo <nav>
u The <article> element

u Specifies independent self-contained content
u Often confused with the <section> element
u An article should make sense on its own and it should be possible to distribute it
independently from the rest of the site.
u Forum posts
u Blog post
u News story
u Comment
u Demo <article>
u The <section> element

u Defines sections in a document, such as chapters, headers, footers, or any other
sections of the document
u When it would make sense to syndicate the content authors are encouraged to use
the <article> element instead
u Not a generic container element for styling purposes but instead a thematic
grouping of content
u Demo <section>
u The <aside> element

u Designed to represent related content such as that content that you might find in a
sidebar
u The sidebar is one of the most common elements in a web page but before HTML5
there wasnt a semantic element to represent this type of content
u Demo - <aside>
u The <div> element

u Allows you to structure or section content without giving it any additional semantic
meaning
u Anonymous grouping tag that doesnt really mean anything
u If there is a tag that passes along the semantic meaning of the text it should be used
instead
u Demo - <div>
u Headers, Main, Footers

u All demo using specs
Summary
5 Adding Links and Images
u Working with Links

u Working with Images
Working with Links
u The World Wide Web (WWW) is all about links to other locations making it a
giant playground where you can surf at high speed to different parts of the
world
u Hyperlinks give your web page the ability to interact with other sources
around it in fantastic ways
u Virtually every web page beyond the simplest example will have at least some
form of hyperlink
Working with Links
u In order to create hyperlinks you must have three pieces of information

u Web address
u Some text to display
u An anchor element <a>
u An inline element that should always be placed within a block element
u Used to anchor a URL to some text on your webpage
u Contains an href attribute that ties everything together
u <a href=http://www.google.com>Google!</a>
Working with Links
u Linking to Resources
u Other HTML pages
u Different locations on the same HTML page
u Resources that arent even HTML
u E-mail addresses
u Photos and videos
u Downloadable files
Working with Links
u Absolute Links
u Use a complete URL (uniform resource locator) to connect to a web page or online
resource
u URL components
Protocol Domain name File name
http:// www.abc.com /default.html
Working with Links
u Relative Links
u Use a type of shorthand to specify the URL you are pointing to
u Only used in certain situations like linking within the same page or the same site
u When the browser sees a link like <a href=about.html>About</a> it assumes that
because the domain name is missing it is a relative link
u The browser then uses the domain name to locate the resource
u Additional steps are required if the page is in a different directory
u Relative links have the advantage of functioning even if you happen to move the
web site to another server or domain!
Working with Links
u Demo
u Creating links
u Absolute
u Relative
u Show different directories
Working with Links
u URLs can be fairly picky sometimes even being case sensitive so if your URL
and <a> element arent working try these steps
u Check the capitalization
u Check the extension
u Check the filename
u Check the URL syntax http:// is required for absolute links
u Copy and paste
Working with Links
u There are various ways in which you can customize the links in your web page
u Open linked documents in new windows
u Use the target attribute
u Link to a specific location within a web page

u Use the name attribute
u Your own web page
u The web page of another site
u Linking to non-HTML resources

u Audio
u Video
u Files
Working with Links
u Demo
u Open in new windows
u Custom locations within a web page
u Linking to media
Working with Images
u Images play an important role on the web page and can include
u Logos
u Banners
u Clickable navigation aids
u Content
u When well used they are a key element of page design and when used poorly
they can result in an unreadable, unintelligible page and a poor user
experience
Working with Images
u The first step to working with images is to determine the appropriate file
format and size for your images
u Web-friendly images arent the same as images for other mediums
u Require a smaller size for fast page loading
u Require a cross-platform file type
Working with Images
u Best general use file formats

u GIF Graphics Interchange Format
u Supports only up to 256 colors
u Best for less-complex, non-photographic images like icons, line art, or clip art
u JPEG Joint Photographic Experts Group
u Supports 24-bit color
u Cross platform and application independent
u Compromises quality when file is compressed though a balance can be struck
u PNG - Portable Network Graphics

u Supports up to 32-bit color
u Combines the best aspects of GIF and JPEG
u Offers the best balance between quality and file size
Working with Images
u Demo
u Resources for more information
u www.w3.org/Graphics
u www.quackit.com/web_graphics/tutorial
u Resources for helping to optimize images

u www.yourhtmlsource.com/optimization/imageoptimisation.html
u www.websiteoptimization.com/speed/12
Working with Images
u Adding images to the page requires that you know the location of the image
and this works best if you can use relative locations
u You could use absolute source references to images stored elsewhere
u Using relative source references is preferred
u Control
u Speed
u Copyright
u Requires that images be stored on the web server

u Best practice is to create a separate images directory so that the relative path to
all the files on the page is the same
Working with Images
u In order to place an image on the page you will use the <img> element
u Known as an empty or singleton element because it only uses a single tag
u Enables you to specify the place on the page where you would like to place the
image
u Uses the src attribute to identify the location of the image
u <p>What a view we have using the Hubble telescope! <img src=hubbleview1.jpg>
u Should use the alt attribute in order to define alternate text to screen readers
u Other attributes
u Title
u Height
u Width
Working with Images
u Demo
Working with Images
u Images can also be used as navigational aids providing an image that is a link
to another resource within the site or on another site
u Nests the <img> element within an <a> element
u <img> element goes in the place that would contain the text to display for the
hyperlink
Working with Images
u Demo creating an image that links and talk about borders and titles to ensure
users know its a link not just an image
Summary
6 Styling Web Pages
u HTML and CSS

u Creating Inline Styles
u Controlling Typography
u Adding Color
u Externalizing Styles
HTML and CSS
u HTML and CSS have a virtually inseparable relationship with one another to
the extent that in order to learn web development you must understand both
languages
u HTML defines the structure
u CSS defines the styling
u The supposed unstyled page doesnt really exist
u Default browser styles
u Custom authored styles
HTML and CSS
u Demo
u Unstyled pages using Firefox vs. Styled pages
HTML and CSS
u Types of Styles
u Inline style adding markup to individual HTML elements
u Internal style sheets sequential markup added to the <style> element in the HTML
document
u External style sheets linking HTML documents to a .css file that contains your
styles
u Style differently based on whether an HTML document is being viewed on a desktop
or a mobile device
HTML and CSS
u Each style sheet is made up of style rules containing two parts

u Selector
u Declaration
u Property
u Value
HTML and CSS
u Declarations can configure a single or multiple values

u H1 {color:teal;}
u H1 {font-family:Arial;}
u H1 {color:teal; font-family: Arial;}
u Whitespace is irrelevant but each designer will have their own preference as
to how they write CSS style rules
u Style sheets override the browsers default styling and your style declarations
will alter the final appearance of the web page in the browser
u Keep in mind that users can override your styles!
Creating Inline Styles
u Inline styles use the style attribute are applied usually to a single element
within a page
u Essentially passing CSS within the HTML element
u Not very efficient
u Sometimes they are useful such as with HTML based email
Creating Inline Styles
u Demo Using the STYLE attribute

Controlling Typography
u In order to control fonts you need to understand various properties available

in CSS as well as certain considerations
u Font Families
u Font styles
u Font weight
u Font size
u Px or em or %
u Font families
u Generic family groups with a similar look like Serif or Monospace
u Serif fonts have small lines at the ends on some characters
u Sans-serif fonts do not have those lines
u Monospace fonts have characters all with the same width
u Font family a specific font family like Times New Roman or Arial
u While its not required some additional information about the CSS Box Model
can be very helpful when dealing with typography
u The CSS box model is essentially a box that wraps around every HTML element
u Demo the box model in developer tools

Adding Color
u Demo
Externalizing Styles
u Demo
7 Creating Your Own Web Site
u There are many steps to creating a web site

u Choosing and purchasing a domain name
u Choosing a hosting provider
u Planning out the site design on paper
u Creating the appropriate file structure
u Creating your html documents
u Creating your style sheets
u Creating content for your html documents
u Putting it all together

html5 Essentials

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

html5 Essentials

Transféré par

Droits d'auteur :

Formats disponibles

HTML5 Essentials

u Hypertext Markup Language (HTML)

u Exploring a sample web page

u Although the basic syntax of HTML is understandable there is a lot to learn

u Demo some different editors

u The HTML Document

u The HTML document uses markup language to produce web pages

u Basics of HTML syntax (demo)

u The DOCTYPE declaration

u Allows for the use of markup validators

u The head is the first portion of the html structured document

u Images and media

u Can include styling of the content

u A footer appears at the bottom of the HTML web page

u A webpage can have multiple footers if necessary

u Heading elements implement six levels of document headings

u Paragraphs are the most basic element in an HTML document

u Block level elements

u The <em> element

u The <i> element

u Idiomatic phrases from other languages

u Names of books or ships

u Other prose where it is common to italicize but no additional emphasis is required

u If you are confused you are not alone

u The <strong> element is used to mark importance, seriousness, or urgency of

Demo using <br> and &nbsp; and <pre>

u Three types of lists

u Another name for an unordered list would be a bulleted list

u Demo Working with OL and UL

u <tr> - denotes a table row a basic building block of HTML tables

Month Sales Total Revenue

u You can spice things up a bit

u Why Structure Matters

u All web pages have a sort of structure Company Information

u Without structuring elements your page doesnt actually have a structure

u The <nav> element defines a set of navigational links within a page

u The <article> element

u The <section> element

u The <aside> element

u The <div> element

u Headers, Main, Footers

u Working with Links

u In order to create hyperlinks you must have three pieces of information

u Link to a specific location within a web page

u Linking to non-HTML resources

u Best general use file formats

u PNG - Portable Network Graphics

u Resources for helping to optimize images

u Requires that images be stored on the web server

u HTML and CSS

u Each style sheet is made up of style rules containing two parts

u Declarations can configure a single or multiple values

u Demo Using the STYLE attribute

u In order to control fonts you need to understand various properties available

u Demo the box model in developer tools

u There are many steps to creating a web site

Vous aimerez peut-être aussi

Demo using <br> and and <pre>