Introduction to HTML

What is HTML?

HTML stands for Hypertext Markup Language.

HTML is the standard markup language for creating web pages.

Hypertext refers to links that connect web pages to one another, either within a single website or between websites.

Markup refers to the process of using tags to define the structure and presentation of text.

There is over 100 tags but we only use like 10 to 15.

Getting Started

To get started we first need to download and install a code editor which we will use to write our code.

You can download Visual Studio code for free from code.visualstudio.com/download

Once downloaded and installed:

create a folder named html_course
open VS Code and click on file, then open folder and select the folder html_course
create a new folder 01_introduction
create a new file index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>My First Web Page</title>
	</head>
	
	<body>
		<h1>My First Heading</h1>
		<p>My first paragraph.</p>
	</body>
</html>

Understanding the code:

<!DOCTYPE html> declaration defines that this document is an HTML5 document.
The <html> element is the root element of a HTML page.
The <head> element contains meta information about the HTML page. Meta information includes a variety of information that helps search engines understand the content of the page, improves the browsing experience, and provides information to web browsers and other web services.
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab).
The <body> element defines a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading. A HTML element is defined by a start tag, some content and an end tag.
The <p> element defines a paragraph.

Now that we know how to create a basic web page, let's install and enable a few extensions for a better workflow:

Live Server (by Ritwick Dey) - automatically reloads your webpage whenever you make changes to your code.
Prettier - Code formatter (by Prettier) - formats your code for consistency.

Web Page Validation

When creating web pages, we need to make sure they are error-free. The best way to do this is to use the W3C Markup Validation Service validator.w3.org

Elements

HTML elements have default display values: block and inline.

Block-level Elements

Block-level elements always start on a new line and the browsers automatically add some space (a margin) before and after the element.

A block-level element also takes up the full width available (stretches out to the left and right as far as it can).

Block-level elements in HTML include:

<p>

<pre>

<ol>

<ul>

<li>

<dd>

<hr>

<div>

<form>

<table>

<video>

Inline Elements

Inline elements don't start on a new line and take up as much width as necessary.

Inline elements in HTML include:

<span>

<a>

<img>

<br>

<b>

<em>

<i>

<q>

<small>

<sub>

<sup>

<label>

<input>

<code>

Head Element

The head element is used to store meta elements with meta data (data about the HTML document).

Metadata typically define the document title, character set, styles, scripts, and other meta information. Search engines such as Google use metadata from meta tags to understand additional information about the webpage. They can use this information for ranking purposes, to display snippets in search results, and sometimes they can ignore meta tags.

It can contain elements such as:

<title> - the element defines the title of the document. It is shown in the browser's title bar or in the page's tab and also when a page is added to favorites. It's used for SEO (Search Engine Optimization) by search engine algorithms to decide the order when listing pages in the search results. Always have a unique title tag on every page that describes the page.

<base> - specifies the base URL and/or target for all relative URLs in a web page. The <base> tag must have either a href or target attribute present, or both. There can only be one single <base> element in a document.

<head>
	<base href="https://www.w3schools.com/" target="_blank">
</head>

Examples of uses for meta tags:

To define the character set used:

<meta charset="UTF-8">

To define the keywords for seach engines:

<meta name="keywords" content="HTML Tutorial, CSS, JavaScript">

To define a description for your web page:

Note: Keep your description within 160 characters and write it to catch the user's attention.

<meta name="description" content="Free HTML Tutorial for beginners.">

To define the author of the web page:

<meta name="author" content="Alex Aaqil">

To refresh the web page every 30 seconds:

<meta http-equiv="refresh" content="30">

To set the viewport to make our website look good on all devices, we use:

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

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

To specify that web crawlers should index your web page:

<meta name="robots" content="index,follow">

name="robots" simply calls the search engine robots.

content="Index,follow": index tells the robots they can remember our web page and tell other people about it. follow tells the robots they can look at the other pages that this page links to and remember those too.

It's a way to make sure that the robots know it's okay to share your web page with people who are searching for it on the internet.

To change the favicon:

<link rel="icon" href="some_image.png" type="image/x-icon">

Example of meta tags in a basic web page:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="author" content="Alex Aaqil">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="icon" href="some_image.png" type="image/x-icon">
		
		<meta name="description" content="This page contains all the things I've learnt about the head element.">
		<meta name="keywords" content="HTML Tutorial, CSS, JavaScript">
		<title>My First Web Page</title>
	</head>
	
	<body>
		<h1>My First Heading</h1>
		<p>My first paragraph.</p>
	</body>
</html>

Stick to the core minimum and don't add meta tags you don't need.

Text Basics

HTM Elements

HTML is made up of elements which consist of an opening tag, some content, and then a closing tag.

Some elements however do not have any content and are called empty elements.

Headings

These are titles or subtitles that you want to display on a webpage. Search engines use the headings to index the structure and content of your web pages.

In HTML, we have 6 types of headings we can use: h1 - h6.

We should only have one h1 in each web page.

A common mistake people make is using heading to make text bold or bigger, but they should only be used for headings only.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>My First Web Page</title>
	</head>
	
	<body>
		<h1>Main Heading</h1>
		<h2>A subtitle</h2>
		<h3>A subtitle of the subtitle</h3>
	</body>
</html>

Paragraphs

We use paragraphs to define a block of text.

<p>This is a paragraph.</p>

Horizontal Rule

We use a horizontal rule to separate content (or define a change) in a HTML page.

<hr>

Line Break

A line break is used to create a line break (a new line) without starting a new paragraph.

<p>This is one paragraph <br>but it starts on a new line without having to create a new paragraph.</p>

Preformatted Text

To preserve both spaces and line breaks same as what you have in your code, we can use the <pre> tag.

<pre>
	This will be displayed
	
	as is in the code.
	
	The lines will be exactly the same.
</pre>

Abbreviations

<abbr title="Aaqil University">AU</abbr>

Address

Tells the browser that this is an address.

<address>
	Nairobi, Kenya.
</address>

HTML Formatting

Formatting elements display special types of text.

<b> - Bold text without any extra importance.

<strong> - Bold text with strong importance.

<i> - Defines a part of text in an alternate voice or mood. It displays italic text to indicate a technical term, phrase from a language, a thought, a ship name, etc.

<em> - Emphasized text. A screen reader pronounces the words in <em> with an emphasis, using verbal stress.

<mark> - Defines text that should be marked or highlighted.

<small> - Smaller text

<del> - Defines text that has been deleted from a document. Usually has a strike line through the text.

<ins> - Defines a text that has been inserted into a document. Browsers will usually underline inserted text.

<sub> - Subscript text. Appears half a character below the normal line and is sometimes rendered in a smaller font.

<sup> - Superscript text. Appears half a character above the normal line and is sometimes rendered in a smaller font.

HTML Attributes

HTML elements can have attributes.

Attributes provide additional information about elements.

Attributes are always specified in the start tag.

An example of an attribute we've already seen is:

<html lang="en">

lang="en" is an attribute that provides more information about the html element. It specifies the primary language of the web page's content as English.

Comments

HTML comments are not displayed in the browser, but they can help document your HTML source code.

The syntax for adding a comment is:

<!-- This is a comment -->

We can use them to:

- Place notifications and reminders in our HTML code:

- Hide content temporarily to debug our code.

Hyperlinks

Links are found in nearly all web pages, and they allow us to click our way from page to page.

<a href="www.google.com">google.com</a>

By default, links appear as follows in all browsers:

- An unvisited link is underlined and blue

- A visited link is underlined and purple

- An active link is underlined and red

Target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specified where to open the linked document.

The target attribute can have the following values:

_self - Default. Opens the document in the same window/tab as it was clicked

_blank - Opens the document in a new window or tab

_parent - Opens the document in the parent frame

_top - Opens the document in the full body of the window

Absolute URLs vs. Relative URLs

An absolute URL is a full web address in the href attribute.

A relative URL is a local link (a link to a page within the same website).

Types of Hyperlinks

Bookmark Link

A bookmark link helps jump to specific parts of a web page especially if a web page is very long.

To create a bookmark, we first need to create the bookmark, then add a link to it so that once the link is clicked, the page will scroll down or up to the location with the bookmark.

To create the bookmark:

<h2 id="Chapter 4">Chapter 4</h2>

Linking to the bookmark:

<a href="#Chapter 4">Jump to Chapter 4</a>

To add a link to a bookmark on another page:

<a href="./about.html#founder">The founder's details</a>

Download Link

<a href="some_image.png" download>google.com</a>

Contacts Links

These links can be used to either email or dial a phone number but it's not advisable to use them if the contact details are confidential.

mailto: creates a link that opens the user's email program (to let them send a new email)

<a href="mailto:example@gmail.com">google.com</a>

tel: Works well on a mobile phone unlike on a laptop.

<a href="tel:+254123456789">google.com</a>

Images

Images can improve the design and appearance of a web page.

Images are not technically inserted into a web page; rather, they are linked to web page using the <img> tag to create a holding space for the referenced image.

To add an image, we use the img tag which has two required attributes: src and alt.

src - specifies the path to the image.

alt - specifies the alternate text (which should describe the image) for the image if the user can't view it for some reason (because of slow connection, an error in the src attribute or if the user is using a screen reader).

For images in the same folder:

<img src="images/some_image.png" alt="Some Image" width="450" height="450">

For images in another folder:

<img src="/public/images/some_image.png" alt="Some Image" width="450" height="450">

For images on another server/website:

<img src="https://th.bing.com/th/id/OIP.xnrk7h127qfUMleVUTV5iAHaEv?w=254&h=180&c=7&r=0&o=5&pid=1.7" alt="HTML Meme" width="450" height="450">

We can also add animated GIFs (Graphics Interchange Format) in HTML:

<img src="https://www.bing.com/th/id/OGC.e7459cfb902109758f0079cf69f5e606?pid=1.7&rurl=https%3a%2f%2fcloudinary-res.cloudinary.com%2fimage%2fupload%2fc_fill%2cw_770%2fdpr_3.0%2cf_auto%2cfl_lossy%2cq_auto%2fAnimations_with_HTML5_2000x1100_v2.gif&ehk=OXHzcpQc95cCfxXKm1wY9ME902tv6jsBjT8oNwcfTDk%3d" alt="animated html ninja running" width="450" height="450">

Attributes

Width and Height: It is advisable to include the width and height attributes of the image when adding images.

<img src="images/some_image.png" alt="Some Image" width="300" height="300">

Lazy Loading: simply means the images below the fold (area where we have to scroll to view) will only be loaded once we scroll close to where an image is supposed to be displayed. It's a great performance boost especially when a web page contains lots of images.

<img src="images/some_image.png" alt="Some Image" width="300" height="300" loading="lazy">

Image Resources

Some great websites to get free images licensed for free use in web pages include:

1. unsplash

2. pexels.com

3. pixabay.com

4. gratisography.com

Software and websites to use for editing images:

1. irfanview.com - lightweight software for resizing and cropping images.

2. tinypng.com - compress images so they have a smaller file size.

Lists

Lists help us group a set of related items in lists.

A list item (<li>) can contain a new list, and other HTML elements, like images and links, etc.

The three types of lists we'll look at are:

1. Ordered list

2. Unordered list

3. Description list

List Types

Unordered List

Starts with the <ul> tag.

The list items will be marked with bullets (small black circles) by default.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered List

Starts with the <ol> tag.

The list items will be marked with numbers by default.

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Description List

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> (data term) tag defines the term (name), and the <dd> (data definition) tag describes each term.

<dl>
	<dt>Coffee</dt>
	<dd>black hot drink</dd>
	
	<dt>Milk</dt>
	<dd>white cold drink</dd>
</dl>

Nested List

Ordered and unordered lists can be nested (list inside list):

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

List Attributes

Type

The type attribute for the <ol> tag, defines the type of the list item marker:

type="1" - numbered with numbers (default)
type="A" - numbered with uppercase letters
type="a" - numbered with lowercase letters
type="I" - numbered with uppercase roman numbers
type="i" - numbered with lowercase roman numbers

Example:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Tables

Tables allow us to arrange data into rows and columns.

Tables in HTML consist of table cells inside rows and columns.

Each table cell is defined by a <td> tag.

The syntax is:

<td>content of the table cell</td>

<td> stands for table data.

A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.

Table Headers

We use <th> to define table headers.

<th> stands for table header.

By default, the text in <th> elements are bold and centered but you can change that with CSS.

Table Rows

We use <tr> to define table rows.

<tr> stands for table row.

Table Caption

We can add a caption that serves as a heading for the entire table by using the <caption> tag.

Colspan & Row Span

colspan makes a cell span over multiple columns.

rowspan makes a row span over multiple rows.

Example of a table:

<table>
    <caption>Contacts</caption>
    <thead>
        <tr>
            <th>Name</th>
            <th>Contact</th>
            <th>Title</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Alex Aaqil</td>
            <td>alex@email.com</td>
            <td>C.E.O</td>
        </tr>
        <tr>
            <td>Susan</td>
            <td>sue@email.com</td>
            <td>C.T.O</td>
        </tr>
    </tbody>
</table>

Semantic Tags

Semantic tags help us define the different parts of a web page.

Semantic elements clearly describe their meaning to both the browser and the developer.

For example: <span> and <div> elements tell us nothing about their content but <form>, <table> and <article> clearly define their content.

Header

Defines a container for introductory content or a set of navigation links.

A <header> element typically contains:

- one or more heading elements (<h1> - <h6>)

- logo or icon

- authorship information

You can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element.

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

Nav

Defines a set of navigation links

NOT all links of a document should be inside a <nav> element.

The <nav> element is intended only for major blocks of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

Aside

Defines the content aside from the content (like a sidebar)

Main

There should only be one main element per page.

Article

Defines an independent, self-contained content.

An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site.

Examples of where the <article> element can be used:

- Forum posts

- Blog posts

- User comments

- Product cards

- Newspaper articles

<article>
	<h2>Google Chrome</h2>
	<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
	<h2>Mozilla Firefox</h2>
	<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
	<h2>Microsoft Edge</h2>
	<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

Section

It's a thematic grouping of related content, typically with a heading.

It can be used in:

- Chapters

- Introduction

- News Items

- Contact Information

A web page could normally be split into sections for introduction, content, and contact information.

<section>
	<h1>WWF</h1>
	<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
	<h1>WWF's Panda symbol</h1>
	<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

Footer

Defines a footer for a document or a section.

A <footer> element typically contains:

- authorship information

- copyright information

- contact information

- sitemap

- back to top links

- related documents

You can have several <footer> elements in one document.

<footer>
  <p>Author: Alex Aaqil</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

Summary & Details

<summary> - defines a heading for the <details> element.

<details> - defines additional details that the user can open and close on demand. Can be used for a question-and-answer section like the FAQs.

<details>
	<summary>How many day a week are we open?</summary>
	<p>We're usually open 5 days a week. Monday to Friday from 08:00 A.M to 05:00 P.M</p>
</details>

Entities

Entities help us display reserved characters in HTML.

HTML entities start with an & then the entity, and ends with a ;

For Example, to add a space like when the space bar is pressed:

&nbsp;

Other HTML entities include:

Entity	Symbol	Description
<	<	less than
>	>	greater than
©	©	copyright
		non-breaking space
£	£	pound
¥	¥	yen
€	€	euro
®	®	trademark

Forms

A form is used to collect user input which can then be sent to a server for processing.

Label Element

Define a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.

The <label> element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

Input Element

The <input> element is the most used form element. It can be displayed in may way depending on the type attribute.

Number:

<input type="number" name="amount" id="amount" min="1" max="2000" step="2" value="1">

Tel: for phone number inputs.

The pattern attribute can be used with a regular expression to outline the format we'd like to use for the phone number.

<input type="tel" name="phone" id="phone" placeholder="254123456789" pattern="[0-9]{3}[0-9]{3}[0-9]{3}[0-9]{3}">

Select:

<select name="coffee" id="coffee">
	<optgroup label="coffees">
		<option value="regular">Regular Coffee</option>
		<option value="iced">Iced Coffee</option>
	</optgroup>
	
	<optgroup label="espresso_drinks">
		<option value="latte">Latte</option>
		<option value="cappuccino">Cappuccino</option>
		<option value="cortado">Cortado</option>
	</optgroup>
	
	<option value="other">Other</option>
</select>

Datalist

<input type="text" name="coffee" id="coffee" list="coffee-list">
<datalist id="coffee-list">
	<option value="coffee">
	<option value="latte">
	<option value="cortado">
	<option value="americano">
	<option value="other">
</datalist>

Buttons

Attributes

form

A button can be used to submit a different form from the current parent form.

This is quite useful when we want to have a button placed in one form, but submit a different form, like when deleting items.

<form method="post" action="/update_something">
    <button type="submit">Update</button>
    <button type="submit" form="delete-form">Delete</button>
</form>

<form method="post" action="/delete_something" id="delete-form" class="hidden">
</form>

Iframes

An Iframe is used to display a web page within a web page.

It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the Iframe is.

The syntax for creating an Iframe is:

<iframe src="url" title="description"></iframe>

Attributes

Height and Width

Use the height and width attributes to specify the size of the Iframe.

The height and width are specified in pixels by default:

<iframe src="iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

Name

An Iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the Iframe:

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>