Friday, March 1, 2019

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 ++

<html>
<head>
<title>Creating a Web Layout</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<div id="container">
        <div id="footer">
          <p id="bottom">
                  <a href="#">HOME</a> 
                  <a href="#">PRODUK</a> 
                <a href="#">ARTIKEL</a> 
                <a href="#">MEMBER</a> 
                <a href="#">TESTIMONIAL</a>
                <a href="#">ABOUT US</a> 
            </p>
              <p id="copy">
              Copyright &copy; 2011 <a href="http://fajaryusuf.com">Fajar Yusuf.com</a>
            </p>
        </div>
</div>
</body>
</html>

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 . :)


Reviewer: Fajar Yusuf
ItemReviewed: Editing Footer

Seseorang yang ingin membagi pengalaman dan ilmu yang berguna untuk para pembaca FajarYusuf.Com :)

Cobalah untuk memilih Pelajaran Pemrograman dan belajar dari Materi Pertama
EmoticonEmoticon


TENTANG SITUS

SITUS INI ADALAH SITUS PEMBELAJARAN PEMROGRAMAN DAN JUGA PEMAHAMAN TERHADAP TEKNOLOGI KOMPUTER. KALIAN BISA MENGIKUTI PEMBELAJARAN PEMROGRAMAN DENGAN BERTAHAP PADA MATERI YANG SUDAH SAYA SEDIAKAN, JIKA ADA MATERI YANG MEMBINGUNGKAN SILAKAN LAKUKAN KOMENTAR PADA MATERI YANG ANDA TANYAKAN ATAU KALIAN BISA MENGHUBUNGI SAYA DIHALAMAN KONTAK.