Scribd
Upload
13 views

HTML

Uploaded by

Maryam Waleed
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views

HTML

Uploaded by

Maryam Waleed
Copyright
© © All Rights Reserved
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