HYPERTEXT

MARKUP
LANGUAGE

PREPARED BY
Abhik Barat
Table of Contents:
HTML (Level 1) - Part A

Reference Lectures:

Shradha Khapra Dr. Angela Yu

The Building Blocks of Web Development: HTML, CSS, and JavaScript:
Website development is an essential aspect of modern-day
businesses and organizations, and it revolves around three
fundamental technologies - HTML, CSS, and JavaScript. HTML
provides the structure and content of a web page, CSS gives it
the style and visual appeal, while JavaScript adds interactivity
and functionality to the page.

A good analogy to understand the role of HTML, CSS, and

JavaScript in website development is to consider them as the
skeleton, beauty, and brain, respectively.

Just as the skeleton provides structure and support to the

human body, HTML provides the underlying structure and
content of a web page.

CSS, like beauty products, outfits that enhances the

appearance of the website and gives it a visually
pleasing design.

Finally, JavaScript is like the brain that adds interactivity

and functionality to the website and enables it to
respond to user inputs.
Google Home Page:

Let's take the Google home page as an example, & observe carefully how HTML, CSS & JavaScript structures it
efficiently:

HTML: When the browser loads up, the HTML will get to see the content of the
website.
So in this case, there's one image that has the Google logo. There are two
buttons and there's a text box where we can enter our search term.

CSS: Now when the browser then loads up the CSS files, then it will modify the
appearance of those components so we don't get any extra buttons or images or
anything with the CSS, But it will now look exactly the way Google wanted it to.

JavaScript: Finally,using the JavaScript file, the browser gives us the functionality
of this website.
So we can type in and search for anything we like.
What is an IDE?
An integrated development environment (IDE) is a software application that helps programmers develop
software code efficiently. It increases developer productivity by combining capabilities such as software
editing, building, testing, and packaging in an easy-to-use application. Just as writers use text editors and
accountants use spreadsheets, software developers use IDEs to make their job easier.

Why are IDEs important?

You can use any text editor to write code. However, most integrated development environments (IDEs)
include functionality that goes beyond text editing. They provide a central interface for common developer
tools, making the software development process much more efficient. Developers can start programming
new applications quickly instead of manually integrating and configuring different software.

The following are some reasons why developers use IDEs:

Code editing automation:

Programming languages have rules for how statements must be structured. Because an IDE knows these
rules, it contains many intelligent features for automatically writing or editing the source code.

Syntax highlighting:
An IDE can format the written text by automatically making some words bold or italic, or by using different
font colors. These visual cues make the source code more readable and give instant feedback about
accidental syntax errors.

Intelligent code completion:

Various search terms show up when you start typing words in a search engine. Similarly, an IDE can make
suggestions to complete a code statement when the developer begins typing.
Refactoring support:
Code refactoring is the process of restructuring the source code to make it more efficient and readable
without changing its core functionality.

IDEs can auto-refactor to some extent, allowing developers to improve their code quickly and easily. Other
team members understand readable code faster, which supports collaboration within the team.

Local build automation:

IDEs increase programmer productivity by performing repeatable development tasks that are typically part
of every code change. The following are some examples of regular coding tasks that an IDE carries out:

1)Compilation:
An IDE compiles or converts the code into a simplified language that the operating system can understand.
Some programming languages implement just-in-time compiling, in which the IDE converts human-readable
code into machine code from within the application.

2)Testing:
The IDE allows developers to automate unit tests locally before the software is integrated with other
developers' code and more complex integration tests are run.

3)Debugging:
Debugging is the process of fixing any errors or bugs that testing reveals. One of the biggest values of an IDE
for debugging purposes is that you can step through the code, line by line, as it runs and inspect code
behavior. IDEs also integrate several debugging tools that highlight bugs caused by human error in real-time,
even as the developer is typing.
Top HTML IDEs:

Every HTML IDE has its own features, just like any other software. As an example, many HTML IDEs support
not just HTML, but also CSS, XML and JavaScript.
Below are some of the top HTML IDEs that can be selected for web development:

(Visual Studio Code) (Notepad++) (Komodo Edit) (Brackets) (Sublime Text 3)

(Adobe Dreamweaver CC) (Atom) (PyCharm) (PHPStorm) (CoffeeCup)

