Title: Sep 12 10:58 AM (1 of 38)
Title: Sep 12 11:04 AM (2 of 38)
Title: Sep 12 5:37 PM (3 of 38) Click here and then you can put in the resources.
Title: Sep 12 5:38 PM (4 of 38)
Title: Sep 12 5:42 PM (5 of 38) Tag is like the index that you want your entry stored under and notes is where you should put your name so I know who put it up.
Title: Sep 12 5:49 PM (6 of 38)
View and the source or page source or right click to see the source code which is the code that was written to produce the page. I have two mistakes, prior to head I should have <html> and lower down <br /> should be just <br>. Title: Sep 12 11:26 AM (7 of 38)
I made the corrections in notepad and I am now saving the code. I could have saved it on my own flash drive, but I decided to save on the T drive which is the drive on our computers that does not get reset when the computer turns off. Note that I save with a.html extension and I changed the type to All Files. Title: Sep 12 11:33 AM (8 of 38)
I made the fixes that I mentioned and the code has been saved on the web site with the corrections. <!DOCTYPE html> <html> <head> <meta charset="utf 8"> <title>set up for HTML5</title> </head> <body> <h1>this is a test!</h1> <p>this is testing the complete lines of code that can be used with HTML5 that will validate!<br> The address to validate is: <a href="http://validator.w3.org/file upload.html"> Validate</a> </p> </body> </html> Title: Sep 12 11:43 AM (9 of 38)
<!DOCTYPE html> <html> <head> <meta charset="utf 8"> <title>set up for HTML5</title> </head> <body> <h1>this is a test!</h1> The DOCTYPE tells me it is HTML5. The first line of code tells me this is html. This is a tag and a tag is between < and >. The tags tell the browser how things should look in the browser window. There are two sections in the page: head and body. The head contains something that talks about the charset we are using and a title that puts the title in the top left corner of the web page. Note that there was a open <head> and a close </head> that says we are done coding head. <p>this is testing the complete lines of code that can be used with HTML5 that will validate!<br> The address to validate is: <a href="http://validator.w3.org/file upload.html">validate</a> </p> </body> </html> The body which is the text that displays is coded inside the open <body> and close </body> tags. The first thing I decided to do inside the body is put out a header. It starts with <h1> and then shows the text for the header and then we close the header </h1>. Next we have a paragraph in fact the rest of the text is within the open <p> and the close </p>. Part way through the paragraph I have a <br> which breaks down to the next line. We will skip the address part of the code until next week. Finally I close the body </body> and close the html </html> Title: Sep 12 11:44 AM (10 of 38)
Title: Sep 12 11:51 AM (11 of 38) To see the source code, you can go in under view and find source or page source. Sometimes you can right click to see the source, sometimes it has an icon to click on look around in your browser.
Title: Sep 12 6:12 PM (12 of 38) The second one looks at the code in XHTML. Notice the four lines at the top which you should cut and paste as the first 4 lines. Note that the fourth line has the <html> so we do not code it again. I also eliminated the meta tag.
Title: Sep 12 6:23 PM (13 of 38) This is the validator. It looks at the code at the beginning of the page to determine if it has HTML5 or XHTML and validates accordingly. Now I am going to Validate by File Upload so I am going to bring up the programs we just looked at that I have saved on my flash drive. Then I click on check.
Title: Sep 12 6:27 PM (14 of 38)
Title: Sep 12 6:27 PM (15 of 38) Scroll down to see the warning about the checking.
Title: Sep 12 6:27 PM (16 of 38)
Title: Sep 12 6:30 PM (17 of 38) The XHTML was validated strict. Note that strict follows the rules strictly, there is also a transitional validation that will validate less strickly. The strict or transitional is expressed in the top four lines of the XHTML.
Now I will look at sample code under HTML5 and then XHTML. Title: Sep 12 6:32 PM (18 of 38)
This code displays six headers from the h1 tag to the h6 tag. Note that I do not have the meta charset and this will cause problems in validation. Again, remember the tags are used to tell HTML how to display code in the browser window. The tags are enclosed in < and > to set them off as tags and there are lists of tags recognized by HTML. Title: Sep 12 6:32 PM (19 of 38)
If I want to put <br> in my text it will be treated as a tag so I I use < to show the less than sign and > to show the greater than sign. Also note I do not have a meta tag so there will be validation warnings. Title: Sep 12 6:49 PM (20 of 38)
Title: Sep 12 6:54 PM (21 of 38) Now I have included the meta tag. Usually I will use utf in lower case just like I use lower case for tags.
Title: Sep 12 6:58 PM (22 of 38) I did not cover <hgroup> in class, but I will next week. It simply sets up my 6 headers in a group.
Title: Sep 12 6:59 PM (23 of 38) This is an unordered list with the <ul> tag and list items within it which are shown using the <li> tag. Notes both tags are closed with </li> and </ul>.
Title: Sep 12 7:01 PM (24 of 38) This time it is an ordered list with <ol> instead of the <ul> for an ordered list.
The <p> tag is used to show a paragraph. After the paragraph there will be a blank line. Note this is also true of headers which do a blank line after (headers are also bold). Note when I wrote I inserted a lot of spaces in my code. HTML ignores the multiple spaces and only shows one. If you want multiple spaces you can use the space symbol which is Title: Sep 12 7:02 PM (25 of 38)
Title: Sep 12 7:07 PM (26 of 38)
Title: Sep 12 7:09 PM (27 of 38)
Title: Sep 12 7:10 PM (28 of 38) Containers are things like <h1>, <p>, <div> that hold text. The blockquote tag is used and then a container holds the text. Notice that you can not have the container and then the blockquote.
Title: Sep 12 7:14 PM (29 of 38) Here I am using <i> for italics, <b> for bold etc notice that the validator told me that <big> is being phased ou
<pre> puts in the pre defined layout Title: Sep 12 7:16 PM (30 of 38)
Divisions are like paragraphs but they do not generate a blank line after the division. The division tag is <div> and the close is </div>. Note I skipped embedded lists, I will look at them next week. Title: Sep 12 7:37 PM (31 of 38)
Title: Sep 12 7:39 PM (32 of 38) Now we will look at XHTML note the four lines of code and remember that the <html> is embedded in the fourth line. Note no meta tag and note that this only has one header.
Title: Sep 12 7:41 PM (33 of 38) This shows the 6 different <h1>, <h2> etc tags note it validates strict.
Title: Sep 12 7:43 PM (34 of 38) Unordered list in XHTML.
Title: Sep 12 7:43 PM (35 of 38) Ordered list in XHTML.
Title: Sep 12 7:44 PM (36 of 38) Paragraphs in XHTML.
Title: Sep 12 7:46 PM (37 of 38)
In XHTML, the <br /> is written with the space slash after br. The reason is that the br does not have an end tag so XHTML decided to combine the open and close together when there was no end tag. Note I even tried <br></br>, just me playing... Title: Sep 12 7:46 PM (38 of 38)