Web Design and Development: Chapter Two: HTML

Web Design and Development
Chapter Two: HTML
By:
Dr Amira Ibrahim Abdelatey
Amira.Mohamed@ci.menofia.edu.eg
Overview of today’s lecture
• Introduction
• Basic tags
• Attributes
• Text formatting
• Images
• Links
• Lists
• Tables
• Forms
What is HTML?
• HTML, otherwise known as Hyper Text Markup

Language, is the language used to create Web pages.
• Using HTML, you can create a Web page with text,

graphics, sound, and video
A Simple HTML Document
<!DOCTYPE html> 
<html> <!– beginning of the html document -->
<head> 
<title>Page Title</title> 
</head>
<body> <!– actual html document here -->

<h1>My First Heading</h1> 
<p>My first paragraph.</p> 
</body> 4
</html>
What is an HTML Element?
• An HTML element is defined by a start tag, some content, and an

end tag:
<tagname>Content goes here...</tagname>
• The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Note: Some HTML elements have no content (like the <br>

element). These elements are called empty elements. Empty elements
do not have an end tag!
5
Web Browsers
• The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to

read HTML documents and display them correctly.
• A browser does not display the HTML tags, but uses them to
determine how to display the document:
6
HTML Editor
• HTML Editor – A word processor that has been

specialized to make the writing of HTML documents
more effortless.
• Pages end with “.htm” or “.html”.
• Web pages can be created and modified by using
professional HTML editors.
• However, for learning HTML we recommend a simple
text editor like Notepad (PC) or TextEdit (Mac).
8
Example
9
Tags
• The essence of HTML programming is tags
• A tag is a keyword enclosed by angle brackets (

Example: <I> )
• There are opening and closing tags for many but not
all tags; The affected text is between the two tags
More Tags...
• The opening and closing tags use the same command

except the closing tag contains an additional forward
slash /
• For example, the expression <B> Warning </B>

would cause the word ‘Warning’ to appear in bold face
on a Web page
Nested Tags
• Whenever you have HTML tags within other HTML

tags, you must close the nearest tag first.
Example:
<H1> <I> The Nation </I> </H1>
Structure of a Web Page
<HTML>
• All Web pages share <HEAD>
a common structure <TITLE> Example </TITLE>
</HEAD>
• All Web pages <BODY>
should contain a This is where you would
pair of <HTML>, include the text and
images on your Web page.
<HEAD>, <TITLE>,
and <BODY> tags </BODY>
</HTML>
HTML Documents
• All HTML documents must start with a document

type declaration: <!DOCTYPE html>.
• The HTML document itself begins with <html> and

ends with </html>.
• The visible part of the HTML document is between

<body> and </body>.
14
The <!DOCTYPE> Declaration
• The <!DOCTYPE> 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).
• The <!DOCTYPE> declaration is not case sensitive.
• The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html> 15
HTML Headings
• HTML headings are defined with the <h1> to <h6>

tags.
<h1> defines the most important heading. <h6>

defines the least important heading:
<h1>This is heading 1</h1>

16
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
17
The <TITLE> Tag
• Choose the title of your Web page carefully; The title

of a Web page determines its ranking in certain search
engines.
• The title will also appear on Favorite lists, History lists,

and Bookmark lists to identify your page.
HTML Links
• HTML links are defined with the <a> tag:
<a href="https://www.google.com">This is a link</a>
19
Never Skip the End Tag
Some HTML elements will display correctly, even if

you forget the end tag:
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
21
HTML is Not Case Sensitive
22
HTML Attributes
• All HTML elements can have attributes

• Attributes provide additional information about
elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like:
name="value"
23
The href Attribute
The <a> tag defines a hyperlink. The href attribute

specifies the URL of the page the link goes to:
<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag.
The link address is specified in the href
attribute:</p>
<a href="https://www.google.com">Visit
Google</a> 24
</body>
The src Attribute
• The <img> tag is used to embed an image in an

HTML page.
• The src attribute specifies the path to the image to
be displayed:
<!DOCTYPE html>
<html>
<body>
<h2>The src Attribute</h2>
<p>HTML images are defined with the img tag:</p>
<img src="img_girl.jpg" width="500"
height="600">
25
</body>
The width and height Attributes
The <img> tag should also contain the width and

height attributes, which specifies the width and
height of the image (in pixels):
<img src="img_girl.jpg" width="500"

height="600">
27
The alt Attribute
• The required alt attribute for the <img> tag

