HTML Basics - CSNetwork Services
Download
Report
Transcript HTML Basics - CSNetwork Services
Introduction to Web Site Development
Lecture 1:
Web Servers, Web Sites and an
Introduction to HTML
Department of Computer Science
California State University, Los Angeles
Course Topics
Web Servers
HTML
CSS
JavaScript
HTML DOM
DHTML (Dynamic HTML)
Web Servers
A Web Server is a computer program that:
Is bound to a network port
HTTP uses port 80
HTTPS uses port 443
Listens on that network port
Accepts and declines connections on that port
Processes IP requests from clients
Sends IP responses back to the clients
Web server = HTTP Daemon
Internet/Transfer Protocols
An internet protocol is a specification that defines
what all of the valid requests and responses are for
communication and data transfer between two
computers
Examples
HTTP
GET, HEAD, POST, DELETE
NNTP
GROUP, LIST, ARTICLE, HEAD, NEXT, QUIT
HTTP
HTTP RFC1945 (1990)
HyperText Transfer Protocol
Internet protocol of the World Wide Web
HTTP RFC2616 (1999)
Latest HTTP specification
HTTPS RFC 2818 (2000)
HTTP over SSL
HTTP Request and Response
Request (from client to server)
GET /index.html HTTP/1.0
Response (from server to client)
HTTP/1.1 200 OK
Date: Mon, 21 Sep 2009 20:36:40 GMT
Content-Length: 9490
Content-Type: text/html; charset=utf-8
HTTP/1.1 404 Not Found
Date: Mon, 21 Sep 2009 20:44:59 GMT
Content-Type: text/html; charset=utf-8
HTML
HTML (1991)
HyperText Markup Language
Publishing language of the World Wide Web
Tim Berners-Lee
HTML 4.01 (1999)
Latest HTML specification
HTML 5 (2010 – 2020)
Upcoming HTML draft specification
Replaces HTML4, XHTML1, and DOM2 HTML
HTML Syntax
An HTML document consists of:
A document type, followed by a tree of HTML
elements
An HTML element consists of:
A start tag (i.e. <BODY>)
An end tag (i.e. </BODY>)
Some elements have optional start and end tags
Zero or more attributes defined within its start tag
Content
Elements Versus Tags
What’s the difference between an HTML element
and an HTML tag?
Loosely, a tag is an HTML element name with
brackets around it.
An HTML element does not refer to a specific
instance of that element
Example: HTML’s P (paragraph) element.
An HTML tag refers to a specific instance of an
element used in an HTML file
Example: <p>Here is some text.</p>
HTML Example
Example
<!DOCTYPE HTML>
<HTML>
<HEAD><TITLE>Hello HTML!</TITLE></HEAD>
<BODY>
<P>Hello HTML!</P>
<P>This is HTML Syntax!</P>
</BODY>
</HTML>
XHTML
XHTML (2000)
Extensible HyperText Markup Language
XHTML 1.1 (2002)
Latest XHTML specification
XHTML 5 (2010 – 2020)
Part of upcoming HTML 5 specification
Also called the XML-Syntax
XHTML Example
Example
<?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">
<head><title>Hello HTML!</title></head>
<body><p>Hello HTML!</p>
<p>This is XML Syntax!</p>
</body></html>
HTML Versus XHTML
HTML 5 specification is intended to replace
XHTML 1.1
HTML 5 supports the XML-syntax.
HTML 5 supports XML-syntax self-closing tags.
<br />, <hr />, etc.
HTML 5 allows you to use the syntax you are most
comfortable with.
HTML 5 has case insensitive elements; XHTML
elements must be lower case.
Simple HTML Elements
The Root Element
HTML
Metadata Elements
HEAD
TITLE
META
Sectioning Elements
BODY
H1, H2, H3, H4, H5, H6
Simple HTML Elements
Grouping Content
P
BR
HR
Text
EM, I, STRONG, B
SMALL
SUB, SUP
HTML 5 Content Types
HTML 5 Content Types
Flow Content (Block)
Any HTML element that can go inside (be any
descendent of) the BODY element.
Phrasing Content (Inline)
Any HTML element that can go directly inside (be a
direct descendent of) the P element.
Metadata Content
Any HTML element that can go directly inside the
HEAD element plus any HTML element used to set up
the behavior or presentation of an HTML document.
HTML 5 Content Types
Content types are important to know because they
give you clues as to what is valid HTML and
what is not. For example:
Legal HTML
<P>Hello <I>CS122</I>!</P>
Content of P is PHRASING CONTENT.
Illegal HTML:
<P>Hello <P>CS122</P>!</P>
Content of P contains FLOW CONTENT. ILLEGAL!
HTML Comments
Description
Comments are ignored by the browser and are not
rendered.
Syntax
<!-- Text -->
Requirements
You can read the above link, but it’s kind of
complicated… so just don’t use any of the following
characters in your comment text: <, >, and -
The DOCTYPE
Description:
The DOCTYPE is a mostly useless, but required
header. It is a file header and not an HTML element.
Without it, older browsers that don’t support HTML 5
will render in ‘quirks mode.’
Syntax:
<!DOCTYPE html>
Requirements:
Must be the first thing (that is not a comment) in an
HTML file.
The HTML Element
Description:
The root element, which is the first element in every
HTML document.
Syntax:
<HTML>HEAD + BODY elements</HTML>
Requirements:
Start tag: OPTIONAL
End tag: OPTIONAL
Must come immediately after the document type.
The HEAD Element
Description:
For describing content that is important to the
document, but not part of the body of the document.
Syntax:
<HEAD>Metadata Content</HEAD>
Requirements:
Start tag: OPTIONAL
End tag: OPTIONAL
Must come immediately after the root element.
The TITLE Element
Description:
A textual phrase describing the title of the HTML
document (rendered in captions, tab bars, etc.).
Syntax:
<TITLE>Text</TITLE>
Requirements:
Start tag: REQUIRED
End tag: REQUIRED
Must be a direct descendent of the HEAD element.
The BODY Element
Description:
For describing the visual content (the body) of an
HTML document (paragraphs, images, tables, etc.).
Syntax:
<BODY>Flow Content</BODY>
Requirements:
Start tag: OPTIONAL
End tag: OPTIONAL
Must come immediately after the HEAD element.
The P Element
Description:
For marking paragraphs in bodies of HTML documents.
Syntax:
<P>Phrasing Content</P>
<P>Phrasing Content
Requirements:
Start tag: REQUIRED
End tag: OPTIONAL
Use where flow content is expected.
The BR Element
Description:
For marking line breaks in phrasing content.
Syntax:
Phrasing Content<BR>Phrasing Content
Phrasing Content<BR />Phrasing Content
Requirements:
Start tag: REQUIRED
End tag: FORBIDDEN
Use where phrasing content is expected.
The H1 – H6 Elements
Description:
For marking section headings in HTML documents.
Syntax:
<H1>Phrasing Content</H1>
<H6>Phrasing Content</H6>
Requirements:
Start tag: REQUIRED
End tag: REQUIRED
Use where flow content is expected.
The EM Element
Description:
For marking text emphasis in HTML documents.
Syntax:
<EM>Phrasing Content</EM>
Requirements:
Start tag: REQUIRED
End tag: REQUIRED
Use where phrasing content is expected.
The STRONG Element
Description:
For marking strong text emphasis in HTML documents.
Syntax:
<STRONG>Phrasing Content</STRONG>
Requirements:
Start tag: REQUIRED
End tag: REQUIRED
Use where phrasing content is expected.
The I Element
Description:
For marking italic text in HTML documents.
Syntax:
<I>Phrasing Content</I>
Requirements:
Start tag: REQUIRED
End tag: REQUIRED
Use where phrasing content is expected.
The B Element
Description:
For marking bold text in HTML documents.
Syntax:
<B>Phrasing Content</B>
Requirements:
Start tag: REQUIRED
End tag: REQUIRED
Use where phrasing content is expected.
The SMALL Element
Description:
For marking small text in HTML documents.
Syntax:
<SMALL>Phrasing Content</SMALL>
Requirements:
Start tag: REQUIRED
End tag: REQUIRED
Use where phrasing content is expected.
The SUB Element
Description:
For marking subscript text in HTML documents.
Syntax:
<SUB>Phrasing Content</SUB>
Requirements:
Start tag: REQUIRED
End tag: REQUIRED
Use where phrasing content is expected.
The SUP Element
Description:
For marking superscript text in HTML documents.
Syntax:
<SUP>Phrasing Content</SUP>
Requirements:
Start tag: REQUIRED
End tag: REQUIRED
Use where phrasing content is expected.
The HR Element
Description:
Used to render a horizontal rule (line)
Requirements:
Start Tag: REQUIRED
End Tag: FORBIDDEN
Usage:
Context: Where flow content is expected
Content Model: Empty
The HR Element
Examples:
<HR>
<HR />
The PRE Element
Description:
Used to render preformatted text
Requirements:
Start Tag: REQUIRED
End Tag: REQUIRED
Usage:
Context: Where flow content is expected
Content Model: Phrasing content
The PRE Element
Examples:
<PRE>Preformatted text!</PRE>
<PRE>
Dreamworks Pictures
1000 Flower St.
Glendale, CA 90012
</PRE>