PROJECT 02 NOTES

  1. HTML5 Structural Elements and the DOM Panel
    1. Title tag/ how to change
    2. DOM panel - helps you organize HTML tags in your page as an "interactive outline"
    3. Header tag - belongs in body/ space for visual introduction
    4. Main tag - hold main content
    5. Footer - contains closing information at bottom of page
  2. External CSS Rules
    1. Internal CSS - rules are contained inside documant itself
    2. External CSS - rules will be stored outide this page
    3. <link> - links an HTML page to other resources
    4. Background Repeat
    5. header image
  3. Floating Boxes
    1. aside
    2. Float rule
    3. floated items only show up next to each other if ther is enuogh space
    4. floating responds to the size of the browser
    5. float all elements that will line up next to each other
    6. Turn the float off for the first element that should line up with the others
    7. footer - clear both
    8. CSS comment /* */
    9. HTML comments
  4. Div Containers
    1. <div> - a box/ defines an area
    2. conatiners - used to hold other boxes
    3. To center container: marginauto
  5. Creating Content
    1. <article> tag
    2. typing inlive mode
    3. padding in main tag rule becuase it is space on the inside of a box's border
    4. layout sizes with divs
    5. eyedropper tool
  6. Positioning Images
    1. float image to right
    2. margin for only one area
  7. Styling Text
    1. adobe fonts
    2. google fonts
    3. inserting a new font into document
    4. make sure your font is easy to read
    5. sans-serif
    6. Inline CSS Rule - used to apply style rules to a small portion of code
    7. How to change part of the text font
  8. Adding Classes to Existing Elements
    1. ID - designates a unique HTML element that can only be used once on each page.
    2. Can not have same ID more than once
    3. Class selector
    4. camel case - 1st word is lowercase, all others are uppercase
    5. add clss to image fromproperties panel
    6. CSS classes overide elements
  9. Creating a Nav Bar
    1. clean, easy to read, organized
    2. <nav>
    3. unordered list
    4. inline element - HTML element does not start a new line, never takes up more space than necessary.
    5. block element - HTML element that always starts on a new line and extends across the full width of the page.
    6. Centering the nav bar
  10. Styling Nav Links
    1. Page properties
    2. LInk colors
    3. Link, visited, rollover, and active
    4. underline style
    5. put in external styles sheet
    6. nav a
  11. Styling Buttons
    1. External CSS files - can be linked to multiple HTML pages
    2. php
    3. <form>
    4. textarea
    5. emial box
    6. text box
    7. <br> - creates line break
    8. name - identifies a form field that the php can target
    9. value - default text
    10. box size
    11. radio buttion group
    12. multiple choice/submit button
  12. Submit Button
    1. inserting the button
    2. Bak end - sits on web site server
    3. Front end - What is visble to visitors
    4. Get method - adds the data from the form into the URL page request
    5. designing submit button
    6. font, border radius, color
    7. box shadow
  13. Cascading Style Sheets
    1. Maintain consistency
    2. CSS - cascading style sheets
    3. External CSS file - applyto multiple pages, least specific
    4. Internal CSS rules - only to that documen, more specific
    5. Inline CSS styles <span> - applies to code only in that tag, most specific
  14. Connecting Our Site Pages
    1. external rule can apply to multiple pages
    2. update links
    3. Find and Replace