Practical File

of

Paper-VI: Lab based on Web Technologies

PCM S.D. College for Women, Jalandhar

PG Department of Computer Science & IT

Submitted To: Submitted By:

Ms. Annie Ahuja Name: Priya

Assistant Professor Class: BCA Semester-V

PG Department of Computer Science & IT Roll No: 10721922153

 INDEX
Sr. No. Topic Page No. Date Remarks

HTML (Hyper Text Markup Language)

1. Introduction to HTML5

2. Structure of a webpage

3. Write a code in HTML5 to display HTML5 Elements

4. Write a code in HTML5 to display HTML5 Attributes

5. Write a code in HTML5 to display Basic Text Formatting

Tags

6. Write a code in HTML5 to display Comments

7. Write a code in HTML5 to demonstrate the concept of

different types of Links

8. Write a code in HTML5 to demonstrate the concept of

different types of Lists

9. Write a code in HTML5 to demonstrate the concept of

inserting and viewing an Image

10. Write a code in HTML5 to display Style

11. Write a code in HTML5 to display Table

12. Write a code in HTML5 to display Media- Audio and
Video

13. Write a code in HTML5 to display Classes

14. Write a code in HTML5 to demonstrate the concept of

iframes

Introduction to CSS3

1. Write a code to show the concept of Inline Stylesheet

2. Write a code to show the concept of Internal Stylesheet

3. Write a code to show the concept of External

Stylesheet

4. Write a code to show the concept of Imported

Stylesheet

5. Write a code to show the concept of Universal Selector

6. Write a code to show the concept of Descendant

Selector

7. Write a code to show the concept of Contextual

Selector

8. Write a code to show the concept of ID Selector

9. Write a code to show the concept of Class Selector

10. Write a code to display Styling Backgrounds

11. Write a code to show the usage of Texts

12. Write a code to show the usage of Fonts

13. Write a code to show the usage of Links

14. Write a code to show the usage of Lists

15. Write a code to show the usage of Tables

16. Write a code to show the usage of Box Model

Introduction
To
HTML

Introduc
tion to
Welcome to day two of your web development beginner’s course. Today is
the day of HTML! HTML is all about structuring the data. It doesn’t concern
itself with how something looks; that’s what CSS is for, which we’ll study
tomorrow.

Just like a building is only as strong as its foundation, HTML is the skeleton
that holds everything together. To put it in a more web-based context,
HTML makes sure the page is usable on a variety of devices and browsers
and provides a structure for adding CSS, JavaScript, and the content of the
website or application itself.

We’ve already learned that HTML is a type of language that structures

content; in other words, it labels different elements such as images and text
in order to tell your browser how to display the content and in what order.

Yesterday, we wrote some HTML and worked with a few HTML elements,
too—but we haven’t really understood them. Let’s change that in this
lesson. We’ll look into what HTML is made up of—in other words, HTML
elements—and then use them to add detail to our portfolio site.

Element tags

We’ve already seen a few HTML elements. You can think of an HTML
element as an individual piece of a webpage, like a block of text, an image,
a header, and so on. Yesterday you used a heading element, h1, which
looked like this:
Every HTML element has HTML tags, and a tag (<h1> or </h1>) is
surrounded by angled brackets like < and >. Tags define elements and tell
the browser how to display them (for example, they can tell the browser
whether an element is an image or a paragraph of text).

Most HTML elements have an opening tag and a closing tag that show

where the element begins and ends. The closing tag is just the opening tag
with a forward slash (/) before the element name. We can generalize the
format of an HTML element as follows:

Here, content is something we add. It can be anything, like “Hello world” in

our h1 example; ‘element name’, however, has to be one of the predefined
tags like h1, h3, p or strong.

Let’s take a look at a few important things to know about HTML elements
before we dive in and use them.

The very aptly named textarea element will display a text input field where
our users can write text. In this example, rows and cols are attributes that
define the number of rows and columns the textarea should span
respectively.

Attributes like width and height for img, or rows and cols for textarea are
useful directly within HTML. But some attributes have a special meaning—
meaning that they don’t do anything on their own, but require us to write
additional CSS or JavaScript, and thus connect the three pillars together—
and we’ll be learning more about them later in this course.

