Categories
HTML PROGRAMMING TUTORIALS WEB BROWSER WEB DEVELOPMENT

HTML Meter Tag Explained

HTML Meter Tag is a new type of HTML tag introduced in the HTML 5 specification. So chances are, you are not so familiar with it. Right? But do not worry, as we will start exploring everything there is to the HTML meter tag in this article. So you will soon be able to start using it in your websites and web apps.

Sounds good? Great! Then let us get started!

What Is An HTML Meter Tag?

So consider this situation. You are creating a dashboard in your web app that, among many other things, also shows the storage space left in your hard disk. Now how will you go about designing it?

So the chances are, you might create a custom HTML element that is styled using its CSS properties to display the storage space graphically. But even if it seems a valid solution, problem is you need to keep creating such custom HTML elements frequently. And if you are designing a web app having a dashboard showing multiple data, these custom elements will only increase. Right?

HTML5 Meter tag explained with example
HTML5 Meter tag explained

So then what is an easier solution for this problem than that? Well for one, would it not be easier if we had a built in HTML element to display such measurements? With the growing number of web apps with dashboards, having such a prebuilt HTML element makes sense, right?

Well, that is precisely what the HTML5 specification guys decided to do! And that is how the HTML Meter tag came into picture!

So What Does The Meter Tag Do?

The idea was to create an HTML element that can be used to display any measured values within it. So that is what a Meter tag does!

A Meter tag can be used to display a measured value within a given range of values.

Sounds good? Great! Then let us move on to take a look at an example piece of code that uses the Meter tag. Shall we?

HTML Meter Tag Example

So for this example, let us assume that we want to display the size of a cloud storage space. For brevity, let us say we want to display the size of our mail box which is currently at 66% full. Alright?

So how do we go about using the Meter tag to display this value? And how will the displayed result look like?

To answer these questions, let us start writing our code as shown below:

<!DOCTYLE html>

<html>
  <head>
  </head>
  <body>
    <label for="disk">Disk Usage: </label>
    <meter id="disk" value="0.7">70%</meter>
  </body>
</html>

Now, if you copy the above piece of coded into a new file and save it as meter.html, what do you see?

Go ahead and try it out! I want you to do it yourself so that you become familiar with how to use the HTML meter tags.

Did you try it? If you did, you should see that the result looks something like this:

70%

Conclusion

So that is it! That is how the Meter tag works! You just feed the right value into the “value” property of the Meter tag and it will display the meter gauge accordingly. Go ahead and test it out with few more different values and see how the gauge changes yourself.

Finally, if you have any questions or suggestions, let me know in the comment below! So until next time, take care!

Categories
HTML STATIC WEBSITES TUTORIALS WEB DEVELOPMENT WORDPRESS

Difference Between Link & Anchor Tag In HTML

HTML provides us with 2 different tags called the Anchor tag (represented by <a>) and the Link tag (represented by <link>). But what is the difference between the two? Can they be interchanged with one another? We will explore these queries in this article.

What is an HTML Anchor tag?

An anchor tag is used in an HTML file to help us link our HTML file’s texts to certain other web pages. In other words, it helps in the creation of hyper texts (<a>these are the hyper texts</a>) in HTML documents.

These other web pages that is linked into by the anchor tags can be present within the same website, or can be residing in a different website on a different web server altogether. But what is important is that the Anchor tags <a></a> are responsible for linking different web documents together through hyper texts and help user navigate from one web page to other in a simple mouse click!

It must be noted that all anchor tags are present only within the <body></body> section of an HTML page. They are never used in the <head></head> section of the HTML page. This is because the primary function of the Anchor tags <a></a> is to let web page users to move from one page to the other page. As the web page users can never see the content of <head> section, anchor tags are never used there!

So, in other words, we can say that Anchor tags <a> are used in the user visible part of an HTML web page so that the web page user can click on the Hyper Texts created by these Anchor tags and move from one web page to another.

What is an HTML Link tag?

