Scribd
Upload
2 views

Unit 3 Introduction to HTML

This document provides an overview of the basics of HTML and CSS, detailing HTML's structure, elements, and formatting tags. It covers essential components like the HTML page structure, various tags for text formatting, lists, and tables, along with examples for each. Additionally, it explains the use of hyperlinks and the importance of semantic markup in web development.

Uploaded by

vaghanikaram1
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
2 views

Unit 3 Introduction to HTML

This document provides an overview of the basics of HTML and CSS, detailing HTML's structure, elements, and formatting tags. It covers essential components like the HTML page structure, various tags for text formatting, lists, and tables, along with examples for each. Additionally, it explains the use of hyperlinks and the importance of semantic markup in web development.

Uploaded by

vaghanikaram1
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/ 35

Unit-2: Basics of HTML and CSS

Introduction to HTML
HTML stands for HyperText Markup Language.ss
HTML is widely used, standard markup language to create web pages.
It is used to structure the content on the web by using various elements (commonly known as
tags).
HTML is HyperText + Markup Language. Where,

 HyperText refers to the way in which Web pages (HTML documents) are linked together.
Thus, the link available on a webpage is called "HyperText".

 Markup Language, which means you use HTML to simply "mark up" a text document with
tags that tell a Web browser how to structure it to display.

HTML Element
An HTML element is a basic building block to create a webpage
It is created by a start tag, content, and end tag.
the content is placed between a start and end tag.
HTML tag are not case sensitive.
Syntax of an HTML element is
<tagname> Content here </tagename>

Example:

<h1>Write Your First Heading</h1>

HTML Page Structure


HTML page structure (or, HTML basic structure) consists of the essential elements that are required
to create an HTML document that can be displayed on the browser.

Page | 1
Web Programming (3360713)
Example:

<! DOCTYPE html>

<html>

<head>

<title>Basic Structure of HTML Page</title>

</head>

<body>

<h1>First HTML Example</h1>

<p>This is the description of HTML Tag…</p>

</body>

</html>

Page | 2
Web Programming (3360713)
Elements of HTML Basic Structure
The following are the basic tags that define the basic HTML structure

1. <! DOCTYPE html>


 This element defines the document type as HTML.
 This element must be written before writing any HTML document.

2. <html>...</html>
 The <html> tag is the parent tag for all HTML elements.
 Everything related to create an HTML document must be written inside the <html> tag.
 CSS, JavaScript, and jQuery must also be written inside this tag.

3. <head>...</head>
 The <head> tag is a container tag for all those elements that are not directly displayed on the
webpage but required for the page functionalities.
 It contains meta tags, title tag, script tags, etc.

Page | 3
Web Programming (3360713)
4. <title>...</title>
 The <title> tag is used to define the title of the webpage that you can see in the browser's tab,
bookmarks list, and search engine results.

5. <body>...<body>
 The <body> tag is the container tag for all those elements, which represents the main content
of a webpage that displays on the browser.

6. <h1>...</h1>
 The <h1> tag is one of the heading tags. It is the most important heading tag, which defines
the main title or headline of the webpage.
 Any text written inside <h1> and </h1> is a top-level heading of the content.

7. <p>...</p>
 The <p> tag defines a paragraph, anything written inside <p> and </p> displays as a
paragraph on the webpage.
 Use multiple <p> tags to display text in different paragraphs.

Comments in HTML
 Just like other programming languages, you can keep any text as a comment inside an
HTML document. To create a comment in HTML, use <!-- and -->.
 Any text written inside <!-- and --> considers as comment and it does not display on the
website.

Example
<! -- <h1>First HTML Example</h1> -->

Page | 4
Web Programming (3360713)
Formatting and Fonts
Body section contains several new tags like

1. <br> tag
 Makes output start on the next line down at the beginning of a new line.
 It is self-contained tag means no need to close a tag.
 Example:
<html>
<body>
A little bit of hypertext<br> makes the world go round <br> and around
</body>
</html>

