Web Programming Step by Step, 2nd Edition

Lecture 1: Internet/WWW; Basic HTML

Reading: Ch. 1; 2.1

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Valid HTML5 Valid CSS

1.1: The Internet

The Internet

The Internet
  • the Web is the collection of web sites and pages around the world; the Internet is larger and also includes other services such as email, chat, online games, etc.

Brief history

Key aspects of the internet

Question

Who "runs" the internet? Who is responsible for overseeing it?

People and organizations

IETF ICANN W3C

Internet Protocol (IP)

Transmission Control Protocol (TCP)

1.2: The World Wide Web (WWW)

Web servers and browsers

web server

Domain Name System (DNS)

Question

What is a URL?

Uniform Resource Locator (URL)

Hypertext Transport Protocol (HTTP)

HTTP error codes

Web languages / technologies

2.1: Basic HTML

Hypertext Markup Language (HTML)

Structure of an HTML page 

<!DOCTYPE html>
<html>
	<head>
		information about the page
	</head>

	<body>
		page contents
	</body>
</html>

Page title: <title>

describes the title of the web page

<title>Chapter 2: HTML Basics</title>

Paragraph: <p>

paragraphs of text (block)

<p>You're not your job.
You're not how much money you have in the bank.
You're not the car you drive.   You're not the contents
of your wallet. You're not your         khakis.  You're
   the all-singing, all-dancing crap of the world.</p>

Headings: <h1>, <h2>, ..., <h6>

headings to separate major areas of the page (block)

<h1>University of Whoville</h1>
<h2>Department of Computer Science</h2>
<h3>Sponsored by Micro$oft</h3>

Horizontal rule: <hr>

a horizontal line to visually separate sections of a page (block)

<p>First paragraph</p>
<hr />
<p>Second paragraph</p>

More about HTML tags

Links: <a>

links, or "anchors", to other pages (inline)

<p>
	Search 
	<a href="http://www.google.com/">Google</a> or our
  <a href="lectures.html">Lecture Notes</a>.
</p>

Block and inline elements (explanation)

elements

Images: <img>

inserts a graphical image into the page (inline)

<img src="images/gollum.jpg" alt="Gollum from LOTR" />

More about images

<a href="http://theonering.net/">
	<img src="images/gandalf.jpg" alt="Gandalf from LOTR"
	     title="You shall not pass!" />
</a>

Line break: <br>

forces a line break in the middle of a block element (inline)

<p>Teddy said it was a hat, <br /> So I put it on.</p>
<p>Now Daddy's sayin', <br /> Where the
heck's the toilet plunger gone?</p>
  • br should not be used to separate paragraphs or used multiple times in a row to create spacing

Phrase elements : <em>, <strong>

em: emphasized text (usually rendered in italic)
strong: strongly emphasized text (usually rendered in bold) 

<p>
	HTML is <em>really</em>,
	<strong>REALLY</strong> fun!
</p>

Nesting tags

<p>
	HTML is <em>really,
	<strong>REALLY</em> lots of</strong> fun!
</p>

Comments: <!-- ... -->

comments to document your HTML file or "comment out" text

<!-- My web page, by Suzy Student
     CSE 190 D, Spring 2048       -->
<p>CSE courses are <!-- NOT --> a lot of fun!</p>