Lecture 2: What is HTML | Heading | Paragraph | Anchor tag | Image element |


🎥 Full Video Lecture


1. What is HTML?

📖 Notes:

HTML stands for Hypertext Markup Language and is the core language for creating web pages, structuring content like text, images, and links using tags. It's a markup language, not a programming language, that provides a standard way for browsers to understand and display the content and layout of a web page. HTML forms the fundamental backbone of the internet, working alongside CSS for styling and JavaScript for interactivity.

What is HTML?

🎥 Watch:

2. World's First Website

📖 Notes:

The world's first website was launched by Sir Tim Berners-Lee at CERN and was hosted at the address http://info.cern.ch/hypertext/WWW/TheProject.html. Launched on August 6, 1991, this first website provided information about the World Wide Web (WWW) project itself, including details on how to create web pages and learn about hypertext. It ran on a NeXT computer at CERN and featured the basic concepts that defined the Web.

World's First Website

🎥 Watch:

3. The Concept of Hyperlinks

📖 Notes:

A hyperlink is an element in an HTML document. Hypertext is text with hyperlinks. The linked text (the reference to data) is called anchor text. You use anchor tags to create hyperlinks to other webpages. They create links: a clickable text or image that, when clicked, takes us to a new page or to a different part of the same page. HTML consists of hyperlinks. They are an essential and defining feature of the World Wide Web, and they're what has made the Web so successful. They enabled the very idea of browsing. They give us the ability to connect a document to another document across different computers and networks. The idea initially originated from scolarly referencing and footnotes in scientific documents, but this lead to the discoverability of other people's websites as time went on. Users could click between the pages of not only one author's website, but through to other authors' websites and move from one webpage to another. Anything could link to anything else, making navigating to different places on the Web easy. And this provided users with wider access to information. The World Wide Web is made up of trillions of hyperlinks linking trillions of webpages to each other, creating something that could resemble a very large spider web.

The Concept of Hyperlinks

🎥 Watch:

4. What is a Markup Language?

📖 Notes:

A markup language is a system for annotating text with codes or tags to define its structure and presentation, enabling computers and software to correctly interpret, display, and process content. Unlike programming languages that perform actions, markup languages describe the meaning of content, making it useful for creating web pages (HTML), storing data (XML), or creating structured documents (Markdown)

What is a Markup Language?

🎥 Watch:

5. Installing & Setting Up a Code Editor

📖 Notes:

installation of Visual Studio Code
Download and Install. Visit the official VS Code website and download the version suitable for your operating system. ...
Launching VS Code. After installation, launch VS Code. ...
Choosing a Theme. ...
Customizing Settings. ...
Keybindings. ...
Installing Extensions. ...
Install Git. ...
Configure Git in VS Code.

Installing & Setting Up a Code Editor

🎥 Watch:

6. Creating Your First Webpage

📖 Notes:

Creating a basic web page using HTML involves writing code in a text editor and saving it with an .html extension. Here's a step-by-step guide:
1. Choose a Code Editor:
While you can use a simple text editor like Notepad (Windows) or TextEdit (macOS), dedicated code editors like Visual Studio Code, Sublime Text, or Atom offer features like syntax highlighting and auto-completion, which improve the coding experience.
2. Create a New HTML File:
Open your chosen code editor.
Create a new file.
Save the file with a .html extension (e.g., index.html). This tells the browser to interpret the file as an HTML document.
3. Write the Basic HTML Structure:
All HTML documents follow a fundamental structure. Copy and paste this basic template into your index.html

Creating Your First Webpage

🎥 Watch:

7. Understanding Tags

📖 Notes:

HTML (HyperText Markup Language) is the standard markup language used to create the structure and layout of web pages. HTML documents consist of a series of elements, and these elements are defined using HTML tags. HTML tags are essential building blocks that define the structure and content of a webpage. In this article, we'll explore what HTML tags are, how they work, and provide detailed examples of common HTML tags.

Understanding Tags

🎥 Watch:

8. The Heading Tag

📖 Notes:

An HTML heading tag (or header tag) is used to define headings and subheadings on a web page, creating a hierarchical structure for content from h1 to h6. h1 is the most important for the main page title, while h2 through h6 denote decreasing levels of importance for subtopics. Proper use of these semantic tags improves website readability, navigability for users, and search engine optimization (SEO)

The Heading Tag

🎥 Watch:

9. The Paragraph Tag

📖 Notes:

The p tag in HTML represents a paragraph. It is a fundamental element used to structure and display blocks of text on a web page.

🎥 Watch:

10. What is an Element?

📖 Notes:

An HTML element is a fundamental building block of an HTML document, defining the structure, content, and sometimes the presentation of a webpage. It represents a component of the document that a web browser interprets and displays.

What is an Element?

🎥 Watch:

11. Horizontal Rule

📖 Notes:

In HTML, a horizontal rule is represented by the hr tag. This tag creates a thematic break or a visual horizontal line to separate content sections within a webpage.

Horizontal Rule

🎥 Watch:

12. Line Break

📖 Notes:

To create a line break in HTML, the br tag is used. This tag is a self-closing element, meaning it does not require a separate closing tag.

Line Break

🎥 Watch:

13. Introduction to HTML Lists

📖 Notes:

We encounter lists during multiple situations on a daily basis. Lists are useful for many things, including grocery shopping and creating a daily routine. Similar instances can be found on websites. The HTML lists utility assists us in creating lists on websites.

There are mainly three types of lists in HTML:

Ordered list
Unordered list
Description list

Introduction to HTML Lists

🎥 Watch:

14. Adding Comments in HTML

📖 Notes:

Comments begin with . The text placed between these tags will be ignored by the web browser and will not be displayed on the webpage. Comments are primarily used for documentation purposes, such as explaining complex code sections, leaving reminders for yourself or other developers, or temporarily hiding content during development.

Adding Comments in HTML

🎥 Watch:

15. Adding Images

📖 Notes:

The img tag is used to embed an image in an HTML page. Images are not technically inserted into a web page; images are linked to web pages. The img tag creates a holding space for the referenced image.

Adding Images

🎥 Watch:

🎥 Project