Introduction to html

            Introduction of html

HTML: HyperText Markup Language

• HTML documents are simply text documents 
with a specific form

– Documents comprised of content and markup tags
– Content: actual information being conveyed
– The markup tags tell the Web browser how to 
display the page
– An HTML file must have an htm or html file 
– An HTML file can be created using a simple text 

Our First Example

• If you are running Windows, start Notepad
• If you are on a Mac, start SimpleText
• If you telnet to csupomona.edu, use “pico”
• Type in the following:
• Open this file using a browser, and you will see…


• HTML tags are used to mark-up HTML
– Surrounded by angle brackets < and >
– HTML tags normally come in pairs, like <tagname>
(start tag) and </tagname> (end tag)
– The text between the start and end tags is the
element content
– Not case-sensitive
– Follow the latest web standards:
• Use lowercase tags

Tag Attributes

• Tags can have attributes that provide
additional information to an HTML element
– Attributes always come in name/value pairs like:
– Attributes are always specified in the start tag
– Attribute values should always be enclosed in
quotes. Double quotes are most common.
– Also case-insensitive: however, lowercase is
– <tagname a1=“v1” a2=“v2”></tagname>
– For example, <table border=“0”> is a start tag that
defines a table that has no borders

HTML Document Structure

• Entire document enclosed within <html> and
</html> tags
• Two subparts:
– Head
• Enclosed within <head> and </head>
• Within the head, more tags can be used to specify title
of the page, meta-information, etc.
– Body
• Enclosed within <body> and </body>
• Within the body, content is to be displayed
• Other tags can be embedded in the body

We’ll Study…

HTML Basics 

– HTML Elements
– HTML Headings
– HTML Paragraphs
– HTML Formatting
– HTML Styles
– HTML Images
– HTML Tables
– HTML Lists
– HTML Forms
– HTML Colors

HTML Layout

• One common way is to use HTML tables to format the
layout of an HTML page
– The trick is to use a table without borders, and maybe a
little extra cell-padding
• Other tips:
– Keep screen resolution in mind
– Use color to define spaces
– Align your images
– Balance the graphics and text on a page
– Think about text width – scan length 7 – 11 words
– Centering text is inadvisable

HTML Frames

• HTML frames are a means of having several 
browser windows open within a single larger 
• Each HTML document is called a frame
• Disadvantages:
– Must keep track of more HTML documents
– Difficult to print the entire page

Topics Covered

• From HTML 
– HTML Entities
– HTML Head
– HTML Meta
– HTML Scripts
– HTML Attributes
– HTML Events
– HTML URL Encode
– HTML Webserver

Script Examples
• Add scripts to HTML pages can make them 
more dynamic and interactive

What is XHTML?

• XHTML is a stricter and cleaner version of 
– EXtensible HyperText Markup Language
– aimed to replace HTML
– identical to HTML 4.01
– combination of HTML and XML (EXtensible Markup 


• Many pages contain “bad” HTML
<head> <title>This is bad HTML</title> 
<body> <h1>Bad HTML </body>
• XML is a markup language where everything has to be 
marked up correctly, which results in “well-formed” 
• Different browser technologies require “good” markup 
• XHTML combines the strengths of HTML and XML

Most Important Differences From HTMl.

• XHTML elements must be properly nested
• XHTML elements must always be closed
• XHTML elements must be in lowercase
• XHTML documents must have one root

XHTML Syntax

• More XHMTL Syntax Rules
– Attribute names must be in lower case
– Attribute values must be quoted
– Attribute minimization is forbidden
– The id attribute replaces the name attribute
– Mandatory elements

No comments