31 Deerpark Road
Ballymena, BT44 0DP
02895 811 999
info@ni2u.co.uk
support@ni2u.co.uk

HTML Tutorial

HTML Tutorial

Quick and easy HTML tutorial

In this HTML tutorial we will learn the basics involved in creating a web page. HTML stands for HyperText Markup Language. This is the language behind a lot of Web webpages. The language is made up of elements that describe the structure and format of the content on a Website Page.

HTML is maintained by the world Wide Web Consortium (W3C). As of this authoring, the most up to date versions are HTML 5.2 https://www.w3.org/TR/2017/REC-html52-20171214/ for your specifications. In this lesson, we’ll tackle the HTML5 but for simplicity, we’ll usually send to it as HTML.

Getting Started

We’ll get started with a simple HTML tutorial.

Exercise: A Simple HTML Page

Duration: 5 to 15 minutes.

In this exercise, you will produce your first HTML document by simply copying the writing shown below. The purpose is to provide you with some sense of the framework of an HTML doc.

Open a simple content editor including Notepad and develop a new file. Do not use an HTML editor for this exercise.

Save the file as index.html in the ni2u-site folder.

Type the following exactly as shown:

<html>
<head>

<title>Hello arena!</title>

</head>
<body>

<h1>Hello industry!</h1>

</body>
</html>

Save the file again and then open it in the internet browser by navigating to the file within your folder system and double-clicking on it. The site should appear as follows:

HTML Tutorial Rendered Page

The HTML Make-up

At its simplest, an HTML website consists of what can be thought of as a skeleton – the main structure of the website. It looks like this:

Computer code

<html>

<head>

<title></title>

</head>

<body>

<!–Content that appears on the page–>

</body>

</html>

The <head> Element

The <head> element is made up of information that is not displayed on the site itself. A few of the elements commonly discovered in the <head> are:

  • Title of the web site (<title>). Browsers typically show the title in the “title bar” at the top of the web browser window.
  • Meta tags, which contain descriptive specifics of the page (<meta />)
  • Script blocks, that contain javascript or vbscript coding for introducing efficiency and interactivity to a website (<script>)
  • Style blocks, in which contain Cascading Style Sheet rules (<style>).
  • References (or web links) to external style sheets (<link />).

The <body> Element

The <body> element contains all of the information that appears on the site itself. Body tags will be covered thoroughly throughout this manually operated.

Whitespace

Extra whitespace is ignored in HTML. This means which all hard returns, tabs and multiple spaces are condensed into a single space for display purposes.

Edit your index.html again with the following code

<html>

<head>

<title>Whitespace Example</title>

</head>

<body>

This is a sentence on a single line.

 

This

is

a

sentence with

extra whitespace

throughout.

 

</body>

</html>

HTML Tutorial Explanation

The two sentences in the programming above will be rendered in exactly the same way.

Blocks and Inline Elements

Block-level Elements

Block elements are elements that separate a block of content. Such as, a part (<p>) element is a block element. Other block elements include:

Lists (<ul> and <ol>)

Tables (<table>)

Forms (<form>)

Divs (<div>)

Inline Elements

Inline elements are elements that affect only snippets of content and do not block off a section of a web site. Examples of inline elements include:

Website links (<a>)

Images (<img>)

Formatting tags (<b>, <i>, <tt>, and so forth.) (see footnote)

Phrase elements (<em>, <strong>, <code>, etc.)

Spans (<span>)

Inline elements cannot be direct children of the body element. They must be contained within a block-level element.

Comments

Comments are generally used for one of three purposes.

  1. To compose helpful notes regarding the code; for example, why anything is developed in a distinct way.
  2. To comment out some programming which is not currently needed, but may possibly be used sometime at some point.
  3. To debug a site.

HTML comments are enclosed in <!– and –>. Such as:

<!– This is an HTML comment –>


Recommended Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.