On the other hand, our web page is not just made up of HTML web pages, but consists of one or more of Cascading Style Sheets (CSS) that are used to style the web page. It also consists of one or more Javascript files to provide interactive functionalities to the web page. These CSS files and the Javascript files are thus part and parcel of the web page and hence need to be linked to the web page. This is achieved using the <link> HTML tag.

The <link> HTML tag is hence used to link up all external resources such as CSS and Javascript files associated with a web page. This linking does not need to be seen by the final user as he only needs to get an integrated HTML web page rendered. As a result, the linking of these files, done through the use of <link> tag is done in the <head> meta section of the web page.

So these were the difference between Link tag Vs Anchor tag in HTML. Each of these tags have very unique functionalities to fulfill in their own roles and cannot be used interchangeably as we suspected in the beginning of the article.

With this, hope it became clear on the differences between Link and Anchor tags’ purpose in the creation of an HTML document. If you have any more queries or doubts between Link and anchor tags, let me know in the comments below and I will try to clarify your doubts.

Until next time, happy coding! 🙂

Categories
CMS HTML STATIC WEBSITES TUTORIALS WEB SERVER WORDPRESS

Introduction To HTML Anchor Tag

Anchor tag is an HTML tag that is used to mark the beginning and end of a hyperlink text in the HTML document.

A website is made up of one or more HTML documents that contains all the information parts of the website. But word wide web as a whole mainly works because of the ability of these HTML web documents to link (or refer) to each other. This inter-linking of web pages is achieved by using the HTML anchor tags.

A typical structure of an anchor tag looks like this:

<a href="https://muddoo.com" title="Muddoo Home">Muddoo</a>
Brief structure of an HTML Anchor tag
Typical HTML Anchor tag usage in web documents

From the above, we note that an anchor tag starts and ends between notations like <a> and </a>. In other words, HTML anchor tags have both opening and closing tags. Text between this opening and closing tags is called the anchor text and is responsible for taking the user to a new document upon being clicked. In the above example, “Muddoo” is the anchor text.

But where does the user go on clicking the Anchor text? This is determined by the href attribute of the HTML anchor tag. The url in the href attribute of anchor tag is the destination web page’s address where the user will be taken to.

In addition to href attribute, the HTML anchor tag also has another attribute called “title”. The title attribute of the HTML anchor tag holds a piece of text that the user will see upon hovered over by the mouse. It is also helpful as an accessibility feature for people using screen readers as it gets read out by the screen readers.

Finally, there are also a few other attributes such as “target” attribute which provides additional functions such as determining if the destination web page is to be opened in the same window or a new window. These type of additional attributes can be looked upon in the official w3c html specification document.

But all in all, the Anchor tags are the fundamental elements of the world wide web that weaves the inter-connected paths between various web documents that helps the web users to seamlessly navigate between various websites and documents without any hassles.

Hope this gave a brief introduction to the HTML anchor tags. HTM Anchor tags are tags that are going to be used regularly while creating a HTML web page so having a clear understanding of its structure and how it works becomes essential. In the same line, I will continue to document more about other HTML tags in the future that are bare essential for web development.

Until then, happy coding!

Categories
HTML STATIC WEBSITES TUTORIALS WEB SERVER WORDPRESS

What is DOCTYPE in HTML? Why do we use it?

When we sit down to write an html document, one of the first line of code we write is <!DOCTYPE html>. But what does this line do? What is significance of this line to a web browser? What happens if we miss including the DOCTYPE tag? Is it even a tag in the first place? We will answer these questions in this article.

What is DOCTYPE in HTML?

DOCTYPE is a type of directive that tells our web browser what type of document it is dealing with. As there are multiple versions of HTML documents that a web browser need to deal with, each following a different version of HTML definition standards or non HTML documents such as XML files, mentioning the “type” of this particular document helps a web browser to decide and adjust itself to render the specified document appropriately.

What happens if the DOCTYPE is not mentioned in an HTML document?

Specifying the DOCTYPE of a document will help a web browser to make appropriate decisions in rendering that file to its user successfully. In the event a web document does not have appropriate DOCTYPE specified, the web browser will try to make a best guess and try to render the document accordingly. However, a result of this could be that the rendering might not be happening in the most optimal way and as a result, some of the documents might not get rendered properly.

