Lesson 1: Definitions of Terms Used In Web Design (HTML)

For a start, let’s define some terms used in HTML so as to make our learning easy.

Elements

When we talk about elements, this includes the opening tags, closing tags and the contents in between.

Example:


&ltp&gt This is an element&lt /p&gt

The whole of &ltp&gt This is an element&lt /p&gt is an element A typical webpage consists of many different types of element. The example code above is not the only type we can have.

&lth1&gt This is also an element&lt /h1&gt

The above line code is also an element. Now that we have that covered, let’s define some more terms.

TAGS

 Tags are used to state the type of elements present in a web page. There are two types of tags: Opening tags: This is used at the beginning of an element Closing tags: This is used to declare the end of an element. Considering the same codes written earlier

1.&ltp&gt This is an element&lt /p&gt

2.&lth1&gt This is also an element&lt /h1&gt

Code explained:

&ltp&gt in the first line of code is the opening tag while in the second line of code &lth1&gt is also the opening tag The corresponding &lt /p&gt and &lt /h1&gt are the closing tags. Let’s preview the output of the two codes:

Code Output

element preview picture


Attributes:

This gives more information about an element in a webpage. An element can contain one or more than one attributes.

Attributes are written usually in pairs of NAMES and VALUES. They are written in the opening tags.

Example:


<html> <div style="color: red;"> This is an element with an Attributes</div> </html> In the above code, style is the attribute of the element.

Code Output:

html sample 2


Name: 

This is used to define or identify the type of attribute an element is carrying. The name could be color, height, width, etc.

<html> <div style="color: red;"> This is an element with an Attributes</div> </html>
From the code above, the name there is Color.

Let’s see another example

Code Output:
html sample 3


From this code, the name here is font-size

Value:

This is used to specify the attribute the element is having. Value could be red, green, blue, 30px, 100%, etc.

Example 1:

<html> <div style="color: red;"> This is an element with an Attributes</div> </html>

Example 2:

<html> <div style="font-size: 160%;"> This is another example</div> <div style="font-size: 300%;"> This is another example</div> </html>
The value in example 1 is red, while in example 2, the value is 160% in the first element and 300%in the second element.

Summary:


Element is a line of code consisting an opening tag, a closing tag and the content between the two tags.

Attribute holds more information about an element and it is written within the opening tag and comes in a pair of name and value.

We have come to the end of this tutorial, more coming in the next post.

Ps: Output is how the code will appear when previewed.

No comments:

Post a Comment

Contact Form

Name

Email *

Message *

Follow by Email

Popular Posts