September 23 - ndgriffeth/Class-Notes-and-Lectures GitHub Wiki

Assignment for Wednesday September 25

Quiz - see notes and readings for September 11, September 18, and September 23

New reading - Chapters 1 and 2 in the text (PHP and MySQL Web Development)

Web servers, Web browsers, and Web pages

(Basic) Web Servers

	applications running on a Internet-connected computer
	receive a message over the Internet (or over the loopback interface).
	find the file specified in the message
	send the file to the application that sent the message

Browsers:

	send messages to servers 
		typed by a user into the url box

  determined by a hyperlink in a Web page display the file that's returned, according to the rules of HTML

Web pages:

	files that are stored under a document root at a server site
	written in HTML
	can specify text formats, images to display, scripts to run

Variant: Server-Side Programming

	A Web Server can interpret and run a script by submitting it to a special module (e.g. PHP)

HTML

What it is

	A mark-up language for Web pages

HTML5

	Current standard

What you can do with it

	Put text, pictures, and links on a page (all are elements)
		Text: just type it
		Pictures: "img" element
		Links: "a" element (for anchor)
	Get user input
		Form element

Tags versus elements

	Tags surround elements
	Tags indicate the type of element

Structure of a page/Elements of a page

	DOCTYPE element
	Head
	Body
	Headers and paragraphs
	script tags and php tags
		Look at the source for a php page
		 (i.e., look at the file sent by the Browser)

Using the tutorial - "try it yourself"

Editing html

	Must create a plain text file
	Creating a page with nano
	Creating a page with TextEdit
	Creating a page with gedit

The remainder of this lecture just follows and summarizes the tutorial:

Basic

	Headers <h1>, … <h6>
		apply styles for headers
		organize page
	Paragraphs <p>
		Separate text
	Links <a href="...">
		Link to another page
	Images <img src="...">
		Include an image

Elements

	Start tag
	End tag
	Element
	Can be empty - can close empty element in start tag
	Elements can have attributes
	Elements can be nested - e.g., an image as a link

Attributes (need to know the concept but not all attributes)

	Specifed as name/value pair in start tag
	Examples:
		href in "a" tag
		src in "img" tag
	Values must be quoted in name/value pair

Headings

	Search engines use headers
	Users rely on headers
	Also:
		hr - horizontal line
		<!-- --> comments

Paragraphs and breaks

	Browsers ignore white space

[Formatting tags]

	bold
	italic
	computer output
	block quotes and quotes

Links

	How a link acts
	Structure of element definition
		target attribute
		id attribute

[Head]

You should know the head element, but detail on tags will not be on midterm.

	Title
	Base
	Link
	Style
	Meta
	Script

[CSS]

Will not be on midterm.

	Define style
		Inline - for an element
		In head - for a page
		Externally - for a Web Site

Images

	Tag syntax
	Location of image files

Tables

	Tags
		table - identifies table element
			border attribute
		tr - identifies row, 
		td - identifies column (element inside row)

Lists

	ul - unordered list element
	ol - ordered list element
	li - list item

[Block elements]

Will not be on midterm.

	Div and span

Forms

	form
		action attribute
		method attribute  (come back to this after reading Chapter 1)
			get
			post
	input
		type attribute
			text, checkbox, password, radio, submit
		name attribute
	select

Review Questions

  1. What are the basic functions of a Web server?

  2. What are the basic functions of a Web browser?

  3. What is the difference between server-side and client-side programming? Give an example of a language for each kind of programming.

  4. What is the top-level structure of an HTML page? What tags introduce each part?

⚠️ **GitHub.com Fallback** ⚠️