Scribd
Upload
12 views

Module-2

Common HTML Tags

Uploaded by

Ramu Vankudoth
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
12 views

Module-2

Common HTML Tags

Uploaded by

Ramu Vankudoth
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 60

MALLA REDDY ENGINEERING COLLEGE

(An UGC Autonomous Institution) Main Campus

Maisammaguda, Dhulapally(Post via Kompally), Secunderabad –


500100

Department of Computer Science & Engineering –Data Science

Subject: Web Technologies

Dr.Ramu Vankudoth
Assistant Professor
Basic Concepts of 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.
• The <html> element is the root element of an HTML
page

<html> • The <head> element contains meta information about


<head> the HTML page
<title>Page • The <title> element specifies a title for the HTML page
Title</title>
(which is shown in the browser's title bar or in the
</head>
<body> page's tab)
• The <body> element defines the document's body, and
<h1>My First is a container for all the visible contents, such as
Heading</h1>
headings, paragraphs, images, hyperlinks, tables, lists,
<p>My first
paragraph.</p> etc.
• The <h1> element defines a large heading
</body> • The <p> element defines a paragraph
</html>
Unordered HTML List
• An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
• The list items will be marked with bullets (small black circles) by default:
<html>
<body>
<h2>An unordered list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:

<html> <html>
<body> <body>
<h2>An ordered list</h2> <h2>An ordered HTML list</h2>
<ol> <ol type=a>
<li>Coffee</li> <li>Coffee</li>
<li>Tea</li> <li>Tea</li>
<li>Milk</li> <li>Milk</li>
</ol> </ol>
</body> </body>
</html> </html>
Description Lists
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
Table
A Table is an arrangement of rows and columns. Anyone can create a table by
knowing the basics of HTML(HyperText Markup Language). A table is defined by
using the <table> tag in HTML.
Steps to Create a Table:
1.Create a <html> tag.
2.Create a table using the tags <table></table>.
3.Create rows in the table using <tr>This is the row tag</tr>.
4.Insert the data into rows using <td> Table Data</td> tags.
5.Close the table tag.
6.Close the HTML tag </html>.
We can also add the styling elements such as font color, background color, background
image etc. to the below Time table. The attributes that can be added to the table are:
1.align: Aligns left, right, and center.
2.border: Sets the border of a table(table border width)
3.bgcolor: Sets the background color for a cell or whole table.
4.colspan: Sets the number of columns to be spanned.
5.rowspan: Sets the number of columns to be spanned.
6. cellspacing: Creates space between the cells.
7.cellpadding: Creates space within the cells.
8.background: Sets the table background with an image.
9.width: Sets the width of the table.
10.height: Sets the height of the table.
Images
Images Syntax
• Images can<img>
The HTML improve
tagthe design
is used and thean
to embed appearance
image in aofweb
a web page.
page.
• Images are not technically inserted into a web page; images are linked to web
pages.
• The <img> tag creates a holding space for the referenced image.
• The <img> tag is empty, it contains attributes only, and does not have a
closing tag.
• The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image
Syntax of src
<img src="url" alt="alternatetext">

<html>
<body>

<h2>Alternative text</h2>

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">

</body>
</html>
alt Attribute:
The required alt attribute provides an alternate text for an image, if the user for
some reason cannot view it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).
The value of the alt attribute should describe the image:
<html>
<body>
<h2>Alternative text</h2>
<img src="C:/Users/HP/Desktop/KITSW/mrec.png" alt="mrec Photo" width="500"
height="600">
</body>
</html>
Background Images
To add a background image on an HTML element, use the HTML style attribute and the
CSS background-image property:
<html>
<head>
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
</head>
<body>
<h2>Background Image</h2>
</body>
</html>
Forms
An HTML form is used to collect user information. The user information is most often
sent to a server for processing.

The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio buttons, submit buttons, etc.
Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many


choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or more of many


choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button


<form> element
The HTML <form> element can contain one or more of the following form elements:
<input type="text" id="fname" name="fname"><br><br>
• <input>
<select id="cars" name="cars">
• <select> <textarea name="message" >
• <textarea>
<button type="button">Click Me!</button>
• <button>
<label for="cars">Choose a car:</label>
• <label>
• <fieldset>
• <legend>
• <datalist>
• <option>
• <optgroup> dropdon box
<input> element.
• One of the most used form elements is the <input> element.
• The <input> element can be displayed in several ways, depending on the type attribute.
<html>
<body>
<h2>The input Element</h2>
<form >
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<label> Element
• The <label> element defines a label for several form elements.
• The <label> element is useful for screen-reader users, because the screen-reader
will read out loud the label when the user focus on the input element.
• The <label> element also help users who have difficulty clicking on very small
regions (such as radio buttons or checkboxes) - because when the user clicks the
text within the <label> element, it toggles the radio button/checkbox.
• The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.
<html>
<body>
<h2>Grouping Form Data with Fieldset</h2>
<form>
<fieldset>
<legend><b>Information:</b></legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" value=""><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" value=""><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
<datalist> Element
• The <datalist> element specifies a list of pre-defined options for
an <input> element.
• Users will see a drop-down list of the pre-defined options as they input data.
• The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.
<html>
<body>
<h2>The datalist Element</h2>
<form>
<input list="browsers" name="CSEDS">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
</body>
</html>
<frame> Tag

