1 of 92

INTRODUCTION �TO �WEB DESIGNING �AND �HTML

PrePARED BY

Dr.R.Rajadevi, AP/IT, KEC

Dr.K.R.Prasanna Kumar, IT, KEC

2 of 92

Outline

Introduction to Client Server Architecture
Web Essentials
Technologies and tools
Basic HTML tags

3 of 92

Client/Server Architecture

Server

4 of 92

Client/Server Architecture

Client: places a request to server
Server : provide services to client
Computer networks: used to support the client-server communication

Client

Server

Request “document A”

Response :”document A”

5 of 92

Web Client/ Web Server

Web Server

Web server receives a client request, process the request and give response to the client.
Allows to host the web sites
A Web server is a software - allows computers to act as web servers

Web Client

A web client is an application that communicates with a web server, using Hypertext Transfer Protocol (HTTP)

Web browser is a software that acts as a web client.

6 of 92

Clients & Servers Example

Clients (Browser)

Internet Explorer
Firefox
Mozilla
Netscape
Opera
Amaya
AOL
MSN

Servers

Apache
IIS Web Server.
Litespeed server
Google Web server(GWS)
Oracle iplanet WebServer

7 of 92

Web Essentials

“Web”- short for “World Wide Web”
A web page is a simple text file written in a markup language (called HTML)
A website is a group of HTML files that are stored on a hosting computer which is permanently connected to the internet
URL - Uniform Resource Locator - used to indicate a resource on the Internet
Home page -The main page on a particular Web site or index page

8 of 92

Domain Name, URL’s and IPs

Uniform Resource Locator (URL):

http://www.microsoft.com/faqs.html

Domain name: The specific address of a computer on the Internet

microsoft.com

Internet protocol (IP) address

192.168.1.1

9 of 92

Structure of a Uniform Resource Locators

http://www.chicagosymphony.org/civicconcerts/index.html

protocol

Domain name

pathname

filename

http => Hypertext Transfer Protocol

10 of 92

Mapping IP to Domain Name

Domain Name System – a mapping between the human-readable name (domain name) of a host and its IP address

https://www.kongu.ac.in/departments/civil.php

https: – specifies the protocol
www.kongu.ac.in – specifies the host name / domain name
departments/civil.php– specifies the path of the document on the host

11 of 92

Mapping IP to Domain Name

12 of 92

Internet Use

Send e-mail messages.
Send (upload) or receive (down load) files between computers.
Participate in discussion groups, such as mailing lists and newsgroups.
Surfing the web.
Social media etc..

13 of 92

Internet Vs WWW

14 of 92

Web Page - The Making of a Good Design

Content is important, but content alone will not make your site work.

�Good Design is:

Understandable
Interesting
Easy to use
Uniform in look and feel
Done from a visitor’s point of view:

WYSIWYW (What You See Is What You WANT)

15 of 92

Web Evolution

16 of 92

Technologies & Tools

Markup Languages

HTML, XHTML, XML, XSLT, etc....

Cascading Style Sheets (CSS)
Scripting languages

Client-side: javascript, VBScript
Server-side: perl, NodeJS, php, JSP, Servlet etc....

Web creation and editing software

Notepad, FrontPage, Flash, Site Builder etc..

Frameworks

Angular JS

17 of 92

Web Page Vs Website

A Web page is a document in the World Wide Web that is identified uniquely by a uniform resource locator (URL) and is displayed in a web browser

Called as Pages

A collection of related web pages located under a single domain name.
Called as Web Sites

18 of 92

HTML-Hyper Text Markup Language�

To Create Web pages.
Uses tags, to tell the Web browser software how to display the text contained in the document
HTML tags are not case sensitive
HTML documents are described by HTML tags
File Extension: .html, .htm, .xhtml
Tools:

Notepad , Notepad++[any text editor]
Web Browsers (Internet Explorer, Firefox, Chrome, etc..)

19 of 92

HTML – Fundamentals�Document Structure

<Body>

< / HTML>

< HTML >

20 of 92

HTML – Basic Structure

<html>

<head> <! - - optional tag- -> //nested element

<title> The title of your html page </title> //nested element

</head>

<body>

<! - - your web page content and markup - ->

</body>

</html>

21 of 92

Example

<!DOCTYPE html>�<html>�<head>�<title>Page Title</title>�</head>�<body>��<h1>My First Heading</h1>�<p>My first paragraph.</p>��</body>�</html>

22 of 92

Description

