Coding

1
Coding

• HTML
• Hypertext Markup Language
• Elements
• HTML elements are a set of instructions that
  describe the structure and content of a Web page.
  
• These instructions are applied to the content of
  a Web page through the use of tags.
• HTML elements can either be container or empty
  elements.
• A container element contains the data that is
  intended to be affected by that element. It
  consists of opening and closing tags.
• Tags
• HTML container elements consist of two tags. The
  opening tag marks the beginning of the element
  and the closing tag marks the end of the element.
  Anything between these tags is affected by the
  element.

2
Coding

• HTML
• Hypertext Markup Language
• Elements
• HTML elements are a set of instructions that
  describe the structure and content of a Web page.
  
• These instructions are applied to the content of
  a Web page through the use of tags.
• HTML elements can either be container or empty
  elements.
• A container element contains the data that is
  intended to be affected by that element. It
  consists of opening and closing tags.
• Tags
• HTML container elements consist of two tags. The
  opening tag marks the beginning of the element
  and the closing tag marks the end of the element.
  Anything between these tags is affected by the
  element.

3
Coding

• HTML
• Highest level set of tags and contains all the
  other HTML tags of a webpage.
• Heading
• Identifies the portion of the file that contains
  the head elements. Simply describes various
  aspects of the page and isnt actual text or
  graphics that are displayed on the page.
• Body
• Identifies the portion of the file that is the
  body of the web page. Enter text and graphics
  that are displayed when your page is viewed in a
  browser.

4
Coding

• Container Element Syntax Rules
• Have an opening and closing tag
• Opening tag has tag name enclosed in less than
  and greater than symbols
• Closing tag also has name enclosed, but the less
  than symbol is always succeeded with a forward
  slash (
• The content that is intended to be affected is
  contained within these tags
• Tags can be lower or upper case, but preferably
  work in lower.
• File Names
• All file names must end with .htm or .html file
  extensions.

5
Page Titles

• Page Title
• The page title is a label that will identify
  the page in your favorites or bookmarks menu.
• Guidelines
• Be brieflong page titles can easily becoming
  annoying menu options
• Be specific
• Include name of company or web site
• Avoid market slogans
• Dont serve a purpose to someone trying to create
  a shortcut to the page
• Meaningless code or product numbers
• Numbers are not useful to the end user as
  compared to product names

6
Page Background

• Attribute
• A part of an HTML element that modifies the
  characteristics of that element. Most elements
  have attributes that you can modify to suit your
  needs.
• Bgcolor
• Specifics a solid background for the body of the
  webpage
• Background
• This specifies an image file to be used as the
  background
• Always have the syntax namevalue.

7
Colors

• Color Choices
• Hexadecimal color
• Uses hexadecimal notation to describe the RBG
  (red, green, blue) components of a color.
  Combining these gives you a palette of millions
  of colors to choose from.
• Web-safe colors
• Are a group of 216 colors that will display
  exactly the same on every computer in every
  browser
• Hexadecimal notation
• Made up of three bytes (one each for red, green,
  and blue)
• Defined by a pair of digits and follows a single
  punt ()
• First two make up red, second green, and third
  blue.
• Range of digits is 0-9, a ,b, c, d, e, f.
• Zero is the least amount of that color while f is
  the greatest.
• 00 would be no actual color
• 00ff00 would be no red color, most amount of
  green, and no blue, thus resulting in a pure
  green

8
Colors

• There are only 10 web-safe color names and that
  is why hexadecimal is more powerful
• White, black, aqua, red, lime, blue, yellow,
  fuschia (magenta)
• Web-safe hexadecimal colors only uses the
  following pairs of identical digits to define the
  three components
• 00, 33, 66, 99, cc, and ff.
• Paragraphs
• Unless you want all the text in the body to
  appear as a single, continuous string of text,
  paragraph tag is needed.
• . Use the align attribute for left,
  center, right.

9
Images

• Web Images
• Images are large and choosing the right format to
  compress the file is important.
• .gif and .jpeg are the two most common
• Dont use an image resolution that is more than
  72 pixels per inch (ppi)
• That is the maximum that can be displayed on a
  webpage.
• altvalue
• Img (element)
• Srcvalue absolute or relative file pat that
  gives the location of the image file
• Heightvalue widthvaluegive the height and
  width of the image. This is better than letting
  the browser figure it out on its own (takes less
  time)
• Altvalue displays alternative text that
  describes the graphic (hoover over picture to
  display)
• Bordervalue displays a border around the image.
  Default width is 0.

10
Lists

• Example
  • Susie
  • Mack
  • John
  • Options for bullets
  • Disc (default)
  • Circle
    in the opening tag
    • Square
    • Options for numbers
    • 1, a, A, i, I
    
    11
    Comments
    • Comments
    • Do not display in the web page
    • Developers name and contact information that you
      do not want displayed
    • Notes to yourself or another developer about
      past, present, or future plans for a section of
      the html code
    • browser--
    • Footers
    • Located at the bottom of the Web page and usually
      contains information about the page, company,
      etc.
    
    12
    Comments
    • Horizontal Rule
    • Help separate pages into sections (visually)
    • ( for every horizontal rule you want to
      create
    • Line Breaks
    • 
      once for every line break you want to create
    • nbsp to enter a non-breaking space
    • Grouping Elements
    • container element is to enable HTML authors
      to logically group elements (divide one set of
      related content from other content)
    
    13
    Comments
    • Linking web pages
    • Links are hotspots for your mouse, that when
      clicked, connect you to the file that the link
      references.