Introduction to Web Technology and HTML 5

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)

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.

<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.

<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.

<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

<!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.

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 👍 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>

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

Paragraphs

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

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

Lists

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

<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,

Dictionary Lists

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

<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,

Images

We can use <img> element to include images.

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

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.

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

The output looks like,

Visit google

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.

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

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

<!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>