Note that some elements don’t have any content in them, and hence they
don’t have to have a closing tag. Images, for example, only need a
“src” attribute (short for source, or the location to find the image).
Nesting elements

HTML elements can be nested inside each other; in other words, one
element can hold other elements. Take a look at the following block of
code. Notice how we have two strong elements in our paragraph element.
That’s totally legal. HTML doesn’t care how much space or how many new
lines you use. The previous two examples will display in the exact same
way (but the latter is easier to read, so we prefer that). Now we know
enough HTML elements to start adding HTML to our portfolio page project!
Before we get into writing code, let’s take a look at our wireframe. A
wireframe is a low fidelity design that we use as a reference to code our
website.In the real world, your team may have dedicated designers who’ll
come up with a design that is then handed over to you, the developer, for
implementation (converting into actual code). In our case, we’ll use a hand
drawn design as a starting point. The purpose it serves is similar: it gives
us a broad outline for how our end result should look.

Structur
A web
pointed
that are
e of a document (or web page) is, as we have
out in the introduction, a set of HTML tags
written in a plain text editor (without
format)

The
webpag and run in a web browser.

basic HTML skeleton

e
 HOW TO CREATE A WEB PAGE

To create a true HTML document you will start with three container elements:

 <html>
 <head>
 <body>
These three combine to describe the basic structure of the page:

 <html>: This element wraps all the content of the page (except the DTD)
 <head>: This element designates the header part of the document. You
can include optional information about the Web page, such as the title (the
browser shows it in the title bar), optional search keywords and an optional
style sheet
 <body>: This element contains the content of your Web page, that is, what
we want to appear in the navigation area of the browser
There is only one correct way to combine these three elements. Here is its exact
placement, with the doc type at the top of the page:

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>

Every Web page uses this basic structure. The ellipses (...) show where you would
insert the additional information.

Once the XHTML skeleton is placed, you must add two more connectors to the
mix
 Every Web page requires a <title> element in the header section. Next, you must
create a container for the text in the text body section (<body>).

A multi-use text container element is

, which represents a paragraph. Let's take a closer look at the elements that need to
be added:

 <title>: Sets the title of the Web page, which has several functions. First,
browsers display it in the upper part of the window. Second, when a visitor
creates a bookmark for the page, the browser uses the title to tag it in the
bookmarks (or bookmarks) menu. third, when the page appears in a web
search, the search engine usually shows this title as the first line in the
results, followed by a fragment of the content of the page.
 <p>: Indicates a paragraph. The browsers do not bleed them but they add
a small space between several consecutive ones to keep them separated
Here is the page with these two new ingredients:

<!DOCTYPE html>
<html>
<head>
<title>Welcome to my website</title>
</head>
<body>
<p></p>
</body>

</html>

If you open this document in a Web browser, you will see that the page is empty,
but now the title appears.
When a browser displays a Web page, the title appears at the top of the window,
with the text at the end. If yours uses tabbed browsing, the title also appears in
them.

As it is now, this HTML document is a good template for future pages. The basic
structure is in place; you simply need to change the title and add some text.

The first thing we have to know is that in every web page there are two clearly
differentiated parts: the head, or head, and the body, or body.

Let's do is create a folder, inside "My Documents", to store the test files that we
will use.

We will call this folder html-tests in the rest of the exercises. With the folder open,
double-click on the icon that represents the notebook.

A blank document will open.

Enter the following text:

<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
</body>
</html>

When you have it written, save it in the folder with the name template.html
 It is vital that the extension be .html, since only by the extension does the operating
system recognize this file as a web document, and not as a simple and text file.

The name of the file should be written as it is, in lowercase and without spaces or
special characters.

The only punctuation marks allowed are the point (only one), which we will use to
separate the name of the extension and the underscore.

The name may contain letters and numbers, but must begin with a letter. Likewise,
we will abstain from putting in the name of a file accented letters, eñes, cedillas, or
any other character of a local alphabet.

Only the characters of the international alphabet (English) are allowed.

Observe the following examples:

 page 1.htm is incorrect, as it has a blank space and a capital letter
 page/1.htm is incorrect, it has a non-allowed character (the bar)
 page1-htm is incorrect, because the extension is not separated from the
