HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World...
Transcript of HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World...
![Page 1: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/1.jpg)
HTML: HyperText Markup Language
Gregory D. Weber
INFO-I320
![Page 2: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/2.jpg)
Introduction
I What is a web browser?I What is HTML?
![Page 3: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/3.jpg)
Reading
I Raggett, Getting Started with HTML
Recommended:
I Raggett, Add a Touch of StyleI Raggett, Advanced HTML
![Page 4: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/4.jpg)
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
![Page 5: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/5.jpg)
Markup Languages
I Use tags to annotate text of a document
I Descriptive markup specifies structure and contentI Procedural markup specifies presentation and style
![Page 6: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/6.jpg)
HTML
I Combines descriptive and procedural markupI Invented by Tim Berners-LeeI Derives from SGML
![Page 7: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/7.jpg)
Example?
If needed, develop a short example with html, head, title, body,paragraphs, a list, and a href elements . . .
![Page 8: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/8.jpg)
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
![Page 9: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/9.jpg)
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
![Page 10: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/10.jpg)
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
![Page 11: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/11.jpg)
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
![Page 12: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/12.jpg)
XHTML
I Reformulation of HTML 4 based on XMLI Goals:
I Separate style from contentI Regular syntax, easily and reliably processed by programs
![Page 13: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/13.jpg)
Differences between XHTML and HTML
Most differences stem from XHTML’s being an XML application
![Page 14: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/14.jpg)
Difference 1
All tags must be paired.
<p>I saw a rabbit.</p>
Not:
<p>I saw a rabbit.
Empty elements: <br/> abbreviates <br></br>
![Page 15: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/15.jpg)
Difference 2
Elements must be properly nested.
HTML:
<p>Mary had a little lamb;
its fleece was <em>white as snow.</p>
<p>And everywhere</em> that Mary went,
the lamb was sure to go.</p>
XHTML:
<p>Mary had a little lamb;
its fleece was <em>white as snow.</em></p>
<p><em>And everywhere</em> that Mary went,
the lamb was sure to go.</p>
![Page 16: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/16.jpg)
Difference 3
XML is case-sensitive; all tags are lower-case.
I <html>, not <HTML>.
![Page 17: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/17.jpg)
Difference 4
All tag attribute values must be enclosed in quotation marks.
<img src="mypicture.png">
Not:
<img src=mypicture.png>
![Page 18: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/18.jpg)
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)
![Page 19: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/19.jpg)
Difference 6
Name attributes are mostly replaced with id attributes; anyelement can have an id.
HTML:
<p>Jack told a <a href="#story">story about a fox.</p>
...
<a name="story"><p>The clever fox wagged its tail.</p>
</a>
XHTML:
<p>Jack told a <a href="#story">story about a fox.</p>
...
<p id="story">The clever fox wagged its tail.</p>
![Page 20: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/20.jpg)
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>
![Page 21: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/21.jpg)
HTML 5
I Now in development as successor of both HTML 4 andXHTML
I Will allow but not require XML
![Page 22: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/22.jpg)
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>
![Page 23: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/23.jpg)
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>
![Page 24: HTML: HyperText Markup Languagemypage.iu.edu/~gdweber/info/i320/slides/html-slides.pdf · The World Wide Web, the Internet, and Intranets I Hypertext: text documents that link to](https://reader035.fdocuments.net/reader035/viewer/2022070720/5ee0292bad6a402d666b6610/html5/thumbnails/24.jpg)
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