Scribd
Upload
33 views25 pages

HTML Unit 1 and 2

Uploaded by

jeevanprasadsaravanan15
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views25 pages

HTML Unit 1 and 2

Uploaded by

jeevanprasadsaravanan15
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

UNIT -I

1.INTRODUCTION TO HTML:

⮚ HTML stands for Hyper Text Markup Language

⮚ HTML is the standard markup language for creating Web pages

⮚ HTML describes the structure of a Web page

⮚ HTML consists of a series of elements

⮚ HTML elements tell the browser how to display the content

⮚ HTML elements label pieces of content such as "this is a heading", "this is a paragraph",

"this is a link", etc.

⮚ All HTML documents must start with a document type declaration: <!DOCTYPE html>.

⮚ The HTML document itself begins with <html> and ends with </html>.

⮚ The visible part of the HTML document is between <body> and </body>.

⮚ Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

OUTPUT:
My First Heading

My first paragraph.

⮚ The <!DOCTYPE> declaration represents the document type, and helps browsers to
display web pages correctly.

⮚ It must only appear once, at the top of the page (before any HTML tags).

⮚ The <!DOCTYPE> declaration is not case sensitive.

⮚ The <!DOCTYPE> declaration for HTML5 is:

⮚ <!DOCTYPE html>

HTML Headings:

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading
2.HTML Basic Structure

HTML Paragraph and Break Elements:


HTML <p> tags are used to write paragraph statements on a webpage. They start with the <p>
tag and end with </p>. The HTML <br> tag is used to insert a single line break and does not
require a closing tag. In HTML, the break tag is written as <br>.
Syntax:
// for Parapgraph

<p> Content... </p>

// for Break
<br>
HTML Links

HTML links are defined with the <a> tag:

Example

<a href="https://www.w3schools.com">This is a link</a>

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

Example

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

3.WHAT IS INTERNET:

The Internet is an increasingly important part of everyday life for people around the world. But if
you've never used the Internet before, all of this new information might feel a bit confusing at first.

Throughout this tutorial, we'll try to answer some basic questions you may have about the Internet
and how it's used. When you're done, you'll have a good understanding of how the Internet
works, how to connect to the Internet, and how to browse the Web.

The Internet is a global network of billions of computers and other electronic devices. With the
Internet, it's possible to access almost any information, communicate with anyone else in the world,
and do much more.You can do all of this by connecting a computer to the Internet, which is also
called going online.

What is the Web:


The World Wide Web—usually called the Web for short—is a collection of
different websites you can access through the Internet. A website is made up of related text,
images, and other resources. Websites can resemble other forms of media—like newspaper articles
or television programs—or they can be interactive in a way that's unique to computers.

The purpose of a website can be almost anything: a news platform, an advertisement, an online
library, a forum for sharing images, or an educational site like us.

Other things you can do on the Internet:

One of the best features of the Internet is the ability to communicate almost instantly with anyone
in the world. Email is one of the oldest and most universal ways to communicate and share
information on the Internet, and billions of people use it. Social media allows people to connect in
a variety of ways and build communities online.

There are many other things you can do on the Internet. There are thousands of ways to keep up
with news or shop for anything online. You can pay your bills, manage your bank accounts, meet
new people, watch TV, or learn new skills. You can learn or do almost anything online .

4.WHAT IS A WEB BROWSER

The web browser is an application software to explore www (World Wide Web). It provides an
interface between the server and the client and it requests to the server for web documents and
services. It works as a compiler to render HTML which is used to design a webpage. Whenever
we search for anything on the internet, the browser loads a web page written in HTML, including
text, links, images, and other items such as style sheets and JavaScript functions. Google Chrome,
Microsoft Edge, Mozilla Firefox, and Safari are examples of web browsers.

History of the Web Browsers


The first web browser World Wide Web was invented in the year of 1990 by Tim Berners-Lee.
Later, it becomes Nexus. In the year of 1993, a new browser Mosaic was invented by Mark
Andreessen and their team. It was the first browser to display text and images at a time on the
device screen. He also invents another browser Netscape in 1994. Next year Microsoft launched a
web browser Internet Explorer which was already installed in the Windows operating system.
After this many browsers were invented with various features like Mozilla Firefox, Google
Chrome, Safari, Opera, etc. For more detail refer this article: History of Web Browsers

