HTML Elements -Part 2

0
83
HTML Elements

We will be continuing the HTML series and in this article, we will take a look at HTML Elements. All the tags that are provided by HTML in order to create a web page are considered as Elements. There are a lot of HTML elements and I won’t be covering all of them here but will cover a few.

The reason being that after you have got an idea about what are the different tag and how they are used you will be able to implement that knowledge and experiment with other tags which will give you a better understanding.

Most of the HTML elements have attributes that are written inside the tags which define different functionality depending on the tag that you are using.

You can read about different HTML tags over here.

I will be covering three basic tags that are most commonly used by the developers for creating navigation bars, adding images, etc.

  • Lists
    • Ordered List
    • Unordered List
    • Definition List
  • Links
  • Images

Also Read: Introduction to Web Development and Design

Lists

There are three types of lists that can be created on a web page Number lists, Bullet Lists, Definition Lists.

  • Ordered lists
    • Are lists where each item in the list is numbered.
    • For example, the list might be a set of steps for a recipe that must be performed in an order or a legal contract where each point needs to be identified by a section number
  • Unordered lists
    • Are lists that begin with a bullet point (rather than characters that indicate order).
  • Definition lists
    • Are made up of a set of terms along with the definitions for each of those terms.

Order List

<ol> 
<li>Chop potatoes into guariers</li> 
<li>Simmer in salted water for 15-20 minutes until tender</li> 
<li>Heat milk, butter and nutmeg</li> 
<li>Drain potatoes and mash</li> 
<li>Mix in the milk mixturer</li> 
</ol>

This is the code that is used to list item in a numbered format so the result of this will be like this:

1. Chop potatoes into quarters 
2. Simmer in salted water for 15-20 minutes until tender 
3. Heat milk, butter and nutmeg 
4. Drain potatoes and mash 
5. Mix in the milk mixture

These are the attributes that you can use with the ordered list and this is how you assign attributes to a tag:

<ol reversed="reversed" > 
<li>Chop potatoes into guariers</li> 
<li>Simmer in salted water for 15-20 minutes until tender</li> 
<li>Heat milk, butter and nutmeg</li> 
<li>Drain potatoes and mash</li> 
<li>Mix in the milk mixturer</li> 
</ol>

And the Output for this is going to be like this:

5. Chop potatoes into guariers
4. Simmer in salted water for 15-20 minutes until tender
3. Heat milk, butter and nutmeg
2. Drain potatoes and mash
1. Mix in the milk mixturer

Unordered List

<ul> 
<li>Chop potatoes into guariers</li> 
<li>Simmer in salted water for 15-20 minutes until tender</li> 
<li>Heat milk, butter and nutmeg</li> 
<li>Drain potatoes and mash</li> 
<li>Mix in the milk mixturer</li> 
</ul>

The output for this is going to be in bullets:

And here are some of the attributes that you can use for unordered List:

Note that these attributes are not supported by HTML5 and deprecated. The same functionality can be achieved by using CSS.

ul { 
  list-style-type: disc;
}

Definition Lists

  • The definition list is created with the <dl> element and usually consists of a series of terms and their definitions.
  • Inside the <dl> element you will usually see pairs of <dt> and <dd> elements.
  • <dt> is used to contain the term being defined (the definition term).
  • <dd> is used to contain the definition.
<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

And the output for this kind of list is like this:

Coffee
    Black hot drink
Milk
    White cold drink

Links

  • Links are the defining feature of the web because they allow you to move from one web page to another
  • You will commonly come across the following types of links:
    • Links from one website to another
    • Links from one page to another on the same website
    • Links from one part of a web page to another part of the same page
    • Links that open in a new browser window

Links are created using the <a> element. Users can click on anything between the opening <a> tag and the closing </a> tag. You specify which page you want to link to using the href attribute.

< a href=“somepage.html” > text of the link </a>

For example:

<a href=“https://thelinuxos.com” > Visit to TheLinuxOS</a>

The text between the opening <a> tag and closing </a> tag is known as link text. Where possible, your link text should explain where visitors will be taken if they click on it (rather than just saying “click here”).

Many people navigate websites by scanning the text for links. The clear link text can help visitors find what they want.  This will give them a more positive impression of your site and may encourage them to visit it for longer.

Linking to a website & Absolute URL

When you link to a different website, the value of the “href” attribute will be the full web address for the site, which is known as an absolute URL.

URL stands for Uniform Resource Locator. Every web page has its own URL. This is the web address that you would type into a browser if you wanted to visit that specific page.

An absolute URL starts with the domain name for that site and can be followed by the path to a specific page. If no page is specified, the site will display the homepage.

For example:

<a href=“https://thelinuxos.com/race-conditions/” > Race Conditions</a>

Linking to other pages on the same website And Relative URL

Also Read: Introduction to HTML -Part 1

When you are linking to other pages within the same site, you do not need to specify the domain name in the URL. You can use a shorthand known as a relative URL.

If all the pages of the site are in the same folder, then the value of the href attribute is just the name of the file.

Relative URLs help when building a site on your computer because you can create links between pages without having to set up your domain name or hosting.

If you have different pages of a site in different folders, then you can use a slightly more complex syntax to indicate where the page is in relation to the current page.

Email Links

