INTRODUCTION
According to Mohamed Saad, “A successful website does three things:
It attracts the right kinds of visitors, Guides them to the main services or product you offer, and Collects Contact details for future ongoing relations.”
But what's behind this result?
This article will help us answer this question and explain the basics to get you started, whether you want to start a career in web development or you want to use the knowledge to improve your skill or business.
Different Technologies in making the website
Every skilled worker uses their tool, web development also has its tools known as Technologies and to build a good website, it is important to use the right tools because computers communicate with those technologies to develop websites.
Here are some technologies required to build websites.
Browsers: Their work is to read and display your work correctly. Google Chrome and Firefox are mostly used by developers.
Text Editors/Code Editors: They are applications that are used to write code like Visual Studio Code and Sublime Text. There are also online code editors like Stackblitz and Codepen.
Programming languages like HTML, CSS, JavaScript and others. Developers use these languages to communicate with computers.
We will now focus on HTML which is the basic language that developers use to write web pages today.
History of HTML / Getting started with HTML
HTML stands for Hyper Text Markup Language. It was created by Tim Barnes-Lee in 1989 and since then, many versions have been created. The latest version which is HTML5 is what most developers use today to create web pages on the internet.
Wondering why you should learn HTML?
HTML is a good way to get started with development. It is the building block of all other programming languages. Basic knowledge of how it works will help you to learn other tech languages quickly and easily and could make a huge difference to your resume.
Let’s now see how an HTML document is organized.
HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>paragraph </p>
<h1>My First Heading</h1>
</body>
The image above shows the basic structure of an HTML document. It starts with the <! DOCTYPE html> declaration, which tells the browser the version of HTML you are using and in this case, it is telling the browser that we are using HTML5.
After the declaration, there is a <html>tag which serves as a container for all other HTML elements. It tells the browser that everything within this tag is an HTML page.
The <head> tag comes next. It provides more information about the HTML page. For example, it gives Information about the title of the document and also tells the browser how the page should display on different devices
Following the head tag is the <body> tag. It contains all the elements that we see on the web page, like paragraphs, images, tables, videos and so on.
HTML Elements
Simply put, HTML Elements are whatever that is written within an HTML tag as highlighted below.
<tagname>Content goes here...</tagname>
for example:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
What are HTML Tags?
They tell us what HTML elements are. For example <p> tag tells us that the element within this tag is a paragraph.
Most of the time, they come in pairs, the opening tag<tagname> and the closing tag</tagname> which tell us the beginning and the end of an element as shown below.
<opening tag>Content goes here...</closing tag>
Some tags do not have a closing tag, and they are called self-closing tags. An example is the image tag <img> for these to function very well, an HTML attribute is added to them.
HTML Attributes
HTML Attributes give additional information about an HTML document. In other words, they define the character of HTML elements.
They are always placed in the opening tag. An example is shown below.
<img src="image link">
In this example, the src="..." attribute is added to the image tag <img> to tell the browser the source or where the image came from.
Html Tags vs Element
HTML tags tell the browser how it should display content to the user, while HTML elements are the components of the web.
Html tags are used to hold elements while an HTML element is anything within the tags as displayed below.
<h1>My First Heading</h1>
They work together but function differently.
Let’s now see the <head> tag as an example.
What is in the head tag?
The <head> tag carries more information or metadata about an HTML document. It also serves as a container for other tags like the <title> tag and <Meta>tags.
The <title> tags tell the browser what the title of the document is.
While the <meta> tag specifies metadata (more information) about the document like the page description, keywords for Search Engine Optimization, and Viewport setting and even tells the browser who the author is.
The example below will tell the browser that the author of the document is Favouritedev.
<meta name="author" content="Favouritedev">
Conclusion
Contrary to what a lot of people think, web development is for everyone, it's easy to learn and understand.
With the right tool, and guidance you are sure to make progress in less than no time.
There are so many platforms and non-profit tech organisations like Codevixens academy, that can help you learn for free irrespective of where you are.