2. <p> tag
 It is the another way of adding breaks to define with <p> tag
 <p> tag places a blank line before the line it is on
 Example:
<html>
<body>
<p>A little bit of hypertext</p> <p>makes the world go round and around </p>
</body>
</html>

Page | 5
Web Programming (3360713)
3. <hr> tag
 To break section of a page then <hr> tag can be used
 This creates a line or horizontal rule.
 Like, <br> it does not require an ending tag.
 Example:
<html>
<body>
<h1> Demo for hr tag </h1>
<hr>
<p>A little bit of hypertext</p> <p>makes the world go round and around </p>
</body>
</html>

Formatting with emphases


Page | 6
Web Programming (3360713)
Tag Format
<i>…..</i> Italic
<b>…..</b> Bold
<tt>…..</tt> Typewriter Effect
<em>…..</em> Emphases
<blink>……</blink> Blinking
<sup>…..</sup> Superscript
<sub>…..</sub> Subscript

1. Emphasis tag

The HTML <em> tag is used to emphasize the particular text in a paragraph.

Bold Tag

The <b> tag is used to make the text bold.

Italic Tag

The <i> tag is used to make the text italic.

Underline Tag

The <u> tag is used to set the text underline.

Example:
<!DOCTYPE HTML>
<html>
<body>
<h1> Demo for types of emphases </h1>
<hr>
<p>A little bit of <em> hypertext </em></p>
<p>makes the <b>world</b> go <i><u>round and around</u></i> </p>

Page | 7
Web Programming (3360713)
<p>H<sub>2</sub>O
<p>X<sup>2</sup> + Y <sup>2</sup></p>
</body>
</html>

2. Pre-Formatted Text
 A useful formatting element is <pre>…..</pre>
 Which enables you to embed text that is already formatted so you don’t have to put break tag
in
 Example:
<!DOCTYPE HTML>
<html>
<body>
<pre>
A little bit of <em> hypertext </em>
makes the <b>world</b> go <i><u>round and around</u></i>
H<sub>2</sub>O
X<sup>2</sup> + Y <sup>2</sup>
</pre>

Page | 8
Web Programming (3360713)
</body>
</html>

Heading
 The HTML heading tag is used to define the heading of the HTML document.
 The <h1> tag defines the most important tag, and <h6> defines the least.
 Example:
<!DOCTYPE HTML>
<html>
<body>
<h1>This is Heading1</h1>
<h2>This is Heading2</h2>
<h3>This is Heading3</h3>
<h4>This is Heading4</h4>
<h5>This is Heading5</h5>
<h6>This is Heading6</h6>
</body>
</html>

Page | 9
Web Programming (3360713)
Font formatting:
<font> tag:
 <font> tag defines the font size, color and face of text in the HTML document.
 Since this tag was removed in HTML5, it is recommended that you use CSS properties
such as font, font-family, font-size and color to format the text in the document.
 This tag is also commonly referred to as the <font> element.
 Syntax:
<font size=" " color=" " face=" "> Our Text </font>

