Introduction to Web Development

This article will give you a basic understanding of web development, web servers, web browser, the basics of HTML, some of the HTML elements, attributes, and its functions.

What is Web Development?

Web Development means, building, creating, and maintaining websites. It is a combination of two words,

Web => websites, webpages, or anything that works over the internet

Development => building the application

Web Development is classified into two,

1. Frontend Development

2. Backend Development

What is a web server?

A web server is software or hardware (or both together) that stores and delivers content to a web browser. Whenever a browser needs a file, that is hosted on a web server, the browser requests the file via HTTP, When the request reaches the correct web server, the HTTP server accepts the request, finds the requested document, and sends it back to the browser. If the server doesn't find the requested document, it returns a 404 response instead.

Apache is the most widely used webserver software

What is a web browser?

A web browser is application software for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen

In other words, a web browser lets us view websites on the internet. It also lets us view the websites that we create.

The most popular web browser for web development is Google Chrome.

What is HTML?

HTML stands for Hypertext Markup Language.

Hypertext => the link between webpages.

Markup Language => the text document within the tag that defines the structure of webpages

What is HTML used for?

It is a tool we use to give instructions to a computer to create our websites. The Computer reads out instructions from top to bottom. It has a series of elements, which we can use to enclose different parts of our content to make it appear a certain way. for example,

<h2> My name is Shon</h2>
<p>I'm Writing an article on Introduction to Web Development</p>

Here, <h2> and <p> are two examples of HTML elements. HTML elements have an opening tag <>, a closing tag </>, and the content.

In other words, the opening tag, closing tag, and the content together comprise the HTML element.

HTML Attributes

An attribute modifies how an element behaves. For example,

    <img width="350" src="./image/shon.png" alt="photo">

The text left to the equal sign is the attribute name and the right is the value. The value must be surrounded by a double quote.

The attribute name tells what we are modifying, and the value tells what we are modifying it to.

HTML: Basic Format page structure

for the article.png

<!DOCTYPE html>: All HTML documents must start with a <!DOCTYPE> declaration. It is information to the browser about what document type to expect.

<html lang="en">: You should always include the lang attribute inside the tag to declare the language of the web page. This is meant to assist search engines and browser

<html>: tag represents the root of an HTML document

<head>: This element is a container for metadata (meaning data about data) and is placed between the <html> tag and the <body> tag.

<meta/>: Metadata is the data about the HTML document and defines the document title, character set, style, script, and other meta information. It is not displayed in the browser.

<body>: This element contains all the contents of an HTML document. There can be only one <body> element in a document. The contents inside the <body> will be displayed in the browser.

HTML: some more elements:

<h1> to h6>: tags are used to define HTML headings.

<img>: This is one of the void elements, meaning it cannot have any child content and cannot have an end tag. It requires two attributes src, and alt.

<a>: This defines a hyperlink. The most important attribute of this element is the href attribute, which indicates the link's destination.

<button>: It defines a clickable button. Inside the <button> element, you can put text(and tags like <i>, <b>, <strong>, <img>, etc).

Reference:

MDN, W3 school, Wikipedia, and javatpoint.

Shon L's blog