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

How to get started in HTML.

Updated on May 1, 2016

First Steps.

Okay so, you want to learn HTML? Well, this article will teach you the basics of using HTML to create some basic web pages. DISCLAIMER: Some information may not be correct.

Some lines of HTML code.
Some lines of HTML code. | Source

Lets get started.

First if you are using Windows, load up notepad. If you are using another Operating System (Linux, Mac, Raspberry Pi, etc) then just load up any text editor that supports HTML text. When your text editor has loaded, copy and paste the following code into the editor and save as "index.html".

Code:

<html>
<body>
<head>
<style>

</style>
</head>
<h1>Hi</h1>
<p>This Is A Paragraph With A Capital In Every Word!</p>
<img src="http://www.randomweb.com/image.gif"/>
<a href="http://www.google.co.uk">This is a link</a>

</body>
</html>

The HTML Tag

The HTML tag ("<html>") is the biggest part of making a web page, without it, well it just wouldn't work. Now there are two types of HTML tag, the plain one you see here and DOCTYPE HTML. As this is only a basic tutorial we will just skip DOCTYPE. The HTML tag tells the client of who is trying to access the web page that it is using HTML code.

The Body Tag

The Body Tag ("<body>") is everything that the web page is made up of. From images to content, everything visible to the client should be placed between the body tags. You can customize the body by using style sheets.

The Head Tag

The Head Tag ("<head>") is to prioritise elements to load first on a web page. Favicons, Titles, Meta Data, Style Sheets and others should be placed between the tags.

The Style Tag

Okay so technically we are merging into CSS (Cascading Style Sheets) but nonetheless it is still very useful. The style tag should contain your inline style sheet, you can create an external style sheet to, find out how in another tutorial. In the style sheet you can edit how the web page looks.

The following code shows you how to change the background image of your web page.

Code

body {
  background-image: url("http://www.link-of-the-image.com/image.png");
}
Internet Image
Internet Image | Source

Background CSS

Okay so the above code shows you how to set your web page background as a specific image, but unless you have an image that perfectly suits every browser or is a patterned image that works well when duplicated next to each other then it won't look very good. So here are a couple of lines of code that you could use to fix this.

Code:

body {
  background-image: url("http://www.websitehere.com/image.jpg");
  background-size: cover;
}

Covers

In the above code, we are setting the image as a cover, this means the image will be stretched to fit the browser screen.

The Heading Tag

The Heading Tag ("<h1>") is a HTML element that outputs plain text. Any headings should go between these tags. There are 6 different headings, h1-h6, h1 being the largest and h6 being the smallest. You can edit the look of these headings by using an inline style sheet or by putting a style element inside the heading tag. Below are some examples.

Code:

#--This is a normal heading
<h1>HeadingHere</h1>

#--This is a heading with different style
<h1 style="color:white;">HeadingHere</h1>

The Image Tag

The Image Tag ("<img>") is used to place images in a web page. Images can be specified, scaled, linked, animated etc. Below is a few examples on how to use the image tag.

Code:

#--Normal Image Tag
<img src="www.url-image-here.com"/>

#--Scaled Image Tag
<img src="www.url-image-here.com" width="500" height="700"/>

Image Scaling

In the Image Tag, you can specify the width and height of the image. The image is scaled in pixels (px).

The Paragraph Tag

The Paragraph Tag ("<p>") is used to create paragraphs in plain text. The style of the text/paragraph can be changed the same way a header can. You can also use the New Line Tag ("<br>") to go to the next line. Place the New Line Tag in the middle of the paragraph to take a new line. Below are some examples on how the Paragraph tag can be used.

Code:

#--Normal Paragraph Tag
<p>This is a paragraph.</p>

#--Paragraph with new line
<p>This is a paragraph<br>with a line break</p>

The Link Tag

The Link Tag ("<a>") is used to link to an external or internal page or document. Links can be placed on almost any element. From images to headings. The example below shows how a Link Tag can be used.

Code:

#--Link on text
<a href="www.link-to-a-website.com">Hey There</a>

#--Link on image
<a href="www.link-to-a-website.com"><img src="image.png"/></a>

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.