An Introduction to HTML

1
An Introduction to HTML
1
2
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
3
The Webs 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
4
HTML

• HTML defines the content of a web page.
• Originally included mark up for page layout and
  appearance.
• Better handled by CSS today.
• Cascading Style Sheets
• HTML defines page structure.
• The Document Object Model
• Permits programatic modification
• The HTML document itself is plain ASCII text.

5
Cascading Style Sheets

• CSS conveys the authors intentions about how the
  content of a web page should be displayed.
• Instructions analogous to a (human) editors
  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
6
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
7
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
8
HTML Versions

• HTML 5 will be the successor to 4.01
• http//en.wikipedia.org/wiki/HTML5
• Standards work is ongoing.
• Probably will not change much.
• Now supported to various degrees by all widely
  used browsers
• Chrome
• Firefox
• Safari
• Opera
• Internet Explorer 9

8
9
HTML5

• Built-in support for
• Video
• Audio
• Drawing
• Local Storage
• Improved separation of presentation from
  semantics
• CSS3 for presentation

10
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
11
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
12
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
• lttitlegtThis appears at the top of the page
  lt/titlegt
• ltdivgt A block of text lt/divgt
• ltpgt Beginning of a new paragraph. ... lt/pgt
• ltigt Some text in italics lt/igt
• HTML5 discourages use of tags to specify
  appearance.

12
13
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
14
Some Individual Tags

• Some tags stand alone.
• ltbr /gt 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.
• lthr /gt 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
15
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
16
A Very Simple Web Page

• lthtmlgt
• ltheadgt
• lttitlegt A very simple web pagelt/titlegt
• lt/headgt
• ltbodygt
• ltpgtltbgtThis is a very simple HTML page!lt/bgtlt/pgt
• ltpgtI can write in ltigtItaliclt/igt or
  ltbgtBoldlt/bgtlt/pgt
• lthr /gt
• ltpgtltbgtltigtOr I can write in bothlt/igtlt/bgtlt/pgt
• lthr /gt
• lt/bodygt
• lt/htmlgt

16
17
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
18
Simple Example in Internet Explorer
Title
Page was displayed from a local file.
18
19
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.htm
  l

19
20
How to Publish Your Page on the Web

• Use an SSH client such as WinSCP to access your
  files on grad.

20
21
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.
22
The Simple Page from a Web Server
URL used to retrieve the page from the server
22
23
Another Server

• You can also put html pages on Circe.

24
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

25
Simple Page on Circe
26
Headings

• lth1gtA Really Big Headinglt/h1gt
• lth2gtNext level downlt/h2gt
• ...
• lth6gtA Very Small Headinglt/h6gt

26
27
Headings

• lthtmlgt
• lttitlegt A Page with Headings lt/titlegt
• lth1gtA Really Big Headinglt/h1gt
• Some text to appear below a really big heading.
• lth2gtNext level downlt/h2gt
• Some text to appear below a smaller heading.
• lth6gtA Very Small Headinglt/h6gt
• Some text to appear below a very small heading.
• lt/htmlgt

27
28
Page in Chrome
28
29
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 nbsp
  (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
30
Miscellaneous Tips

• But what if I want an to appear on my page?
• Write amp (The character entity for )

30
31
Example of Nonbreaking Spaces

• lthtmlgt
• ltheadgt
• lttitlegtA page with nonbreaking spaces lt/title gt
• lt/headgt
• ltbodygt
• lth3gtA Discourse on Nonbreaking Spaceslt/h3gt
• ltpgt
• nbspnbspnbspnbspnbsp
• This paragraph is indented five spaces using
• the ampnbsp command. The lines will wrap
• wherever the browser chooses, depending primarily
• on the current window size.
• lt/pgt
• ltpgt
• 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

31
32
Page in Firefox
Nonbreaking spaces
Ampersand within text
No indentation for space characters
32
33
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
34
Using Visual Studio for HTML

• From the File menu, select New gt File.
• Then in the dialog box that pops up
• Select Category Web.
• Select Template HTML Page.
• Click Open.

34
35
Using Visual Studio for HTML
35
36
Using Visual Studio for HTML
36
Select the Source tab to see the HTML.
37
The HTML Template
Initial lines identify the standard which this
page will adhere to.
37
This is a valid XML file as well as valid HTML.
38
Structure of the Page
38
39
hello.html
39
40
Save As hello.html
41
Save As hello.html
42
hello.html in Chrome
42
43
DOCTYPE for HTML5
No change in appearance in browser.
44
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

45
Revisit hello.html
46
W3C Validation Service
Click on Choose File and navigate to the HTML
file.
47
Select File
48
Validate
49
Validation Result
50
Delete lthtmlgt tag

• The lthtmlgt ... lt/htmlgt tag is officially optional
  HTML5.
• Required in order to be valid XML.
• Never actually required by browsers.

51
No lthtmlgt tag
No change in appearance in browser.
52
Validate Again
53
Validation Result
54
Warnings
55
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.

56
Example cnn.com
57
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.
• ltmeta http-equiv"refresh"
• content"1URLhttp//www.csee.usf.edu/turnerr/fl
  op.html" /gt

How long to hold page, in seconds
Where to get next page.
57
58
The Refresh Meta Command

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml" gt
• ltheadgt
• lttitlegtFliplt/titlegt
• ltmeta http-equiv"refresh"
• content"1URLhttp//www.csee.usf.edu/turner
  r/flop.html" /gt
• lt/headgt
• ltbodygt
• ltdivgt
• This is page
• ltp style"font-familyArial font-sizexx-large
  color red"gt
• nbspnbspnbspnbspnbspnbspnbspnbspn
  bspnbsp
• Flip
• lt/pgt
• lt/divgt
• lt/bodygt
• lt/htmlgt

58
59
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