The choice of a web browser depends on the user’s preference and requirements. To know more
about individual browsers please go through our Web Browser – A Complete Overview

How does a Web Browser Work

A web browser helps us find information anywhere on the internet. It is installed on the client
computer and requests information from the web server such a type of working model is called a
client-server model.

Client-server model
The browser receives information through HTTP protocol. In which transmission of data is
defined. When the browser received data from the server, it is rendered in HTML to user-readable
form and, information is displayed on the device screen.

5.WEB PAGES

A webpage is a digital document that is linked to the World Wide Web and viewable by anyone
connected to the internet having a web browser. It can contain any type of information, such as
text, color, graphics, animations, videos, sounds, etc.

A webpage is a document that is written in the HTML, it can be viewed from the Internet. It can
be accessed by entering the URL on the address bar of the web browser.

Components of a Webpage : As you already know that a webpage is a digital document


containing information in digital form, still we are asking this question – What does it contain or
what are its compositions? Well, this question can be answered in more than one way :

⮚ Components of a webpage, Content wise

⮚ Components of a webpage, Structure Wise

ContentWise :

Content-wise the components of a webpage are: Hypertext and Hyperlinks

Hypertext :
It refers to a digital text, which is more than just text as it can include information in various media
formats such as :

⮚ text

⮚ color

⮚ graphic
⮚ animation

⮚ video

⮚ sound

⮚ hyperlinks

Hyperlinks :

It refers to a link from a hypertext file to another such file. A hyperlink can be in the form of a
graphic or text, upon clicking where the linked document opens up.

StructureWise : Structure wise the components of a web page are :

Page Title – This is a single line text which is displayed on the title bar of the browser displaying
web page.

Header – This is generally a one or two line text (sometimes a graphics/image) defining the
purpose of the web page. It is displayed at the top of the web page, below the address bar of the
browser.

Body of the Web page – This is the section below the header of the web page and it contains the
actual content of the web page.

Navigational Links – These are the hyperlinks placed on the web page using which you can move
the linked web pages/documents.

Footer –
This is the bottom section of the web page. This is the section where usually the copyright notice,
website contact information, etc. is put.

6. HTML BASIC UNDERSTANDING TAGS:


HTML tags are the fundamental elements of HTML used for defining the structure of the
document. These are letters or words enclosed by angle brackets (< and >).

Usually, most HTML tags come in pairs, consisting of an opening tag and a closing tag. The
opening tag marks the beginning of an element, while the closing tag, which includes a forward
slash before the tag name, indicates the end of that element.. Each tag has a different meaning and
the browser reads the tags and displays the contents enclosed by it accordingly.

<!DOCTYPE html>

<html>

<head>

<title>Online HTML Editor</title>

</head>

<body>

<h1>Online HTML Editor</h1>

<p>This is real time online HTML Editor</p>

</body>

</html>

OUTPUT:

Online HTML Editor


This is real time online HTML Editor
Tag Description

<!--...--> Defines a comment

<!DOCTYPE> Defines the document type

<a> Defines a hyperlink

<abbr> Defines an abbreviation or an acronym

<acronym> Not supported in HTML5. Use <abbr> instead.


Defines an acronym

<address> Defines contact information for the author/owner of a


document

<applet> Not supported in HTML5.


Use <embed> or <object> instead.
Defines an embedded applet

<area> Defines an area inside an image map

<article> Defines an article

<aside> Defines content aside from the page content

<audio> Defines embedded sound content

<b> Defines bold text

<base> Specifies the base URL/target for all relative URLs in a


document
<basefont> Not supported in HTML5. Use CSS instead.
Specifies a default color, size, and font for all text in a
document

<bdi> Isolates a part of text that might be formatted in a different


direction from other text outside it

<bdo> Overrides the current text direction

<big> Not supported in HTML5. Use CSS instead.


Defines big text

<blockquote> Defines a section that is quoted from another source

<body> Defines the document's body

<br> Defines a single line break

<button> Defines a clickable button

<canvas> Used to draw graphics, on the fly, via scripting (usually


JavaScript)

<caption> Defines a table caption

<center> Not supported in HTML5. Use CSS instead.


Defines centered text

<cite> Defines the title of a work

<code> Defines a piece of computer code

<col> Specifies column properties for each column within a


<colgroup> element
<colgroup> Specifies a group of one or more columns in a table for
formatting

