Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv

Web-Based Design
(IT210)
chapter 2 / part 1
Introduction to
HTML5
1

LEARNING
OUTCOME
 Understand important components
of HTML5 documents.
 Use HTML5 to create web pages.
 Add images to web pages.
 Create and use hyperlinks to help
users navigate web pages.
 Mark up lists of information.
 Create tables with rows and
columns of data.
2

Introduction
• HTML5: (HyperText Markup
Language 5)
• markup language that specifies
the structure and content of
documents that are displayed in
web browsers.
• HTML5 markup contains text (and
images, graphics, animations,
audios and videos) that
represents the content of a
document and elements that
specify a document’s structure
and meaning.
3
For more information about HTML: www.w3schools.com

First HTML
Example
This first example displays the message
Welcome to HTML! in the browser.
4

The
<!DOCTYPE>
Declaration
HTML documents must
start with: Document Type
Definition (DTD)
- It tells web browsers
what type is the
served code
- Not sensitive to the
letter case
Possible versions: HTML 4.01, XHTML 1.0 (Transitional or
Strict), XHTML 1.1, HTML 5 5

Blank lines
We include blank lines
(lines 2 and 10) to make
our documents easier to
read
• Browser ignores the
blank lines
6

Comments:
 Tag
• Comments are
enclosed in 
• Comments can exist
anywhere after
<!doctype html>.
• It used to improve
readability and describe
the content of a
document
• The browser ignores
comments.
7

<html> </html>
Tag
• The <html> tag tells the
browser that this is an
HTML document.
• The <html> tag
represents the root of an
HTML document.
• The <html> tag is the
container for all other
HTML elements (except
for the <!DOCTYPE>
tag).
8

The <head>
Section
- Contains information
that doesn’t show
directly on the viewable
page
- Starts after the <html>
declaration
- Begins with <head>
and ends with </head>
- Contains fixed <title> </title> tag (Why?)
- Can contain some other tags, e.g.:
• <meta>
• <script>
• <link>
• <base>
9

<head>
Section:
1- <title> tag
-defines a title in the
browser toolbar
-provides a title for
the page when it is
added to favourites or
Bookmarks
-displays a title for
the page in search
engine
Note: try to make the title as accurate and meaningful
as possible!
10

