Scribd
Upload
9 views16 pages

1bcom_sem3_unit4_notes

The document provides an overview of HTML (Hypertext Markup Language), detailing its structure, tags, attributes, and various elements used in web programming. It covers essential topics such as text formatting, paragraph and heading tags, lists, hyperlinks, and tables, along with syntax and examples for each. The content is aimed at students in an E-Commerce and Web Designing course, specifically for the BCOM Semester 3 curriculum.

Uploaded by

PullaReddy L
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
9 views16 pages

1bcom_sem3_unit4_notes

The document provides an overview of HTML (Hypertext Markup Language), detailing its structure, tags, attributes, and various elements used in web programming. It covers essential topics such as text formatting, paragraph and heading tags, lists, hyperlinks, and tables, along with syntax and examples for each. The content is aimed at students in an E-Commerce and Web Designing course, specifically for the BCOM Semester 3 curriculum.

Uploaded by

PullaReddy L
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/ 16

E-Commerce & Web Designing I BCOM – Semester – 3(2024)

UNIT-IV: Introduction to Web Programming

Q. Define HTML (Hypertext Markup Language):


HTML stands for Hypertext Markup Language. HTML is used to create web pages with text, images or
multimedia content using pre-defined tags and saved as HTML file with the extension of .html or .htm.
HTML was developed by Tim Berners-Lee in 1990.

Q. Write about TAGS in HTML


HTML markup elements are usually called as HTML tags.HTML tags are element names surrounded by
angle brackets.
Syntax: <tag name>………..</tag name>
Example: <h1> Heading 1 </h1>
 Html tags are placed between angle brackets. (i.e. < and > symbols)
 Html tags always come in pairs. The first tag is called as start (or) opening tag, the second tag is
called as end (or) closing tag
 The end tag is written like the start tag, with a forward slash before the tag name
 The text between the starting tag and ending tag is called as “element content”.
 Html tags are pre-defined tags.
 HTML tags are case-insensitive i.e., <HEAD>, <head> and <hEaD> are equal
 Whitespaces, tabs and new lines are ignored by browser

Q. Write about ATTRIBUTES in HTML


Attributes are used to provide additional information about the html elements. The attributes
must be specified in starting tags. The attribute value is placed with in single quote or double quotes.
Every html tag contain attribute.
Syntax: attribute_name = attribute_value
Example: <h1 align=”right”> Heading 1 </h1>
<p align=”center”> Paragraph</p>

1
E-Commerce & Web Designing I BCOM – Semester – 3(2024)

Q. Write about STRUCTURE OF HTML with example


All html documents follow same basic structure. HTML document files must be saved with the
extensions .html or .htm. HTML documents are also called as “Web Pages”. Each HTML document
usually contains different tags.

Every HTML document starts with <html> and ends with </html>. The starting <html> tag tells the
browser where the document start and ending </html> tag tell the browser where the document ends.
All HTML documents contain 2 sections. They are
◦ Head section
◦ Body section
1. Head section:
The document head section shows the information of the document. It is represented by starting
<head> and ending </head> tag. The head section contains only one tag called <title> tag which is used
to display the title of the document in the browser window.
Ex: <title> tag, <meta> tag, <script> tag, <style> tag etc.

2. Body section:
The body section is used to display main information (i.e., text or images) of the document. It is
represented by starting <body> and closing </body> tag. It contains all the HTML content like headings,
paragraphs, images, hyperlinks, tables etc.
Ex: heading tags (<h1>,<h2>,<h4>,<h4>,<h5>,<h6>), paragraph tags (<p>), table (<table>,<tr>,<td>) tags
etc

Example:
<html>
2
E-Commerce & Web Designing I BCOM – Semester – 3(2024)

<head>
<title>First html program</title>
</head>
<body>
<h1>HTML </h1>
<p>Welcome to the web page</p>
</body>
</html>

Q. Write about TEXT FORMATTING TAGS in HTML


