0
These steps will show how to create a website header using HTML and CSS technology. It is assumed that the basics of HTML and CSS are understood. These steps will show how to create a basic header, which can be used as a starting template in designing more elaborate website headers. The CSS file will be an external file from the HTML page.
Step 1. Open up your HTML editor of choice such as Dreamweaver, Nvu, or any other HTML editor.
Step 2. Create two files. One named header.htm and the other named header.css. Save both files in the same folder together. For example if you name the folder Header, inside the folder will be header.htm and header.css.
Step 3. In the header.htm file you will place the following code right under the tags, and right before the tag.
Header
Step 4. Between the tags of the header.htm file you will place the following code.
Your Website Name
Step 5. Save the header.htm file.
Step 6. If you open the header.htm in your web browser, you will see the no formatting of style at all. The next steps will be creating the formatting through the header.css file.
Step 7. Open the header.css file. Put in the following code to style the body.
body {
margin: 0;
padding:0;
text-align: center;
background: #B0BFC2;
color: #444;
}
Step 8. Save the header.css file and open the header.htm file your web browser. You should see a grayish background with all the text align to the center of the page.
Step 9. Go back to the header.css file and style the container by inserting the following code next.
#container {
text-align: left;
margin: 0 auto;
width: 700px;
background: #FFF;
}
Step 10. Save the header.css and refresh the header.htm file in your browser. You should see the text has now moved to the left of the container, and the background color of the container is now white.
Step 11. Open the header.css again. Put in the following code to style the tag.
h1 {
margin: 0;
padding: 0;
border-bottom: 1px solid #999;
background-color:#CCCCCC;
}
Step 12. Save the header.css file, and view the header.htm file in web browser again. You should now see the background of the Your Website Name Here is a light gray color with a 1 px black border underneath it.
Step 13. Open the header.css file and enter the following code next to style the
- tag.
- tag.
ul#menu li {
display: inline;
background-color:#333333;
padding: 0 10px 0 8px;
}
Step 16. Save the header.css and view the header.htm file in your web browser. You should see the link names are now displayed horizontally now and each link name has a dark background gray background color.
Step 17. Open the header.css file and enter the following code to style the tag.
ul#menu li a:link, ul#menu li a:visited {
text-decoration: none;
color: #FFF;
}
Step 18. Save the header.css file and view the header.htm file in your web browser. You should that the underline under the link names has been removed, and the text color for the link names are now white.
Step 19. Open the header.css file and the following code to continue styling the
tag.ul#menu li a:hover, ul#menu li a:active {
text-decoration: none;
color: #387A9B;
background: #FFF;
}
Step 20. Save the header.css file and view the header.htm file in your web browser. You should see that when you hover your mouse cursor over the link names, the background color changes to white.
You have now completed a header template for a website. There are many things you could do to enhance the header even more, such as adding an image to the background of the header, creating different hover effects for the menu links, change the colors, change the width of the header from 700px to another width to fit your style, and many more options. Play around with this header template, create different headers, add, remove, and adjust the CSS code. All of this is done and can be done without using tables, and is done just using CSS styles.
ul#menu {
margin: 0;
padding: 5px 10px;
list-style-type: none;
background: #387A9B;
}
Step 14. Save the header.css file and view the header.htm file in your web browser. You should see that the bullets from the menu list are now gone, and the menu background is a different color.
Step 15. Open the header.css file and enter the following code to style the
Wiki User
∙ 14y ago
Add your answer:
Earn +20 pts
How can you create a c program without using header file?
C programs do not require header files. If you want a C program without header files, you can simply not create them. However, you may or may not be able to include your non-header file source files.
How do you create a fixed header on a website?
Just create a graphic with desired dimensions.
You must create a header that contains the page number?
Yes; the header must contain the page number.
What is meant by header and footer and how to create header and footer in Microsoft Word 2003?
Header is the area at the top of the pages. Footer is the area at the bottom of the pages.
How can you create a header file in c?
Use a text-editor.
How do you create a user defined header file?
Header files are not much different from usual cpp files. There are basically two different things. It's file extension: you need to choose "header file" when you create it or save as .h file. Second is header files do not have main() function. When you are done with you header file do not forger to include it in your project by writing preprocessor directive:#include "your_header_file.h"
To place your name to the left of the page number as required by the MLA style you must create a header that contains the page number?
In MLA style, to place your name to the left of the page number, you need to create a header with your last name and insert the page number in the header section. This ensures your name is aligned to the left of the page number in the header.
What view must you be in to create a form header for access?
Design view.
To place your name to the left of the page number as required by the MLA style you must create a header that contains the page number.?
Yes, in MLA format, you can create a header that includes your last name followed by the page number, aligned to the right in the header. To do this, go to the "Insert" tab in your word processing software, select "Header," and then input your last name followed by the page number. Make sure that the numbering is in the header section, not in the main body of the document.
How can you create a headerfile in a c?
Create the header file as a .h file in the same way you create a source file, .c and place it in the same directory as the .c files. To incorporate it, use the... #include "my_header_file.h" ... directive. Note that there are double quotes instead of greater/less signs. This tells the compiler to look first in the source directory.
Where is the location of the page number and header on an apa paper?
The page header should be 1/2 inch from the top of the page.From The OWL at Purdue (see related link):Include a page header at the top of every page. To create a page header, insert page numbers flush right. Then type "TITLE OF YOUR PAPER" in the header flush left.
How do you create an header file in c with example?
Any file can be called a header. Whenever someone uses #include , it's the same as copy/pasting that file in that spot. Typically though, they call it a header if it's included at the beginning of your source.