• HTML Frames are used to divide the web browser window into multiple
sections where each section can be loaded separately.
• A frameset tag is the collection of frames in the browser window.

Creating Frames:
• Instead of using body tag, use frameset tag in HTML to use frames in web
browser.
• The frameset tag is used to define how to divide the browser.
• Each frame is indicated by frame tag and it basically defines which HTML
document shall open into the frame.
• To define the horizontal frames use row attribute of frame tag in HTML
document and to define the vertical frames use col attribute of frame tag in
<html>
<head>
<title>Example of HTML Frames using row attribute</title>
</head>
<frameset rows = "20%, 60%, 20%">
<frame name = "top" src = "C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src ="C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src ="C:/Users/dharam/Desktop/col_last.png" />
</frameset>
</html>
<html>
<head>
<title>Example of HTML Frames Using col Attribute</title>
</head>
<frameset cols = "30%, 40%, 30%">
<frame name = "top" src = "C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src ="C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src ="C:/Users/dharam/Desktop/col_last.png" />

</frameset>
</html>
Cascading Style Sheets

• CSS stands for Cascading Style Sheets


• CSS is the language we use to style an HTML document.
• CSS describes how HTML elements are to be displayed on screen, paper, or
in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all
at once
• External stylesheets are stored in CSS files
CSS Syntax

CSS rule consists of a selector and a declaration block.

• The selector points to the HTML element you want to style.