In html, text can be altered in a number of ways. The generally used text formatting tags are:
1. Bold tag - <b>: This tag is used to display a text in bold face.
Syntax: <b>……</b>
Ex: <b>Bold</b>
2. Italic tag - <i>: This tag is used to emphasize a text by display in Italics format.
Syntax : < i>…..</i>
Ex: <i>Italics</i>
3. Underline tag - <u>: This tag is used to underline a text.
Syntax: <u>……</u>
Ex: <u>underline</u>
4. Truetype tag - <tt>: This tag is used to display a text in Teletype font. That is typewriter font style.
Syntax: <tt>…..</tt>
Ex: <tt>Teletype</tt>
5. Superscript tag - <sup>: This tag is used to display a text as a Superscripted. That is, the text will
be displayed above the normal text.
Syntax : < sup>……</sup>
Ex: a<sup>2</sup>+b<sup>2</sup>
6. Subscript tag - <sub>: This tag is used to display a text as a Subscripted. That is, the text will be
displayed below the normal text.
Syntax: <sub>…..</sub>
Ex: H<sub>2</sub>SO<sub>4</sub>
7. Big tag - <big>: This tag is used display a text solidly Bigger than the normal text.
Syntax: <big>…..</big>
Ex: <big>text</big>
8. Small tag - <small>: This tag is used to display a text solidly Smaller than the normal text.
Syntax: <small>…..</small>
Ex: <small>text</small>
9. Centre tag - <center>: This tag is to display a text in the Center of the webpage.
Syntax: <center>…..</center>
Ex: <center>Welcome</center>

Example:
<html> <body>
<b>This is bold text</b><br>
3
E-Commerce & Web Designing I BCOM – Semester – 3(2024)

<strong>This is strong text</strong><br>


<big>This is big text </big><br>
<em>This is emphasized text </em><br>
<i>This is italic text </i><br><br>
<small>This is small text </small><br>
This is<sub>subscript</sub><br>
This is<sup>superscript</sup>
</body></html>

Q. Write about PARAGRAPH TAGS


Paragraphs are also called as block-level elements. The paragraph tag is used to break the text
content into paragraphs. The <p> tag is used to define a paragraph. Each paragraph can be aligned to left
or right or center of the web page. The paragraphs are by default to left side. We can change the
alignment by using the align attribute.
Syntax: <p align=”left” | “center” | “right” | “justify”>…… </p>
Example: <p>Welcome to the web page</p>
<p align=center>Welcome to the web page</p>

Q. Write about HEADING TAGS


Heading tag is used to place heading in the documents. There are six levels of heading tags H1, H2, H3,
H4, H5 and H6. H1 is the biggest in heading and H6 is the smallest in heading. We can change the
alignment of the headings by using align attributes.
Syntax:
<h1 align=”left” | “center” | “right” | “justify”> . . . </h1>
<h2 align=”left” | “center” | “right” | “justify”>. . . </h2>
<h3 align=”left” | “center” | “right” | “justify”> . . . </h3>
<h4 align=”left” | “center” | “right” | “justify”> . . . </h4>
<h5 align=”left” | “center” | “right” | “justify”> . . . </h5>
<h6 align=”left” | “center” | “right” | “justify”> . . . </h6>

Example: <h1>HTML</h1>
<h21 align=“center”> HTML </h2>

Q. Write about HORIZONTAL RULE TAG


The <HR> tag is used to insert a horizontal line across the web
page or separate the html document sections. The horizontal line is
aligned to center by default. The <hr> tag is empty tag because it does
4
E-Commerce & Web Designing I BCOM – Semester – 3(2024)

not require end tag.


Syntax: <hr align=”left” | “center” | “right” width=n% size=n >

Here, align specifies the alignment of the horizontal rule, width specifies the width and size specifies
height of the horizontal rule,

Example: <hr align=”left” width=50% size=10 >

Q. Write about different types LISTS in HTML


In html, the text can be displayed in the form of list also. HTML supports 3 types of lists-ordered,
unordered and definition list.

1. Unordered lists:
An unordered list is a collection of related items that have no special order or sequence. It is created by
using <ul> tag. Each list item in the list starts with the list tag <li>. By default unordered list displays the
text with a bullet (or) Disc.

Syntax:
<ul type=” Disc” |”Circle” |”Square”>
……………
</ul>
Example:
5
E-Commerce & Web Designing I BCOM – Semester – 3(2024)

<html><body>
<p>BSC Courses
<ul type=disc>
<li>B .Com
<li>B.Sc
<li>B.C.A
<li>B B.A
</ul>
</p></body></html>

2. Ordered lists:
In ordered list, the list items are numbered instead of bulleted. The ordered list is created by using <ol>
tag. Each list item in the list starts with the list tag <li>. By default unordered list displays the text with a
number.

Syntax:
<ol type=”1” | ”A” |”I” |”a” |”i” start=”n”>
…………….
</ol>

Example:
<html>
<body>
<p>BSC Courses
<ol>
<li>MSCS
<li>MECS
<li>MPCS
</ol>
</p></body></html>