The <!DOCTYPE html> declaration defines this document to be HTML5
The text between <html> and </html> describes an HTML document
The text between <head> and </head> provides information about the document
The text between <title> and </title> provides a title for the document
The text between <body> and </body> describes the visible page content
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes a paragraph

23 of 92

HTML - Comment lines

Comments are not displayed in the browser
Starts with <!--
Ends with -->
Example:

24 of 92

HTML Tags

HTML tags are keywords (tag names) surrounded by angle brackets:
Syntax: <tagname>content goes here...</tagname>
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, but with a forward slash inserted before the tag name

25 of 92

HTML Heading Tag

HTML headings are defined with the <h1> to <h6> tags
<h1> defines the most important heading
<h6> defines the least important heading
Example:

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

26 of 92

HTML ATTRIBUTES

Attributes provide additional information about HTML elements
All HTML elements can have attributes
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value“
Example

</body>

27 of 92

HTML colors�

https://htmlcolorcodes.com/

28 of 92

�HTML -Colors

Color is the combination of red green and blue

color = “red” (Browser compatibility issues)

color=rgb(122,255,0)

color = “#FF0000”

values vary from 00 to FF (hexadecimal)

0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f

Red

Green

Blue

#FF FF FF

29 of 92

HTML Links- anchor tag

HTML links are defined with the anchor tag<a>

Example

Test.html

<a href="http://www.kongu.ac.in"> kongu</a>

The link's destination is specified in the href attribute

30 of 92

HTML Links- anchor tag � -Example output

Test.html

31 of 92

HTML Links- anchor tag

1.html

<body>

<body>

bio.html

<body>

welcome to arun Page

</body>

32 of 92

Hyperlink Example

33 of 92

QUESTION

Design a web page which creates a hyperlink named

as flower. when I click on the hyperlink flower it has

to open a page that describes rose flower[rose.html]

34 of 92

HTML Links- anchor tag - Target attribute value

Target=“value”

Value can be

35 of 92

HTML Links- anchor tag

Creates new window for the page

Opens page in the same tab

36 of 92

HTML-Internal Linking[bookmarking]

Note :page should Exceed more than one page to understand the output

37 of 92

HTML- Linking to Mail

<html>

<body>

<a href = "mailto:keerthika.cse@kongu.edu"> Send an email</a>

</body>

</html>

38 of 92

HTML Images

HTML images are defined with the <img> tag
The source file (src), alternative text (alt), and size (width and height) are provided as attributes
alt: Alternate text is used when the image cannot be displayed
Example:

39 of 92

HTML Element-<img>

<img>

Attributes – src, width, height, alt, style…

<img src=“img1.jpg” width=“500” height=“600” alt=“Image not displayed”>

40 of 92

HTML Element-<img>

Images from local folder

<img src=“image1.jpg" alt=“Image here" width=“100" height=“150">

(OR)

Images from different folder

<img src="/images/html5.gif" alt=“HTML5 Icon” width=“28px” height=“128px”>

Images from other servers

<img src="https://www.kongu.ac.in/images/logo.jpg" alt=“KEC LOGO">

41 of 92

HTML Element-<img>

Images Floating with Text:

42 of 92

HTML Element Image Maps <map>

Image Maps - Image with clickable areas

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">�

</map>

43 of 92

HTML Element Image Maps <map>

44 of 92

Image as hyper link

Image as link.html

45 of 92

Image as hyper link example-output

flower.html

Image as link.html

46 of 92

The title Attribute

title attribute is added to the <p> element
The value of the title attribute will be displayed as a tooltip when you move the mouse over the paragraph
Ex:

Kongu Engineering College

</p>

<!DOCTYPE html>

<html>

<head> Paragraph</head>

<body>

The World Wide Web (WWW), commonly known as the Web</p>

</body>

</html>

47 of 92

Nested HTML Elements

HTML elements can be nested (elements can contain elements)
<p><h2>My first paragraph</h2></p>

48 of 92

HTML Empty Tags

<br> --- line break
<hr> --- horizontal rule

49 of 92

Horizontal Rule and break tag

The <hr> tag defines a thematic break in an HTML page
It is most often displayed as a horizontal rule
<br> tag:

To display in next line in web page
No ending tag

<html>

<body>

<p title="Web"> The three primary colors, <hr> red, green and blue, <br> are made </p>

</body>

</html>

50 of 92

HTML Display

With HTML, we cannot change the output by adding extra spaces or extra lines in your HTML code.
The browser will remove any extra spaces and extra lines when the page is displayed
Ex:

<p>�This paragraph�contains a lot of spaces�in the source code,�but the browser �ignores it.�</p>

51 of 92

HTML <pre> Element

The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks
<pre> </pre>
Ex: Poem – line by line

<html>

<body>

<pre> The three primary colors,

hello

welcome </pre>

</body>

</html>

52 of 92

HTML Formatting Elements

HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
<q>- add quotation

53 of 92

HTML Formatting Elements

54 of 92

Output of Formatting tags

55 of 92

HTML Formatting Elements - Quotations

<q></q>

Inserts quotation marks “….”

<blockquote></blockquote>

Defines a section quoted from other source

<abbr></abbr>

Abbreviation title can be given - gives useful information to browsers.

<address></ address>

Contact information - displayed italic, adds line break

<cite></ cite>

For work title - used in blockquote tag.

<bdo></bdo>

Bi-directional override.
Text displayed in opposite direction.

56 of 92

HTML Formatting Elements - Quotations

57 of 92

HTML Attributes - <Style>

<p title=“Course” style=“color:red” > </p>

Title: useful for internal linking….

Style attribute:

<tagname style="property:value;">
<p style=“color:red”> Text </p>
<h1 style=“color:red”> Text </h1>

Style Properties:

background-color
color//text color
font-family
font-size
text-align
background-image

58 of 92

HTML Attributes- <Style>

59 of 92

HTML Lists

Unordered List

Item
Item
Item
Item

Ordered List

Item
Item
Item
Item

60 of 92

HTML Lists

Unordered list

Ordered list

61 of 92

Unordered HTML List- type attributes

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

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

62 of 92

HTML Elements-Unordered List

63 of 92

Ordered HTML List type attributes

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

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

64 of 92

HTML Elements-Ordered List

65 of 92

Ol tag- start attribute

66 of 92

Nested HTML Lists

List can be nested - lists inside lists
Example:

<ol>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

</ol>

67 of 92

Design a web page like this

68 of 92

HTML Tables

An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag
A table header is defined with the <th> tag. By default, table headings are bold and centered.
A table data/cell is defined with the <td> tag

69 of 92

HTML Table tags

70 of 92

HTML TABLES

<table>

Style, border….

<tr> --- Table row
<td> --- Table data

Attribute— rowspan, colspan
text, images, lists, other tables, etc.

<th> --- Table header

Attribute— colspan ,rowspan

71 of 92

<table>� <thead>� <tr>� <th>Month</th>� <th>Savings</th>� </tr>� </thead>� <tbody>� <tr>� <td>January</td>� <td>$100</td>� </tr>

<tr>� <td>February</td>� <td>$80</td>� </tr>� </tbody>

72 of 92

Colgroup and col tag in table

Design a table like this

73 of 92

ROWSPAN vs COLUMN SPAN

Cell that spans two rows (Merged two rows)
<th rowspan="2">Telephone:</th>

Cell that spans two columns (Merged two columns)
<th colspan="2">Telephone:</th>

74 of 92

HTML TABLES

75 of 92

HTML TABLES

76 of 92

HTML TABLES

<table id> - for Linking

77 of 92

HTML TABLES

78 of 92

CELL PADING vs CELL SPACING

CELL PADING: Spacing between text and cell

CELL SPACING: Spacing between two cells

79 of 92

Iframe Tag

used to display a web page within a web page.

80 of 92

Iframe output

81 of 92

Media Tags

Multimedia on the web is sound, music, videos, movies, and animations.
Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more.
Browser Support
Multimedia Formats :Multimedia files have formats and different extensions like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
Common Video Formats – MP4, WebM, and Ogg�

83 of 92

Media Tags - <video>

<video width="320" height="240" controls>

</video>

controls attribute adds video controls, like play, pause, and volume

Autoplay – Play the video automatically (does not supported in all browser)

84 of 92

Video Tag- example

85 of 92

Media Tags - <audio>

Used to play an audio file on a web page.

Your browser does not support the audio element.

</audio>

Controls attribute adds audio controls, like play, pause, and volume.

86 of 92

Audio example

87 of 92

Media Tags - Plug-ins

Plug-ins were designed to be used for many different purposes:

To run Java applets
To run Microsoft ActiveX controls
To display Flash movies
To display maps
To scan for viruses
To verify a bank id

88 of 92

object tag

defines an embedded object within an HTML document.

89 of 92

Embed tag

https://html-shark.com/HTML/EmbeddedObjects.htm

90 of 92

Iframe tag

</iframe>