Editing Footer

Editing Footer

After you create a layout, navigation, content and column right, now you need to edit footer. You must first create a folder named Chapter V Edit Footer , and in that folder create folder also images, because you need images for the footer.

Creating an HTML File Footer

Type the following HTML code in notepad ++



Creating a Web Layout





       





The explanation for the above code:

  • HTML file above I made the writing-HOME-PRODUCTS-ARTIKELMEMBER-ABOUT US TESTIMONIAL with each own I give the link "#"
  • I also give writing Copyright and code and copy the code to create the © symbol and its name with a link to fajaryusuf.com.
  • Each was I given selector. 

Save the file into the folder CHAPTER V Edit Footer , name footer.html.

Editing Footer

Create CSS Footer

Now is the time you create a CSS file so that the footer nicer to be presented to the user. 

Type the CSS code below on the software you use

#container{
        width:1000px;
        margin:0 auto;        
        }
#footer{
        background-image:url(images/footer.gif);
        width:1000px;
        height:128px;
        float:left;
        }
#bottom{
        text-align:center;
        font-family:Geneva;
        font-size:12px;
        margin:25px 0 0 0;
        font-weight:bold;
        letter-spacing:1px;
        word-spacing:8px;
        }
#bottom a{
        color:#FFFFFF;
        }
#bottom a:link{
        text-decoration:none;
        }
#bottom a:hover{
        text-decoration:underline;
        color:#FFFF00;
        }
#copy{
        margin:25px 0 0 0;
        font-family:verdana;
        color:#FFFFCC;
        font-size:10px;
        text-align:center;
        }
#copy a {
        color:#FFFFCC;
        }
#footer #copy a:link{
        text-decoration:none;
        }
#footer #copy a:hover{
        text-decoration:underline;

Explanation of the CSS code that you have created:
  • #container {...}create a page with a width of 100 px margin 0 with the placement of the middle (auto).
  • #footer {...}to set footer with 1000px width and height of 128 placements float: left
  • #bottom {...}for setting the writing placement test ditengan bottom menu (text-align: center), using the Geneva font, the font size 12px, we give a margin of over 25 px and the rest 0, made bold font (bold) with spacing between letters 1 px, and the spacing between words 8 px. 
  • #bottom a {...}to set the writing by link white (# FFFFFF).
  • #bottom a: link {...}to control the effects of bottom menu without underline text (text decoration: none).
  • #bottom a: hover {...}to give effect if the mouse hovers over the article by adding underline (textdecoration: underline) and text color change color to yellow (# FFFF00).
  • #copy {...}for setting copyright article, we give a margin of 25 0 0 0, using Verdana font, light yellow (#FFFFCC), 10 px font size, font placement center.
  • #copy a {...}provide font color setting by a link with the same color with the word copyright is light yellow (#FFFFCC)
  • #footer #copy a: link {...}give effect to underline the link without giving the value none (text-decoration: none)
  • #footer #copy a: hover {...}effect on the link if you mouse over the text with effects underline (textdecoration: underline)
Then you save this file to a folder CHAPTER V Edit Footer named style.css


Editing Footer


If you are correct then the folder view as above. 


Then you run the file footer.html to click 2 times, so the results are:

Editing Footer

Very interesting is not if you master CSS ...?

Conclusion: 
The HTML file is only used to create content and settings for the display settings using CSS.



You can continue to the end of the matter, namely CSS:  Combining Whole Matter CSS. 



If you have any questions please comment. 

Do not forget to like and share. 

Learning Programming in fajaryusuf.com . 🙂

Spread the love

Fajar (Ucup)

The owner and author of FajarYusuf.com and also someone who likes to share interesting information with others.

Leave a Reply

Your email address will not be published. Required fields are marked *