2. Web Design – HTML Tags lesson 1

What’s up everybody, today we’ll be looking at the building blocks that make up HTML, I posted a sample in the last lesson. An HTML tag is basically code that defines every structure on an HTML page, including the placement of text and images and hypertext links. HTML tags begin with the less-than (<) character and end with greater-than (>). These symbols are also called “angle brackets.” Check out the sample code below.

<html>
<body>
<h1>This is the Main Heading</h1>
<p>This text might be an introduction to the rest of the page. And if the page is a long one it might be split up into several sub-headings.<p>

<h2>This is a Sub-Heading</h2>
<p>Many long articles have sub-headings so to help you follow the structure of what is being written. There may even be sub-sub-headings (or lower-level
headings).</p>

<h2>Another Sub-Heading</h2>
<p>Here you can see another sub-heading.</p>
</body>
</html>

The HTML code (in blue) is made up of characters that live inside angled brackets — these are called HTML elements. Elements are usually made up of two tags: an opening tag and a closing tag. (The closing tag has an extra forward slash in it.) Each HTML element tells the browser something about the information that sits between its opening and closing tags.

full
HTML code and description
html-tag
a simple HTML tag

ATTRIBUTES

Attributes provide additional information about the contents of an element. they appear on the opening tag of an element and are made up of two parts: a  name and a value, separated by an equals sign. Check out the following code.

<p lang=”en-us“> Paragraph in English</p>

The attribute name indicates what kind of info you are supplying about the element’s content, it should be written in lowercase.

The value is the information or setting for the attribute. it should be placed in double quotes. Different attributes can have different values.

Here the attribute lang is used to indicate the language used in this element. The value of this attribute on the page specifies it is in US English.

BODY, HEAD and TITLE

<body>

You met the <body> element in the first example we created.
Everything inside this element is shown inside the main browser window.

<head>

Before the <body> element you will often see a <head> element. This contains information about the page (rather than information that is shown within the main part of the browser window). You will usually find a <title> element inside the <head> element.

<title>

The contents of the <title> element are either shown in the
top of the browser, above where you usually type in the URL of the page you want to visit, or on the tab for that page (if your browser uses tabs to allow you to view multiple pages at the same time).

Capture3
Code and Result

And that’s it for today people, tomorrow we’ll be working of how to create a web page on a PC, and we’ll explore more tags. If you enjoyed this lesson, click like and/or share and follow me on Instagram and Twitter @uzoezi_ to be notified about the next lesson. Peace.

Advertisements

One thought on “2. Web Design – HTML Tags lesson 1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s