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
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:
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!
In this article, we are going to learn how to extract data from a website using Python. The term used for extracting data from a website is called “Web scraping” or “Data scraping”. We can write programs using languages such as Python to perform web scraping automatically.
In order to understand how to write a web scraper using Python, we first need to understand the basic structure of a website. We have already written an article about it here on our website. Take a quick look at it once before proceeding here to get a sense of it.
The way to scrape a webpage is to find specific HTML elements and extract its contents. So, to write a website scraper, you need to have good understanding of HTML elements and its syntax.
Assuming you have good understanding on these per-requisites, we will now proceed to learn how to extract data from website using Python.
Python Web Scraper Development
How To Fetch A Web Page Using Python
The first step in writing a web scraper using Python is to fetch the web page from web server to our local computer. One can achieve this by making use of a readily available Python package called urllib.
We can install the Python package urllib using Python package manager pip. We just need to issue the following command to install urllib on our computer:
pip install urllib
Once we have urllib Python package installed, we can start using it to fetch the web page to scrape its data.
For the sake of this tutorial, we are going to extract data from a web page from Wikipedia on comet found here:
This wikipedia article contains a variety of HTML elements such as texts, images, tables, headings etc. We can extract each of these elements separately using Python.
How To Fetch A Web Page Using Urllib Python package.
Let us now fetch this web page using Python library urllib by issuing the following command:
will import the urllib package’s request function into our Python program. We will make use of this request function send an HTML GET request to Wikipedia server to render us the webpage. The URL of this web page is passed as the parameter to this request.
As a result of this, the wikipedia server will respond back with the HTML content of this web page. It is this content that is stored in the Python program’s “content” variable.
The content variable will hold all the HTML content sent back by the Wikipedia server. This also includes certain HTML meta tags that are used as directives to web browser such as <meta> tags. However, as a web scraper we are mostly interested only in human readable content and not so much on meta content. Hence, we need extract only non meta HTML content from the “content” variable. We achieve this in the next line of the program by calling the read() function of urllib package.
read_content = content.read()
The above line of Python code will give us only those HTML elements which contain human readable contents.
At this point in our program we have extracted all the relevant HTML elements that we would be interested in. It is now time to extract individual data elements of the web page.
How To Extract Data From Individual HTML Elements Of The Web Page
In order to extract individual HTML elements from our read_content variable, we need to make use of another Python library called Beautifulsoup. Beautifulsoup is a Python package that can understand HTML syntax and elements. Using this library, we will be able to extract out the exact HTML element we are interested in.
We can install Python Beautifulsoup package into our local development system by issuing the command:
pip install bs4
Once Beautifulsoup Python package is installed, we can start using it to extract HTML elements from our web content. Hope you remember that we had earlier stored our web content in the Python variable “read_content“. We are now going to pass this variable along with the flag ‘html.parser’ to Beautifulsoup to extract html elements as shown below:
from bs4 import BeautifulSoup
soup = BeautifulSoup(read_content,'html.parser')
From this point on wards, our “soup” Python variable holds all the HTML elements of the webpage. So we can start accessing each of these HTML elements by using the find and find_all built-in functions.
How To Extract All The Paragraphs Of A Web Page
For example, if we want to extract the first paragraph of the wikipedia comet article, we can do so using the code:
pAll = soup.find_all('p')
Above code will extract all the paragraphs present in the article and assign it to the variable pAll. Now pAll contains a list of all paragraphs, so each individual paragraphs can be accessed through indexing. So in order to access the first paragraph, we issue the command:
pAll[0].text
The output we obtain is:
\n
So the first paragraph only contained a new line. What if we try the next index?
pAll[1].text
'\n'
We again get a newline! Now what about the third index?
pAll[2].text
"A comet is an icy, small Solar System body that..."
And now we get the text of the first paragraph of the article! If we continue further with indexing, we can see that we continue to get access to every other HTML <p> element of the article. In a similar way, we can extract other HTML elements too as shown in the next section.
How To Extract All The H2 Elements Of A Web Page
Extracting H2 elements of a web page can also be achieved in a similar way as how we did for the paragraphs earlier. By simply issuing the following command:
h2All = soup.find_all('h2')
we can filter and store all H2 elements into our h2All variable.
So with this we can now access each of the h2 element by indexing the h2All variable:
So there you have it. This is how we extract data from website using Python. By making use of the two important libraries – urllib and Beautifulsoup.
We first pull the web page content from the web server using urllib and then we use Beautifulsoup over the content. Beautifulsoup will then provides us with many useful functions (find_all, text etc) to extract individual HTML elements of the web page. By making use of these functions, we can address individual elements of the web page.
So far we have seen how we could extract paragraphs and h2 elements from our web page. But we do not stop there. We can extract any type of HTML elements using similar approach – be it images, links, tables etc. If you want to verify this, checkout this other article where we have taken similar approach to extract table elements from another wikipedia article.
We have all heard about different websites present on the internet such as Google, Youtube, Facebook, Twitter etc. But what exactly is a website? What is it made up of?
Imagine you just found a 100 year old book in your attic that contains a wealth of information about the world wars. It also has a collection of photographs that revealed some secrets that are lesser known to the public. You wanted to share this information with the world, but how?
One way is to go to the newspapers and get it published, but it can still not reach all the people across the world. What would be an easy and best possible way to share this information to people around the world? Publish it on the internet!
When you publish it on the internet, anyone from around the world having a computer or a smartphone with an access to the internet will be able to consume your content.
You can publish this information on social networking websites such as Facebook, Twitter or Youtube or create your own website to publish it.
So, a website, simply put, is a collection of information present in different formats such as texts, images, videos, graphs that is published on the internet to helps its users consume them.
But just like you, there are millions of people who are sharing information on the internet, so how do you make your contents accessible from other people’s information? This problem is very similar to having thousands of building in a city and needing to find a particular building. How do we do that? We will discuss about this in the future articles
These components are arranged as shown in the following diagram.
Location of the web app components on the internet
Web App Back-End component
All the core logic of a web app or website is usually implemented in the web app’s back-end component. This includes all the algorithms of the web app, code to perform any storing and retrieval of data from the database, url based route handling etc. All these code forms the back-end of a web app or website and runs on a specialized computer called the web server.
Backend component of the above image
The code for back-end programming can be written using several different programming languages such as PHP, Python, Java, Javascript, Ruby etc. Each of these programming languages comes with their own advantages and disadvantages like for example choosing a language like Python comes with the great benefit of having several readily available libraries useful for data crunching activities, however they can be relatively slow compared to other programming languages. So which backend programming language to choose largely depends on the type of functionalities required for the particular web app that is going to be developed.
Web App Front-End Component
All the visual and interactive elements of a web app or website comes under the Web app’s front-end component. Whenever the user of a web app or website visits the website, he will only see and interact with the web app’s front-end component. So as far as he is concerned, a web app for him is usually just the front-end component. It is what he sees and interacts with in his web browser.
Front end component of the above image
However, these front-end components will not usually store all the relevant data of a web page within itself but instead, will query for them by sending requests to the web app’s back-end component that was discussed earlier. These requests are usually sent using the HTTP protocol.
The programming languages used to write web app’s front end component includes HTML, CSS & Javascript. Among these, HTML is a markup language that a web browser will use to interpret what HTML components needs to be drawn on the browser screen to represent the website. CSS is a styling language used to customize the style (like change the color, size, background color etc.) of these HTML components. Finally Javascript is a programming language that can be used to add interactive functionalities to these HTML components.
With the help of these 3 programming languages, your front end should be highly interactive and user friendly for any non technical person to start using your web app.
Database component
A database is a specialized software used to store and retrieve data efficiently on a computer or a server. The database can sit in a web server along side the server software or can be present in its own seperate dedicated database server.
Database component
Databases are usually used in a web app (or website) to store all relevant data of that web app such as user data, session data, web app specific data etc. There are many different forms of databases available such as relational databases, NoSQL databases, Document Oriented databases, Graph databases etc. Each of these variants of databases have certain unique features that are useful in certain specific situations. The most common database type used in web apps are usually relational databases such as MySQL, PostgreSQL. However Document Oriented databases such as MongoDB are also used frequently.
So these 3 components forms the fundamental elements of a web application. Of course there can be more than these 3 components required as your web app continues to grow. You may need to add multiple servers, load balancers to manage higher traffic, caching mechanisms etc. We will discuss more on these modules further in future articles, but having the knowledge of above three fundamental components of a web app should give you the best start to learn and start working on the development of your first web application.
Do comment below if you liked the article or if you have any questions regarding the above topic and I will be happy to answer your questions. Until then, happy learning! 🙂
What is a Google Chrome Extension and what does it do?
Google Chrome extension is a Google Chrome browser extension that acts like a plug-in which adds additional functionalities to your default Google Chrome web browser experience.
Google Chrome web browser comes with a default set of functionalities that are applicable to a wide range of use cases as utilized by all the websites out there. But if you have a requirement for additional browser functionalities that are not already supported by default in your browser, you can try to make use of the available Google Chrome browser extension APIs to create a browser extension that would fulfill your such requirement.
In other words, Google Chrome Extensions extends the functionality of the default Chrome browser by introducing new set of functionalities into it.
What programming language is used to write a Google Chrome Extension?
In order to write a Google Chrome browser extension, you just need to have basic web development knowledge. The programming languages used to develop Google Chrome browser extension are HTML, CSS and Javascript. Using just these 3 languages along with the provided Google Chrome Browser Extension Application Programming Interfaces (APIs), you will be able to develop your Google Chrome browser extension in no time!
With this background information in hand, let us now figure out how to write a new Chrome browser extension.
Getting started with developing Google Chrome extension
All Google Chrome browser extensions must have one required file, the manifest.json file. It is using this manifest.json file that the Google Chrome web browser can identify and display all the available information about your Google Chrome extension.
The manifest.json file will have entries related to your Google Chrome browser extension such as its name, description, version number of the extension, author name, permissions and many other metadata, all stored in JSON format.
So let us now go ahead and create a new directory which I called coolExt where we will store all the files related to this Google Chrome extension. Under this newly created directory, create our manifest.json file with the following content:
manifest.json (The only file required to get Chrome extension started!)
You can see that this file contains a set of JSON key:value pairs. Here, each of these JSON key values such as “name”, “manifest_version”, “author” etc are already defined by Google’s Chrome API and hence we cannot alter it but use it as is. On the other hand, the values of these are determined by us according to how we want to describe and design our Chrome browser extension!
With the manifest.json file and its contents in place, it is now time to test our Google Chrome extension. In order to do so, open up your Google Chrome browser and in the address bar type: chrome://extensions
This should now open up a new Chrome Extensions window listing any Google Chrome extensions you might have already installed. At the top of this window, you should see an button called “Load unpacked“, click on it and browse to the “coolExt” directory where we have the above manifest.json file saved in and open it. This should now result in our Google Chrome extension getting installed into our Google Chrome browser and displayed as an installed extension in chrome://extensions
Google Chrome Extension Development In Action
There we have it! A basic version of our simple Google Chrome extension is created and installed into our Google Chrome browser. Although at the moment the Google Chrome extension is not doing much other than just describing itself and some other meta information, we have successfully created the basic framework for our Chrome extension.
We will in the next article continue to develop on this basic Chrome extension to bring in some interesting functionalities to our browser and to some of the websites we will visit. But that will be in the next article, so for now hope you got a basic understanding of how Chrome extensions are built under the hood. Checkout for the next article and if you have any comments on queries with respect to this article, do let me know in the comments below.
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.
Empty elements of HTML code are those HTML elements that have start tags but do not have an associated end tags. So these are the HTML elements which can contain only attributes associated within them but no content by themselves.
Sometimes, HTML Empty elements are also called as Void Elements of HTML.
Some of the interesting features of Empty Elements of HTML includes:
They can never have raw text or CDATA associated within themselves.
They can never have any additional child nodes in the DOM tree.
A list of HTML Empty Elements are as follows:
<br> Insert A Line break
<hr> Insert A Horizontal line
<img> Insert an image from a file in the path defined by its “src” attribute
<meta> Defines the metadata of a web page
<source> Insert a media file
<link> Used only in a document header to link in an external resource
<input> Used to declare an input element to accept user input.
Hope this gave you good idea about what HTML tags are considered HTML Empty elements. I will continue to write further on more such lesser known information related to web development in future articles as well.
HTML is the language used to develop web pages for the world wide web. But what does HTML even mean? We know that HTML stands for Hyper Text Markup Language, but what does each of these terms even signify? This post will try to discuss upon each of these words and their significance in the world of the web.
What is Hyper Text?
Hyper text refers to the ability of web pages to link with each other, within the same website or between websites on the internet.
What is a Markup Language?
HTML is a markup language. But what does markup language even mean? It means that all the building blocks that make up a HTML web page are made up of HTML elements defined by HTML markups. In other words, HTML markups are special tags used to define all the HTML elements that make up a web page. These HTML markups includes tags like <head>, <title>, <body>, <footer> etc.
Why use semantic HTML markups for your web page?
With the recent HTML 5 specification, there has been an increase in the amount of these HTML markups (or tags) defined by the specification so that there are more semantically meaningful HTML markup tags available to define a web page. These new semantically appropriate HTML markup tags help improve the readability and understanding of the sections of these web pages by machines (aka algorithms) such as search engines.
Chinese attackers have been using HTML Anchor tags to perform DDOS attacks across the world these days. This is one such instance where a seemingly benign feature addition done to the HTML technical specification has inadvertently opened a Pandora box of its misuse/abuse by hackers and attackers.
As mentioned in my introductory article to HTML Anchor Tags, Anchor tags are used to link documents present on the word wide web so that users of a web page can easily navigate to a new web page seamlessly from their web browsers.
An example of HTML code using anchor tags looks something like this:
While the above code is a standard way of using HTML anchor tags, there are also additional anchor tag attributes one can use to add new features to the anchor tag’s overall functionality. In our previous article we looked at the noopener attribute that ensures that when the respective anchor links are opened in a new window, they are opened in a separate thread all together and have no relationship to the parent web page in anyways. This ensured that Cross Site Script (XSS) attacks could not be made from child web page to the parent page.
Just like the noopener attribute, we have another attribute associated with the anchor tags that some hackers are misusing to perform DDOS attacks on other websites. This attribute is the “ping” attribute of the anchor tags!
What is HTML Ping Attribute?
Ping is a new attribute of an Anchor tag that was introduced in HTML5 specification. Ping attribute would list a set of one or more URLs that are pinged back whenever a user of a web page follows a hyperlink from that anchor tag.
The idea of introducing Ping attribute to anchor tags was to enable web administrators track clicks on that hyperlink. An example of how this attribute looks like is shown below:
<a href="https://google.com" ping="https://muddoo.com/tracker">Go to Google</a>
So in the above example, whenever a user clicks on “Go to Google” hyperlink, he will be taken to the Google home page, but at the same time, a ping POST message is sent back to the https://muddoo.com/tracker webpage for muddoo.com website to keep track of number of users going to Google through that hyperlink.
But the problem occurred when some of the Chinese hackers started using this innocuous feature to perform DDOS attacks on many websites. They simply created web page with links to standard websites such as Alibaba or Tabao, while using ping back links to their target websites. They specifically targeted people using QQBrowser (from Chinese giant Tencent) to use their web pages to reach standard websites. This resulted in millions of Ping request going back to targeted websites thus acting as a DDOS attack on these websites.
How to prevent Anchor Tag Ping attacks from your web pages?
With good understanding of how the attack is being performed, you must be wondering how you can prevent such DDOS attacks originating from your websites or getting attacked by one. But unfortunately, there are no clear solutions in place as the support for Ping requests are part of HTML 5 specifications so all browsers will be supporting it (well, more or less), so your only best possibilities will be to keep monitoring such activities on your web server and take appropriate action at the right moment.
Hope this article gave good introduction to the possible Ping DDOS attacks happening due to the presence of Ping attribute in the HTML Anchor tags. This article has been part of series of articles that I have been writing about HTML tags with this being the third article on HTML Anchor Tags.
If you would like to take a look at other two articles, you can follow these links:
HTML anchor tags are used to link to different web pages available on the internet. We also frequently use “target” attribute with the anchor tags so that the linked web page is opened in a separate new window. This is achieved by using the anchor tag like this:
Note that in the above code we set the “target” value to be _blank, which would result in the linked web page (https://muddoo.com in this case) to be opened in a new window.
However, it has been found that this can leave a possible vulnerability where in the remotely linked web page can take over control of your web page.
Why does this vulnerability happen?
This vulnerability of remotely linked web page taking over your web page (that is having the anchor tag) is because of the following reasons:
In normal scenario, whenever you open a new web page in your browser in a new window, the web page is running in its own separate thread.
Now when we open a link present in that web page, the new linked web page gets opened in a new window due to the presence of “target” attribute of the anchor tag. However, in this scenario, the newly opened web page is also running under its parent’s thread itself instead of its own thread.
As a result, the newly opened external web page has controls over its parent’s thread. There by creating a vulnerable situation!
How to overcome anchor tag’s “target” vulnerability?
We can overcome this “target” thread control vulnerability simply by introducing a new attribute to your anchor tags called the rel=”noopener” attribute.
Thus, the new fixed anchor tag would look something like this:
With this simple change, we can ensure that the newly opened web page runs in it’s own thread there by having no link to it’s parent thread in any way!
Hope you are now aware of this possible vulnerability and ensure you start using the rel=”noopener” attributes to all your web pages’ external links!