Assignment
Name: Salva Lakshmi Pavan
Reg no: 2021BCSE07AED392
Class: Data analytics
Activity 1
Structure of Html
The Document of HTML is structured by creating nested tags set. Each nested tag is within<> angle
brackets and performs as a object for information or remaining tags.
<!DOCTYPE html>
<html>
<head>
<title>DOCU</title>
</head>
<body>
</body>
</html>
Overview
Element in html is created using syntax that has tag of start and tag of end. Two display values are
there in html block and inline elements.
Elements of Block in html
Html has block elements that start from a fresh line and margins are formed during the process and
by the browsers after creating element.
The Block element will take full width that is present.
P and div tags are the most used tags in elements of block.
P tag tells about a particular section in the document.
Div tag tells of a section or division in the document.
Tags in the block level elements
<article> Independent and self-contained content
<fieldset> Grouping the same or related elements.
<aside> the info is placed at sidebar in the document.
<section> for adding a new section
<table> for adding a new table
Tags in the Inline Elements
<input> for adding input text by the user
<span> highlighting the selected text
<textarea> to input data in multiline form
<b> for making the text bold
<img> to link addresses of images
Activity 2
Multimedia Tags
Multimedia tags are created to play audio, mp4 and remaining modes of multimedia
programs into webpages.
<video> this tag is used to add or play video.
Control attribute adds video controls which consists of play, pause and volume.
The information between <video> and </video> tags will only br shown in websites that
does not support <video> element.
<audio> this tag is used to add mp3 files.
Control attribute is used to add audio controls which consists of play, pause and volume.
The information between the <audio> and </audio> tags will only be shown in websites that
does not support the audio element.
Sidebars
Sidebars are graphical control element that shows numerous forms of content to the either side of
an application window. Different types :
• Folder Sidebar Block
• RSS Feed Block
• Sidebar Contact Info Block
• Sidebar Text With Photo Block
Navigation Bars
Navigation bar is a part of GUI formed to help users to access information or
content. Navigation bars are there in operating systems, file browsers and web
browsers.
There are different types of navigation bars : vertical navigation bar and
horizontal navigation bar
Vertical navigation bar: By styling <a> elements inside the list
Li b {
Display: block;
Width: 87px;
}
Horizontal navigation bar: Is to specify the <li> elements as inline.
Li {
Display: inline;
}
Activity 3
CSS Introduction
It is a designed language used to breakdown the process of creating webpages
to present. CSS gives us to add styles to documents. It states how a webpage
should be created or presented. It describes colors and spacing. You can make
any kind of website in your own view.
Tags are used in html and rulesets in CSS. CSS styles are added to html element
with the help of selectors. CSS is easy to understand.
Inline CSS
The method to define element with insert style sheets in html document. An
Inline CSS uses attribute of style of an element of html.
Used to apply a different style to a solitary html element.
Internal CSS
This CSS requires us to apply <style> tag in the <head> tag section of the html
document.
This is an easy method of styling a single page of a html document. This style is
used for saving time.
Steps:
• Create <head> at the beginning of the document.
• Write the code right after the <head> tag.
• Write CSS rules on a fresh line.
• HTML file is ready.
External CSS
This is the most easiest way for styling a bigger website. By changing one part
of the CSS file entire website can be modified at once.
Html files will have a neat structure and also small in quantity.
Steps:
• Create a .CSS file with text modifier and add style rules.
• Add a reference to the html file.
CSS selectors
This selects the html file for styling uses. There are many different selectors
• Element Selector
• Id selector
• Class selector
• Universal selector
Element Selector:
This selector chooses html elements on the basis of name or tag
Syntax:
H2{
Color: pink;
Font-size: 4rem;
}
P{
Color: red;
Background color: grey;
}
Id selector:
This selector uses id attribute of the document to choose a particular element.
Syntax:
#div-container{
Color: white;
Background-color: red;
}
Class selector:
Selects html elements on the basis of a special class attribute.
Syntax:
.paragraph-class{
Color: red;
Font-family: monospace;
Background-color: white;
}
Universal selector:
Used to choose or select elements of all in the document. It also includes
outside elements which are under different element.
Syntax:
*{
Color: red;
Background-color: white;
}
