3/23/21

BIM222 Internet Programming

Week 4 – HTML Basics and HTML5

Outline
§ Components and Structure of a Website
§ What Comprises a Website
§ Structure of a Website
§ What kinds of files
§ HTML
§ What is HTML
§ History and Philosophy of HTML
§ Internet Browsers
§ Editors
§ HTML Tag Syntax
§ DOM & Basic HTML Structure
§ Common HTML Tags

1
 3/23/21

What Comprises a Website?

Components of a Website

HTML files & images

Viewed through a Web Browser

Safari Chrome Internet Explorer Firefox

common on Apple from the
from Google from Microsoft
Mozilla Foundation

Structure of a Website

2
 3/23/21

What Kinds of Files

Files Viewed through a Web Browser

Structure Style Behavior

Example 1: Structure, Style, Behavior

§ HTML
week4-sampleCodes/Structure_Style_Behavior_Difference/example1/structure.html

§ HTML + CSS
week4-sampleCodes/Structure_Style_Behavior_Difference/example1/style.html

§ HTML + CSS + JS
week4-sampleCodes/Structure_Style_Behavior_Difference/example1/behavior.html

3
 3/23/21

Example 2: Structure, Style, Behavior

§ HTML
week4-sampleCodes/Structure_Style_Behavior_Difference/example2/structure.html

§ HTML + CSS
week4-sampleCodes/Structure_Style_Behavior_Difference/example2/style.html

§ HTML + CSS + JS
week4-sampleCodes/Structure_Style_Behavior_Difference/example2/behavior.html

Outline
§ Components and Structure of a Website
§ What Comprises a Website
§ Structure of a Website
§ What kinds of files
§ HTML
§ What is HTML
§ History and Philosophy of HTML
§ Internet Browsers
§ Editors
§ HTML Tag Syntax
§ DOM & Basic HTML Structure
§ Common HTML Tags

4
 3/23/21

What is HTML?

What does HTML Stand For?

Hypertext Markup Language

5
 3/23/21

Hypertext Markup Language

Hypertext Markup Language

6
 3/23/21

Hypertext Markup Language

Outline
§ Components and Structure of a Website
§ What Comprises a Website
§ Structure of a Website
§ What kinds of files
§ HTML
§ What is HTML
§ History and Philosophy of HTML
§ Internet Browsers
§ Editors
§ HTML Tag Syntax
§ DOM & Basic HTML Structure
§ Common HTML Tags

7
 3/23/21

The Evolution of HTML

§ Markup languages are not the same as programming languages, they
use tags to annotate documents

§ In HTML the tags indicate where headings, images, lists, links, line
breaks, and other components should go

.html Files
§ When your computer opens a .html file, it knows to open it in an
Internet browser (Chrome, Firefox, Safari, etc.)

§ The browser can read this file and know how to display it on the
screen

§ Screen readers and other assistive devices can also utilize the HTML
tags to present the information in special ways

8
 3/23/21

HTML Files

HTML is similar to English, so

you can understand it even
if you don’t know much
about it.
week4-sampleCodes/sample.html

HTML History
§ HTML was present in the document sharing system that Berners-Lee
developed at CERN in the early 1990’s
§ The HTML Working Group, created by the IETF, released HTML 2.0 as
a standard in 1995
§ Additional versions of this standard have since been created under
the W3C (www.w3.org)
§ HTML5, released in 2011, incorporates new features such as video
playback and drag-drop capabilities

9
 3/23/21

Declarative Programming
§ Markup languages are examples of declarative programming
languages:
§ Programming flow control is not specified
§ Programs specify what not how

§ In the case of markup languages such as HTML, this means that you
specify what should appear on a webpage, but not how it should look
(i.e., how it’s styled) or behave (e.g., when it’s visible, animations)

§ If created properly, HTML documents should follow the separation of

content and presentation principle

Semantic HTML
§ There is a design principle related to publishing entitled separation of
content and presentation – the meaning (i.e., semantics) of a
document should be separated from how this meaning is presented
to readers
§ Advantages associated with using this design principle:
§ The same content can be rendered differently, depending upon the needs of
the user (e.g., as text, as braille, etc.)
§ You can change in one place how a recurrent item in the document is style
§ By capturing the meaning of a document, further intelligent machine
processing of the document is supported

10
 3/23/21

Outline
§ Components and Structure of a Website
§ What Comprises a Website
§ Structure of a Website
§ What kinds of files
§ HTML
§ What is HTML
§ History and Philosophy of HTML
§ Internet Browsers
§ Editors
§ HTML Tag Syntax
§ DOM & Basic HTML Structure
§ Common HTML Tags

Internet Browsers
§ The purpose of browsers is to read HTML documents and display
them
§ Browsers do not display the HTML tags, but use them to render the
content of the page (or determine how to display the document)
§ Different browsers have their pros and cons
§ Most people have a preferred browser
§ You need to test your site on multiple browsers
§ Browsers can vary in how well they adhere to HTML5 standards
§ Different versions of browsers need to be considered as well

11
 3/23/21

Internet Explorer
§ One of the most popular browsers
§ Preinstalled on Microsoft Windows and free to download
§ Not available on the Mac

Safari
§ Works on Mac and Windows operating systems
§ Free to download
§ Default browser on iPhones and iPads

Google Chrome
§ Freeware browser developed by Google
§ Fast browsing
§ Greater security

Firefox
§ Free browser developed by Mozilla
§ Works on Windows and Mac
§ Secure and fast
§ Resource heavy

12
 3/23/21

Outline
§ Components and Structure of a Website
§ What Comprises a Website
§ Structure of a Website
§ What kinds of files
§ HTML
§ What is HTML
§ History and Philosophy of HTML
§ Internet Browsers
§ Editors
§ HTML Tag Syntax
§ DOM & Basic HTML Structure
§ Common HTML Tags

Editors: How to use an Editor to create an HTML file

1. Decide how you will organize your files

2. Decide on a naming convention

§ No spaces
§ No Turkish characters

3. Decide on an editor
§ Windows (Notepad, Notepad++, Sublime*)
§ Mac (TextEdit, TextWrangler, Sublime*)

13
 3/23/21

HTML Editors - Getting Started

1. Open your editor

2. Write some HTML (add Doctype, head, and body tags)

3. Name and Save the HTML File (Ctrl-S or Command-S)

4. Open/View the HTML Page in Browser

Outline
§ Components and Structure of a Website
§ What Comprises a Website
§ Structure of a Website
§ What kinds of files
§ HTML
§ What is HTML
§ History and Philosophy of HTML
§ Internet Browsers
§ Editors
§ HTML Tag Syntax
§ DOM & Basic HTML Structure
§ Common HTML Tags

14
 3/23/21

HTML Tag Syntax

HTML Tag Syntax

15
 3/23/21

HTML Tag Syntax

Most HTML tags have a closing tag that matches

its opening tag but not all!

HTML Tag Syntax - Attribute

16
 3/23/21

HTML Tag Syntax – Spacing Rules

HTML Tag Syntax – Quotes in Attribute Value

17
 3/23/21

Outline
§ Components and Structure of a Website
§ What Comprises a Website
§ Structure of a Website
§ What kinds of files
§ HTML
§ What is HTML
§ History and Philosophy of HTML
§ Internet Browsers
§ Editors
§ HTML Tag Syntax
§ DOM & Basic HTML Structure
§ Common HTML Tags

Document Object Model (DOM)

§ Basis of HTML5 is “New features should be based on HTML, CSS, the
DOM, and JavaScript…”

§ DOM provides common tree-like structure that all pages should

follow

§ Computer Scientists love trees (the mathematical kind) because we

can test them

18
 3/23/21

HTML is built on the DOM

Document

Root element
<html>

Element Element
<head> z <body>

Element Attribute Element Element

<title> “href” <a> <h1>

Text Text Text

“my title” “my link” “my header”

Adapted from w3Schools.com

Three parts of a well-formed document

§ Doctype
§ Version of HTML that you will be using

§ Head
§ Metadata The HTML document itself
begins with <html> and ends
§ Body with </html>
§ Displayable content

19
 3/23/21

Doctype
§ All HTML documents must start with a document type declaration
§ Represents the document type, and helps browsers to display web pages
correctly
§ It must only appear once, at the top of the page (before any HTML tags)
§ Not case sensitive
§ HTML5
§ <!DOCTYPE html>

§ Previous versions dictated backwards compatibility

§ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

§ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

Head
§ Additional information used by the browser
§ Meta data (data about data) – language, title, character set
§ Supporting files – JavaScript, CSS - Styling, Add-ons

§ Other than title, meta-data is not displayed

20
 3/23/21

Body
§ Bulk of your page

§ Important to write well-formatted (tree-like) code

§ The visible part of the HTML document

§ Note: Most of the content is displayed by the browser, but there
may be some meta-data too (ex: script)

week4-sampleCodes/template.html
Example

21
 3/23/21

Validate the Code

https://validator.w3.org/

Well-formed pages use the

DOM structure
• Use beginning and end tags
• Close inner tags before
outer ones
• Use valid attributes

Common Tags
§ HTML Headings
§ <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
§ <h1> defines the most important heading
§ <h6> defines the least important heading
§ These tags have syntax and semantics
§ Search engines use the headings to index
the structure and content of your web
pages
§ Users skim your pages by its headings
§ It is important to use headings to show
the document structure, not for to make
text big or bold

week4-sampleCodes/links-to-samples/heading.html

22
 3/23/21

Common Tags
§ Paragraphs
§ <p>…</p>
§ Line Breaks
§ <br> element defines a line break
§ The <br> tag is an empty tag - has no end tag
§ Horizontal Ruler
§ <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule
§ Used to separate content or define a change in an HTML page
§ Comments
§ <!-- … -> week4-sampleCodes/links-to-samples/paragraph.html

Browsers display <strong> as <b>,

Common Tags and <em> as <i>. However, there
is a difference in the meaning of
these tags: <b> and <i> defines
§ Formatting Elements bold and italic text, respectively,
Designed to display special types of text: but <strong> and <em> means
that the text is "important”, hence
§ <b>…</b> - Bold text
they add “semantic importance”
§ <strong>…</strong> - Important text to the text
§ <i>…</i> - Italic text
§ <em>…</em> - Emphasized text
§ <mark>…</mark> - Marked text
§ <small>…</small> - Small text
§ <del>…</del> - Deleted text
§ <ins>…</ins> - Inserted text
§ _… - Subscript text
§ ^… - Superscript text
week4-sampleCodes/links-to-samples/formatting.html

23
 3/23/21

Common Tags
§ Links
§ HTML links are hyperlinks
§ You can click on a link and jump to another document
§ When you move the mouse over a link, the mouse arrow will turn
into a little hand
§ In HTML, links are defined with the <a> tag

§ The href attribute specifies the destination address of the link

§ The link text is the visible part
§ External Links week4-sampleCodes/links-to-samples/links.html
§ Local Links week4-sampleCodes/links-to-samples/links-same-page.html

Common Tags
§ Lists week4-sampleCodes/links-to-samples/links.html
§ Unordered List week4-sampleCodes/links-to-samples/unordered-lists.html
§ Ordered List week4-sampleCodes/links-to-samples/ordered-lists.html
§ HTML Description List week4-sampleCodes/links-to-samples/description-lists.html

https://www.w3schools.com/html/html_entities.asp
§ Special Entries
§ Images week4-sampleCodes/links-to-samples/images.html

week4-sampleCodes/links-to-samples/table.html
§ Tables week4-sampleCodes/links-to-samples/table-with-image.html

24
 3/23/21

HTML Content Models https://www.w3schools.com/html/html_blocks.asp

Block-Level Elements Inline Elements

§ Render to begin on a new line § Render on the same line (by
(by default) default)
§ May contain inline or other § May only contain other inline
block-level elements elements
§ Roughly Flow Content § Roughly Phrasing Content
(HTML5 category) (HTML5 category)
ü HTML5 replaces these definitions with more complex set of content categories -
Officially not part of HTML5, but still used
ü However, this distinction remains practical because it aligns well with existing CSS rules
§ Divs & Spans
§ <div>…</div> à Generic section that is greater than a paragraph
§ <span>…</span> week4-sampleCodes/links-to-samples/div-and-span.html

Additional Resources
§ Getting to Know HTML
§ http://learn.shayhowe.com/html-css/getting-to-know-html/

§ W3Schools
§ https://www.w3schools.com/html/default.asp

§ Week4 – Sample Examples

§ “week4-sampleCodes.zip” in Mergen course website

25
 3/23/21

Summary
§ HTML
§ Annotates content
§ Defines document structure

§ Right and wrong syntax

§ 3 Core Web Technologies

§ HTML, CSS, JavaScript

26