To create a link that starts up the user’s email program and addresses an email to a specified email address, you use the <a> element. However, this time the value of the href attribute starts with mailto: and is followed by the email address you want the email to be sent to.

<a href="mailto:[email protected]">Email Jon</a>

Opening links in a new window

If you want a link to open in a new window, you can use the target attribute on the opening <a> tag. The value of this attribute should be _blank.

One of the most common reasons a web page author might want a link to be opened in a new window as if it points to another website. In such cases, they hope the user will return to the window containing their site after finishing looking at the other one.

<a href="https://thelinuxos.com" target="_blank"> TheLinuxOS </a>

(opens in new window)

Default CSS Settings

Most browsers will display the <a> element with the following default values:

a:link, a:visited { 
    color: (internal value);
    text-decoration: underline;
    cursor: auto;
}
a:link,a:ctive, a:visited,a:hover { 
    color: (internal value);
}

You can change the style depending on the state of the link like if the link has been clicked or what happens when the mouse moves over the link.

The four links states are:

  • a:link – a normal, unvisited link
  • a:visited – a link the user has visited
  • a:hover – a link when the user mouses over it
  • a:active – a link the moment it is clicked
<style>

/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}
</style>

Text Decoration Property

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Background Color property

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

Now you can use these CSS properties to treat links as custom buttons and many more.

Linking to a specific part of the same page

At the top of a long page, you might want to add a list of contents that links to the corresponding sections lower down. Or you might want to add a link from part way down the page back to the top of it to save users from having to scroll back to the top.

Before you can link to a specific part of a page, you need to identify the points in the page that the link will go to. You do this using the id attribute (which can be used on every HTML element). “id” attributes that identify those sections of the page

The value of the id attribute should start with a letter or an underscore (not a number or any other character) and, on a single page, no two id attributes should have the same value.

To link to an element that uses an id attribute you use the <a> element again, but the value of the href attribute starts with the # symbol, followed by the value of the id attribute of the element you want to link to.

<hl id="top">Film-Making Terms</h1> 
<a href="#arcshot">Arc Shot</a><br> 
<a href="#interlude">Interlude</a><br> 
<a href="#prologue">Prologue</a><br><br>
 <h2 id="arcshot">Arc Shot</h2> <p>A shot in which the subject is photographed 
by an encircling or moving camera</p> 
 <h2 id="interlude">Interlude</h2> <p>A brief, intervening film scene or sequence.
 not specifically tied to the plot, that appears within a film</p> 
 <h2 id="prologue">Prologue</h2> <p>A speech. preface, introduction, or brief 
scene preceding the the main action or plot of a film; contrast to epilogue</p> 
<p><a href="#top">Top</a></p>

Images

  • How to add images to pages
  • Choosing the right format
  • Optimizing images for the web

Learning outcome:

  • Include an image in your web pages using HTML
  • Pick which image format to use
  • Show an image at the right size
  • Optimize an image for use on the web to make pages
  • Load Faster

There are many reasons why you might want to add an image to a web page: you might want to include a logo, photograph, illustration, diagram, or chart.

A picture can say a thousand words, and great images help make the difference between an average-looking site and a really engaging one.

Images can be used to set the tone for a site in less time than it takes to read a description. If you do not have photographs to use on your website, there are companies who sell stock images.

These images you pay to use (there is a list of stock photography websites below). Remember that all images are subject to copyright, and you can get in trouble for simply taking photographs from another website.

If you have a page that shows several images (such as product photographs or members of a team) then putting them on a simple, consistent background helps them look better as a group.

Images should…

  • Be relevant
  • Convey information
  • Convey the right mood
  • Be instantly recognizable
  • Fit the color palette

Storing Images on your Site

If you are building a site from scratch, it is good practice to create a folder for all of the images the site uses.

As a website grows, keeping images in a separate folder helps you understand how the site is organized.

On a big site, you might like to add subfolders inside the images folder. For example, images such as logos and buttons might sit in a folder called interface, product photographs might sit in a page called products, and images related to the news might live in a folder called news.

Adding Images

To add an image into the page you need to use an <img> element. This is an empty element (which means there is no closing tag). It must carry the following two attributes:

Src: This tells the browser where it can find the image file.

Alt: This provides a text description of the image which describes the image if you cannot see it.

Title: You can also use the title attribute with the <img> element to provide additional information about the image. Most browsers will display the content of this attribute in a tooltip when the user hovers over the image.

<img src="images/Newlogo.jpg" alt=“Image not loaded" title=“Logo for company." />

Height & Width of Images

<img src="images/Newlogo.jpg" alt=" Image not loaded " width="600" height="450" />

height This specifies the height of the image in pixels.

width This specifies the width of the image in pixels.

Images often take longer to load than the HTML code that makes up the rest of the page. It is, therefore, a good idea to specify the size of the image so that the browser can render the rest of the text on the page while leaving the right amount of space for the image that is still loading.

The size of images is increasingly being specified using CSS rather than HTML

 

SHARE
Previous articleRace Conditions
Next articleDownload iOS 13 Beta Free for iPhone & iPad
I am a Linux enthusiast still learning more about Linux and get my way around. I love writing articles and share what I know and Learn new things. I am also a security researcher and penetration tester.