Web Development PPT from Chd University.

1
ADVANCED CREDIT PROGRAM
PASSION TO PROFESSION
MADE BY:
AKSHIT KUMAR
PASSION NAME: WEB DESIGNING

2
WEB DESIGNING
About
Sample Web Page
Creating visually appealing and functional
websites that are optimized for user
experience
Terminology:
• Web Browser
• Web Page
• Website
• Web Server
• URL

Web Browser
A browser is an application program that provides a way to look at and interact with all the information on
the World Wide Web. Common web browsers: Microsoft Edge, Google Chrome , Mozilla Firefox.
Web Page
A web page is a simple document displayable by a browser. Such documents are written in the HTML language. A web
page can embed a variety of different types of resources such as:
•style information — controlling a page's look-and-feel
•media — images, sounds, and videos.
Website
A collection of web pages is called a website. The website can be published on at least one web server and
can be identified by a common domain name, for example – cuchd.in, google.com, youtube.com.
Web Server
A web server is a dedicated computer that circulate web pages as summoned by the user. The primary
objective of any web server is to collect, process and provide web pages to the users.
URL
A URL is a type of uniform resource locator is the address of a resource / web page on the World Wide Web.
For eg : http://cuchd.in
3

4
WEB DESIGNING
Difference between Website and Webpage
Characteristics of a Web Page:
•A simple webpage can be created very quickly.
•It takes very little time to create a webpage
compared to a Website.
•A web page and a website should be
compatible with any device, such as Mobile,
Desktop, Laptop, etc.
•The search engine provides a web page
through a link, and when a user clicks on that
link, it is redirected to the webpage of a
website.
•A webpage can have any type of information
including videos, and audios.
•It can be made up of HTML(Hypertext Markup
Language), or CSS, or JavaScript for dynamic
and attractive behavior.
Website Webpage
A website is a collection of
different web pages that are
linked together with
hyperlinks.
A webpage is a single
hypertext document.
It consists of more than one
webpage.
It is a single document that is
displayed on the user's
browser.
To develop a website,
developers need more skills
and more time compared to
a webpage.
To develop a webpage,
developers need basic HTML
knowledge and less time.
It can contain information
for different entities, such as
Javatpoint.com, which
contains information about
different technologies.
It can contain information
for a single entity, such as
currently viewing a web page
containing information
about this page only.
It is a little challenging to
create a perfect website and
requires lots of
programming.
It is very simple to create a
webpage.
Some examples of the
website are cuchd.in,
Amazon.com, etc.
Some examples of
Webpages are the currently
registration page, the home

5
HTML
CSS
JAVA SCRIPT
LANGUAGES FOR WEBSITE CREATION

6
HTML: Hyper Text Markup Language
• HTML stands for Hyper Text Markup
Language
• HTML is the standard markup
language for creating Web pages
• HTML describes the structure of a
Web page
• HTML consists of a series of elements
• HTML elements tell the browser how
to display the content
• HTML elements label pieces of content
such as "this is a heading", "this is a
paragraph", "this is a link", etc.
A Simple HTML Document

7
HTML: Hyper Text Markup Language
Example Explained
•The <!DOCTYPE html> declaration defines that this
document is an HTML5 document
•The <html> element is the root element of an HTML page
•The <head> element contains meta information about the
HTML page
•The <title> element specifies a title for the HTML page
(which is shown in the browser's title bar or in the page's
tab)
•The <body> element defines the document's body, and is a
container for all the visible contents, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
•The <h1> element defines a large heading
•The <p> element defines a paragraph

8
HTML Elements
Google Images
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
Empty HTML Elements
HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a
closing tag:

9
HTML is Not Case Sensitive
Google Images
HTML tags are not case sensitive: <P> means the same as <p>.
Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
HTML Tag Reference

10
HTML Page Structure
The content inside the <body> section will be displayed in a browser. The content
inside the <title> element will be shown in the browser's title bar or in the page's
tab.

11
HTML Editors
A simple text editor is all you need to learn HTML.
HTML Links
<a href="https://www.cuchd.in">Click here to open CU’s Website</a>
How to View HTML Source?
View HTML Source Code:
Right-click in an HTML page and select "View Page Source" (in Chrome) or "View
Source" (in Edge), or similar in other browsers. This will open a window containing the
HTML source code of the page.

12
The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute specifies
the path to the image to be displayed:
<img src="img_girl.jpg">
The width and height Attributes
The <img> tag should also contain the width and height attributes, which
specify the width and height of the image (in pixels):
<img src="img_girl.jpg" width="500" height="600">
The required alt attribute for the <img> tag specifies an alternate text for an
mage, if the image for some reason cannot be displayed. This can be due to a
slow connection, or an error in the src attribute

