Your website is basically the face of your business. If you have the website that does not look great for users, the users might lose the attention for your business even if you do a great business. Especially, the header of your website can be the most effective thing that the web developers should care about. Therefore, the more effective header the website has, the better interest the users might get. Personally, as a person who wants to be an IoT engineer, I thought that it was better to know how to create an effective header of a website by using HTML and CSS, so I want to share you about the very simple and effective header of the website.
- The achievement
In this article, I will try to show you how to create a navigation bar on the main image and adjust the size of the image. (The original image size is 1920px * 1080px) Caution: Care about the copyright. I got this image from https://www.canva.com/ I highly recommend you to get some free images from there. You can also design the image that you want.
- HTML Code
The HTML is the language which is used to create web pages. By adding tags and elements, something you added appears on the website. Basically, what you code in head tag is unable to see on the web. However, without coding them, your website might get bugs, can not get more traffics through the keywords, so on. In the body tag, you code something appeared on the website like a navigation bar, some links, some images, so on.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang = "en"> <head> <title>Englsih School Project</title> <meta charset = "utf-8" /> <!-- The link tag defines a link between a html document and an external style sheet--> <link rel = "stylesheet" href = "style.css" type = "text/css" /> <!-- The viewport is the user's visible area of a website--> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> </head> <body class = "body"> <header class = "mainHeader"> <!-- The nav tag defines the navigation bar --> <!-- The ul tag defines the unordered lists --> <nav><ul> <li><a href = "index.html">Home</a></li> <li><a href = "About/about.html">About</a></li> <li><a href = "HowItWorks/howitworks.html">How It Works</a></li> <li><a href = "Search/search.html">Search</a></li> <li><a href = "Blog/blog.html">Blog</a></li> <li><a href = "Contact/contact.html">Contact</a></li> </ul></nav> </header> </body> </html> |
- CSS Code
The CSS is the language that can control the layout and the styling of the web pages. Even though the way to code is totally different from HTML, CSS is very important to make up your website. Without CSS, your website might be looking like the lines of some text.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
html { height: 100%; /* Allows to stretch the image as the header image. */ } body { font-size: 87.5%; font-family: Arial; line-height: 1.5; text-align: left; height: 100%; } .mainHeader { /* The url of the image is not required in HTML file */ background-image: url(Images/main.jpg); background-repeat: no-repeat; background-size: cover; height: 100%; } a { text-decoration: none; /* Removes the underline of the links */ } .body { margin: 0 auto; width: 100%; clear: both; } .mainHeader nav { background-color: #f1f1f1; border-radius: 5px; } .mainHeader nav ul { list-style: none; /* Removes the bullets */ } .mainHeader nav ul li { /* Makes the lists to inline */ float: left; display: inline; } .mainHeader nav a:link, .mainHeader nav a:visited { color: #000000; display: inline-block; padding: 20px 25px; } .mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a:visited { background-color: #f3f3f3; } |