Practical Computing. Website Development

Practical Computing Website Development [email protected] 1 • Section this week: XHTML (Scott) • Workshop this week: Podcasting (Kama...
Author: Margery Watson
4 downloads 0 Views 542KB Size
Practical Computing Website Development

[email protected]

1

• Section this week: XHTML

(Scott)

• Workshop this week: Podcasting

(Kama)

• Send questions or comments about the course to: [email protected] 2

• The World Wide Web and the Internet are not the same thing! • The World Wide Web was introduced by Tim Berners-Lee • Client-Server Model • HTML and its variants are the lingua franca of the Web 3

Dissecting a URL URL http://host.domain.tld/path/to/document/document.html#fragment

4

Dissecting a URL Scheme http://host.domain.tld/path/to/document/document.html#fragment Common Schemes: http https ftp mailto rtsp Host http://host.domain.tld/path/to/document/document.html#fragment Port http://host.domain.tld:80/path/to/document/document.html#fragment Path http://host.domain.tld/path/to/document/document.html#fragment Fragment ID http://host.domain.tld/path/to/document/document.html#fragment Query String http://host.domain.tld/path/to/document/document.html?querystring 5

Document Structure • Web documents all have two basic components: – DTD (Document Type Declaration): contains markup version information – Elements (These are the markup tags) • Elements can be further categorized into two types: – Head: contains declarative information about the web document (title, links to external documents, etc.) – Body: contains the document information

6

DTDs 3 common DOCTYPE declarations for XHTML • Strict: –

• Transitional: –

• Frameset: – 7

A Basic Example Some Area Schools Some Area Schools Harvard MIT Tufts (view this example)

8

Dissecting an Element Element Harvard Start Tag Harvard Element Name Harvard Attribute Harvard Attribute Value Harvard Content Harvard End Tag Harvard 9

Markup Reference

http://www.w3schools.com/tags/

10

Hello, World!

Let’s make our first web page from scratch!

(view one possible solution)

11

12

13

I need validation! “Just as texts in a natural language can include spelling or grammar errors, documents using Markup languages may (for various reasons) not be following these rules. The process of verifying whether a document actually follows the rules for the language(s) it uses is called validation, and the tool used for that is a validator. A document that passes this process with success is called valid.” http://validator.w3.org/docs/help.html#validation_basics

14

Rules to learn and live by • elements must be properly nested • elements must have a start and end tag • element names should be lower-case • attribute values must be encapsulated in quotation marks • attributes must not be repeated within an element • always check your work with the W3 15

Singletons elements must have a start and end tag – Some elements don’t have content –
– – 16

Website Basics • HTML/XHTML Tags • HTML/XHTML Character Entities • W3 Validator • Multipage Validator • Color Palette • Tidy (HTML/XHTML Validator Tool) 17

You got your Presentation in my Content!

18

CSS Basics & Website Design • CSS Syntax • CSS Validator • The Best of Web Design • Color Combos • More Color Combos • Lorem Ipsum (text generator) 19

Dynamic Websites • Forms

• Scripting

• Server-side includes

• Database-driven websites 20

Additional Resources • Books Online via Harvard Libraries – HTML & XHTML: The Definitive Guide, 5th Edition (requires HUID/PIN) – JavaScript & DHTML Cookbook (requires HUID/PIN) – Learning Python, 2nd Edition (requires HUID/PIN) – SQL in a Nutshell (requires HUID/PIN) – Web Design in a Nutshell, 2nd Edition (requires HUID/PIN)

• Other Useful Books Online – Web Developer's Virtual Library 21

Practical Computing Website Development

[email protected]

22