Blockheads, we all! (Block level vs. Inline level)

Gents,
Today we have two agenda items:

1. Complete your Blockquote/Quote page.
2. Introduce yourself to the difference between BLOCK level and INLINE level html elements.
   View this tutorial on youtube. (we'll watch it together in class.)

POSH and PROUD! (Plain Old Semantic HTML)

http://www.websitesthatwork.sehsapps.net/quizzes/openingweekquiz.html




Homework: read these pages:

http://www.websitesthatwork.sehsapps.net/screenshots/

Quiz Answers

	- Quiz Answers are to be written in Microsoft Word (or any rich text editor) and emailed to Mr. Seiler.
	- Work ONLY with your group members, but...
	- You have your computer, your group members' computers, and the entire internet at your disposal. (no email or instant messaging)
	- Put ALL names at the top of the page.
	- Copy Quiz QUESTIONS into body of the email as well as the ANSWERS.
	Quiz Questions
	#1 -- How did you find this quiz? What command or menu pull-down did you choose from the browser? Quiz was hidden in the source code. You can find the quiz by choosing View>> Source in your browser.
	#2 -- Why the heck are the quiz questions hidden? Not "WHY" did I do it, but "HOW" did I do it? I hid the quiz by making it an HTML comment. Comments use a specific markup
	#3 -- Write down all the BARE BONES code that every HTML page requires. Bare bones code can be found here: (I will accept various incarnations of this) http://websitesthatwork.sehsapps.net/templates/XHTMLstrict_template.html The answer indicated here shows what you need for a STRICT page.
	#4 -- For what purpose do we use the W3C Code Validator? The code validator is used to make sure your code passes muster as strict XHTML and will not "break" in the browser. Essentially, if you pass, your code is "future-proofed." "Passing" does not mean your code is well-organized semantically, though.
	#5 -- For the next couple questions, visit the Second website link mentioned in today's blog post.
	LIST two (2) characteristics of HTML, as mentioned in the text.
	DESCRIBE one of the characteristics using your own words (plain English, not the book's words). HTML is non-proprietary (nobody owns it) HTML can be created and processed by a wide range of tools HTML can structure text into hypertext links. HTML has evolved.
	#6 -- What do we mean by XHTML as opposed to HTML? (see pg. #7 in the screen shots.) The X in XHTML means we are following the strict rules of the XML (Extensible Markup Language) data definition language.
	#7 -- Why should we use web standards? (i.e., why should we write standards-compliant code?) Standards-compliant code ensures that your sites will not break in the web browser and will be future-proof. Standards also make your code more accessible to all, easy to update and maintain, and improve your search-engine rankings.
	#8 -- What is tag soup? Please define tag soup for me: Tag soup is code that is inefficient, unwieldy, redundant (repetitive), and hard to understand. It takes longer to load and can be nearly impossible to debug or maintain.
	#9 -- Why should we separate content and presentation? Use your own words. HTML was not designed to be used for designing pages. It was designed for use as a semantic markup language. CSS is used for design.
	#10 -- Where should you store your files on your flash drive in order for them to be "served up" properly by the web server? in the \xampplite\htdocs folder
	#11 -- Please write the code for html that would produce an unordered list that contains three (3) items that you enjoy eating for breakfast. Sample code is here: http://websitesthatwork.sehsapps.net/codesamples/unordered_list.html
	Complete quiz and email to Mr. Seiler or print. Your choice.

Always up to Semantics!

Agenda:

1. Quiz
2. Semantic Markup (and some new tags) Semantic refers to what words mean, not how they are presented or "designed."
3. Marking up content on your own.

Today we will have 10 minutes to finish up the quizzes from yesterday. Please remember to put your team member names on the top of the page and either print it or email it to me. Students who finished yesterday and handed in the assignment on time will receive a +2 on the quiz.

Read the following notes CAREFULLY:
1) First review the quiz answers, which are posted in the "Quiz Answers blog post."

2) Remember that HTML was designed for semantic markup. In other words, HTML is used to mark up words for clarity of meaning, not for design purposes. Think of HTML as a language for making an outline for a paper.

3) Some tags to know are h1, h2, ...h6
     p
    ul
     ol
     li   (both ul and ol need li)
em
comment



Assignment:
a) Download the text file on Ms. Baker and use HTML to semantically mark up the page.
http://websitesthatwork.sehsapps.net/textfiles/missbaker.txt

b) Use the XHTML template I prepared for you (to get started)
http://websitesthatwork.sehsapps.net/templates/XHTMLstrict_template.html

c) Make sure your page has a title, paragraphs, h1, h2, an unordered list, an em tags for important words.

d) Validate your code using the W3C code validator
You may compare your code to the "Cornelius Page" here:
http://webstandardistas.com/03/cornelius.html

e) Show me on your screen when you are finished.

Quiz Day

Quiz day was postponed on Friday, so the quiz will be today.

Opening Week Quiz

http://www.websitesthatwork.sehsapps.net/quizzes/openingweekquiz.html

http://www.websitesthatwork.sehsapps.net/screenshots/

A Bare Minimum Web Page, ETC.

Gents,
Yesterday we learned...
a) to use "View Source" to check the source code of an existing web page.
b) to write the bare minimum code to compose a web page in HTML.
See examples on my website.
Examples:
Class examples for Websites that Work!

Today we will be
a) installing XAMPP on your flash drives
b) learning how to start and stop the web server
c) learning how to put pages in the correct display directory
d) continuing our coding adventure with COMMENTS, DOCTYPE, NAMESPACE, ENCODING
e) viewing the class website (websitesthatwork.sehsapps.net)
f) validating code using the W3C markup validator

Today we reviewed the concepts of a web server and a client machine. Then we checked our mapped drives and practiced mapping the K: drive.

Example: Drive letter is K:

Folder is \\slabadmin\htdocs\studenthost3

Next we worked on coding in notepad. We checked to make sure that we had a file named "firstweb.htm" inside our K: drives. Then we opened the file with notepad and coded as shown below.


The code above produces the measly output shown below. It's not much, but it's a start:
(Please note that the page we coded in notepad will only display as a web page when it is loaded on a webserver, i.e., on our class web server, which is your K: drive.)



Tomorrow we will work on writing our first PHP scripts.