The HTML computer programming language is an invaluable tool in creating and editing webpages. A basic knowledge of HTML will allow you to assemble the basic components of a webpage, and organize them exactly the way you want. In this section of the Introduction to HTML and CSS Coding course, we will learn the basics of HTML coding, and look at some of the most useful commands to format your webpage. Let’s look at some HTML Basics to start.

Objectives

In this section, you will learn:

  • Background information about the HTML coding language
  • How to properly write HTML code
  • About the <head> tag

HTML – Background Information

HTML is a computer programming language that was developed by computer scientist Tim Berners-Lee in the 1980s. A computer programming language defines a particular way to type text commands that a computer can then interpret to display content on a webpage. Many of the widely used computer programming languages, including HTML, are standardized to ensure that webpage elements are displayed consistently, and that any computer can easily interpret the code.

HTML stands for Hypertext Markup Language. Hypertext refers to the ability for one HTML webpage to link to another through a specified selection of text on the webpage. You may know this as a hyperlink, or simply a link. HTML is referred to as a markup language because style can be applied to it. This includes changing the color, size, or font type.

Like anything based in the digital world, HTML and other coding languages are constantly evolving and improving. When enough changes have been developed for the HTML language, a new version is launched, which often contains new features and functions.

Instructor Tip: At the time of publication, HTML 5 is the most current version of HTML code. As the language continues to develop, and newer versions of HTML are released, certain features from HTML5 may be deprecated and become invalid.

For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries. Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme.

Anatomy of an HTML Tag

When using HTML, the way in which code is written is critical. Any ‘spelling’ mistakes or incorrect formatting will cause errors on your finished page. As such, it is very important to learn the correct way to write HTML, so your code will always be valid.

The basis of HTML is the HTML tag. Tags specify which elements are to be created in an HTML webpage. Tags always begin with a left angle bracket (<) followed immediately by the tag name, then a closing right angle bracket (>).

In HTML coding, we talk about the content being ‘wrapped’ in tags. For a piece of code to be valid, there must be both an opening tag, and a closing tag. An opening tag consists of the left angle bracket, the tag name, and the closing angle bracket: <tag>. A closing tag will contain an additional slash before the tag name: </tag>.

Both the opening and closing tag would be paired together like this, with any content contained in the middle: <tag>content</tag>. A practical example can be shown using the heading tag: <h1>Title of my Webpage </h1> (we will learn more about adding headings later).

HTML 1

Tags are not case sensitive; <h1> would be the same as <H1>.

Attributes can also be added to the start tag. Attributes allow you to specify additional details about an element. To add an attribute, start with a complete tag set: start tag, content, and end tag. Then, right after the tag name (before the final angle bracket) add a space. Then you can type an attribute.

HTML Basics 2

As we learn to code more tags, we will also learn about some of the attributes that can be applied to them.

Getting Started

In order to access the internet to view websites, most people use a web browser. A web browser is a computer program that allows a computer to access and interpret the HTML pages across the internet. According to a standard set of rules, the browser will convert the text code in an HTML file into a readable, interactive web page. Every webpage built in HTML will contain the same set of initial, high-level tags to ensure all the necessary information gets sent to the web browser.

The first tag to appear is the <HTML> tag. This tag tells the browser that the code is written in the HTML language. Everything that is written in an HTML file will be between the <HTML> and </HTML> tags.

Next is the <head> tag. This tag contains important information about the webpage for the browser to use. It is important to note that the <head> tag is reserved for browser information only and is not used for a webpage’s content; a visitor to the webpage will not see any of the information placed inside the head tag. A variety of tags can be used in the head to define things such as character sets and style guides.

HTML Basics 3

One important tag often contained in the head is the <title> tag. The <title> tag will define the title of the page, which appears at the top of the browser window.

HTML 4

 

Following the <head> tag is the <body> tag. The <body> tag will contain the entirety of a webpage’s content, which is visible to visitors of the site. This is where paragraphs, lists, images, links, and more are placed. Most of the coding work takes place within the <body> tag.

HTML 5

Every webpage created in HTML must contain these important initial tags. Once written, these tags often do not require any further editing.

This is an excerpt from Velsoft’s latest computer course release: Introduction to HTML and CSS Coding. The course is intended as an introduction to HTML and CSS computer programming languages, covering the basics of these languages, and exploring various ways to use these languages to create an effective and well-designed webpage.  You can also download the Course Quick Reference Guide.