HTML DIY Tutorial: How to Make a Cover Page (How to Make a Clickable Full-Page Image)

Your website is a journey, a process, an exploration. If what you’re looking for is to slow down the pace, to set the tone before a viewer dives into your site, perhaps a cover page is the introduction you need. Essentially what you are going to do is establishing a local link between two webpages in your website—a full-page sized image as your cover page, which will link to your homepage.

  1. Start with a simple, new TextEdit (or whatever plain text editor you prefer) file. Fill in the standard HTML header code, as shown below. In the <head> section, include a title for this webpage, which is what will show up on the tab when it is opened. Create a <body> section. Don’t forget to close all tags.Screen Shot 2017-02-06 at 9.08.55 AM.jpg
  2. To make the initial link is very simple. In the body section, start the <a> tag, which indicates that the information inputted next will be a hyperlink. The href attribute is used to define where the link leads to. There are many ways to reference the destination of your link, this case simply uses the complete URL of the website. The text that serves as the physical part of the link (the part you click) is placed in between the <a> and </a> tags, “Click to Enter,” or whatever you like. Always remember to close every tag!                                                                                       Screen Shot 2017-02-06 at 9.43.44 AM.jpg
  3. Since additional styles are going to be applied to this link, an extra step of assigning an “id” to this link is needed. Simply add the id attribute and give it an id name, I used “bg,” as in background.Screen Shot 2017-02-06 at 4.54.13 PM.jpg
  4. At this point you should have a blue, underlined piece of text, which indicates that it is a hyperlink. Clicking on it should (fingers crossed!) lead to the site that you specified. Screen Shot 2017-02-06 at 4.16.35 PM.jpg
  5. Now it’s time to add the visuals, which will involve some simple CSS. To make a background image that will fill up the entire webpage, apply 100% height and 0 margins to both <body> and <html> in the <style> section (in the <head>).Screen Shot 2017-02-06 at 4.23.05 PM.jpg
  6. Now to establish the features of the background image, make sure to signify that these apply to the “bg” id attribute. Include the URL of the image in single quotes, in parentheses. Set the image to 100% height, and to center and scale the image so that it fits neatly in the screen, copy the code below. Screen Shot 2017-02-06 at 4.25.21 PM.jpg
  7. The screenshot is not very clear, but you can see in the upper left corner that the hyperlink text is now superimposed on top of the background image. Screen Shot 2017-02-06 at 4.29.39 PM.jpg
  8. There are just a couple more steps to clean that up. Hide the text and make the hyperlink the same size as the entire background image by adding these lines of code. This will make sure every corner of the image is clickable, and no stray pieces of content will peek out around the edges of the background image.Screen Shot 2017-02-06 at 4.32.48 PM.jpg
  9. And that’s it for style. Insert the background image into the body by using a <div> tag, mention that it is the “bg” id. All together, your code should look like this:Screen Shot 2017-02-06 at 4.54.39 PM.jpg
  10. And there you go! Your completed, clickable coverpage will now feature whatever image you chose, and it will lead to your homepage, ready to be browsed. Screen Shot 2017-02-06 at 4.39.18 PM.jpgScreen Shot 2017-02-06 at 4.56.56 PM.jpg
Advertisements

~ by Emily Tang on February 6, 2017.

5 Responses to “HTML DIY Tutorial: How to Make a Cover Page (How to Make a Clickable Full-Page Image)”

  1. I am awarding this blog post as the most engaging. In my opinion a clickable cover photo is something that will add professionalism and style to my website. Everyone likes a great photo, and this will give a great preview to what my website is about. It is extremely easy to follow, and I plan to add a cover photo later.

  2. I believe that this is the Best Overall DIY. I believe that this is a greatly in-depth tutorial teaching the audience how to make a cover-page. It is incredibly “user-friendly” due to the use of images that identify the formatting, utilization, and location of the tags and code required to accomplish the task of adding a cover page. I also believe that it is a unique tutorial of a task that a beginner HTML coder would not consider preforming, thus teaching the coder something new that they had not known before. – Anastasiya Muravyeva

  3. I think it is most engaging because a cover page makes the whole website look interesting and gives a whole idea of the topic even before you entered into the main page. And the instructions about how to make it are also clear in this post.

  4. This is my choice for most thoughtful post. I think this is a very original idea since it has not been brought up in class. It is also a very thorough explanation and is easy for beginners to follow.

  5. This DIY is the most engaging is my opinion! The idea of a clickable home page, fits into the aesthetics of which most websites use today. While the style of your DIY was properly aligned and allowed the eye to smoothly follow the steps clearly without any confusion.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: