Ordered lists

Download Report

Transcript Ordered lists 

Basics of HTML
Shashanka Rao
Learning Objectives
1. HTML Overview
2. Head, Body, Title and Meta Elements
3.Heading, Paragraph Elements and Special
Characters.
4. Lists
5. Div tag
6. Anchor Elements
HTML Overview
• Markup language consists of a set of directions
that tell the browser how to display and manage
a web document.
• HTML is a set of markup symbols or codes
placed in a file that is intended for display on a
web page.
• HTML permits platform-independent display of
information across a network
• Each individual markup code is referred to as an
element or tag.
• Tags are enclosed in angle brackets, < and >
symbols
• Most tags come in opening and closing pair. For
Ex: <title> </title>
• There are a few self contained tags that do not
have matching end tags. For Ex: <br>
• Most tags can be modified with attributes that
further describe their purpose.
Document Structure
Document Type Definition
• Multiple types oh HTML and XHTML exists,
W3C recommends identifying the type of
markup language used in the web page
document
with
a
Document
Type
Definition(DTD)
• The DTD identifies the version of HTML in your
document.
• The DTD statement, known as “doctype”
statement is placed at top of web page
document.
Head, Body, Title and Meta Elements
• The head element contains the head section which is
enclosed within <head> and </head> tags
• The head section consists of a minimum of two other
sections- title and meta
• The first element in the head section is the title element
which configures the text that will appear on the title bar
of the browser.
• The text between <title> and </title> tags is called the
title of the web page.
• The meta element describes the characteristics of a web
page such as character encoding. The meta tag is a
standalone tag <meta>
• Character encoding is an internal representation of
letters, numbers and symbols in a file such as web page
or a file that is stored on a computer that may be
transmitted over the internet. The commonly used
character encoding is utf-8 which is form of unicode.
• Ex: HTML meta tag
<meta charset=“utf-8”>
• The body element contains the body section enclosed in
<body> and </body>
• Let’s have a look at sample page MyFirstHTML.html
Heading, Paragraph Elements and
Special Characters
• Heading elements are organized in 6 levels: h1
through h6
• The text contained within the header element is
displayed as “block” of text by the browser with
empty white space above and below.
• The text size of h1 is largest and it is smallest for
h6
• Let us look at an example MyHeaderHTML.html
• Paragraph elements are used to group sentences
and sections of text together.
• Text that is contained within <p> and </p>
displays as a block with empty white space above
and below it.
• The web page by default is left aligned. The
attribute “align” can be used to modify the
alignment.
• The line break element causes the browser to
move to next line before displaying the element.
It s a stand alone element denoted by <br>
• Let us look at use of paragraph elements
MyParaExample.html
• In order to use special characters such as
quotation marks, greater than or less than
symbols in your web page document, you need
to use special characters or entity characters.
• Common special characters are:
Lists- Unordered and ordered lists
Unordered Lists
• An unordered lists displays a
bullet, or list marker before
each entry in the list.
• Each unordered list is within
<ul> and </ul> tags.
• Each list item begins with <li>
and ends with </li> tag.
Ordered lists
• An ordered list displays a
numbering or lettering system
to itemize the information in
the list.
• Each list is within <ol> and
</ol> tags
• Each item in the list is within
<li> and </li> tags.
Ex: MyLists.html
Div tag
• A div element configures a structural block area
or “division” on a web page, with empty white
space above and below.
• The div elements begins with a <div> tag and
ends with a </div> tag.
• The div tag can contain other block display
elements such as <p>,<ul> and other <div>
elements.
• Let’s see an example: MyDiv.html
Anchor Elements
• Anchor elements are used to specify a hyperlink ,
referred to as link to another web page or file which
needs to be displayed.
• The text between <a> and </a> tags can be clicked to
perform hyperlink.
• The “href” attribute is used to configure hyperlink
reference which identifies name and location of the file.
Absolute Hyperlink
Relative Hyperlink
Indicates the absolute location of a The hyperlink location is relative to the
resource on the web. Generally used to page currently being displayed.
link resources on other websites.
Ex: MyRef.html
References
1. Fluency5 + HTML 5 , Pearson
ISBN:1-256-78416-8
2. W3 Schools:
http://www.w3schools.com/html/default.asp