Scribd
Upload
26 views30 pages

HTML

Uploaded by

Maryam Waleed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
26 views30 pages

HTML

Uploaded by

Maryam Waleed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

Lesson 04 - HTML

CIS 1203 – Web Technologies

Prepared By Ghazala Bilquise


Learning Outcomes

• In this chapter, you will learn about:


• HTML syntax, tags, and document type definitions
• The anatomy of a web page
• Formatting the body of a web page
• Formatting the text on a web page
• Physical and logical style tags
• Special Characters
• Connecting Web pages using hyperlinks
• Inserting Images
• Inserting Tables

Prepared By Ghazala Bilquise


What is HTML?

• HTML:
The set of markup symbols or codes placed in a file intended for
display on a Web browser page.

• The World Wide Web Consortium (http://w3c.org) sets the standards


for HTML and its related languages.

Prepared By Ghazala Bilquise


HTML Elements

• Each individual markup code is referred to as an element or tag.

• Each tag has a purpose.

• Tags are enclosed in angle brackets, "<" and ">" symbols.

• Most tags come in pairs; an opening tag and a closing tag.


• <body> </body>

• Some tags are stand-alone (they have no closing tags)


• <hr>
• <br>

Prepared By Ghazala Bilquise


HTML Syntax

• An HTML document must be well-formed.


• Use lowercase
• Use opening and closing tags
<body> </body>
• stand-alone tag with special syntax
<hr>

Prepared By Ghazala Bilquise


First Web Page
<!DOCTYPE html >
<html > an opening tag
.... page info goes here
</html> a closing tag

Prepared By Ghazala Bilquise


Head & Body Sections
• Head Section
Contains information that describes the Web
page document
<head>
…head section info goes here
</head>
• Body Section
Contains text and elements that display in the
Web page document
<body>
…body section info goes here
</body>

Prepared By Ghazala Bilquise


HTML
<title> tag
The Title tag is used to display the title of the website on the
browser tab
<!DOCTYPE >
<html>
<head>
<title>My First Web Page</title>
information about page goes here..
</head>
<body>
content of page goes here…
</body>
</html>

Prepared By Ghazala Bilquise


HTML Tags used in the BODY
The following are various HTML Tags you can add within the body tag.

Prepared By Ghazala Bilquise


The Heading Element

<h1>Heading Level 1</h1>


<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

Prepared By Ghazala Bilquise


HTML
<p> tag
• Paragraph element
<p> …paragraph goes here… </p>

• Groups sentences and sections of text together.

• Configures a blank line above and below the paragraph

Prepared By Ghazala Bilquise


HTML
<br> tag
• Line Break element
• Stand-alone tag

…text goes here <br>


This starts on a new line….

• Causes the next element or text to display on a new line

Prepared By Ghazala Bilquise


HTML
Logical Style Elements
• Indicate the logical style of the text display

• Common Logical Style Tags


• <strong></strong>
• To cause text to be emphasized or to "stand out" from
surrounding text.
<strong>This is important</strong>
• <em></em>
• To cause text to be emphasized in relation to other text on the
page. Usually italics.
<em>Please note</em>

Prepared By Ghazala Bilquise


HTML
Special Characters
• Display special characters such as quotes,
copyright symbol, etc.

Character Code
© &copy;
< &lt;
> &gt;
& &amp;
&nbsp;

Prepared By Ghazala Bilquise


HTML List Basics
• Ordered List
• Unordered List

Prepared By Ghazala Bilquise


HTML
Ordered List
• Conveys information in an ordered fashion
• <ol>
Contains the ordered list
• type attribute determines numbering scheme of list,
default is numerals
• <li>
Contains an item in the list

Prepared By Ghazala Bilquise


HTML
Ordered List Example
<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>

Prepared By Ghazala Bilquise


HTML
Unordered List

• Displays information with bullet points


• <ul>
Contains the unordered list
• type attribute determines the type of bullet point
• default type is disc (but depends on the browser used)

• <li>
Contains an item in the list

Prepared By Ghazala Bilquise


HTML
Unordered List Example
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>

Prepared By Ghazala Bilquise


Checkpoint

• 1. Describe the features of a heading tag and how it configures the


text.
• 2. Describe the difference between ordered lists and unordered lists.
• Describe the purpose of special characters.

Prepared By Ghazala Bilquise


HTML
<a> tag
• The anchor element
• Specifies a hyperlink reference (href) to a file
• Text between the <a> and </a> is displayed on the
web page.
<a href="contact.html">Contact Us</a> Contact
• href Attribute
• Indicates the file name or URL
Web page document, photo, pdf, etc.

Prepared By Ghazala Bilquise


HTML
• Absolute link
<a> tag
• Link to other Web sites

<a href="http://yahoo.com" target=“_blank”>Yahoo</a>


• Target Attribute
• Opens the link in a new browser tab.

• Relative link
• Link to pages on your own site

<a href="index.htm">Home</a>

Prepared By Ghazala Bilquise


HTML Email Links
using the <a> tag

• Automatically launch the default mail program configured for the


browser
• If no browser default is configured, a message is displayed

<a href=“mailto:[email protected]”>My Name</a>

My Name

Prepared By Ghazala Bilquise


Checkpoint
1. Describe when to use an absolute link.
Is the http protocol used in the href value?

2. Describe when to use a relative link. Is the http


protocol used in the href value?

3. What happens when a web site visitor clicks on


an e-mail link?

Prepared By Ghazala Bilquise


HTML
<img> tag
• To insert an image use the following HTML tag
<img src=“images/google.jpg">
• Setting additional properties of the image
• alt – is used to set an alternate text for the image
• <img src=“images/google.jpg“ alt=“Google”>
• To convert an image to a link
<a href=http://www.yahoo.com>
<img src=“images/google.jpg">
</a>

Prepared By Ghazala Bilquise


HTML
Table
• Tables are frequently used to organize data into rows and columns.

• <table>
The table tag defines an HTML5 table

• <tr>
Defines a table row

• <td>
Defines a table data cell in the row

Prepared By Ghazala Bilquise


HTML
Definition List Example
<table border=“1” align=“center”>
<tr>
<td>Fruit</td>
<td>Price</td>
</tr>
<tr>
<td>Apple</td>
<td>AED 3.5</td>
</tr>
<tr>
<td>Orange</td>
<td>AED 4.5</td>
</tr>
</table>
Prepared By Ghazala Bilquise
BLOCK Level and In-Line Elements

• A block-level element always starts on a new line


• Example:
• Headings – <H1>, <H2>, <H3> etc
• Paragraphs – <P>
• Lists – <UL>, <OL>
• Tables - <table>

• An In-line element does not start on a new line


• Example
• <strong>
• <em>
• <img>
• <a>

Prepared By Ghazala Bilquise


HTML5 coding conventions
• Previous versions of HTML were strict
• Developers were forced to write valid and “well-formed” code
• With HTML 5 this is not required.
• However, we should use best practices while writing our HTML code. For
example:
Write your tags in small letters
Close tags properly
Nest tags correctly
Use double quotations (“ “) to specify property values
• For more examples of coding convention visit link below:
http://www.w3schools.com/html/html5_syntax.asp

Prepared By Ghazala Bilquise


Summary

• This lesson provided an introduction to HTML.


• It began with an introduction to the HTML,
discussed the transition to HTML, continued with
the anatomy of a web page, introduced inline and
block-level formatting, and demonstrated the HTML
techniques used to create hyperlinks.
• You will use these skills over and over again as you
create Web pages.

Prepared By Ghazala Bilquise

You might also like