Name Of Student: Varada K.

Datar Roll No: 45013

Division: A Exam Seat No: B150318644

Assignment 1.1
Title: HTML Basics
The DOCTYPE declaration in html5 is very simple "<! DOCTYPE html>Problem Statement:
Using HTML5 layout tags develop informative page with sections which include various images,
links to other pages for navigation, make use of all possible formatting (for example font, color
etc.).
Pre-requisites: Basic understanding of HTML and its tags.
Experimental setup: Windows 10 OS, Visual Studio Code
Date of Completion: 15/05/2021
Assessment Grade / Marks:
Assessor’s Sign with Date:

Theory:
• HTML5 –
A hypertext markup language (HTML) is the primary language for developing web pages.
HTML5 is a new version of HTML with new functionalities with markup language with
Internet technologies. In HTML5, we have many new tags, elements, and some tags that have
been removed/modified, so only some browsers are fully compatible with HTML5. A new
browser supports this. With invent of features in HTML5 it is not only possible to create better
static websites but we can also create dynamic websites. Features such as audio, video,
animations etc can be added to the webpage now without the use of JS. Along with this it is
possible to make our website responsive without the use of third party plugs. It is the need of
an hour as equal number of users are assessing the website from desktop as that are from the
smartphones.
• layout tags –

HTML has several semantic elements that define the different parts of a web page:
HTML5 Semantic Elements
<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
 <section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element

• page with sections –

HTML <section> Element - The <section> element defines a section in a document.
According to W3C's HTML documentation: "A section is a thematic grouping of content,
typically with a heading." A web page could normally be split into sections for introduction,
content, and contact information.
• Formatting - HTML contains several elements for defining text with a special meaning.
Formatting elements were designed to display special types of text:
Tag Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines a part of text in an alternate voice or mood

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

Input: index.html file

Output:

Inference: Thus in this assignment we learnt concepts of HTML5 and implemented

them successfully.
 Assignment 1.2
Title: HTML with CSS
Problem Statement: Apply CSS properties Border, margins, Padding, Navigation, dropdown
list to page created in first assignment.
Pre-requisites: Basic understanding of HTML tags and CSS. Experimental
setup: Windows 10 OS, Visual Studio Code
Theory:
• CSS Properties –
CSS is the language we use to style an HTML document. CSS describes how
HTML elements should be displayed.

Property Description Values

color Sets the color of a text RGB, hex, keyword
line- Sets the distance between
normal, number, length, %
height lines
letter- Increase or decrease the space
normal, length
spacing between characters
text-align Aligns the text in an element left, right, center, justify
text- none, underline, overline,
Adds decoration to text
decoration line-through
text- Indents the first line of text in
length, %
indent an element
text- Controls the letters in an none, capitalize,
transform element uppercase, lowercase
• Border Margins - The CSS margin properties are used to create space around
elements, outside of any defined borders. With CSS, you have full control over
the margins. There are properties for setting the margin for each side of an
element (top, right, bottom, and left). If the margin property has four values:
margin: 25px 50px 75px 100px;
o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px
• Padding - The CSS padding properties are used to generate space around an
element's content, inside of any defined borders. With CSS, you have full
control over the padding. There are properties for setting the padding for each
side of an element (top, right,bottom, and left).
• Navigation - Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking
navigation bars.
• Dropdown list - A dropdown menu is a toggleable menu that allows the user
to choose one value from a predefined list

• Input: index.css and index.html files.

• Output:

• Inference – In this assignment we learnt CSS properties and

successfully implemented them in website.