3. Definition lists:
HTML also supports a list style where the data is displayed with specific style. HTML and XHTML
supports a list style which is called definition lists where entries are listed like in a dictionary or
encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value
list.
The Definition list is created by using <dl> tag and it contains two parts - definition term <dt> and
definition data<dd>.
Syntax:
<dl>
<dt>……………. </dt>
<dd>………….…..</dd>
</dl>

6
E-Commerce & Web Designing I BCOM – Semester – 3(2024)

Example:
<html><body>
<p>Definition List
<dl>
<dt>HTML</dt>
<dd>HTML stands for Hyper Text Markup Language</dd>
</dl>
</p></body></html>

Q. Write about different types of HYPERLINKS


Hyperlinks (Links):
Web pages contain links that takes directly to other pages and even specific parts of a
given pages. These links are known as Hyperlinks.
An anchor tag <a>……. </a> is used to create the hyperlinks. A hyperlink (or link) is a word,
group of words, or image that you can click on to jump to another document.
When we move
the cursor over a link in a Web page, the arrow will turn into a little hand.
Syntax: <a href=”address "> Link text </a>
Where, href attribute specifies the destination of a link.
Example: <a href="http://www.google.co.in/">Visit Google</a>
<a href="sample.html"> Click here</a>

Types of hyperlinks:
1. Clickable Text Hyperlinks:
A Hyperlink is created to the selected text written between <a>….</a> tag. By clicking on the text, the
web page is connected to the given location dynamically.
Example:
<html><body>
<a href="sample.html>Click here</a>
</body></html>

2. Clickable Image Hyperlinks


The creation of a clickable images are the same as for the creating a clickable text hyperlink. The idea is
simply replace the clickable text with an image.
Example:
<html><body>
<a href=“sample.html"><img src="sample.jpg" width="65" height="38"></a></body></html>

3. Mailto hyperlinks
These are used to add Mailto hyperlink to a webpage. This provides a method to send you an e-mail by
opening a default mailbox with the given mail id in the sender URL.
Example:
<html><body>
<a href=mailto:nlucky676@gmail.com>Contact Me</a>
7
E-Commerce & Web Designing I BCOM – Semester – 3(2024)

</body></html>

Q. Explain about TABLES in HTML


In HTML, Tables allows us to organize information in a row and column format. In HTML, Tables
are created using the <table> tag. A table is divided into rows with the <tr> tag, and each row is divided
into data cells using the <td> tag. A data cell contain text, images, lists, paragraphs, forms, Horizontal
rules, tables, and so on

1. Creating Tables:
In HTML, tables are created using <table> …….. </table> tag. In the table, rows are specified by <tr>
(table row) tag and columns by <td> (table data) tag.

Syntax:
<table border=”n”
align=”center” | “left” | “right”
bordercolor=”#rrggbb”
width=”n” | “nn%”
background=”filename”
bgcolor=”#rrggbb”
valign=”top” | “bottom”
cellpadding=”n”
cellspacing=”n”>
…………….
</table>

Where,
1. Border: It specifies the thickness of the border.
2. Width: It specifies the width of the table.
3. Height: It specifies the height of the table.
4. Align: it is used to align a table in a web page.
5. Cellpadding: It specifies the amount of space between cell content and cell border.
6. Cellspacing: It specifies the space between the cells and b/w the cell border and table border.
7. Bordercolor: specifies the color of the border to be displayed
8. Align: This attribute can be used to align a table in a web page.
9. Bgcolor: This attribute specifies a background for the table.
10. Background: This attribute is used to display an image the background to be table.

2. Table row (<TR>):


The <tr> tag is used to create a table row. A table can contain no. of rows and each table row is a table
element itself
Syntax: <tr align=”center” | “left” | “right” >……....</tr>

3. Table cell (<TD>):

8
E-Commerce & Web Designing I BCOM – Semester – 3(2024)

The <td> and <th> tags are used to create a columns in a particular row. The <td> tag is used to create a
column in a particular row and display the data in normal font. The <th> tag is used to create a header
displayed with bold style and the text will be centered.
Syntax: <td align=”center” | “left” | “right” colspan=”n” rowspan=”n” > …………. </td>
Where, the rowspan attribute is used to span (merge) the cells vertically and colspan attribute is used to
span (merge) the cells horizontally.

Example: rowspan
<html><body>
<table border=1>
<tr> <th rowspan="3">Address</th>
<th>DNO</th>
<td>14/821</td>
</tr>
<tr> <th>Street</th>
<td>Opp. Post office</td>
</tr>
<tr> <th>Village</th>
<td>Kamalapuram</td>
</tr>
</table></body></html>

