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

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

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

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

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

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

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

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

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

modifiers  bold  italics  underline  strikethrough

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

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

Images  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

Modifiers  Height  Width  Border  Align

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

To link to another page on same web  To link to another web   Must use http to send to another web on the internet

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

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

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

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

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

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 

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

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

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

Table Code Results

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

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

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

Example of Frame code

Frames Code Result