<head>
Section:
2- <Meta> tag
- Metadata is data
about data.
- The <meta> tag
provides
(information about
the HTML
document.
11

<head> Section:
2- <Meta> tag
 <meta> tag is used to specify
 character encoding: the most popular character encoding scheme for the web is (UTF-8)
—which helps the browser determine how to render the content
 short description, keywords, author of the document, last modified ..etc..
 control the viewport: The viewport is the user's visible area of a web page. It varies
between the devices
 Two necessary attributes – name & content
<meta charset="UTF-8">
<meta name="description" content="HTML tutorial"/>
<meta name="keywords" content="html, web design, styles"/>
<meta name="author" content=“Nada"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
12

<head> Section:
2- <Meta> tag
• A <meta> viewport element gives the
browser instructions on how to control
the page's dimensions and scaling.
• The width=device-width part sets
the width of the page to follow the
screen-width of the device (which will
vary depending on the device).
• The initial-scale=1.0 part sets the
initial zoom level when the page is
first loaded by the browser.
-Here is an example of a web page
with and without the viewport meta tag:
13

<head> Section:
3- < script > tag
 The <script> element is used to embed scripts into an
HTML document
 Scripts are executed in the client's Web browser
 Scripts can live in the <head> and in the <body>
sections
 Supported client-side scripting languages:
• JavaScript
• VBScript 14

<head> Section:
3- < script > tag
15
<!DOCTYPE HTML>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function sayHello() {
document.write("<p>Hello World!</p>");
}
</script>
</head>
<body>
<script type=
"text/javascript">
sayHello();
</script>
</body>
</html>

<head> Section:
4- < style > tag
16
<html>
<head>
<style type="text/css">
p { font-size: 12pt; line-height: 12pt; }
p:first-letter { font-size: 200%; }
span { text-transform: uppercase; }
</style>
</head>
<body>
<p>Styles demo.<br />
<span>Test uppercase</span>.
</p>
</body>
</html>

<body> Section
17
• The <body> section
describes the viewable
portion of the page
• Starts after the <head>
</head> section
• Begins with <body> and
ends with </body>

The Heading Element
18
<h1> to <h6> Define headers
<h1> defines the largest header
<h6> defines the smallest header
<h1>Heading Level 1</h1>

<p> ,<br/> tags
19
o Paragraph Element
(<p>...</p>)tag
o <p> …paragraph goes
here… </p>
o empty space above and
below the paragraph
o line break <br/> tag
o …text goes here <br>
o This starts on a new
line….
Example
<p>Contact<br />
6150 Sennott Square<br />
University of Pittsburgh<br>
Pittsburgh, PA 15260</p>

Text
Formatting
• Text formatting tags modify the text between
the opening tag and the closing tag
• Ex. <b>Hello</b> makes “Hello” bold
20

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<b> Hello#1 </b>
<em> Hello#2 </em>
<i> Hello#3 </i>
<u> Hello#4 </u>
<del> Hello#5 </del>
<sup> Hello#6 </sup>
<sub> Hello#7 </sub>
<pre> Hello#8 </pre>
<blockquote>Hello#9</blockquote>
</body>
</html>
Text Formatting (Example)
Output:
21

Text Formatting (Another Example)
Output:
22
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<h1>Notice</h1>
<p>This is a <em>sample</em> Web page.</p>
<p><pre>Next paragraph:
preformatted.</pre></p>
<h2>More Info</h2>
<p>Specifically, we’re using XHMTL 1.0
transitional.<br />
Next line.</p>
</body>
</html>

Attributes, Links,
Images,
Lists, and Tables
23

- Use <a > (anchor) tag to create a link
- Specifies a hyperlink reference (href) to a file or URL
- Click on a specially marked word or image on a web page
and automatically be jumped to:
 Absolute link (External link)
 Link to other websites
 Ex:
 Relative link (Internal link)
 Link to pages on your own site
 Ex:
 Relative to the current page
 Ex:
Links & Anchor Element <a>
<a href =" ht tp://ya ho o.com " t a r g e t = " _ b l a n k " >Ya ho o </a >
<a href =" index .html" >Ho me</a>
<h2 id="section1">Intro</h2>
<a href="#section1">Goto intro</a> 24

 target="_blank" opens the link in a new window
 target="_self" : Open the link in the current frame.
 Link to an e-mail address:
<a href="http://yahoo.com" target="_blank">Yahoo</a>
<a href="mailto:me@hotmail.com">me@hotmail.com</a>
<a href="http://yahoo.com" target=“ _self ">Yahoo</a>
25
Links & Anchor Element <a>

Links to the Same Document – Example
<h1>Table of Contents</h1>
<p> <a href="#section1"> Introduction </a> <br/>
<a href="#section2">Some background</a> <br/>
<a href="#section3">Project History</a> <br/>
...the rest of the table of contents... </p>

<h2 id="section1">Introduction</h2>
... Section 1 follows here ...
<h2 id="section2">Some background</h2>
<h3 id="section3 ">Project History</h3>
26

Images:<img> tag
27
 Inserting an image with <img> tag:
 Image attributes:
<img src="url" alt="some_text" width="width" height= "height "
>
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border

Images:<img> tag
28
 Images in same Folder
 Images in Another Folder
 Image as a Link
<img src="html5.gif" alt="HTML5 icon" width="300" height="300" >
<a href="default.asp">
<img src="html5.gif" alt="HTML5 icon" width="300" height="300"
>
</a>
<img src="imeges/html5.gif" alt="HTML5 icon" width="300"
height="300" >

Lists types:
 Unordered list (ul)
- Bulleted items.
 Ordered list (ol)
- Numbered items.
 Definition List(dl)
-a list of items, with a description of
each item.
Note: Browser inserts a blank line
before & after the list (block-level
element)
29

Ordered Lists: <ol>
Tag
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
Attribute values for type
are:
1, A, a, I, or I
Note: 1 is the default value
30
a. Apple
b. Orange
c. Grapefruit
1. Apple
2. Orange
3. Grapefruit
A. Apple
B. Orange
C. Grapefruit
I. Apple
II. Orange
III. Grapefrui
t
i. Apple
ii. Orange
iii. Grapefruit

Unordered Lists: <ul>
Tag
<ul type=" circle ">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
Attribute values for type
are:
disc, circle and square
Note: square is the default value
31
 Apple
 Orange
 Pear
• Apple
• Orange
• Pear
o Apple
o Orange
o Pear

Definition lists: <dl>
tag
<dl>
<dt>HTML</dt>
<dd>A markup language ..</dd>
<dt>CSS</dt>
<dd>Language used to … </dd>
</dl>
32
o Create definition lists using
<dl>
 Pairs of text and associated
definition;
 text is in <dt> tag (defines text),
definition in <dd> tag (definition
descriptions)
 Renders without bullets
 Definition is indented

HTML Special Characters
33
£
£
British Pound
€
€
Euro
"
"
Quotation Mark
¥
¥
Japanese Yen
—
—
Em Dash
 
Non-breaking Space
&
&
Ampersand
>
>
Greater Than
>
<
Less Than
™
™
Trademark Sign
®
®
Registered Trademark Sign
©
©
Copyright Sign
Symbol
HTML Entity
Symbol Name

Tables
- Tables are frequently used
to organize data into rows
and columns.
- <table> element defines an
HTML5 table.
- <caption> element specifies
a table’s title.
34

Tables
A table can be split into three distinct
sections:
1. <thead> Declare the Table Head
• Table titles
• Column headers
2. <tbody> Declare the Table Body .
• Primary table data
3. <tfoot> Declare the table footer
• Calculation results
• Footnotes
Note: Even if the tfoot section in the code
was before the tbody, the tfoot content will
display at the bottom in the table.
- Same applies on thead it always comes on
the top of the table 35

Tables
36
Elemen
t
Definition
<tr> Defines individual table rows
<th> Defines a header cell
<td> Contains table data elements.
<tr>
<tr>
<th> <th>
<td> <td>

Table with Header & Border
<table border="1" >
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
</tr>
</table>
Tables without Header & Borders
<table border="0" >
<tr>
<td>row 2 , cell 2</td>
</tr>
<tr>
<td> row 2, cell 1 </td>
<td> row 2, cell 2 </td>
</tr>
</table>
Tables
37
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

• Tables have two attributes related to space:
 cellpadding
 Defines the empty
space around the cell
content
 cellspacing
 Defines the empty
space between cells
cell cell
cell cell
cell
cell
cell
cell
Cell Spacing and Padding
42

Cell Spacing and Padding-
Example
43
<table cellspacing="15" cellpadding="0">
<tr>
<td>First</td>
<td>Second</td>
</tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr>
<td>First</td>
<td>Second</td>
</tr>
</table>

Row and Column Spans
• You can MERGE data cells with the rowspan and
colspan attributes
• The values of this attributes specify the number of
rows or columns occupied by the cell.
• Can be placed inside any data cell or table header
cell.
44

 rowspan
 Defines how many rows
the cell occupies
 colspan
 Defines how many
columns the cell
occupies
Row and Column Spans
45
cell[1,1] cell[1,2]
cell[2,1]
colspan="1"
colspan="1"
colspan="2"
cell[1,1]
cell[1,2]
cell[2,1]
rowspan="2" rowspan="1"

Row and
Column
Spans -
Example
<table cellspacing="0">
<tr>
<td>Cell[1,1] </td>
<td colspan="2">Cell[2,1]</td>
</tr>
<tr>
< td >Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
< td >Cell[3,2]</td>
</tr>
<tr>
<td>Cell[1,3]</td>
<td>Cell[2,3]</td>
</tr>
</table> 46
Could you predict
the output ?
Cell[2,3]
Cell[1,3]
Cell[3,2]
Cell[2,2]
Cell[1,2]
Cell[2,1]
Cell[1,1]

Using<div>& <span>
block&inline elements
47

Block and Inline Elements
 Block elements:
 Add a line break before and after them
 Define a complete section or block of text
 Ex: <div>, <h1> , <h6>, <p>, <form>,< ul>, <ol>, <li>,
<table>, <tr>, <th> <nav>
 Inline elements
 Define the structure of a sequence of characters within
a line
 Ex: <span>, <a>, <img> 48

The <div> Tag
 <div> creates logical divisions within area of a web page
 create a separate area
 Block display with empty space above and below the div
49
<div style="backgroundcolor:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England...</p>
<p>Standing on the River Thames, London has...</p>
</div>

The <span> Tag
 <span> Inline style element
 Used for modifying a specific portion of text
 Don't create a separate area
 <span> used both style and class attributes with CSS
50
<h1> My <span style="color:red">Important</span> Heading</h1>

The <nav> Tag
 The <nav> tag defines a set of navigation links.
 Notice that NOT all links of a document should be inside a
<nav> element.
 The <nav> element is intended only for major block of
navigation links.
51

To Explore .. (Self driven learning activity).
 Using Google search, find out how to add video from
online resource (E.g YouTube) to html page
 Find out how to add map (Google MAP) to the web
page
52

Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv

Recommended

Recommended

More Related Content

Similar to Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv

Similar to Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv (20)

More from ZahouAmel1

More from ZahouAmel1 (18)

Recently uploaded

Recently uploaded (20)

Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv

Editor's Notes