2. HTML Basic unit2 fundamentals of computer

HTML
• HTML stands for HyperText Markup Language
• HTML is the standard markup language for creating
Web pages
• HTML describes the structure of aWeb page
• HTML elements tell the browser how to display the
content
HTML Basics

HTML ELEMENT
• An HTML element is defined by a start tag, some
content, and an end tag:
<tagname> Content goes here...
</tagname>
• The HTML element is everything from the start
tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
HTML Basics

• Some HTML elements have no content (like the
<br> element).
• These elements are called empty elements.
• Empty elements do not have an end tag.
HTML Basics

HTML PAGE STRUCTURE
HTML Basics

• <!DOCTYPE html>: This is the document type
declaration (not technically a tag). It declares a
document as being an HTML document.The doctype
declaration is not case-sensitive.
• <html>: This is called the HTML root element.All
other elements are contained within it.
• <head>: The head tag contains the “behind the
scenes” elements for a webpage. Elements within the
head aren’t visible on the front-end of a webpage
HTML Basics

• HTML elements used inside the <head> element include:
 <style>-This html tag allows us to insert styling into our webpages
and make them appealing to look at with the help of CSS.
 <title>-The title is what is displayed on the top of your browser
when you visit a website and contains title of the webpage that you are
viewing.
 <base>-It specifies the base URL for all relative URL’s in a
document.
 <noscript>– Defines a section of HTML that is inserted when the
scripting has been turned off in the users browser.
 <script>-This tag is used to add functionality in the website with the
help of JavaScript.
 <link>–The‘link’ tag is used to tie together HTML, CSS and
JavaScript.
HTML Basics

• <body>: The body tag is used to enclose all the
visible content of a webpage. In other words, the body
content is what the browser will show on the front-
end.
• An HTML document can be created using any text
editor.
• Save the text file using .html or .htm.
• Once saved as an HTML document, the file can be
opened as a webpage in the browser.
HTML Basics

HTMLTAGS
• The things wrapped in triangular braces (the < …
> characters) are called tags.
• There are both opening tags and closing tags (or
starting tags and ending tags) which come in
pairs to enclose pieces of content.
HTML Basics

• There are two types of tags in HTML that are:
1. PairedTags (Opening and ClosingTags)
2. UnpairedTags (SingularTag)
HTML Basics

PairedTags - Opening and ClosingTags
• Paired tags are a set of two tags with the same name.
• In each Paired tag set, one is an opening tag, and the
other one is the closing tag.
• The closing tag has a / slash, it means that the tag is
closed now.
• It is necessary to close a paired tag; otherwise, it can
result in the malfunctioning of the website.
<tag> Content </tag>
HTML Basics

UnpairedTags - SingularTags
• Unpaired tags are single tags with no closing tag.
• These tags are also called SingularTags.
• These are also called non-container tags because they
do not contain any content.
• It is recommended to close the unpaired/singular tags also.
• But unfortunately, we do not have the closing tag for those.
• So, an unpaired tag is closed after adding a slash(/) just
before the greater than > sign.
• For example: <br />.
HTML Basics

IMPORTANT HTMLTAGS
<body>Tag
• The <body> tag in HTML is used to define the
main content present inside an HTML page.
• It is always enclosed within <html>tag.
• A body tag contains starting as well as an ending tag.
• Syntax:
<body> Body Contents... </body>
HTML Basics

Attributes: There are many attributes in the <body> tag
which are depreciated from HTML5 are listed below:
• background: It contains the URL of the background image.
It is used to set the background image.
• bgcolor: It is used to specify the background color of an
image.
• alink: It is used to specify the color of the active link.
• link: It is used to specify the color of visited links.
• text: It specifies the color of the text in a document.
• vlink: It specifies the color of visited links.
• onLoad: Name of the function to call when document has
finished loading.
HTML Basics

Paragraph or <p> tag:
• The <p> tag in HTML defines a paragraph.
• These have both opening and closing tags.
• So anything mentioned within <p> and </p> is
treated as a paragraph.
• Syntax:
<p> Content </p>
HTML Basics

HTML HEADINGTAGS
• A HTML heading or HTML h tag can be defined as a title or a
subtitle which you want to display on the webpage.
• When you place the text within the heading tags
<h1>.........</h1>, it is displayed on the browser in the bold
format and size of the text depends on the number of heading.
• There are six different HTML headings which are defined with the
<h1> to <h6> tags, from highest level h1 (main heading) to the
least level h6 (least important heading).
• h1 is the largest heading tag and h6 is the smallest one.
• So h1 is used for most important heading and h6 is used for least
important.
HTML Basics

• The following code shows all the heading levels, in
use.
<h1>Heading level 1</h1>
HTML Basics

