Scribd
Upload
1 views

HTML

The document provides an overview of HTML (Hypertext Markup Language), detailing its structure, advantages, and disadvantages. It outlines essential HTML elements such as tags for formatting, creating links, embedding images, and constructing tables. Additionally, it discusses the use of scripts to enhance interactivity within web pages.

Uploaded by

Pratik Tatkare
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1 views

HTML

The document provides an overview of HTML (Hypertext Markup Language), detailing its structure, advantages, and disadvantages. It outlines essential HTML elements such as tags for formatting, creating links, embedding images, and constructing tables. Additionally, it discusses the use of scripts to enhance interactivity within web pages.

Uploaded by

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

4.

HTML
4.1 Introduction
HTML Hypertext Markup Language.
It is a text file containing small markup tags which are instruction given to
browser about how to display the page.
It consist of three main element.
i)Hyper Text: Hyper text simply means “ Text within Text”. text has link
within it, is a hypertext. Whenever you click on a link which brings you to new
webpages, you have clicked on a hypertext. Hypertext is a way to link two or
more web pages with each other.
ii) Markup language: A markup language is a computer languages that is
used to apply layout and formatting conventions to a text documents. Markup
language makes text more interactive and dynamic.It can turn text into
images, tables, links etc.
iii) Web page: A web page is a document which is commonly written in HTML
and translated by a web browser. A web page can be identified by entering an
URL. A web page can be of static or dynamic types.with the help of HTML only,
we can create static web pages.

Advantages of HTML
 HTML helps to build structure of a website and is a widely used Markup
language.
 It is easy to learn.
 Every browser supports HTML Language.
 HTML is light weighted and fast to load.
 Storage of big files are allowed because of the application cache feature.
 Do not get to purchase any extra software because it’s by default in every
window.
 Loose syntax (although, being too flexible won’t suit standards).
 HTML is simple to edit as being a plain text.
 It integrates easily with other languages such as JavaScript, CSS etc.
 HTML is that it is easy to code even for novice programmers.
Disadvantages of HTML
 It cannot produce dynamic output alone, since it’s a static language.
 Making the structure of HTML documents becomes tough to understand.
 Errors can be costly.
 It is the time consuming as the time it consume to maintain on the color
scheme of a page and to make lists, tables and forms.
 We need to write a lot of code for just creating a simple webpage.
 We have to check up the deprecated tags and confirm not to use them to
appear because another language that works with HTML has replaced the
first work of the tag, and hence the opposite language needs to be
understood and learned.
 Security features offered by HTML are limited.
 If we need to write down long code for creating a webpage then it
produces some complexity.
 HTML can create only static and plain pages so if we’d like dynamic pages
then HTML isn’t useful.
 Editing of web page need to be done separately , they are not centralized.

HTML Versions

4.2 HTML Page Structure


The basic structure of an HTML page is shown below. It contains the
essential building-block elements (i.e. doctype declaration, HTML, head, title,
and body elements) upon which all web pages are created.
HTML Basic tags

<!DOCTYPE> Tag

All HTML documents must start with a <!DOCTYPE> declaration.

The declaration is not an HTML tag. It is an "information" to the browser


about what document type to expect.

<head> Tag

The <head> element is a container for metadata (data about data) and is
placed between the <html> tag and the <body> tag.

Metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and
other meta information.

<title> Tag

The <title> tag defines the title of the document. The title must be text-only,
and it is shown in the browser's title bar or in the page's tab.

The <title> tag is required in HTML documents!


The contents of a page title is very important for search engine optimization
(SEO)! The page title is used by search engine algorithms to decide the order
when listing pages in search results.

<body> Tag

The <body> tag defines the document's body.

The <body> element contains all the contents of an HTML document, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.

HTML Formatting Tags


<b> /<strong> Tag

The <b> tag in HTML is used to make the enclosed text bold, giving it
greater emphasis or visual importance. Unlike the <strong> tag, which also
makes text bold but with semantic importance. the <b> tag is purely for
styling purposes and does not carry semantic meaning.
Example:
<p>This is a <b>bold</b> word in this sentence.</p>
o/p:
This is a bold word in this sentence.