Throught this Course, I would be using Visual Studio Code to Explain the Topics.
Introduction to HTML:
The HyperText Markup Language or HTML is the standard markup language for documents designed to be
displayed in a web browser. It is often assisted by technologies such as Cascading Style Sheets (CSS) and
scripting languages such as JavaScript.The latest version of HTML is: HTML5.

History: HTML was first created by physicist Tim Berners-Lee, a contractor at CERN,
starting in 1989.
Berners-Lee specified HTML and wrote the browser and server software in late 1990.

Basics:
With the help of HTML, you can create a complete website structure. HTML is the combination of
Hypertext and Markup language.

Hypertext refers to links that connect web pages to one another, either within a single website or
between websites - in simple words, it basically means that the document contains links that allow the
reader to jump to other places in the document or to another document (web page) altogether.

and

Markup Language defines the text document within the tag that defines the structure and formatting
of web pages.A Markup Language is a way that computers speak to each other to control how text is
processed and presented. To do this HTML uses two things: tags and attributes.
Example:
Hypertext: In the example below, the letters of the Wikipedia page marked in Blue have embedded links to some
other topic on Wikipedia.

Note: A link to a computer or web resource

embedded in a hypertext is known as a hyperlink.

Markup Language: HTML uses "markup" to annotate (or, highlight information) text, images, and other content for
display in a Web browser. It takes care of the Structure and Formatting of the Web Page. HTML markup includes special
"elements" such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>,
<audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> and many others.

(In IDE)

(In Web Browser)

HTML Elements:
An HTML element is an individual component of an HTML document.

An HTML file is made of different elements.

HTML elements tell the browser how to display the text, images, and other content on the page, as well as tell the
browser other useful bits of information.
These elements are responsible for creating web pages and define content in that webpage. An element in HTML is
often — but not always — created by opening and closing HTML tags, which wrap around a piece of content - i.e.
start tag <tag name>, close tag </tag name> and content inserted between them.

Content

Hello World <p> </p> Element

(In IDE)

(In Browser)
Empty HTML Elements:

While most HTML elements are written with an opening and closing tag, some elements consist of a single tag and do not have closing tags or
content. These are called empty elements. One empty element you’ll see often is the line break element, which adds a line break between text.
The line break element is made with the empty <br> tag, shown below:

As you can see, simply using <br> creates the line break,
no closing tag necessary.
Other common empty elements include <img> (image),
<meta>, <link>, and <input>.

HTML Attributes:

HTML elements can also contain attributes. Attributes are extra code placed inside the opening tag of an element that provides additional
information about the element. An attribute may be optional or required.

For example, we can use the style attribute to change the color of our paragraph element, as shown below:
HTML Paragraph: <p> ...... </p> :

HTML Paragraphs are defined with the <p> tag. These have both opening and closing tags. So, anything mentioned within <p> and </p> is
treated as a paragraph.
Paragraph tag is a very basic and typically the first tag we will need to publish our text on the web pages. Here's an example:

(In IDE)
(In Browser)
HTML Bold Tag: <b> ... </b> :

HTML bold tag is represented by <b> tag.

HTML <b> tag is used to display the written text in bold format. It is strictly a presentational element. It is a container tag that contains an
opening tag, content & closing tag.
Here is an Example:

(In IDE) (In Browser)

Nesting & Nested Tags:

HTML elements can also be placed inside of other elements — this is called nesting and is key to how HTML documents are assembled.

Going back to our previous example, observe how a bold tag, is nested inside paragraph text. Here the Bold Tags are the Nested Tags.

(In IDE) (In Browser)

Heading Elements:

A heading element briefly describes the topic of the section it introduces.

HTML offers six levels of heading tags, <h1> through <h6>; the lower the heading level number, the greater its importance — therefore <h1> tag
defines the most important heading, whereas the <h6> tag defines the least important heading in the document.
By default, browsers display headings in larger and bolder font than normal text. Also, <h1> headings are displayed in largest font, whereas <h6>
headings are displayed in smallest font.

Let us understand it with an example:

(In IDE)

(In Browser)

Quick Note: In VS Code if you just type h1 & hit Tab : then automatically the IDE will apply the opening and closing tag for you.

Also Remember:

Opening Tag Closing Tag

Heading Element
Extra Note on Heading Element:

As we read earlier, HTML5 specification describes six HTML heading elements: h1, h2, h3, h4, h5 and h6.
The height of each heading element is specified in the browser's default stylesheet as follows:

The height of 1 em is usually 16 pixels.