• The declaration block contains one or more declarations separated by
semicolons.
• Each declaration includes a CSS property name and a value, separated by a
colon.
• Multiple CSS declarations are separated with semicolons, and declaration blocks
<html>
property
<head>
<style> •p is a selector in CSS .
p{ •color is a property, and red is the property value
color: red; value •text-align is a property, and center is the property value
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
<html>
<head>
<style>
body {
background-color: blue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: Timenew Roman;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Malla Reddy Engineering College</h1>
<p>Department of Computer Science & Engineering - Data Science.</p>
</body>
</html>
<html>

<body>

<h1 style="background-color:DodgerBlue;"><marquee>Department of Computer Science & Engineering - Data


Science</marquee></h1>

<p style="background-color:Green;">

The department of Computer Science and Engineering (Data Science) is a specialized unit within an organization that
focuses on extracting valuable insights and knowledge from large and complex datasets. It involves the application of
statistical, mathematical, and computational techniques to analyze data and make data-driven decisions. Data science
plays a crucial role in understanding patterns, trends, and relationships in data, which can be used to optimize processes,
improve products/services, and gain a competitive advantage.

</p>

</body>
</html>
• The browser processing the HTML file needs to know what CSS code should be applied. There
are three ways to do this:
• Inline CSS is written inside an HTML tag with the style attribute. Inline CSS affects only the
element of the tag (and possible child elements depending on the property that’s applied).
• Internal CSS is written inside a <style> element, which goes inside the <head> of the HTML
document.
• External CSS is written in a separate file called an external stylesheet, and linked to the HTML
document with a <link> tag.
<p>With inline CSS, I can change the color of a word like <span style="color:
orange;">orange</span> in a paragraph.</p>
Internal CSS
<html>
<head>
<style>
body {background-color:
powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

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

</body>
</html>
External CSS

<html>
h1 {
<head>
color: blue;
<link rel="stylesheet" href="styles.css">
font-family: verdana;
</head>
font-size: 300%;
<body>
}
p {
<h1>This is a heading</h1>
color: red;
<p>This is a paragraph.</p>
font-family: courier;
font-size: 160%;
</body>
}
</html>
Introduction to XML

• XML stands for eXtensible Markup Language


• XML is a markup language much like HTML
• XML is designed to carry data, not to display data.
• XML tags are not predefined. You must define your own tags
• XML was designed to store and transport data, with focus on what data is.
• HTML is about displaying information, while XML is about carrying information.
• XML document saved with .xml extension.
• XML was created to structure, store and transport information.
• XML Basis:-
• All XML Elements must have a close tag.
• The XML tags are case sensitive i.e. <root> and <Root> both tags are
different.
• All XML elements must be properly nested.
• XML Document must have Root Element.
• XML Attribute values must be quoted.
• XML Document form a tree structure.
element-declarations

Structure of XML Document

XML Declaration – It is define the XML Version


<?xml version="1.0" encoding="UTF-8"?>
<website>
<company category="mrec">
<title>Machine
learning</title> Element-declarations -This element

<author>Dr Ramu V</author> is the parent of all other elements

<year>2024</year>
</company>
</website>
Defining XML tags
Start Tag

The beginning of every non-empty XML element is marked by a start-tag.


Following is an example of start-tag − <address>
End Tag
Every element that has a start tag should end with an end-tag. Following is an
example of end-tag −</address>

XML tags are case-sensitive. Following line of code is an example of wrong


syntax <address>, </Address>, because of the case difference in two tags,
which is treated as error syntax in XML.

<address>This is wrong syntax</Address>


Empty Tag
• The text that appears between start-tag and end-tag is called content.
• An element which has no content is termed as empty.
• An empty element can be represented in two ways as follows −
• <hr></hr>
• <hr />
XML Attribute and Values

• XML elements can have attributes.


• By the use of attributes we can add the information about the element.
• XML attributes enhance the properties of the elements.
• Let us take an example of a book publisher. Here, book is the element and
publisher is the attribute. Tata McGraw Hill is Value
<person gender= "male">
<book publisher="Tata McGraw Hill"></book> <firstname>Dr.Ramu</firstna
me>
<lastname>Vankudoth</lastna
me>
</person>
Entity References:- There are 5 predefined entity references in XML,
• & lt -------- <
• & gt -------- >
• & amp -------- &
• & apos --------‘
• & quot --------“
Comments in XML:-
The syntax for writing comments in XML is similar to that of HTML.
<!- - This is a comment - - >
Document Type Definition

• XML is well formed document so, there are two ways to check the document
as valid XML doc or not.
1. XML DTD
2. XML Schema
XML DTD: - DTD stands for Document Type Definition. It defines the legal
building blocks of an XML document.
• It defines the document structure with a list of legal elements and attributes.
DTD Elements:- Elements are declared with an ELEMENT declaration.
Syntax: <! ELEMENT Element-Name(Element-Content)/Empty>
Example: <! ELEMENT Book(#PCDATA)>
• DTD Attributes: Attributes are declared with an ATTLIST declaration.
Syntax:
<! ATTLIST Element-Name Attributename Attributetype AttributeValue>

Example: <! ATTLIST Book Subject CDATA “Computers”>

• There are two types of DTD


1. Internal DTD
2. External DTD
Internal DTD: If the DTD is declared inside the XML document is called Internal DTD.
Declaration of Internal DTD:-
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE customers[ <!ELEMENT customers (customer+)>
<!ELEMENT customer (name, email, phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
]>
<customers>
<customer>
<name>Satyam Nayak</name>
<email>[email protected]</email>
<phone>112-123-1234</phone>
</customer>
<customer>
<name>Sonu N</name>
<email>[email protected]</email>
<phone>112-455-9969</phone>
</customer>
</customers>
External DTD

• In External DTD, Elements are declared outside the XML document.


• They are accessed by specifying the SYSTEM attributes.
Syntax: <!DOCTYPE Root-element SYSTEM “dtd filename”>
External.xml
File.dtd
<?xml version="1.0" encoding="UTF-
8"?> <! DOCTYPE Mobile[
<!DOCTYPE Mobile SYSTEM "ds.dtd"> <! ELEMENT Mobile(Price, Year,
Model)>
<Mobile> <! ELEMENT Price(#PCDATA)>
<Price>25000</Price> <! ELEMENT Year(#PCDATA)>
<! ELEMENT Model(#PCDATA)>
<Year>2024</Year>
]>
<Model>Redmi</Model>
XML Schema or XSD
• XML Schema is an XML based alternate to DTD.
• XML Schema describe the structure of an XML document, so by using XML
Schema we can validate the XML document.
• It is also referred as XML Schema Definition (XSD).
• The purpose of an XML Schema is to define the legal building blocks of an
XML document.
• It defines elements that can appear in a document.
• It defines attributes that can appear in a document.
• It defines which elements are child elements.
• It defines the order of child elements and number of child element.
• It defines datatypes for elements and attributes.
• It defines default and fixed values for elements and attributes.
Syntax:
• To define XML Schema we can follow below Syntax:
<? xml version=“1.0” ?>
<xs:schema>
---------
---------
</xs:schema>
• The major Advantages of XML Schema is it is more powerful than DTD. Because XML
Schema follows the syntax rules of XML. So no need to learn new syntaxes.
• XML Schema Elements: Elements are nothing but the basic building blocks of XML
document.
• Mainly they are two types of element.
1. Simple type
2. Complex type
1. Simple type: Simple type can contain some content without child elements and
attributes.
Syntax: <xs:element name="element_name" type="data_type"/>

<xs:element name="name" type="xs:string"/>


<xs:element name="rollno" type="xs:integer"/>
• Complex type: Complex type can contain child elements and attributes.

Syntax:

<xs:element name="parent_element_name">
<xs:complexType>
<xs:sequence>
<xs:element name="child_element_name" type="data_type"/>
<xs:element name="child_element_name" type="data_type"/>
</xs:sequence>
<xs:element name="student" >
</xs:complexType> <xs:complexType>
<xs:sequence>
</xs:element> <xs:element name="name" type="xs:string"/>
<xs:element name="rollno" type="xs:integer"/>
</xs:sequence>
</xs:complexType>
</xs:element>
What is the Document Object Model (DOM)?

• The Document Object Model (DOM) is like a blueprint that represents the
structure of a web page.
• It helps developers access and change different parts of the page, such as
headings, paragraphs, images, and forms.
• Think of the DOM as a way to organize and control all the elements that make
up a web page.
• In the DOM, every element on a web page, like a heading or a paragraph, is
treated as an object. Objects are like little building blocks that we can
manipulate and work with easily.
• By using objects, the DOM provides a consistent and organized way for
Document Object Model

• DOM stands for Document Object Model.


• It represents a XML document in an object-oriented tree structure.
• The XML DOM is a standard object model for XML
• It is a standard programming interface for XML
• The XML DOM defines a standard way for accessing manipulating XML Document.
• The XML DOM provides an API that allows a developer to add, edit, move or remove
nodes in the tree at any point in order to create an application.
• When a webpage is loaded, the browser create a DOM of the page.
• Programming language like Javascript can use this DOM to access/modify the
elements.
• According to the DOM, everything in an XML document is a node.
• The DOM Says:
• The entire document is a document node.
• Every XML element is an element node
• The text in the XML elements are text nodes.
• Every attribute is an attribute node
<?xml version="1.0" encoding="UTF-
• Comments are comment node. 8"?>
<Mobile>
<Price>25000</Price>
<Year>2024</Year>
<Model>Redmi</Model>
</Mobile>
• The Document Object Model (DOM) plays a crucial role in web development by
allowing developers to interact with web pages and make them dynamic.
• We will explain the DOM in simple terms, discussing how it represents web
page structure, why it uses objects, how it translates HTML into objects, and
why it’s important for web development.
<html>
<body>
<h1 id="demo">This is a Heading</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'Hello World!'">Click Me!
</button>
</body>
</html>
XML Parsers
• An XML parser is a software library or package that provides interfaces for
client applications to work with an XML document.
• The XML Parser is designed to read the XML and create a way for programs to
use XML.
• XML parser validates the document and check that the document is well
formatted.

These are the two main types of XML Parsers:


1. DOM
2. SAX
DOM (Document Object Model)
• A DOM document is an object which contains all the information of an XML document.
• It is composed like a tree structure.
• The DOM Parser implements a DOM API. This API is very simple to use.
Features of DOM Parser
A DOM Parser creates an internal structure in memory which is a DOM document object and the client
applications get information of the original XML document by invoking methods on this document object. DOM
Parser has a tree based structure.
Advantages
1. It supports both read and write operations and the API is very simple to use.
2. It is preferred when random access to widely separated parts of a document is required.
Disadvantages
3. It is memory inefficient.
4. It is comparatively slower than other parsers.
SAX (Simple API for XML)
A SAX Parser implements SAX API. This API is an event based API and less intuitive.
SAX Parser uses three methods startElement() , endElement() , characters().
Features of SAX Parser
• It does not create any internal structure.
• Clients does not know what methods to call, they just overrides the methods of the API and
place his own code inside method.
• It is an event based parser, it works like an event handler in Java.
Advantages
1) It is simple and memory efficient.
2) It is very fast and works for huge documents.
Disadvantages
1) It is event-based so its API is less intuitive.
2) Clients never know the full information because the data is broken into pieces.
• It is necessary to register the handlers to parse the document for handing
different events.
• SAX Parser uses three methods startElement() , endElement() ,
characters().
• startElement(): Is used to identify the element, start element is identified.
• endElement(): To stop the Supermarket tag in the example.
• character(): Is used to identify the character in the node.

• Next section shows an implementation of parsing using SAX with the java.
• Here we have XML file new.xml to parse and to create a list of supermarket
object.
• The xml file is the same file used in DOM Parser new.xml and next step

You might also like