So You Want to Learn To Use HTML and CSS
Website design using the living standard.
Free
James M. Reneau PhD.
Version 2020-06-12a
eBook
Edition
http://www.syw2l.org.
Please support this work at
http://syw2l.org
Free
eBook
This work is licensed under a Creative Commons Attribution-Share-alike 4.0 International License.
Edition
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page ii
So You Want to Learn To Use HTML and CSS – Website design using the living standard.
James M. Reneau PhD.
Free
Copyright 2020 J. M. Reneau PhD. P. O. Box 278 Russell, KY 41169
eBook
This work is licensed under a Creative Commons Attribution-Share-alike 4.0 International License.
Edition
All external links are provided only as an illustration of what can be done. The author and publisher of
this material assume no responsibility for the content or correctness of links to external sites.
NOTE: This is an incomplete and working draft of this document.
Please support this work at
For additional titles and more information check out the pages at http://www.syw2l.org.
http://syw2l.org
Free
eBook
Edition
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page iii
Acknowledgments:
Free
With assistance from:
Ashley V.
•
Chris Zornes – Student and Adjunct Professor – Shawnee State University
•
eBook
Edition
Please support this work at
http://syw2l.org
Free
eBook
Edition
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page iv
Free
Table of Contents
Introduction — For Teachers.....................................................................................................................1
Introduction................................................................................................................................................2
Chapter 1 — A Brief History and Creating Your First Page......................................................................3
Learning Outcomes for this Chapter.....................................................................................................3
What is HTML?.....................................................................................................................................3
eBook
A Brief History of HTML.................................................................................................................3
What is CSS?.........................................................................................................................................4
What is JavaScript?...............................................................................................................................4
How do they work together?.................................................................................................................5
What Makes up an HTML Document?.................................................................................................6
HTML Tags.......................................................................................................................................6
Edition
HTML Attributes..............................................................................................................................6
Understanding Our First HTML Document..........................................................................................7
Semantic Nature of Tags in HTML.......................................................................................................9
Nesting of Tags....................................................................................................................................10
HTML Entities — Displaying Special Characters..............................................................................11
Making Sure Your HTML is Correct...................................................................................................12
Please support this work at
Base HTML Document.......................................................................................................................12
Advanced Topics for Exploration........................................................................................................13
Vocabulary...........................................................................................................................................13
http://syw2l.org
Exercises..............................................................................................................................................14
Word Search....................................................................................................................................14
Problems.........................................................................................................................................14
Free
Chapter 2 — Adding Images, Media, Color, and Font Effects................................................................15
Learning Outcomes for this Chapter...................................................................................................15
Adding Images to Your Page...............................................................................................................15
Image Types and Sizes....................................................................................................................17
Adding Sounds and Music to Your Page.............................................................................................18
Audio Attributes.............................................................................................................................19
eBook
Audio Formats................................................................................................................................19
Adding Videos to Your Page...............................................................................................................21
Adding Inline Style to Your Page........................................................................................................23
Colors..............................................................................................................................................24
Fonts...............................................................................................................................................26
Font Size.........................................................................................................................................27
Advanced Topics for Exploration........................................................................................................28
Vocabulary...........................................................................................................................................28
Exercises..............................................................................................................................................30
Word Search....................................................................................................................................30
Edition30
Problems.........................................................................................................................................
Chapter 3 — Semantic HTML Tags.........................................................................................................32
Learning Outcomes for this Chapter...................................................................................................32
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page v
What Are Semantics?..........................................................................................................................32
Flow, Phrasing, and Metadata Elements.............................................................................................32
Flow in the Body.................................................................................................................................33
Free
Phrasing in Flow..................................................................................................................................37
Advanced Topics for Exploration........................................................................................................40
Vocabulary...........................................................................................................................................40
Exercises..............................................................................................................................................41
Word Search....................................................................................................................................41
Problems.........................................................................................................................................41
eBook
Chapter 4 — Anchors and URLs.............................................................................................................42
Learning Outcomes for this Chapter...................................................................................................42
URL.....................................................................................................................................................42
Absolute URL.................................................................................................................................42
Relative URL..................................................................................................................................44
Creating Anchors.................................................................................................................................44
Edition
Using Fragments to Jump to a Tag on a Page.................................................................................47
Linking to Files...............................................................................................................................50
Advanced Topics for Exploration........................................................................................................50
Vocabulary...........................................................................................................................................50
Exercises..............................................................................................................................................51
Word Search....................................................................................................................................51
Please support this work at
Problems.........................................................................................................................................51
Chapter 5 — Internal and External Style Sheets......................................................................................52
Learning Outcomes for this Chapter...................................................................................................52
http://syw2l.org
External Style Sheets...........................................................................................................................52
Internal Style Sheets............................................................................................................................55
Selectors..............................................................................................................................................55
Free
Tag Selectors...................................................................................................................................55
ID Selectors....................................................................................................................................56
Class Selectors................................................................................................................................56
Validating your CSS............................................................................................................................56
Advanced Topics for Exploration........................................................................................................57
Vocabulary...........................................................................................................................................57
Exercises..............................................................................................................................................57
eBook
Word Search....................................................................................................................................57
Problems.........................................................................................................................................57
Chapter 6 — The CSS Box Model: Borders, Margin, and Padding........................................................58
Learning Outcomes for this Chapter...................................................................................................58
The CSS Box Model............................................................................................................................58
Using Style to Adjust the Box.............................................................................................................59
Edition
Content............................................................................................................................................59
Common CSS Units........................................................................................................................59
Padding...........................................................................................................................................60
Border.............................................................................................................................................61
Margin.............................................................................................................................................62
CSS Descendant Combinator.........................................................................................................62
Display............................................................................................................................................64
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page vi
Centering Images and Text.............................................................................................................65
Advanced Topics for Exploration........................................................................................................68
Vocabulary...........................................................................................................................................68
Free
Exercises..............................................................................................................................................68
Word Search....................................................................................................................................68
Problems.........................................................................................................................................69
Chapter 7 — Lists and Tables..................................................................................................................70
Learning Outcomes for this Chapter...................................................................................................70
Lists.....................................................................................................................................................70
eBook
Ordered and Unordered Lists..........................................................................................................70
Description Lists.............................................................................................................................72
Tables...................................................................................................................................................74
Tables with Span and Style..................................................................................................................76
Advanced Topics for Exploration........................................................................................................78
More Table Organization................................................................................................................78
Edition
Alternating Table Colors in CSS....................................................................................................79
Vocabulary...........................................................................................................................................80
Exercises..............................................................................................................................................81
Word Search....................................................................................................................................81
Problems.........................................................................................................................................81
Chapter 8 — CSS Positioning and Background Images..........................................................................82
Please support this work at
Learning Outcomes for this Chapter...................................................................................................82
Floating Elements................................................................................................................................82
Absolute Positioning Elements...........................................................................................................85
http://syw2l.org
Background Images.............................................................................................................................87
Advanced Topics for Exploration........................................................................................................90
Multiple Background Images.........................................................................................................90
Free
Vocabulary...........................................................................................................................................90
Exercises..............................................................................................................................................91
Word Search....................................................................................................................................91
Problems.........................................................................................................................................91
Chapter 9 – The CSS Grid.......................................................................................................................92
Creating a Simple Grid........................................................................................................................92
eBook
Defining Rows.....................................................................................................................................94
Vocabulary...........................................................................................................................................97
Exercises..............................................................................................................................................97
Word Search....................................................................................................................................97
Problems.........................................................................................................................................97
Chapter 10 — More CSS Selectors to Give Your Style Sheet Surgical Precision...................................98
Learning Outcomes for this Chapter...................................................................................................98
Edition
Selectors..............................................................................................................................................98
The Universal Selector...................................................................................................................98
The Tag Selector.............................................................................................................................98
The Class Selector..........................................................................................................................99
The ID Selector...............................................................................................................................99
Cascading......................................................................................................................................101
Combinators......................................................................................................................................101
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page vii
This and That Combinator............................................................................................................101
Descendant Combinator................................................................................................................102
Adjacent Sibling Combinator.......................................................................................................102
Free
General Sibling Combinator.........................................................................................................102
Direct Children Combinator.........................................................................................................102
Attribute Selectors.............................................................................................................................104
Pseudo-classes...................................................................................................................................106
Advanced Topics for Exploration......................................................................................................107
Vocabulary.........................................................................................................................................107
eBook
Exercises............................................................................................................................................108
Word Search..................................................................................................................................108
Problems.......................................................................................................................................108
Chapter 11 — Responsive CSS..............................................................................................................109
Learning Outcomes for this Chapter.................................................................................................109
Media Types......................................................................................................................................109
Edition
Different CSS for Different Media....................................................................................................109
Media Features (@media with Sizes)................................................................................................112
Advanced Topics for Exploration......................................................................................................119
Vocabulary.........................................................................................................................................119
Exercises............................................................................................................................................120
Word Search..................................................................................................................................120
Please support this work at
Problems............................................................................................................................................120
Chapter 12 — Forms and Input Elements..............................................................................................121
Learning Outcomes for this Chapter.................................................................................................121
http://syw2l.org
Form Tag...........................................................................................................................................121
The Input Tag....................................................................................................................................122
The Label Tag....................................................................................................................................125
Free
Other form Elements....................................................................................................................127
Advanced Topics for Exploration......................................................................................................131
Vocabulary.........................................................................................................................................131
Exercises............................................................................................................................................132
Word Search..................................................................................................................................132
Problems.......................................................................................................................................132
Bonus Chapter 1 — HTML Content Model...........................................................................................133
eBook
Metadata Elements............................................................................................................................133
Flow Content.....................................................................................................................................134
Sectioning Content............................................................................................................................134
Heading Content................................................................................................................................134
Phrasing Content...............................................................................................................................134
Embedded Content............................................................................................................................135
Edition
Interactive Content............................................................................................................................135
Bonus Chapter 2 — Intellectual Property..............................................................................................136
Intellectual Property..........................................................................................................................136
Copyright...........................................................................................................................................136
Patent.................................................................................................................................................136
Licenses.............................................................................................................................................136
Proprietary Licenses.....................................................................................................................136
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page viii
Restrictive but Open Licenses......................................................................................................137
Open Source Licenses...................................................................................................................137
Material in the Public Domain......................................................................................................137
Free
Author's Notes and Acknowledgments..................................................................................................138
eBook
Edition
Please support this work at
http://syw2l.org
Free
eBook
Edition
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page ix
Illustration Index
Free
Illustration 1: What goes into a Website...................................................................................................5
Illustration 2: My First Webpage...............................................................................................................8
Illustration 3: Russian Matryoshka dolls.................................................................................................10
Illustration 4: Including an Image on Your Page.....................................................................................17
Illustration 5: Page with Audio and Text..................................................................................................21
Illustration 6: Adding Video to Your Page...............................................................................................23
eBook
Illustration 7: My Colorful Page..............................................................................................................25
Illustration 8: Changing Fonts..................................................................................................................28
Illustration 9: Semantic Blocks................................................................................................................35
Illustration 10: Page with Flow................................................................................................................36
Illustration 11: Page with Phrasing.........................................................................................................39
Illustration 12: Uniform Resource Locator (URL)..................................................................................43
Edition
Illustration 13: Simple Page with Links...................................................................................................46
Illustration 14: Page with a Relative Link................................................................................................47
Illustration 15: Page with Many Types of Anchors..................................................................................49
Illustration 16: About Page......................................................................................................................50
Illustration 17: Page with External Style Sheet.......................................................................................55
Illustration 18: CSS Box Model...............................................................................................................59
Please support this work at
Illustration 19: CSS with Margins and Padding.......................................................................................64
Illustration 20: Centering Images and Text..............................................................................................67
Illustration 21: Ordered and Unordered lists............................................................................................72
Illustration 22: A Definition List (Glossary)............................................................................................74
http://syw2l.org
Illustration 23: Table with Caption and Headers.....................................................................................76
Illustration 24: Table with Row and Column Spanning...........................................................................78
Illustration 25: Floating Elements............................................................................................................84
Free
Illustration 26: Absolute Positioning an Element....................................................................................87
Illustration 27: Page with Background Images........................................................................................90
Illustration 28: Simple 2 Column Grid Layout.......................................................................................94
Illustration 29: Layout of the Three Grids..............................................................................................95
Illustration 30: Second Grid Example - Multiple Grids..........................................................................96
Illustration 31: Simple CSS Selectors....................................................................................................101
eBook
Illustration 32: CSS Combinators..........................................................................................................104
Illustration 33: Attribute Selector...........................................................................................................106
Illustration 34: Page with Media Rules - Screen...................................................................................111
Illustration 35: Page with Media Rules - Printed..................................................................................111
Illustration 36: Common Screen Sizes...................................................................................................112
Illustration 37: Page for Many Devices - Phone...................................................................................115
Edition
Illustration 38: Page for Many Devices - Tablet...................................................................................117
Illustration 39: Page for Many Devices - Wide.....................................................................................119
Illustration 40: Data Sent to a Server....................................................................................................122
Illustration 41: Company Picnic - Registration Form...........................................................................126
Illustration 42: Company Picnic - Registration Form Data..................................................................127
Illustration 43: Sample Form with Elements.........................................................................................130
Illustration 44: Sample Form - Data.....................................................................................................130
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page x
Illustration 45: HTML Content Model...................................................................................................133
Free
eBook
Edition
Please support this work at
http://syw2l.org
Free
eBook
Edition
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 1
Introduction — For Teachers
Free
Introduction — For Teachers
This book will be an introduction to HTML and CSS at a beginning level. Each of the chapters
will contain numerous examples, activities, and problems for you to use in your class or assign to
the students you are working with.
A full description of HTML and CSS is beyond the scope of this introduction. But the coverage
eBook
of this text should prepare your students to move into more advanced function and features of
Web development on their own.
All the code in the examples and statements described in the text will be based upon the more
recent standards as published by the World Wide Web Consortium (W3C)1, the Mozilla
Developer Network2, and the WHATWG Living Standard3. All code will be tested in multiple
Edition
common browsers and will validate, without error.
The language and style of the book will be targeted at middle and high school (Grade 7+)
readers. The material will be appropriate for use in introductory courses at grades 7-12, in
technical programs, and in introductory college courses. Chapters will include assignments and
challenges for the self-paced learner.
Please support this work at
An additional book in this series will be entitled "So You Want to Learn to Program JavaScript?",
will start where this book ends.
http://syw2l.org
Free
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 2
Introduction
Free
Introduction
Welcome, aspiring web masters! "So You Want to Learn to Use HTML and CSS" is an
introductory level HTML and CSS book that provides everything you need in order to begin
creating your own simple websites. Follow along at your own pace and practice what you've
learned with the end of chapter challenges and soon you'll find yourself developing a mastery of
eBook
HTML and CSS.
The entirety of the code described in this text is based upon the HTML Living Standard as
published by WHATWG at the time of publication. All the code has been tested in a multitude of
common web browsers and will validate on the W3C Validator. More information on the W3C
can be found at http://www.w3.org and WHATWG at http://www.whatwg.org.
Edition
Good luck and happy learning!
-Jim
Please support this work at
http://syw2l.org
Free
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 3
Chapter 1 — A Brief History and Creating Your First Page
Free
Chapter 1 — A Brief History and Creating Your First
Page
Introduction
Learning Outcomes for this Chapter
eBook
Upon completion of the reading of this chapter and assignments found at the end, a student
should be able to:
explain the HTML, as a base technology of the Web, is an ever evolving and changing
•
language,
• recall that HTML was originally created in the late 1980's by a scientist, Tim Berners-
Edition
Lee,
differentiate the difference between null or void tags and tags with a required ending,
•
implement basic tag nesting,
•
recall and use the required parts of a properly formed HTML tag.
•
What is HTML?
Please support this work at
HTML, or Hypertext Markup Language, is a computer language that is used to structure the
content of a webpage. Hypertext refers to the system of linking one piece of information to
another, and markup refers to the actual "marking up" of the information in order to organize it
http://syw2l.org
into something that is readable by a computer program. It is useful to think of learning HTML as
learning an entirely new language. Becoming fluent in HTML will allow you to read, decipher,
and write web-pages.
Free
1
Just as with any living language, HTML has evolved over the years and continues to change.
HTML was originally created in 1989 by Tim Berners-Lee while at CERN, the European
Organization for Nuclear Research, as a way to share linked documents in an easy to access
23
manner. The first website created, though simplistic to our modern standards, succeeded in
achieving the intended outcome. 4
eBook
A Brief History of HTML
• HTML was created in 1989 by Tim Berners-Lee at CERN
• HTML— Published June 1993 as an Internet Engineering Task Force (IETF) working
1 http://www.w3.org/MarkUp/
2 http://www.w3.org/People/Berners-Lee/
3 http://home.web.cern.ch/about Edition
4 http://info.cern.ch/
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 4
Chapter 1 — A Brief History and Creating Your First Page
draft by Tim Berners-Lee and Daniel Connolly 5
Free 5
HTML 2.0 — IETF RFC1866 November 1995 by Berners-Lee and Connolly — this
•
defined much of the structure that we still use today
HTML 3.2 – January 1997 — First standard published by the w3.org. Added tables and
•
many of the features that IBM, Microsoft, Netscape and others had added to their
6
browsers
eBook
HTML 4.01 – December 1999 — Standardized scripting and introduced style sheets to
•
7
HTML
XHTML 1.0 – January 2000 — Reformulated HTML 4.0 into XML 8
•
XHTML 1.1 – November 2010 — Removed many of the HTML 3 and HTML 4
•
Edition 8 9
presentation tags and moved them to CSS
HTML5.2 — December 2017 — HTML5 "Recommendation" of the w3.org .
•
HTML Living Standard – May 2019 – W3C and WHATWG agree on a continually
•
changing and evolving standard10 that is called the Living Standard.
Please support this work at
What is CSS?
Though we will not be going over CSS until you have a solid understanding of basic HTML, it is
http://syw2l.org
useful be able to know and recognize CSS when you see it. CSS stands for Cascading Style
Sheet, and is a language that is used to describe the style of a website's appearance to the user.
"Cascading" refers to the hierarchy of importance of the code, with the lower inputs taking
precedence over those above. As with HTML, CSS has grown over time and has become the
standard way to control the appearance of a webpage. 10 Free
The w3.org maintains the CSS standard.
What is JavaScript?
eBook
Though we will not be discussing JavaScript in this volume, it is useful to know and understand
the importance of its role in a webpage. JavaScript is a full featured object-oriented
programming language which is used to control and manipulate HTML, CSS, and even the
browser itself. JavaScript is a common part of a web browser, and you have most likely already
5 http://www.rfc-editor.org/rfc/rfc1866.txt
6 http://www.w3.org/TR/REC-html32
7 http://www.w3.org/TR/html401/
8 http://www.w3.org/TR/xhtml11/
9 https://www.w3.org/TR/html52/ Edition
10 http://www.w3.org/Style/LieBos2e/history/Overview.html
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 5
Chapter 1 — A Brief History and Creating Your First Page
experienced using it at some point. Have you ever clicked on the check-out button during a
Free
purchase in an online store or filled out a form on a webpage? That is JavaScript at work!
Though it may seem complicated at first, it is helpful to think of the relationship between HTML,
CSS, and JavaScript in simple categories. HTML organizes the information, CSS makes it look
presentable in a web browser, and JavaScript makes the interactive portions work.
JavaScript and it's standard is managed by ECMA, originally known as the European Computer 11
eBook
Manufacturers Association. The standard ECMA-262 actually calls the language ECMAScript.
How do they work together?
An HTML document may contain HTML, CSS, and JavaScript code. It may also tell the browser
to load external CSS and JavaScript files. These files may be on a local drive or a web server.
Edition
A website is usually made up of many HTML pages, CSS files, and JavaScript functions. When
they are sent to the browser, by the server, additional dynamic content may be included into the
pages. The web server may process forms submitted, generate custom content, and even query
and update databases. There are dozens of dynamic extensions and languages. They include:
PHP, Perl, Java, NODE.js, and others.
Please support this work at
http://syw2l.org
Free
eBook
Edition
Illustration 1: What goes into a Website
11 https://www.ecma-international.org/publications/standards/Ecma-262.htm
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 6
Chapter 1 — A Brief History and Creating Your First Page
What Makes up an HTML Document?
Free
HTML is a "plain-text" document made up of tags with content and attributes. This means that an
HTML document consists of human readable text that has minimal formatting mixed with tags
that tell the browser what the text means and suggests how to display the text. A tag is the
"Markup" in HTML and communicates to the web browser what the information means. For
example, the <p>...</p> tag tells the browser that the text and markup following it should be
eBook
treated as a paragraph.
HTML Tags
A tag is easy to recognize as it begins with a < and ends with a >. These tag opening symbols are
the "less-than" and "greater-than" symbols (also known as chevrons). If the tag contains content,
such as the text in a <p>...</p> tag, it will be followed by an end tag that is marked with a /.
Edition
For example, this is the proper way to mark up a paragraph:
<p>Example text.</p>
Some tags, also known as "empty tags" or "void tags", do not have an end tag. For example, the
Please support this work at
<hr> tag creates a Hard Rule (line) across the page. Since the <hr> tag does not contain
anything, it does not require an end tag.
http://syw2l.org
HTML Attributes
In a typical HTML document, tags need to be differentiated from each other and will need to
have special properties. We call those "attributes" of a tag. This is done by specifying the name
Free
of the attribute and then the value of that attribute in the opening tag. We should not need to
specify them again in the closing of the tag. For instance, the empty tag <img> which displays
images typically has two attributes:
<img src="picture.jpg" alt="a picture of me">
eBook
In this example, the attribute src (short for "source") defines the file name or URL of the image,
and alt (short for "alternate name") describes the image to users who cannot see the image. We
will learn, in a future chapter, how to use the <img> tag.
In order for CSS and JavaScript to easily find specific tags, the id and class attributes can be
Edition
added to any tag. An id is a unique identifier (ID) that may be assigned to one and only one tag
on a page. The class attribute may be shared between several tags, and a tag may belong to
multiple classes. The id or class name must begin with a letter and can then be made up of
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 7
Chapter 1 — A Brief History and Creating Your First Page 12
letters, numbers, hyphens (-), underscores (_), colons (:), and periods (.). For example, observe
Free
this line:
<p id="gettysburgAddress">Four score and seven years ago...</p>
eBook
In this example, the tag <p>...</p> has an id of "gettysburgAddress", and can then be easily
singled out in CSS and JavaScript. Classes function similarly, however it is important to
remember that while a class may be shared between many tags in an HTML document, an id
must only be used once.
Understanding Our First HTML Document
Edition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
Please support this work at
<title>Chapter 1 Example 1</title>
</head>
<body>
<h1>My first webpage & example.</h1>
http://syw2l.org
<p>A paragraph of text. Asa sareha tubedit nelurie cerietatesa
iferitam? Teta tas ho sihut cakek usu ties getef. Odemopi lazeme
hienie rorelop nefuva resit. Ibotum nedili ga yave me taru rud ge
yeg. Nogo nu sir fenene his utanieses ci. Tenedac mo co banevu boce
cenale tete. Rani nasat lec. Inodan hen usava reni refos. Ola buh
mo men: Ecuxode asemiewu tayopi sete oteyavep ganes liheyu
lecipef.</p>
</body> Free
</html>
eBook
Edition
12 http://www.w3.org/TR/html401/types.html#type-name
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 8
Chapter 1 — A Brief History and Creating Your First Page
Free
eBook
Edition
Illustration 2: My First Webpage
Please support this work at
Though the above may seem confusing to a first time viewer, the pieces can be broken down
quite simply. Before you learn to write HTML it is important to be able to recognize the most
common tags. Keep in mind the hierarchy of tags as you read. We often refer to hierarchy in a
webpage as the "nesting" of tags, or how one tag is inside another tag.
http://syw2l.org
• <!DOCTYPE html> — This will be the first line of any page that you create. It is used
to communicate to the web browser which version of the HTML language it is written.
13
Free
The current "Living Standard" is represented with the lowercase html. Previous
standards have other specifiers.
• <html>...</html> — The "html" tag is the root of the page and tells the browser
that it is reading an HTML document. All of the HTML document will reside between the
open <html> and close </html> tags.
eBook
• The <head>...</head> of the document contains information (called metadata) that
will, aside from the title, be mostly invisible to the viewer. It may be useful to think of the
head as a brain that does most of the behind-the-scenes work. As with a human being, the
head must come before the body.
The standard requires that a HTML document must have one <head>...</head>
directly inside the <html>...</html> tag. It can not be inside of another tag.
Edition
• <meta charset="utf-8"> — This important tag communicates how the text is
13 http://www.w3.org/QA/Tips/Doctype
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 9
Chapter 1 — A Brief History and Creating Your First Page
encoded to the web browser. Utf-8 is short for Unicode 8 bit format and allows for
Free
2,097,152 different characters from all languages of the world to be viewable in your
HTML document, ensuring that your page reaches the maximum number of potential
14
viewers.
<title>...</title> — The title of a webpage is a short, stand-alone description of
•
what the page is about. The title will often display in the title bar of a web browser, the
eBook 15 16
title in search engines, and the name of the page shortcut. The title is required on all
HTML documents and must be in the <head>...</head>.
<body>...</body> — The "body" tag contains all the content of the webpage that
•
will be displayed in the browser. Anything that you want your viewers to see should go
inside this tag/section.
The standard requires that a HTML document must have one <body>...</body>
Edition 17
directly inside the <html>...</html> tag. It can not be inside of another tag.
<h1>...</h1> — Is used to mark a section header of the highest rank. There are six
•
header levels (ranging from h1 to h6). It is not valid for a header tag to be inside a
paragraph.
Please support this work at
For example, you would wrap the page title in an <h1>...</h1> as it is the highest
level in the hierarchical scale. Titles of subsections would be in <h2>...</h2> tags.
Titles of sub-subsections would be in an <h3>...</h3> tag.
http://syw2l.org
• <p>...</p> — The text or other HTML inside this tag will be grouped as a paragraph.
By default, this element displays as a block across the full browser window, meaning that
it will appear below other elements rather than beside another element. It will shrink or
stretch to fit the entire width of the page regardless of size and words will automatically
wrap. 18 Free
Semantic Nature of Tags in HTML
At this point, we need to stress that HTML tags are used to describe the content of our pages, not
eBook
19
to format the output on the browser. Semantics is the study of the meaning of language. In
HTML we use the tags to mark what something means. We use CSS to change how things
appear.
14 https://html.spec.whatwg.org/multipage/semantics.html#the-meta-element
15 http://www.unicode.org/faq/utf_bom.html
Edition
16 http://en.wikipedia.org/wiki/UTF-8
17 https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
18 https://html.spec.whatwg.org/multipage/grouping-content.html#the-p-element
19 https://www.dictionary.com/browse/semantics
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 10
Chapter 1 — A Brief History and Creating Your First Page
Nesting of Tags
Free
Now that you understand the essential components of a webpage, we can begin talking about the
hierarchy of tags, or more commonly referred to as "nesting". You can think of nesting like
Russian Matryoshka dolls 20, which contain smaller and smaller dolls that fit inside of each
20
other. The smallest one fits in to the next largest, and so on until you reach the largest doll,
which would be the <html>...</html> tag. If a tag begins inside of another tag, it must end
eBook
inside of that same tag.
Edition
Please support this work at
http://syw2l.org
Illustration 3: Russian Matryoshka dolls
Free
For example, a paragraph inside of the body must be written as such:
<body>
<p>This is a paragraph</p>
</body>
eBook
Note how the <p>...</p> is nested within the <body>...</body> tag. Improper nesting
can lead to your web-pages rendering incorrectly in the same way that incorrect parentheses in a
math problem will give incorrect answers. The web browser can only read and speak HTML.
Make sure to structure your sentences, or code, correctly.
Edition
Here are some examples of incorrectly nested tags:
20 https://en.wikipedia.org/wiki/Matryoshka_doll
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 11
Chapter 1 — A Brief History and Creating Your First Page
Free
<h1>The Best Ice-Cream
<p>A paragraph about the best frozen goodness I have ever eaten.
</h1>
</p>
eBook
The example above is incorrect because the <h1>...</h1> ends after the <p>...</p>
begins. You should not put any other tag inside a header tag.
<h1>The Best Ice-Cream
<p>A paragraph about the best frozen goodness I have ever eaten.</p>
</h1>
Edition
This example is incorrect because the <p>...</p> is nested inside of the header. The
<h1>...</h1> tag is not a container, but should be a description of the tags that follow it.
Here is a correct example of nesting:
Please support this work at
<h1>The Best Ice-Cream</h1>
<p>A paragraph about the best frozen goodness I have ever eaten.</p>
http://syw2l.org
Remember, proper nesting is one of the most important aspects of writing an HTML document.
Free
HTML Entities — Displaying Special Characters
In an HTML document <, >, and & have a special meaning. You should not include them in the
text of your pages as they will potentially confuse the web browser. However, if you need to
21
add special symbols and Unicode characters to your page, you may do so using HTML Entities.
The table below shows a few of the character entity mark-ups:
eBook
Entity Character
< <
© ©
Edition
21 http://www.tutorialspoint.com/html5/html5_entities.htm
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 12
Chapter 1 — A Brief History and Creating Your First Page
Free >
>
€
€
&
&
eBook ₤
£
"
"
Making Sure Your HTML is Correct
Edition
Complete web efficiency comes from ensuring that your HTML document is using the language
correctly. Though it is often difficult to spot your own mistakes, running your page through the
web validator that the w3 provides will give you a quick and thorough report of any mistakes
that you may have made. The free validator can be found at:
http://validator.w3.org/
Please support this work at
Base HTML Document
To be consistent in your HTML pages, it is recommended that you start with a base document or
http://syw2l.org
template that has all the required elements on it. Below you will find a very simple one of those.
As you learn more tags and uses, your base document may have other tags and semantic
(Chapter 3) blocks added.
<!DOCTYPE html> Free
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<!-- page content goes here -->
</body> eBook
</html>
The base document does also shows the HTML comment statement <!-- message -->. A
Edition
comment statement can exist anywhere inside the HTML document and is totally ignored by the
browser and search engines. It is often used as a place for developers to put their name and a
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 13
Chapter 1 — A Brief History and Creating Your First Page
description of the page. Comments are also used, like above, to remind the developer that
Free
something is missing and where it need to be added.
Advanced Topics for Exploration
• The format of HTML4 and XHTML1.1 base pages 22
eBook
Numeric representation of Entities and reference to extended list of them
•
Vocabulary
• • CSS • • body
head
Cascading Style Sheet
Edition • • id
comment
•
DOCTYPE
meta
•
tag
HTML Entities
• • HTML • • p
title
Hypertext Markup Language
Please support this work at
•
•
void/empty tag
JavaScript
•
•
• attribute
http://syw2l.org
Free
eBook
Edition
22 http://dev.w3.org/html5/html-author/charref
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 14
Chapter 1 — A Brief History and Creating Your First Page
Exercises
Word Search
Free S t i J a t d a m e t a
p t e a e t t T t t t a
eBook
a H p v n D i i t a r t
r b d a t O e S t e g t
a a b S i C l Y C l r r
g t d c t T e v s S e i
r a i r i Y e h i i S b
a P d i e P t m e b C u
p s d p s E v t p a v t
Edition
h g m t e E t o a t d e
L r H T M L M e i m y a
h y P b o d y c l d r b
CSS, DOCTYPE, HTML, JavaScript, attribute, body, empty,
entities, head, id, meta, paragraph, tag, title, void
Please support this work at
Problems
http://syw2l.org
1. Using the links in the text as a starting place, write a 1-2 page history of the development
of e-commerce of the Web. As part of your research find important dates in the history of
e-commerce that you have used. Be sure to include links to your sources in your text.
Free
2. The Extensible Markup Language (XML) is a way to mark up data and other
information, it has a very similar structure to HTML. Write a 1-2 page answer to the
question "Is HTML a subset (or complies with) the XML standard?" Be sure to include
links to your sources in your text.
3. Use the base HTML document (above) and create a page that showcases all six levels of
headings (<h1>...</h1> to <h6>...</h6>). Be sure to validate your HTML using
eBook
the validation service at http://validator.w3.org/.
4. Start with the base HTML document (above) and create a simple page about you or a
famous person from history. Place your name in an <h1>...</h1> at the top of the
visible page. Then put a couple of <h2>...</h2> tags, with topics, below the name
and a paragraph or two after each of the second level headings. Be sure to include on the
Edition
page the source used for your material. Validate your HTML using the validation service
at http://validator.w3.org/.
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 15
Chapter 2 — Adding Images, Media, Color, and Font Effects
Chapter 2 — Adding Images, Media, Color, and Font
Free
Effects
A Web page is rather flay and uninteresting when there are no pictures, graphics, and there are no
colors. This chapter shows how to proper include images, sound files, and video files into your
page. We will also use inline style to add color to elements and changes fonts on our pages.
eBook
Learning Outcomes for this Chapter
Upon completion of the reading of this chapter and assignments found at the end, a student
should be able to:
• • insert an image on a web page with alternate text for accessibility,
recall, describe, and choose images in various formats based upon the specific features of
Edition
the image,
add audio and video playback to a Web page,
•
differentiate between common audio formats and include multiple formats in a single tag,
•
add color to the page and the content of the page using inline style,
• • • differentiate between common video formats and include multiple formats in a single tag,
explain the concept of RGB colors and use the color name, hexadecimal form, and
Please support this work at
rgb() function in CSS,
recall the 5 standard fonts families found in all Web browsers,
• • change the font family and size on an element or on an entire Web page.
http://syw2l.org
Adding Images to Your Page
The <img> tag allows images to be placed into an HTML document. It is categorized as a
23
Free
Phrasing Element, meaning that it is placed inside paragraphs and other elements of the
document. It is also an empty tag and does not require a closing tag. The <img> tag requires
two attributes: the src (short for source) attribute and the alt (short for alternate name)
attribute inside of the tag. A properly written <img> will look like this:
eBook
<img src="clouds.jpg" alt="Beautiful Clouds">
In this example, the src, or the source of the image, is directing the web browser to the location
of the image. The image clouds.jpg rests inside the same folder as the HTML document.
Edition
<img src="media/clouds.jpg" alt="Beautiful Clouds">
23 https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 16
Chapter 2 — Adding Images, Media, Color, and Font Effects
Free
In the second example the image file is inside the "media" folder that is in the same folder as the
HTML document. If the image does not exist in the specified path, the browser will display the
text in the alt attribute.
In order to prevent long and complicated src URLs when you are starting out, it is
recommended that you place your images and media in the same folder as your HTML (For a
eBook
more advanced discussion of URLs, see Chapter 4). Image file names are case-sensitive on some
servers, so it is important to type in the files exactly how they are in your folder.
The alt attribute contains a brief text message that describes what the image is. It is displayed
when the browser is unable to load the image or to describe the image to the visually impaired
that are using a screen reader. The alt is required but if the image is not important to the
Edition
content of the page the quotes may be left empty.
Here is an example of how your page will look with an <img> tag:
<!DOCTYPE html>
<html lang="en">
Please support this work at
<head>
<meta charset="utf-8">
<title>Chapter 2 - Image</title>
</head>
<body> http://syw2l.org
<h2>Beautiful Cloud Picture</h2>
<img src="media/clouds.jpg" alt="Beautiful Clouds">
Free
<p>Image DSCN8545.jpg by pippalou was downloaded from morguefile.com
on 2020-05-24 ( http://mrg.bz/i4pI5n ) and is licensed under the
morgueFile license (http://www.morguefile.com/license/full ).
Scaled with "GIMP" and saved as clouds.jpg.</p>
</body>
</html>
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 17
Chapter 2 — Adding Images, Media, Color, and Font Effects
Free
eBook
Edition
Please support this work at
http://syw2l.org
Illustration 4: Including an Image on Your Page
Free
Remember, if you do not have permission to use an image on your web site, you should not use
it. Images are protected under International Laws called Copyright Laws. If you have permission
it is always proper to give credit to the provider of your image. If you create the image (drawing
or photograph) then you, as the author, may use the image on your Web pages.
Image Types and Sizes
eBook
Though the extension of an image (.jpg, .jpeg, .gif, .png, etc.) may seem inconsequential, it is
essential for images to be of the proper file type in order to ensure that a browser will display
them properly. Here is a list of commonly supported file-types on most browsers for quick
referencing:
• GIF — Has a wide range of colors (256 different colors per image from 16,777,216 (24-
Edition
bit) possible colors) and has transparency. GIFs can also be created to show simple
animations. GIFs are very commonly used for clip-art and logos. 24
24 http://en.wikipedia.org/wiki/Graphics_Interchange_Format
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 18
Chapter 2 — Adding Images, Media, Color, and Font Effects
JPG/JPEG — The JPG format is used for photographic quality images. It features lossy
•
Free 25
compression, which means that files are made smaller by reducing image quality. For a
large image this is typically not an issue, but if the image is scaled it may lead to a lower
quality or pixelated appearance.
PNG — The PNG image type allows for more than 16 million colors and transparencies.
•
It is compressed using a lossless method. 26
eBook
SVG — This file type uses vector-based graphics, meaning that it can be resized without
•
27
losing any quality.
There are other file-types, however support may be varied depending on the browser.
Large file sizes (especially with the JPG) result in better quality images, but cause long load
times that can cause the user inconvenience. On the other hand, too low of a quality can result in
Edition
a less than attractive webpage. There are other factors to consider when choosing a file type,
such as transparency, so be sure to choose the right file type for your needs.
Later you will be shown how to scale an image with CSS to allow it to be shown smaller or
larger than its size. It is recommended that you resize an image to the needed size before using it
on your page. Shrinking a large image will require a longer load time and wasted data
Please support this work at
transmission, while enlarging an image will result in poor visual quality.
Adding Sounds and Music to Your Page
http://syw2l.org
28
The <audio>...</audio> tag allows sounds and music to be added to a webpage. Unlike
the <img> tag, <audio>...</audio> requires a closing tag. There are two general ways to
add sound: 1) using the src attribute, or 2) using the <source> tag. Here is an example of the
Free
first.
<audio src="media/clang.mp3">Can't play the clang sound.</audio>
In the example above, src functions just as it does when inserting an image. The text between
the <audio>...</audio> will appear to the user if the browser does not support the file
type. This way of adding sound to a page does not allow for more than one file-type, limiting the
number of users who will be able to hear your sound. eBook
In order to achieve maximum browser compatibility, it is recommended that an
<audio>...</audio> tag be written with multiple different formats of the same audio. It
looks like:
25 h ttps://www.jpeg.org/index.html
26 http://en.wikipedia.org/wiki/Portable_Network_Graphics
27 http://en.wikipedia.org/wiki/Scalable_Vector_Graphics Edition
28 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 19
Chapter 2 — Adding Images, Media, Color, and Font Effects
Free
<audio>
<source src="angels.mp3" type="audio/mpeg">
<source src="angels.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
eBook
In this example, the <audio>...</audio> tag contains several <source> tags to specify
the location and type of the media file. This allows for multiple formats of the same audio. The
type attribute in this example communicates to the browser what format of audio it is reading,
29
and must match the src file's format.
Audio Attributes
Edition
There are several additional attributes that can be contained within the
<audio>...</audio> tag that specify when the audio is played and at what volume.
<audio autoplay> tells the browser to begin playing the sound automatically, and <audio
controls> will place a controller on the webpage that the user can interact with. The
controls attribute is highly recommended as it allows the user to pause the sound, restart it,
Please support this work at
and raise and lower the volume.
Audio Formats
http://syw2l.org
There are many different file types for sounds and music, however different browsers will have
different levels of support for each one. Here is a quick reference list of the three most common
formats: 30
Free
• mp3 — Stands for MPEG Layer III audio. A very common audio compression format
• wav — Stands for Windows uncompressed audio format. Common sound file format
made on computers that run the Windows operating system
• ogg — Free and open source container file holding Vorbis format compressed audio
eBook
Keep in mind that some browsers and systems may play some but not all the formats of audio. In
order to ensure the maximum support on all systems, you may consider using an audio
transcoding application to convert your file into as many formats as possible. There are many
programs available to do this, like:
31
• Audacity — Open source audio recorder, editor, and transcoder
Edition
29 http://www.iana.org/assignments/media-types/media-types.xhtml
30 http://en.wikipedia.org/wiki/Audio_file_format
31 https://sourceforge.net/projects/audacity/
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 20
Chapter 2 — Adding Images, Media, Color, and Font Effects
fre:ac — An open source audio ripper encoder that was previously known as BonkEnc
32
•
Free
33
MediaCoder — For computers using the Windows operating system
•
Here is an example page with an image and audio on it:
eBook
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chapter 2 - Audio</title>
</head>
<body>
<h2>A Brief Reading from Moby Dick by Herman Melville</h2>
Edition
<img src="media/PeterM-Whale-300px.png" alt="Blue Whale">
<p>Call me Ishmael. Some years ago- never mind how long precisely-
having little or no money in my purse, and nothing particular to
interest me on shore, I thought I would sail about a little and
see the watery part of the world.</p>
<audio controls>
<source src="media/mobydick_callme.mp3" type="audio/mpeg">
Please support this work at
<source src="media/mobydick_callme.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<p>Text from
http://syw2l.org
https://americanliterature.com/author/herman-melville/book/moby-dick-or-the-
whale/chapter-1-loomings and in the public domain. Audio clip takenfrom
https://librivox.org/moby-dick-by-herman-melville and in the public domain.
Image of a whale was taken from https://openclipart.org/detail/120/whale and
in the public domain.</p>
</body>
</html> Free
eBook
Edition
32 https://www.freac.org/
33 http://www.mediacoderhq.com/
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 21
Chapter 2 — Adding Images, Media, Color, and Font Effects
Free
eBook
Edition
Please support this work at
http://syw2l.org
Illustration 5: Page with Audio and Text
Free
Adding Videos to Your Page
34
The <video>...</video> tag functions very similar to the <audio>...</audio> tag.
The attributes autoplay and controls function in the same fashion. File formats are
extermely important when you are inserting a video. There are two ways to write a
<video>...</video> tag. The first is appropriate when the video has only one format, and
eBook
is written like this:
<video src="videofile.mp4">Your browser does not support the video
element</video>
Edition
For maximum compatibility you should use the multi-format <video>...</video> tag:
34 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 22
Chapter 2 — Adding Images, Media, Color, and Font Effects
<video width="640" height="496" controls>
Free
<source src="media/heart.ogv" type="video/ogg">
<source src="media/heart.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
35
It is recommended that you include both the .mp4 and .ogg file formats in your HTML. To
eBook
achieve this you may need to use a program to transcode your video files. Here are some
recommended programs:
handbrake — An open source program that can convert nearly any file format
36
•
37
• ffmpeg — A free software project that can convert video file formats and much more
Here is an example page with a short video clip:
Edition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chapter 2 - Video</title>
Please support this work at
</head>
<body>
<h2>Raising of the flag on Iwo Jima (1945)</h2>
<video width="320" height="240" controls>
http://syw2l.org
<source src="media/CEP413.mp4" type="video/mp4">
<source src="media/CEP413.ogv" type="video/ogg">
Your browser does not support the video element.
</video>
<p>Video by the U.S. Government Office of War Information.</p>
<p>Video from https://archive.org/details/CEP413 and in the public
domain.</p> Free
</body>
</html>
eBook
Edition
35 http://www.w3schools.com/html/html5_video.asp
36 https://handbrake.fr/
37 http://www.ffmpeg.org
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 23
Chapter 2 — Adding Images, Media, Color, and Font Effects
Free
eBook
Edition
Please support this work at
Illustration 6: Adding Video to Your Page
http://syw2l.org
Adding Inline Style to Your Page
CSS, or Cascading Style Sheets, allow you to add color, fonts, and stylistic formatting to your
Free
38
page and site. In general there are three ways to add style to a webpage: 1) inline style which is
applied within a tag; 2) internal style which is applied directly to the HTML document using the
<style>...</style> tag; and 3) external style which is imported from a separate CSS
document.
External CSS is the proper way to style a professional webpage, but since we are just starting out
it is useful to begin with the more simplified inline style. We will discuss internal and external
eBook
style in depth in Chapter 5.
In order to add inline style to an HTML document, you will need to use the style attribute. The
style attribute is written within a tag in the format:
Edition
<sometag style="property:value;">
38 http://www.w3.org/Style/CSS/Overview.en.html
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 24
Chapter 2 — Adding Images, Media, Color, and Font Effects
So, if you wanted to change the color of, say, an <h1>...</h1> tag, you would write it as
Free
<h1 style="color:purple;">...</h1>. As with any HTML code, it is important to
make sure that it is written correctly with proper casing and quotations.
The most convenient way to add style to an entire page is to specify the style attribute within
the body of the HTML document. For example, you may use the style attribute to make all of
the text red. However, what if you want some text to be blue? CSS can be overwritten by taking
eBook
advantage of the "child" and "parent" inheritance rules. The C in CSS stands for "cascading",
meaning that it follows a hierarchical scale of importance. The farther down a line of CSS code
is within a "parent" tag, the more precedence it takes. For example, observe this block of HTML:
<body style="color:red;">
Edition
<p>This text is red</p>
<p style="color:blue;">This text is blue</p>
</body>
In this example, the <body style="color:red;">...</body> is specifying that all
text on the webpage will be red. However, because the "child" tag <p
Please support this work at
style="color:blue;">...</p> is inside the parent tag </body>, its style takes
precedence, and will thus display that paragraph with blue text.
http://syw2l.org
Colors
Free
There are various ways to set colors for a webpage. We have already seen colors being set by
name, which is the most convenient way to add colors. There are 140 color names that can be set
and viewed on an HTML page, and writing them is as easy as adding the
39
style="color:colorname;" attribute to an HTML tag. While this is an easy way to add
colors, it limits you to using only the colors that are provided by the standard.
Another, more flexible way to add color to your webpage is to add a hexadecimal number rather
eBook
than a color name. A hexadecimal number is written in the #RRGGBB format which represents
three two digit base 16 numbers that describe the amount of red, green, and blue in the color .
For example, #FF0000 is the color red. There are 16,777,216 possible colors that can be written
in this format provided you know the code, making this method much more versatile than using
color names.
Edition
The third method of adding color is a bit easier to read than the hexadecimal number format. The
rgb() style function works similarly to the hexadecimal code, only the red, green, and blue are
39 https://www.w3.org/wiki/CSS/Properties/color/keywords
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 25
Chapter 2 — Adding Images, Media, Color, and Font Effects 40
written as numbers that range from 0 to 255, with 0 being none. For example, the color red
Free
would be written as rgb(255,0,0), meaning it has the maximum amount of red and no green
or blue. All 16,777,216 color combinations are possible using this method.
Here is an example of all three methods being used in an HTML document. In this example the
background is being specified with the background-color style.
eBook
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chapter 2 - Colors</title>
</head>
Edition
<body style="background-color: #ffff00;">
<h1 style="background-color: blue; color: white;">My Colorful
Page</h1>
<p style="color:rgb(255,100,50);">Opanesat tocusan dis re retapih
vanohir! Der leminoy delisot ner ibopi menid goneg fo latato. Col
tagaci oge lorope idat secobe no. Necuti bacena naraset ceg
Please support this work at
ilebarop fecocief.</p>
</body>
</html>
http://syw2l.org
Free
eBook
Illustration 7: My Colorful Page
Edition
Notice in the line <h1 style="background-color: blue; color:
40 http://www.w3schools.com/cssref/css_colors.asp
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 26
Chapter 2 — Adding Images, Media, Color, and Font Effects
white;">...</h1> that multiple styles are being specified within one tag. Multiple styles in
Free
an attribute are separated by semi-colons ";". The last style in the list may or may not have a
semi-colon but web developers often put it there.
Fonts
Adding different fonts to your webpage works in much the same way as adding color. The
eBook
font-family style is used to specify the name of the font or fonts. If multiple fonts are
defined, the first one that is available is used. You should always list more than one font, as not
all computers will have the same fonts loaded on them. If the user does not have a font that you
have specified, the browser will follow the list that you provide in your CSS until it reaches one
that it can load. In the event that it cannot find any of them, it will display the default font
provided by the browser.
Edition
Fonts typically fall into five generic categories. All browsers will have predefined fonts for these
41
five types:
serif — a typeface such as Times New Roman that has small lines attached to strokes.
•
Sometimes they are difficult yo read when small sizes are displayed.
Please support this work at
sans-serif — a typeface such as Ariel that does not have serifs. Generally considered to
•
look "clean" and modern.
• cursive — a typeface resembling script.
http://syw2l.org
• fantasy — a typeface that is generally used for headers and for text that stands out.
Smaller sizes are not recommended with these fonts.
Free
• monospace — a typeface where each letter takes up the exact same amount of space
You should always specify one of the five generic font styles at the end of your font-family.
This is to ensure that the browser will honor your font request, even if it does not have the
specific font you asked for.
If a non-generic font has spaces in its name, you will need to put it in quotes inside the style. Be
eBook
careful with quotes, if the style is inside double quotes you should use single quotes around the
font name. It may look like this:
<body style="font-family: 'DejaVu Sans', fantasy">
Edition
Font names are case-insensitive. 42
41 https://www.w3.org/TR/css-fonts-3/#generic-font-families
42 https://www.w3.org/TR/css-fonts-3/#font-family-casing
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 27
Chapter 2 — Adding Images, Media, Color, and Font Effects
Font Size
Free 43
The font-size style is used to specify the height of the font that is displayed on a webpage.
There are several ways to specify the size of the font, but each method is written in the same
font-size:_____; format.
A font-size can be specified directly by name, with the different possibilities being xx-
small, x-small, small, medium, large, x-large, and xx-large. This is a quick and
eBook
simple way to change the size of the font, but it sacrifices accuracy.
Font sizes can also be specified by "points", which are units that are 1/72 of an inch tall and have
their origin back to old printing presses. Your computer will try to guess how big to make this
44
on the screen, making it inaccurate. This method is written as font-size:4pt;. Similar to
points are pixels (written as font-size:4px;), and define the height by numbers of pixels.
Edition
Both points and pixels are absolute measurements, and will not scale to fit a browser.
An em unit represents a unit of measure relative to the font size of the parent, or the tag that it is
nested within. For example, font-size:2em; will make the text 200% of the size of the
parent text. The "%" unit of measurement is similar, but works based on the current size of the
text. For example, if the text is currently as 14pt, adding font-size:200%; will increase the
Please support this work at
font to 28pt. Both em and % can be scaled in size to the user's preference, making the font more
45
flexible and cooperative with cascading.
Here is an example of the font-family and font-size attributes at work:
http://syw2l.org
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> Free
<title>Chapter 2 - Font</title>
</head>
<body style="font-family: Arial, Helvetica, sans-serif;">
<h1>Font from Body</h1>
<h2 style="font-family: 'Book Antiqua', Palatino, serif; font-size:
400%;">Serif override</h2> eBook
<p style="color:rgb(255,100,50);">Opanesat tocusan dis re retapih
vanohir! Der leminoy delisot ner ibopi menid goneg fo latato. Col
tagaci oge lorope idat secobe no. Necuti bacena naraset ceg
ilebarop fecocief.</p>
Edition
43 https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
44 https://en.wikipedia.org/wiki/Point_(typography)
45 https://www.w3.org/TR/css-fonts-3/#font-size-prop
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 28
Chapter 2 — Adding Images, Media, Color, and Font Effects
</body>
Free
</html>
eBook
Edition
Please support this work at
Illustration 8: Changing Fonts
Be sure to note in the above example how multiple style attributes can be contained in one tag,
http://syw2l.org
and how CSS hierarchy can be used to specify fonts in child tags.
Advanced Topics for Exploration
Free
There are ways to display the exact font that you want on your page without requiring the user to
already own the font on their computer. Web Fonts can be used to download fonts you want, and
46 47
are placed in external style sheets with the @font-face rule.
Vocabulary
• Uniform Resource Locator (URL) • encoding
fantasy
• alt • eBook
• audio • font
• background-color • font-family
• color • font-size
• cursive • generic font
46 http://www.w3schools.com/css/css3_fonts.asp Edition
47 https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 29
Chapter 2 — Adding Images, Media, Color, and Font Effects
sans-serif
gif
•
•
Free • • serif
img
•
source
jpg/jpeg
•
style
phrasing element
• • • monospace • • • src
png
transcoding
eBook • video
point
•
Edition
Please support this work at
http://syw2l.org
Free
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 30
Chapter 2 — Adding Images, Media, Color, and Font Effects
Exercises
Word Search
b r g
Free a n i r e c g i f - i o o g y
l a p o i n t s c o s o e v r L a o
eBook
p t c c c r r i t o g i - d i p g a
n f r k c n r f g y l n i r n d g o
g U o a g u n r o e l o e o c t e v
l n R n n r r e n n n e r y j i l o
m e t L t s o s c g t e s r c p g i
u o t - e i c u i c s - r s e a e t
c n n o o n f o n v g o f i e c l g
Edition
g L g o c f c a d d e c u a c r l t
a r j s s o i o n i - i t r m a i j
u a p u s p o - d t n c o e c i s f
d e g u o o a d l i a g o a a e l c
i o e a t i c c y L n s r l f t i y
Please support this work at
o y e a s t m a e d g g y c o n y c
c n a i o c s g g s r l o g i r o z
r a e a s a n s - s e r i f n g a s
n i g r f o n t - s i z e j p r r v
http://syw2l.org
URL, alt, audio, background-color, color, cursive, encoding,
fantasy, font, font-family, font-size, generic, gif, img, jpeg,
jpg, monospace, png, point, sans-serif, serif, source, src,
Free
style, transcoding, video
Problems
1. Create a page about a hobby that you or a friend has. Include a level one heading, a
eBook
paragraph describing the hobby, and a paragraph with your sources. Go to a site like
http://www.openclipart.org and find an image to include on your page. Change the font
on the 'h1' to customize the page. Validate your HTML using the validation service at
http://validator.w3.org/.
2. Find a piece of music or sound effect on-line or create your own. Have a graphic on the
Edition
page, a header, and a brief description of the music/sound. Change the header font and
color. Change the page background color. Validate your HTML using the validation
service at http://validator.w3.org/. Sites like http://www.archive.org and
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 31
Chapter 2 — Adding Images, Media, Color, and Font Effects
http://www.openclipart.org are good resources.
Free
3. Find a video on-line or create your own. Have a graphic on the page, a header, and a brief
description of the video. Change the header font and color. Change the page background
color. Validate your HTML using the validation service at http://validator.w3.org/. Sites
like http://www.archive.org and http://www.openclipart.org are good resources.
eBook
Edition
Please support this work at
http://syw2l.org
Free
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 32
Chapter 3 — Semantic HTML Tags
Free
Chapter 3 — Semantic HTML Tags
In the early days of HTML, tags were used to define how the information was to be displayed on
the browser. With XHTML1 and especially with HTML5, formatting was to be handled with the
CSS and the HTML tags were to be used to add meaning to the text. The meaning of structure is
call semantic meaning.
eBook
There are two main groups of tags used in the body of a document: flow and phrasing. Flow
statements are used to section the page into meaningful chunks, where phrasing elements add
meaning to individual words or groups of words.
Learning Outcomes for this Chapter
Edition
Upon completion of the reading of this chapter and assignments found at the end, a student
should be able to:
explain the difference between flow and phrasing elements,
•
understand that HTML tags are to be used to add semantic meaning to the content of a
•
page, not format,
Please support this work at
implement nested flow elements to format an article or collection of articles,
•
use phrasing elements to mark text, within flow, to add additional meaning,
•
create properly nested, semantically meaningful, Web pages.
• • recall that flow elements should not be inside phrasing elements,
http://syw2l.org
What Are Semantics?
Semantics in an HTML document refer to the meaning of the tags in relation to the content of
your webpage. Though it may not seem important now, using proper semantics can make it
48
much easier for other people and yourself to read your HTML. Free
HTML Introduced several tags to replace the old <div>...</div> and
<span>...</span> tags in previous versions of HTML. These include: <section>...</
section>, <article>...</article>, <aside>...</aside>, and many others.
eBook
They allow you to organize your page to add a new understanding of how each part of your
HTML fits into the whole. Remember, tags are used to denote what is inside of them rather than
how they should be displayed. This is the semantic way.
Flow, Phrasing, and Metadata Elements
Edition
Though there are many HTML tags, each one will fall into one of three categories: 1) Flow
48 http://www.merriam-webster.com/dictionary/semantic
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 33
Chapter 3 — Semantic HTML Tags 49
elements; 2) Phrasing elements, and 3) Metadata elements. Flow and Phrasing elements are
Free 50
displayed in the browser and the Metadata elements tell the browser how to display elements of
your page.
Flow elements are usually displayed as blocks on the webpage. These elements take up their
own space and will stack on your page vertically with one on top of another. For example, each
<p>...</p> tag will stack one after the other much like the paragraphs in this book.
eBook
In comparison, Phrasing elements go inside the Flow elements and consist of text and other
visible content. These elements will appear right next to other elements on your HTML page.
51
For example, you may use the Phrasing element <img> to place a picture inside or right against
a <p>...</p> tag. Some Phrasing elements change how the text or other elements inside them
appear. We should not rely upon the default display behavior, but use the Phrasing elements to
describe and separate the content.
Edition
For more information on Flow/block and Phrasing/inline elements, see the HTML "Content
Model" in Appendix A.
Flow in the Body
Please support this work at
There are many types of semantic sectioning (flow) tags that can be used to properly organize
your HTML document. Using the correct tags will make it easier for you to read and understand
your documents and allow them to be read by everybody. This is especially important when your
http://syw2l.org
pages begin to become larger and more complicated. Developing good habits early will reduce
unnecessary stress in the long-term. The following list describes some of the more commonly
52
used flow tags. Keep in mind that each of these tags requires an ending tag.
Free
53
• <header>...</header> - Not to be confused with the <head>...</head>
tag. The header describes the page header or banner on the top of the page. It can also be
used as a place for introductory or navigational links for a single section of a page. For
example, if you were writing an HTML document for a store, you might use the header to
contain the store's name, logo, and the links for home, catalog, and store location.
54
• <footer>...</footer> A footer is typically found on the bottom of a webpage
eBook
and contains information about copyright, attribution, privacy policy, and other legal
information. Every webpage should contain a footer that contains contact and copyright
information.
49 https://html.spec.whatwg.org/multipage/dom.html#phrasing-content
50 https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements
Edition
51 https://developer.mozilla.org/en-US/docs/HTML/Inline_elements
52 http://www.w3schools.com/html/html5_semantic_elements.asp
53 https://html.spec.whatwg.org/multipage/sections.html#the-header-element
54 https://html.spec.whatwg.org/multipage/sections.html#the-footer-element
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 34
Chapter 3 — Semantic HTML Tags
55
<main>...</main> The main element is used as a container for the central part of
•
Free
the body of a page. Usually it comes after the header and is followed by the footer. You
should not put a main inside any other element than the <body>...</body> of your
document.
56
• <nav>...</nav> — The navigation tag should contain links that help the user
navigate the website. Not all of the links on a page are required to be in a navigation tag,
but it is helpful to organize them into this tag if there is a group of them in the same area.
Many HTML pages will include a <nav>...</nav> in the page header that contains
the main menu for the page.
57
eBook The article tag describes a section that can
<article>...</article> —
•
standalone, like an article in a magazine or a story in a newspaper. Articles are generally
Edition
placed inside of a <section>...</section>, which can hold as many articles as
needed. If there is only one article It may be places directly in the
<main>...</main>.
<section>...</section> — A section describes a group of content that usually
58
•
starts with a header. This section is the most ambiguous of the semantic tags and can be
Please support this work at
used for nearly any part of your page that needs to be sectioned off.
<aside>...</aside> - The aside tag can also be used inside of a section and
59
•
refers to content that is not directly related to the main content of the page/section. You
http://syw2l.org
can think of an aside as the smaller side story on the page of a magazine.
Free
eBook
55 https://html.spec.whatwg.org/multipage/grouping-content.html#the-main-element
Edition
56 https://html.spec.whatwg.org/multipage/sections.html#the-nav-element
57 https://html.spec.whatwg.org/multipage/sections.html#the-article-element
58 https://html.spec.whatwg.org/multipage/sections.html#the-section-element
59 https://html.spec.whatwg.org/multipage/sections.html#the-aside-element
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 35
Chapter 3 — Semantic HTML Tags
Free
eBook
Illustration 9: Semantic
Edition Blocks
Please support this work at
Here is an example of a properly written semantic HTML document with sections. Future
chapters will describe how to format the sections with CSS, but for now they will all be
displayed as blocks that fill the browser window. Notice in the example that the <p>...</p>,
http://syw2l.org
<h1>...</h1>, and <h2>...</h2> tags are also flow tags.
<!DOCTYPE html>
<html lang="en">
<head> Free
<meta charset="utf-8">
<title>Chapter 3 - Blocks</title>
</head>
<body>
<header>
<h1 style="color:white; background-color: rgb(0,0,90);">Page
with Semantic Structure</h1> eBook
</header>
<section>
<h2>Stories</h2>
Edition
<article>
<h2>A story about foo:</h2>
<p>There once was a young foo from the land of Foo. He
went in search of the mystical foo but he forgot his foo
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 36
Chapter 3 — Semantic HTML Tags
back with his family in the land of Foo.</p>
Free
</article>
<article>
<h2>A story about bar:</h2>
<p>While our foo was looking for the other foo, he stumbled
upon a single bar. The bar asked him "Why in such a rush?"
The foo did not know how to answer and so he just walked
away.</p>
eBook
<p>He was a rude foo.</p>
</article>
</section>
<footer>
<p>© 2015 The SYW2L Project
<a href="http://www.syw2l.org">http://www.syw2l.org</a></p>
</footer>
Edition
</body>
</html>
Please support this work at
http://syw2l.org
Free
eBook
Illustration 10: Page with Flow
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 37
Chapter 3 — Semantic HTML Tags
Phrasing in Flow
Free 60
In addition to dividing your pages into flow (semantic blocks), you may also want to mark parts
of your text to denote additional meaning for enhanced organization. The following list of tags
are some commonly used phrasing elements.
61
• <em>...<em> — This tag adds emphasis to text, and is to be used when you want to
stress a particular word or phrase. Without any CSS, emphasized text will display in
eBook
italics.
<p>He said "<em>Fire!</em>"</p>
Edition
62
<b>...</b> — This tag denotes a word or phrase that is of extra emphasis. You
•
may be tempted to use the extra emphasis tag just to bold text but that should be avoided
as is it not semantic.
63
<strong>...</strong> — This tag denotes a word or phrase that needs strong
•
importance. Like the extra emphasis tag this text is also typically display as bold text.
Please support this work at
64
<mark>...</mark> — This tag will mark or highlight the selected text.
•
65
• <cite>...</cite> — The citation tag is used to denote a title of a book or the
http://syw2l.org
title of a work.
66
• <dfn>...</dfn> — Similar to the citation tag, this tag will display the definition of
Free
a word when the user hovers their mouse over the word. There are two different ways to
use it depending on the surrounding text.
‣ If the surrounding text does not define the word in question, the title attribute can be
included to describe a short definition. For example, this would be written as:
eBook
<dfn title="describe exactly">define</dfn>
60 https://html.spec.whatwg.org/multipage/text-level-semantics.html#text-level-semantics
61 https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-em-element
62 https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-b-element
Edition
63 https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-strong-element
64 https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-mark-element
65 https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-cite-element
66 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 38
Chapter 3 — Semantic HTML Tags
If the surrounding text does describe the definition of the term, the definition tag can
‣
Free
be used to signal the user that the text is in fact the definition of the word. For
example:
<p>To <dfn>define</dfn> a term is to describe it exactly.</p>
eBook
67
<small>...</small> — This tag is used for legal disclaimers, copyright
•
statements, or other information, and is typically placed in the footer or at the bottom of
an article/section or in the footer of the page.
68
• <abbr>...</abbr> — The abbreviation tag will display the full title of an
Edition
abbreviation when the user hovers over it will their mouse. Like the definition tag, the
abbreviation comes with a title attribute for the non-abbreviated text.
<abbr title="Hyper Text Markup Language">HTML</abbr>
Please support this work at
69
<i>...</i> — This tag should be used to mark text as offset from the text around it
•
but not needing emphasis. Typically, this tag will make text appear in italics.
http://syw2l.org
70
• <q>...</q> — This tag is used when you want to specify that a piece of information
is being quoted from another source. The cite attribute may be included and should
have the full URL to the source of the quotation.
Free
<q cite="http://www.brainyquote.com/quotes/quotes/c/charlesdic101118.html">It
was the best of times, it was the worst of times.</q>
Here is an example of semantic inline text modifiers being used properly in an HTML document.
Be sure to note how each tag is nested within others. eBook
<!DOCTYPE html>
<html lang="en">
<head>
Edition
67 https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-small-element
68 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr
69 https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-i-element
70 https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 39
Chapter 3 — Semantic HTML Tags
<meta charset="utf-8">
Free
<title>Chapter 3 - Inline</title>
</head>
<body>
<header>
<h1 style="color:white; background-color:
rgb(0,0,90);">Paragraphs with Inline Semantics</h1>
</header>
eBook
<section>
<h2>A Note about HTML Development.</h2>
<p><abbr title="Hyper Text Markup Language">HTML</abbr> is
the markup language used to
<dfn title="describe exactly">define</dfn> the content of a
<i>Webpage</i>. For browser interoperability you <em>must</em>
closely follow the standards as defined in the
Edition
<cite>HTML5 documentation found at the
<abbr title="World Wide Web Consortium">W3C</abbr></cite>.</p>
</section>
<footer>
<p>© 2015 The SYW2L Project
<a href="http://www.syw2l.org">http://www.syw2l.org</a></p>
Please support this work at
</footer>
</body>
</html>
http://syw2l.org
Free
eBook
Illustration 11: Page with Phrasing
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
So You Want to Learn to Use HTML and CSS – Version 2020-06-12a Page 40
Chapter 3 — Semantic HTML Tags
Advanced Topics for Exploration
Free
Vocabulary
article
• • • abbr • • • i mark
eBook • • nav
metadata
aside
b
•
phrasing
cite
•
semantics
em
• • • dfn • • • section
Edition • • strong
flow
small
footer
•
u
header
•
Please support this work at
http://syw2l.org
Free
eBook
Edition
Copyright 2020 — James M. Reneau PhD — http://www.syw2l.org — This work is
licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Discover the best professional documents and content resources in AnyFlip Document Base.
Search