Introduction of html
• 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
extension
– An HTML file can be created using a simple text
editor
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
• HTML tags are used to mark-up HTML
elements
– 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:
name=“value”
– 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
recommended
– <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
window
• 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 CSS
– HTML Entities
– HTML Head
– HTML Meta
– HTML URLs
– 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
HTML
– EXtensible HyperText Markup Language
– aimed to replace HTML
– identical to HTML 4.01
– combination of HTML and XML (EXtensible Markup
Lanuage)
Why XHTML?
• Many pages contain “bad” HTML
<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”
documents
• Different browser technologies require “good” markup
language
• 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
element
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
0 Comments