1 / 33

HTML Code

HTML Code. What we will cover. Basic HTML Body Font Images Hyperlinks Tables Frames. 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 <html>. Start a page. <html>

leah-oneill
Download Presentation

HTML Code

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 <html>

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

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

  6. <title> • Gives page a name • Should remain the same or similar for entire site

  7. <body> • All content that you want the viewer to see is written here • Tag can be specifically modified • <background> • <bgcolor> • <bgproperties>

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

  9. <body bgcolor> • 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. <font> • Color • Sets the color of the font • Face • Sets the desired font name • Size • Sets the desired size, limited to 1 - 7

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

  12. <font> modifiers • <b> • bold • <i> • italics • <u> • underline • <strike> • strikethrough

  13. <font> alignment • <p> • Starts a new paragraph with a double space • Can be aligned to left, center or right • <br> • Line break, no double space, unable to align • <div> • Similar to <br> but can be aligned, overrides <p>

  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 • <img src=“http://www.website.com/pic.jpg”> • If located on another web • <img src=“pic.jpg”> • If located within same folder on your web • <img src=“images/pic.jpg”> • If located in images folder on your web • This is how we will do it

  16. <img src> • Modifiers • Height • Width • Border • Align

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

  18. <a href> • To link to another page on same web • <a href=“PAGENAME.html”> • To link to another web • <a href=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> • <th> • Table Header • <tr> • Table Row • <td> • Table Data

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

  22. <table> • 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 <table> 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. <th> • 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 • <th colspan=X> • X being the number of columns in the table • <th bgcolor=“color”>

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

  26. <td> • 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. <table bgcolor=“green” width =100%> <th colspan =2> This is a table </th> <tr> <td bgcolor=“blue”> This is the top left </td> <td> <font size =7> This is the top right </font> </td> </tr> <tr bgcolor=“pink”> <td width=75%> This is the bottom left </td> <td> This is the bottom right </td> </tr> </table>

  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, <body> tag is not used • <frameset> • 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. <frame src> • Just as <img src> places a picture on screen, <frame src> places a webpage in a frame • Does not need to be closed

  32. Example of Frame code <frameset cols="120,*"> <frame src="menupage.htm" name="menu"> <frameset rows="*,50"> <frame src="basic.html" name="main"> <frame src="bottombanner.htm" name="bottom"> </frameset> </frameset>

  33. Frames Code Result

More Related