specifies an alternate text for an image, if the image
for some reason cannot be displayed.
• This can be due to slow connection, or an error in

the src attribute.
<img src="img_girl.jpg" alt="Girl with a

jacket">
28
The style Attribute
The style attribute is used to add styles to an

element, such as color, font, size, and more.
<p style="color:red;">This is a red paragraph.</p>
29
The lang Attribute
You should always include the lang attribute inside

the <html> tag, to declare the language of the Web
page. This is meant to assist search engines and
browsers.
- The following example specifies English as the
language:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body> 30
</html>
HTML Horizontal Rules
• The <hr> tag defines a thematic break in an HTML

page, and is most often displayed as a horizontal
rule.
• The <hr> element is used to separate content (or
define a change) in an HTML page:
<!DOCTYPE html>
<html>
<body>
<p>This is some text.</p>
<hr>
<p>This is some other text.</p>
<hr>
<p>This is some other text.</p>
34
</body>
</html>
HTML Line Breaks
• The HTML <br> element defines a line break.
• Use <br> if you want a line break (a new line)

without starting a new paragraph:
<p>This is<br>a paragraph<br>with line breaks.</p>
The <br> tag is an empty tag, which means that it has no end
tag. 35
The Poem Problem
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me.

</p>
36
Solution - The HTML <pre> Element
• The HTML <pre> element defines preformatted text.

• The text inside a <pre> element is displayed in a
fixed-width font (usually Courier), and it preserves
both spaces and line breaks:
<pre>
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me. 37
</pre>
The HTML Style Attribute
• Setting the style of an HTML element, can be done

with the style attribute.
• The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.

38
Example
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
39
Background Color
The CSS background-color property defines the

background color for an HTML element.
Example:
Set the background color for a page to powderblue:
<body style="background-
color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
40
</body>
Background Color
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:powderblue;">This is a
heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
</html>
41
Text Color
The CSS color property defines the text color for an

HTML element:
<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>
42
Fonts
The CSS font-family property defines the font to be

used for an HTML element:
<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>
43
Text Size
The CSS font-size property defines the text size for

an HTML element:
<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>
44
Text Alignment
The CSS text-align property defines the horizontal

text alignment for an HTML element:
<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>
45
HTML Text Formatting
Formatting elements were designed to display special
types of text:
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
46
Text Formatting Tags
<B> Bold Face </B>

<I> Italics </I>
<U> Underline </U>
<P> New Paragraph </P>
<BR> Next Line
HTML <mark> Element
The HTML <mark> element defines text that should

be marked or highlighted:
<p>Do not forget to buy <mark>milk</mark>

today.</p>
48
HTML <del> Element
The HTML <del> element defines text that has been

deleted from a document. Browsers will usually strike
a line through deleted text:
<p>My favorite color is <del>blue</del> red.</p>
49
HTML <ins> Element
The HTML <ins> element defines a text that has been

inserted into a document. Browsers will usually
underline inserted text:
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
50
HTML <sub> Element
The HTML <sub> element defines subscript text.

Subscript text appears half a character below the
normal line, and is sometimes rendered in a smaller
font. Subscript text can be used for chemical formulas,
like H2O:
<p>This is <sub>subscripted</sub> text.</p>
51
HTML <sup> Element
The HTML <sup> element defines superscript text.

Superscript text appears half a character above the
normal line, and is sometimes rendered in a smaller
font. Superscript text can be used for footnotes, like
WWW[1]:
<p>This is <sup>superscripted</sup> text.</p>
52
HTML Comments
HTML comments are not displayed in the browser,

but they can help document your HTML source code.
You can add comments to your HTML source by using

the following syntax:

53
HTML Colors
HTML colors are specified with predefined color

names, or with RGB, HEX, HSL, RGBA, or HSLA
values.
HTML supports 140 standard color names.

54
Background Color
You can set the background color for HTML elements:
<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ipsum...</p>
55
Text Color
You can set the color of text:
<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
56
Border Color
You can set the color of borders:
<h1 style="border:2px solid Tomato;">Hello World</h1>

<h1 style="border:2px solid DodgerBlue;">Hello
World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
57
Color Values
In HTML, colors can also be specified using RGB

values, HEX values, HSL values, RGBA values, and
HSLA values.
58
Example
<!DOCTYPE html>
<html>
<body>
<p>Same as color name "Tomato":</p>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99,
71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%,
64%)</h1>
<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99,
71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9,
59
100%, 64%, 0.5)</h1>
Shades of Gray
Shades of gray are often defined using equal values

