ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

How to Design Website Content Using HTML

Updated on February 4, 2014

Create a Website Using HTML

Learn how to create a website using HTMl.
Learn how to create a website using HTMl.

HTML tags

  • 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.

<html>

</html>

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.

<body>

</body>

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:

<body bgcolor="blue">

</body>

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.

<head>

</head>

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>

HTML

Click thumbnail to view full-size
HTML coding is the basis for all webpage and website creation.
HTML coding is the basis for all webpage and website creation.
HTML coding is the basis for all webpage and website creation.

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.

<font>

</font>

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

<body background="image.jpg"> 

© 2013 Paiva

Comments

    0 of 8192 characters used
    Post Comment

    • paiva25 profile image
      Author

      Paiva 4 years ago from Goa, india

      Thanks Iguide,

      HTML is pretty standard where ever it is used, you just need to know the basics. Will be updating soon, so stay tuned :)

    • iguidenetwork profile image

      iguidenetwork 4 years ago from Austin, TX

      Thanks for your easy-to-follow HTML tutorial! I'm going to pass it to anyone I know who have a hard time understanding it. They will and should start with a notepad for basic HTML exercises. Up and useful.