Notes 9/6

 

  • (Line 1) <!doctype html> stands for HTML5 being used
  • (Line 2) <html> identifies language you’re using
  • (Line 3) <head> begins the head
  • (Line 5) <title> identifies the title of your website, title on the tab, at end of title put </title>
  • (Line 6) external style sheet (ignore this)
  • (line 7) </head> closes the head
  • <p> means paragraph and </p> closes the paragraph
    • Everything needs opening and closing tabs (except img src (line 20) because it is self contained)
  • Use this screenshot for line number reference aboveScreen Shot 2016-09-06 at 9.52.53 AM.png
    • A comment doesn’t show up on website, notes for yourself <–! Comment here→
    • <header> </header>
    • <main> </main>
    • <footer> </footer>
    • Screenshot below is how you get the wordsScreen Shot 2016-09-06 at 10.28.12 AM.png
    • Screenshot below is how you get the colorsScreen Shot 2016-09-06 at 10.30.47 AM.png
    • In screenshot above if you make numbers larger (ex is the 75px) it will make that space color larger
    • To make borders put under where background color is on screenshot above (put // before background color to hide that) put border: solid size (ex 1px) select color
    • Screenshot below is how I got borders on web pageScreen Shot 2016-09-06 at 10.50.56 AM.png
    • Make sure you always have all your ; because if not some stuff isn’t going to show up
    • To link things to pages use the tag <a> and closing tag </a> but to make it do something do what is in screenshot below with that website as link, doesn’t have to be google like example Screen Shot 2016-09-06 at 10.56.35 AM.png
    • Make sure to tidy up your code so it isn’t confusing (ex after ending each link with the </a> hit enter so the next line is the next link starting with <a> then the link part
      • To get the dividers like in screenshot above keep it outside of link
      • To change link colors type what is in screenshot belowScreen Shot 2016-09-06 at 11.12.27 AM.png
      • Self explanatory but unvisited links, visited links, the color when hovering over, and an active link are certain colors
      • Use adobe.color.com to find color combinations that you can ender in to the color places to make it pretty; you can then go back and use that to fix up other background colors from earlier
        • To change menu text do screenshot below (use whatever font you want just an example)Screen Shot 2016-09-06 at 11.27.59 AM.png
          • If you put text-decoration: underline; below the color for a:hover{  (hover over) in screenshot above last screenshot you can make it underline the link when you hover over it
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s