HTMLTEXT FORMATTINGTAGS
BoldText : HTML<b> and <strong> formatting elements
• The HTML <b> element is a physical tag which display text in bold font, without any
logical importance.
• If you write anything within <b>............</b> element, is shown in bold letters.
• Example:
<p> <b> This is bold text.</b></p>
• Output:
This is bold text.
• The HTML <strong> tag is a logical tag, which displays the content in bold font and
informs the browser about its logical importance.
• If you write anything between <strong>???????. </strong>, is shown important text.
• Example:
<p><strong>This is an important content</strong>, and this
is normal content</p>
• Output:
This is an important content, and this is normal content
HTML Basics

ItalicText: HTML <i> and <em> formatting elements
• The HTML <i> element is physical element, which display the enclosed content in
italic font, without any added importance. If you write anything within
<i>............</i> element, is shown in italic letters.
• Example:
<p> <i>This is italic text.</i></p>
• Output:
This is italic text.
• The HTML <em> tag is a logical element, which will display the enclosed content
in italic font, with added semantics importance.
• Example:
<p><em>This is an important content</em>, which
displayed in italic font.</p>
• Output:
This is an important content, which displayed in
italic font.
HTML Basics

HTML Marked formatting
• If you want to mark or highlight a text, you should
write the content within <mark>.........</mark>.
• Example:
<h2> I want to put a <mark> Mark
</mark> on your face</h2>
• Output:
HTML Basics

UnderlinedText
• If you write anything within <u>.........</u>
element, is shown in underlined text.
<p> <u>This is underlined text.
</u></p>
• Output:
This is underlined text.
HTML Basics

StrikeText
• Anything written within
<strike>.......................</strike> element is
displayed with strikethrough. It is a thin line which
cross the statement.
<p> <strike>Text with
strikethrough</strike>.</p>
• Output:
Text with strikethrough
HTML Basics

SuperscriptText
• If you put the content within
<sup>..............</sup> element, is shown in
superscript; means it is displayed half a character's
height above the other characters.
• Example:
• <p>x<sup>2</sup>+y<sup>2</sup></
p>
• Output:
x2
+y2
HTML Basics

SubscriptText
• If you put the content within <sub>..............</sub>
element, is shown in subscript ; means it is displayed
half a character's height below the other characters.
• Example:
<p>H<sub>2</sub> O </p>
• Output:
H2O
HTML Basics

HTML <DIV>TAG
• The div tag is known as Division tag.
• The div tag is used in HTML to make divisions of
content in the web page like (text, images, header,
footer, navigation bar, etc).
• Div tag has both open(<div>) and closing (</div>)
tag and it is mandatory to close the tag.
HTML Basics

<html>
<head>
<title>gfg</title>
<style type=text/css>
p{
background-color:gray;
margin: 10px;
}
div
{
color: white;
background-color: 009900;
margin: 2px;
font-size: 25px;
}
</style>
HTML Basics

</head>
<body>
<div > div tag </div>
</body>
</html>
HTML Basics

HTMLTABLE
• HTML table tag is used to display data in tabular form (row *
column).There can be many columns in a row.
• We can create a table to display data in tabular form, using
<table> element, with the help of <tr> , <td>, and <th>
elements.
• In Each table, table row is defined by <tr> tag, table header is
defined by <th>, and table data is defined by <td> tags.
• HTML tables are used to manage the layout of the page e.g. header
section, navigation bar, body content, footer section etc. But it is
recommended to use div tag over table to manage the layout of the
page .
HTML Basics

<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
HTML Basics

<tr>
<td>Infosys</td>
<td>Narayn Murthy</td>
<td>India</td>
</tr>
<tr>
<td>Google</td>
<td>Sundar Pichai</td>
<td>United States</td>
</tr>
</table>
<p>To understand the example better, we have
added borders to the table.</p>
</body>
</html>
HTML Basics

HTMLTable – Rowspan
• To make a cell span over multiple rows, use the
rowspan attribute:The value of the rowspan
attribute represents the number of rows to span.
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
HTML Basics

<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
HTML Basics

HTMLTable – Colspan
• To make a cell span over multiple columns, use the
colspan attribute.
• The value of the colspan attribute represents the number
of columns to span
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
HTML Basics

<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
HTML Basics

HTML <a>Tag
• The <a> tag defines a hyperlink, which is used to link from one
page to another.
• The most important attribute of the <a> element is the href
attribute, which indicates the link's destination.
• Example: <a href="https://www.google.co.in">Visit
Google<a>
• By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
HTML Basics

HTML <img> tag
• HTML <img> tag is used to add image inside
webpage/website.
• Nowadays website does not directly add images to a
web page, as the images are linked to web pages by
using the <img> tag which holds space for the image.
• Syntax:
<img src="" alt="" width=""
height="">
HTML Basics