Example: Colspan
<html><body>
<table border=1>
<tr> <th colspan="3">Educational Qualifications</tr>
<th>Degree
<th>College/School
<th>Year
</tr>
<tr> <td>PG
<td>SVDC,Kadapa
<td>2013
</tr>
<tr> <td>Degree
<td>CSSR&SRRM DC,Kamalapuram
<td>2010
</tr>
</table></body></html>

VARIOUS HTML TAGS:


Q. Write about Anchor tag
The anchor tag <a>…..</a> is used to create hyperlinks in HTML.

9
E-Commerce & Web Designing I BCOM – Semester – 3(2024)

Syntax: <a href=address>……</a>


Where, href represents the destination address of the destination page.
If we want to open that link to another page then we can use target attribute of <a> tag.
Example: <a href=sample.html>click here</a>
<a href=sample.html target=“_blank”>click here</a>

Q. Write about Title tag


HTML <title> tag is used to provide a title name for the webpage. The HTML <title> tag placed inside the
<head> tag. The title of the page is displayed on the title bar of the browser.
Syntax: <title>……</title>
Example:
<html><head>
<title>First web page.</title>
</head>
<body>
<p>Welcome to my first web page.</p>
</body></html>

Q. WRITE ABOUT IMAGES & PICTURES


IMAGES:
In HTML, images are defined with the <img> tag. The img tag is empty, which means that it contains
attributes only and it has no closing tag. To display an image on a page, we use the src attribute. src
stands for “source”.
Syntax:
<img src = “url” border = “n” width = “n” height = “n” alt = “some_text” hspace = “n” vspace = “n”/>

Where
1) src - specifies the source or path of the image.
2) alt - defines an alternate text for the image,
3) width - specify the width of the image.
4) height - specify the height of the image.
5) Hspace(Horizontal Space): specifies the amount of space empty space on the left and right sides of the
image.
6) VSpace(vertical space): specifies the amount of empty space on the top and bottom of the image.

Example:
<html><body>
<img src="animal.jpg" height="180" width="300" alt="animal image">
</body></html>

Q. Write about Head section:

10
E-Commerce & Web Designing I BCOM – Semester – 3(2024)

The document head section shows the information of the document. It is represented by starting <head>
and ending </head> tag. The head section contains only one tag called <title> tag which is used to display
the title of the document in the browser window.

HTML head element contains following element definitions:


1. The document's title:
<title> - It is used to specify the title of a document
Syntax: <title>………..</title>
Example: <title> Html </title>
2.Style declarations:
<style> - It is used to specify style information for a document
Syntax: <style type=”text/css”>……….</script>
Example: <style type=”text/css”>
p{color:red;}
</style
3.Script functions:
<script> - It is used to specify client side scripts like JavaScript
Syntax: <script language=”javascript” type=”text/javascript” src=”URL”>…</script>
Example: <script language=”javascript” type=”text/javascript”>
document.writeln(“HELLO”);
</script>
4. Meta statements:
<meta> - It is used to provide metadata about an HTML document like page expiry, keywords,
page description etc.
Syntax: <Meta name=”string” content=”string”>
Example: <meta name=”keyword” content=”HTML,CSS,JavaScript,XML”>

5. Global links:
<link> - It is used to allow other documents to be linked to (or included in ) the current document
and an external resource
Syntax: <link rel=”type” href=”URL” type=”string”>
Example: <link rel=”stylesheet” href=”style.css” type=”text/css”>

Q. Write about Body section:


The body section is used to display main information (i.e., text or images) of the document. It is
represented by starting <body> and closing </body> tag. It contains all the HTML content like headings,
paragraphs, images, hyperlinks, tables etc.
Ex: heading tags (<h1>,<h2>,<h4>,<h4>,<h5>,<h6>), paragraph tags (<p>), table (<table>,<tr>,<td>) tags
etc

11
E-Commerce & Web Designing I BCOM – Semester – 3(2024)

Attributes of <body> tag with example:


1.BGCOLOR=”colorname” - Sets the background color (other color names: red, black, blue etc)
2.TEXT=”colorname” - Sets the body text color
3.LINK=”blue” - Sets the unvisited hypertext links
4.VLINK =”purple” - Sets the visited hypertext links
5.ALINK=”red” - Sets the active hypertext links
6.BACKGROUND - used to set an image as the background

