An Introduction to HTML - University of South Florida
Download
Report
Transcript An Introduction to HTML - University of South Florida
An Introduction to HTML
1
Objectives
You will be able to
Create a simple web page in HTML using a plain text
editor.
Publish your page on the web so that it can be seen
anywhere in the world.
Use character entities to include special characters in
your page.
Use an on-line validator to check your HTML files.
2
The Web’s Rulebooks
The web was created to permit users to view
documents.
HTTP -- Hypertext Transport Protocol
Defines rules for communication between a
browser and a web server.
Web applications must live within these rules.
HTML – Hypertext Markup Language
Defines rules for formatting a document that a
browser will display.
Web applications produce their output in this form.
3
HTML
HTML defines the content of a web page.
Originally included “mark up” for page layout
and appearance.
Better handled by CSS today.
HTML defines page structure.
Cascading Style Sheets
The Document Object Model
Permits programatic modification
The HTML document itself is plain ASCII text.
4
Cascading Style Sheets
CSS conveys the author’s intentions about
how the content of a web page should be
displayed.
Instructions analogous to a (human)
editor’s instructions to a typesetter.
Center this text.
Use a large sans sarif font here.
Make this bold.
etc.
Can be included within an HTML document or can be a
separate file.
ASCII text
5
Standards
HTML standards are developed by the
World Wide Web Consortium, W3C.
http://www.w3.org/
The original HTML standard was very
permissive.
Lots of room for interpretation.
Tolerant of errors and omissions.
6
HTML Versions
HTML Version 4.01 is current.
XHTML is a version of HTML that follows
the stricter rules of XML.
Can be validated.
Better cross browser compatibility.
Version 1.1 is mainstream.
Version 2 is under development.
Abandoned by W3C in 2009.
We will normally use XHTML 1.1
7
HTML Versions
HTML 5 will be the successor to 4.01
Standards work is ongoing.
http://en.wikipedia.org/wiki/HTML5
Probably will not change much.
Now supported to various degrees by all
widely used browsers:
Chrome
Firefox
Safari
Opera
Internet Explorer 9
8
HTML5
Built-in support for
Video
Audio
Drawing
Local Storage
Improved separation of presentation from
semantics
CSS3 for presentation
9
How to Produce a Web Page
You can use any text editor to produce your
HTML file.
The initial examples in this presentation
were done with NotePad.
There are many fancy WYSIWYG editors for HTML.
Avoid these while learning HTML.
Use a plain text editor and work directly with the HTML.
Visual Studio also has an option to edit HTML files.
Works either way: text (language aware) or WYSIWYG.
10
How the Page Layout is Determined
Browsers interpret the markup as they see fit.
Author has influence over the resulting
layout, but generally not absolute control
The user also influences the layout.
Resize window.
Set display resolution.
Set font size.
Different browsers may render a given page
in different ways.
11
HTML Tags
HTML defines a number of tags which authors
can use to mark up a document.
HTML tags are enclosed in angle brackets.
Most appear in begin-end pairs
Examples:
<title>This appears at the top of the page </title>
<div> A block of text </div>
<p> Beginning of a new paragraph. ... </p>
<i> Some text in italics </i>
HTML5 discourages use of tags to specify
appearance.
12
HTML Tags
Multiple tags can apply to the same text, but they
must be properly nested.
Style sheets now are a better way to do most of
what was once done with tags.
13
Some Individual Tags
Some tags stand alone.
<br /> Break (Force new line.)
New lines, and other white space, in the HTML
document are normally not significant. The browser will
wrap the text according to the size of the window.
<hr /> Horizontal Rule (Line across page.)
The / takes the place of the end tag.
Can generally be used when there is no text between
the start tag and the end tag.
Not necessary in old HTML, but required for valid
XHTML.
Optional in HTML5.
14
Case Sensitivity
Tags are not case sensitive.
But upper case is considered invalid in XHTML.
Recommendatation:
Use lower case.
The Visual Studio HTML editor will help.
15
15
A Very Simple Web Page
<html>
<head>
<title> A very simple web page</title>
</head>
<body>
<p><b>This is a very simple HTML page!</b></p>
<p>I can write in <i>Italic</i> or <b>Bold</b></p>
<hr />
<p><b><i>Or I can write in both</i></b></p>
<hr />
</body>
</html>
Note nesting
16
How to View Your Web Page
While developing a web page, you need
to view it frequently with a browser.
You can simply point your browser to a
local file by typing the pathname in the
URL window.
Or double click on the file name or icon.
Click the Reload button to get the latest
version.
Beware of cached copies of your page
during development!
17
Simple Example in Internet Explorer
Title
Page was displayed
from a local file.
18
How to Publish Your Page on the Web
If you have a CSE account on grad you already
have a web server.
Create a directory called public.html in your home
directory on grad.cse.usf.edu.
Any .html file that you put into the directory will be
accessible on the web as
http://www.cse.usf.edu/~yourUserName/fileName.html
19
How to Publish Your Page on the Web
Use an SSH client such as WinSCP to access your
files on grad.
20
Using WinSCP
You can drag and drop files to and from the WinSCP window
as if it were a normal folder window on your PC.
21
The Simple Page from a Web Server
URL used to
retrieve the page
from the server
22
Another Server
You can also put html pages on Circe.
23
Circe as a Web Server
In your home directory, create a directory
called public_html
Permissions: 755
Note the underscore in the directory name.
Different from grad, which uses public.html
URL is http://rc.usf.edu/~username/filename
24
Simple Page on Circe
25
Headings
<h1>A Really Big Heading</h1>
<h2>Next level down</h2>
...
<h6>A Very Small Heading</h6>
26
Headings
<html>
<title> A Page with Headings </title>
<h1>A Really Big Heading</h1>
Some text to appear below a really big heading.
<h2>Next level down</h2>
Some text to appear below a smaller heading.
<h6>A Very Small Heading</h6>
Some text to appear below a very small heading.
</html>
27
Page in Chrome
28
Miscellaneous Tips
What if I want to put some space into my text?
Ordinarily white space in an HTML document is
ignored except for producing a single space.
To force the browser to leave a space use
(nonbreaking space)
& is a form of escape character in HTML.
Everything from the & to the ; is interpreted as a
character entity rather than as text to be displayed.
There are many such character entities.
Refer to a book or web tutorial on HTML to get the
full list.
29
Miscellaneous Tips
But what if I want an & to appear on my
page?
Write &
(The character entity for &)
30
Example of Nonbreaking Spaces
<html>
<head>
<title>A page with nonbreaking spaces </title >
</head>
<body>
<h3>A Discourse on Nonbreaking Spaces</h3>
<p>
This paragraph is indented five spaces using
the &nbsp; command. The lines will wrap
wherever the browser chooses, depending primarily
on the current window size.
</p>
<p>
If the user resizes the window, the text will be
laid out again using the new window size, and
the line breaks will ofen be different. Notice
that this paragraph had five ASCII spaces at the
start, but they did not cause the paragraph to
be indented.</p>
</body>
</html>
31
Page in Firefox
Nonbreaking
spaces
Ampersand
within text
No indentation
for space
characters
32
Structure of a Web Page
So far we have been cheating
Leaving out some of the standard parts of a web
page as specified by the HTML standard.
Web browsers typically do the best they
can with whatever they are given.
To improve the odds of your page looking
as you intend on various browsers, you
should strictly adhere to the standard.
The Visual Studio HTML editor makes this easier.
33
Using Visual Studio for HTML
From the File menu, select New > File.
Then in the dialog box that pops up
Select Category: Web.
Select Template: HTML Page.
Click Open.
34
Using Visual Studio for HTML
35
Using Visual Studio for HTML
Select the Source tab to see the HTML.
36
The HTML Template
Initial lines identify the standard which this page will adhere to.
This is a valid XML file as well as valid HTML.
37
Structure of the Page
38
hello.html
39
Save As hello.html
40
Save As hello.html
41
hello.html in Chrome
42
DOCTYPE for HTML5
No change in appearance in browser.
43
Using a Validator
W3C has a validator on line.
Use to check that your page is valid
HTML.
Improve the odds that it will work as
expected with various browsers.
http://validator.w3.org
44
Revisit hello.html
45
W3C Validation Service
Click on “Choose File” and navigate to the HTML file.
46
Select File
47
Validate
Click here
48
Validation Result
49
Delete <html> tag
The <html> ... </html> tag is officially
optional HTML5.
Required in order to be valid XML.
Never actually required by browsers.
50
No <html> tag
No change in appearance in browser.
51
Validate Again
52
Validation Result
53
Warnings
54
HTML Meta Commands
Permit you to add information about the
page which is not to be displayed.
Most is intended to be used by search
engines.
Try to improve page rank in search results.
55
Example: cnn.com
56
The Refresh Meta Command
You can tell the browser to reload the same
page, or to load a different page, after a
certain amount of time.
This is a way to update the user's screen
without requiring an input from the user.
<meta http-equiv="refresh"
content="1;URL=http://www.csee.usf.edu/~turnerr/flop.html" />
How long to hold
page, in seconds
Where to get next page.
57
The Refresh Meta Command
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Flip</title>
<meta http-equiv="refresh"
content="1;URL=http://www.csee.usf.edu/~turnerr/flop.html" />
</head>
<body>
<div>
This is page
<p style="font-family:Arial; font-size:xx-large; color: red">
Flip
</p>
</div>
</body>
</html>
Demo: http://www.cse.usf.edu/~turnerr/flip.html
58
Assignment
(Not submitted or graded)
Do the examples from this class for
yourself.
Publish a page on one of your available
websites and view it with a browser.
End of Presentation
59