Module-2
Module-2
Dr.Ramu Vankudoth
Assistant Professor
Basic Concepts of HTML
<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>
</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
• 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
<body>
<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
<year>2024</year>
</company>
</website>
Defining XML tags
Start Tag
• 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>
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
• 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