INTRODUCTION TO WEB & HTML

WEB Technology
Web which allows us to interact with the hosted data (data which is hosted somewhere in the world) i.e., Websites and Web applications.

It involves the use of three main languages HTML, CSS, and JS.

HTML
Hypertext Markup Language is the language of the world wide web. Every single webpage in existence eventually boils down to some kind of HTML. This is because it plays a fundamental role in building web pages.

Basis

HTML defines the structure of a webpage. It does this by making use of different elements which are defined by tags. These elements can describe any number of things including paragraphs, headings, images, lists, tables,lorem, and more.

Example

If you want to include a paragraph, you have to use HTML Paragraph Element

, If you want to have headers and footers on your page, you can define that using HTML

and elements.

Terminology

I said earlier that HTML contains a series of markup elements. It is important to understand what an element is and how you should write.

Element

An element includes an opening tag, content, and a closing tag.

Tag - Element name surrounded by angular brackets. Here in the above code block

and

are opening and closing tags

Attributes

Opening tags may contain attributes that are just extra information about the element.

Here in the code block, title is an attribute and it is set to the text " Introduction Part "

Title usually gives tooltip information. When the user hovers over the text, Welcome will be displayed as a tooltip.

Basic Template

<!DOCTYPE html> This should always be the first line of a page. This is like a required introduction. This is where we declare our doctype (document type) and version, which is HTML 5.

It tells the browser that this page should be rendered as an HTML 5 webpage.

<!HTML> ... <!/HTML> This is the root element of our page and It has two children <..head> and <..body>.

<.head> ... <./head>

This is a container for machine-readable contents. It has nothing to do with the output of the page. But, It contains browser-readable information like character set, title, description, viewport, etc.

<.meta charset="utf-8" /> This is where we declare our character set. All the text on our page will be encoded using a character system called utf-8 which contains all international symbols and emojis 👍 that you can use on your page.

<.meta name="viewport" content="width=device-width, initial-scale=1.0" />

This line sets the viewport of the page when you visit the page in a mobile browser.

width=device-width sets the width of the page to the width of the device i.e., 100%.

initial-scale=1.0 sets the zooming level of the page, we're setting it to 1.0.

<.body> ... <./body>

This is the visible area of a webpage. This is what the user sees.

Let's Study some HTML elements

Headings

Headings as the name suggests allow you to display headings and sub-headings on the page. HTML has six levels of headings from <.h1> to <.h6>

OUTPUT

Paragraphs & Lorem

- Paragraph

If you want to have some text on your page, simply wrap it inside

element.

Lorem

The lorem tag inserts a specified amount of random text.

lorem ipsum in EMMET If we want to test or see how well the data look, we can add random words to the website, just to get a rough look or to check display alignment or user accessibility. To get lorem ipsum on VSCode just type lorem then add the number of words you would like to add. For example lorem5 and then press tab. Lorem ipsum will be added to the HTML file.

Images

We can use <.img> element to include images.

src is gonna be the URL (source) of the image and alt is called alternative text if the image cannot be displayed for some reason. Reasons might be.

If the image's path is wrong
If the user is visually impaired, he'll use a screen reader, a software which ads the entire page. If it encounters an <.img> element, it'll read the text given in the alt attribute instead of an image.

Live server

Makes your existing server live - this is a Web Extension that helps you to live to reload feature for dynamic content (PHP, Node.js, ASPNET -- Whatever, it doesn't matter).

Open a project and click Go Live from the status bar to turn the server on/off.
Right-click on an HTML file from Explorer Window and click on Open with Live Server.
Open an HTML file and right-click on the editor and click on Open with Live Server.
Hit (alt+L, alt+O) to Open the Server and (alt+L, alt+C) to Stop the server (You can change the shortcut form keybinding).

Apache Server

Apache is a popular open-source, cross-platform web server that is, by the numbers, the most popular web server in existence. It’s actively maintained by the Apache Software Foundation.

Some high-profile companies using Apache include Cisco, IBM, Salesforce, General Electric, Adobe, VMware, Xerox, LinkedIn, Facebook, Hewlett-Packard, AT&T, Siemens, eBay, and many more (source).

Web Server Basics Explained

While there’s a lot of complexity underpinning how a web server functions, the basic job of all web servers is to accept requests from clients (e.g. a visitor’s web browser) and then send the response to that request (e.g. the components of the page that a visitor wants to see).

The Apache web server has modules that add more functions to its software, such as MPM (for handling multi-processing modes) or mod_ssl for enabling SSL v3 and TLS support (suggested reading: TLS vs SSL). Some common features seen in Apache include:

.htaccess
IPv6
FTP
HTTP/2
Perl, Lua, and PHP
Bandwidth throttling
WebDAV
Load balancing
URL rewriting
Session tracking
Geolocation based on IP address

While a web server is an essential part of any website, it’s important to note that casual WordPress users are unlikely to interact with their web server directly most of the time.

Server

To understand what a server is let's consider one analogy of a grocery store. Whenever we need something to cook food or anything we order or buy from some store. A store is a place where all the items we need are stored or sold. In the same manner, if we want our website to access the general public then we will need to store and host it on some server. So the server is basically a combination of hardware and software where we can store our website-related files like code and images and other data and make them accessible to the world.

Introduction To Web & Html

Table of contents