An Introduction to HTML

An Introduction to HTML

This article covers the basics of HTML, also known as HyperText Markup Language.

Intro

HTML is used to markup how to provide the structure to a web page. Most websites use HTML to define the basic structure of the content, use CSS to define the style and presentation of that content, and use programming languages such as JavaScript and others to add interactive functionality to the page.

For now, this article will stay within the scope of HTML only.

Tags

HTML is marked with tags. One example tag is the<p> tag, which is used to mark paragraphs.

The<p> Tag
<p>This is a paragraph</p>

Here the HTML begins by opening the tag, using<p>. This is the beginning of the paragraph. The paragraph continues until it reaches a</p> tag, which ends the paragraph.

Between the opening<p> and closing</p> tags, everything inside is the content of that paragraph.

Embedded Tags

Tags can be placed inside of other tags.

Embedded Tags
<body><p> This is a body paragraph.</p></body>

Here, the<body> tag marks the beginning of the body of the web page and continues to the end of the snippet. Inside the body is one paragraph.

HTML Elements

Most HTML tags have their beginning and end marks. HTML elements are an exception. These tags only mark something in one spot.

The HTML Element:<br>
This is a line that ends with a line break<br>

In this example, there is a sentence followed by a<br> tag, sometimes shown as</br>. This creates a line break, more commonly thought of as the new line created when you press the enter key.

Both<br> and</br> do not mark the beginning or end of section. They only mark that in one spot, there is a line break.

HTML Attributes

Some HTML tags have special attributes. These allow one to customize certain features of tags.

Linking with<a>
<a href="http://wiki.cp-commerce.com/">This is a link</a>

The<a> tag links to other content. This tag creates the text "This is a link" and when clicked takes you to this wiki's homepage.

Following Along

In order to write HTML, there are several text editors available. Avoid Microsoft Word and similar text editors because they often can format HTML incorrectly. The basic Notepad program on windows machines and TextEdit on Mac can edit HTML, however, it is easier with a program that has a feature called syntax highlighting. This feature colorizes text for easier comprehension. 

Notepad++ is a program that is useful for individuals learning HTML. It can be downloaded fromhere.

When saving a document in notepad++, don't forget to change the file type to an HTML document. To get the menu to appear double or right-click next to "Normal text file".


Making a Simple Webpage

Now, let's combine everything so far.

A Basic Page
<!DOCTYPE html><html><head><title>My First Page</title></head><body><h1>My First Heading</h1><p>My first paragraph, with<a href="https://www.google.com">my first link</a></p></body></html>

This is an example of a simple web page's HTML. 

On line 1, the<!DOCTYPE html> tag defines that this is an HTML document and a web page.

Next, the<html> tag begins the content of the web page on line 2 and ends on line 10.

The webpage contains a header marked with<head> that spans from lines 3 to 5 and a body marked with<body> from lines 6 to 9.

Inside the header, there is the title "My First Page". When you open the web page, the window will show that text.

Inside the body, there is a header that will show in large text in the document. This is followed by a paragraph, which contains a sentence with a link inside.


Copy this HTML into notepad++ or your preferred text editor, and save it as an HTML document.

Now open this document in your web browser and you should see something like this.



Congrats, you've just made your first web page!



    • Related Articles

    • How to add HTML Code to Pages

      This article covers how to add HTML code that works in the header of all pages of the store's website. This feature is useful for many things, including adding scripts and links for targeting pixels, campaigns, branding, and more. Navigation 1. Log ...

    • FedEx Shipping Method

      Sections Description Setup Description This article will guide you on how to enable the FedEx shipping method for your webstore and allow your customers to select FedEx at checkout. Magento Instructions:here External Instructions:here Setup We ...

    • How to Add Category Information

      This article will guide you through the steps of adding category information to the website. Step-by-step guide Go to Catalog → Categories and select the category you would like to edit. Once a category has been synced from Counterpoint, you can ...

    • How To Use Page Builder

      TABLE OF CONTENTS Introduction Getting Started Step 1: Create Content Step 2: Customize Content Step 3: Publish Page Editing Content Introduction This guide is intended to provide you with a step-by-step process on how to use Page Builder, add and ...

    • How to Add/Modify Homepage Slideshow - Porto

      This article covers the basics of adding and modifying the slide contents on your homepage. Please note that this tutorial only applies to Porto Themes actively installed. Your slider(s) on the homepage is powered by a JQuery plugin calledOWL ...