c122jan2714.notebook January 27, 2014

Size: px

Start display at page:

Download "c122jan2714.notebook January 27, 2014"

Delphia Lawson
5 years ago
Views:

1 Internet Developer 1

2 Start here! 2

3 3

4 Right click on screen and select View page source if you are in Firefox <!DOCTYPE html> tells the browser you are using html. Next we have the <html> tag and at the bottom we have the close html with the slash </html> The page will have a <head> and a <body>. The <title> within <head> puts out the page title in the top left cornor. Headers use the number to tell the size. Note that headers are in bold and skip a line after. 4

5 Write in notepad of notepad++ and save with no embedded spaces in the name and a.html extension. 5

6 Note the < is < and the > is > when writing it in the text. 6

7 7

8 When writing the text you move down to the next line as visible in the editor because it has no impact on how the page shows. The page shows in a way that fits the screen size. 8

9 No matter how many spaces I type only one will show. Extra spaces use In XHTML you use <br /> that is also allowed in HTML5, but usually in HTML5 you use <br> 9

10 10

11 The validator is used to tell whether the page meets the W3C specs. 11

12 12

13 13

14 14

15 15

16 16

17 Groups the headers. 17

18 Actually this is HTML5 a copy and paste error by me! <ul> makes an unordered list with <li> for each list item. 18

19 An ordered list in HTML5 19

20 Note the three ways to validate: address of web page, file upload that lets you browse and direct input. 20

21 Someone asked how to put comments into the page. 21

22 Paragraph leaves a blank line after the paragraph. Division does not. 22

23 I embedded bold and italics. When I do both the inner must also end first. 23

24 Note no </li> because I am embedding something under. This is the </li> that goes with Second sub B 24

25 25

26 Something happened and I lost some pages here I will try to remember and create. This is the older way where I close the li even if I am embedding underneath it does not validate. 26

27 The old way to change type so you can get A, B, C etc. The new way uses CSS and we will look at it as we move into CSS. Does not validate. 27

28 We have looked at three kinds of lists: ordered lists unordered lists definition lists A definition list has a place to define the text and a place to give the definition data. 28

29 A block quote makes indented margins on the left and the right. Notice that it is written before the container (containers are paragraphs, divisions, headers, lists etc.). 29

30 Style used to always be embedded like this to make bold, italics etc but now it is usually done with CSS. Here are a few styles that people still embed when they are writing the page. 30

31 Pre retains the structure as it is pasted in. The font it uses is a fixed font like Courier New. 31

32 Divisions and paragraphs within divisions. 32

33 Now we will look at some examples under XHTML. 33

34 The four lines at the top tell the browser that I am using XHTML just as <!DOCTYPE html> tells the browser I am using html5. In XHTML all code must be in a container (here the container his <h1> and all tags must have an end tag. 34

35 Note I uses strict in the second and third line. I can also use transitional to have a less careful validation. 35

36 36

37 c122jan2714.notebook There is also an XHTML transitional. 37

38 I think this is the one I did next, but I am not sure... Note the <br /> because the break does not have a close tag. 38

39 Checking the XHTML 39

40 40

41 HTML5 XHTML <br> <br /> <hr> <hr /> <img> <img.../> BOTH <p>...</p> 41

42 Calls for transitional validation. 42

43 c122jan2714.notebook 43

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

c122sep814.notebook September 08, 2014 All assignments should be sent to Backup please send a cc to this address All assignments should be sent to p.grocer@rcn.com 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