Attribute
Description
Name
The color attribute of the font tag in HTML is used to set the color of the text using
color either hexadecimal values (i.e., #RRGGBB format) or by providing a color name
(i.e., black, red, white).
The size attribute of the font tag in HTML is used to set the size of the tag. The size
size
is expressed as either a numeric or relative value.
The face attribute of the font tag in HTML is used to set the font to use for text. We
face
can mention one or more font names using a comma.

Page | 10
Web Programming (3360713)
 Example-1:
<!DOCTYPE HTML>
<html>
<body>
<font color="red" face="Verdana, Geneva, sans-serif" size="+1">Your formatted text goes
here</font><br>
<font color="green" face="Times New Roman" size="3">Welcome to the HTML!</font>
</body>
</html>

Example-2:

<!DOCTYPE HTML>
<html>
<body bgcolor="pink">
<p align="center">some text here....</p>
<font color="#FF0000" face="Verdana, Geneva, sans-serif" size="+1">Your formatted text
goes here</font><br><br>
<font color="green" face="Times New Roman" size="3">Welcome to the HTML!</font>
</body>
</html>

Page | 11
Web Programming (3360713)
Hyperlink
 The HTML <a> tag defines a hyperlink to a URL or a target within the HTML document.
 This tag is also commonly referred to as the <a> element.
 which is used to link from one page to another.
 Syntax:
<a href="filename.html">Hyperlink text to display on screen</a>
 Example:
<!DOCTYPE HTML>
<html>
<body>
<p align="center">use of anchor tag....</p>
<a href="https://www.w3schools.com">W3school</a><br><br>
<a href="pre-tag.html">pre tag document</a>
</body>
</html>

Page | 12
Web Programming (3360713)
Link to same page:
 Example:
<a name="Top"><b>Introduction</b></a>
…….
……..
…….
…….
<a href="#Top">Back to Top</a>

Page | 13
Web Programming (3360713)
Page | 14
Web Programming (3360713)
Link to open in a new window:

 Example:
<a href="https://www.w3schools.com" target="_blank">W3school</a><br><br>

List
List in HTML helps to display a list of information semantically.
There are three types of lists in HTML

 Unordered list or Bulleted list (ul)


 Ordered list or Numbered list (ol)
 Description list or Definition list (dl)

Unordered list or Bulleted list (ul)


 An unordered list is simply a list of related items whose order does not matter.
 an unordered list in HTML is accomplished using the unordered list block-level
element, <ul>.

Page | 15
Web Programming (3360713)
 Each item within an unordered list is individually marked up using the list item
element, <li>.
 Syntax:

<ul>List of Items</ul>

 Example:
<!DOCTYPE HTML>
<html>
<body>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul><br><br>
<ul type=”square”>
<li>Yellow</li>
<li>White</li>
<li>Black</li>
</ul>

</body>
</html>

Page | 16
Web Programming (3360713)
Ordered list (ol)
 The <ol> tag defines ordered lists in HTML.
 And the list items are defined by the <li> tag.
 The <ol> tag is not an empty element, so it has a closing tag in </ol>
 Other types are Roman numerals (like, i,ii etc.),Roman Numeras (like I,II,III etc.),
Lowecase latters (like, a,b,c etc) and Capital latters (A,B,C etc)
 Syntax:
<ol>
<li>…..</li>
<li>…..</li>
<li>…..</li>
</ol>
 Example:

<!DOCTYPE HTML>
<html>
<body>
<ol>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>
<br><br>
<ol type="i">
<li>Yellow</li>
<li>White</li>
<li>Black</li>
</ol><br><br>
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol start="22">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Page | 17
Web Programming (3360713)
</body>
</html>

Page | 18
Web Programming (3360713)
Nested List
 Example-2:
<!DOCTYPE HTML>
<html>
<body>
<ol>
<li>WP</li>
<li>Unit-1
<ol>
<li>HTML Tag</li>
<li>CSS</li>
</ol>
</li>
<li>Unit-2</li>
</ol>
</body>
</html>

Page | 19
Web Programming (3360713)
Defination List
 <dl> tag defines a description list.

 <dt> defines terms and

 <dd> description Detail

 Example:

<!DOCTYPE HTML>
<html>
<body>
<dl>
<dt>HTML</dt>
<dd>A Hyper Text Markup Language.</dd>
</dl>
<dl>
<dt>CSS</dt>
<dd>A Cascading Stylesheet.</dd>
</dl>
</body>
</html>

Page | 20
Web Programming (3360713)
Tables in HTML
 to represent data in a structured way by creating a table
 <table> tag is used to define a table
 <tr> tag is used to define a row in a table
 <th>tag is used to define table heading and
 <td>tag is used to define table cells (data)
 Syntax:
<table>
<tr>
<td>…..</td>
</tr>
</table>
 Example:
<!DOCTYPE HTML>
<html>
<body>
<table border=1>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Maria Sanchez</td>
<td>25</td>
</tr>
<tr>
<td>Michael Johnson</td>
<td>32</td>
</tr>
</table>
</body>
</html>

Page | 21
Web Programming (3360713)
Table Head, Body, and Footer
 HTML table can be divided into three parts: a header, a body, and a footer.
 <thead> tag is used to add a table head.
 The <thead> tag must come before any other tags inside a table.
 <thead> is placed on the top part of the table and we usually place the rows with table
headers inside the <thead> tag.
 <tbody> tag to add a table body. The <tbody> tag must come after <thead> and before any
other tags inside a table.
 <tfoot> tag to add a table footer. The <tfoot> tag must come after <tbody> and before any
other tags inside a table.
 Example:

<!DOCTYPE HTML>
<html>
<body>
<table>
<thead>
<tr>
<th>Sr.No</th>
<th>Item</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Apple</td>
<td>2</td>

Page | 22
Web Programming (3360713)
</tr>
<tr>
<td>2</td>
<td>Mango</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>Orange</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Total</td>
<td>5</td>
</tr>
</tfoot>
</table>
</body>
</html>

Colspan and Rowspan


 colspan attribute merges cells across multiple columns and rowspan attribute merges cells
across multiple rows
 Example:
<!DOCTYPE HTML>
Page | 23
Web Programming (3360713)
<html>
<body>
<table border=1>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td rowspan="3">Mark Smith</td>
<td>English</td>
<td align="center">67</td>
</tr>
<tr>
<td>Maths</td>
<td align="center">82</td>
</tr>
<tr>
<td>Science</td>
<td align="center">91</td>
</tr>
<tr>
<td colspan="2" align="center">Total Marks</td>
<td align="center">240</td>
</tr>
</table>
</body>
</html>

Page | 24
Web Programming (3360713)
Images in HTML

 Syntax:
<img alt="" src="" />

 Example-1:
<!DOCTYPE HTML>
<html>
<body>
<img alt="A Micky" src="micky.jpg" align="middle" height="200" width="200" />
</body>
</html>

Background Images
 Example:
<!DOCTYPE HTML>
<html>
<body background="nature.jpg">
Page | 25
Web Programming (3360713)
</body>
</html>

Frameset in HTML
 Syntax:
 Example:
<!DOCTYPE HTML>
<html>
<frameset cols="50%, 50%">
<frame src="images/panda.jpg" />
<frame src="ul-tag.html" />
</frameset>
</body>
</html>

Page | 26
Web Programming (3360713)
Form in HTML
Example:
<!DOCTYPE HTML>
<html>
<body>
<form method="POST" action="addrecord.php">
Enter Name:<input type="text" name="txtname"><br><br>
Enter Contact No:<input type="text" name="txtmobile"><br><br>
<label for="gender">Gender:</label>
<input type="radio" name="Male" checked>Male
<input type="radio" name="Female">Female
<br><br>
Enter Address:<textarea name="txtaddress" rows="2" cols="20">enter your address
here</textarea><br><br>
Select City:<select name="txtcity">
<option value="surat">Surat</option>
<option value="bharuch">Bharuch</option>
<option value="baroda">Baroda</option>
<option value="mumbai">Mumbai</option>
</select><br><br>
<input type="submit" name=“submit” value="submit">
</form>

Page | 27
Web Programming (3360713)
</body>
</html>

What is form validation?


Go to any popular site with a registration form, and you will notice that they provide feedback
when you don't enter your data in the format they are expecting.

You'll get messages such as:

 "This field is required" (You can't leave this field blank).


 "Please enter your phone number in the format xxx-xxxx" (A specific data format is required for
it to be considered valid).
 "Please enter a valid email address" (the data you entered is not in the right format).
 "Your password needs to be between 8 and 30 characters long and contain one uppercase letter,
one symbol, and a number." (A very specific data format is required for your data).

This is called form validation.

Validation done in the browser is called client-side validation, while validation done on the
server is called server-side validation.

Page | 28
Web Programming (3360713)
1. The 'required' attribute:
 To mark a text input field as 'required'
 This informs the web browser that the field is to be considered mandatory.
 Example:
<input type="text" name="txtname" required>

2. Placeholder
Example:
Enter E-mail:<input type="email" name="txtemail" required placeholder="Enter a valid
email address.">

Page | 29
Web Programming (3360713)
3. Email
Example:
Website: <input type="url" name="txtwebsite" required pattern="https?://.+"
placeholder="[email protected]">

Page | 30
Web Programming (3360713)
4. Password:
Example:
Enter Password:<input type="password" name="txtpass" required><br><br>

HTML5 elements

In HTML5, there are several multimedia tags that can be used to embed different types of
media, such as audio and video, into web pages.
These tags include:
1.<audio>-
 This tag is used to embed audio files, such as music or podcasts, into web pages.
 It supports several audio formats, such as MP3, OGG, and WAV.
 controlsto display the default audio player controls
 Example:
<html>
<body>
<audio src="audiofile.mp3" controls>
Your browser does not support the audio element.
</audio>
Page | 31
Web Programming (3360713)
</body>
</html>

Attributes of Audio tag:

 src: specifies the URL of the audio file


 controls: displays the default audio player controls
 autoplay: automatically starts playing the audio when the page loads
 loop: continuously repeats the audio file
 preload: specifies whether the audio should be preloaded or not

2.<video>-
 This tag is used to embed video files, such as movies or TV shows, into web pages.
 It supports several video formats, such as MP4, WebM, and OGG.
 Example:
<html>
<body>
<video width="500" controls>
<source src="/video/v2.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
</body>
</html>

Page | 32
Web Programming (3360713)
Attributes of Video tag:

 src: specifies the URL of the video file


 controls: displays the default video player controls
 autoplay: automatically starts playing the video when the page loads
 loop: continuously repeats the video file
 preload: specifies whether the video should be preloaded or not
 poster: specifies an image to be displayed before the video starts playing
 widthand height: specifies the dimensions of the video display area in pixels

APIs
 It is set of routines protocols and tools for building software application
 APT build collection of pre- build components, can be used with javascript.

HTML Meta Tags

 Metadata is info about info


 It is machine understandable info about web resources
 It is included in head section
 Example:
<head>
<title></title>
<meta name=”author” content=”U.K.Roy”/>
<meta name=”keywords” content=”Stone age, lifestyle, retro”/>
<meta name=”description” content=”Living prehistory”/>
<meta name=”robots” content=”index,follow”/>
</head>
 Meta tags are used to provide info to search engine robots.
 The sort of info you can give include general description of site with keywords.
 There is an instruction for search engine to index page and follow any links.
Page | 33
Web Programming (3360713)
 Attribute http-euiv used with content attribute to create meta functions.
 They are used to give expires date, refresh period or redirection.
 To set expiration date:
 Example:

<meta name=”expires” content=”Mon, 20 Jul 2007 16:00:00 GMT”/>

 It sets expiry pouint when a page will be reloaded from website to ensure a cache kept upto
data.
 Put a date zero (0) will stop page being cached.
 To force refresh after period of time
 Example:

<meta name=”refresh” content=”50;http://myownpages.co.uk/mynewssite.html”/>

 It causes page to be refreshed after 50 seconds and a redirection to ocuur to URL specified

Memory cache:

 Web browser can store pages for quick retrieving without having to request them again
 Each page has a Time To Live (TTL), it is kept in cache without going back and reloading
it.
 Usually 30 days when browser cache has been cleared
 Browser can be stopped from caching page it forces browser to ignore cached page and
instead make a request again
 Example:
<meta http-euiv=”pragma” content=”no-cache”/>
To stop search engine from archiving a page:
<meta name=”robots” content=”noarchive”/>

Character Utilities

space &nbsp;
& &amp;
“ &quot;
< &lt;
> &gt;
TM &trade;

Page | 34
Web Programming (3360713)
Inline frame:
 Contents can be mixed and placed with graphics and text for that inline frame can be
used.
 Example:
<iframe src=”hammer.html” name=”mybanner” width=”300” height=”400”
align=”right”>
</iframe>

Page | 35
Web Programming (3360713)

You might also like