CHAPTER 1

Chapter 1- HYPERTEXT MARKUP
LANGUAGE (HTML5)
1. Understand terminologies of web
servers
2. Create web page using HTML5
3. Use hyperlinks to navigate web
page
4. Create table, form and use
frameset in a web page

Terminologies of Web Server
Web Page Browser Hyperlink
URL
Domain
Name
IP
Address
HTTP

What is HTML?
• HTML is a language for describing web pages.
• HTML stands for Hyper Text Markup Language
• HTML is a markup language
• A markup language is a set of markup tags
• The tags describe document content
• HTML documents contain HTML tags and
plain text
• HTML documents are also called web pages

Create Web Page Using HTML5
• Type this:
<!DOCTYPE html>
<html>
<body>
<h1>This is Heading</h1>
<p>This is Paragraph.</p>
</body>
</html>
Define document type

Use Hyperlink
• So far we have learned about the HTML5
structure and elements.
• To create a hyperlink, we will be using one of
the HTML5 elements which is element a, short
for anchor.
• The a element is using ”href” (short
for hypertext reference) attribute that will link
the element a to website address, file name or
any part of a file that you specify.

Navigate between pages
• The href attribute specifies the destination of
a link.
<a href="http://www.w3schools.com/">Visit W3Schools</a>

Navigate within a page
• An anchor with an id inside an HTML document:
<a id="tips">Useful Tips Section</a>
• Create a link to the "Useful Tips Section" inside the same
document:
<a href="#tips">Visit the Useful Tips Section</a>
• Or, create a link to the "Useful Tips Section" from another page:
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>

HTML5 Terminologies
• Tags
– Keyword surrounded by angle brackets
– E.g: <html>
• Elements
– Everything between start tag and end tag,
including tags.
– E.g: <p>This is a paragraph.</p>
• Attributes ?????

Create table
• 3 important tags:
<table>
- Parent tag to define a html table
<tr>
- Stands for “table row”
- Defined inside table tag
<td>
- Stands for “table data”
- Defined inside tr tag
- Hold contents of each table cell such as text, image,
link or other table

Table example 1(without border)
• Type this:
<table>
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>

Table example 2(with border)
• Type this:
<table border="1">
<tr>
</tr>
<tr>
</tr>
</table>

Table example 3(with header)
• Type this:
<table border="1">
<tr>
<th>Name</th>
<th>Address</th>
<th>Telephone</th>
</tr>
<tr>
<td>Dmytri</td>
<td>Palo Alto</td>
<td>555 77 855</td>
</tr>
</table>

Table example 4(vertical header)
• Type this:
<table border="1">
<tr>
<th>Name:</th>
<td>Dmytri</td>
</tr>
<tr>
<th>Address:</th>
<td>Palo Alto</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>

Table example 5(table caption)
• Type this:
<table border="1">
<caption>Students Information</caption>
<tr>
<th>Name</th>
<th>Matrix Number</th>
</tr>
<tr>
<td>Dmytri</td>
<td>03DIP10F1010</td>
</tr>
<tr>
<td>Eisenberg</td>
<td>03DIP10F1011</td>
</tr>
</table>

Table example 6(cellpadding)
Without cellpadding
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
With cellpadding
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

Table example 7(cellspacing)
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
Without cellspacing With cellspacing
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

Table example 8(table span)
spans two columns spans two rows
<table border="1">
<tr>
<th>Name</th>
<th
colspan="2">Telephone</th>
</tr>
<tr>
<td>Dmytri</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th
rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

Align text in cells (align Attribute)
<table border="1" align="right">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
• deprecated in HTML
4.01
• not supported in
HTML5
• use CSS to align text

Align text in cells (using CSS)
• Align every cell in the table
• Align every header cell in the table
td,th {
text-align: center;
}
th {
text-align: center;
}

Align text in cells (using CSS)
• Align specific cells in the table
– Add class attribute to td tag:
<td class="centered-cell">
– Add the following to the style sheet
td,th {
text-align: center;
}

Frame and Frameset
• Frame
– One section of a
window within a
frameset
• Frameset
– Parent window
which divide a web
page into several frames

Create Form
• HTML forms are used to pass data to a server.
• An HTML form can contain input elements like
– text fields
– checkboxes
– radio-buttons
– submit buttons
– select lists
– textarea
– fieldset
– legend
– label

The <form> tag
• is used to create an HTML form:
<form>
.
input elements
.
</form>

The Input Element
• The most important form element is the
<input> element.
• The <input> element is used to select user
information.
• An <input> element can vary in many ways,
depending on the type attribute.
• An <input> element can be of type text field,
checkbox, password, radio button, submit
button, and more.

Text Fields
• <input type="text"> defines a one-line input
field that a user can enter text into:
<form>
First name: <input type="text"
name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

CHAPTER 1

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (11)

Similar to CHAPTER 1

Similar to CHAPTER 1 (20)

Recently uploaded

Recently uploaded (20)

CHAPTER 1