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

        margin:0 auto;        
        margin:25px 0 0 0;
#bottom a{
#bottom a:link{
#bottom a:hover{
        margin:25px 0 0 0;
#copy a {
#footer #copy a:link{
#footer #copy a:hover{

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 …?

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 *