Is DOCTYPE even a HTML tag?

Actually, No! 😮

DOCTYPE according to HTML specification is not a HTML tag, but a declaration for the browser to make use of.

Does DOCTYPE have an end tag?

The answer is NO. DOCTYPE is not a HTML tag and does not have an explicit end tag to itself.

In the earlier days, web documents used DOCTYPE declaration effectively to let the browser know what type of HTML standard specification the document was following. As a result, the first line of a web page that declared the DOCTYPE had a very lengthy string to it, something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

But these days, with most of the websites using HTML 5 specification, the actual usage of DOCTYPE has become more or less redundant and hence we can get away by just declaring the DOCTYPE as:

<!DOCTYPE html>

and browser will still be able to handle it perfectly.

Hope this gave a bit of clarity on some of the doubts you had around DOCTYPE declaration in HTML. If you have an inputs or queries regarding it, don’t hesitate to ask about it in the comment section below!

Until then, Happy Coding!

Categories
EDITORS TUTORIALS VISUAL STUDIO CODE

Best Visual Studio Code Extensions For HTML (VS Code Extensions)

Looking for best Visual Studio Code extensions for my web development activities, I came across a plethora of VS Code extensions made available by various developers not just for web development, but for various other types of programming activities as well.

In this article, I will list out few of these Visual Studio Code extensions suitable for HTML coding activities.

List of Visual Studio Code extensions for HTML

Intellisense (Built-in, no extension required)

I agree that this blog post started as showcasing a list of HTML Visual Studio Code extensions, but I would be doing a disservice to the developers of VS Code if I did not mention the excellent support that has been provided as built in functionality in the Visual Studio Code itself via Intellisense. VS Code Intellisense provides support for suggestions and auto completion of basic HTML tags.

Visual Studio Code’s Intellisense auto-completion support for HTML

Emmet Feature In VS Code (Again, built in, no extension required)

Emmet is my next go to feature that is built into VS Code now that I highly recommend to everyone out there that is working with HTML coding or development using Visual Studio Code.

One of the main functionality of Emmet on VS Code is to provide basic abbreviations for most of HTML code.

So say for example you are about to create a new HTML page that you want it to be mobile friendly and descibes all the basic structure of an HTML page such as UTF charset meta data, viewport type, language type etc. You can do so by simply typing “html:5” at the beginning of the document and pressing TAB key. This will trigger the Emmet’s abbreviation feature resulting in autocompleting the basic structure of a web page as shown in the GIF below:

Emmet’s Abbreviation feature in action for HTML 5

HTML5-Boilerplate VS Code HTML Extension

The next Visual Studio Code extension for HTML deals specifically with HTML 5 and is called HTML5-Boilerplate VS Code extension.

The HTML5-Boilerplate VS Code extension is very similar to that of Emmet we had discussed earlier, but differs in the fact that it specifically deals with generating boilerplate code for HTML 5. Below is a GIF showing HTML5-Boilerplate Visual Studio Code (VS Code) extension in action:

Visual Studio Code (VS Code) HTML5-Boilerplate extension in action
Installation Code: ext install sidthesloth.html5-boilerplate

HTML Live Preview VS Code HTML Extension

HTML Live Preview is another Visual Studio Code extension that as the name suggests, helps its users to do a live preview of their HTML web page during its development. What is interesting is that the HTML Live Preview VS Code extension does this at real time as shown in the GIF below:

Visual Studio HTML Live Preview extension in action
Installation Code: ext install hdg.live-html-previewer

These are some of the HTML extensions for Visual Studio Code editor that I have come across up until now. I am pretty sure I might have missed out a lot more useful HTML extensions for VS Code, which I would continue to add to my toolkit upon discovery and update this article accordingly. For now, these extensions are bound to make my life easy while developing HTML code for my web development activities.

If you are aware of any more Visual Studio Code extensions for HTML that you found useful and you think I should try and recommend it to others, do let me know in the comments below and I will definitely look into it.

Till then, happy coding!

Categories
PYTHON TUTORIALS

