1. HTML Code

2. What we will cover Basic HTML Body Font Images Hyperlinks Tables Frames

3. Code Rules Almost all code works in pairs Code must be written within carrots Ending code will have a slash CaSe InSeNsiTiVe Must start all web documents with

4. Start a page  Tells the browser to decipher code based on html rules  Mostly unseen code  Tells browser what other languages will be used  Mostly visible code  Content of page

5. Will contain the following code  Tells browser what to put in the title bar of page  Tells browser what, if any, scripting language is being used  Designates meta tags for search engines  Directs CSS functions

6. Gives page a name Should remain the same or similar for entire site

7. All content that you want the viewer to see is written here Tag can be specifically modified 

8. Sets image in background of page Can be very distracting Must be very careful when using  Goes inside tag  Sets fixed image that the information “floats” on

9. Adds a color to the page Most good websites use plain white If choosing a different color, be sure to choose a high contrast font color

10. Color  Sets the color of the font Face  Sets the desired font name Size  Sets the desired size, limited to 1 - 7

11. Sets a font for the entire page Declared once immediately after tag Can be overridden by other font tags Good to use if you add a color to your background

12. modifiers  bold  italics  underline  strikethrough

13. alignment  Starts a new paragraph with a double space  Can be aligned to left, center or right  Line break, no double space, unable to align  Similar to but can be aligned, overrides

14. Images Images can make or break a web Should be used cautiously and be sure they are appropriate to the page Must be careful when aligning Can greatly increase load time of page

15. Images www.website.com/pic.jpg  If located on another web  If located within same folder on your web  If located in images folder on your web  This is how we will do it

16. Modifiers  Height  Width  Border  Align

17. Hyperlinks Known as Anchor tags  “Anchor Hyperlink REFerence Used to link pages to each other within a web Used to link webs to each other

18. To link to another page on same web  To link to another web  http://www.PAGENAME.com  Must use http to send to another web on the internet

19. Tables Most widely used method of formatting and arranging pages Can be nested  Tables set inside other tables Very heavy in coding, but pages look better and control remains in the hands of the designer

20. Tables Consists of 4 sets of coding  Table Header  Table Row  Table Data

21. code starts table Default settings  No border  Transparent color  Size defined by largest cell  Right aligned

22. Modifiers  Border Sets a visible border around the table and each cell  Bgcolor Gives table a color  Width  Align

23. Important details While the color of the table can be set in the tag, each cell is INDEPENDENT of each other Color, font, and alignment can all be changed in each individual cell Both a curse and a blessing  Gives ultimate control  Takes time to set each one

24. Table header  Sets a header for the table, commonly used as a title By default only one cell Can be modified to span entire table  X being the number of columns in the table 

25. Begins a row No displayable information Simply used to format table Can define color and alignment Cannot define font style

26. Table Data Sets individual cells All displayed information goes in between these tags Highest priority formatting codes  Color, font, alignment, width Colspan and rowspan allow for cell to be merged

27. This is a table This is the top left This is the top right This is the bottom left This is the bottom right

28. Table Code Results

29. Frames Formerly was a very popular method to format and arrange pages Fallen out of favor due to lack of support from browsers and slightly confusing coding techniques Partitions a single page into multiple “frames” for viewing several pages at once

30. Frames When using frames, tag is not used  Designates how the page is split  Must be modified with either rows or cols <frameset cols= <frameset rows= * is used to designate remainder of the page

31. Just as places a picture on screen, places a webpage in a frame Does not need to be closed

32. Example of Frame code

33. Frames Code Result