CS2003 DATABASE
MANAGEMENT SYSTEMS
LAB 1
AUGUST 2, 2023 – BATCH A
AUGUST 4, 2023 – BATCH B
CONTENTS
▪ The aim is to learn to develop a full-fledged
application in client-server environment
▪ To be able to work on the back end and front end
▪ Tools to be learned:
▪ Front-end design → HTML, CSS, ReactJS
▪ Server platform → Apache
▪ Dynamic programming → PHP, Node.JS
▪ Database → MySQL
8/4/2023 2
HOW THE WEB WORKS
▪ Looking at a website, it is most likely that your browser will be
receiving HTML and CSS from the web server that hosts the site
▪ The web browser interprets the HTML and CSS code to create
the page including images/audio/video/ animations that you see
▪ Small websites - often written just using HTML and CSS
▪ Larger websites - updated regularly and use a content
management system (CMS), or blogging tools - use more
complex technologies on the web server, which are actually
used to produce HTML and CSS to sent to the browser.
▪ More complex sites use a database to store data, and
programming languages such as PHP, ASP.Net, Java, or Ruby on
the web server 8/4/2023 3
HOW THE WEB WORKS
What happens when a web user in England wants
to view the website of the Louvre art gallery in
France which is located at www.louvre.fr ?
Firstly, the browser in Cambridge contacts a DNS
server in London.
The DNS server then tells the browser the location of
the web server hosting the site in Paris. 8/4/2023 4
8/4/2023 5
HOW THE WEB WORKS
8/4/2023 6
HYPER TEXT MARKUP LANGUAGE
▪ A markup language with a set of markup tags
▪ Rich language that describes text documents, tables of
data, forms for sending information to a server, images
and multimedia, interactive games, and ….
▪ Used mostly in World Wide Web to describe web pages
▪ A language consisting of text content surrounded by
markings that specify the meaning of the content
▪ HTML files - text files with additional formatting markup
▪ Sequences of characters tell web browsers what parts
of text should be bold, where the headings are, or
where tables, table rows, and table cells start and end.
8/4/2023 7
HTML
▪ HTML -displayed by a visual web browser, a
browser that reads the text of the page to the user.
▪ What do you need?
▪ An editor (to write HTML pages); and
▪ Plain text editors: Notepad/Notepad++ for Microsoft®
Windows, TextEdit for Mac, or Vim, Emacs for Linux…
▪ Commercial HTML editors: Adobe Contribute CS5 and
Dreamweaver CS5 (both Win/Mac), and Microsoft's
Visual Web Developer (Win)…
▪ A web browser (to preview HTML pages)
▪ Microsoft Internet Explorer, Google Chrome, Mozilla
Firefox, Safari, and Opera… 8/4/2023 8
HOW HTML IS DISPLAYED
http:// Use HTTP, the Hypertext Transfer Protocol.
www.google.com Contact a computer over the network with the
hostname of www.google.com.
/ Anything after the hostname is regarded as a
document path. In this ex., the document path is /.
8/4/2023 9
HTML TAGS
▪ HTML markup tags - HTML tags.
▪ Keywords surrounded by angle brackets like
<html>.
▪ HTML tags normally come in pairs like <b> and
</b>.
▪ The first tag in a pair is the start tag, the second tag
is the end tag.
▪ Start and end tags are also called opening tags and
closing tags.
8/4/2023 10
HEAD AND BODY
▪ An HTML document is divided into two basic
sections
▪ head: contains title and meta data of a web document.
▪ body: contains the information that we want to display
on a web page.
8/4/2023 11
CONTD…
8/4/2023 12
EXAMPLE
<html> Output:
<head><title>
Title of the page
</title></head>
<body>
Content of the page.
</body>
</html>
When you save an HTML file, you can use
either the .htm or the .html file extension. RUN
8/4/2023 13
BASIC TAGS
Tag Description
<!DOCTYPE> Defines the HTML document type.
<html> Defines the HTML document.
<head> Defines information about the
document.
<title> Defines title of the HTML document.
<style> Embed style rules in the document.
<body> Defines the document’s body.
<h1> to <h6> Defines HTML headings.
<p> Defines a paragraph
<br > Inserts a single line break
<hr > Defines a horizontal line
<!--...--> Defines a comment
HTML tags are not case sensitive:
<P> means the same as <p>. 8/4/2023 14
HTML ELEMENT
▪ Starts with a start tag / opening tag and ends
with an end tag / closing tag.
▪ The element content is everything between the
start and the end tag.
▪ Some HTML elements have empty content.
▪ Empty elements are closed in the start tag.
Start tag * Element content End tag *
<p> This is a paragraph </p>
This is a link (used to create
<a href="default.htm"> </a>
a link to another document)
<br />
8/4/2023 15
HTML ATTRIBUTES
▪ Most HTML elements can have attributes.
▪ provide additional information about an element.
▪ always specified in the start tag.
▪ come in name/value pairs like name="value"
Attribute values should always
be enclosed in quotes.
Attribute names and attribute
values are case-insensitive.
<html><body> HTML links - <a> tag
<a href="http://www.iiitdmj.ac.in"> The link address is specified
visit my institute</a> in the href attribute.
</body> </html>
8/4/2023 16
STANDARD ATTRIBUTES
The attributes listed below are standard:
Attribute Value Description
class classname Specifies a class name for an element.
id id Specifies a unique id for an element.
style Style Specifies an inline style for an element.
Specifies extra information about an
title text
element.
8/4/2023 17
HTML ELEMENTS
AND
THEIR ATTRIBUTES
<!DOCTYPE>
▪ It should be the very first thing in an HTML
document, before the <html> tag.
▪ It is not an HTML tag; it is an instruction to the
web browser about what version of the
markup language the page is written in.
▪ It refers to a Document Type Definition
(DTD). The DTD specifies the rules for the
markup language, so that the browsers
render the content correctly.
8/4/2023 19
EXAMPLE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML
4.01//EN” "http://www.w3.org/TR/html4/strict.dtd">
<html>
Output:
<head><title>
Title of the page
</title></head>
<body>
Content of the page.
</body>
</html>
8/4/2023 20
<HTML>
▪ The <html> element is also known as the root
element.
▪ The <html> tag tells the browser that this is
an HTML document.
▪ The <html> tag is the container for all other
HTML elements.
<html>
<head>
<title>
Title of the page
</title>
</head>
<body>
Content of the page.
</body> 8/4/2023 21
</html>
<HEAD>
▪ All data in the header section of an HTML
document is considered “meta-data”.
▪ The information in this section is not normally
displayed directly.
▪ Instead, elements, such as style, affect the
appearance of other elements in the
document.
8/4/2023 22
<BODY>
▪ Used to display the contents of an html
document.
Attribute Value Description
alink colorvalue Specifies the color of an active link in a document
background URL Specifies a background image for a document
bgcolor colorvalue Specifies the background color of a document
link colorvalue Specifies the default color of unvisited links in a
document
text colorvalue Specifies the color of the text in a document
vlink colorvalue Specifies the color of the visited links in a
document
8/4/2023 23
COLOR VALUES
▪ Defined using a HEX notation for the combination
of RGB values.
▪ Value ranges from 0 (HEX: 00) to 255 (HEX: FF).
▪ HEX values are specified as 3 pairs of two-digit
numbers, starting with a # sign.
▪ A color is most often specified by:
▪ a HEX value - like "#ff0000"
▪ an RGB value - like "rgb(255,0,0)"
▪ a color name - like "red”
8/4/2023 24
EXAMPLE (COLOR)
<html>
<head>
<title>
Title of the page
</title>
</head>
<body bgcolor = “#b0c4de”; text = “red”>
<h1>Content of the page.<h1>
</body>
</html> RUN
8/4/2023 25
EXAMPLE (STYLE)
<html>
<head>
<title>
Title of the page
</title>
<style type="text/css">
body{background-color:#b0c4de; color:red;}
</style>
</head>
<body>
<h1>Content of the page.</h1>
<h2>are mine.</h2> </body> RUN
8/4/2023 26
</html>
EXAMPLE (HEADING)
<html>
<body>
<h1>My first HTML document at level 1.</h1>
<h2>My first HTML document at level 2.</h2>
<h3>My first HTML document at level 3.</h3>
<h4>My first HTML document at level 4.</h4>
<h5>My first HTML document at level 5.</h5>
<h6>My first HTML document at level 6.</h6>
</body>
</html>
RUN
8/4/2023 27
EXAMPLE (<P>)
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>yet another paragraph.</p>
</body>
</html>
By default, a browser will show each paragraph on a new
line with some space between it and any subsequent
paragraphs. RUN 8/4/2023 28
EXAMPLE (<BR />)
<html>
<body>
<p> Output:
To break<br />lines
<br />in a<br />
paragraph,<br />
use the br element.
</p>
</body>
</html>
RUN
8/4/2023 29
EXAMPLE (HR)
<html>
<head><title>
HTML Document Output:
</title></head>
<body>
<h2><p> Hello</p></h2>
<hr>
<p> Welcome<br/><br/>
To my HTM document.</p>
</body>
</html>
RUN
8/4/2023 30
WHITE SPACE COLLAPSING
▪ When the browser comes across two or more spaces
next to each other, it only displays one space.
▪ Similarly, if it comes across a line break, it treats that
as a single space too.
<p>The moon is drifting away from Earth.</p>
<p>The moon is drifting away from
Earth.</p>
<p>The moon is
drifting away from Earth.</p>
▪ Web page authors often add extra spaces or start
some elements on new lines – to make code easier to
read 31 8/4/2023
<A>
▪ <a> defines an anchor.
▪ Used to create a link to another document.
▪ Usually referred as a link or a hyperlink.
<a href="URL location"
target="target">Alias</a>;
Attribute Value Description
href URL Specifies the URL of the page the link goes to
Target _blank Define, where the object being linked is to be
_parent opened.
_self
_top
framename
8/4/2023 32
HYPERLINKS
<html>
<body>
<h1>This is my Main Page</h1>
<p>This is some text.</p>
<p><a href= page1.htm target =_blank>
This is a link to Page 1</a></p>
<p><a href= page2.htm target =_top>
This is a link to Page 2</a></p>
</body>
</html>
RUN
8/4/2023 33
EXAMPLE
<html>
<body alink = blue bgcolor = plum
text= #ffffff vlink = rgb(255,0,0)>
<p>This is some text.</p>
<p><a href="page1.htm">
This is a link to Page 1</a></p>
<p><a href="page2.htm">
This is a link to Page 2</a></p>
</body>
</html> RUN
8/4/2023 34
FORMATTING TAG
Tags Description Tags Description
Renders as strong
<b> Defines bold text <strong>
(highlighted) text
<big> Defines big text <dfn> Defines a definition term
Defines a piece of
<center> Defines centered text <code>
computer code
Defines font, color, and Defines sample output
<font> <samp>
size for text from a computer program
<i> Defines italic text <kbd> Defines keyboard input
Defines a variable part of
<small> Defines smaller text <var>
a text
<u> Defines underlined text <cite> Defines a citation
Renders as emphasized
<var> Defines a variable <em>
text
<sup> superscript <sub> subscript 8/4/2023 35
FORMATTING TAG - EXAMPLE
<html><body>
<b> Bold </b> <br />
<center> center alignment </center> <br />
<font size = 5 color = red type= "times new roman" > test font color type and
size </font> <br />
<i> itallic font </i> <br />
<small> small text</small> <br />
<u> underline text </u> <br />
<em>Emphasized text</em><br />
<strong>Strong text</strong><br />
<dfn>Definition term</dfn><br />
<code>A piece of 1<sup>st</sup>computer code</code><br />
<samp>Sample output from a computer program</samp><br />
<kbd>Keyboard input</kbd><br />
<var>Variable</var><br /> RUN
<cite>Citation</cite><br /> 8/4/2023 36
</body> </html>
<IMG>
▪ Used to put an image in the html document.
Attribute Value Description
alt text Specifies an alternate text for an image.
src URL Specifies the URL of an image
align Top , bottom, Specifies the alignment of an image.
middle, left,
right
border Pixels Specifies the width of the border around an image
height Pixels % Specifies the height of an image
hspace Pixels Specifies the whitespace on left and right side of an
image.
vspace Pixels Specifies the whitespace on top and bottom of an
image
width Pixels % Specifies the width of an image
8/4/2023 37
EXAMPLE (<IMG>)
<html><body>
Output:
<img src = 2.jpg
alt = “smiley emoji"
width = 200
height = 150
border = 5
hspace = 100
vspace = 100>
<p align = Middle>
<h3>Smile</h3></p>
</body></html>
RUN 8/4/2023 38
<MARQUEE>
▪ To create scrollable text or images within a web
page from either left to right or vice versa, or top
to bottom or vice versa.
8/4/2023 39
<MARQUEE>
<marquee width="60%" direction="up" height="100px">
A sample scrolling text that has scrolls in the upper direction.
</marquee>
<marquee width="60%" direction="down" height="100px">
A sample scrolling text that has scrolls texts to down.
</marquee>
<marquee width="60%" direction="right" height="100px">
A sample scrolling text that has scrolls texts to right.
</marquee>
<marquee width="60%" direction="left" height="100px">
A sample scrolling text that has scrolls texts to left.
</marquee>
8/4/2023 40
TABLES
▪ The <table> tag defines an HTML table.
▪ An HTML table consists of the <table> element
and one or more <tr>, <th>, and <td> elements.
<TABLE> Table tag
<CAPTION> optional table title
<TR> table row
<TH> table column header
<TD> table data element
8/4/2023 41
TABLE EXAMPLE
<TABLE> <TABLE BORDER=1>
<CAPTION>Table Caption</CAPTION>
<TR>
<TH>Heading1</TH>
<TH>Heading2</TH>
</TR>
<TR>
<TD>Row1 Col1 Data</TD>
<TD>Row1 Col2 Data</TD>
</TR>
<TR>
<TD>Row2 Col1 Data</TD>
<TD>Row2 Col2 Data</TD>
</TR>
<TR><TD>Row3 Col1 Data</TD>
<TD>Row3 Col2 Data</TD> Run
</TR> </TABLE> 8/4/2023 42
TABLE ATTRIBUTE
Attribute Value Description
align Left, center, right Specifies the alignment of a table according to surrounding
text
bgcolor rgb(x,x,x), #xxxxxx, Specifies the background color for a table
colorname
border Pixels Specifies the width of the borders around a table
cellpadding Pixels Specifies the space between the cell wall and the cell
content
cellspacing Pixels Specifies the space between cells
frame Void, above, below, Specifies which parts of the outside borders that should be
hsides visible
lhs,rhs, vsides, box,
border
rules None, groups, rows, cols, Specifies which parts of the inside borders that should be
all visible
summary text Specifies a summary of the content of a table
width pixels% Specifies the width of a table
8/4/2023 43
TABLE EXAMPLE
<body text = red>
<TABLE BORDER=10 bgcolor= #0025ff cellpadding = 1
cellspacing = 1 width = 30% height = 10%>
<CAPTION>Table Caption</CAPTION>
<TR><TH>Heading1</TH>
<TH>Heading2</TH></TR>
<TR><TD>Row1 Col1 Data</TD>
<TD>Row1 Col2 Data</TD></TR>
<TR><TD>Row2 Col1 Data</TD>
<TD>Row2 Col2 Data</TD></TR>
<TR><TD>Row3 Col1 Data</TD>
<TD>Row3 Col2 Data</TD></TR>
</TABLE> </body> RUN
8/4/2023 44
LISTS
Lists Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dir> Defines a directory list
<dl> Defines a definition list
<dt> Defines an item in a definition list
<dd> Defines a description of an item in a definition
list
<menu> Defines a menu list
8/4/2023 45
<UL>
Attribute Value Description
compact Compact Specifies that the list should render
smaller than normal.
type disc, square, circle Specifies the kind of marker to use in the
list
<html><body>
<ul compact = compact; type = disc>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body></html> Run
8/4/2023 46
<OL>
Attribute Value Description
compact compact Specifies that the list should render smaller than
normal
start number Specifies the start value of an ordered list
type 1, A, a, I, i Specifies the kind of marker to use in the list
<html><body>
<ol compact = compact; type = A; start = 2>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> RUN
</body></html> 8/4/2023 47
<DL>
▪ The <dl> tag is used in conjunction
with <dt> (defines the item in the list)
and <dd> (describes the item in the list).
▪ Example:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl> RUN
8/4/2023 48
<OBJECT>
▪ The <object> tag defines an embedded object
within an HTML document.
▪ Use to embed multimedia (audio, video, Java
applets, ActiveX, PDF, and Flash) in web pages.
▪ You can also use the <object> tag to embed
another webpage into your HTML document.
<object width="400" height="400" data= “1.pdf”>
</object>
<DIV>
▪ The <div> tag defines a division or a section in
an HTML document.
▪ The <div> tag is used to group block elements
to format them with styles.
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
REFERENCE
▪ W3schools.com
▪ Jon Duckett, HTML & CSS: Design and Build
Websites, John Wiley & Sons, Inc. 2011.
8/4/2023 51
ASSIGNMENT 1
▪ Prepare a web page as per the given sample to
proceed to next lab sessions:
8/4/2023 52
