How to Design Website Content Using HTML
Create a Website Using HTML
- Tags consist of two angle brackets ( <> ) with tag names in them. eg (<html>)
- There are two types of tags, their known as the opening tag (<html>) and the closing tag (</html>). The closing tag has a forward slash placed before it's tag name.
- It's in between the opening and closing tag of html, that all your other tags and text is written.
- HTML tags are not case sensitive.
What is HTML?
HTML is an abbreviation for Hyper Text Markup Language. HTML is one of the most popular and oldest web designing programming languages there is.
It's a markup language which means it consists of a set of markup tags. These tags are used as a description of the contents of the document.
Usually notepad is used to code a html document, though now there are various other softwares out there. Once the file is saved in the .html or .htm format, the file is now called a webpage and by default opens in your default web browser.
Every HTML document has to start with the html opening tag and end with the html closing tag.
The Body Tag in HTML
Given above is a sample code showing how the body tag is placed and used in html.
The body tags, just like the body of a story or a letter, contains the main content of your webpage or website.
Practically all your code and text content comes here. The body tag starts after the closing of the head tags and ends before the closing of the html closing tag.
The body tag is also used to change the background color of the webpage by stating background is equal to the color of your choice. The syntax for changing the backgound color of a webpage is given below:
All the content of your website (text, tables, multimedia, links, etc) comes in between the body tags shown below.
The Head Tag in HTML
The head tag in html consists of the title of the webpage and the header.
The head tag (shown below) is like an introductory to the webpage and the body tag (which we will see about in abit) consists of all the data and information of your website.
The title tag which is place within the head tags specifies the name of your webpage or website and is show on the title bar of your web browser.
<title> Your Title </title>
The header is usually the first line of content in your webpage. There are 6 different sizes of headers.
You can always use the header tags in the body as well as titles for a subtopic or a topic name.
Given below is a sample code in html making use of the head, title and different types of headers.
HTML Syntax for Head, Title and Body Tags
<html> <head> <title>My First Webpage</title> <h1>header tag</h1> <h2>header tag 2</h2> <h3>header tag 3</h3> <h4>header tag 4</h4> <h5>header tag 5</h5> <h6>header tag 6</h6> </head> <body> My Content </body> </html>
HTMLClick thumbnail to view full-size
Head Tag and Body Tag Tutorial:
Copy paste the following code in notepad and save the file on your desktop as test.html
Once saved you will notice that the icon of the notepad file has changed to your default browser icon (as a webpage).
Double click the file and it will open it your default browser. You will now notice that right on top in the title bar My First Webpage has appeared and as the content of your webpage, test1-6 has appeared in different sizes.
Next you will notice the body part of your webpage has appeared. This is in simple text format, which can be formatted in various ways as we will learn below.
Bold, Italics and Underline Formatting Tags used in HTML
Bold: To make your text or content bold, all you have to do is put a <b> before your text and a </b> after your text. Everything in between these tags will be in bold.
Italics: To use the Italics format, you need to put a <i> before your text, word or content and a </i> after the word, text or content.
Underline: Similarly with underlining your text, a <u> tag before the text you want underlined and a closing </u> tag after the text.
In order to use all 3 together (say you want a word in bold, italics and underlined) the you can use the tags <b><i><u> before and </b></i></u> after the word or text.
Remember, if you do not or forget to use the closing tags in HTML, the formatting that you use will be applied to all the content since the use of the opening tag.
Syntax for Bold, Italics and Underline HTML tags
<html> <head> <title>Formatting tags</title> </head> <body> <b>Bold Tag</b> <i>Italics Tag</i> <u>Underline Tag</u> <b><i><u>all 3</b></i></u> </body> </html>
HTML Font Formatting Tags
The font tags can be used to change the font face, color and size of a word or text in your webpage.
Font face is the font style ( ComicSans, Ariel, TimesNewRoman, etc)
Font color as it states obviously is used to change the color of the text and font size is used to change the size of the font.
The font tags are used within the body tags and the word or text to be formatted are placed within the font tags.
A sample code is given as follows:
Syntax for Font Tags in HTML
<html> <head> <title>formatting</title> </head> <body> <font size="3">Text</font> <font color="blue">Text</font> <font face="verdana">Text</font> <font size="3" color="blue" face="verdana">Text</font> </body> </html>
The Image Tag
The image tag is used to display an image in HTML. You can adjust the height, width, alternate text (text that appears when your image is not able to load), align you image and even give it a border by using simple codes along with the image code.
The syntax for inserting an image is given below.
Syntax for Image Tag In HTML
<html> <head> <title>Image tags</title> </head> <body> <img src="image.jpg" alt="Image" height="42" width="42"> <img src="image.jpg" alt="Image" height="42" width="42" border="2"> <center> <img src="image.jpg" alt="Image" height="42" width="42"> </center> </body> </html>
Image Tags used in HTML Explained
The img src part of the code states the source of the image, usually the URL or address of the image is put here, but if the image is saved in the same folder as your webpage, you can just put the name and extension directly.
height="42" : States the height of the image.
width="42" : States the width of the image.
By default the height and width are measured in pixels.
<middle> :States the alignment of the image.It can be top, bottom, middle, left and right aligned. Use the align tags as shown above. Place your img src code in between the alignment tags.
border="2" :Specifies the size of the border surrounding the image. Border is also measured in pixels.
To use an image as a background for your Webpage, follow the code given below:
Body Background Image Tag Syntax in HTML
Some more stuff you might like to read on about Web Designing
- How to Use Simple HTML Programming to Make a Link
Need to create Hyperlinks to connect one page to another in your Website or links within the same page or maybe even to link two Websites to each other? Wanna learn how to use images as links aswell?
- Website Designing Do's and Don'ts
A few pointers for all the Web Designer's out there..following these few do's and dont's can greatly help in the success of your Website..
- How to Design a Successful Website
Let's face it..everyone wants to be a part of the Internet and have a website about their company out there.. So here are a few basic principle's, do's and do not's that one should follow...
© 2013 Paiva