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

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: "https://hubpages.com/privacy-policy#gdpr"

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)