c122sep814.notebook September 08, 2014 All assignments should be sent to Backup please send a cc to this address

Size: px

Start display at page:

Download "c122sep814.notebook September 08, 2014 All assignments should be sent to Backup please send a cc to this address"

Tiffany Palmer
5 years ago
Views:

1 All assignments should be sent to Backup please send a cc to this address Note that I record classes and capture Smartboard notes. They are posted under audio and Smartboard under XHTML on my site (even though we are mainly doing HTML5). 1

2 The audio and smartboard for this semester will be posted here. 2

Example with 6 headers. <!DOCTYPE html> tells the browser that we are writing HTML5. Below this line you start <html> and the last line on the page closes </html>. Note that /html is the close.

3 Example with 6 headers. <!DOCTYPE html> tells the browser that we are writing HTML5. Below this line you start <html> and the last line on the page closes </html>. Note that /html is the close. Inside the HTML you have a head section and a body section. In this example the only thing in <head> is the title which shows up at the top of the page. The body includes things that are on the page between the bars. The headers are <h1> through <h6) and decrease in size. The headers are written as bold with a blank line beneath them. Finally after the headers, I close the body and the html. 3

4 I cannot write <br> in my text or it will be seen as a break. If I want the text <br> to appear, I need to write <br> I am now including the <p> tag which is a paragraph tag and the <br> tag which is a move down to the next line (like using Enter on your keyboard). 4

5 Note the wrapping if I decrease the screen size. 5

6 If you key in space many times, only one space will actually happen the rest are ignored. If you want additional spaces, each space can be written as 6

7 7

8 <!DOCTYPE html> <html> <head> <meta charset="utf 8"> <title>headers</title> </head> When you write the HTML5 you need to think about validation. Validation is a check to see if the code that was written is valid. The meta charaset="utf 8" line needs to be included in the head. In addition, a lot of people are now adding lang = "en" to the html tag. 8

9 The <hgroup> tag can be used to group heading elements like the<h1> through <h6>. The value of this will be more evident when we look at CSS. 9

10 I copied some code to notepad and now I am saving it with a new name and a.html extension. Change to All Files... 10

11 It has now been saved on the T drive. Now I went to a browser and did a File/Open and browsing for the page name to open. 11

12 Copy and paste woops this is really about HTML5 and not XHTML. This page is about unordered list shown with the <ul> tag and items within that list shown with the <li> tag. Note that the bullet icon is used. <ul> is a tag for unordered lists <li> is a tag for list item 12

13 HTML5 <ol> is for ordered list and generates the numbers as shown. 13

14 Line between paragraphs. Also note that the spaces before Notice are ignored. 14

15 Example of an HTML5 page from my weekly schedule. We will deal with links next week, but for now notice that this address brings up the site that will let you check your HTML. 15

16 You can paste in an address and Validate by URI You can browse and find the file using Validate by File Upload Or you can paste or directly code. Once you have done one of the above, click on check to get the validations. 16

17 This is the address for one of my pages. 17

18 This did validate the picture at the top would show this. 18

19 19

20 An excellent resource for HTML and HTML5. 20

21 If you click on Try it Yourself you can modify the code and see what happens. 21

22 22

23 The first paragraph ends and then there is a space. The next line is also a paragraph and there is a break after the words skip a line... 23

24 Using to get a space. 24

25 <b>...</b> makes something bold and the <i> makes italics. Notice when I use both, I need to close the second or inner tag first and then the first or outer tag. 25

26 I validated this page and now you can see the message. The warning will always be there it is telling the developer that HTML5 is still being developed a work in progress. 26

27 Note that in unordered list the bullets change and in the ordered list the 1,2,3 is always being used. I want to put a lot under second. Therefore I am not ending the li. Note that I am putting things under this li, so I do not end the li. Now I am done with second sub B so I can close the li. Now I have everything under second so I close it. 27

28 28

29 This is an older way of doing style it does not validate. It should be done with CSS. 29

30 Another kind of list, this is the definition list. 30

31 <blockcode>puts a margin to the left of the group and also to the right of the group. Notice that I have <blockquote><h1> which means the h1 will be blockquoted with the margins. 31

32 <big> is no longer supported, but the rest are. 32

33 33

34 34

35 <pre> gives you pre existing format which can be very useful. 35

36 <div> is like <p> but it does not skip a line. 36

37 Now I am showing a few pages with XHTML. XHTML wants everything closed so even a <br> is written as <br /> to incorporate the end into the tag. XHTML also says they everything must be in a container like a header, a paragraph, a division etc. 37

38 38

39 39

40 Note the <br></br> is not a recommended solution. 40

41 41

42 Instead of strict, I am using a lighter version called transitional. 42

43 43

44 I am copying the code and pasting into notepad and saving so I can test a few things. 44

45 45

46 46

47 Note when I put the <p> in front of the <blockquote> it does not validate. They need to be reversed. 47

48 48

Title: Sep 12 10:58 AM (1 of 38)

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