PROJECT 01 NOTES

  1. Project Intro
    1. Nothing new
  2. Setting up the Workspace
    1. Panels
    2. creating new HTML document
    3. Split/Design view
    4. View Mode - changes vertically + horizontally
    5. Customize tool bar -window --> toolbar
    6. Properties Panel - window --> properties
    7. Docking properties panel at the botttom
    8. Make a new workspace
  3. HTML5 Page Structure
    1. Doctype - type of HTML
      • tells the web browser what version of HTML is being used by this document
    2. All code has to stay between <html> and </html>
    3. <head> - contains informations about this HTML page that wont display in the browser
    4. <body> - contains all the visible content the browser will display
    5. Make sure you doont ever have any tags between the <body> and <html> tags
    6. save files!!!
  4. Adding Text Content
    1. <p> tags - paragraph
    2. Change headings
      • <h1> - largest heading
      • <h6> - smallest heading
    3. Blockquotes
    4. <em> tag - creates italics
    5. <strong> - creates bold text
  5. Adding Images
    1. Root folder - the top folder in any file system
    2. Be aware of copyright status
    3. Creative Commons Licesnses
      • Atteribution - you must give credit to the original copyright owner
      • Share Aliken - you can only share your new project under the same licesnse permissions as the original work
      • Non-Commercial - the work may not be used for commercial purposes
      • No Derivitives - you may not change the work in any way
    4. Four best file types:
      • JPG
      • GIF
      • PNG
      • SVG
  6. Creating Lists
    1. <ol> - Order List (numbered)
    2. <ul> - Unordered List (bulleted)
    3. <li> - Identifies each list item in an ordered or unordered list
    4. Must be used with a <ul> or <ol> tag
  7. Creating Tables
    1. <table> - designates the beginning/ending of the table
    2. <tbody> - designates a proportion of the table as a header
    3. <tr> - defines a row of data cells in a table
    4. <td> - defines a data cell in a table
  8. Adding Hyperlinks
    1. Created hyperlink (Insert or Properties panel)
      • <a> - creates a hyperlink
      • href - hypertext reference; stores the URL for the hyperlink's
      • <a heref="URL">Your Text</a>
    2. absolute hyperlink - does directly to a full URL adress, beginning with http://www.
  9. More about Images
    1. Insert --> image
    2. Assests panel - lets you organize all the assets in your site, regardless of where they are in the root folder
    3. Asset - any file the browser uses to display content for your site, including images, colors, fonts, videos, and even hyperlink locations
    4. Commit Image Size - permanently resizes the original image file to match the size used in your page's HTML
    5. Hotlinking - the unprofessional practice of displaying an image using a link to the file on a different website's server
    6. DO NOT HOTLINK
  10. Copyright and Hotlinking
    1. HTML creates the content + structure of your webpage
  11. Introducing CSS
    1. CSS stands for Cascading Style Sheets
    2. Used to style the appearence of your HTML elements
    3. CSS rules belong inside the HTML page's <head>
    4. Selector - Indicates which HTML elements the rule will apply to
  12. Styling body and text
    1. Hex Color Values --> Numbers 0-9 Letters A-F (F is the highest value)
    2. # FF 00 00 = red
    3. # 00 FF 00 = green
    4. # 00 00 FF = blue
    5. # FF FF FF = white
    6. # 00 00 00 = black
    7. alpha - level of opacity in decimals --> 1.00 is 100% and 0,50 is 50%
  13. Styling lists, tables, and hyperlinks
    1. Padding --> top, right, botom, left
  14. Project Planner (Super Fan Page)