WEB DESIGNING
ASSIGNMENT
INSTITUTE OF MANAGEMENT STUDIES
DAVV, INDORE
SESSION 2019-20
WEB DESIGNING AND ANIMATION TOOLS
THIRD INTERNAL ASSIGNMENT
SUBMITTED TO: SUBMITTED BY:
DR. NIRANJAN Tarun Jodhwani
SHRIVASTAV Tushar Nirankari
Ujjwal Soni
Vashnavi Wagh
CONTENT
INTRODUCTION TO WEB PAGE
INTRODUCTION T0 HTML
HOW TO CREATE HTML PROGRAM
ADOBE TOOLS
APPLICATIONS OF ADOBE TOOLS
WEB PAGE
• WHAT IS a WEBSITE?
• Well, a website is a collection of webpages, photos, articles, videos or any other
digital media organized perfectly so that users can easy navigate around it and
find the information which they came seeking.Wonderhowto.com is a perfect
example of a website. A website are hosted on web servers connected to
Internet or private networks such as Intranet. Every website is identified with
its uniques URL or IP address, even every digital media hosted on a website has
its own URL ( Uniform Resource Locator ). Every website has its own top-
level domain extension such as --
• .com - Commercial websites
• .net- Network related websites
• .edu - Educational related websites
• .org - organization related websites
• There are much more.
HTML
• Hypertext Markup Language (HTML) is the standard markup language for documents designed
to be displayed in a web browser. It can be assisted by technologies such as Cascading Style
Sheets (CSS) and scripting languages such as JavaScript.
• Web browsers receive HTML documents from a web server or from local storage
and render the documents into multimedia web pages. HTML describes the structure of a web
page semantically and originally included cues for the appearance of the document.
HOW TO CREATE HTML PROGRAM
• STEP ONE: Editor- First of all you need a editor program on which you will write your HTML
codes. I recommend you to use Notepad++ ( a free program ), its very easy to use and you can
easily manage your complex HTML codes with ease as it show HTML tags, attributes and contents
with different colors.
• Image Editor - Well you don't need any software for editing image or any other software like
Photoshop for graphics because we will be using Internet to get all our resources that we will use
on Web Pages.
• Creative - You should have very creative thinking and should not stop experimenting. If you have
these then you can surely make amazing web pages just by using basic HTML.
• First first that you should do immediately is to save it with any name with extension ".html" or
".htm". Ex- ck.html
STEP TWO
• Every Web page starts with the <html> tag telling the web browser the start of the HTML document and ends
with </html> which indicates the browser that it is the end of the HTML document, there are even more tags
which you will be learning further, but one thing which you will see that these tags <html>, <body> etc are not
displayed in the web browser. The browser only displays the content between the tags, but the tags themselves
are hidden.
• Here is the Syntax of a <html> tag or we can say, the basic structure of the web page -
• <html><head><title>xxxxxxxxxxxxxxxxxxxxxxx</title></head><body>xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxx </body></html>
• Let me explain you the two types of tag before we go further:
• Container tag/Non-Empty tags - Container tags are also known as Non-Empty tags. These types of tags
requires opening as well as closing.
• Example: <html>, <head>, <title>, <body>, <i> these types of tags requires closing.
• Every container tag is closed by giving a slash sign ( / ) just before the name of the tag
• Example: </html>, </head>, </title>, </body>,</i> are the examples of closing tags.
• B. Empty tag/Non-Container tags - Empty tags are also know as Non-Container tags. These
types of tags don't requires closing even if you have opened it.
• Example: <br>, <img>, etc
• Attributes - Every tag have their own attributes and each attribute provide additional information
about an tag. Attributes are always used withing the tag and in the following manner -
• <tag attribute="value">
• The following example will make it clear - Suppose if you want to have background color of your
web page as black then you will use "bgcolor" attribute within the <body> tag.
Open Notepad++ and type the following code -
<html><head><title>Web Designing</title></head><body
bgcolor="black">
<font face="Bradley Hand ITC" color="white" size="5">You are learning
Web Designing</font>
<font face="Cooper Black" color="green" size="4">You are learning Web
Designing</font>
<font face="broadway" color="red" size="6">You are learning Web
Designing</font>
<font face="Aerial" color="yellow" size="8"> You are learning Web
Designing</font>
<font face="Comic Sans MS" color="purple" size="10"> You are learning
Web Designing</font>
</body></html>
STEP THREE
• For adding image as a background of your web pages you can choose either of the
following options:-
• Using Background attribute:
• By using background attribute you can easily add image as a background. This is how you
will be using it-
• <body background="image source">
• Here you will replace "image source" [without the quotes] with the complete path of
the image.
• Example: Suppose your image is stored in the folder named "images" located in the "E"
drive of your computer, then you will be using the following path for this image:-
• E:\image\something.jpg
• Here something.jpg is your image name with .jpg extension.
• Tips
• You can even know the compete path of your images by opening it with internet
explorer.You can do it by right clicking the image and selecting Internet explorer or any
other browser from the open with option.
• You can use "bgcolor" and "background" attribute at the same, just to ensure that the web
browser displays the color assigned if it fails to show the background image.
• Using the Style Attribute:
• If you want to link a different site or any other web page, then you have to use <a> tag also known
as anchor tag. If your web page is named "something.html" and is stored in the folder named
"webpages" and you wanna link it to your web pages, then you will use the following code:-
• <a href="webpages/something.html" rel="no follow" target="_blank" >Something</a>
• This code will display the text "Something" in a underlined blue font, the same as this one . If you
want to change the color of the unvisited , visited and active link, then you have to use the following
attribute with the <body> tag:-
• <body link="blue" alink="purple" vlink="red">
• If you want to link any Website to your web page then use the URL of that web page with in the
<a> tag -
• <a href="https://www.google.com/">google</a>
APPLICATION OF ADOBE TOOLS
• The Adobe Creative Cloud retains many of the features of Adobe Creative Suite and introduces new features; foremost is the instant
availability of upgrades, saving to the cloud, and easier sharing. In June 2014, the company announced 14 new versions of the Creative
Cloud essential desktop tools, four new mobile apps, and the availability of creative hardware for enterprise, education and
photography customers.
• Packages
• Adobe offers four tiers of the Creative Cloud subscription service for individuals (there are other types for Business and Schools):
• Photography, which contains some photography-related features of Adobe Creative Cloud and access to Photoshop CC and
Lightroom CC.
• Single App, which contains all the features of Creative Cloud plus access to a single application of the user's choice in the suite out of
a list of 11 selected applications.
• All Apps, the main tier of Creative Cloud that contains all the features of Creative Cloud plus access to all applications within the
suite.
• All Apps + Adobe Stock, which contains all the standard features of Creative Cloud plus features for Adobe Stock.
• Brief descriptions of the applications available in Adobe Creative Cloud individually
or as a complete package:
• Adobe Acrobat is a software family dedicated to Adobe's Portable Document
Format (PDF). Adobe Acrobat Standard, Adobe Acrobat Professional, and Adobe
Acrobat Professional Extended all allow for the creation of PDF files.Adobe
Reader is an application that allows the reading of PDF files.[citation needed]
• Adobe After Effects is a digital motion graphics and compositing software published
by Adobe Systems. It is often used in film and video post-production.
• Adobe Animate is a vector animation software used to design interactive
animations with drawing tools to publish them on multiple platforms like Adobe
Flash,Adobe AIR, HTML5 canvas,WebGL. It is the successor to Adobe Flash
Professional and also includes features of Adobe Edge, which is discontinued.
– Adobe Flash Builder, formerly Adobe Flex Builder, is an integrated development
environment (IDE) built on the Eclipse platform meant for developing rich Internet
applications (RIAs) and cross-platform desktop applications for the Adobe Flash
platform.
– Adobe Scout, a profiling tool for Flash SWF files.
HTML PROGRAM TO INTERFACE WEB PAGE
WITH BUTTON
A clickable button is marked up as follows:
<button type="button">Click Me!</button>
<!DOCTYPE html>
<html>
<body>
<h2>The Button Element</h2>
<button type="button" onclick="alert('Hello world!')">Click
Me!</button>
</body>
</html>
Definition and Usage
The <button> tag defines a clickable button.
Inside a <button> element you can put content, like text or images. This is the
difference between this element and buttons created with the <input> element.
Tip: Always specify the type attribute for a <button> element. Different
browsers use different default types for the <button> element.
Tip: Buttons are often styled with CSS:
An Example:-
An Example Of Coding For
CSS Button:-
Example to Add A Image Background-
<html>
<head>
<style>
#{
border: 2px solid black;
padding: 25px;
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
</style>
</head>
<body>
<h2>background-size: auto (default):</h2>
<div id="example1">
<h2>Hello World</h2>
<p>The background image is displayed in its original size.</p>
</div>
<h2>background-size: 300px 100px:</h2>
<div id="example2">
<h2>Hello World</h2>
<p>Here, the background image is set to 300px wide and 100px high.</p>
</div>
</body>
</html>
An Example of A Form With
Multiple Pages Linked :-
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
*{
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
}
#regForm {
background-color: #ffffff;
margin: 100px auto;
font-family: Raleway;
padding: 40px;
width: 70%;
min-width: 300px;
}
h1 {
text-align: center;
}
input {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
display: none;
}
button {
background-color: #4CAF50;
color: #ffffff;
border: none;
padding: 10px 20px;
font-size: 17px;
font-family: Raleway;
cursor: pointer;
}
button:hover {
opacity: 0.8;
}
#prevBtn {
background-color: #bbbbbb;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #4CAF50;
}
</style>
<body>
<form id="regForm" action="/action_page.php">
<h1>Register:</h1>
<!-- One "tab" for each step in the form: -->
<div class="tab">Name:
<p><input placeholder="First name..." oninput="this.className = ''" name="fname"></p>
<p><input placeholder="Last name..." oninput="this.className = ''" name="lname"></p>
</div>
<div class="tab">Contact Info:
<p><input placeholder="E-mail..." oninput="this.className = ''" name="email"></p>
<p><input placeholder="Phone..." oninput="this.className = ''" name="phone"></p>
</div>
<div class="tab">Birthday:
<p><input placeholder="dd" oninput="this.className = ''" name="dd"></p>
<p><input placeholder="mm" oninput="this.className = ''" name="nn"></p>
<p><input placeholder="yyyy" oninput="this.className = ''" name="yyyy"></p>
</div>
<div class="tab">Login Info:
<p><input placeholder="Username..." oninput="this.className = ''" name="uname"></p>
<p><input placeholder="Password..." oninput="this.className = ''" name="pword" type="password"></p>
</div>
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
//... and run a function that will display the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class on the current step:
x[n].className += " active";
}
</script>
</body>
</html>
Results Of HTML Program