<data> Adds a machine-readable translation of a given content

<datalist> Specifies a list of pre-defined options for input controls

<dd> Defines a description/value of a term in a description list

<del> Defines text that has been deleted from a document

<details> Defines additional details that the user can view or hide

<dfn> Specifies a term that is going to be defined within the


content

<dialog> Defines a dialog box or window

<dir> Not supported in HTML5. Use <ul> instead.


Defines a directory list

<div> Defines a section in a document

<dl> Defines a description list

<dt> Defines a term/name in a description list

<em> Defines emphasized text

<embed> Defines a container for an external application

<fieldset> Groups related elements in a form


<figcaption> Defines a caption for a <figure> element

<figure> Specifies self-contained content

<font> Not supported in HTML5. Use CSS instead.


Defines font, color, and size for text

<footer> Defines a footer for a document or section

<form> Defines an HTML form for user input

<frame> Not supported in HTML5.


Defines a window (a frame) in a frameset

<frameset> Not supported in HTML5.


Defines a set of frames

<h1> to <h6> Defines HTML headings

<head> Contains metadata/information for the document

<header> Defines a header for a document or section

<hgroup> Defines a header and related content

<hr> Defines a thematic change in the content

<html> Defines the root of an HTML document

<i> Defines a part of text in an alternate voice or mood

<iframe> Defines an inline frame


<img> Defines an image

<input> Defines an input control

<ins> Defines a text that has been inserted into a document

<kbd> Defines keyboard input

<label> Defines a label for an <input> element

<legend> Defines a caption for a <fieldset> element

<li> Defines a list item

<link> Defines the relationship between a document and an


external resource (most used to link to style sheets)

<main> Specifies the main content of a document

<map> Defines an image map

<mark> Defines marked/highlighted text

<menu> Defines an unordered list

<meta> Defines metadata about an HTML document

<meter> Defines a scalar measurement within a known range (a


gauge)

<nav> Defines navigation links


<noframes> Not supported in HTML5.
Defines an alternate content for users that do not support
frames

<noscript> Defines an alternate content for users that do not support


client-side scripts

<object> Defines a container for an external application

<ol> Defines an ordered list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<output> Defines the result of a calculation

<p> Defines a paragraph

<param> Defines a parameter for an object

<picture> Defines a container for multiple image resources

<pre> Defines preformatted text

<progress> Represents the progress of a task

<q> Defines a short quotation

<rp> Defines what to show in browsers that do not support ruby


annotations

<rt> Defines an explanation/pronunciation of characters (for


East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)

<s> Defines text that is no longer correct

<samp> Defines sample output from a computer program

<script> Defines a client-side script

<search> Defines a search section

<section> Defines a section in a document

<select> Defines a drop-down list

<small> Defines smaller text

<source> Defines multiple media resources for media elements


(<video> and <audio>)

<span> Defines a section in a document

<strike> Not supported in HTML5. Use <del> or <s> instead.


Defines strikethrough text

<strong> Defines important text

<style> Defines style information for a document

<sub> Defines subscripted text

<summary> Defines a visible heading for a <details> element

<sup> Defines superscripted text


<svg> Defines a container for SVG graphics

<table> Defines a table

<tbody> Groups the body content in a table

<td> Defines a cell in a table

<template> Defines a container for content that should be hidden when


the page loads

<textarea> Defines a multiline input control (text area)

<tfoot> Groups the footer content in a table

<th> Defines a header cell in a table

<thead> Groups the header content in a table

<time> Defines a specific time (or datetime)

<title> Defines a title for the document

<tr> Defines a row in a table

<track> Defines text tracks for media elements (<video> and


<audio>)

<tt> Not supported in HTML5. Use CSS instead.


Defines teletype text

<u> Defines some text that is unarticulated and styled


differently from normal text
<ul> Defines an unordered list

<var> Defines a variable

<video> Defines embedded video content

<wbr> Defines a possible line-break

UNIT II

HTML Document Structure

⮚ HTML uses predefined tags and attributes to instruct the browser on how to
display content, including formatting, style, font size, and images. HTML is a
case-insensitive language, meaning there is no distinction between uppercase and
lowercase letters.

There are generally two types of tags in HTML:

⮚ Paired Tags: These tags come in pairs i.e. they have both opening(< >) and
closing(</ >) tags.
⮚ Empty Tags: These tags are self-closing and do not require a closing tag.”