name by a period and because it uses a non-allowed character. (the
normal script).
 page.1.htm is incorrect, because there is more than one point. Only one
should be used, to separate the name of the extension
 page1.htm is correct
 page_1.html is correct
 page-1.html is correct
All of these precautions may seem excessive to you now. Most of them are really
unnecessary in Windows, but do not forget that you are working on the Net.

Web servers are much more sensitive to certain aspects of the name of the files
than your local machine.

Another important rule is that the files have an extension, but the folders in which
we store them do not. So, in the name of a folder we will never include points.
Once you have saved your code in your folder with the appropriate name, close the
notebook. In your folder, in addition to the notebook, you will see the icon that
represents the file you just recorded.

Note that the icon is reminiscent of Explorer or Google Chrome (assuming one of
them is your default browser).

This is because having saved the file with the .htm extension, the operating system
recognizes this file as a web document (also called an html document).

If you incorrectly record the extension, the icon will be different and you will not
be able to use your file as a web document.

To execute the page you just created, double-click on the icon. Automatically, the
browser will open and the page will be loaded. The full path and the name of the
file will appear in the address bar.

Now let's see in detail what is the code of this page that we have created and what
it does.

First, we found the tag <html>. This tag is always used to start the html code.

It is the way to tell the browser that at this point the code starts. For this reason,
this line is always put as the first line of the code.

We will not include any tag before this, with the exception of DOCTYPE. On the
contrary, at the end of the code we have the tag </html>, which tells the browser
that the code ends at that point.

We should not include any tag or anything else after this line. Note that the ending
tag is the same as the start tag, but including the slash at the beginning.

Inside the html code we will find clearly differentiated the two blocks that we
mentioned before: the head (header) and the body (body of the page).
1. Write a code in HTML5 to display HTML% elements

INPUT:
OUTPUT:
 2. Write a code in HTML5 to display HTML5 Attributes

INPUT:
OUTPUT:
3.write a code in HTML5 to display Basic text
formatting tags.
INPUT:
OUTPUT:
4.write a code in HTML5 to display comments.
INPUT:

OUTPUT:
5.write a code in HTML5 to demonstrate the
concept of different type of links.
INPUT:
OUTPUT:
6. write a code in HTML5 to demonstrate the
concept of different types of lists.
INPUT:

OUTPUT:
7.write a code in HTML5 to demonstrate the
concept of inserting and viewing an image.
INPUT:

OUTPUT:
 8.Write a code in HTML5 to display style.
INPUT:
Output:
 9. Write a code in HTML5 to display Table

Source Code

# Multiplication table (from 1 to 10) in Python

num = 12

# To take input from the user

# num = int(input("Display multiplication table of? "))

# Iterate 10 times from i = 1 to 10

for i in range(1, 11):
print(num, 'x', i, '=', num*i)
Output
12 x 1 = 12
12 x 2 = 24
12 x 3 = 36
12 x 4 = 48
12 x 5 = 60
12 x 6 = 72
12 x 7 = 84
12 x 8 = 96
12 x 9 = 108
12 x 10 = 120

10. Write a code in HTML5 to display Media- Audio

Input
<!DOCTYPE HTML>

<html>
<body>
<video width = "300" height = "200" controls
autoplay>
<source src = "/html5/foo.ogg" type
="video/ogg" />
<source src = "/html5/foo.mp4" type =
"video/mp4" />
Your browser does not support the <video>
element.
</video>
</body>
</html>
Output

10.1 Write a code in HTML5 to display Media- Audio

 Input
<html>
<body>

<audio controls autoplay>

<source src = "/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" />
Your browser does not support the <audio> element.
</audio>

</body>
</html>
Output

11. Write a code in HTML5 to display Classes

 Input
/C++ program to display time using class

# include<iostream>

using namespace std;

class time

int m,s,h;

public:

void get(int p,int q,int r)

h=p;

m=q;

s=r;

void display()

cout<<"Time is "<<h<<":"<<m<<":"<<s;
 }

};

int main()

int p,q,r;

time t;

cout<<"Enter hour:";

cin>>p;

cout<<"Enter minute:";