How to scrape HTML tables using Python

Python is a versatile programming language that can be used to write programs of varied applications. The number of available libraries in Python makes it one of the most useful programming languages that can be used to perform numerous tasks. Be it writing a simple Python script to automate basic shell command operations in an Operating System, or a program to perform data analysis or Machine learning, Python excels them in all, thanks to the available Python Library packages.

In this article, we will explore and learn about using Python programming language to perform one of the most common application in the world of web, HTML scraping or web scraping using Python.

Web scraper Illustrative picture

All the websites we view in our favorite web browser is written using mainly 3 important web front-end programming languages – HTML, CSS and Javascript. Each of these 3 programming languages have a specific role to play in the creation of a web page. They are:

HTML – HTML is a simple Markup language used to create various HTML elements that make up a web page. The elements including Headings, Paragraphs, Lists, Images, tables, headers and footers, links etc that we see in a web page are all different HTML elements. So in other words, HTML Markup language is used to create these HTML elements that we see as part of a web page. HTML here stands for Hyper Text Markup Language.

CSS – CSS is a design style programming language that is mainly responsible for implementing the look and feel of the above mentioned HTML web page elements. You might have seen that same contents of a table are displayed in two different styles in two different websites. This is because, even though both use the same HTML Table element to create this content, the HTML Table is styled in different formats by each of these websites. This is achieved using the CSS programming language. CSS here stands for Cascading Style Sheets.

Javascript – Javascript is another programming language that was mainly developed for use in web browsers, but nowadays has made its way into all parts of web development – be it in the front end (browser side) or at the back end (server side).  Javascript programming language on the front end side is used to provide interactive functionalities to the HTML elements of a web page. For example, In most of the web pages that we see these days, we might have seen the infinite scrolling feature where in only first few content elements are loaded in a web page and the rest are loaded dynamically as we scroll to the bottom of the web page. Twitter home page is a good example of this. This sort of interactive functionalities are added using Javascript language in a web page. Almost all interactivity of a web page is achieved using the help of Javascript these days.

When a web page is rendered in a browser on the user’s computer, the webpage includes all these HTML elements with all the texts and image content of the web page all embedded within themselves. So, we can actually retrieve these text and image contents from a web page using a programming language such as Python. Such a process is actually called “Web Scraping” in the web development world.

Scraping A Web Page Using Python

In order to learn how to scrape a web page using Python, we will try to scrape a table that lists mountains across the world ordered by their elevation, as seen in the the official Wikipedia website:

https://en.wikipedia.org/wiki/List_of_mountains_by_elevation

In this Wikipedia web page, we notice the presence of several tables. The first table mainly displays list of mountains having elevation of 8000 meters or above. It is this web page’s table that we would like to scrape using Python.

Introduction to BeautifulSoup library in Python

As mentioned in the beginning of this article, Python comes with myriad of useful libraries that one can use to perform complex tasks with ease by using these libraries’ APIs. One such library is called the “BeautifulSoup” library and is one of the most interesting library that one can use in Python to perform web scraping.

BeautifulSoup Python library’s functionalities

One of the most important functionality of Python’s BeautifulSoup library is its ability to parse and interpret HTML tags. All html elements are represented using what are called the HTML tags. Some examples of such tags are <h1> for main heading, <p> for paragraphs and <table> for tables. Python’s BeautifulSoup library understands these tags and can extract information present in a web page within these tags. BeautifulSoup library exposes these APIs to us to use these functionalities in our own Python programs, which we will make use of in our Python web scraper program that we are about to write.

BeautifulSoup library is available in Python libraries repository under the name of ‘bs4’ and can be installed into your computer system for developing the web scraper using the command:

pip install bs4

BeaultifulSoup library example

In order to understand how a BeautifulSoup library works, let us download a Wikipedia web page into our local system. For this example, let us download the following Wikipedia web page:

https://en.wikipedia.org/wiki/List_of_mountains_by_elevation

Let us save the web page from above link as mountains.html in our local home directory (~/).

We can then read the content of this web page using Python’s BeautifulSoup library using the following commands:

