CS Fundamentals2-Module 3

Module Overview
This course deals with the principles and practices of e-learning and web development. It develops
students’ knowledge and skills in technological and technical field of specialization. It envisages the
concept of Internet with web browser and internet services with an overview of WWW and its basic
components. It also elaborates the process, such as planning, designing, creating and framework in
building websites. It emphasizes the protocol on web building and to work with HTML, XHTML and CSS in
dealing with tags, fonts, color, list, links and images and others.
The course equips the students with competencies and opportunities for getting information on matters
related to academic and professional of web designing and application of the latest developments in the
specific field of practice to promote quality of work life.
Learning Outcomes
At the end of this module, the students would be able to:

Knowledge:
✔ Learn the basic tags and features of HTML 5
✔ Learn how to use CSS
Skills:
✔ Illustrates how to use HTML in creating a website.
✔ Create a simple webpage with CSS.
Values:
✔ Appreciate the importance of web development for the academic and professional opportunities.
Course Outline
Chapter 1: INTRODUCTION OF HTML 5

2.1 Overview
2.2 HTML Features
2.3 HTML5 New Elements
2.4 Web storage
Chapter 2: HTML 5 TAGS
2.1 Basic Structure of HTML Tags and Doctype Declaration
2.2 Character Entities
2.3 Tables
2.4 Links and List
Chapter 3: CSS
3.1 Overview of CSS
3.2 Comment on CSS
3.3 Inline, External and Internal CSS
3.4 The Box Model
Chapter 4: HTML FORMS
Page | 1
2.1 Overview of HTML Form
2.2 Form Tags
CHAPTER 1: Introduction of HTML 5

Learning Compass
By the end of this chapter the students are able to:

1. Contrast HTML4 vs HTML 5
2. Identify the new elements and tags in HTML 5
What Do You Need To

Know: Let’s Begin!
HTML 5 Overview
⮚ HTML5 is the new standard for HTML.
⮚ The previous version of HTML was – HTML 4.01, came in 1999.
⮚ HTML5 is designed to deliver almost everything you want to do online without requiring
additional plugins. It does everything from animation to apps, music to movies, and can
also be used to build complicated applications that run in your browser.
⮚ HTML5 is also cross-platform (it does not care whether you are using a tablet or a
smartphone, a notebook, notebook or a Smart TV).

o HTML isn’t itself a programming language. It’s a markup language
⮚ Programming languages like PHP or Java use things like logic and conditions to control
the content.
⮚ HTML 5 key design principle is being a backward compatible.
⮚ HTML has gone through several versions, each of which expands the capabilities of
HTML. After HTML 4.01, the W3C pushed XHTML as the next standard. Currently,
HTML5 is in use.
W3C(World Wide Web Consortium) – is the organization created the HTML and CSS and
responsible for shepherding the development of web standards.
WHATWG(Web Hypertext Application Technology Working Group)-another organization
developing most of the HTML5 specification.
Page | 2
Differences between HTML4 and HTML5
Features HTML HTML5
Multimedia Language in HTML does not have support HTML5 supports both video and
support for video and audio. audio.
Storage The HTML browser uses cache memory as HTML5 has the storage options
temporary storage. like:application cache, SQL
database, and web storage.
Browser HTML is compatible with almost all In HTML5, we have many new tags,
compatibility browsers because it has been present for elements, and some tags that have
a long time, and the browser made been removed/modified, so only
modifications to support all the features. some browsers are fully compatible
with HTML5.
Graphics support In HTML, vector graphics are possible In HTML5, vector graphics are
with tools Like Silver light, Adobe Flash, supported by default.
VML, etc.
Storage Uses cookies to store data. Uses local storage instead of cookies
Vector and Vector graphics are possible with the help Vector graphics is an integral part
Graphics of technologies like VML, Silverlight, of HTML5, SVG and canvas.
Flash,etc.
Shapes It is not possible to create shapes We can draw shapes like circles,

like circles, rectangles, triangles. rectangles, triangles.
Doc type Doctype declaration in html is too long The DOCTYPE declaration in html5 is
<! DOCTYPE HTML PUBLIC "- // W3C // very simple "<! DOCTYPE html>
DTD HTML 4.01 // EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
Character Character encoding in HTML is too long. Character encoding declaration is

Encoding <! DOCTYPE HTML PUBLIC "- // W3C // simple <meta charset = "UTF-8">
DTD HTML 4.0 Transitional // EN">
Multimedia Audio and video are not the part of Audio and video are essential parts
support HTML4. of HTML5,like: <Audio>, <Video>.
HTML 5 New Elements
Page | 3
<audio>
<video>
Page | 4
New Semantic/Structural Elements
Tag Description
<article> Defines an article
<aside> Defines content aside from the page content
Isolates a part of text that might be formatted