<small> Tag
The <small> tag in HTML is used to define smaller text, reducing font size.
It decreases the font size by one size (from medium to small, from x-large to
large). It has a display property of inline.
Example:
<small> welcome…..!</small>
o/p :
welcome…..!
<i>/<em> Tag
The <i> tag in HTML is used to display the content in italic style. This tag is
generally used to display the technical term, phrase, the important word in a
different language. The <i> tag is a container tag that contains the opening
tag, content & closing tag.
Example: <i>Computer Science </i>
o/p: Computer Science

<sub> Tag
The <sub> tag in HTML is used to define subscript text, which appears
smaller and slightly below the normal text baseline. It is commonly used for
mathematical expressions, chemical formulas, and footnotes, like in H₂O
(water) or E=mc² (Einstein’s equation).
Example:
<h2>H<sub>2</sub>O</h2>
o/p:

sup Tag
The <sup> tag in HTML describes the text as a superscript text. Here the text
is above the baseline of the text and that text appears in a smaller font.
Example:
<p>a<sup>2</sup></p>
o/p:
<mark> Tag
The <mark> tag in HTML is used to define the marked text. It is used to
highlight the part of the text in a paragraph.
Example:
<mark>computer science</mark>
o/p:
computer science

<ins> Tag
HTML <ins> tag is used to specify a block of inserted text. The <ins> tag is
typically used to mark a range of text that has been added to the document.
Example:
<p>
Tutions for <del>mathematical</del>
<ins>computer</ins> science
</p>

o/p:
Tutions for mathematical computer science

<u> tag
This tag is used to underline text written between it.
Write anything within <u>..</u>element is shown in underlined text.
Example:
<p><u>Computer Science </u></p>
o/p:
Computer Science

<marquee> Tag
The <marquee> tag in HTML creates a scrolling text or image effect within
a webpage. It allows content to move horizontally or vertically across the
screen, providing a simple way to add dynamic movement to elements.
Ex: <MARQUEE ALIGN=”top”>Scrolling text</MARQUEE>
Create a text marquee with the enclosed text scrolling along the frame.
The another attribute is DIRECTION defining direction of the marquee text.
Ex: <MARQUEE DIRECTION=”RIGHT”>WELCOME </MARQUEE>
So here WELCOME scrolles from left toward right . the default direction is
right to left.
But other commericial browsers,including Netscape Navigator ,do not support
this element.

<pre> Tag
The pre tag in HTML defines a block of preformatted text, preserving spaces,
line breaks, and tabs. This tag is useful for displaying code, formatted text,
and preserving text layout.
Ex;<PRE> Employee_name Employee_number</PRE>
o/p: Employee_name Employee_number

<font> Tag
The HTML <font> Tag plays an important role in the web page to create an
attractive and readable web page.
The font tag is used to change the color, size, and style of a text
The base font tag is used to set all the text to the same size, color, and face.
Hypertext Anchors
URL stands for uniform Resource Locator,which may represent an address of
document on web or internet or simply a path to a document in a specific
directory.the world wide web uses URL’s to specify the location of files on
other servers.
HTML provides you to jump from a link to any document or images or any
local or webpages by using special tag called <a> i.e anchor tag
Syntax: <A HREF =”URL”>name or image which can be treated as link</A>
1)Link to a page on the www
< A HREF=http://www.yahoo.com>Enter your email-id</A>
The string ‘Enter your email-id ‘ is a hypertext link to the website indicated by
URL specified
2)Link to an image by image as link
< A HREF=”image2.jpeg”><IMG SRC=”image1.gif”</A>
The image ‘image1.gif’ is a hypertext link to the image file located in the same
directory this will allow you to use a small icon that links the user to a larger
version of the same image.
3)Link to document located in different directory
< A HREF=”d:\soft\a.html”>Click Here</A>
Here by clicking on Click Here link, destination page will be displayed which is
specified in the path given.
4) Link to the same page(Links to a particular Place in a document)
<P><A HREF=”#samepage”>This is link to the same page.</A></p>
Anchor can also be used to move a reader to a particular section in a
document(either the same or a different document)rather than to the
top,which is the default.
This type of an anchor is commonly called a named anchor because to create
the links, you insert HTML names within the document.
Images in HTML
The HTML <img> tag is used to embed images in a web page. It is an empty
or self-closing tag, meaning it doesn’t have a closing tag. It allows to display
images from various sources, such as files on a website or URLs from other
websites.
image Tag Attributes
1.src:
Specifies the path to the image.
2.alt: Specifies text to be displayed if the browser does not support the imag
tag or if the user has suspend image loading in the browser.
3.align: specifies the alignment of the image in relation to the surrounding
text.if you do not specify a value for align ,browser uses BOTTOM as the
default LEFT aligns an images with left margin.
4.Border=”borderWidth”
Specifies the width in pixels,of a border around the image.the value must be
an integer.
5.Height=”height”
Specifies the height of the image,either in pixels or as percentages of the
height of the window,frame,or positioned blocks of HTML that contains the
iamge.
6.Width=”width”
Specifies the width of the image eiher in pixels or as a percentage of the
window,frame,or positioned block of HTML containing the image.
7.hspace=”horizMargin”
Specifies a margin in pixels between the left and right edges of the image and
surrounding text and images.give the value as an integer
8.vspace=”verticalMargin”
Specifies a margin in pixels between the top and bottom edges of the images
and surrounding text and images.give the value as an integer.
Types of image tag
Inserting image as an background
Images from different location
Images as a link
Images without text

Tables
The Table tag defines a table.inside the table tag,use the TR tag to define rows
in the table,use the TH tag to define row or column heading and use the TD tag
to define table cells.
Table elements
<Table>…</Table> Defines a table in HTML.if the border attribute is
present ,your browser displays the table with a border.
<Caption>…</Caption> Defines the caption for the title of the table.the default
position of the title is centered at the top of the table.the attribute
ALIGN=BOTTOM can be used to position the caption below the table.
<TR>…</TR> Specifies a table row within a table.ypu may defines default
attributes for the entire row: ALIGN(LEFT,CENTER,RIGHT) and /or
VALIGN(TOP,MIDDLE<BOTTOM)
<TH>…</TH> Defines a table header cell.by default the text in this cell is bold
and centered .table header cells may contain other attributes to determine the
characteristics of the cell and its contents.
<TD>…</TD> Defines a table data cell.by default the text in this cell is aligned
left and centered vertically. Table data cell may contain other attributes to
determine the characteristics of the cell and its contents.

Table Attribtes
Cellpadding
Determine the amount of space,in pixels,between the border of a cell and the
content of the cell.
space between the cell edges and the cell content. The default is 1

Cellspacing
Determine the amount of space,in pixels,between individual cells in a table.the
default is 2

Colspan
To make a cell span over multiple columns, use the colspan attribute:

Example
<table >
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
o/p:

Rowspan
To make a cell span over multiple rows, use the rowspan attribute:

<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
</body>
</html>
o/p:

Scripts
HTML page with scripts are used to make them more dynamic and interactive.
VBScript
Microsoft visual basic scripting edition brings active scripting to a wide
variety of environments,including web client scripting in Microsoft internet
explorer and web server scripting in Microsoft internet information service.
Various tags in VB script
<NOSCRIPT> Tag
The tag is used to define an alternative text if a script is NOT executed.This tag
is used for browsers that recognize the <script> tag,but does not support the
script inside,so this browser will display the text inside the <noscript> tag
instead.However,if a browser supports the script inside the <script> tag it will
ignore the <noscript> tag.

<SCRIPT> Tag
VBScript code is written paired <SCRIPT> tags.
Beginning and ending<SCRIPT> tags surround the code.the language attribute
indicates the scripting language.you must specify the language because
browser can use other scripting languages.
You can use script blocks anywhere in an HTML page.you can put them in
both the BODY and HEAD section.however you will probably want to put all
general-purpose scripting code on the head section in order to keep all the
code together.keeping your code in the head section ensures that all code is
read and decoded before it is called from within the body section.

You might also like