Example:
<BODY BGCOLOR = "white" TEXT = "black" LINK = "blue" VLINK = "purple" ALINK = "red"
BACKGROUND=”c:\clouds.jpg>

Q. Write about COLORS in HTML


There are two ways of defining colors in html document. Colors are defined either by the color names or
by RGB Hexadecimal codes.
Methods:
There are following three different methods to set colors in your web page:
1. Color names - specify color names directly
2. Hex codes - A six-digit code representing the amount of red, green, and blue that makes up the
color.
3. Color decimal or percentage values - specified by using the rgb( ) property.

1. Color Names
We define color by specifying directly a color name to text. The 16 standard colors names
Black,Gray,Silver,White,Yellow,Lime,Aqua,Fuchsia,Red,Green,Blue,Purple,Maroon,Olive Navy, Teal
Example:
<html>
<body text="blue" bgcolor="green">
<h1>Colors</h1>
<p><font color=green>Green text</font></p>
</body>
</html>

2. Hex Codes
 HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green,
and Blue color values (RGB). A hexadecimal is a 6 digit representation of a color.
 Each hexadecimal code values are specified as 3 pairs of two-digit numbers, starting with a pound
or hash sign #. The combination of Red, Green, and Blue values from 0 to 255, gives more than 16
million different colors (256 x 256 x 256).
Example:
<html>
<body text="#0000FF" bgcolor="#00FF00">
<h1>Colors</h1>
<p><font color="#FFFFFF">Some colored text text</font></p>
12
E-Commerce & Web Designing I BCOM – Semester – 3(2024)

</body>
</html>

3. RGB Values
This color value is specified using the rgb( ) property. This property takes three values, one each for red,
green, and blue. The value can be an integer between 0 and 255 or a percentage.
Example:
<html>
<body text="rgb(0,0,255)" bgcolor="rgb(0,255,0)">
<h1>Colors</h1>
<p><font color="rgb(255,255,255)">Some colored text</font></p>
</body>
</html>

13
E-Commerce & Web Designing I BCOM – Semester – 3(2024)

History of HTML:

Difference between old HTML and HTML5:


Both HTML and HTML5 are hypertext markup languages, mainly used to develop web pages or
applications. HTML5 is the latest version of HTML and supports new markup language which supports
multimedia like audio and videos, new tags and elements as well as new APIs.
HTML:
 HTML does not provide native audio and video support.
 HTML only supports vector graphics if used in conjunction with different technologies like Flash,
VML, or Silverlight.
 HTML allows inline MathML and SVG in text with restricted use.
 HTML doesn’t allow users to draw shapes such as circles, triangles, and rectangles.
 HTML only uses browser cache and cookies to store data temporarily.
 JavaScript and browser interface run in the same thread.
 Longer character encoding declaration. Uses the ASCII character set.
 Compatible with almost all browsers.
 Built based on Standard Generalized Markup Language (SGML).
HTML5:
 HTML5 provides native audio and video support.
 HTML5 supports SVG (Scalable Vector Graphics), Canvas, and other virtual vector graphics.
 HTML5 allows inline MathML and SVG in text
 HTML5 allows users to draw shapes such as circles, triangles, and rectangles.
 HTML5 uses web SQL databases, local storage, and application cache for storing data temporarily.
 JavaScript and browser interface run in separate threads.
 Shorter character encoding declaration. Uses the UTF-8 character set.
 Only compatible with newer browsers, considering there are many new tags and elements which
only some browsers support.
 HTML5 has improved parsing rules providing enhanced compatibility.

CSS Preview:
 CSS Preview is a tool for previewing selected CSS selectors in a separate column inside the vscode
editor.
 The purpose of the tool is to give you a visual idea of your styling without leaving your editor.
 CSS Preview enables you to see a visual representation of your styled selectors without leaving
your editor.
 All the changes made in the CSS file editor are automatically reflected in the CSS preview, which is
based on the Google Chrome browser.
 To preview a CSS file in the CSS Preview, choose a CSS file in the Project Explorer view, open the
context menu, and select Preview or use the Ctrl + 4 hotkey.

The CSS preview has the following features:


 CSS preview shortcut

14
E-Commerce & Web Designing I BCOM – Semester – 3(2024)

 Clear selector representation, such as Class class1 and Adjacent div+p


 Support for the <base> element
 Support for <!doctype html>
 IE compatibility using <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
 Support for a multi-depth selector

Example:

15
E-Commerce & Web Designing I BCOM – Semester – 3(2024)

16

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy