HTML Code

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

• 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
• 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
Example of table code

• 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

• For the Lord your God is living among you. He is
  a mighty savior. He will take delight in you
  with gladness. With His love, He will calm all
  your fears. He will rejoice over you with joyful
  songs.
• -Zephaniah chapter 3 verse 17

30
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

31
Frames

• When using frames, tag is not used
• Designates how the page is split
• Must be modified with either rows or cols
• is used to designate remainder of the page

32

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

33
Example of Frame code

34
Frames Code Result