Copyright © 1999-2022 Ellis Horowitz HTML Basics 1

What is HTML?
• HTML stands for Hypertext Markup Language

Copyright By PowCoder代写 加微信 powcoder

– It is a markup language, which means it is used for processing, definition, and display of data
• HTML is a tag-based language, similar to XML – HTML tags are already defined though
Copyright © 1999-2022 Ellis Horowitz HTML Basics 2

What is HTML?(cont’d)
• Hypertext Markup Language (HTML) is a language in which one can describe:
– The display and format of text
– The display of graphics
– Pointers to other html files
– Pointers to files containing graphics,
digitized video and sound
– Forms that capture information from the viewer
• HTML was developed by -Lee of CERN around 1990
• HTML is understood by WWW browsers—e.g., Internet Explorer, Firefox, Chrome, Safari, many others — which interpret and display the output to the viewer
Copyright © 1999-2022 Ellis Horowitz HTML Basics 3

First Web Page
• The first web page ever displayed by – Lee at CERN
Copyright © 1999-2022 Ellis Horowitz HTML Basics 4

First Web Site
• The original web site of the “WWW Project” is still available at CERN
• http://info.cern.ch/hypertext/WWW/TheProject.html
• Includes documentation on the original browsers and servers
Copyright © 1999-2022 Ellis Horowitz HTML Basics 5

World Wide Web Motivation
• Originally created in 1989 at CERN (the European Organization for Nuclear Research) for sharing research in a faster manner than journal publications allowed
Copyright © 1999-2022 Ellis Horowitz HTML Basics 6

Text Browser – Lynx
• Developed by Distributed Computing Group within Academic Computing Services of the University of Kansas
• Team of students and staff with initial release in 1992
• https://en.wikipedia.org/wiki/Lynx_(web_browser)
Copyright © 1999-2022 Ellis Horowitz HTML Basics 7

First Graphical Browser – NCSA Mosaic
• Developed at the National Center for Supercomputing Applications (NCSA) at the University of Illinois at Urbana–Champaign
• , lead student developer. NCSA released it in 1993
• http://www.ncsa.illinois.edu/
Copyright © 1999-2022 Ellis Horowitz HTML Basics 8

First Commercial Browser – Netscape
• Netscape Navigator was a proprietary web browser,
and the original browser of the Netscape line
• Co-written by , with initial release in Dec. 1994
• http://home.mcom.com
Copyright © 1999-2022 Ellis Horowitz HTML Basics 9

First Free Commercial Browser – IE
• Microsoft Internet Explorer (IE) killed Netscape Navigator as it was bundled with Windows 95
• Licensed from NCSA, with initial release in August 1995
• https://microsoft.com/ie
Copyright © 1999-2022 Ellis Horowitz HTML Basics 10

Web Browsers Timeline
http://en.wikipedia.org/wiki/List_of_web_browsers
Copyright © 1999-2022 Ellis Horowitz HTML Basics 11

Versions of HTML
• Version 0, 1990, was the original, minimum set of HTML
• Version 1 adds highlighting and images
• Version 2, November 1995, all V.0 and V.1, plus forms
• Version 3.2, January 1997, released by W3CW, tables
• HTML 4.01, December 1999 Recommendation: http://www.w3.org/TR/html401/
• HTML5, October 2014 Recommendation, vocabulary and APIs: http://www.w3.org/TR/html5/
• HTML5, December 2017 HTML 5.2 Recommendation: https://www.w3.org/TR/html52/
• HTML Living Standard, December 2019: https://html.spec.whatwg.org
• W3C and WHATWG Agreement

W3C and the WHATWG signed an agreement to collaborate on a single version of HTML and DOM

• “W3C stops independent publishing of a designated list of specifications related to HTML and DOM and instead will work to take WHATWG Review Drafts to W3C Recommendations“
NOTE: some of the examples shown here are extracted from the HTML4.0 specification. This document is copyrighted according to: “Copyright © World Wide Web Consortium. All Rights Reserved. http://www.w3.org/Consortium/Legal/”
Copyright © 1999-2022 Ellis Horowitz HTML Basics 12