cin>>q;

cout<<"Enter seconds:";

cin>>r;

t.get(p,q,r);

t.display();

Output
Enter hour:2

Enter minute:43

Enter seconds:55

Time is 2:43:55

12. Write a code in HTML5 to demonstrate the concept

ofiframes
 Input

<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" />
        <noframes>
            <body>The browser you are working does 
                        not support frames.</body>
        </noframes>
    </frameset>
</html>                    

Output
 The above example basically used to create three horizontal
frames: top, middle and bottom using row attribute of frameset
tag and the noframe tag is used for those browser who doesn’t
support noframe.
 CSS
(Cascadi
ng Style
Sheets)

CSS (Cascading Style Sheets)

Introduction to CSS3
Write a code to show the concept of Inline Stylesheet

Write a code to show the concept of InternalStylesheet

Write a code to show the concept of ExternalStylesheet

Write a code to show the concept of Imported

Stylesheet

Write a code to show the concept of Universal Selector

Write a code to show the concept of Descendant

Selector

Write a code to show the concept of

ContextualSelector

Write a code to show the concept of ID Selector

Write a code to show the concept of Class Selector

Write a code to display Styling Backgrounds

Write a code to show the usage of Texts

Write a code to show the usage of Fonts

Write a code to show the usage of Links

Write a code to show the usage of Lists

Write a code to show the usage of Tables

Write a code to show the usage of Box Model

 Introduction
To
CSS
(Cascading Style Sheets)

Introduction to CSS
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a
document written in a markup language such as HTML.[1] CSS is a cornerstone technology of
the World Wide Web, alongside HTML and JavaScript.
CSS is designed to enable the separation of presentation and content, including layout, colors,
and fonts. This separation can improve content accessibility; provide more flexibility and control in
the specification of presentation characteristics; enable multiple web pages to share formatting by
specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the
structural content; and enable the .css file to be cached to improve the page load speed between the
pages that share the file and its formatting.
Separation of formatting and content also makes it feasible to present the same markup page in
different styles for different rendering methods, such as on-screen, in print, by voice (via speech-
based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for
alternate formatting if the content is accessed on a mobile device.
The name cascading comes from the specified priority scheme to determine which style rule applies
if more than one rule matches a particular element. This cascading priority scheme is predictable.
The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media
type (MIME type)  text/css  is registered for use with CSS by RFC 2318 (March 1998). The W3C
operates a free CSS validation service for CSS documents.
In addition to HTML, other markup languages support the use of CSS including XHTML, plain
XML, SVG, and XUL.
CSS has a simple syntax and uses a number of English keywords to specify the names of various
style properties.
A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and
a declaration block.

Selector
In CSS, selectors declare which part of the markup a style applies to by
matching tags and attributes in the markup itself.
Selectors may apply to the following:

 all elements of a specific type, e.g. the second-level headers h2

 elements specified by attribute, in particular:
o id: an identifier unique within the document, identified with a hash
prefix e.g.  #id
o class: an identifier that can annotate multiple elements in a
document, identified with a period prefix e.g.  .classname
 elements depending on how they are placed relative to others in
the document tree.
Classes and IDs are case-sensitive, start with letters, and can include
alphanumeric characters, hyphens, and underscores. A class may apply to
any number of instances of any elements. An ID may only be applied to a
single element.
Pseudo-classes are used in CSS selectors to permit formatting based on
information that is not contained in the document tree. One example of a
widely used pseudo-class is  :hover , which identifies content only when
the user "points to" the visible element, usually by holding the mouse
cursor over it. It is appended to a selector as
in  a:hover  or  #elementid:hover . A pseudo-class classifies document
elements, such as  :link  or  :visited , whereas a pseudo-
element makes a selection that may consist of partial elements, such
as  ::first-line  or  ::first-letter .[6]
Selectors may be combined in many ways to achieve great specificity and
flexibility.[7] Multiple selectors may be joined in a spaced list to specify
elements by location, element type, id, class, or any combination thereof.
The order of the selectors is important. For
example,  div .myClass {color: red;}  applies to all elements of class
myClass that are inside div elements,
whereas  .myClass div {color: red;}  applies to all div elements that
are inside elements of class myClass. This is not to be confused with
concatenated identifiers such as  div.myClass {color: red;}  which
applies to div elements of class myClass.
The following table provides a summary of selector syntax indicating usage
and the version of CSS that introduced

1. Write a code to show the concept of Inline Stylesheet

 Input
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Inline css</title>
 
</head>
<body bgcolor="#CCFF66">
<h1 style="text-
decoration:underline;color:#30F;"align="center">Example
for Inline CSS</h1>
<p style="font-family:Arial, Helvetica, sans-serif;
align:left; color:#F00;">Cascading Style Sheet is a
style language that defines layout of HTML
documents.CSS properties such as background, border,
font, float, display, margin, opacity, padding, text-
align, vertical-align, position, color etc.</p>
<h2 align="left" style="color:#C0C;text-
decoration:underline;">Image affected with styles</h2>
<img src="/images/inline-example.png" style="border:3px
solid #03F; width:400px; height:300px;
     margin-left:10px;"/>
 
</body>
</html>
Output

2. Write a code to show the concept of Internal Stylesheet

 Input
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
   <title>Internal CSS</title>
   <style>
      body{
      background-color:#9F6;
      }
      h1{
      color:#C39;
      text-align:left;
      text-transform:capitalize;
      text-decoration:underline;
      }
      P{
      font-size:20px;
      font-family:Verdana, Geneva, sans-serif;
      background-color:#FFF;
      color:#963;
      }
      h2{
      color:#F03;
      margin-left:10px;
      }
      img{
      border:5px           double #903;
      width:400px;
      height:300px;
      margin-left:10px;
      }
      a{
      margin-left:10px;
      }
      a:hover{   /*---------------This is formate of
Pseudo-element---------------*/
      color:#009;
      font-size:18px;
      font-weight:700;
      }
   </style>
</head>
<body>
   <h1>Example for Internal CSS</h1>
   <p>Cascading Style Sheet is a style language that
defines layout of HTML documents.CSS properties such as
background, border, font, float, display, margin,
opacity, padding, text-align, vertical-align, position,
color etc.</p>
   <h2>Image Affected with styles</h2>
   <img src="/images/p9.png"><br /><br />
   <a href="/../../../Documents/Unnamed Site 2/p9.png"
target="_blank">Download Image</a>
</body>
</html>

Output
 3. Write a code to show the concept of External Stylesheet

Input
<html>
<head>

/* myStyle.css */
body {
background-color: #333300;
color: #FFFFFF;
}
h1 {
color: #FFFF33;
text-align: center;
font: italic 200% fantasy;
}
p {
background-color: #FFFF33;
color: #333300;
text-align: right;
border: 3px groove #FFFF33;
}

Output
 4. Write a code to show the concept of Imported
Stylesheet
Input
html>
<html>
<head>
<style type="text/css">
@import url(style.css);
body {
   background-color: honeydew;
}
</style>
</head>
<body>
<p>This is demo paragraph one. </p>
<p class="two">This is demo paragraph two.</p>
<p>This is demo paragraph three</p>
</body>
</html>

Output
5. Write a code to show the concept of Universal
Selector

Input
<html>
<head>
<title>The Selecter Example</title>
<script type = "text/javascript"
src =
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<script type = "text/javascript" language = "javascript">

$(document).ready(function() {
/* This would select all the elements */
$("*").css("background-color", "yellow");
});
</script>
</head>

<body>
<div class = "big" id = "div1">
<p>This is first division of the DOM.</p>
</div>

<div class = "medium" id = "div2">

<p>This is second division of the DOM.</p>
</div>

<div class = "small" id = "div3">

<p>This is third division of the DOM</p>
</div>
</body>
</html>
 Output

This is first division of the DOM.

This is second division of the DOM.

This is third division of the DOM

6. Write a code to show the concept of Descendant

Selector
 Input
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS: The descendant selector</title>

<style>

/* Makes all em tags underneath a ul have a red background */

ul em {

background-color: rgb(255, 182, 182);

/* Makes all strong tags underneath a ul have a violet background */

ul strong {

background-color: rgb(237, 221, 255);

</style>

</head>

<body>

<h2>The three laws of robotics</h2>

 <p>These laws, also known as <strong>Asimov's Laws</strong> were
originally formulated by science-fiction author Isaac Asimov in the 1940s, but
they're now referred to in movies <em>and</em> the news.</p>

<ul>

<li> A robot may not injure a human being or, through inaction, allow a
human being to come to harm.</li>

<li>A robot must obey the orders given to it by human beings,

<em>except</em> where such orders would conflict with the First Law.</li>

<li>A robot must protect its own existence <em>as long as</em> such
protection <strong>does not conflict</strong> with the First or Second Law.</li>

</ul>

</body>

</html>
 Output
The three laws of robotics
These laws, also known as Asimov's Laws were originally formulated by science-
fiction author Isaac Asimov in the 1940s, but they're now referred to in
movies and the news.

 A robot may not injure a human being or, through inaction, allow a human
being to come to harm.
 A robot must obey the orders given to it by human beings, except where
such orders would conflict with the First Law.
 A robot must protect its own existence as long as such protection does not
conflict with the First or Second Law.
 7. Write a code to show the concept of Contextual
Selector

Input

<html>
  
<head>
    <title>Contextual Selectors</title>
  
    <style>
        div {
            color: red;
        }
  
        p {
            color: red;
        }
    </style>
</head>
  
<body>
    <div>
        <p>Geeks For Geeks</p>
        <p>A Computer Science portal for geeks.</p>
    </div>
      
    <p>What are Contextual Selectors in CSS?</p>
</body>
  
</html>
Output
 8. Write a code to show the concept of ID Selector

Input

<!DOCTYPE html>
<html>
    <head>
        <title>#id selector</title>
          
        <!-- CSS property using id attribute -->
        <style>
            #gfg1 {
                color:green;
                text-align:center;
            }
            #gfg2 {
                text-align:center;
            }
        </style>
    </head>
      
    <body>
          
        <!-- id attribute declare here -->
        <h1 id = "gfg1">GeeksforGeeks</h1>
        <h2 id = "gfg2">#id selector</h2>
    </body>
</html>
Output
 9. Write a code to show the concept of Class
Selector

Input
<!DOCTYPE html>
<html>
<head>
    <style>
    .geeks {
        color: green;
    }
      
    .gfg {
        background-color: yellow;
        font-style: italic;
        color: green;
    }
    </style>
</head>
  
<body style="text-align:center">
    <h1 class="geeks">
            GeeksforGeeks
    </h1>
    <h2>.class Selector</h2>
    <div class="gfg">
        <p>GeeksforGeeks: A computer science portal</p>
    </div>
</body>
</html>
Output
 10. Write a code to display Styling Backgrounds

Input

<!DOCTYPE html>
<html>

<head>
<title>HTML Background Colors</title>
</head>
<body>
<!-- Format 1 - Use color name -->
<table bgcolor = "yellow" width = "100%">
<tr>
<td>
This background is yellow
</td>
</tr>
</table>
<!-- Format 2 - Use hex value -->
<table bgcolor = "#6666FF" width = "100%">
<tr>
<td>
This background is sky blue
</td>
</tr>
</table>
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(255,0,255)" width = "100%">
<tr>
<td>
This background is green
 </td>
</tr>
</table>
</body>
</html>
Output

This background is yellow

This background is sky blue
This background is green

11. Write a code to show the usage of Texts

 Input

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightgrey;

color: blue;

h1 {

background-color: black;

color: white;

div {

background-color: blue;

color: white;

}
</style>

</head>

<body>

<h1>This is a Heading</h1>

<p>This page has a grey background color and a blue text.</p>

<div>This is a div.</div>

</body>

</html>
Output

This is a Heading
This page has a grey background color and a blue text.

This is a div.

12. Write a code to show the usage of Fonts

Input

<!DOCTYPE html>

<html>

<head>

<style>

.p1 {

font-family: "Times New Roman", Times, serif;

.p2 {

font-family: Arial, Helvetica, sans-serif;

.p3 {

font-family: "Lucida Console", "Courier New", monospace;

</style>

</head>

<body>
<h1>CSS font-family</h1>

<p class="p1">This is a paragraph, shown in the Times New Roman

font.</p>

<p class="p2">This is a paragraph, shown in the Arial font.</p>

<p class="p3">This is a paragraph, shown in the Lucida Console

font.</p>

</body>

</html>
 Output
CSS font-family

This is a paragraph, shown in the Times New Roman font.

This is a paragraph, shown in the Arial font.

This is a paragraph, shown in the Lucida Console font.

13. Write a code to show the usage of Links

 Input
<!DOCTYPE html>

<html>

<head>

<style>

a{

color: hotpink;

</style>

</head>

<body>

<h2>Style a link with a color</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

</body>

</html>

Output
Style a link with a color
This is a link

14.Write a code to show the usage of Lists

Input
<!DOCTYPE html>
<html>
  
<head>
    <style>
    ul.a {
        list-style-type: square;
    }
      
    ol.c {
        list-style-type: lower-alpha;
    }
    </style>
</head>
  
<body>
    <h2>
         GeeksforGeeks
      </h2>
      
<p> Unordered lists </p>
  
    <ul class="a">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <ul class="b">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
      
<p> Ordered Lists </p>
  
    <ol class="c">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ol>
    <ol class="d">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ol>
</body>
  
</html>

Output
15.Write a code to show the usage of Tables
Input
<!DOCTYPE html>

<html>

<head>

<style>

#customers {

font-family: Arial, Helvetica, sans-serif;

border-collapse: collapse;

width: 100%;

#customers td, #customers th {

border: 1px solid #ddd;

padding: 8px;

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {

padding-top: 12px;

padding-bottom: 12px;

text-align: left;

background-color: #04AA6D;

color: white;

</style>

</head>

<body>

<h1>A Fancy Table</h1>

<table id="customers">

<tr>

<th>Company</th>

<th>Contact</th>

<th>Country</th>

</tr>

<tr>

<td>Alfreds Futterkiste</td>

<td>Maria Anders</td>
 <td>Germany</td>

</tr>

<tr>

<td>Berglunds snabbköp</td>

<td>Christina Berglund</td>

<td>Sweden</td>

</tr>

<tr>

<td>Centro comercial Moctezuma</td>

<td>Francisco Chang</td>

<td>Mexico</td>

</tr>

<tr>

<td>Ernst Handel</td>

<td>Roland Mendel</td>

<td>Austria</td>

</tr>

<tr>

<td>Island Trading</td>

<td>Helen Bennett</td>

<td>UK</td>

</tr>
<tr>

<td>Königlich Essen</td>

<td>Philip Cramer</td>

<td>Germany</td>

</tr>

<tr>

<td>Laughing Bacchus Winecellars</td>

<td>Yoshi Tannamuri</td>

<td>Canada</td>

</tr>

<tr>

<td>Magazzini Alimentari Riuniti</td>

<td>Giovanni Rovelli</td>

<td>Italy</td>

</tr>

<tr>

<td>North/South</td>

<td>Simon Crowther</td>

<td>UK</td>

</tr>

<tr>

<td>Paris spécialités</td>
 <td>Marie Bertrand</td>

<td>France</td>

</tr>

</table>

</body>

</html>
Output

A Fancy Table
Company Contact Country

Alfreds Futterkiste Maria Anders Germany

Berglunds snabbköp Christina Berglund Sweden

Centro comercial Moctezuma Francisco Chang Mexico

Ernst Handel Roland Mendel Austria

Island Trading Helen Bennett UK

Königlich Essen Philip Cramer Germany

Laughing Bacchus Winecellars Yoshi Tannamuri Canada

Magazzini Alimentari Riuniti Giovanni Rovelli Italy

North/South Simon Crowther UK

Paris spécialités Marie Bertrand France

16.Write a code to show the usage of Box Model

Intput

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: lightgrey;

width: 300px;

border: 15px solid green;

padding: 50px;

margin: 20px;

</style>

</head>

<body>

<h2>Demonstrating the Box Model</h2>

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

<div>This text is the content of the box. We have added a 50px padding, 20px
margin and a 15px green border. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</div>

</body>

</html>
Output

Demonstrating the Box Model

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

This text is the content of the box. We have added a 50px padding, 20px margin and a
15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.