Below is an example of a <b> tag in HTML, which tells the browser to bold the text
inside it.
Tags and attributes
HTML tags are structural components enclosed in angle brackets. They are typically opened and
closed with a forward slash (e.g., <h1></h1>). Some tags are self-closing, while others support
attributes like width, height, and controls for defining properties or storing metadata.
Structure of an HTML Document
An HTML Document is mainly divided into two parts:
● HEAD: This contains the information about the HTML document including the Title of the
page, version of HTML, Meta Data, etc.
● BODY: This contains everything you want to display on the Web Page.

Understanding Essential HTML Tags


● DOCTYPE Declaration (`<!DOCTYPE HTML>`): It specifies the HTML version;
typically indicates HTML5.
● <html>: The root element that encompasses the entire HTML document structure. It serves as
the parent to both the <head> and <body> tags.
● lang attribute: Specifies the language using the “lang” attribute (e.g., lang=”en” for English
● <head>:Container for metadata, title, CSS, scripts, etc.
● Content: While not directly displayed, it serves informational and structural purposes.
● <body>: A body tag is used to enclose all the data which a web page has from texts to links.
All the content that you see rendered in the browser is contained within this element.

Block-level Elements:

A block-level element always starts on a new line, and the browsers automatically add some
space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right
as far as it can).Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.The <div> element defines a
division or a section in an HTML document.

The <p> element is a block-level element.

The <div> element is a block-level element.

Example

<p>Hello World</p>
<div>Hello World</div>

List of HTML Block Elements

Below mentioned all the elements are block level elements, they all start with a
new line on their own, and anything that follows them appears on the next line.

HTML Block Elements

<address> <article> <aside> <blockquote> <canvas>

<dd> <div> <dl> <dt> <fieldset>

<figcaption> <figure> <footer> <form> <h1> - <h6>

<header> <hr> <li> <main> <nav>

<noscript> <ol> <p> <pre> <section>


<table> <tfoot> <ul> <video>

Example of block level Elements

In this example, we are going to use some of the block level elements. On executing the below
HTML code, it will produce one heading and two paragraphs separated by a horizontal line

Open Compiler
<!DOCTYPE html>
<html>

<head>
<title>HTML Block Level Elements</title>
</head>

<body>
<h3>HTML Block Level Elements</h3>
<p>
This line will appear in the next line
after Heading.
</p>
<hr>
<p>
This line will appear after Horizontal
Line.
</p>
</body>

</html>
OUTPUT: HTML Block Level Elements

This line will appear in the next line after Heading.

This line will appear after Horizontal Line.

Inline Elements
Inline elements, on the other hand, can appear within the same line and do not start a new line on
their own. Some common inline elements are as follows:
List of HTML Inline Elements
Below mentioned all the elements are inline elements, they did not start with a new line on their
own.

HTML Inline Elements

<a> <abbr> <acronym> <b> <bdo>

<big> <br> <button> <cite> <code>

<dfn> <em> <i> <img> <input>

<kbd> <label> <map> <object> <output>

<q> <samp> <script> <select> <small>

<span> <strong> <sub > <sup> <textarea>

<time> <tt> <var>

Example of Inline Elements


In the following example, we are going to illustrates the use of a few inline elements. The below
code will generate a bold line and an italic line.

<!DOCTYPE html>

<html>

<head>

<title>Online HTML Editor</title>

</head>

<body>
<h1>Online HTML Editor</h1>

<p>This is real time online HTML Editor</p>

</body>

</html>

OUTPUT:

Online HTML Editor


This is real time online HTML Editor
HTML Heading Tags
The following are the six HTML tags for different heading sizes.
<h1>Heading 1</h1> - (Most Important)
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> - (Least Important).
Example:
<!DOCTYPE html>
<html>
<head>
<title>Heading in HTML</title>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
</body>
</html>
Output:
THE HTML STYLE ATTRIBUTE

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">

Background Color

The CSS background-color property defines the background color for an HTML element.

Example

Set the background color for a page to powderblue:

<body style="background-color:powderblue;">

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

</body>
Text Color

The CSS color property defines the text color for an HTML element:

Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Fonts

The CSS font-family property defines the font to be used for an HTML element:

Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Text Size

The CSS font-size property defines the text size for an HTML element:

Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

-------------------------------------------------------------***********---------------------------------------

You might also like