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
CMS LAMP PHP TUTORIALS WEB SERVER WORDPRESS

What is WordPress?

WordPress is a software tool that one can use to create a website with ease. WordPress is often also called a Content Management System or CMS for short, because it provides a set of tools and user friendly interface to manage the website and its contents, like creating new posts, delete posts, add new users, remove existing users, change the style of the website etc.

Wordpress Logo

The ease at which one can create a website and manage it, without its user needing to have any technical knowledge or programming language makes WordPress one of the most popular website development and CMS software of choice.

Just how easy is it to use WordPress for website development?


In order to create a new website using WordPress, the creator is not required to have any programming background. There are several web hosting providers such as Namecheap, GoDaddy etc who provide web hosting services with One-Click WordPress installers built into their user’s Control Panel.

So, by just clicking a button, a user will be able to create a simple WordPress website. Of course a little bit of configuration needs to be done to ensure that the domain name that the user wants to use with the website is done. However, this is pretty straight forward and the web hosting providers do provide with sufficient tutorials and documentations on how to do this so it should not really be a bottleneck for non technical first time creator of a WordPress website.

How much does the WordPress software tool cost?

WordPress is an open source website development and CMS tool that is made available for free to its users. So, there is no cost one has to pay for using WordPress to create a website.

However having said that, a website needs to be stored in a web server and be made available to its users across the world. This web server will then be serving your WordPress web pages on the internet to its users throughout the day. This process is actually called as “Web Hosting“.

Theoretically, one can use your own computer to run (aka host) your website, but then you will need to ensure your computer is always switched on, connected to the internet and also not slowing down at any point in time. This means, you will not be able to use your computer for any other tasks that will slow down your computer.

So to avoid that, one will need to rent out a web server from any one of the various WordPress web hosting service providers. By doing so, the responsibility of ensuring that the website’s uptime i.e. your WordPress website’s web server is up and running 24/7 throughout the year will be taken care by those WordPress web hosting service providers.

Even though it may cost you a little bit to host your WordPress site on a 3rd party web hosting service providers, It is still considered a very good business decision to outsource such tasks to the service providers as then you can focus on your specific business growth activities knowing that your website’s uptime will never be compromised.

So now that we have a brief introduction to what a WordPress software tool is, we will just briefly discuss about some technical details of the WordPress. While a non technical person need not have to know any programming aspects of WordPress, having a little bit of introduction to what WordPress itself is made up of can be useful when he needs to get some technical help from any person in the future.

What is the Programming language used in WordPress?

WordPress is a PHP programming language based Content Management System (CMS). It is one of the most popular CMS used across the world. It powers more than 30% of the websites on the internet, and as a result of this popularity, it is often also the most targeted platform by hackers to try to find and exploit WordPress’s vulnerability. So one has to ensure that he keeps his WordPress website always updated with any security patches released by WordPress community.

What is the software stack used in WordPress?

While in the previous section, we described WordPress as a CMS written using PHP programming language, it also makes use of other additional technologies. These technologies clubbed together are often called as a software stack.

WordPressContent Management System (CMS) is primarily made of LAMP stack. LAMP stack stands for Linux, Apache, MySQl and PHP stack, where each of these components of the stack serves a specific purpose.

While we will discuss about each of these components of a WordPress stack in greater detail in future articles, here is a brief description of what each of this LAMP stack of WordPress stands for:

Linux – Linux is the Operating System that the webserver runs on.

Apache – Apache is the Web Server on which WordPress will typically run on.

MySQL – MySQL is the name of the database which is typically used by WordPress to store any website data as well as its content itself.

PHP – PHP is the programming language used to write WordPress software.

If you have read up to this point, you should now be having a decent understanding of what a WordPress software tool is, got an introduction to some new terminologies like CMS, Apache, MySQL, PHP etc.

In the future articles, we will start taking a deeper look into each of these components that make up a WordPress website, what their primary roles are in the functioning of WordPress, how their performance matters for the performance of your WordPress website as a whole and much more.

If you have any doubts after going through this article, or would like me to cover any specific point in more detail regarding WordPress, do leave a comment on this post below and I will make sure to discuss with you further on those topics.

See you in the next article!

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.