• Attributes: The <img> tag has following attributes.
 src: It is used to specify the path to the image.
 alt: It is used to specify an alternate text for the image. It is useful as it
informs the user about what the image means and also due to any
network issue if the image cannot be displayed then this alternate text
will be displayed.
 height: It is used to specify the height of the image.
 width: It is used to specify the width of the image.
 sizes: It is used to specify image sizes for different page layouts.
 srcset: It is used to specify a list of image files to use in different
situations.
HTML Basics

<!DOCTYPE html>
<html>
<body>
<h1>The img element</h1>
<img src="tiger.jpg" alt="Tiger
Face" width="200" height="300">
</body>
</html>
HTML Basics

HTML LISTS
• HTML Lists are used to specify lists of information.
• All lists may contain one or more list elements.
• There are three different types of HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
HTML Basics

HTML Ordered List or Numbered List
• In the ordered HTML lists, all the list items are marked with numbers
by default.
• It is known as numbered list also.
• The ordered list starts with <ol> tag and the list items start with <li>
tag.
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>
HTML Basics

• Output:
1. Aries
2. Bingo
3. Leo
4. Oracle
HTML Basics

HTML Unordered List or Bulleted List
• In HTML Unordered list, all the list items are marked with bullets.
• It is also known as bulleted list also.
• The Unordered list starts with <ul> tag and list items start with the
<li> tag.
• Example:
<ul>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ul>
HTML Basics

• Output:
o Aries
o Bingo
o Leo
o Oracle
HTML Basics

HTML Description List or Definition List
• HTML Description list is also a list style which is supported by
HTML and XHTML.
• It is also known as definition list where entries are listed like a
dictionary or encyclopedia.
• The definition list is very appropriate when you want to present
glossary, list of terms or other name-value list.
• The HTML definition list contains following three tags:
1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).
HTML Basics

<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-It is also an one of the 12 horoscope
sign.</dd>
<dt>Oracle</dt>
<dd>-It is a multinational technology
corporation.</dd>
</dl>
HTML Basics

• Output:
Aries
-One of the 12 horoscope sign.
Bingo
-One of my evening snacks
Leo
-It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology
corporation.
HTML Basics

FORMTAG
• Forms are required to take input from the user who visits the website.
• This form is used basically for the registration process, logging into your profile on a
website or to create your profile on a website, etc
• The information that is collected from the form is –
1. Name
2.Email Addresses etc.
• Now the form will take input from the form and post that data in backend
applications (like PHP).
• So the backend application will process the data which is received by them.
• There are various form elements that we can use like text fields, text area, drop-
down list, select, checkboxes, radio, etc.
• Syntax:
<form> Form Content... </form>
HTML Basics

• Attributes: There are many attributes that are associated with the <form>
tag. Some of them are listed below:
 Action Attribute: -This is used to send the data to the server after the
submission of the form.
 Method: -This is used to upload the data by using two methods that are Get
and Post.
1. Get Method: -It has a limited length of characters of URL.We should not use
get to send some sensitive data.This method is better for non-secure data.
2. Post Method: -It has no size limitations.The submission of the form with the
method post, can not be bookmarked.
 Enctype attribute: -This attribute is used to specify that how a browser
decodes the data before it sends it to the server . So the values of this
attribute are: -
1.application/x-www-form-urlencoded − It is the standard method most forms
used 2.multipart/form-data -it is used when you have something to upload like
files of images, word files, etc.
HTML Basics

• An HTML form with two input fields and one submit button:
<form action="/action_page.php" method="get"> <label
for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
HTML Basics

HTML <FRAME>TAG
• HTML <frame> tag define the particular area within an
HTML file where another HTML web page can be displayed.
• A <frame> tag is used with <frameset>, and it divides a
webpage into multiple sections or frames, and each frame can
contain different web pages.
• Note:Do not use HTML <frame> tag as it is not supported in
HTML5,instead you can use <iframe> or <div> with CSS to
achieve similar effects in HTML.
• Syntax
< frame src = "URL" >
HTML Basics

CreateVertical frames:
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="frame1.html" >
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>
HTML Basics

• Frame1.html
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: #7fffd4;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is first frame</h2>
</div>
</body>
</html>
HTML Basics

• Frame2.html
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: #2f4f4f;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is Second frame</h2>
</div>
</body>
</html>
HTML Basics

• Frame3.html
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: #c1ffc1;
height: 500px;
}
</style>
</head>
<body>
<div>
<h2>This is Third frame</h2>
</div>
</body>
</html>
HTML Basics

2. HTML Basic unit2 fundamentals of computer

Recommended

More Related Content

Similar to 2. HTML Basic unit2 fundamentals of computer (20)

Recently uploaded (20)

2. HTML Basic unit2 fundamentals of computer