<bdi>
in a different direction from other text outside it
Defines a command button that a user can

<command>
invoke
Defines additional details that the user can view

<details>
or hide
<dialog> Defines a dialog box or window
Defines a visible heading for a <details>

<summary>
element
Tag Description
<progress> Represents the progress of a task
Defines a ruby annotation (for East Asian

<ruby>
typography)
Defines an explanation/pronunciation of
<rt>
characters (for East Asian typography)
Defines what to show in browsers that do not

<rp>
support ruby annotations
<section> Defines a section in a document
<time> Defines a date/time
<wbr> Defines a possible line-break
Tag Description
Specifies self-contained content, like

<figure> illustrations, diagrams, photos, code listings,
etc.
<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section
Page | 5
<header> Defines a header for a document or section
<mark> Defines marked/highlighted text
Defines a scalar measurement within a known

<meter>
range (a gauge)
<nav> Defines navigation links
Common Page Constructs

1. Header- a section of the page that has group of introductory or navigational
<header></header>
2. Navigation <nav>-
<header role=”banner”>
<nav role=”navigation”>
<ul>
<li> Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
3. Article
<article>
<h1> Home</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism
od tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
Page | 6
<h1> About</h1>
<p>
od tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis ni
sl ut aliquip ex ea commodo consequat.
</p>
<h1> Contact</h1>
<p>
</p>
</article >
4. Aside
<aside>
<h1> Why Choose our Website?</h1>
<p>
</p>
</aside>
5. Footer
<footer>
<p> This is a footer</p>
</footer>
Div - <div> was the de facto choice for surrounding chunks of content such as
pages’ header, footer,main content sidebars and etc. It is a generic container, one
without any semantic meaning at all.You can applu the desired style or JavaScript.
Page | 7
<div class="container">
<header role=”banner”>
<nav role=”navigation”>
<ul>
<li> Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<article>
<h1> Home</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<h1> About</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<h1> Contact</h1>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Ut wisi enim ad minim veniam,
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</article >
<div class="sidebar">
<aside>
<h1> Why Choose our Website?</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
</p>
</aside>
</div>
<footer>
<p> This is a footer</p>

</footer>
</div>
Page | 8
1. SGV(Scalable Vector Graphics)
The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="blue" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
Output:
2. Canvas
The HTML <canvas> element is use to draw graohics, on the
fly,via Javascript.An element as a container for graphics and
JavaScript is used to actually draw the graphics.
Removed Elements
The following HTML 4.01 elements are removed from HTML5:

• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>
HTML Web Storage

Before HTML5, application data had to be stored in cookies, included in every server
request. Web storage is more secure, and large amounts of data can be stored locally,
without affecting website performance.
HTML web storage provides two objects for storing data on the client:
Page | 9
• window.localStorage - stores data with no expiration date
• window.sessionStorage - stores data for one session (data is lost when the browser
tab is closed)
Pre-Requisite:
The following are the basic pre-requisite for starters in building websites.
1. Text Editor(Sublime, Notepad ++ ,VS Code)
2. Web Page
How Much Have You

Learned
A. Identification
1. What organization created HTML and CSS in the first place?
2. True/False. HTML (previous versions) is more compatible with almost all browser.
3. How do you declare the Doc Type in HTML 5?
4. An element that defines the content aside from the page content.
5. How do you declare the character encoding in HTML5?
B. Multiple Choice
1. What are the types of web storage for storing data on the client? Select All That Applies.
A. window.localStorage
B. window.serverStorage
C. window.sessionStorage
D. window.clientStorage
2. Path boxes, shapes and graphic images can be created through what element. All That
Applies.
A. <graphic>
B. <svg>
C. <canvas>
3. What HTML Tag that serve as a container an no semantic meaning on it?
A. <header>
B. <div>
C. <svg>
C. Output
1. Using HTML 5 create one shape (except circle) and display it to the browser.
Your answer must be the code and the screenshot of the output on your browser. 10 pts.
Ex: CODE
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="blue" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
2. The picture shows the basic HTML5 visual outline. Identify what element should be used
on each number. 5pts
Page | 10
Reference
https://www.tutorialspoint.com/e_commerce/e_commerce_business_models.htm
CHAPTER 2: HTML TAGS
Learning Compass
By the end of this chapter the students are able to:

1. Identify the basic HTML tags.
2. Build a simple output using tags .
What Do You Need To

HTML TAGS: Basic Structure of HTML document
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Page | 11
HTML HEADINGS
<!DOCTYPE html>
<html>
<head>
<title>Alice in Wonderland</title>
</head>
<body>
<h1>Alice is sitting on a bench with her sister </h1>
<h2>Suddenly , a white rabbit passes by,</h2>
<h3>Checking his watch and lamenting that he's going to be late</h3>
<h4>Alice follows the rabbit down the hole</h4>
<h5>Where she finds a bottle with note saying "drink me" </h5>
<h6>She drinks it and finds herself shrinking</h6>

</body>
</html>
Note! The attribute “align” is no longer supported and is replaced by “text-align” property in
CSS
Output:
Paragraph Tag: <p>

Paragraph is a block of text.
Page | 12
Output:
Quick Exercise:
Which is the output of the following code? The first one or the second one?
<!DOCTYPE html>
<html>
<head
<title>Lorem Ipsum</title>
</head>
<body>
WELCOME TO E-LEARNING AND WEB DEVELOPMENT SUBJECT


Page | 13
</body>
</html>
HTML: COMMENTS <!- - Comment -->
The comment tag is used to insert a comment in the HTML source code. It can be placed
anywhere in the document and the browser will ignore everything inside the brackets.
<!DOCTYPE html>

<html>
<head> 
<meta charset="UTF-8"> 
<title>Document</title>
</head>
<body> 

</body>
</html>
HTML: Character Entities

<body>
<h2> Yesterday is history, tomorrow is a mystery, but today is a gift. That is why it is called the
"present”. </h2>
<h2>Yesterday is history, tomorrow is a mystery, but today is a gif
t. That is why it is called the "present”. </h2>
<h2>Yesterday is history,<br>
tomorrow is a mystery, but today is a gift.<br>
That is why it is called the "present”. </h2>
</body>
</html>
Output:
Page | 14
Other character entities
HTML Background with Colors
<h1 style="background-color:Tomato; text-align: center;">What's My Color</h1>
<h1 style="background-color:Orange;">HTML BACKGROUND COLORS</h1>
<h1 style="background-color:DodgerBlue;">HTML BACKGROUND COLORS</h1>
<h1 style="background-color:MediumSeaGreen;">HTML BACKGROUND COLORS</h1>
<h1 style="background-color:Gray;">HTML BACKGROUND COLORS</h1>
<h1 style="background-color:SlateBlue;">HTML BACKGROUND COLORS</h1>
<h1 style="background-color:Violet;">HTML BACKGROUND COLORS</h1>
<h1 style="background-color:LightGray;">HTML BACKGROUND COLORS</h1>
<h1 style="background-color:yellow;">HTML BACKGROUND COLORS</h1>
Note! The attribute “bgcolor” is deprecated and is replaced by “style”property in CSS.
Output:
Page | 15
HTML Text with Colors
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonum
my nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorpe
r suscipit lobortis nisl ut aliquip ex ea commodo consequat.</
Output
HTML Border with Colors
Output
Page | 16
Horizontal Rule: <hr>
The horizontal rule tag will create a horizontal line on your web page that goes all the way across
<h1> DO NOT </h1>
<hr>
<h1> CROSS THE LINE </h1>
Tables <table>
• <tr> table rows
• <td> table data
• <th> table header
COLSPAN <colspan> ROWSPAN <rowspan>

• Colspan- you can make a table cell span multiple columns
• Rowspan- you can make a table cell span multiple rows
Page | 17
Code:
Page | 18
Lists <li>
• HTML can create bulleted or numbered lists pretty easily.

• Bulleted lists are called unordered<ul> lists, as opposed to the ordered <ol>lists that
use numbers.
Page | 19
LINKS <a href>
Local Links
• <a href="index.html">Home</a>
• <a href=“test.html">About</a>
External Links
• <a href="https://www.google.com">Google</a>
Email Links
• <a href = "mailto: wilcandilada@gmail.com">Send Email</a>
• <a href = "#">Visit thesame page </a>
h1> This is my first page</h1>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="https://www.google.com">Google</a>
<a href = "mailto: wilcandilada@gmail.com">Send Email</a>
<a href = "#">Visit thesame page </a>
Class Attribute
The class attribute specifies one or more class names for an element and is mostly used to point to
a class in a style sheet.
How Much Have You

Learned Page | 20
Reference
https://www.tutorialspoint.com/e_commerce/e_commerce_business_models.htm
Castro, E. & Hyslop, B .(2014). HTML and CSS. Peachpit Press.
CHAPTER 3: CSS
Page | 21
Learning Compass
By the end of this chapter you should be able to:

1. Identify what is CSS
2. Build a simple webpage with CSS
What Do You Need To

What is CSS?
• A simple designed language intended to simplify the process of making web pages
presentable.
• Handles the look and feel part of the web page.
• CSS 2 is the version of CSS that is best supported across browsers both new and old.
• CSS 3 is still evolving as specification, encapsulates and builds upon CSS2.
CSS: Style Rule
Page | 22
Comments on CSS
Three Ways to Insert CSS

1. Inline CSS
Is used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
2. External CSS
Change the look of an entire website by changing just one file (CSS File) and connects it to
the HTML File
<head>
<link rel="stylesheet" href=“mystyle.css">
</head>
Page | 23
3. Internal CSS
It is used if one single HTML page has a unique style.
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
Constructing Selectors
The selector determines which elements a style rule is applied to. A selector can define up to five
different criteria for choosing the elements that should be formatted. However I am going to present
the most commonly used format of a selector.
1. The type or name of element.
h1{
color: red;
}
-all content within the h1 tag are colored in red.
Page | 24
2. The context in which the element is found
h1 emp{
color: red;
}
-the style is applied only to the em elements within h1 elements.
3. The class or ID of an element.
Class:
.error{
color: red;
}
ID:
#error{
color: red;
}
-name of desired element and the class
strong.error{
color: red;
}
Selecting Link Based on their State

CSS let’s you apply formatting links based on their current state.
Format: a:state
1. Link
2. Visited
3. Focus
4. Hover
5. Active
Ex: a: link {
color:red;
}
a:hover{
color: blue;
}
*so on and so forth
■ How Much Have You

Learned
■
Create your own "Student Registration" form using the different form elements and submit the
following:
1.Write the source code. Do NOT take the screenshot of the code

2.Put the whole code in MS Word or any documents. Since, I am going to run it on my end.
3 Take a screenshot of the output.
4. Make sure to use all the elements that was discussed.
Page | 25
CHAPTER 4: HTML FORM
Learning Compass
By the end of this chapter you should be able to:

1. Identify what tags are used to create Forms
2. Build a simple Form page with CSS and HTML
What Do You Need To

What are forms?
■ <form> is just another kind of XHTML/HTML tag
■ Forms are used to create (rather primitive) GUIs on Web pages
■ Usually the purpose is to ask the user for information
■ The information is then sent back to the server
■ A form is an area that can contain form elements
■ The syntax is: <form parameters> ...form elements... </form>
■ Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down
menus, etc
■ Other kinds of tags can be mixed in with the form elements
■ A form usually contains a Submit button to send the information in he form elements
to the server
■ The form’s parameters tell JavaScript how to send the information to the server
(there are two different ways it could be sent)
■ Forms can be used for other things, such as a GUI for simple programs
Page | 26
The <form> tag
■ The <form arguments> ... </form> tag encloses form elements (and probably other
elements as well)
■ The arguments to form tell what to do with the user input
■ action="url" (required)
■ Specifies where to send the data when the Submit button is clicked
■ method="get" (default)
■ Form data is sent as a URL with ?form_data info appended to the end
■ Can be used only if data is all ASCII and not more than 100 characters
■ method="post"
■ Form data is sent in the body of the URL request
■ Cannot be bookmarked by most browsers
■ target="target"
■ Tells where to open the page sent as a result of the request
■ target= _blank means open in a new window
■ target= _top means use the same window
The <input> tag
■ Most, but not all, form elements use the input tag, with a type="..." argument to tell which
kind of element it is
■ type can be text, checkbox, radio, password, hidden, submit, reset, button, file, or
image
■ Other common input tag arguments include:
■ name: the name of the element
■ id: a unique identifier for the element
■ value: the “value” of the element; used in different ways for different values of type
■ readonly: the value cannot be changed
■ disabled: the user can’t do anything with this element
■ Other arguments are defined for the input tag but have meaning only for certain
values of type
Page | 27
Text input
A text field:
<input type="text" name="textfield" value="with an initial value" />
A multi-line text field

<textarea name="textarea" cols="24" rows="2">Hello</textarea>
A password field:
<input type="password" name="textfield3" value="secret" />
• Note that two of these use the input tag, but one uses textarea
Buttons
■ A submit button: send data
<input type="submit" name="Submit" value="Submit" />
■ A reset button: restore all form elements to their initial state
<input type="reset" name="Submit2" value="Reset" />
■ A plain button: take some action as specified by JavaScript

<input type="button" name="Submit3" value="Push Me" />
Page | 28
■ Radio buttons:
<br>
<input type="radio" name="radiobutton" value="myValue1" />
male<br>
<input type="radio" name="radiobutton" value="myValue2”
checked="checked" />female
■ If two or more radio buttons have the same name, the user can only select one of them at a
time
■ This is how you make a radio button “group”
■ If you ask for the value of that name, you will get the value specified for the selected radio
button
■ As with checkboxes, radio buttons do not contain any text
Labels
■ In many cases, the labels for controls are not part of the control
■ <input type="radio" name="gender" value="m" />male
■ In this case, clicking on the word “male” has no effect
■ A label tag will bind the text to the control
■ <label><input type="radio" name="gender" value="m" />male</label>
■ Clicking on the word “male” now clicks the radio button
■ w3schools says that you should use the for attribute:
■ <label for="lname">Last Name:</label>

<input type="text" name="lastname" id="lname" />
■ In my testing (Firefox and Opera), this isn’t necessary, but it may be for some
browsers
Page | 29
■ Labels also help page readers read the page correctly
■ Some browsers may render labels differently
Checkbox
■ A checkbox:
<input type="checkbox" name="checkbox"
value="checkbox" checked="checked">
■ type: "checkbox"
■ name: used to reference this form element from JavaScript
■ value: value to be returned when element is checked
■ Note that there is no text associated with the checkbox
■ Unless you use a label tag, only clicking on the box itself has any effect
Drop-down menu or list

■ A menu or list:
<select name="select">
<option value="red">red</option>
<option value="green">green</option>
<option value="BLUE">blue</option>
</select>
■ Additional arguments:
■ size: the number of items visible in the list (default is "1")
■ multiple
■ if set to "true" (or just about anything else), any number of items may be
selected
■ if omitted, only one item may be selected
Page | 30
■ if set to "false", behavior depends on the particular browser
■ How Much Have You

Learned
■
Create your own "Student Registration" form using the different form elements and submit the
following:
1.Write the source code. Do NOT take the screenshot of the code

2.Put the whole code in MS Word or any documents. Since, I am going to run it on my end.
3 Take a screenshot of the output.
4. Make sure to use all the elements that was discussed.
Reference
Page | 31

CS Fundamentals2-Module 3

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CS Fundamentals2-Module 3

Uploaded by

Copyright:

Available Formats

Module Overview

At the end of this module, the students would be able to:

✔ Learn the basic tags and features of HTML 5

✔ Learn how to use CSS

✔ Illustrates how to use HTML in creating a website.

✔ Create a simple webpage with CSS.

Chapter 1: INTRODUCTION OF HTML 5

Chapter 4: HTML FORMS

CHAPTER 1: Introduction of HTML 5

By the end of this chapter the students are able to:

What Do You Need To

⮚ The previous version of HTML was – HTML 4.01, came in 1999.

smartphone, a notebook, notebook or a Smart TV).

⮚ HTML 5 key design principle is being a backward compatible.

Features HTML HTML5

Shapes It is not possible to create shapes We can draw shapes like circles,

Character Character encoding in HTML is too long. Character encoding declaration is

HTML 5 New Elements

<article> Defines an article

<aside> Defines content aside from the page content

Isolates a part of text that might be formatted

Defines a command button that a user can

Defines additional details that the user can view

<dialog> Defines a dialog box or window

Defines a visible heading for a <details>

<progress> Represents the progress of a task

Defines a ruby annotation (for East Asian

Defines what to show in browsers that do not

<section> Defines a section in a document

<time> Defines a date/time

<wbr> Defines a possible line-break

Specifies self-contained content, like

<figcaption> Defines a caption for a <figure> element

<footer> Defines a footer for a document or section

<mark> Defines marked/highlighted text

Defines a scalar measurement within a known

<nav> Defines navigation links

Common Page Constructs

<p> This is a footer</p>

The following HTML 4.01 elements are removed from HTML5:

HTML Web Storage

How Much Have You

CHAPTER 2: HTML TAGS

By the end of this chapter the students are able to:

What Do You Need To

HTML TAGS: Basic Structure of HTML document

Paragraph Tag: <p>

HTML: COMMENTS <!- - Comment -->

HTML: Character Entities

HTML Background with Colors

Note! The attribute “bgcolor” is deprecated and is replaced by “style”property in CSS.

HTML Border with Colors

COLSPAN <colspan> ROWSPAN <rowspan>

• HTML can create bulleted or numbered lists pretty easily.

How Much Have You

By the end of this chapter you should be able to:

What Do You Need To

CSS: Style Rule

Three Ways to Insert CSS

Selecting Link Based on their State

■ How Much Have You

1.Write the source code. Do NOT take the screenshot of the code

By the end of this chapter you should be able to: