Scribd
Upload
16 views79 pages

Ca730 1

Uploaded by

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

Ca730 1

Uploaded by

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

CA730

Internet and web designing

1
What is the Internet?
The Internet is a global network of
billions of computers and other electronic
devices. With the Internet, it's possible to
access almost any information,
communicate with anyone else in the
world, and do much more.
You can do all of this by connecting a
computer to the Internet, which is also
called going online. When someone says
a computer is online, it's just another way
of saying it's connected to the Internet.
2
What is the Web?
The World Wide Web—usually called the Web for
short—is a collection of different websites you can
access through the Internet. A website is made up
of related text, images, and other resources.
Websites can resemble other forms of media—like
newspaper articles or television programs—or they
can be interactive in a way that's unique to
computers.
The purpose of a website can be almost anything:
a news platform, an advertisement, an online
library, a forum for sharing images, or an
educational site like us!
3
World Wide Web
• WWW stands for World Wide Web. A technical definition of the World Wide
Web is : all the resources and users on the Internet that are using the Hypertext
Transfer Protocol (HTTP).
• A broader definition comes from the organization that Web inventor Tim
Berners-Lee helped found, the World Wide Web Consortium (W3C).
• The World Wide Web is the universe of network-accessible information, an
embodiment of human knowledge.
• In simple terms, The World Wide Web is a way of exchanging information
between computers on the Internet, tying them together into a vast collection
of interactive multimedia resources.

Note: Internet and Web is not the same thing: Web uses internet to pass over the information.

4
Basic elements of Internet
Server
• The main job of a server is to
respond to the request of the
client. The device or programme
is set up in the way that they
provide the appropriate
information to the client. This
functionality of client and server
works on a model called – call
and response.
Basic elements of Internet
Protocols
• The protocols are crucial elements
of the internet.
• In the language of networking,
protocols can be defined as a set of
rules that guide data transmission
between computing devices. These
rules make sure that the data
request is sent and received by the
client without any problem. The
most important internet protocols
are – Transmission Control Protocol
(TCP) and Internet Protocol (IP).
How does the Internet work?
It's important to realize that the Internet is a global network of physical
cables, which can include copper telephone wires, TV cables, and fiber
optic cables. Even wireless connections like Wi-Fi and 3G/4G rely on
these physical cables to access the Internet.
When you visit a website, your computer sends a request over these
wires to a server. A server is where websites are stored, and it works a
lot like your computer's hard drive. Once the request arrives, the server
retrieves the website and sends the correct data back to your
computer. What's amazing is that this all happens in just a few seconds!

7
Web Browser & Web Server
The web browser is an application software to explore www (World Wide Web). It provides an
interface between the server and the client and requests to the server for web documents and
services. It works as a compiler to render HTML which is used to design a webpage.
Whenever we search anything on the internet, the browser loads a web page written in HTML,
including text, links, images, and other items such as style sheets and JavaScript functions. Google
Chrome, Microsoft Edge, Mozilla Firefox, Safari are examples of web browsers.

8
Web Page and Web Site
Web page
• A document which can be displayed in a web browser such as Firefox,
Google Chrome, Opera, Microsoft Internet Explorer or Edge, or
Apple's Safari. These are also often called just "pages."

Website
• A collection of web pages which are grouped together and usually
connected together in various ways. Often called a "web site" or a
"site."
Overview of HTML
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

• Example Explained
• The DOCTYPE declaration defines the document type
• The text between <html> and </html> describes the web page
• The text between <body> and </body> is the visible page content
• The text between <h1> and </h1> is displayed as a heading
• The text between <p> and </p> is displayed as a paragraph
10
Overview of HTML
• What is HTML?
• HTML is a language for describing web pages.
• HTML stands for Hyper Text Markup Language
• HTML is a markup language
• A markup language is a set of markup tags
• The tags describe document content
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages
• HTML Tags
• HTML markup tags are usually called HTML tags.
• HTML tags are keywords (tag names) surrounded by angle brackets like <html>
• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, with a slash before the tag name
• Start and end tags are also called opening tags and closing tags

<tagname>content</tagname>

11
Overview of HTML
• HTML Elements
• In HTML, most elements are written
with a start tag (e.g. <p>) and an end tag
(e.g. </p>), with the content in
between:
• <p>This is a paragraph.</p>
• Web Browsers
• The purpose of a web browser (such as
Google Chrome, Internet Explorer,
Firefox, Safari) is to read HTML
documents and display them as web
pages.
• The browser does not display the HTML
tags, but uses the tags to determine
how the content of the HTML page is to
be presented/displayed to the user:

12
• HTML Page Structure
• Below is a visualization of an HTML page structure:
<html>
<body>
<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Version Year
• HTML Versions
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.0.1 1999
XHTML 2000
HTML5 2012 13
• The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration helps the browser to display a web page correctly.
• There are many different documents on the web, and a browser can only display an HTML page 100%
correctly if it knows the HTML version and type used.

• Common Declarations
• HTML5
• <!DOCTYPE html>

• HTML 4.01
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
• XHTML 1.0
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

14
Structure of HTML documents
• HTML documents are structured into two parts, the HEAD, and the BODY. Both of these are
contained within the HTML element -- this element simply denotes this as an HTML document.
• The head contains information about the document that is not generally displayed with the
document, such as its TITLE. The BODY contains the body of the text, and is where you place the
document material to be displayed. Elements allowed inside the HEAD, such as TITLE, are not
allowed inside the BODY, and vice versa.
• <html>
<head>
<title>Page Title</title>
</head>
<body>
The main part of the document goes here.
</body>
</html>

15
Structure of HTML documents
• The body of the page — your page content, including text, images, and links — appears after the
closing head tag. With the opening <body> tag, you can also set a background image or color for
your page, as well as the color of your text and HTML links. For example:
• <body bgcolor="#000000" text="#ffffff" link="#0000ff" vlink="#800080">

16
P and Heading(h1 to h6) tag
• HTML headings are defined with • HTML paragraphs are defined with the <p> tag.
the <h1> to <h6> tags.
• <h1> defines the most important
heading. <h6> defines the least important
heading.

 Input  Output
Pre tag
• <pre> tag defines a preformatted text.
• The text will be displayed exactly as written in the
• Text in a <pre> element is displayed in a fixed
HTML source code.
width font and the text preserves both spaces and
line breaks.

 Input  Output

18
Spaces & <br>
Syntax: Syntax:
Regular space: &nbsp; <br>
Two spaces gap: &ensp;
Four spaces gap: &emsp;
Code:

Output

19
Text formatting tags
1) <b> : defines bold text
2) <i> : Defines italic text
3) <u> : defines underline below the text
4) <s> : defines strike on a text.
5) <mark> : Defines the highlighted text
6) <strong> : defines a important text
7) <em> : define a emphasized text.
8) <sup> : defines the superscripted text(a )
9) <sub> : defines the subscripted text (co2)
10) <ins> : defines inserted text
11) <del> : defines deleted text
20
Align Attribute:

It is used to specify the alignment to headings.


Align is an attribute to set right, center and justify alignment to
headings. Left if the default alignment. so that you no need to define it.

Value: Right, Center, Justify

Syntax :
<p attribute-name=value> Content </p>

21
Example

Output

22
HTML Lists
• HTML lists allow to group a set of related items
in lists.

• There are three type of lists in HTML


1) Unordered List
2) Ordered List
3) Description List
Unordered list

• An unordered list starts with the <ul> tag. Each


list item starts with the <li> tag.
• Syntax:
<ul>
<li>content </li>
</ul>

• The list items will be marked with bullets (small


black circles) by default:
example
Input: Output:
Type attribute
• The HTML <ul> type Attribute is used to specifies
that which kind of marker used in the list.
• Syntax:
<ul type="disc | circle | square">
• Attribute Values:

disc: Default. A filled circle.

circle: An unfilled circle

square: A filled square.


example
Input: Output:
ordered list

• An ordered list starts with the <ol> tag. Each list


item starts with the <li> tag.

• Syntax:
<ol>
<li>content </li>
</ol>

• The list items will be marked with numbers by


default.
example
Input: Output:
Attributes:

• type: It defines which type(1, A, a, I, and i) of the


order you want in your list of numeric, alphabetic, or
roman numbers.

• reversed: It defines that the order will be descending.


( It’s value is a Boolean type : True / False)
• Syntax:
<ol attribute_name=value>
<li>content </li>
</ol>
example
Input: Output:
description list
• 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.
• Syntax:
<dl>
<dt>Define term</dt>
<dd>Define data</dd>

</dl>
example
Input:

Output:
HTML Nested List
• A list within another list is termed as nested list.
• If you want a bullet list inside a numbered list then
such type of list will called as nested list.
Input: Output:
Table tag

• The HTML <table> tag is used for defining a table.

• Tables are useful for various tasks such as


presenting text information and numerical data.

• It can be used to compare two or more items in


the tabular form layout.

• Tables are used to create databases.

• HTML Table is an arrangement of data in rows


and columns.
Table tag

• An HTML table consists of one <table> element


and one or more <tr>, <th>, and <td> elements.

• The <tr> element defines a table row, <tr>


element contains one or more <th> or <td>
elements.

• The <th> element defines a table header. By


default, table headings are bold and centered.

• The <td> element defines a table cell.


Table tag example
Input: Output:
Adding a border to an HTML Table:

• A border is set using the border attribute.

• If you do not specify a border for the table, it will be


displayed without borders.

• Specifies the border width. A value of "0" means no


border.

• When you add a border to a table, you also add


borders around each table cell

• Syntax:

<table border=value> </table>


example
Input: Output:
Collapsed Table Borders

• To avoid having double borders like in the


example above, set the border-collapse property
to collapse.
• This will make the borders collapse into a single
border.

• Syntax:

<table style=border-collapse:collapse; >


</table>
example
Input: Output:
Round Table Borders
• The borders get rounded corners by using
border-radius property of style attribute.

• Syntax:

<table style=border-radius:value; > </table>


example
Input: Output:
Width attribute
• Specifies the width of the table.
• You can specifies the table width value either in
pixel or in % Output:
Input:
height attribute
• Specifies the height of the table.
• You can specifies the table height value either in
pixel or in % Output:
Input:
Cell padding attribute
• Specifies the space between the cell borders and
their contents.
• You can specifies the value of this attribute either
in pixel or in %.
• Syntax:
<table cellpadding=value> </table>
CELL SPACING ATTRIBUTE
 Specifies the space between the cells.
 You can specifies the value of this attribute either in
pixel or in %.
 Syntax:

<table cellspacing=value> </table>


Example
rowspan
• you will use rowspan if you want to merge two
or more rows in a single row.
• To make a cell span over multiple rows, use the
rowspan attribute.
• The value of the rowspan attribute represents
the number of rows to span.
• Syntax:
<table rowspan=value> </table>
example
Input: Output:
colspan
• You will use colspan attribute if you want to
merge two or more columns into a single
column.
• To make a cell span over multiple columns, use
the colspan attribute:
• The value of the colspan attribute represents the
number of columns to span.
• Syntax:
<table colspan=value> </table>
example
Input: Output:
HTML Images
• The HTML <img> tag is used to embed an image in a
web page.

• The <img> tag is empty, it contains attributes only,


and does not have a closing tag.

• The <img> tag has two required attributes:


• src - Specifies the path to the image

• alt - Specifies an alternate text for the image

Syntax
• <img src="url" alt="alternatetext">
The src Attribute
• The required src attribute specifies the path
(URL) to the image.

THE ALT ATTRIBUTE


 The required alt attribute provides an alternate text for
an image, if the user for some reason cannot view it
(because of slow connection, an error in the src
attribute)
 The value of the alt attribute should describe the image:

 If a browser cannot find an image, it will display the


value of the alt attribute.
Image Size - Width and Height
• You can use the style attribute to specify the
width and height of an image.
• Alternatively, you can use the width and height
attributes.
• The width and height attributes always define
the width and height of the image in pixels.
• Always specify the width and height of an image.
If width and height are not specified, the web
page might flicker while the image loads.
example
Border attribute
• Specifies the border of an image.
• Syntax:
<img src="url" alt="alternatetext” border=value>
HTML Audio
• Previously, audios could be only played on web pages
using web plugins like Flash.
• audios can be added to webpages using the “audio” tag.
• The <audio> tag is an inline element that is used to
embed sound files into a web page.
• The <source> element is used to specify the audio files
which the browser may use.
• Syntax:
<audio>
<source src=“1.mp3“ type="audio/mpeg”>
</audio>
•
Supported Formats: Three formats mp3, ogg, wav are
supported by HTML5.
attributes
• Controls: Specifies that audio controls should be
displayed such as a play/pause button.
• src: specifies the URL of the audio file.(It is used
with <source> tag)
• Autoplay: specifies that the audio file will play
immediately after it loads controls.
• Loop: specifies that the audio file should
continuously repeat.
• muted: Specifies that the audio file should be
muted.
• Type: specifies the MIME type of the file
• A MIME type (now properly called "media type", but
also sometimes "content type") is a string sent along
with a file indicating the type of the file
• Preload: The preload attribute specifies if and how
the author thinks that the audio file should be
loaded when the page loads.

• There are three values of preload attribute.


1) auto : browser should load the entire audio file
when the page loads
2) Metadata: browser should load only metadata
when the page loads.
1) Metadata means data about data
(Extension(mp3,wav,ogg),length, quality)
3) None: browser should NOT load the audio file
when the page loads
Syntax
<audio preload="auto / metadata / none">
example
Input Output
Example with muted attribute
Input Output
Example with preload attribute
Input Output
HTML video
• Previously, video could be only played on web pages using
web plugins like Flash.
• The <video> tag is used to embed video content in a
document, such as a movie clip or other video streams.
• The <video> tag contains one or more <source> tags with
different video sources. The browser will choose the first
source it supports.
• The <source> element is used to specify the audio files
which the browser may use.
• Syntax:
<video>
<source src=“1.mp4“ type=“video/mp4”>
</video>
•
Supported Formats: Three formats MP4, WebM, and OGG
are supported by HTML5.
attributes
• Controls: Specifies that video controls should be
displayed (such as a play/pause button etc).
• src: specifies the URL of the video file.(It is used
with <source> tag)
• Autoplay: specifies that the video file will play
immediately after it loads controls.
• Loop: Specifies that the video will start over again,
every time it is finished.
• muted: Specifies that the audio output of the
video should be muted.
• Type: specifies the MIME type of the file
• A MIME type (now properly called "media type", but
also sometimes "content type") is a string sent along
with a file indicating the type of the file
• Preload: The preload attribute specifies if and how
the author thinks that the video file should be
loaded when the page loads.

• There are three values of preload attribute.


1) auto : browser should load the entire video file
when the page loads
2) Metadata: browser should load only metadata
when the page loads.
1) Metadata means data about data
(Extension(mp4,webM,ogg),length, quality)
3) None: browser should NOT load the video file
when the page loads
Syntax
<video preload="auto / metadata / none">
• height: Sets the height of the video player
• width: Sets the width of the video player
• poster: The poster attribute specifies an image
to be shown while the video is downloading, or
until the user hits the play button. If this is not
included, the first frame of the video will be
used instead.
example
Input

Output
Example with poster attribute
Input

Output
Example with poster attribute
Input

Output
HTML Links
• Links are found in nearly all web pages. Links
allow users to click their way from page to page.
• HTML links are hyperlinks.
• You can click on a link and jump to another
document.
• When you move the mouse over a link, the
mouse arrow will turn into a little hand.
• The HTML <a> tag defines a hyperlink. It has the
following syntax:
<a href="url">link text</a>
Href attribute
• The most important attribute of the <a> element
is the href attribute, which indicates the link's
destination.
• Clicking on the link text, will send the reader to
the specified URL address.
• By default, links will appear as follows in all
browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
example
Input

Output
Title attribute
• The title attribute specifies extra information
about an element.
• The information is most often shown as a tooltip
text when the mouse moves over the element.
example
Target attribute

• By default, the linked page will be displayed in the


current browser window. To change this, you must
specify another target for the link.

• The target attribute specifies where to open the


linked document.

• The target attribute can have one of the following


values:
• _self - Default. Opens the document in the same
window/tab as it was clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the
window
Use an Image as a Link

• To use an image as a link, just put the <img> tag


inside the <a> tag.

• Syntax
<a href=“ ">
<img src="" >
</a>
<body> attribute
<body link="color"> Specifies the default color of
unvisited links

<body alink="color"> Specifies the color of links on click

<body vlink="color"> Specifies the color of followed links


Internal & external links
• 1. Internal Link :
Internal links are hyperlinks that direct the
readers to a target page on your website.
Internal link is a link from one page to another
page on the same domain.

• 2. External Link :
External links are that which wants customers
clicking on links that directs them away from
your website. External links are sometimes
called outbound links are an important part of
search engine optimization.
Absolute URLs vs. Relative URLs
• An absolute link is a hyperlink containing a full
URL, which includes all the information needed
to find a particular site, page or document or
other addressable item on the Internet.
• Syntax:
<a href=“http://www.google.com">link</a>
• Relative hyperlinks are addresses that are
relative to the current domain or location. (a
link to a page within the same website).
• They only contain the name of the target page
prefixed with any necessary folder moves.
• Syntax:
<a href=“index.html">link</a>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy