1. HTML Cyndi Hageman

2. The Internet The internet is a worldwide collection of computer networks sharing information via a common set of networking and software protocols.

3. History  1960’s – funded by the Department of Defense – they wanted computers that could communicate in spite of a nuclear attack.  ARPAnet was available and used by defense conractors and academic institutions.  1990’s businesses wanted it opened up for unrestricted traffic.

4. History (cont.)  Internet was too disorganized – it was hard to connect and the information was sent in pieces.  CERN came up with HTML browser software that unified text, graphics and sounds  NCSA at the University of Illinois created Mosaic, the first web browser to interpret HTML. It was free.

5. How it all works  Every computer is identified by a number. Numbers are too difficult to remember so every site is also identified by name.  http – Hypertext Transfer Protocol is the means of transferring web pages. The client requests a page, the page is sent to the client from the server via http

6. How it all works (cont.)  www is the prefix (world wide web)  Domain name – the unique given name of a web site  Domain.comcommercial.netinternet service provider.orgnonprofit organization.edueducational institution.govUS government

7. W3C  World Wide Web Consortium  Define the standard of HTML and XHTML  Standardize any technology related to the web css Xml http

8. Things to Know  Window – the browser window that opens  Web page/document – the content of a page that is displayed in a window  url – uniform resource locator – web page address

9. HTML vs. CSS  HTML and XHTML are all about structure of a web page. It lays out how the content of the web page are to appear.  CSS makes that content look good. CSS is all about appearance.

10. HTML Tags  HTML is created by using tags.  Most tags have an opening tag and a closing tag and you place the content between the tags.  There are some that do not require a closing tag in HTML.

11. XHTML vs. HTML  The highest level of HTML is 5 http://webdesign.about.com/od/ht ml5/qt/what_is_html5.htm  The next generation is XHTML 1.0.  XHTML Lower case All tags need a closing tag Tags must be properly nested

12. Basic HTML Document

13. Basic XHTML Document

14. XHTML  Like HTML but uses DTD to define XML elements 

15. XHTML  Nested Tags Same as current HTML This statement is itallic  End Tags are required

16. XHTML  Case sensitive All html tags need to be lower case  Attributes in Quotes All attribute values must be in double quotes

17. XHTML  Explicit Attribute values All attributes must have a value  Special Characters Put javascript in external files See appendix F for character definitions

18. XHTML  Name vs. Id XHTML has a strong preference for the Id tag If you have to use the name attribute for a tag, then also add the id attribute

19. DTD  The doctype declaration should be the very first thing in an HTML document, before the tag.  The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.  The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly.

20. DTD  HTML 4.01 Strict  contains all HTML elements and attributes, but does not include presentational or deprecated elements (like font). Framesets are not allowed. 

21. DTD  HTML 4.01 Transitional  contains all HTML elements and attributes, including presentational and deprecated elements (like font). Framesets are not allowed. 

22. DTD  HTML 4.01 Frameset  equal to HTML 4.01 Transitional, but allows the use of frameset content. 

23. DTD  XHTML 1.0 Strict  contains all HTML elements and attributes, but does not include presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well- formed XML. 

24. DTD  XHTML 1.0 Transitional  contains all HTML elements and attributes, including presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. 

25. DTD  XHTML 1.0 Frameset  equal to XHTML 1.0 Transitional, but allows the use of frameset content. 

26. DTD  XHTML 1.1  equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages). 

27.  Located in the  Used to give a title to the page. It shows up in the browser window.  Helps web search engines to find your page.

28. Comments  You should always put comments in your code to define your page. You may not be the one maintaining the page after it is built.   Comments are ignored by the browser but can be seen when the client views the source.

29. Headings  Heading tags are used to put titles or subtitles on your page. 

30. Text  You can separate or distinguish text in different ways - paragraph – puts one blank line after the text - line break – moves text to the next line with no blank line between - allows you to divide your page in sections – puts one blank line after text - allows you to distinguish inline text to apply a style or format.

31. italic  - physical element that will make the text italic.  - logical element that will make the text italic and will make the text accessible to screen readers.

32. bold  - physical element that makes text appear bold.  - logical element that makes text appear bold and is accessible to screen readers.

33. Nesting Elements  Elements need to be nested properly to be displayed properly by the browser and to be validated correctly  The tag that is opened first, must be closed last The article will be featured in the Cedar Rapids Gazette