An em is a unit of measurement, relative to the size of the font; therefore, in a typeface set at a font-size of 16px, one em is 16px.
Practice Question:
Let’s now Re-Create the give problem in VS Code in simple steps:

(In IDE)

(In Browser)

Note: In the example above we have used heading element, paragraph element and bold element. Here each Bold Element is nested inside
the respective paragraph element.
 HTML Boilerplate:

In simple words, HTML Boilerplate is the standard format or skeleton for writing HTML Code.
All HTML documents have the same basic structure or boilerplate that needs to be in place before anything useful can be done.
Throughout the web development process, boilerplates are described as code blocks that are repeatedly used without being altered.
It can be described in plainer terms as a code blueprint.

Anatomy of an HTML Boilerplate:

An HTML boilerplate typically includes four main sections: the Doctype Declaration, the HTML Element, the Head Section, and the Body Section.

Doctype Declaration

Head Section

HTML Element

Body Section

Note: In VS Code just type ! (Exclamation) and hit Enter to get the HTML Boilerplate instantly.

Hit Enter
Now, let’s learn the above four sections of HTML Boilerplate in details.

Doctype Declaration

Head Section

HTML
Element

Body Section

1) Doctype Declaration:
The doctype declaration is the first line of an HTML document and specifies the version of HTML being used. For example, the doctype
declaration for HTML5 is:

In simple words, the Doctype Declaration lets modern browsers know they should interpret the document as written according to the
HTML5 specification.
2)HTML Element:

The HTML tag wraps around the entire document and specifies that the document is written in HTML. It looks like this:

Head Section

HTML Element

Body Section

In the HTML Element : the HTML Tag is also called the root tag of the HTML document.
.
The Opening Tag of the HTML Element contains the lang attribute with a value of en,
Opening Tag
which specifies that the document is in English.
This isn’t required for a page to validate, but you’ll get a warning from most
validators if you don’t include it.

The <html> element is divided into two parts, the <head> and <body> sections.

The <head> section contains important information about the document that isn’t
displayed to the end user — such as the character encoding, and links to CSS files and
possibly JavaScript.
Closing Tag
The <body> section contains everything that’s displayed in the browser — text,
images, and so on.
3)Head Section:

The head section of an HTML document contains metadata about the page, such as the title, links to CSS and JavaScript files, and
other information that isn’t displayed on the page itself.

Here’s an example of what the head section might look like:

Metadata: Metadata means "data about data".

In simple words it means the extra information about
our HTML Code that we intend to store in our Head
Head Section Section.
This data might include the styling included in our web
page (CSS), functionality included in our web page (JS)
and so on.

i) Title Element:

The title tag is used to specify a title for your website. Your browser uses this to display a title at the title bar(such as when you hover
over a browser tab). This element is the only mandatory element inside the <head>.

This tag also helps search engines show titles for your website on their search results

For Example,
If we visit the Discovery Website : then we can view the title of the Discovery Website in the title bar as follows:

Title
4)Body Section:

The body section of an HTML document contains the actual content that will be displayed on the page.

This might include headings, paragraphs, images, lists, links, buttons and other HTML elements. Here’s an example of what the body
section might look like:

Title
(In IDE)

(In Browser)
 Summary:

Doctype Declaration

Head Section

HTML
Element Doctype Declaration HTML Element

Body Section

Head Section Body Section

The doctype declaration is the first line of an HTML document and specifies the version of HTML
being used. Here, we are working with HTML5

The HTML tag wraps around the entire document and specifies that the document is written in HTML.
Title,& Metadatas Headings, Paragraphs,
Images etc.
The head section of an HTML document contains metadata about the page, such as the title, links to
CSS and JavaScript files, and other information that isn’t displayed on the page itself.
Hierarchical Arrangement of
HTML Boillerplate
The body section of an HTML document contains the actual content that will be displayed on the
page. This might include headings, paragraphs, images, lists, links, buttons and other HTML elements
Indentation in HTML Code:

Whenever you have HTML elements nested inside other HTML elements, it's best
to use indentation. Nested elements are known as children of their parent
element.

In this example, I have a p element nested inside a div element.

To indent the p element, I will move it two spaces to the right by using the Tab Key.

This is considered best practice and will make your code more readable by other developers. Now we can see that the p element is nested
inside its parent element which is the div.

Here’s another example:

Here we can see that the head & body

elements are nested inside their parent
element which is html.
HTML (Level 1) - Part B