Scribd Logo
Upload

Welcome to Scribd!

  • A Touch of HTML

    Uploaded by

    api-237895460
    8 views20 pages
    - Copyright - Registered Trademark - Fractions - Degrees - Cent Symbols Cont. When placing these symbols on a site, always start with &. Adding the ability to scroll is simple. The hardest part is deciding what area you want scrolling.

    Original Description:

    Original Title

    a touch of html (2)

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    - Copyright - Registered Trademark - Fractions - Degrees - Cent Symbols Cont. When placing these symbols on a site, always start with &. Adding the ability to scroll is simple. The hardest part is deciding what area you want scrolling.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views20 pages

    A Touch of HTML

    Uploaded by

    api-237895460
    - Copyright - Registered Trademark - Fractions - Degrees - Cent Symbols Cont. When placing these symbols on a site, always start with &. Adding the ability to scroll is simple. The hardest part is deciding what area you want scrolling.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 20

    A Touch of HTML

    Created by Nick Merrigan

    HTML
    In this presentation we will be talking about:
    Symbols you may want to know
    Adding a scroll bar to your site
    Having a navigation bar that has a drop down
    menu.

    Symbols
    There are a lot of symbols that people use
    when writing stuff down. Here we will look at
    some that you may run into when creating a
    simple website:
    Copyright
    Registered Trademark
    Fractions
    Degrees
    Cent

    Symbols Cont.
    When placing these symbols on a site, always
    start with &. Here is the code for these symbols

    Copyright: ©
    Registered Trademark: ®
    Degrees: °
    Cent: ¢
    Fractions
    : frac14;
    : frac12;
    : frac34;

    Symbols Cont.
    If those arent any of the symbols you wanted,
    you can always find a site that has these
    symbols. A good site to go to is:
    http://ascii.cl/htmlcodes.htm

    Scrolling
    Adding the ability to scroll is simple. The hardest
    part is deciding what area you want scrolling.
    The easiest way of adding a scroll bar is by
    inserting a div. You can try this with one of your
    recipes if youd like. Add a div below the body
    tag. Name this div content. <div id=content>
    Next decide where you want the div to end.
    Place the closing div at the end of your recipe,
    right above the footer. </div>

    Styling the Scroll Box


    Now that we have the div, lets add the ability to scroll. We do this
    by adding CSS.
    First call upon the div. #content{
    Next decide how tall you want your scroll box. You may find
    yourself playing around with this number to get the desired height.
    height: 200;
    Next decide your width. width: 300;
    Lastly, lets tell the CSS this will be a scroll box. To do this lets add
    overflow. overflow:scroll;}
    #content{
    height: 200;
    width: 300;
    overflow:scroll;
    }

    Scrollbar
    That is how you make a scroll bar. You can of
    course change the color of the scroll box, or
    have a background image. Just change the
    CSS to something that you desire.

    Drop Down Menu


    Lets start off by creating a menu in HTML.
    <!doctype html>
    <html>
    <head>
    <title>Drop Down Menu</title>
    </head>
    <body>
    <nav>
    <ul>
    <li><a href=>Home</a></li>
    <li><a href=>Turtorials</a></li>
    <li><a href=>Articles</a></li>
    <li><a href=>Contact</a></li>
    </ul>
    </nav>
    </body>
    </html>

    Sub Menu
    Now that we have the basic menu, lets create sub menus for Tutorials and Articles.
    <li><a href="">Tutorials</a>
    <ul>
    <li><a href="#">Photoshop</a></li>
    <li><a href="#">Illustrator</a></li>
    <li><a href="#">Flash</a>
    <ul>
    <li><a href="#">Actionscript 2</a></li>
    <li><a href="#">Actionscript 3</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="#">Articles</a>
    <ul>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">User Experience</a></li>
    </ul>
    </li>

    Drop Down CSS


    Now that we have the menu, lets make it
    work. Start off by making an internal style
    sheet.
    <style type="text/css">
    </style>

    CSS Cont.
    Lets start off by getting the menu to do the basic
    function of dropping down.
    nav ul ul {
    display: none;
    }
    nav ul li:hover > ul {
    display: block;
    }
    Refresh your page now and you should just see the
    four main links, scroll over the links and you will se the
    menu start to work.

    CSS Cont.
    Now lets give the menu a color, padding, round edges, and a position.
    nav ul {
    background: rbc(210, 210, 210);
    padding: 0 10px;
    border-radius: 5px;
    list-style: none;
    position: relative;
    display: inline-table;
    }
    nav ul:after {
    content: ""; clear: both; display: block;
    }
    Refresh your page, you can play with the color, radius, and padding to see
    different looks.

    CSS Cont.
    Go back to the top and add some more CSS to the
    nav ul ul then refresh the page.
    nav ul ul {
    display: none;
    background: rgb(190, 190, 190);
    border-radius: 0px;
    padding: 0px;
    position: absolute;
    top: 100%;
    }

    CSS Cont.

    Now lets get that menu in line. Lets have the drop down drop below the actual
    word in the menu.
    nav ul li {
    float: left;
    }
    nav ul li:hover {
    background: brown;
    }
    nav ul li:hover a {
    color: #ffffff;
    }
    nav ul li a {
    display: block;
    padding: 20px 40px;
    color: black;
    text-decoration: none;}

    Preview
    Preview the page now. Your links should start
    off black and when you scroll over the section
    you want, the box should be brown. Your up
    position should be a light gray and the
    submenu should be a slightly darker gray.

    CSS Cont.
    nav ul ul li {
    float: none;
    border-top: 1px solid rgb(230, 230, 230);
    border-bottom: 1px solid rgb(150, 150, 150);
    position: relative;
    }
    nav ul ul li a {
    padding: 10px 30px;
    color: #ffffff;
    }
    nav ul ul li a:hover {
    background: blue;
    }

    Preview
    Now preview the page and you should see
    some differences. When you hover in a
    submenu, the color changes to blue. Also
    when you go into a submenu, you can see a
    border separating the buttons apart. Now lets
    add the final touch.

    CSS Cont.
    nav ul ul ul {
    position: absolute; left: 100%; top:0;
    }
    This bit of code will display the sub sub menu to
    the right of the sub menu it goes with.

    Conclusion
    You learned how to create symbols, scroll
    bars, and a drop down menu. There are still
    several things you can adjust in the scroll bar
    and the drop down menu. Just explore the
    CSS and see how things will effect it.

    You might also like