13
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an
image, if the image for some reason cannot be displayed. This can be due to a
slow connection, or an error in the src attribute
<img src="img_girl.jpg" alt=“Image Error">
The style Attribute
The style attribute is used to add styles to an element, such as color, font,
size, and more.
<p style="color:red;">This is a red paragraph.</p>
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.

14
HTML <hr> Tag
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of
topic).
<hr>
<p> There have been more than 60 MNC's which have recruited Engineering
students from Chandigarh University.</p>
<hr>

15
HTML <center> Tag
HTML <center> Tag CSS “text-align: center;” Property
The <center> tag is no longer supported
in HTML5.
The text-align: center; property is
supported in HTML5 and will continue to
be in the upcoming versions.
<font> Tag in HTML
<font size=" " color=" " face=" "> Our Text </font>
Attribute Name Description
color
The color attribute of the font tag in HTML is used to set the color of the text using
either hexadecimal values (i.e., #RRGGBB format) or by providing a color name (i.e., black, red,
white).
size
The size attribute of the font tag in HTML is used to set the size of the tag. The size
is expressed as numeric value.
face
The face attribute of the font tag in HTML is used to set the font to use for text. We can
mention one or more font names using a comma.

16
HTML Text Formatting
Example
This text is bold
This text is italic
This is subscript and superscript
HTML contains several elements for defining text with a special meaning.
HTML Formatting Elements
Formatting elements were designed to display
special types of text:
•<b> - Bold text
•<strong> - Important text
•<i> - Italic text
•<em> - Emphasized text
•<mark> - Marked text
•<small> - Smaller text
•<del> - Deleted text
•<ins> - Inserted text
•<sub> - Subscript text
•<sup> - Superscript text

17
HTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any extra importance.
Example
<b>This text is bold</b>
The HTML <strong> element defines text with strong importance. The content
inside is typically displayed in bold.
Example
<strong>This text is important!</strong>

18
HTML <i> and <em> Elements
Example
<i>This text is italic</i>
The HTML <i> element defines a part of text in an alternate voice or mood. The content
inside is typically displayed in italic.
The HTML <em> element defines emphasized text. The content inside is typically displayed in
italic.
Example
<em>This text is emphasized</em>

19
HTML <mark> Element
Example
<p>Do not forget to buy <mark>milk</mark> today.</p>
The HTML <mark> element defines text that should be marked
or highlighted:
The HTML <del> element defines text that has been deleted from a document.
Browsers will usually strike a line through deleted text:
Example
<p>My favorite color is <del>blue</del> red.</p>
HTML <del> Element

20
HTML <ins> Element
Example
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
The HTML <ins> element defines a text that has been inserted into a document.
Browsers will usually underline inserted text:
The HTML <sub> element defines subscript text. Subscript text appears half a character
below the normal line, and is sometimes rendered in a smaller font. Subscript text can
be used for chemical formulas, like H2O:
Example
<p>This is <sub>subscripted</sub> text.</p>
HTML <sub> Element

21
HTML <sup> Element
Example
<p>This is <sup>superscripted</sup> text.</p>
The HTML <sup> element defines superscript text. Superscript text appears half a
character above the normal line, and is sometimes rendered in a smaller font.
Superscript text can be used for footnotes, like WWW[1]
:

22
The Marquee Tag
Marquee is one of the important tags introduced in HTML to support such
scrollable texts and images within a web page.
The <marquee> tag is a container tag of HTML is implemented for creating scrollable text or images
within a web page from either left to right or vice versa, or top to bottom or vice versa. But this tag has
been deprecated in the new version of HTML, i.e., HTML 5.
The different attributes of <marquee> tag are:
Attribute Description
width provides the width or breadth of a
marquee. For
example width="10" or width="20%"
height provides the height or length of a marquee.
For example height="20" or height="30%"
direction provides the direction or way in which your
marquee will allow you to scroll. The value
of this attribute can be: left, right, up or
down

23
Scroll up
<marquee width="60%" direction="up" height="100px"> This
is a sample scrolling text that has scrolls in the upper
direction. </marquee>
Scroll Down
<marquee width="60%" direction=“down" height="100px"> This is a sample scrolling
text that has scrolls in the upper direction. </marquee>

24
Scroll left to right
Scroll Right to Left
<marquee width="60%" direction="left" height="100px"> This is a
sample scrolling text that has scrolls texts to left. </marquee>
<marquee width="60%" direction="right" height="100px"> This is
a sample scrolling text that has scrolls texts to right. </marquee>

25
The different attributes of <marquee> tag are:
Attribute Description
width provides the width or breadth of a marquee. For
example width="10" or width="20%"
height provides the height or length of a marquee. For
example height="20" or height="30%"
direction provides the direction or way in which your marquee
will allow you to scroll. The value of this attribute can
be: left, right, up or down
scrolldelay provides a feature whose value will be used for
delaying among each jump.
scrollamount provides value for speeding the marquee feature
behavior provides the scrolling type in a marquee. That scrolling
can be like sliding, scrolling or alternate
loop provides how many times the marquee will loop
Bgcolor Background color

26
The <table> tag defines an HTML table.
An HTML table consists of one <table> element and one or more <tr>, <th>,
and <td> elements.
The <tr> element defines a table row, the <th> element defines a table
header, and the <td> element defines a table cell.
HTML <table> Tag
HTML <caption> Tag
The <caption> tag defines a table caption.
The <caption> tag must be inserted immediately after the <table> tag.

27
Example
<html>
<head>
<title> Savings </title>
</head>
<body>
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>Rs10000</td>
</tr>
<tr>
<td>February</td>
<td>Rs8000</td>
</tr>
</table>
</body>
</html>
<table border="1">
<tr>
<th>Table Header</th><th>Table Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
</tr>
</table>

28
Background Color
<table style="background-color:#FFFFE0;">
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>

29
Background Color for Table Row
<tr style="background-color:#BDB76B;color:#ffffff;">
</tr>
<tr>
</tr>
<tr>
</tr>
</table>

30
<tr style="background-color:#BDB76B;color:#ffffff;">
</tr>
<tr>
</tr>
<tr>
<td>Table cell 3</td><td style="background-color:#ff0000;">Table cell 4</td>
</tr>
</table>
Background Color for Table Cell

31
HTML LISTS
HTML lists allow web developers to group a set of related items in lists.

32
HTML LISTS
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default.
<ul>
<li>WEB DESIGNING</li>
<li> CODING</li>
<li>PYTHON</li>
</ul>

33
HTML LISTS
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
<ol>
<li> CODING</li>
<li>PYTHON</li>
</ol>

34
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:
<dl>
<dt>WEB DESIGNING</dt>
<dd>- Passion ACP</dd>
<dt>Python Programming</dt>
<dd>- Course in 2nd
year</dd>
</dl>

35
HTML List Tags
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

36
Unordered HTML List- Choose List Item Marker
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
<ul style="list-style-type:circle;">
<li> CODING</li>
<li>PYTHON</li>
</ul>

37
Ordered HTML List- The Type Attribute
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers
Type Description
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

38
HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a server for processing.

39
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements,
such as: text fields, checkboxes, radio buttons, submit buttons, etc.

40
The <input> Element
An <input> element can be displayed in many ways, depending on the type attribute.
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one
of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or
more of many choices)
<input type="submit"> Displays a submit button (for submitting
the form)
<input type="button"> Displays a clickable button

41
Text Fields
The <input type="text"> defines a single-line input field for text input.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
The default width of an input field is 20 characters.

42
Example
<!DOCTYPE html>
<html>
<body>
<h1>The input disabled attribute</h1>
<form action="/action_page.php">
<input type="text" id="fname" name="fname" value="John" disabled><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

43
The size Attribute
The input size attribute specifies the visible width, in characters, of an input field.
The default value for size is 20.
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4"><br><br>
</form>

44
The maxlength Attribute
The input maxlength attribute specifies the maximum number of characters allowed in an input
field.
<form>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

45
The multiple Attribute
The input multiple attribute specifies that the user is allowed to enter more than one value in an
input field.
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>

46
The required Attribute
The input required attribute specifies that an input field must be filled out before submitting the
form.
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>

47
The autofocus Attribute
The input autofocus attribute specifies that an input field should automatically get focus when
the page loads.
<form>
<input type="text" id="fname" name="fname" autofocus><br>
<input type="text" id="lname" name="lname">
</form>

48
Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>

49
Checkboxes
Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

50
The Submit Button
The <input type="submit"> defines a button for submitting the form data to a form-handler.
<input type="text" id="fname" name="fname" value="John"><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
</form>

51
HTML Multimedia
It can be almost anything you can hear or see, like images, music, sound, videos, records, films,
animations, and more.

52
The HTML <video> Element
To show a video in HTML, use the <video> element:
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="G:ACP _nitika _datavideos ACP4. CULTURAL
ACHIEVEMENTS.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
The controls attribute adds video controls, like play, pause, and volume.

53
The HTML <audio> Element
To show a video in HTML, use the <video> element:
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="C:Usersadmin1DownloadsItni Shakti Hamein
Dena Data.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>

Web Development PPT from Chd University.

More Related Content

Similar to Web Development PPT from Chd University. (20)

Recently uploaded (20)

Web Development PPT from Chd University.