Chapter 4 – Basic HTML
• CS170
• Computer Applications for Business 1
2
A Hypertext Markup Language Primer
• HTML5: Benefits
• Tags - Bold, Italic, Paragraph • Including picture with image
• Tags – Singleton tags
• Additional Formatting Tags • Attributes: href, src, alt
• Required tags • Block vs inline components
• Headings
• List tags: Ordered, Unordered
• White Space
• Escape Symbol
• Tables
• W3C Markup Validation
Service
• Marking links with anchor tags
HTML—“HyperText Markup Language”— tells web browser about your
page. It defines headers, paragraphs, links, images, etc…, so your
browser knows how to structure the web page. Also helps search
engine.
Not just websites – Emails, newsletters, documents, online presence
HTML5 – across platforms/browsers, page ranking, mobile, video,
geolocation, UX. Eliminate use of flash and cookies
https://html5-editor.net/
Describing a Web Page
Hypertext Markup Language (HTML)
Advantages:
• Servers do not store web
pages
• Less information to store
and transmit. Load
browser quickly
• Common standard used by
most browsers
Formatting with Tags
• Formatting instructions are given by tags (or keywords), which the
browser obeys.
• Tags are words or abbreviations enclosed in angle brackets, < and >
• MOST tags come in pairs, beginning and ending
• The second of the pair comes with a slash:<title> Web Basics
</title>
• The tag pair surrounds the text to be formatted (or acted upon) like
parentheses
• Element – The content between the tags
HTML Page Structure
Required (and a very nice to have) Tags
HTML tags that are required for every Web page:
<!DOCTYPE html>
<html>
<head> Nice to have
Helps the
<meta Charset=″utf-8″> Browser
…. controls the “look” of your page
</head>
<body>
…. the content of your page
</body>
</html>
Head Section
• Contains defining material
• The title
• Information that applies to the whole page
• https://www.w3schools.com/html/html_charset.asp
<head>
<meta charset=”UTF-8” >
<title>Rutgers University | The …</title>
additional material discussed later
</head>
Body Section
• The body section
• <body> contains the
the main content of the
content of the page.
page goes here
• </body> • This is where you
place the items that
are going to show
on the page
Tags – Structure vs. Format
• Some tags define structure, some tags define format
Structure (sets new line above and below)
<div> and </div> divides the HTML document into Sections
<p> and </p> paragraph
<h1> thru <h6> and </h1> thru >/h6> Heading styles
Styling/Format
<b> and </b> bold <b>Hello World!</b> Hello World!
<i> and </i> Italic <i>Hello World!</i> Hello World!
<sup> and </sup> Superscript Hello<sup> World!</sup> Hello World!
<u> and </u> underline <u>Hello World!</u> Hello World!
Order matters: <b><i><u>Hello World!</u></i></b> Hello World!
Singleton Tags
• A few tags are not paired
• They do not have a matching ending tag
• For us, we will use:
<hr> produces a horizontal line
<br> continues the text on the next line
<meta> to provide information to browser, programmers and Search Engines
(Chapter 5)
Headings in HTML
• Documents can have headings and
subheadings
HTML provides several levels of heading tags:
<h1> and </h1> level one headings are bold
and get less “strong”
<h2> and </h2> level two
as the level number
… increases.
<h6> and </h6> level six
– Headings display content on a new line
White Space
• Spaces that have been inserted for readability are called white space
• White space is created with spaces, tabs, and new lines (return or enter)
• HTML ignores white space
• The browser turns a sequence of white space characters into a
single space
• The width of a line of text is determined by the width of the browser
window
– A narrower or wider browser window makes the
lines break in different places
White Space
• <p> <b>Xeno’s Paradox: </b>
• Achilles and a turtle were to run a race. Achilles could
• run twice as fast as the turtle. The turtle,
• being a slower runner,
• got a 10 meter head start, whereupon
• Achilles started and ran the 10 meter distance. At that
• moment the turtle was 5 meters farther. When Achilles had run
• that distance the turtle had gone another 2.5 meters,
• and so forth. Paradoxically, the turtle always remained
• ahead. </p>
Creating a Web Page
You will need a html editor and a browser
When Coding
• Use two windows
• Editor & Browser
Writing Valid HTML
• Check your code for syntax errors
•Benefit:
• Valid code →
more consistent browser display
• W3C HTML Validation Tool
• http://validator.w3.org
• Additional HTML5 Validation Tool
• http://html5.validator.nu
• Additional HTML5 Informational Site
• http://www.w3schools.com
Tags Required Tags
Start Tag End Tag Meaning
<!DOCTYPE
Identifies use of HTML version 5
html>
<html> </html> Tag enclosing all HTML text
Preliminary material and material common to
<head> </head>
the whole page
<body> </body> Web page content
<meta> Singleton tag Information about the html page
<title> </title> Title bar(page tab) text
<p> </p> Paragraph
<b> </b> Bold
<i> </i> Italic
<u> </u> Underline
<hr/> or <hr> Horizontal Line
<br/> or <br> Break, continue text on the next line
<h1> ... <h6> </h1> ... </h6> Headings, 6 levels
MoreTags
Start Tag End Tag Meaning
<ul> </ul> Unordered list (bullets)
<ol> </ol> Ordered list (numbers)
<li> </li> List item
<dl> </dl> Definitional list
<dt> </dt> Definitional terms
<dd> </dd> Definitional data
HTML code
• <!DOCTYPE html>
• <html>
• <head>
• <meta charset = "UTF-8" /> The way characters are
• <title> Page Title</title> represented for the Web
• <!-- This is a comment -->
• </head>
• <body>
• <h1>This is a Heading</h1>
• <p>This is a paragraph.</p>
• </body>
• </html>
example2.html (/br, /b, /i)
• <!DOCTYPE html>
• <html>
• <head>
• <meta charset = "UTF-8" />
• <title> Page Title </title>
• </head>
• <body>
• <h1>Country: USA </h1>
• <h2> State: New Jersey </h2>
• <h3> City: NewBrunswick </h3>
• <p> New Brunswick is noted for
• its ethnic diversity. At one time, …l. </p>
• <hr>
• </body>
• </html>
Attributes
Attributes provide additional information about HTML elements
• All tags have attributes
• Attributes provide additional information about an element
• Attributes usually come in a name/value pairs
<meta charset = "UTF-8"/>
element name value
• Different tags take different attributes
• Some are optional and some are required
Escape symbols (reserved characters in HTML)
Represent characters when its not clear on usage
Result Description Entity Name Entity Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
" double quotation " "
mark
' single quotation ' '
mark (apostrophe)
¢ cent ¢ ¢
© copyright © ©
® registered ® ®
trademark
ListsTags
• Lists provide standard formatting,
saving you from having to generate
additional coding
• The easiest type of list is
the unordered list
• Unordered list tags <ul> and </ul>
surround the items of the list
• The items are enclosed in list item tags,
<li> and </li>
ListsTags
• Another list is the
ordered list
• It uses the tags <ol> and
</ol>
• Items uses the tags <li> and
</li>
• Bullets are replaced with numbers
• The ordered list behaves just like the
unnumbered list
ListsTags
• You can also have a list within a list
• Make a sublist within the main list
• Can mix and match
• Notice that sublist for Philadelphia uses a different bullet symbol
ListsTags
• The definitional list
o Provides titles and
indentations
• Indicated by the <dl>
and </dl> tags
• Definitional lists are made of:
– Definitional terms surrounded
by <dt> and </dt>
– Definitional data surrounded by
<dd> and </dd>
HandlingTables
• A table is a good way to present
information.
• It’s like defining a list of lists
– The main list items, called rows, has one or
more items, called cells
• The browser aligns cells to form columns
EmbellishingTables
• You can give tables captions and
column headings:
• caption tags are <caption> and </caption>
• heading tags are <th> and </th>
• The colspan attribute allows a cell to
expand into multiple columns
• <th colspan=“2”>Column Heading</th>
Embellishing Tables