for all three parameters:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
</body>
</html>
60
HTML 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.
61
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the

following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which indicates
the link's destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
62
HTML Links
By default, links will appear as follows in all

browsers:
• An unvisited link is underlined and blue

• A visited link is underlined and purple
• An active link is underlined and red
<a href="https://www.google.com/">Visit Google.com!</a>
63
HTML Links - The target Attribute
• By default, the linked page will be displayed in the current

browser window.
• To change this, you must specify another target for the link.
• The target attribute specifies where to open the linked
document.
The target attribute can have one of the following values:

✓ _self - Default. Opens the document in the same window/tab
as it was clicked
✓ _blank - Opens the document in a new window or tab
✓ _parent - Opens the document in the parent frame
✓ _top - Opens the document in the full body of the window
64
Example
<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<a href="https://www.google.com/" target="_blank">Visit

Google!</a>
<p>If target="_blank", the link will open in a new browser window

or tab.</p>
65
</body>
Absolute URLs vs. Relative URLs
Previous examples are using an absolute URL (a full

web address) in the href attribute.
A local link (a link to a page within the same website)

is specified with a relative URL (without the
"https://www" part):
<h2>Absolute URLs</h2>
<p><a
href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p> 66
HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag

inside the <a> tag:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
67
Link to an Email Address
Use mailto: inside the href attribute to create a link

that opens the user's email program (to let them
send a new email):
<a href="mailto:someone@example.com">Send email</a>
68
HTML Tables
• Each table cell is defined by a <td> and a </td>

tag.
• Everything between <td> and </td> are the
content of the table cell.
• Each table row starts with a <tr> and end with a
</tr> tag.
• Sometimes you want your cells to be headers, in
those cases use the <th> tag instead of the <td>
tag.
69
HTML Tables
70
Example
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr> 71
</table>
72

Web Design and Development: Chapter Two: HTML

Uploaded by

Document Information

Original Title

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

Web Design and Development: Chapter Two: HTML

Uploaded by

Copyright:

Available Formats

Web Design and Development

Chapter Two: HTML

• HTML, otherwise known as Hyper Text Markup

• Using HTML, you can create a Web page with text,

<!DOCTYPE html> <!--declaration defines that this document is

• An HTML element is defined by a start tag, some content, and an

Note: Some HTML elements have no content (like the <br>

• The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to

• HTML Editor – A word processor that has been

• The essence of HTML programming is tags

• A tag is a keyword enclosed by angle brackets (

• The opening and closing tags use the same command

• For example, the expression <B> Warning </B>

• Whenever you have HTML tags within other HTML

• All HTML documents must start with a document

• The HTML document itself begins with <html> and

• The visible part of the HTML document is between

• The <!DOCTYPE> declaration represents the

• It must only appear once, at the top of the page

• The <!DOCTYPE> declaration is not case sensitive.

• The <!DOCTYPE> declaration for HTML5 is:

• HTML headings are defined with the <h1> to <h6>

<h1> defines the most important heading. <h6>

<h1>This is heading 1</h1>

HTML paragraphs are defined with the <p> tag:

• Choose the title of your Web page carefully; The title

• The title will also appear on Favorite lists, History lists,

• HTML links are defined with the <a> tag:

<a href="https://www.google.com">This is a link</a>

Some HTML elements will display correctly, even if

• All HTML elements can have attributes

The <a> tag defines a hyperlink. The href attribute

• The <img> tag is used to embed an image in an

The <img> tag should also contain the width and

<img src="img_girl.jpg" width="500"

• The required alt attribute for the <img> tag

• This can be due to slow connection, or an error in

<img src="img_girl.jpg" alt="Girl with a

The style attribute is used to add styles to an

<p style="color:red;">This is a red paragraph.</p>

You should always include the lang attribute inside

• The <hr> tag defines a thematic break in an HTML

• The HTML <br> element defines a line break.

• Use <br> if you want a line break (a new line)

<p>This is<br>a paragraph<br>with line breaks.</p>

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

• The HTML <pre> element defines preformatted text.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me. 37

• Setting the style of an HTML element, can be done

• The HTML style attribute has the following syntax:

The property is a CSS property. The value is a CSS value.

The CSS background-color property defines the

The CSS color property defines the text color for an

<h1 style="color:blue;">This is a heading</h1>

The CSS font-family property defines the font to be

<h1 style="font-family:verdana;">This is a heading</h1>

The CSS font-size property defines the text size for

<h1 style="font-size:300%;">This is a heading</h1>

The CSS text-align property defines the horizontal