Chapter: 07. Html An Introduction
HTML - An Introduction: Your Self-Study Guide for Web Page Design
Chapter Overview
This chapter introduces you to the exciting world of creating web pages! You will learn about HTML, the language used to structure web pages, and CSS, which helps style them. By the end of this chapter, you’ll understand the basic building blocks of a web page and how to make it look great.
Key Topics You Will Explore:
What HTML is and why it’s used. The fundamental rules for writing HTML5 codes. How to create, save, and edit HTML documents. Different types of HTML tags and their uses. The structure of an HTML5 document. Basic HTML tags like headings, paragraphs, and line breaks. An introduction to CSS3 for styling web pages. How to use background, text, font, and margin properties in CSS. Computers connected to the Internet are either servers or clients. They communicate using networking protocols. Clients send requests to servers, and servers respond with the requested data. Servers store information as websites, which are collections of web pages. Each web page contains text, graphics, videos, audio, and links. Every web page has a unique address called a Uniform Resource Locator (URL), allowing access from anywhere. HTML is the most widely used language to design these web pages.
HTML
HTML stands for Hypertext Markup Language. It is a markup language that describes the structure of a web page. It allows you to create web pages that include paragraphs, headings, links, and block quotes. A key advantage of HTML is that the output of HTML web pages looks the same on any type of computer and any operating system, such as MacOS or Windows. HTML5, the latest version, was officially released as a W3C Recommendation in 2014.
Clickipedia
Creation: HTML was created by Tim Berners-Lee in the early 1990s but was not officially released at that time. Official Release: It was published in 1995 as HTML 2.0. Origin: HTML is a subset of the Standard Generalized Markup Language (SGML).
Hypertext
Hypertext is a special piece of text that has the unique ability to link to another document or web page. When you click on hypertext, it takes you to a different location, either within the same document or to a completely new web page.
Markup Language
A Markup Language is a type of language that uses special symbols, known as tags, to “mark up” or label a text document. These tags then provide instructions to the web browser on how to display the text and other content on the screen.
Key Features of HTML5
HTML5 offers several important features that make it a powerful tool for web development:
Platform-Independent: This means HTML5 documents can be viewed and behave consistently across different operating systems and devices. Table Building: It provides robust features for creating structured tables to organize data. Link Addition: You can easily add hyperlinks to connect your web page to other documents or web pages. Case-Insensitive: HTML tags and attributes are not sensitive to capitalization (e.g., <HTML> is treated the same as <html>). Easy and Simple: It is designed to be a relatively straightforward and easy-to-learn language. Flexible Design: HTML5 offers a flexible way to design web pages, allowing for rich content alongside text.
Types of HTML Editor
There are two main types of HTML editors used for creating web documents:
Let’s explore each of these types in more detail.
WYSIWYG Editor
WYSIWYG stands for “What You See Is What You Get.” This type of editor is very helpful because it allows the developer to see exactly what the final web page will look like as they are creating it. These editors typically provide various tools and graphical interfaces, making it easier to design web pages without deep coding knowledge.
Examples of WYSIWYG editors: Adobe Dreamweaver, Amaya, and Google Web Designer.
Text Editor
You can create HTML documents using simple text editors that come with your computer, such as Notepad (on Windows) or Wordpad. When using a text editor, you need to have a proper understanding of HTML commands and syntax to develop a functional web page, as it doesn’t show the visual output as you type.
TAGS AND ATTRIBUTES
As you’ve learned, HTML is a markup language, which means it uses special tags to mark up the content of web pages. These tags often work together with attributes, which provide additional information or modify the behavior of the tags.
Tags
Tags are the fundamental building blocks of a web page. They act like instructions that tell the web browser how to display different pieces of information on the web page.
Visibility: Tags themselves do not appear in the browser window. Instead, they affect how the text and non-text items within them are displayed. Rules and Syntax: Each tag in HTML must follow specific rules and syntax for correct interpretation by the browser. Case-Insensitivity: HTML tags are not case-sensitive, meaning <BODY>, <body>, and <BoDy> are all treated the same. An HTML tag name begins with an opening angular bracket (<) and ends with a closing angular bracket (>). Most tags come in pairs: an opening tag and a closing tag. The only difference in the closing tag is that it includes a forward slash (/) before the tag name. Element: A combination of an opening tag, the content placed inside it, and its closing tag is called an element. Tag Categories: HTML tags can be categorized based on whether they have a closing tag: Container Tags: These tags have both an opening tag and a corresponding closing tag. They enclose content. Examples: <b> (for bold text), <head> (for document metadata). Empty Tags: These tags contain only an opening tag and do not have a closing tag. They do not enclose any data but perform a specific action, like inserting a line break. Examples: <br> (for a line break), <hr> (for a horizontal rule). Further Classification (Display Behavior): Block Level Tags: These tags, by default, take up the full width available and always begin on a new line. They create “blocks” of content. Examples: <P> (paragraph), headings (<H1> to <H6>), <HR> (horizontal rule). Text Level Tags (or Inline Tags): These tags are used to mark up parts of the text within a line. They do not start on a new line and only take up as much width as their content requires. Examples: <B> (bold), <sup> (superscript), <i> (italic), <sub> (subscript).
Nesting of Tags
Nesting of tags means placing one HTML tag inside another. You can start a new tag before closing the previous one. The crucial rule to remember is that tags are nested based on the LIFO (Last In First Out) principle. This means the tag that was opened most recently must be closed first.
Example: <body> <h1> Happy Coding! </h1> </body> Here, the <h1> tag is nested inside the <body> tag. <h1> was opened after <body>, so <h1> must be closed before <body>.
Attribute
An attribute is a special property that provides additional information about an HTML tag. It enhances the functionality of a tag, allowing you to customize its behavior or appearance.
Placement: Attributes are always specified inside the opening tag. Structure: All attributes consist of two parts: Name: This is the property you want to set (e.g., src for an image source, href for a link). Value: This is what you want to set for that specific property (e.g., "image.jpg", "https://example.com").
RULES FOR WRITING HTML5 CODES
To ensure your HTML5 code works correctly and is easy to read, follow these important rules:
Container tags should always be closed properly. Forgetting to close a container tag can lead to unexpected display issues. Values given to attributes should always be enclosed within double quotes (e.g., <img src="myimage.jpg">). The tag name itself should not contain spaces (e.g., <body> is correct, bad y is incorrect). There should be no spaces between the opening angular bracket (<) and the tag name, or between the tag name and the closing angular bracket (>) in a tag (e.g., <p> is correct, < p > is incorrect). Tags must be nested correctly using the LIFO (Last In First Out) principle. The last tag opened must be the first one closed.
HTML5 DOCUMENT STRUCTURE
An HTML document is fundamentally a text file that contains special markup tags. These markup tags are essential because they instruct the Web browser on how to display the content of your web page. When you save an HTML file, it typically uses the .htm or .html extension.
Basic Structure of an HTML Document:
Every basic HTML document follows a standard layout:
<!DOCTYPE html>
<html>
<head>
<title>Title of the web page</title>
</head>
<body>
Content of the page
</body>
</html>
An HTML page is logically divided into two main sections:
This section contains information about the document itself. It includes details like the title that appears in the browser tab, links to stylesheets (for styling), and other metadata that is important for the browser or search engines but is not directly visible to the user on the web page. This section contains all the information and content that you want to be shown on the web page. All the text, images, videos, links, and other elements that users interact with are placed within the <body> tags.
CREATING AND SAVING AN HTML DOCUMENT
Let’s walk through the steps to create and save your very first web page using basic HTML tags.
Step 1: Open a plain text editor like Notepad (on Windows) and write your HTML code.
Step 2: Click on the File menu in Notepad.
Step 3: Click on Save to open the “Save As” dialog box.
Step 4: Choose the location on your computer where you want to save the file (e.g., your Desktop or a specific folder).
Step 5: Enter a name for your file, making sure to include the .html extension. For example, you might name it 'First Web Page.html'.
Step 6: Click on the Save button to complete saving your file.
TECH FUNDA
Always make sure that you enter the “.htm” or “.html” extension with the file name while saving the file. Without this extension, your computer won’t recognize it as a web page!
Viewing a Web Page
Once you’ve created and saved your HTML document, the next step is to open it in a web browser to see your creation!
To open an HTML document in a web browser: Navigate to the folder where you have saved your HTML document. Locate your HTML file (it will likely have a browser icon, depending on your default browser). The web page will automatically open in your computer’s default web browser window (like Google Chrome, Microsoft Edge, or Mozilla Firefox). BASIC HTML TAGS
HTML provides a variety of tags to structure and present content. Some of the most fundamental tags you will use include <!DOCTYPE html>, <html>, <head>, <title>, <body>, and many more. Let’s discuss some of these essential tags in detail.
The <!DOCTYPE html> Tag
This is not an actual HTML element but rather a document type declaration. Its purpose is to tell the web browser which version of HTML the document is written in. For modern HTML5 documents, it declares the document to be HTML5. It is not case-sensitive, so you can write it in uppercase (<!DOCTYPE HTML>) or lowercase (<!doctype html>).
The <html> Tag
The <html> tag is the root element of an HTML page. It signals to the web browser that the content contained between <html> and </html> is a web page and should be interpreted and displayed by a web browser (such as Google Chrome, Microsoft Edge, or Mozilla Firefox). Every single web page’s code must start with the <html> tag and end with the </html> tag, encompassing all other HTML content.
The <head> Tag
The <head> tag defines the header area of your web page. The information placed inside the <head> tag is primarily used by the browser itself (e.g., for page title, links to external files, metadata) but is not directly displayed on the web page content area that users see. It is a container tag, meaning it must be used in a pair as <head> and </head>. Every web page’s coding structure must include a <head> tag.
The <title> Tag
The <title> tag specifies the text that appears on the Title Bar of your web browser (usually in the browser tab). The text contained between <title> and </title> is not part of the visible web page content itself. Mandatory? The use of the <title> tag is not mandatory. If skipped: If you choose not to provide a title for your web page, your web browser will typically show the file name and its path as the title instead.
The <body> Tag
The <body> tag is where you specify the main content of your web page. All the text, images, links, videos, and other elements that you want to be displayed on the actual web page for the user to see are contained between the <body> and </body> tags. It is a container tag, meaning it requires both an opening (<body>) and a closing (</body>) tag.
The <Hn> Tag
Just like chapters in a book have various headings and sub-headings to organize content, the <Hn> tag in HTML provides similar functionality for your web page.
Here, n denotes the levels of headings. HTML defines up to 6 levels of headings, ranging from <h1> to <h6>. 
Self Study
