html: hypertext markup languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · the world...

HTML: HyperText Markup Language

Gregory D. Weber

INFO-I320

Introduction

I What is a web browser?I What is HTML?

Reading

I Raggett, Getting Started with HTML

Recommended:

I Raggett, Add a Touch of StyleI Raggett, Advanced HTML

The World Wide Web, the Internet, and Intranets

I Hypertext: text documents that link to each other or to theirparts

I Fundamental technologies of the WWW

I Markup languages for hypertextI Protocols for serving hypertext (HTTP, HTTPS)I HTTP servers and clientsI Arrangements for clients to interact with server-side processes

I WWW is just one part of the InternetI Intranets: private networks based on Internet protocols

Markup Languages

I Use tags to annotate text of a document

I Descriptive markup specifies structure and contentI Procedural markup specifies presentation and style

HTML

I Combines descriptive and procedural markupI Invented by Tim Berners-LeeI Derives from SGML

Example?

If needed, develop a short example with html, head, title, body,paragraphs, a list, and a href elements . . .

Separating Content and Presentation

I With experience, Berners-Lee realized it is better to separatestyle from content

I XML and purified HTML for contentI CSS for presentation style

XML: eXtensible Markup Language

I Meta-language for creating markup languagesI Syntactically like HTML, but create your own tagsI Intended as basis of the semantic web

I Documents label their contentI Easily accessed by programs

XML Applilcations

I Languages based on XMLI Examples:

I MathMLI Scalable Vector Graphics (SVG)I OpenOffice and newer Microsoft Office file formats

I Excludes stylistic markup

I May link to CSS style sheet

CSS: Cascading Style Sheets

I Language for writing style rules

I Background of tables should be redI Paragraphs use 12 point Helvetica font

I Provides guidelines for presenting an XML or HTMLdocument

XHTML

I Reformulation of HTML 4 based on XMLI Goals:

I Separate style from contentI Regular syntax, easily and reliably processed by programs

Differences between XHTML and HTML

Most differences stem from XHTML’s being an XML application

Difference 1

All tags must be paired.

I saw a rabbit.

Not:

I saw a rabbit.

Empty elements: abbreviates

Difference 2

Elements must be properly nested.

HTML:

Mary had a little lamb;

its fleece was white as snow.

And everywhere that Mary went,

the lamb was sure to go.

XHTML:

Mary had a little lamb;

its fleece was white as snow.

And everywhere that Mary went,

the lamb was sure to go.

Difference 3

XML is case-sensitive; all tags are lower-case.

I <html>, not <HTML>.

Difference 4

All tag attribute values must be enclosed in quotation marks.

<img src="mypicture.png">

Not:

<img src=mypicture.png>

Difference 5

Elements and attributes that expressed style rather than structureare gone.

I font

I i (italic letters)I b (boldface); andI table border attribute

Those are now specified in CSS.

These remain but may be differently rendered:

I em (emphasis)I strong (strong emphasis)

Difference 6

Name attributes are mostly replaced with id attributes; anyelement can have an id.

HTML:

Jack told a <a href="#story">story about a fox.

...

<a name="story">The clever fox wagged its tail.

</a>

XHTML:

Jack told a <a href="#story">story about a fox.

...

The clever fox wagged its tail.

Difference 7

Begin document with XML declaration, DOCTYPE declaration,and XML namespace declaration.

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Not just:

<html>

HTML 5

I Now in development as successor of both HTML 4 andXHTML

I Will allow but not require XML

HTML 5 Declarations

I No XML declaration

I Very simple doctype declaration:

<!DOCTYPE html>

I Encoding declaration in a <meta> element:

<head>

<meta charset="utf-8" />

<title>Document Title</title>

...

</head>

A Minimal HTML 5 Document

(Using UTF-8 character encoding)

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>Insert Title</title>

</head>

<body>

Insert content

</body>

</html>

Reference

I Mark Pilgrim et al., Dive into HTML5

I http://diveintohtml5.info/

I Draft standard:

I W3C Editor’s Draft:http://dev.w3.org/html5/spec/spec.html

I WHATWG’s Living Standard: http://whatwg.org/html5

http://diveintohtml5.info/

http://dev.w3.org/html5/spec/spec.html

http://whatwg.org/html5