from bs4 import BeautifulSoup

input = open('~/mountains.html', 'r')

soup = BeautifulSoup(input.read(),'html.parser')

tables = soup.find_all('table')

print tables

Well, thats a mouthful of code you just read there. Let us try to understand it in a step by step manner to simplify it and understand what we are doing here:
The first line:

from bs4 import BeautifulSoup

Simply imports the BeautifulSoup library form the Python’s bs4 library we just installed. The next line:

input = open('~/mountains.html', 'r')

is simply using Python’s file operation function open( ) to open the previously downloaded mountain.html web page. In the next line:

soup = BeautifulSoup(input.read(),'html.parser') 

we call the BeautifulSoup function and pass it as one of the argument, content of our mountain.html webpage using the Python’s standard file operation function read( ). Another argument that we pass along is ‘html.parser’. This tells the BeautifulSoup function to interpret the content of the passed input content as HTML data and use HTML parser to parse it. The resulting parsed HTML data is assigned to the variable ‘soup’ for later usage. In the next line we do this:

tables = soup.find_all('table')

What the above line shows is that we are now searching for all the available HTML tables in the ‘soup’ variable and assign it to a new variable tables. So, by now we should have all the HTML tables present in mountain.html file assigned to the Python list variable ‘tables’.

Finally, we print the content of this tables variable that should print all the tables found in our mountains.html web page!

While this is good and all, we did a manual download of the Wikipedia web page, saved it as mountain.html and only then used Python’s BeautifulSoup library to process it. However, wouldn’t it be great if we could eliminate this manual step and do even this programmatically? As a next step, we would do exactly this using a new Python library – urllib introduced next.

Introduction to Python Urllib library

Another important Python library that we are going to use to create our web scraper program is called the urllib library. Let us see what functionalities Python’s urllib library brings to us.

Python’s Urllib library is used to fetch contents of web page url. It provides us with APIs such as open(), read() etc to open a web page and read its contents back. Url here stands for Uniform Resource Locators. They are the static web addresses that one can use to locate a web page and read/fetch its contents back.

How to install Python Urllib library?

We can install the Python Urllib library using the following pip command:

pip install urllib

Python Urllib Example

Here is a simple example of urllib library that is used to fetch the content of a Wikipedia web page.

First we will import the urllib library into our Python program environment using Python’s import command:

import urllib

The Urllib library exposes several useful APIs for other programs to make use of. One such API is the request API that one can use to open a web page and read its content. The request API in turn exposes two more functions called the urlopen( ) function and the read( ) function. An example of a Python program using this API is given below, where we are trying to read the contents of a Wikipedia web page:

import urllib.request

content = urllib.request.urlopen('https://en.wikipedia.org/wiki/List_of_mountains_by_elevation')

read_content = content.read()

We can actually combine the above two function calls of the Urllib’s request API – urlopen( ) and read( ) functions into a single line as shown below:

source = urllib.request.urlopen('https://en.wikipedia.org/wiki/List_of_mountains_by_elevation').read()

Python Web Scraper using Urllib and BeautifulSoup libraries

Finally, combining the APIs provided by both BeautifulSoup and Urllib libraries, we can write our web scraper program that reads a Wikipedia page’s contents, extracts its tables, and print the content of a particular table as shown below:

from bs4 import BeautifulSoup
import urllib.request

source = urllib.request.urlopen('https://en.wikipedia.org/wiki/List_of_mountains_by_elevation').read()
soup = BeautifulSoup(source,'html.parser')
tables = soup.find_all('table')
table_rows = tables[0].find_all('tr')
for tr in table_rows:
print (tr)

The above program is our intended Python web scraper program that can go fetch a Wikipedia page using urllib library. We can then extract all the contents of the web page and find a way to access each of these HTML elements using the Python BeautifulSoup library.

Here we are simply printing the first “table” element of the Wikipedia page, however BeautifulSoup can be used to perform many more complex scraping operations than what has been shown here.

I will explain more such operations one can perform using BeautifulSoup Python library in future articles, but this should serve as an entry point for someone who is just getting started with Python programming language for web scraping.