2014-02-24

posted Feb 24, 2014, 5:25 AM by Samuel Konstantinovich   [ updated Feb 24, 2014, 5:41 AM ]
    • Reminder of overlapping tags
    • spaces in filenames
    • index.html


    THINGS YOU NEED TO DO:(they were already assigned)
    1. Rename any index.html file in your public_html to something else. I want to be able to list your directory contents
    2. Make sure you have assignments.html file in your public_html directory, this document will be updated with links to any of the web pages you make. Right now it should have a link to lab00(page.html) lab01a and lab01b and lab02(profile)
    3. Fix any remote links in your assignments by download a local copy of the images and linking the local files to the document.
    4. Lab02 due this Wednesday. (you should have started it)
      1. Try to theme your page as professional, geeky, or silly
      2. Talk about what you are passionate about, hobbies, interests, etc.
      3. make it look as good as you can, use any tags you need (even ones I didn’t teach)
      4. Any images should be local, and should be “safe for work,”
      5. your page should link back to your assignments.html stating “this is where you can find more of my web pages” or something similar.
      6. Content is important. That doesn’t require technical knowledge, so there is no excuse to have a very tiny page. (Talking about yourself should be easy)
      7. The page doesn’t need to be super complicated, but it should not just be a wall of text without formatting. Look at how some web pages look and copy some ideas for how you want things to look.

    Goals: file system directory tree, external links, and absolute/relative paths

    Different ways to make hyperlinks:

    You know how a URL is formatted:
    protocol + IP address + path = URL
    http://192.168.1.20/home/users/hi.html
    (we can substitute a name for the address, if someone pays to make a DNS record)
    http://www.sitename.com/home/users/hi.html

    THESE ARE EXTERNAL LINKS
    you don't always use a full URL(external link) when you make a hyperlink! There are other ways to link to your own website.


    EXTERNAL links have the full site: (always starting with http:// )

    <a href="http://www.mysite.com/index.html">Go To My Site</a>


    You should use links relative to the document:  

    (require you to know the directory structure so here is a little detour to the land of directory trees!)
    This site has an index.html file at the root of the site (the mysite.com folder would be like your public_html  folder)

    INTERNAL links to your site come in two varieties: relative and absolute.

    RELATIVE PATH:

    1. If the file you want to link to is in the same directory: ( they NEVER start with /)

    • Page1 can link to sourcepage (this link MUST be in page1 to work)

    <a href="sourcepage.html">Go To Sourcepage</a>


    2.If the file you want to link to is in a sub directory:
    • page1 can link to page2

    <a href="directory2/page2.html">Go To Page2</a>


    • Index can link to page2,

    <a href="main-directory/directory1/directory2/page2.html">Go To Page2</a>


    3.If the file is OUTSIDE of the directory you can use the .. to signify to up a directory in the path.
    • Page2 can link to page1: (go up one level)

    <a href="../page1.html">Hollah Page1</a>



    • Page1, sourcepage, page3, or page4 can link to the index (because it just means look at the directory two levels up:

    <a href="../../index.html">Go to the index</a>


    • Page1 can link to page3: (go up, then go into directory3)

    <a href="../directory3/page3.html">Hollah Page3</a>


    ABSOLUTE PATH:


    An absolute path has to be referring to a page starting with a / which means start at the highest level of this site

    1. Any file can link to page4 if they do the following:
    <a href="/main-directory/directory4/page4.html">Go To Page 4</a>

    (The exact same link will work from any page anywhere in the site!)


    #NICE OPTIONAL PART#
    Link to a Specific Part of a Page (Internal Hyperlink)
    Internal hyperlinks require an anchor tag with the "name" attribute like so:
    <a name="part2">Part 2</a>

    Then create a hyperlink which refers to this anchor with a hash (#) like so:
    <a href="#part2">Go To Part 2</a>


    More directory discussion:


Comments