Advanced HTML Scripting WebGUI Users Conference

Size: px

Start display at page:

Download "Advanced HTML Scripting WebGUI Users Conference"

Theodore Barnett
6 years ago
Views:

1 Advanced HTML Scripting 2004 WebGUI Users Conference

2 XHTML where did that x come from?

3 XHTML =? Extensible Hypertext Markup Language Combination of HTML and XML More strict than HTML

4 Things to Remember Always include closing tags. Close empty elements with a slash. Must include values in attributes. Attributes must be enclosed in quotes. Write code in lowercase. Tags must be correctly nested. Always include a <!DOCTYPE> declaration in every document.

5 Closing Tags BAD GOOD <p>this XHTML is great stuff. <p>it sure is flexible! <p>this XHTML is great stuff.</p> <p>it sure is flexible!</p>

6 Close Empty Elements BAD GOOD Look at this cool photo <br> <img src= cool_photo.gif > Look at this cool photo <br /> <img src= cool_photo.gif />

7 Include Values in Attributes BAD GOOD <input type= radio id= bad checked> <input type= radio id= good checked= checked />

8 Enclose Attributes in Quotes BAD GOOD <table border=1 cellpadding=0> <td>bad</td> </table> <table border= 1 cellpadding= 0 > <td>good</td> </table>

9 Lowercase Code BAD GOOD <TABLE border=1 cellpadding=0> <TR> <TD>Bad</TD> </TR> </TABLE> <table border= 1 cellpadding= 0 > <td>good</td> </table>

10 Nest Your Tags BAD GOOD <b><p><i>look ma,</i> I m eating some delicious chicken! </b></p> <p><b><i>look ma,</i> I m eating some delicious chicken! </b></p>

11 Document Type Declarations Transitional DTD: allows for use of HTML s deprecated elements and attributes. Strict DTD: doesn t permit the use of any presentational (deprecated) elements or attributes. Must use CSS to add style to your site. Frameset DTD: used for frame based pages.

12 Document Type Declarations Transitional DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Strict DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Frameset DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "

13 Tables 101 table building basics

14 KEEP IT SIMPLE

15 Key Elements <table> </table> Table element creates the table Table row element establishes a row <td></td> Table data element creates individual cells in a row (the columns) Content should be placed between the TD tags.

16 Tags in Use <table> </table> X X X X X X X X X

17 Headings Use the <th></th> element rather than <td></td> to add a heading. <table> <th>col 1</th> <th>col 2</th> <th>col 3</th> </table> Col 1 Col 2 Col 3 X X X X X X

18 Captions Use the <caption></caption> to add a title to your table. <table> <caption>title Here </caption> <th>col 1</th> <th>col 2</th> <th>col 3</th> </table> TITLE HERE Col 1 Col 2 Col 3 X X X X X X

19 Grouping Elements Allow you to organize tables by section. <thead> </thead> Specifies a header for the table. <tbody></tbody> Specify the body section. <tfoot></tfoot> Specify the footer section.

20 Grouping Elements <table> <thead> <td>header</td> </thead> <tfoot> <td>footer</td> </foot> <tbody> <td>body</td> </tbody> </table> Header Body Footer

21 Table Attributes

22 Adding Color With CSS Add color in the <table> element to control the color of the entire table. Add color in the element to control the color of the row. Add color in the <td> or <th> element to control the color of individual cells.

23 Adding Color With CSS Inline style is used below. You can also use embedded and linked stylesheets. <table> <caption>title Here </caption> <th>col 1</th> <th>col 2</th> <th>col 3</th> <td style= backgroundcolor: blue; >X</td> </table> TITLE HERE Col 1 Col 2 Col 3 X X X X X X

24 Adding Borders To display borders on your table use the border attribute. <table border= 1 > <caption>title Here </caption> <th>col 1</th> <th>col 2</th> <th>col 3</th> </table> TITLE HERE Col 1 Col 2 Col 3 X X X X X X

25 cellpadding & cellspacing Use the cellspacing attribute to adjust space between cells. Use cellpadding to adjust space inside the cells. Measured in pixels. Must be placed in your table element. CSS is advised for more padding options.

26 cellpadding & cellspacing To display borders on your table use the border attribute. <table border= 1 cellpadding= 10 cellspacing= 10 > <caption>title Here </caption> <th>col 1</th> <th>col 2</th> <th>col 3</th> </table> TITLE HERE Col 1 Col 2 Col 3 X X X X X X

27 Positioning

28 Horizontal Alignment Use the align attribute in each cell you want to align. Left: The Default alignment. Aligns cell content to the left. Right: Aligns cell content to the right. Center: Aligns cell content to the center Justify: Also aligns cell content to the left

29 Horizontal Alignment <table border= 1 > <caption>title Here </caption> <th>col 1</th> <th>col 2</th> <th>col 3</th> <td align= left >X</td> <td align= center >X</td> <td align= right >X</td> </table> TITLE HERE Col 1 Col 2 Col 3 X X X X X X

30 Ver tical Alignment Use the valign attribute in to align content at the top, middle, or bottom Top: Aligns cell content to the top. Middle: The Default alignment. Aligns cell content to the middle. Bottom: Aligns cell content to the bottom. Baseline: Aligns with a baseline shared by all the cells in a given row.

31 Ver tical Alignment <table border= 1 > <caption>title Here </caption> <th>col 1</th> <th>col 2</th> <th>col 3</th> <td align= left >X</td> <td align= center >X</td> <td align= right >X</td> <td valign= top >X</td> <td valign= middle >X</td> <td valign= bottom >X</td> </table> TITLE HERE Col 1 Col 2 Col 3 X X X X X X

32 Colspan & Rowspan

