Scribd
Upload
85 views

Session - 5 Introduction To Html/Css Assignment

The document discusses HTML and CSS concepts like inline and block elements, visibility and display properties, float and clear properties, positioning methods, tables, meta tags, box model, CSS selectors, doctype, and HTML5 semantic tags. Key differences and uses of different concepts are explained through examples.

Uploaded by

Divya Chhabra
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
85 views

Session - 5 Introduction To Html/Css Assignment

The document discusses HTML and CSS concepts like inline and block elements, visibility and display properties, float and clear properties, positioning methods, tables, meta tags, box model, CSS selectors, doctype, and HTML5 semantic tags. Key differences and uses of different concepts are explained through examples.

Uploaded by

Divya Chhabra
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

SESSION - 5

INTRODUCTION TO HTML/CSS
ASSIGNMENT

1.How are inline and block elements different from each other?

INLINE ELEMENTS BLOCK ELEMENTS

Inline element ​does not cause a line break​. Block element ​causes a line break.
(does not start a new line)

Doesn’t take up full width of a page​, from left Takes up the full width of a page​, from left to
to right. right.

Doesn’t have a line break before or after ​the Has a line break before and after​ the
element. element.

Examples: anchor tag ​<a>​, image tag ​<img> Examples: Heading tags ​<h1> to <h6>​, list
tag ​<ol>,<ul>

2.Explain the difference between visibility:hidden and display:none

Visibility:hidden Display:none

Means that the ​tag is not visible, but space is Means that the ​tag will not appear on the
allocated​ for it on the page. page at all.

There will be ​space allocated​ for it, but it is There will be ​no space allocated​ for it
just not visible. between the other tags.

Leaves the element ​in the normal flow of the Removes the element ​from the normal flow of
page such that it ​still occupies space. the page, ​allowing other elements to fill in​.
3. Explain the clear and float properties.

Float property:

● Specifies how an element should float.


● used for ​positioning and formatting content ​e.g. let an image float left to the text in a
container.
● This property can have one of the following values:
1. left - The element floats to the left of its container
2. right - The element floats to the right of its container
3. none - The element does not float (will be displayed just where it occurs in the
text). This is default
4. inherit - The element inherits the float value of its parent.
● Example-img{ float: right;}

Clear property:

● specifies what elements can float beside the cleared element and on which side.
● specifies ​what elements can float beside the cleared element and on which side.
● This property can have one of the following values:
1. none - Allows floating elements on both sides. This is default
2. left - No floating elements allowed on the left side
3. right- No floating elements allowed on the right side
4. both - No floating elements allowed on either the left or the right side
5. inherit - The element inherits the clear value of its parent
● Example-div{clear: left;}

4. explain difference between absolute, relative,fixed and static.

These are positioning methods used for an element in CSS. These properties will not work
unless the position property is set first.

1. Absolute- An element with position: absolute; ​is positioned relative to the nearest
positioned ancestor.​ However; if an absolute positioned element has no positioned
ancestors, it uses the document body, and moves along with page scrolling.
2. Relative- An element with position: relative; is ​positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will
cause it to be adjusted away from its normal position. Other content will not be adjusted
to fit into any gap left by the element.
3. Fixed- An element with position: fixed;​ it always stays in the same place even if the page
is scrolled.​ The top, right, bottom, and left properties are used to position the element. A
fixed element does not leave a gap in the page where it would normally have been
located.
4. Static- HTML elements are positioned static by default​. Static positioned elements are
not affected by the top, bottom, left, and right properties.​ An element with position: static;
is not positioned in any special way; it is always positioned according to the normal flow
of the page:

5. Write the HTML code to create a table in which there are 4 columns( ID , Employee
Name, Designation, Department) and at least 6 rows. Also do some styling to it.

<!DOCTYPE html>
<html>
<head>
<title>Riya's table </title>
</head>
<style>
table, th, td
{
border: 1px solid black;
}

th
{
text-align: right

th
{
background-color: yellow;
color: blue;

}
td
{
color: black
}
</style>
<body>
<table border=1>

<thead>
<tr bgcolor="#FF0000">
<th>ID</th>
<th>Employee Name</th>
<th>Designation</th>
<th>Department</th>
</tr>
</thead>

<tbody>
<tr>
<td>101</td>
<td>Rahul</td>
<td>Business Analyst</td>
<td>Quality Engineering</td>
</tr>
<tr>
<td>102</td>
<td>Prashant</td>
<td>Software Engineer</td>
<td>Devops</td>
</tr>
<tr>
<td>103</td>
<td>Pulkit</td>
<td>Product Manager</td>
<td>OTT</td>
</tr>
<tr>
<td>104</td>
<td>Sushant</td>
<td>HR Spoc</td>
<td>HR Department</td>
</tr>
<tr>
<td>105</td>
<td>Kriti</td>
<td>Senior Software Engineer</td>
<td>Javascript</td>
</tr>
<tr>a
<td>106</td>
<td>Pooja</td>
<td>Product Owner</td>
<td>Quality Engineer</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Copyright</td>
<td> @ TTN </td>
</tr>
</tfoot>
</table>
</body>
</html>

6. Why do we use meta tags?

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed
on the page, but will be machine parsable.

Meta elements are typically used to specify page description, keywords, author of the
document, last modified, and other metadata. Also, it helps to improve the SEO( Search Engine
Optimization) of a web page by using certain keywords related to the web page. The search
engines still read them for it to have a simple, summarized idea of what your site is about and
what exactly your keywords are.
7. Explain box model.

The CSS box model is ​essentially a box that wraps around every HTML element.​It consists of:
margins, borders, padding, and the actual content.

CSS box model is a container which contains multiple properties including borders, margin,
padding and the content itself. It is used to create the design and layout of web pages. It can be
used as a toolkit for customizing the layout of different elements. The web browser renders
every element as a rectangular box according to the CSS box model.

Explanation of the different parts:

● Content​ - The content of the box, where text and images appear
● Padding​ - Clears an area around the content. The padding is transparent
● Border​ - A border that goes around the padding and content
● Margin​ - Clears an area outside the border. The margin is transparent

8. What are the different types of CSS Selectors?


There are several different types of selectors in CSS.

1. CSS Element Selector-selects the element by its name.


2. CSS Id Selector-The id selector selects the id attribute of an HTML element to select a
specific element. An id is always unique within the page so it is chosen to select a single,
unique element.It is written with the hash character (#), followed by the id of the element.
3. CSS Class Selector-The class selector selects HTML elements with a specific class
attribute. It is used with a period character . (full stop symbol) followed by the class
name.
4. CSS Universal Selector-The universal selector is used as a wildcard character. It selects
all the elements on the pages.
5. CSS Group Selector-The grouping selector is used to select all the elements with the
same style definitions. Grouping selector is used to minimize the code. Commas are
used to separate each selector in grouping.

9. Define Doctype.

A doctype or document type declaration is an instruction which tells the web browser about the
markup language in which the current page is written. The Doctype is not an element or tag, it
lets the browser know about the version of or standard of HTML or any other markup language
that is being used in the document. In HTML 5, the DOCTYPE declaration is only required for
enabling the standard mode for writing documents.

Eg: < !DOCTYPE html >

10. Explain 5 HTML5 semantic tags.

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

1.<Section>- Defines a section a document.Eg-A home page could normally be split into
sections for introduction, content, and contact information.

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>

2.<article> - Specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to read it independently from
the rest of the web site.

<article>
<h1>What Does WWF Do?</h1>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>

3. <header> - Specifies a header for a document or section.

The <header> element should be used as a container for introductory content.

<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>

4. <footer> - specifies a footer for a document or section.


A <footer> element should contain information about its containing element.

A footer typically contains the author of the document, copyright information, links to terms of
use, contact information, etc.

<footer>
<p>Posted by: Hege Refsnes</p>
<p>Contact information: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer>

5. <nav> - The <nav> element defines a set of navigation links.

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

11. Create HTML for web-page.jpg (check resources, highest weightage for answers)

<!DOCTYPE html>
<html>
<head>
<title>Webpage question 11</title>
<style>
body {background-color: #303030;}
h1 {color: white;
padding:10px;
font-family: "Times New Roman", Times, serif;
margin-}
h4{color: white;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 20px;
margin-left: 20px;
padding: 10px;
border: 1px #080808;
background-color: #080808;
font-family: "Times New Roman", Times, serif;
word-spacing: 30px;}
#d1{ border: 1px solid black;
margin-top: 20px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 150px;
background-color: white;
height: 960px;
width: 960px;}
#d2{ border: 1px #303030;
margin-top: 20px;
margin-bottom: 20px;
margin-right:40px;
margin-left: 120px;
background-color: #303030;
height: 250px;
width: 700px;
text-align: center;
color: white;
font-family: "Times New Roman", Times, serif;
padding-top:160px;
padding-bottom:60px;}
h5{color: gray;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 40px;
margin-left: 120px;
padding: 10px;
border: 1px #e4dbd9;
background-color: #e4dbd9;
font-family: "Times New Roman", Times, serif;
word-spacing: 30px;
width:700px;}
h2{margin-left: 120px;
margin-top: 50px;
margin-bottom:30px;
color: gray}
footer{color: white;}

<!--* {
box-sizing: border-box;
}

body {
font-family: Arial, Helvetica, sans-serif;
}

.column {
float: left;
width: 25%;
padding: 0 10px;
}

.card {
padding: 30px;
text-align: center;
background-color: #303030;
color: white;
width: 215px;
height: 315px;
}

</style>
</head>
<body>
<h1>To the New </h1>
<h4>TEXTLINK TEXTLINK TEXTLINK TEXTLINK TEXTLINK</h4>
<div id="d1">
<div id="d2">
<h1>960 x 360px</h1>
</div>
<h5> lwdsa akldkas adjqjd lajdhad hff jdihwif ljdihw lqjifq ljdiwq qdjhiqfw ljfiqweroqwjen khdfwh
lajfajfoa ahfandaji fdlkjs skdnfsd dlsoidsjf lsdjfoijdoiji</h5>
<h2>LATEST FROM THE GALLERY</h2>
<div class="row">
<div class="column">
<div class="card">215 x 315px</div>
</div>
<div class="column">
<div class="card">215 x 315px</div>
</div>
<div class="column">
<div class="card">215 x 215px</div>
</div>
<div class="column">
<div class="card">215 x 315px</div>
</div>
</div> </div>
<footer>
<h3 align= "left">Copyright @ 2009-2017-All Rights Reserved-To the new.</h3>
<h3 align= "right">Web Layout by To the new</h3>
</footer>
</body>
</html>
12. Create HTML for form.png

<!DOCTYPE html>

<html>

<head>

<title>ques12</title>

<style>

h3{word-spacing:30px;

text-align:right;

font-family: arial;

color: #58c19e}

h2{text-align:left;

font-family: arial;

color: #58c19e}

h4{background-color: LightGray;

padding-top:20px;

padding-bottom:20px;

padding-left:10px;

font-family: arial;

color: white;}

fieldset{text-align:justify;

width:400px;

margin-left: 500px;

margin-right: 100px;
padding-top:10px;

padding-bottom: 10px;

padding-left: 0.75em;

padding-right: 0.75em;

border:2px solid green;

border-radius:8px;}

b{text-align: right}

</style>

</head>

<body>

<h2>TO THE NEW</h2>

<h3>Home Quickhelp </h3>

<hr/>

<form>

<fieldset>

<h4>Bug Report</h4>

<label for="Title">Title:*</label><br>

<input type="text" name="Title" id="Title"required><br>

<label for="Description">Description:*</label><br>

<textarea rows="5" cols="50" name="Description" id="Description"


required></textarea><br>

<label for="Operating Sysytem">Operating System:</label><br>


<select name="Operating System" id=Operating System">

<option value="Windows 10">Windows 10</option>

<option value="Windows 8">Windows 8</option>

<option value="Ubuntu">Ubuntu</option>

<option value="ios">ios</option>

</select><br>

<label for="Product">Product:</label><br>

<select name="Product" id=Product>

<option value="Formoid">Formoid</option>

<option value="E490">E490</option>

<option value="MacBook Pro">MacBook Pro</option>

<option value="HP">HP</option>

</select><br>

<label for="Version">Version:</label><br>

<input type="text" name="Version" id="Version"required><br>

License:

<br>

<input type="radio" name="License" id="Free">

<label for="License">Free</label>

<input type="radio" name="License" id="Bussiness">

<label for="License">Bussiness</label><br>
<label for="Severity">Severity:</label><br>

<select name="Severity" id=Severity">

<option value="High">High</option>

<option value="Medium">Medium</option>

<option value="Low">Low</option>

</select><br>

<label for="Attachments">Attachments:</label><br>

<input type="file" name"upload" id="Attachments"><br>

</form>

<button type="submit" form="form" id="b" value="Submit">Send</button>

</fieldset>

</body>

</html>

You might also like