Add link to footer html

How To Create a Static Footer With HTML and CSS (Section 7)

In the final tutorial of the CSS series, you will create a static footer that stays in a fixed position at the bottom of the viewport as the visitor scrolls down the page. This tutorial will recreate the footer in the demonstration website but you can use these methods for other website projects as well.

Prerequisites

To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

This tutorial uses several social media icons as content in the footer. If you’d like to use these icons, download them now from our demonstration site and save them to your images folder as:

To download these images, click on the linked filename above and then click CTRL + Left Click (on Macs) or Right Click (on Windows) while hovering on the image and select “Save Image As”. Save the images with the instructed file names to your images folder.

Once you have your icons saved, you can proceed to the next section.

Adding a Class To Style Your Footer

First you will define a “footer” class by adding the following code snippet to the bottom of the styles.css file:

. . . /* Footer */ .footer  position:fixed; bottom:0; left:0; width:100%; height: 90px; background-color: #D0DAEE; > 

Save the styles.css file. In this code snippet you have added a comment to label the CSS code for the Footer section. You then defined a class named footer and declared several style rules. The first rule declares its position as fixed, which means the element will not move from the location you specify as the user scrolls down the page. This location is specified by the next two declarations: bottom:0 and left:0 , which specifies a location zero pixels from the left and zero pixels from the bottom of the browser’s viewport.

By changing these values, you can change the location of the element on the page. Note, however, that any value aside from zero needs to include the px suffix after the number. The ruleset also specified the width, height, and background color of the footer class.

You are now ready to add the footer content in the next section of this tutorial.

Adding a Footer Styled With Your Footer Class

To add the footer content, you will add a

tag:

Save your index.html file and reload it in the browser. (For instructions on loading an HTML file, please visit our tutorial step How To View An Offline HTML File In Your Browser). You should now have an empty footer section at the bottom of your webpage that stays in place as you scroll up and down the page:

Next you will add content to the newly created footer.

How To Add and Style Menu Items To Your Footer

In this step, you will add and style the menu items to the left side of the footer. These menu items can be used to link to other pages on your site. Currently, there is only one webpage on your site, so you can use the links we provide for demonstration purposes. Later on, if you add additional pages to your website you can create menu items here and add the correct links. You can learn how to create and link to new webpages with this tutorial on How to Build a Website with HTML.

Return to your styles.css file and add the following code snippet to the bottom of the file:

. . . .footer-text-left  font-size:25px; padding-left:40px; float:left; word-spacing:20px; > a.menu:hover  background-color:yellow; font-size:20px; > 

Let’s pause briefly to review each of the rulesets we’ve created:

• The first ruleset defines a class named footer-text-left that will be used to style the menu item text. Note that you are setting the float property to left so that the text assigned to this class will float to the left of the page. You are also using the word-spacing property to grant extra space between the menu items. If any of your menu items are more than one word, you’ll need to create a class for styling the menu items (instead of just changing the word spacing value).
• The second ruleset uses the hover pseudo-class to add a yellow background color to the text when the user hovers their cursor over the text.

Now you will add the menu items to the webpage. Return to your index.html file and add the following highlighted code snippet inside the footer container that you’ve already created:

. . . div class="footer"> p class="footer-text-left"> a href="index.html" class="menu">homea> a href="https://css.sammy-codes.com/about.html" class="menu">abouta> a href="https://css.sammy-codes.com/credits.html" class="menu">creditsa> p> div> 

This code snippet adds two menu items (“about” and “credits”), links these menu items, and styles the text with the footer-text-left and a.menu classes you just created.

Save both files and reload your webpage in the browser. You should receive something like this:

Adding Social Media Icons

Next you will add the social icons to the footer, which you can use to link to your social media accounts. If you want to use icons for different social media platforms, you can search for free icons on the web and download them to your images folder. Return to your styles.css file and add the following three rulesets to the bottom of your file:

. . . .footer-content-right  padding-right:40px; margin-top:20px; float:right; > .icon-style  height:40px; margin-left:20px; margin-top:5px; > .icon-style:hover  background-color:yellow; padding:5px; > 

Let’s pause to review each ruleset:

• The first ruleset defines the class footer-content-right and assigns it specific padding, margin, and float values. You will use this ruleset to style a element that will hold the social media icons.
• The second ruleset creates the class icon-style that will provide height and margin values to the size and position of the social media icons.
• The third ruleset uses the hover pseudo-class to add a yellow background to the icon when the user hovers their cursor over the text.

. . . . div class="footer-content-right"> a href="https://github.com/digitalocean">img src="images/github.jpeg" class="icon-style" alt="Github icon">a> a href="https://www.twitter.com/DigitalOcean">img src="images/twitter.jpeg" class="icon-style" alt="Twitter icon">a> a href="https://www.twitter.com">img src="images/email.jpeg" class="icon-style" alt="Emailicon">a> div> 

Make sure that you change the file paths and links with your own social media information.

This code snippet creates a container, which is assigned the style of footer-content-right the class. Inside this div container, you have added three social media icons using the HTML tag, and linked each image using the HTML tag.

You have also added the alternative text that describes each icon using the alt attribute. When creating websites, alternative text should be added to all images to support site accessibility for individuals who use screen readers. To read more about using alternative text with HTML, please visit the section on alternative text in our guide How To Add Images To Your Webpage Using HTML.

Save your index.html file and reload it in the browser. You should now have a fixed footer with three social media icons on the right that link to your accounts. The links should change color when the user hovers their cursor over them. To confirm your results, you can compare them to the gif at the beginning of this tutorial.

Conclusion

