How To Create Front Page In Html

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.

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