ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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.

    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)