Elements, Tags and Attributes
• An HTML file contains Elements, Tags and Attributes
• HTML Element
– Basic HTML node that adds semantics
– Most Elements have a Start Tag, an End tag and content in between
• HTML Tag
– Composed by the name of the Element surrounded by angle brackets
– End Tag has a slash after the opening angle bracket (required in HTML5)
• Attribute
– Specified inside Start Tag
– Controls the element behavior
Copyright © 1999-2022 Ellis Horowitz HTML Basics 13

My First HTML
1
2
4
5
6
7
8 Hello CSCI 571!
9
10
Copyright © 1999-2022 Ellis Horowitz
HTML Basics 14

General Structure
• HTML documents have a head and body – head should contain a title
– body may have paragraphs
• A leading line indicates which version of HTML this document conforms to

The nine planets of the solar system are…
Copyright © 1999-2022 Ellis Horowitz HTML Basics 15

Adding Some Markup

The nine planets of the solar system are mercury, venus, earth, mars, jupiter, saturn, uranus, neptune and pluto.

The very nearest star is about 7,000 times farther away than pluto is to our sun.

Copyright © 1999-2022 Ellis Horowitz HTML Basics 18

Browsers Are Tolerant
• Browsers follow the rule of being tolerant of mistakes in the input
– They ignore markup they don’t understand
• IE, Edge, Safari, Firefox, Chrome are tolerant
– They do not insist that the HTML document begin and end with
– and/or tags are not required
– But there is no guarantee that this behavior will be the same for all browsers
Copyright © 1999-2022 Ellis Horowitz HTML Basics 19

Browsers are Tolerant (examples)
• Suppose the entire document is one line, such as:
Text placed between HEAD markers is not normally displayed.
Firefox Chrome Internet Explorer
Copyright © 1999-2022 Ellis Horowitz HTML Basics 20

HTML Elements
• Each element consists of a start tag, content, and an end tag
• E.g., some text
• A slash (/) after the “<“ indicates an end tag • Some elements do not require end tags, e.g.,

paragraph tag
• Some elements do not require content, e.g.,

---

horizontal rule tag places a straight line across
Copyright © 1999-2022 Ellis Horowitz HTML Basics 21

Attributes
• Elements may have parameters, called attributes
• Attributes are placed in the start tag before the final “>”
• Attributes have the form name=value E.g.,

is the first heading tag

Start of Chapter 1
• Attribute values are often enclosed in quotes, either double or single
• Quotes are not required when the value contains only letters, digits, hyphens, and periods.
• Attribute names are case insensitive, but not necessarily attribute values
Copyright © 1999-2022 Ellis Horowitz HTML Basics 22

Comments in HTML
• Comments start with
and end with
• Comments cannot be nested
– White space is permitted between the — and the closing angle bracket, >
– It is not permitted between the opening angle bracket, exclamation point, and the —
• E.g.

But this will be displayed
Copyright © 1999-2022 Ellis Horowitz
HTML Basics 23

Complete Set of tag attributes
• id, assigns a unique name to an element
e.g.,

This is my starting paragraph…
• class, assigns one or more names to an element
• lang, a language code that identifies a natural language spoken, written, or otherwise used
• title, a short description of the body
• style, inline display information
• bgcolor, background color
• Events include
onload, onunload onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress onkeydown, onkeyup
• Deprecated elements in include:
background, text, link, vlink, alink
See http://www.w3.org/TR/html4/struct/global.html#edef-BODY
Copyright © 1999-2022 Ellis Horowitz HTML Basics 24

Using Style Sheets
• Deprecated example



… document body…
• Using Style Sheets


… document body…
Copyright © 1999-2022 Ellis Horowitz
HTML Basics 25

Composing HTML
• Conventional editors let you compose HTML directly – e.g., TextEdit,emacs, vi, NotePad, TextPad, etc. – use the tools when you are writing HTML directly
• Word Processors include a File SaveAs option which saves your document in HTML format
– e.g., Microsoft Word
– Do not use!
• There are several free HTML-specific editors, e.g.
– Brackets, http://brackets.io
– Visual Studio Code, https://code.visualstudio.com/
• There are several commercial HTML/CSS suites, e.g. – Adobe Dreamweaver CC (Creative Cloud subscription)
• For a complete list see http://en.wikipedia.org/wiki/List_of_HTML_editors
Copyright © 1999-2022 Ellis Horowitz HTML Basics 26

HTML Headings
• Heading tags should be used for different levels in a document
– The size and look can be changed with CSS, so don’t use these tags solely to change the size of the font