34. Other Content Tags  - text is an address and is displayed in italic  - indents the text on the left and right and some browsers display in italic  - indicates a citation or reference and displays in italic.  Page 77 for more content tags

35. Character Entities  Begin with & and end with ;  Examples ®registered symbol ©copywright symbol non-breaking space «left-pointing double angle quotation mark ¼one quarter fraction ½one half fraction ¾three quarters fraction

36. Character Entities (cont.)  http://www.evolt.org/article/ala/17/ 21234/ http://www.evolt.org/article/ala/17/ 21234/  http://htmlhelp.com/reference/html 40/entities/ http://htmlhelp.com/reference/html 40/entities/

37. Horizontal Rule   Provides a line on the page give a visual separation  You can set attributes within the tag to determine appearance such as size and color.

38. Text Size  - makes the text one size bigger than the default.  - makes the text one size smaller than the default.

39. Unordered Lists  Lists items using a bullet or an image in place of a bullet  item 1 item 2 item 3

40. Ordered List  Lists items with numbers, letters or roman numerals  item 1 item 2 item 3

41. Definition List  Used to create a glossary or FAQ page 

42. Nested Lists  Lists can contain other lists  The browser will automatically the bullets or numbering style based on the level of nesting

43. Nested Lists (cont.) Movie Channels HBO Show Time Learning Channels Discovery Channel History Channel

44. Linking  One of the best features of HTML is our ability to link to other pages  You can link to another page in your web site, an outside url, another part of the page you are on or an email address.  Use the tag or anchor tag to create a link.

45. Inter document linking  You can link to a page within your web site.  You should try to list the entire path to that file  Home

46. External Link  You can create a link to another web page outside of your website  Consider using the target attribute to open up a new window  Download latest version of Adobe Reader

47. Email link  You can create an email link to open the users default email program and specify the email addres it is to be sent to.  Web Help mailto:webmaster@mypage.com

48. Intra-document links  You can create a bookmark on a page using a named anchor  The spot on the page you want to set as a bookmark uses the name attribute with no href.  The link you want to create that makes the user jump to a named anchor uses the href.

49. Intra-document links (cont.) Movie Channels Available Movie Channels Through Cable We offer several movie channels including HBO, Show Time and Stars

50. GIF Images  Graphic Interlaced Format  Used for buttons, logo’s, drawings and non-photographic images  Download quickly  Limited to 256 colors  Created in graphic design programs such as Photoshop, Paint Pro or Fireworks

51. GIF Variations  Interlaced – gif will come into focus gradually while the rest of the page loads  Transparent – page background can show through transparent parts of the image so you can have curved edges or other shapes  Animated – images saved in a single file that allow for simple animated images.

52. JPG Images  Joint Photographic Experts Group  Used for photographic images  Usually a bit bigger in size than gif images and may take longer to load

53. Image Tag  - does not require a closing tag  Src attribute defines the path to where the image is stored.  Width and height – you can define the width and height of an image so the browser does not have to determine the dimensions of the image

54. Alternative Text  Description of the image or indication of the purpose of the image  Displayed if users shut off images in their browser  Screen readers read the alternative text  Screen tip on mouseover

55. Image Border  You can use the border attribute to create or remove a border on an image.  Set the border thickness in pixels: border = “1” border = “0” – no border

56. Aligning Text  The tag embeds the image in the HTML document.  Text will appear above or below the image  Use align attribute to align text the left, right, top or middle of the image.

57. Image as a Hyperlink  You can make an image a hyperlink by wrapping an around the tag

58. Image Map  You can use an image map to make part of an image linkable – may be used when displaying a map and you can click on different states to display different pieces of information.  Ismap – server side processing of clicking on a map.  Usemap – client side processing of clicking on a map.  http://www.image-maps.com/ http://www.image-maps.com/

59. Usemap Example

60. Attributes  Tags such as, or can have attributes set within the tag for a background image, background color or link state  Bgcolor- set this to give that element a background color  Background – set this attribute to the url of an image to give it a background image.

61. Attributes (cont.)  In the tag you can set the state of links  Link=“orange” - sets any link in the body of that page to orange before it is visited  Vlink=“red” - once a link is visited, it sets the color to red.  Alink=“green” - when you click on a link to make it actve the color will be green.  These attributes are deprecated in HTML 4.0 because they should now be set with styles.