How to Code HTML

By Manith Fernando

I learned everything from the website W3schools and this video
I made this website by simplifying everything i learned
I would greatly appreciate if you look through the code i made
To look through it just open the html file by Visual Studio Code Thanks😎

👇Todays Date

Lesson 1 - HTML Introduction

What is HTML?

HTML is the standard markup language for creating Web pages.

Example of HTML Code


This is what h1 to h6 looks like

This is H1

This is H2

This is H3

This is H4

This is H5
This is H6

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:
The HTML element is everything from the start tag to the end tag:

Ex:- <tagname> Content goes here... </tagname>

<h1> My First Heading </h1>

<p>My first paragraph. </p>


Note:Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to display the document:

HTML Page Structure (Very Important)

Below is a visualization of an HTML page structure:


Note: The content inside the <body> section will be displayed in a browser.
The content inside the <title> element will be shown in the browser's title bar or in the page's tab.

HTML History (Not very Important)

Took me 3 hours to make the table lol

Year Version
1989 Tim Berners-Lee invented World Wide Web (www)
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2

This Website created By Manith Fernando teacher HTML5.2

Lesson 2 - HTML Elements

An HTML element is defined by a start tag, some content, and an end tag.

HTML Elements

The HTML element is everything from the start tag to the end tag:

<tagname> Content goes here... </tagname>

Examples of some HTML elements:

<h1> My First Heading </h1>
<p> My first paragraph </p>


Nested HTML Elements

HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>, <body>, <h1> and <p>):


Example Explained

The <html> element is the root element and it defines the whole HTML document.
It has a start tag <html> and an end tag </html>
Then, inside the <html> element there is a <body> element:.

The <body> element defines the document's body.
It has a start tag <body> and an end tag </body>
Then, inside the element there are two other elements: <h1> and <p>:.

The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>:

The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>:

Never Skip the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

Empty HTML Elements

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:

HTML is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>.

HTML Tag Reference

this table took me 1 hour to make lol
why does it takes so long to make tables

Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings

For a complete list of all available HTML tags, visit this website called HTML Tag Reference since it may take me 128 hours to make it all if I made a table by myself.

Lesson 3 - HTML Attributes

HTML attributes provide additional information about HTML elements.

HTML Attributes

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

Example

You will learn more about links on a later lesson

The src Attribute

The <img> tag is used to embed an image in an HTML page.
The src attribute specifies the path to the image to be displayed:

Example

There are two ways to specify the URL in the src attribute:

1. Absolute URL

Links to an external image that is hosted on another website. Example: src="https://www.w3schools.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.

2. Relative URL

Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example: src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you change domain.

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specify the width and height of the image

In pixels:

In percentages

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed.
This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader.

Example

See what happens if we try to display an image that does not exist: