Introduction to Web Technology and HTML 5
Tags: html, webdev, tutorial, beginners
Published: 2021-01-08 11:48:41

## Web Technology

**Short Answer**: Technology 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.

## Browser

Browser is a software that requests the site that you want to visit and the site which in turn returns response which includes above said three languages. 

Browser knows how to read the response and renders it as a beautiful webpage.

## HTML

An Acronym for **Hypertext Markup Language**

Let's split the above into three,

**Hypertext** - Text which take you somewhere (Links)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hyxvpovugzbsscbuweym.PNG)

When you read a page in Wikipedia, you'll see a bunch of blue texts. Those are called hypertexts. If you click on that, you'll be taken to a different page.

**Markup** - HTML has series of markup elements that you can use to define your content or parts of the webpage.

*Example*

If you want to include a paragraph, you have to use HTML Paragraph Element `<p>`.

If you want to have headers and footers in your page, you can define that using HTML `<header>` and `<footer>` element.

**Language** - Yeah!, It is a markup language. 
It is not a programming language, it doesn't have variables, expressions, functions and all. 

Since It uses markup to display contents, we can call it as a *markup language*.

## Terminology

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

**Element** 

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

```html
<p>Hello world</p>
```
Tag - Element name surrounded by angular brackets.

Here in the above code block `<p>` and `</p>` are *opening and closing tags*

**Attributes**

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

```html
<p title="Welcome!">Hover over this</p>
```

Here in the code block, `title` is an attribute and it is set to a text `"Welcome!"`

`title` usually gives tooltip information. When the user hovers over the text, *Welcome* will be displayed as tooltip.

**Empty Elements**

They don't have enclosed content and closing tag.

There is an element called `<img>` in html which is used to embed images in the webpage.

```html
<img src="mypic.png" alt="My Pic" />
```

In the code block, `<img>` doesn't have any content inside and there is nothing like `</img>` here.

These elements are also known as *Self-closing elements* and *Singletons* since it works by attributes, doesn't need any content.


## Boilerplate - Starter Template

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Page</title>
  </head>
  <body>
  
  </body>
</html>
```

This is the starter template of a HTML webpage. 

`<!DOCTYPE html>`

This should always be the first line of a page. This is like 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 a 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 output of the page. But, It contains browser-readable information like *character set*, *title*, *description*, *viewport*, etc.

`<title>My Page</title>`

This is title of the page which will be shown in the browser tab.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rvpm5c5ri9ojfg6uuijl.PNG)

This will also be used as title of the page when user bookmarks the page.

`<meta charset="utf-8" />`

This is where we declare our character set. All the text in our page will be encoded using a character system called `utf-8` which contains all international symbols and emoji's :+1: that you can use in 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 mobile browser.

`width=device-width` sets width of the page to 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 user sees. 


## Let's explore some HTML elements

**Headings**

Headings as the name suggests allow you to display headings and sub-headings in the page.

HTML has six levels of headings from `<h1>` to `<h6>`

```html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t3hars0njx0hq5n98rk0.PNG)


**Paragraphs**

If you want to have some texts in your page, simply wrap inside `<p>` element. 

```html
<p>This is my new post</p>
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f39sf86djfggdf8gdpwb.PNG)


**Lists**

HTML has list elements which you can use to present list-like contents.

```html
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>
```

In the above code block, `<ul>` is unordered list of items (bulleted list) and `<ol>` is ordered list of items(numbered list). You can see clearly in the screenshot below,


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/16uj96mum4bx2uxtv7oe.PNG)


**Dictionary Lists**

There is an another list element called *Dictionary list* or *Description list* which allows us to write statement like contents.

```html
<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>JS</dt>
  <dd>Javascript</dd>
</dl>
```

In the page,

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/erkbh4s9hz0vo7rcwzwp.PNG)


**Images**

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

```html
<img src="https://picsum.photos/200/200" alt="A pic">
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1me66il3exnfqy46ss2x.PNG)

`src` is gonna be the url (source) of the image and `alt` is called *alternative text* if the image cannot be displayed for some reasons. Reasons might be,

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


**Links**

To connect webpages.

```html
<a href="https://google.com">Visit google</a>
```

The output looks like,

[Visit google](https://google.com)

If user clicks the text, he'll be taken to the specified url.

Here comes the attribute `href` stands for *hyper reference*.


## HTML Comments

Comments are the place where we can write notes and they'll be ignored when browser renders our page.

```html
<!-- This is a paragraph -->
<p>Hello</p>
```

## Let's create a simple page using what we've seen.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Page</title>
  </head>
  <body>
    <h1>Some random texts</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quibusdam
      nesciunt tenetur at doloremque magni libero, iure ab eos fugiat.
    </p>
    <img src="https://picsum.photos/200/200" alt="A random picture" />
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, harum?
    </p>
    <ul>
      <li>Lorem</li>
      <li>Ipsum</li>
      <li>Picsum</li>
    </ul>
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni,
      assumenda?
    </p>
    <p>Visit <a href="https://google.com">Google</a>
  </body>
</html>
```

Your page looks like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fwlzl3ct4jz5xctyk5k4.PNG)