HTML - hostoi.com
Download
Report
Transcript HTML - hostoi.com
HTML
HyperText Markup Language:
• A set of tags and rules for using them in developing
hypertext documents
•
Hypertext Markup Language is the tags used to structure
Web pages so that a browser can display it in a way that is
also influenced by the browser's design and the users
preferences for font size, style, etc.
•
Hypertext Markup Language is the tags used to structure
Web pages so that a browser can display it in a way that is
also influenced by the browser's design and the users
preferences for font size, style, etc.
Develop Websites with
HTML
XHTML
Extensible Hypertext Markup Language
• The next generation of HTML, compliant with XML
standards. Although it is very similar to the current
HTML, it follows a stricter set of rules, thus allowing for
better automatic code validation.
• XHTML (eXtensible HTML) is a version of HTML that
restricts the use of the HTML language with the same
restrictions of the XML language. The main difference is
that all the tags are lower case and must be properly
closed. For instance, you must write <br/> with a / before
the closing bracket. Also, with the proper declarations in
the header, one can extend XHTML with any number of
languages. For instance, the math language is used to
describe mathematical formulas directly within XHTML
DHTML
• Dynamic HTML, or DHTML, is an umbrella term for a collection of
technologies used together to create interactive and animated web
sites by using a combination of a static markup language (such as
HTML), a client-side scripting language (such as JavaScript), a
presentation definition language (such as CSS), and the Document
Object Model.
• DHTML allows scripting languages to change variables in a web
page's definition language, which in turn affects the look and
function of otherwise "static" HTML page content, after the page has
been fully loaded and during the viewing process. Thus the dynamic
characteristic of DHTML is the way it functions while a page is
viewed, not in its ability to generate a unique page with each page
load.
• By contrast, a dynamic web page is a broader concept — any web
page generated differently for each user, load occurrence, or
specific variable values. This includes pages created by client-side
scripting, and ones created by server-side scripting (such as PHP,
Perl, JSP or ASP.NET) where the web server generates content
before sending it to the client.
XML
(Extensible Markup Language)
• XML is a set of rules for encoding
documents electronically
• XML started as a very constrained version
of HTML. It is used for all sorts of things
such as XHTML and any type of data
handling in many different type of
software.
Basic Structure
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY> <P>Hello world!
</BODY>
</HTML
Doc Type
A valid HTML document declares what
version of HTML is used in the document.
The document type declaration names the
document type definition (DTD) in use for
the document (see [ISO8879]
This means that in a document type
declaration, authors may safely use a
system identifier that refers to the latest
version of an HTML 4 DTD.
Head Element
The HEAD element contains information
about the current document, such as its
title, keywords that may be useful to
search engines, and other data that is not
considered document content. User
agents do not generally render elements
that appear in the HEAD as content. They
may, however, make information in the
HEAD available to users through other
mechanisms
Title Element
• Every HTML document must have a TITLE
element in the HEAD section.
• Authors should use the TITLE element to identify
the contents of a document. Since users often
consult documents out of context, authors
should provide context-rich titles. Thus, instead
of a title such as "Introduction", which doesn't
provide much contextual background, authors
should supply a title such as "Introduction to
Birds of Sri Lanka" instead.
Meta data
A common use for META is to specify keywords that a
search engine may use to improve the quality of search
results. When several META elements provide languagedependent information about a document, search
engines may filter on the lang attribute to display search
results using the language preferences of the user
<-- For speakers of US English -->
<META name="keywords" lang="en-us" content="vacation,
Greece, sunshine">
<-- For speakers of British English -->
<META name="keywords" lang="en" content="holiday,
Greece, sunshine"> <-- For speakers of French -->
<META name="keywords" lang="fr" content="vacances,
Grèce, soleil">
Text formatting
<html>
<head>
<title> Title of the page here </title>
</head>
<body>
<p>Introduction- birds of Sri Lanka</p>
<p>There are 26 endemic birds in Sri Lanka<br>
Following are the varieties</p>
</body>
</html>
Text formatting
<html>
<head>
<title> Title of the page here </title>
</head>
<body>
<p><b>This is bold face text</b></p>
<p><u>This is underlined text</u></p>
<p><i>This text is in italics</i></p>
<p><b><font face="Arial">This is bold face Arial text</font></b></p>
<p><b><font face="Arial" color="#FF0000">This is bold face Arial red color text</font></b></p>
<p><b><font face="Arial" color=red>This is bold face Arial red color text</font></b></p>
<p><b><font face="Arial" size="6" color=green>The font size is 6 or 24pt</font></b></p>
</body>
</html>
Comments
<!-- this is a comment -->
Headings
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>
Ordered List
<ol>
<li>Sparrow</li>
<li>Mynah</li>
<li>Crow</li>
<li>Parrot</li>
</ol>
Unordered List
<ul>
<li>Sparrow</li>
<li>Mynah</li>
<li>Crow</li>
<li>Parrot</li>
</ul>
Tables
<table border="1" width="41%" id="table1">
<tr>
<td width="208">Name</td>
<td width="129">Mathematics</td>
<td>English</td>
</tr>
<tr>
<td width="208">Nimal</td>
<td width="129">45</td>
<td>56</td>
</tr>
<tr>
<td width="208">Sunil</td>
<td width="129">34</td>
<td>51</td>
</tr>
<tr>
<td width="208">Kamala</td>
<td width="129">78</td>
<td>41</td>
</tr>
</table>
Images
<img border="0"
src="file:///C:/Users/Dell/Documents/mypic
ture.jpg" width="229" height="229">
Hyperlinks
To a text
<p>
<a href="http://www.microsoft.com">Click to
go to Microsoft Web site</a></p>
To an Image
<a href="http://www.yahoo.com"><img
border="0"
src="file:///C:/Users/Dell/Documents/mypic
ture.jpg" width="229" height="229"></a>
Frames
Frames are most typically used to have a menu in one frame, and content in another frame. When
someone clicks a link on the menu that web page is then opened on the content page. Here is a
classic example of a basic "index" frameset with a menu on the left and content on the right.
<html>
<head> </head>
<frameset cols="30%,*"> <frame src="menu.html"> <frame src="content.html">
</frameset>
</html>
•
•
•
frameset - The parent tag that defines the characteristics of this frames
page. Individual frames are defined inside it.
frameset cols="#%, *"- Cols(columns) defines the width that each frame
will have. In the above example we chose the menu (the 1st column) to be
30% of the total page and used a "*", which means the content (the 2nd
column) will use the remaining width for itself.
frame src="" -The location of the web page to load into the frame.
Frames
<FRAMESET ROWS="75%, *"
COLS="*, 40%">
<FRAME SRC="framea.html">
<FRAME SRC="frameb.html">
<FRAME SRC="framec.html">
<FRAME SRC="framed.html">
</FRAMESET>
Frames
<html>
<head>
</head>
<frameset rows="20%,*">
<frame src="title.html">
<frameset cols="30%,*">
<frame
src="menu.html">
<frame src="content.html">
</frameset>
</html>
frameset rows="#%, *"rows defines the height that
each frame will have. In the
above example we chose
the new title (the 1st row) to
be 20% of the total page
height and used a "*", which
means that menu and
content (which are the 2nd
row) will use the remaining
height.
Background Colour
<body bgcolor=red>
</body>
Web 2.0
Web 2.0 websites allow users to do more than just
retrieve information. By increasing what was
already possible in "Web 1.0", they provide the
user with more user-interface, software and
storage facilities, all through their browser. This
has been called "Network as platform"
computing. Users can provide the data that is on
a Web 2.0 site and exercise some control over
that data. These sites may have an "Architecture
of participation" that encourages users to add
value to the application as they use it.
Web 2.0
Web 2.0 can be described in 3 parts which are as follows:
Rich Internet Application (RIA) - It defines the experience
brought from desktop to browser whether it is from a
graphical point of view or usability point of view. Some
buzz words related to RIA are AJAX and Flash.
Service-oriented Architecture (SOA) - It is a key piece in
Web 2.0 which defines how Web 2.0 applications expose
its functionality so that other applications can leverage
and integrate the functionality providing a set of much
richer applications (Examples are: Feeds, RSS, Web
Services, Mash-ups)
Social Web - It defines how Web 2.0 tend to interact much
more with the end user and making the end user an
integral part.
Web 3.0 Technology
According to Wikipedia, an online encyclopedia, “Web 3.0
is a third generation of Internet based Web services,
which emphasize machine-facilitated understanding of
information in order to provide a more productive and
intuitive user experience.”. The third generation of
Internet services is collectively consists of semantic web,
microformats, natural language search, data-mining,
machine learning, recommendation agents that is known
as Artificial Intelligence
Web 3.0 TechnologyWith the Internet dominating the
business world, the need to have an effective web 3.0
sites has increased among companies. In today's
always-on world, a company's web site is critical to its
ability to compete and succeed. Our top priority is to
provide high-quality updates on web 2.0 and 3.0
solution around the world. Web 3.0 is defined as the
creation of high-quality content and services produced
by individuals using Web 2.0 technology as an enabling
platform.
Web 3.0 Technology
Web 3.0 Technologies (Semantic Web) Includes
1. Artificial intelligence
2. Automated reasoning
3. Cognitive architecture
4. Composite applications
5. Distributed computing
6. Knowledge representation
7. Ontology (computer science)
8. Recombinant text
9. Scalable vector graphics
10.Semantic Web
11.Semantic Wiki
12.Software agents
CSS- Cascading Style Sheets
• CSS was created to clearly separate the style of web
pages from the description of the boxes and text forming
pages.
• Pages download faster, sometimes by as much as
50%
• You have to type less code, and your pages are shorter
and neater.
• The look of your site is kept consistent throughout all the
pages that work off the same stylesheet.
• Updating your design and general site maintenance are
made much easier, and errors caused by editing multiple
HTML pages occur far less often.
CSS
There are 3 ways to apply CSS to HTML
1.in-line styles
2.internal styles
(embedded)
3.external style sheets
In-line styles
•
•
To use in-line styles you place the "style" attribute within the relevant HTML tag. The style attribute
can contain any CSS property.
An in-line style can apply to a whole HTML element or it can apply to a selected area within that
element. For example it can apply to a whole paragraph or it can apply to only a string of text
within the paragraph.
<html >
<head>
<title>this is the title of the web page</title>
</head>
<body>
<p style="color: red">
the text in this paragraph is red
</p>
<p>
this is the <span style="color: red">best CSS and
HTML tutorial </span> available on the world wide web
</p>
</body>
</html>
Internal Style Sheets
(Embedded)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>this is the title of the web page</title>
<style type="text/css">
p
{
color: red;
}
</style>
</head>
<body>
<p>
the text in this paragraph will be red
</p>
<p>
the text in this paragraph is also going to be red
</p>
</body>
</html>
Internal Style Sheets
<html >
<head>
<title>Untitled Document</title>
<style type="text/css">
.NewStyles
{
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
font-style: italic;
font-weight: bold;
color: #0033CC;
text-decoration: underline;
}
</style>
</head>
<body class="NewStyles">
New Styles
</body>
</html>
•
•
•
External Style Sheets
External style sheets are styles that can be applied to as many web pages as you like
that are on the same website. With external style sheets there are at least 2
documents: the document that the styles are on and the the web page that the styles
apply to (of course you can apply the styles to multiple web pages on the same site).
The web page(s) need to link to the style sheet by using the following code within the
openning and closing <head> tags.
<link rel="stylesheet" type="text/css" href="mystylesheet.css" />
<html >
<head>
<title>this is the title of the web page</title>
<link rel="stylesheet" type="text/css" href="mystylesheet.css" />
</head>
<body>
<p>
the text in this paragraph is red
</p>
<p>
I now know HTML and CSS
</p>
</body>
</html>
CSS file
NS
{
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
font-style: italic;
font-weight: bold;
color: #0033CC;
text-decoration: underline;
}
Calling into HTML
<link rel="stylesheet" type="text/css"
href="Styles.css" />
<html>
<body>
<NS> This is style </NS>
</body>
</html>
Link to the HTML Document
<html >
<head>
<title>Untitled Document</title>
<link href="file:///C|/B.Ed(IT)/TestWeb/Mystyles.css"
rel="stylesheet" type="text/css" />
</head>
<body class="MyStyles">
This is my styles
</body>
</html>
Link to the HTML code
<html >
<head>
<title>Untitled Document</title>
<link href="file:///C|/B.Ed(IT)/Styles/MySty.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<p class="MyStyles">This is External style Sheet</p>
</body>
</html>
W3C
The World Wide Web Consortium (W3C) is
an international community where Member
organizations, a full-time staff, and the
public work together to develop Web
standards. Led by Web inventor Tim
Berners-Lee and CEO Jeffrey Jaffe,
W3C's mission is to lead the Web to its full
potential. Contact W3C for more
information.
•
What does W3C do?
– W3C's primary activity is to developing protocols and guidelines that ensure longterm growth for the Web. W3C's standards define key parts of what makes the
World Wide Web work. Learn more about W3C's mission.
•
Where is W3C located?
– W3C does not have a single physical headquarters. There are three institutions,
however, that "host" W3C: MIT (in Cambridge, MA, USA), ERCIM (in SophiaAntipolis, France), and Keio University (near Tokyo, Japan).
•
•
The W3C staff is distributed around the world, but there are concentrations
of people in Cambridge, Massachusetts (USA), Sophia-Antipolis (France),
and Tokyo (Japan). In addition, W3C is represented in 17 other regions of
the world via representatives based at organizations. W3C calls these
regional points of contact "W3C Offices."
How is W3C funded?
– W3C receives funds from:
• W3C Member dues
• Research grants and other sources of private and public funding
• Individual donations of money and equipment
• What is the difference between the Web and the Internet?
• From the definition in the Wikipedia: "The Internet is a global system
of interconnected computer networks that interchange data by
packet switching using the standardized Internet Protocol Suite
(TCP/IP)."
• Thus, the Internet is defined by the TPC/IP standards.
• The Web, on the other hand, is defined in W3C's Architecture of the
World Wide Web, Volume I as follows: "The World Wide Web
(WWW, or simply Web) is an information space in which the items of
interest, referred to as resources, are identified by global identifiers
called Uniform Resource Identifiers (URI)."
• Thus, the Web is defined by other specifications. The first three
specifications for Web technologies defined URLs, HTTP, and
HTML.
Choosing a DOCTYPE
• According to HTML standards, each HTML
document requires a document type declaration.
The "DOCTYPE" begins the HTML document
and tells a validator which version of HTML to
use in checking the document's syntax.
• If standard HTML does not meet your needs but
you still wish to gain the benefits of HTML
validation.
• The following DOCTYPEs are commonly used:
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
What is HTML validation?
•
•
•
•
•
This is the process that analyzes an HTML document in
comparison to standard HTML rules, identifying errors and
on-standard codes.
Web pages are rendered using HTML
(Hyper Text Markup Language).
As with any language there
are rules and standards that should be followed.
For example the HTML 4.01 Specification (rules and standards)
are available at http://www.w3.org/TR/html4/.
You can check the html validation of your web page by entering your
url
at: http://validator.w3.org/