Scribd
Upload
37 views4 pages

Sop1 1

Uploaded by

Sai
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views4 pages

Sop1 1

Uploaded by

Sai
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Skill Set 1- Advanced Web Designing

SOP 1: Creation of website using HTML5


Aim: To inculcate web designing skills using advance tags.
Objectives :1. Understand the principals of creating an effective web page.
2. To acquaint student with advanced designing skills by using
advanced tags of HTML5.
Software’s used:
1)Text editor : gedit(preinstalled with Ubuntu), Notepad++.
2)Browser : Mozilla Firefox(preinstalled with Ubuntu),Google chrome.
Skillset learned :
Title:Create a website using HTML5 and CSS using any 4 CSS properties .
Page must contain proper Meta information and design web page as follows-
The index page must contain a heading which is highest among other text on
pages and must be at center of the page. There must be a paragraph which
introduces general information about the theme chosen must have at least 3
physical style tags and one image with alternate text. This page must be
connected to other two pages with proper navigational links.
<meta> tag : The meta tag is a tag in HTML that describe some aspects of
contents of a web page.It is a singular tag placed between <head> and
</head> tags.
Hyperlink : A hyperlink is a word, phrase, or image that you can click on to
jump to a new document or a new section within the current document.
Syntax- <a href="url">link text</a>

<img> :The <img> tag is used to embed an image in an HTML page.

The <img> tag has two required attributes:

 src- Specifies the path to the image


 alt - Specifies an alternate text for the image, if the image for some
reason cannot be displayed.
<img src="smiley.gif" alt="Smiley face" width="42" height="42" >

CSS :CSS stands for cascading style sheet.CSS describes how HTML elements
are to be displayed on screen, paper, or in other media. It can control the
layout of multiple web pages all at once

CSS Syntax : A CSS rule set contains

 a selector
 a declaration block

H1{color:yellow;font-size:18 px}

Code :

index.html

<html>
<head>
<title> Guru Gobind Singh Public School and Junior College
</title>
<meta name="author" content="Guru Gobind Singh Jr. College">
<meta name="description" content="School, Junior College
and Gradiation College">
<meta name="keyword" content="College,Engineering,Junior
College,school,Polytechnic">
<link rel="stylesheet" href="college.css">
</head>
<body>
<h1>Guru Gobind Singh Public School and Junior College </h1>
<p>Guru Gobind Singh Public School and Junior College
is located at Indira nagar. Our college
has separate classrooms for every class and there are practical
labs for each subject. </p>
<label>Labs Available for Subjects</label>
<b>Physics, Chemistry, Biology, IT and
Geography</b><br/></br>
<i>Students can visit lab for
<u>extra studies</u></i><br/></br>
Separate teachers are available for every class
9<sup>th</sup>,10<sup>th</sup>,11<sup>th</sup> and
12<sup>th</sup>.<br/></br>
<img src="college.jpg" height="200px" width="200px" alt="Guru
gobind singh college"><br/></br>
<a href="page2.html">Send Us Feedback</a>
</body>
</html>
Page2.html :
<html>
<head>
<title>Feedback : K.K.Wagh</title>
<meta name="author" content="K.K.Wagh College">
<meta name="description" content="Feedback
Page allows user to contact college and get information">
<meta name="keyword"
content="Feedback,College,Engineering,JuniorCollege,school,Universal
school">
<link rel="stylesheet" href="college.css">
</head>
<body align="center">
<h2>Send us Feedback</h2>
<form name="feedform" method="post">
<label>Enter Name:</label><input type="text"
name="username" required><br/><br/>
<label>You are : <input type="radio"
name="usertype" value="company">Company
<input type="radio" name="usertype" value="person">Person <br/><br/>
<label>Enter Email:</label><input type="email"
name="mailid" required pattern=
"[a-zA-Z]{1}[a-zA-Z0-9]*@[a-zA-Z]{5}.[a-zA-Z]{3}"><br/><br/>
<textarea name="feedback"
placeholder="Enter Feedback" rows="10"
cols="50"></textarea><br/><br/>
<input type="submit" name="submit"
value="Submit">
</form>
</body>
</html>

College.css
body { background-color:pink; color:green; }
h1,h2 { text-align:center; }

You might also like