Hello CSCI 571!

Web Technologies

Prof. Papa

Headings are cool

Copyright © 1999-2022 Ellis Horowitz
HTML Basics 27

HTML Line Breaks
• Paragraph tags separate logical display blocks • Line breaks are used for formatting

Hello CSCI 571!

This class will cover
web technologies.

Copyright © 1999-2022 Ellis Horowitz HTML Basics 28

HTML Lists
• HTML lists are very common in everyday web development. • Perhaps the most used are
– unordered lists (

) and
– ordered lists (
)
• but there are a few other list options
– definition list (

), and
– the menu (

) element,
– both were deprecated in HTML4, but reintroduced in HTML5
• All lists follow the same pattern: –
– – – –
Copyright © 1999-2022 Ellis Horowitz
HTML Basics 29

HTML Definition Lists


light year

the distance light travels
in one year


asteroids

are small, irregular shaped
objects, mostly occurring between Mars and
Copyright © 1999-2022 Ellis Horowitz HTML Basics 30

HTML Unordered Lists


planets and moons




• deimos
  
  • orbit: 23,459 km from Mars
    
  • diameter: 12.6 km
    
  • mass: 1.8e15 kg
    
  • phobos
    
  • Jupiter
    • callisto
    • europa
    • ganymede
    • io
  
  Copyright © 1999-2022 Ellis Horowitz HTML Basics 31

  Browser Output of Unordered Lists
  Copyright © 1999-2022 Ellis Horowitz HTML Basics 32

  HTML Ordered Lists
  • Has the general form
  

  1. first list item
  2. second list item
  
  • START attribute can initialize the sequence to a number other than 1
  • TYPE attribute can be used to select the numbering style
  2, 3, … a,b,c,…
  A,B,C,… i, ii, iii I, II, III,
  arabic 1, lower alpha
  upper alpha
  lower roman
  upper roman
  type attribute is deprecated, and list
  • However, the
  styles should be handled through style sheets, e.g.
  Copyright © 1999-2022 Ellis Horowitz HTML Basics 33

  Example – Ordered Lists
  

  Planets and Moons as Ordered Lists

  
  
  1. deimos
     
     1. orbit: 23,459 km from Mars
        
     2. diameter: 12.6 km
        
     3. mass: 1.8e15 kg
        
     4. phobos
        
     5. Jupiter
        
        1. callisto
        2. europa
        3. ganymede
        4. io
     
     Copyright © 1999-2022 Ellis Horowitz HTML Basics 34

     Browser Output
     Copyright © 1999-2022 Ellis Horowitz HTML Basics 35

     HTML Table Elements
     •

     , a tag used to define a table
     • or , tags that identify a table header cell and table data cell
     – Headers are the same as data except they use bold font and are centered
     • , a tag that identifies a container for a row of table cells
     – Same attributes as TH and TD
     Copyright © 1999-2022 Ellis Horowitz HTML Basics 36

     Facts about Tables
     • Table cells can be text, lists, images, forms, figures, or even tables
     • Table headers are typically rendered in boldface, and table data is typically rendered in the regular font and point size
     • A table has an optional caption followed by rows
     • Table rows are said to contain table headers and table data
     • The browser will set the number of columns to be the greatest number of columns in all of the rows
     • Blank cells are used to fill extra columns in the rows
     Copyright © 1999-2022 Ellis Horowitz HTML Basics 37

     Example – 3 rows x 2 cols
     
     

     Table: 3 Rows 2 Cols

     
     

     , a tag to label a table
     – Its attributes are ALIGN = top, bottom, left, right
     •

     
     
     
     
     

     MIME Content-Types

     application/postscript	Postscript
     application/rtf	MS Rich Text Format
     application/x-pdf	Adobe Acrobat Format

     
     Copyright © 1999-2022 Ellis Horowitz HTML Basics 38

     Browser Output
     Copyright © 1999-2022 Ellis Horowitz HTML Basics 39

     Table Example Rowspan colspan
     
     
     

     Table: RowSpan and ColSpan

     
     
     
     
     
     
     
     

     MIME Content-Types

     Items	Types and Their Meaning
     	application/postscript	Postscript
     	application/rtf	MS Rich Text Format
     	application/x-pdf	Adobe Acrobat Format

     
     Copyright © 1999-2022 Ellis Horowitz HTML Basics 40

     Browser Output
     Copyright © 1999-2022 Ellis Horowitz HTML Basics 41

     Arranging Data in a Table
     • Originally data in a table could be manipulated using attributes: align left, align right, align center, valign top, valign middle and valign bottom
     valign top valign center
     valign right
     • the above attributes are deprecated in HTML5 in favor of Cascading Style Sheets (CSS) settings
     • What does “deprecated” mean?
     • see the slides in the lecture on CSS
     Copyright © 1999-2022 Ellis Horowitz HTML Basics 42

     HTML Character Set
     • HTML uses the Universal Character Set (UCS), defined in [ISO10646]. This standard defines a repertoire of thousands of characters used by communities all over the world.
     – Its latest specification (Unicode 14.0.0), dated September 14, 2021, can be found at
     https://home.unicode.org/announcing-the-unicode- standard-version-14-0/
     – Includes Unicode Emoji (with skin tone diversity)
     • HTML must also specify how characters are encoded during transmission.
     • Commonly used character encodings on the Web include – ISO-8859-1 (also referred to as “Latin-1”,
     – ISO-8859-5 (which supports Cyrillic),
     • A browser is informed of the encoding by a line Content-Type: text/html; charset=EUC-JP
     Copyright © 1999-2022 Ellis Horowitz HTML Basics 43

     Character references
     • Character references in HTML may appear in two forms:
     – Numeric character references (either decimal or hexadecimal)
     • å (in decimal) represents the letter “a” with a small circle above it (used, for example, in Norwegian).
     • < represents left angle bracket
     • > represents right angle bracket
     • & represents ampersand sign
     • " represents double quote
     – Character entity references.
     • “<” represents the < sign. • ">" represents the > sign. • “&” represents the & sign. • “" represents the ” mark.
     Copyright © 1999-2022 Ellis Horowitz
     HTML Basics 44

     Example – Character References
     
     An unordered list in HTML starts with <UL>, ends with </UL> and every list item should begin with <LI>. The </LI> is optional. For an attribute such as START=”5" the double quotes are optional.
     
     Copyright © 1999-2022 Ellis Horowitz HTML Basics 45

     HTML Hyperlinks (Anchors)
     • Hyperlinks are the “novel idea” introduced by -Lee
     • Implemented in HTML with Anchor Tags
     • An anchor is a way to designate a link to another
     document or to a specific place in the same document
     • Begins with and ends with
     • The link location is given by the “required” HREF attribute (Hypertext REFerence); e.g.,
     Class Home Page
     • Hypertext links are displayed using underlining, color, and/or highlighting
     – Depends on the browser defaults or style settings – Once a link is taken, it should change color
     – HREF, stands for Hypertext REFerence
     • Link destination can be relative or absolute
     Copyright © 1999-2022 Ellis Horowitz HTML Basics 46

     HTML Hyperlinks (cont’d)
     • Anchor tags allow one page to link to another page
     

     Hello CSCI 571 Class!

     Copyright © 1999-2022 Ellis Horowitz HTML Basics 47

     Syntax of Anchor Names
     • An anchor name is the value of either the name or id attribute when used in the context of anchors.
     • Anchor names must observe the following rules:
     – Uniqueness: Anchor names must be unique within a document. Anchor names that differ only in case may not appear in the same document.
     – String matching: Comparisons between fragment identifiers and anchor names must be done by exact (case-sensitive) match.
     • See https://developer.mozilla.org/en- US/docs/Web/HTML/Element/a
     Copyright © 1999-2022 Ellis Horowitz HTML Basics 48

     Defining Anchors Using the id Attribute
     • The id attribute may be used to create an anchor at the start tag of any element (including the A element).
     • Example: the id attribute places an anchor in an H2 element.
     You may read more about this in
     Section Two.
     . . . more text . . .
     

     Section Two

     
     . . . more text
     

     Please refer to Section Two above for more details.
     • The id and name attributes share the same name space. They cannot both define an anchor with the same name in the same document. Try this example in IE and Firefox:
     

     …
     …more document…
     

     …
     NOTE: browsers work differently
     Copyright © 1999-2022 Ellis Horowitz
     HTML Basics 49

     Examples of Anchors
     • a file in the same directory and same domain as the current page

     程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com