33 Colspan To make a cell span multiple columns use colspan <table border= 1 > <caption>title Here </caption> <th>col 1</th> <th>col 2</th> <th>col 3</th> <td align= left >X</td> <td align= center >X</td> <td align= right >X</td> <td valign= top >X</td> <td valign= middle colspan= 2 >X</td> </table> TITLE HERE Col 1 Col 2 Col 3 X X X X X

34 Rowspan To make a cell span multiple rows use rowspan <table border= 1 > <caption>title Here </caption> <th>col 1</th> <th>col 2</th> <th>col 3</th> <td align= left rowspan= 2 >X</td> <td align= center >X</td> <td align= right >X</td> <td valign= middle colspan= 2 >X</td> </table> TITLE HERE Col 1 Col 2 Col 3 X X X X

35 Forms

36 Form Uses Contact Forms Surveys Guestbooks CMS Admin Forms Search Engines Order Forms Catalogs MUCH MORE

37 Form Element <body> <form> </form> </body> Form Element creates the form

38 Form Action <body> <form action= > </form> </body> Action attribute tells browser where to send information (can be address or a script).

39 Form Method <body> <form action= method= post > </form> </body> Method attribute tells browser how to send information. Get or Post

40 <input type= text /> <body> <form action= method= post > First Name: <input type= text name= fname size= 15 maxlength= 30 /> </form> </body> First Name:

41 <textarea> <body> <form action= method= post > First Name: <input type= text name= fname size= 15 maxlength= 30 /><br /> <textarea name= message rows= 10 cols= 45 ></textarea> </form> </body> First Name:

42 Submit & Reset <body> <form action= method= post > First Name: <input type= text name= fname size= 15 maxlength= 30 /><br /> <textarea name= message rows= 10 cols= 45 ></textarea><br /> <input type= submit /> <input type= reset /> </form> </body> First Name:

43 <input type= text /> <table> <td>first Name:</td> <td><input type="text" name="fname" size="15" maxlength="20" /></td> <td>last Name:</td> <td><input type="text" name="lname" size="15" maxlength="20" /></ td> <td>city:</td> <td><input type="text" name="city" size="15" maxlength="20" /></td> <td>state:</td> <td><input type="text" name="state" size="15" /></td> <td>country:</td> <td><input type="text" name="country" size="15" maxlength="20" /></ td> </table> First Name: Last Name: City: State: Country:

44 <input type= radio /> <p>your age (choose one):</p> <input type="radio" name="age" value="13-18" /><br /> <input type="radio" name="age" value="19-30" /><br /> <input type="radio" name="age" value="31-40" checked="checked" /><br /> <input type="radio" name="age" value="41-50" /><br /> Your age (choose one): : 41-50:

45 < i n p u t t y p e = c h e c k b ox / > <p>fiction Preferences</p> <input type="checkbox" name="fictionpreferences" value="historical" />Historical<br /> <input type="checkbox" name="fictionpreferences" value="literary" />Literary<br /> <input type="checkbox" name="fictionpreferences" value="mystery" />Mystery<br /> <input type="checkbox" name="fictionpreferences" value="romance" />Romance<br /> <input type="checkbox" name="fictionpreferences" value="thriller" />Suspense/Thriller<br /> Fiction Preferences Historical Literary Mystery Romance Suspense

46 < s e l e c t i d = > < / s e l e c t > <p>your gender:</p> <select name="sex"> <option selected= 1 value="male" >Male</option> <option value="female" >Female</option> </select> Your gender: Male

47 < s e l e c t i d = m u l t i p l e = m u l t i p l e > < / s e l e c t > <p>bookstore Preferences</p> <select name="bookpurchasepref" multiple="multiple" size="5"> <option selected= 1 value="amazon">amazon.com</ option> <option value="bncom">bn.com</option> <option value="bn">barnes and Noble</option> <option value="borders">borders</option> <option value="halfcom">half.com</option> <option value="hastings">hastings Entertainment</ option> <option value="walden">waldenbooks</option> <option value="hpbooks">half Price Books</option> <option value="powells">powells Books</option> </select> <p>for multiple selections, hold down the Control key while clicking.</p> Bookstore Preferences For multiple selections, hold down the Control key while clicking.

48 Search Engine Optimization

49 Choose Keywords Wisely Think "specific keyword phrases" not "keywords". Think like your target audience. See what your competition is up to. Use nouns & adjectives. Too General 1. shoes 2. men's shoes 3. women's shoes Better 1. imported italian shoes 2. men's leather loafers 3. women's aerobic sneakers

50 Optimize Your Title Tags Search engines & directories place a high level of importance on keywords that are found in your title tag. Include a couple keywords in your title tag. Make title tag enticing.

51 Optimize Your Page Copy Try to have at least 200 words of copy per page. Use your keywords and keyword phrases in your copy.

52 Optimize Your Meta Tags Meta Description: <META NAME="description" content="keyword phrases would appear in this description"> Meta Keywords: <META NAME="keywords" content="keywords phrase 1, keyword phrase 2, keyword phrase 3, etc."> Place meta tags between <head> </head> tags. Include keyword phrases in your description. Include common misspellings in your keywords.

53 Optimize Your Alt Tags Use keyword phrases as well as a description. Keep keywords to a minimum. Keep alt tags brief (sentence or two).

54 Optimize Text Based Navigation Text based links can help improve search engine listings. Search engines can spider text based navigation.

55 What Not To Do List keywords outside of your meta keyword tag. Use the same color text as your background color. Submit the same page to search engines within 24 hours. Use keywords that don t relate to your site.

56 Resources

57 Online Resources xhtml_reference.asp

58 QUESTIONS

CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0

WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0 Modified by Ahmed Sallam Based on original slides by Jeffrey C. Jackson reserved. 0-13-185603-0 HTML HELLO WORLD! Document