Web development and HTML

Weimao Ke, Drexel University, wk@drexel.edu

Outline

• Introduction to web development

• Browser/Server architecture
• Review of HTML for web markup
• HTML validation

|2
The Internet and the Web

3
 The Internet
• Internet: A Network of Networks

4
 The Internet

What does the Internet look like?

- A tree?
- Each branch a domain such as drexel.edu

5
More at: http://www.opte.org/maps/
 The Web and basic concepts
• The Web is part of the Internet
– Transmits data about web documents
• URL: Uniform Resource Locator
– The address of a Web page/document
• (X)HTML: (eXtensible) Hypertext Markup Language
– The language to author Web pages
• Hyperlink: a references to a document on the Web
– A URL with anchor text (label)
– Anchor text: label of a hyperlink reference
URL: http://www.ischool.drexel.edu/faculty/wke Anchor text: Instructor’s Home Page

A hyperlink

6
 Size of the Web
• Number of Web Sites:
– 1991: August 6, Tim Berners-Lee published the Web
– 1994: 700 - 12,000 web sites
– 1991-1997: Explosive growth, at a rate of 850% per year.
– 1998-2001: Rapid growth, at a rate of 150% per year.
– 2002-2006: Maturing growth, at a rate of 25% per year.
– 2007: over 100 million web sites
– 2010: about 200 million web sites (predicted)
http://www.useit.com/alertbox/web-growth.html

7
 Size of the Web
• Number of Web Pages:
– 1991: first pages on the web
– 1997: 200 million pages
– 1998: 800 million pages
– 2005: 11.5 billion pages
– 2007: 22.5 billion pages
– 2010: trillion+ pages
– ++ dynamic pages, (micro) blogs, facebook, …
–…

8
WEB BROWSER/SERVER

9
 Client/Server Architecture
• Client
– “a person served by or utilizing the services of (e.g., a
social agency)”
– a computer in a network that uses the services (as access
to files or shared peripherals) provided by a server
• Server
– “one that serves (e.g., food or drink)”
– a computer in a network that is used to provide services
(as access to files or shared peripherals or the routing of e-
mail) to other computers in the network
http://www.merriam-webster.com/dictionary

10
 Client/Server Interaction
• One server serves multiple clients
• SERVER NETWORK  CLIENT
• Typical interaction:
– A CLIENT sends some REQUEST to a SERVER
– SERVER receives it and RESPONDS (do something)
– SERVER sends results back to CLIENT

11
 Web Browser vs. Web Server
• Browser/Server is Client/Server
• Browser: client to be served with web content
– e.g, Firefox browser on your personal computer
• Web server: to serve web content (pages)
– e.g., www.drexel.edu server provides web pages about
Drexel University
• How do they communicate?
• What happens when you type in a URL or click on a
hyperlink?
– e.g., http://www.drexel.edu/about/mission.aspx

12
 Browser / Server Communication
• What happens after you type in the URL?

13
 Browser/Server Communication
• Parts of a URL (Uniform Resource Locator)
• http://www.drexel.edu/about/mission.aspx
– Protocol: HTTP, or Hypertext Transfer Protocol
• Other protocols: HTTPS (secure), FTP (File Transfer
Protocol), SFTP (Secure FTP), etc.
– Host: www.drexel.edu
– Path: /about/
– File: mission.aspx
• Syntax:
[PROTOCOL]://[HOST]:[PORT]/[PATH]/[FILE]
– http://www.drexel.edu:80/about/mission.aspx 14
 Browser/Server Communication
• http://www.drexel.edu/about/mission.aspx

l . edu Domain Name

e xe
. w w w.dr Server
1
8 . 3 1.11
: 14 4.11
2. IP
Browser 3. File /about/missio
n.aspx
of domain www.dre
xel.edu
5. Pa Drexel
ge co Web Server
ntent
6. Presentation of content (XHTML) i n (X 144.118.31.11
)HTM
L

4. Processes the file

display

/about/mission.aspx 15
HTML: HyperText Markup Language

16
What is HTML?

• HTML: HyperText Markup Language

• The set of markup symbols or codes placed in
a file intended for display on a Web browser
page.
• The World Wide Web Consortium
(http://w3c.org) sets the standards for HTML
and its related languages.
• Current standard (popular): HTML 5
HTML Elements

Each individual markup code is referred to as

an element or tag.
Each tag has a purpose.
Tags are enclosed in angle brackets, "<" and
">" symbols.
Most tags come in pairs; an opening tag and a
closing tag.
 HTML 5
• Recommended for this course
– Latest HTML standard
– Wide adoption on the web today
– Better integration of multimedia
– Easy to work with
• No XML directive and lengthy DOCTYPE declaration like in XHTML
• Highly similar (nearly identical) to XHTML
 HTML Example
• Look at this example:
– Tags (elements) such as html,
head, body, title, h1, p
– Lower case for tag names
– They come in pairs:
• Start (open) e.g. <html>
• End (close) tags e.g. </html>
– One can embed another
• Forming a tree/hierarchy
– But no overlapping tags
http://www.w3schools.com/html/default.asp

20
 HTML Basic Syntax
• Correct Syntax: 2 and 3 are equivalent if there is no content

1. <element1 attribute1="value">content</element1>
2. <element1 attribute1="value"></element1>
3. <element1 attribute1="value" />
• Embedded (parent/child/grandchild/etc.):
<element1 attribute1="value">
<element2 attribute1="value”>
<element3 …>…</element3>
</element2>
</element1>

21
 Basic HTML Tags/Elements
• Required Elements in an HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8” />
<title>Title to be Shown on Browser Topbar</title>
</head>
<body>
.... Everything else to be shown on the page goes here
</body>
</html>

22
Details on a few HTML tags

23
 HTML Root Tag

• Root element of an
24
 Head & Body Sections
• Head Section
Contains information that describes the web page
document
<head>
…head section info goes here
</head>
• Body Section
Contains text and elements that display in the Web
page document
<body>
…body section info goes here
</body>
 meta Elements
• Within the head section
• Specify information about the web document
• Provide information for search engine cataloging
<meta name="keywords" content=”web page, design,
education,..." />

<meta name="description" content=”This is the first web page

of ..." />

• Within the <head>…</head> tags.

 Section Heading Element

• Within the body section

<h1>Heading Level 1</h1>

<h2>Heading Level 2</h2>

<h3>Heading Level 3</h3>

<h4>Heading Level 4</h4>

<h5>Heading Level 5</h5>

<h6>Heading Level 6</h6>

 XHTML <p> tag

• Paragraph element
<p> …paragraph content… </p>
– Groups sentences and sections of text together.
– Configures a blank line above and below the
paragraph

• NOTE: HTML ignores returns, blanks, or

other whitespace you might have in the
content.
 Hyperlink/anchor: <a> tag
 The anchor element
 A hyperlink reference (href) to a file/page
 Text (content) between the <a> and </a> is displayed on the
web page (anchor text).

<a href="contact.html">Contact Us</a>

 href Attribute
 Indicates the file name or URL: relative vs. absolute path
 Relative URL above, assuming contact.html in the same directory
 Can be a web page, photo, pdf, etc.

29
 HTML <a> tag

• Absolute link
– Link to other Web sites

<a href="http://yahoo.com">Yahoo</a>

• Relative link
– Link to pages on your own site

<a href="about.html”>About Us</a>

<a href="friends/tom.jpg”>Tom’s Picture</a>

30
 HTML Email Links using the <a> tag

• Automatically launch the default mail program

configured for the browser
• If no browser default is configured, a message
is displayed
<a href="mailto:me@gmail.com">Email Me</a>

31
 Inserting an Image
• The Image Tag:
<img src=“image.jpg” alt=“My Picture” />
– This assumes that the file image.jpg is in the same
directory as the XHTML file that contains it.
– alt attribute to provide alternate text when the image does
not show on the device
– If the image file is somewhere else in your directories,
supply the path relative to your HTML file:
<img src=“../images/image.jpg” alt=“My picture
in the parent/upper directory” />
 Use image as a link
• Use <img> tag within <a> tag
– In this case, <a> is a parent of <img>
– Or, <img> is a child of <a>
• Clicking on the image opens the link
• Example:
<a href="http://www.amazon.com/…">
<img src="bookcover.gif" alt="a good book" />
</a>

33
 HTML Ordered List

<ol></ol> contains the ordered list

<li></li> contains an item in the list

<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
 HTML Unordered List

<ul></ul> contains the unordered list

<li></li> contains an item in the list
<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>
 Naming Elements
• HTML elements can be given a name.
– Either an ID (unique name), or
– A class name that is shared among several
elements.
• Names are used to reference particular
elements in a page (in CSS or Javascript)
<h1 id=“lastSection”>Conclusion</h1>

<p class=“highlight”>We conclude that …</p>

 Breaking up a Page into Divisions
• <div></div>
– Divides your page into separate divisions (segments)
– Allows you to apply styles to a large chunk of your page
– Often used with CSS for consistent design of your pages
• Example:

<div id=“nav”>
Navigation section of the page
</div>
 Adding Comments
• Always a good idea to add comments to remind
yourself or someone else later.
• Comments
– begin with <!--
– end with -->

<!--
Here is a table of contents
-->
<div id="toc">Antoni Guadi<br/>La Casa
Mila<br/>La Sagrada Famila</div>
 Internal Linking
• The <a> tag can be used to link to another section of
the same document by specifying the element’s id
as the link’s href.
• To link internally to an element with its id attribute
set, use the syntax #id.
– First, define an element’s id, for example:
<h1 id="conclusion">Conclusion</h1>
– Then, add a link to it by referencing the id, for example:
<a href=”#conclusion”>Go to Conclusion</a>

39
HTML Validation

40
 HTML Validation
• To include the validator link in your page:
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid
XHTML 1.0 Transitional" height="31" width="88" />
</a>
– Yes, this is an XHTML validator which works for
HTML 5 as well.
– Shows the following validation icon & link:
– Clicking on the icon takes you to validation of the
current page

41
 Resources

• W3 Schools HTML tutorial:

– http://www.w3schools.com/html/default.asp
• W3 Schools HTML reference:
– http://www.w3schools.com/tags/default.asp

42