You have now created a static footer that stays in a fixed position at the bottom of the viewport as the visitor scrolls down the page. You can continue exploring footer design and content possibilities by changing values in the CSS classes that you created, or add different types of content to your index.html file. For more ideas on exploring design and layout possibilities for your website, the conclusion of this tutorial series has more suggestions for things to try like rearranging content sections, adding links to other pages, and changing layout styles using the box model.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Tutorial Series: How To Build a Website With CSS

This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

Источник

HTML Tag

The tag defines a footer for a document or section.

A element typically contains:

• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents

You can have several elements in one document.

Tips and Notes

Tip: Contact information inside a element should go inside an tag.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Global Attributes

Event Attributes

More Examples

Example

Related Pages

Default CSS Settings

Most browsers will display the element with the following default values:

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Как сделать якорь на footer?

У меня на странице есть footer. Я сделал для него ссылку-якорь, но она не работает. Хотя ссылка-якорь на другой footer(который находится ниже первого) работает. Что не так?

 
PhotoLi
  
PhotoLi - we TAKE photos
 ⁖ How we started ⁖ Our services   
 
Hello!
  
Please, leave your email and a phone number, to book a photosession
   
Email  
 
Phone Number  
 
I agree with rules and terms  
 
 
    
Our story began in January of 2022, when we decided to try photography.
 
Mathey - one of our main photographers and the ex-founder of "PhotoLi" was just a regular person who wanted to bring some colorful pictures to the world. His possesion has become even more powerful since that time and he is ready to create, take photos and share 'em with you.
  
"When I was young I always wanted to try photography, but there was no chance to do it. 
But when I met my team, everything had changed. 
We love working together, we love working with our clients" — Mathey Woodman
 
 
"To make our clients feel comfortable and comfident in the success of our photo session, 
we use only new and modern cameras and other devices. 
That's playing a big role" - Ashley Blackwood 
 
   
Party photosessions
 
Wedding photosessions 
 
Personal photosession
 

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap'); /* first page info */ header < text-align: center; height: 60px; line-height: 60px; background-color: black; color: aliceblue; margin-bottom: 15px; border-radius: 5px; >footer < text-align: center; background-color: #333333; color: aliceblue; height: 60px; line-height: 60px; margin-top: 34px; border-radius: 5px; >#servicesFooter < margin-right: 40px; >body < background-color: #f1f1f1; font-family: 'Poppins', sans-serif; >#hello < margin-left: 64px; >#form1 < margin-top: -20px; >.mainInfo < background-color: #bfbfbf; text-align: left; margin-left: 600px; margin-right: 7px; margin-top: 25px; padding-left: 30px; border-radius: 20px; border: 1.5px solid black; >/* text before links */ #main2 < position: absolute; margin-left: 120px; font-weight: bold; >/* code for feedback informations */ .feedback < border: 3px solid #001a00; border-radius: 14px; padding: 10px; >/* styles for email input */ #email < height: 24px; font-size: 14pt; border-radius: 8px; cursor: pointer; color: #262626; >#email:active < color: #666666; >#email:focus < color: #666666; background-color: #f2f2f2; border-color: #9999ff; border-radius: 8px; >/* phone number styles */ #phone < height: 23px; font-size: 12pt; border-radius: 8px; cursor: pointer; color: #262626; >#phone:active < color: #666666; >#phone:focus < color: #666666; background-color: #f2f2f2; border-color: #9999ff; border-radius: 8px; >/* styles for checkboxes */ #checkboxAgree < cursor: pointer; >#checkboxView < cursor: pointer; height: 19px; >/* styles for buttons */ #submit < height: 30px; font-size: 14pt; border-radius: 5px; cursor: pointer; >#resetButton1 < height: 30px; font-size: 12pt; border-radius: 5px; cursor: pointer; >/* hooverinng input items */ #submit:hover < color: #3377ff; >#resetButton1:hover < color: #3377ff; >/* styles for lines (hr) */ #hr1 < border: 10px solid #3377ff; border-radius: 8px; margin-top: 7px; opacity: 0.8; >/* hr before footer */ #beforeFooter < width: 1492px; height: 7px; border-radius: 8px; background-color: black; margin-top: 26px; >/* styles for links */ #linkToRules < color: #2929a3; cursor: pointer; >#linkToRules:hover < color: #262626; text-decoration: underline; >#linkToStart < position: absolute; margin-top: 60px; margin-left: 120px; color: black; >#linkToStart:hover < color: black; font-weight: bolder; >#linkToServices < position: absolute; margin-top: 100px; margin-left: 120px; color: black; >#linkToServices:hover < color: black; font-weight: bolder; >/* photographers info */ #matheyInfo < display: block; margin-left: 570px; margin-top: -552px >#matheyPhoto < height: 540px; width: 460px; margin-top: 30px; margin-left: 40px; border-radius: 5px; >/* Ashley */ #ashleyInfo < display: block; margin-top: 50px; margin-left: 570px; >#ashleyPhoto < height: 325px; width: 510px; margin-left: 570px; border-radius: 5px; >/* services icons */ #halloween_partyIcon < height: 400px; margin-top: 60px; margin-left: 60px; border-radius: 5px; border: 4px solid #f1f1f1; >#halloween_partyIcon:hover < border-style: outset; border: 4px solid black; cursor: pointer; >#title_party < position: absolute; margin-left: 175px; display: block; >#title_party:hover < margin-left:175px; font-weight: bolder; display: block; >#wedding_icon < height: 400px; margin-left: 40px; margin-top: 10px; border-radius: 5px; border: 4px solid #f1f1f1; >#wedding_icon:hover < border-style: outset; border: 4px solid black; cursor: pointer; >#portrait_photo < height: 400px; margin-left: 1180px; position: absolute; margin-top: -4px; border-radius: 5px; border: 4px solid #f1f1f1; >#portrait_photo:hover

Источник