All web pages have a basic structure you should follow when creating an HTML file. Below is an example of what you should have in every web page you create.
<html> * The opening HTML tag
<head> * The opening headers tag
* Content of the page headers
</head> * The closing headers tag
<body> * The opening body tag
* Content of the page
</body> * The closing body tag
</html> * The closing HTML tag
All of your pages should follow the above structure. The first tag is the HTML tag which opens a new HTML code. This will always be the first tag on your page. Next we open the head tag. After the opening head tag and before the head closing tag we put the contents of our page headers. Headers are explained in the next step of the tutorial. We then open our body tags. Between the opening and closing body tags is where the contents of your page will be. This will be what users see when they view your page. We then close the html tag to end the document.
Styling HTML
Every web designer wants their website to look good and clean. This is where styling comes in to play. Almost everything in HTML can be styled.
Colors
All websites should have color. No one wants to look at a boring black and white page for very long. It is important to use colors that go well with each other. You don’t want your page to look like a box of Crayola.
Sizing
All web pages are put together like building blocks. All elements have their own dimensions to fit the lay out. It’s like one big adding and subtracting problem. Every page should have a set width and height, and based on that all elements inside should be sized to fit.
Positioning
Elements are positioned by placing them inside of other elements. Once again it is like building blocks. Elements can be nested to be placed where you want them in the layout.
Borders
Elements can have borders that are measured in pixels. When creating a lay out it is important to know that borders are included in the over all dimension of the element. For example, if you have an element that is 200 pixels wide by 200 pixels tall with a border of 2 pixels around it, the over all width of that element will be 204 pixels (2 pixel border on the left and right side) and overall height of 204 pixels (2pixel border on top and bottom).
Padding
Padding is the amount of space between the content inside of an element with the inner edges of that element. Padding also effects over all dimensions.
Margins
The margin is the space around the outside of an element. Margins also effect over all dimensions of elements.
HTML commonly used tags
Below is a small list of some of the tags that are most commonly used in html.
| Tag | Description | Example |
| <html> </html> | Opening and closing HTML tags | <html>All page content here</html> |
| <head> </head> | Opening and closing head tags | <head>All header content here</head> |
| <title> </title> | Opening and closing title tag | <title>Title of my web page here</title> |
| <body> </body> | Opening and closing body tags | <body>All visible contents of my page</body> |
| <h> </h> | Opening and closing headline tags. (h1 through h6 with h1 being the largest and h6 being the smallest) | <h1>Bold heading text here</h1> |
| <p> </p> | Opening and closing paragraph tag | <p>This is a new paragraph of text.</p> |
| <em> </em> | Opening and closing italics tag | <em>Text in here will be italic.</em> |
| <strong> </strong> | Opening and closing bold tags | <strong>Text in here will be bold</strong> |
| <a></a> | Opening and closing anchor tags | <a href=”website to link to”>Text to display</a> |
| <img> | Opening and closing image tags | <img src=”location of image to display” /> |
