INTRODUCTION �TO �WEB DESIGNING �AND �HTML

Outline

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

​

​

​

Client/Server Architecture

Server

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”

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
• A web server is software and hardware that uses HTTP (Hypertext Transfer Protocol) and other protocols to respond to client requests made over the World Wide Web. The main job of a web server is to display website content through storing, processing and delivering webpages to users. Besides HTTP, web servers also support SMTP (Simple Mail Transfer Protocol) and FTP (File Transfer Protocol), used for email, file transfer and storage.

​

​

Web Client�

• A web client is an application that communicates with a web server, using Hypertext Transfer Protocol (HTTP)
• A web client is a client-side application used for connecting to a web server over HTTP. It is typically a web browser or web app which displays web pages received from the server and allows users to interact with the web server.
• Web browser is a software that acts as a web client. A web browser is application software for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files 

​

Web browser

• It is a software tool that computer use to communicate with web servers on the internet. Web browsers enable to download and display the web pages that user requests.
• A web browser should be capable of understanding HTML and display text. Now web browser supports pictures, video, sound and even 3D images.
• In the address bar of the browser, type the URL and it will display the web page.

Clients & Servers Example

Clients (Browser)

• Internet Explorer
• Firefox
• Mozilla
• Netscape
• Opera
• MSN
• UC Browser
• Google chrome
• Apple Safari

​

​

​

Servers

• Apache
• IIS Web Server.
• Litespeed server
• Google Web server(GWS)
• Oracle iplanet WebServer
• Nginx and Cloudflare Server

8

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.
• A website is a collection of web pages belonging to a particular person or organization.
• 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

​

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

Structure of a Uniform Resource Locators

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

protocol

Domain name

pathname

filename

http => Hypertext Transfer Protocol

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

Mapping IP to Domain Name

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..

Internet Vs WWW

Internet

• Internet definition: The Internet is a network of networks, connected computers, servers, and countless devices from around the world on which the (WWW) web runs on.
• The Internet is a worldwide network that helps in connecting computer networks all over the world. The Internet allows users to instantly exchange information and resources; because it is a public network, anyone can access it.

WWW

• The World Wide Web (WWW) is an internet-based application.
• It refers to the enormous number of online sites that are linked together.
• Hyperlinks are used to connect these sites.
• As a result, the user may effortlessly navigate from one page to the next to find the information they need.
• A website is a collection of related web pages.

�Key differences between WWW and Internet�

• Internet is the backbone of communication systems
• WWW is a type of service that uses communication systems.
• Internet is an infrastructure, whereas WWW is a service.
• the Internet is primarily based on hardware, but WWW is more software-oriented.
• the Internet is a superset of WWW. On the other hand, WWW is a subset of the Internet.

Key differences between WWW and Internet

• The Internet is independent, whereas WWW’s existence depends on the Internet.
• the Internet is a network of connected computers on which the web (WWW) runs. On the other hand,
• WWW is one of the various services offered by the Internet in order to share information.

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)

Web Evolution

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

​

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

​

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..)

HTML – Fundamentals�Document Structure

<Head>

<title> <!- -put your home page name - - >

</title>

</Head>

<Body>

<!—put your homepage design here🡪

</Body>

​

​

< / HTML>

< HTML >

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>

Example

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

• Run: C:/Users/ADMIN/Desktop/sample.html

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

HTML - Comment lines

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

<!--This is a comment. -->

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

​

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>

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 bgcolor=“green” >

<p> hai </p>

</body>

��The href Attribute�

​

​

​

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

​

<a href="https://www.w3schools.com">Visit W3Schools</a>

​

​

​

​

​

​

​

​

​

​

HTML colors�

<BODY bgcolor=“color” >

​

<BODY bgcolor=“blue”>

<BODY bgcolor=rgb(255,0,0) >

<BODY bgcolor=“#0000FF”>

​

https://htmlcolorcodes.com/

​

34

�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

​

​

​

35

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

​

​

HTML Links- anchor tag � -Example output

​

• Test.html

HTML Links- anchor tag

​

1.html

<body>

<a href=“bio.html”> read my BIO </a>

<body>

​

bio.html

<body>

welcome to arun Page

</body>

​

​

​

Hyperlink Example

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]

HTML Links- anchor tag - Target attribute value

Target=“value”

Value can be

HTML Links- anchor tag

<a href=“bio.html” target=“_blank” > BiO DATA </a>

• Creates new window for the page

​

​

<a href=“bio.html” target=“_self” >Bio Data</a>

• Opens page in the same tab

​

​

42

HTML-Internal Linking[bookmarking]

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

HTML- Linking to Mail

<html>

<body>

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

</body>

</html>

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:

<img src=“ group.jpg" alt="Tour" width="600" height="300“/>

​

​

HTML Element-<img>

• <img>
• Attributes – src, width, height, alt, style…

​

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

​

​

​

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">

​

HTML Element-<img>

• Images Floating with Text:

​

HTML Element Image Maps <map>

• Image Maps - Image with clickable areas

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

<map name="workmap">

<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.html">

</map>

​

​

​

​

HTML Element Image Maps <map>

​

​

​

​

Image as hyper link

Image as link.html

Image as hyper link example-output

flower.html

Image as link.html

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:

<p title=“KEC">

Kongu Engineering College

</p>

<!DOCTYPE html>

<html>

<head> Paragraph</head>

<body>

<p title="WWW“ >

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

</body>

</html>

Nested HTML Elements

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

HTML Empty Tags

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

​

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>

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>

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>

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

​

​

HTML Formatting Elements

Output of Formatting tags

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.

HTML Formatting Elements - Quotations

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

​

​

​

​

HTML Attributes- <Style>

​

​

​

Special Characters and �Horizontal Rules

• When marking up text, certain characters or symbols may be difficult to embed directly into an HTML5 document. Some keyboards do not provide these symbols (such as ©), or their presence in the markup may cause syntax errors (as with <).
• For example, the markup

<p> if x < 10 then increment x by 1 </p>

• results in a syntax error because it uses the less-than character (<) which is reserved for start tags and end tags such as <p> and </p>

• .

​

• HTML5 provides character entity references (in the form &code;) for representing special characters.

<p> if x &lt;10 then increment x by 1 </p>

Some common HTML character entity references:

Symbol Description Character Entity reference

& ampersand &amp;

‘ apostrophe &apos;

> greater-than &gt;

< less-than &lt;

“ quote &quot;

​

​

​

Other common character entities

• non-breaking space   &nbsp;
• © copyright &copy;
• ¼ fraction ¼ &frac14;
• 1/2 fraction &frac12;

​

HTML Lists

• Unordered List
• Item
• Item
• Item
• Item
• Ordered List
• Item
• Item
• Item
• Item

​

HTML Lists

Unordered list

​

​

​

Ordered list

​

​

​

70

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

HTML Elements-Unordered List

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

​

HTML Elements-Ordered List

Ol tag- start attribute

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>

<li>Milk</li>

</ol>

Design a web page like this

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

​

HTML Table tags

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

​

​

<thead>, <tbody>, <tfoot>

<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> 

<tfoot>�    <tr>�      <td>Sum</td>�      <td>$180</td>�    </tr>�  </tfoot>�</table>

Colgroup and col tag in table

Design a table like this

​

​

​

82

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>

​

​

HTML TABLES

HTML TABLES

​

​

HTML TABLES

​

​

​

​

• <table id> - for Linking

HTML TABLES

Iframe Tag

• used to display a web page within a web page.

Iframe output

Forms

• When browsing websites, users often need to provide information such as search queries, e-mail addresses and zip codes. HTML5 provides a mechanism, called a form, for collecting data from a user.
• Data that users enter on a web page is normally sent to a web server that provides access to a site’s resources (for example, HTML5 documents, images, animations, videos).

Forms

• These resources are located either on the same machine as the web server or on a machine that the web server can access through the Internet.
• When a browser requests a publicly available web page or file that’s located on a server, the server processes the request and returns the requested resource.
• A request contains the name and path of the desired resource and the protocol (method of communication). HTML5 documents are requested and transferred via the Hypertext Transfer Protocol (HTTP).

Internal linking

• How to hyperlink one web page to another.
• Internal linking—a mechanism that enables the user to jump between locations in the same document.
• Internal linking is useful for long documents that contain many sections.
• Clicking an internal link enables the user to find a section without scrolling through the entire document.

Internal linking

HTML internal link is linked within the same web page.

​

This link can be an absolute path or relative path.

​

HTML internal link name is followed by the hash sign(#).

You have to assign an id to refer section of your page, which is referred to as an internal link to the same page.

​

When you click on an internal anchor link, you will scroll automatically to the referred section and display it on your browser.

Meta Elements

• HTML <meta> tag is used to represent the metadata about the HTML document. It specifies page description, keywords, copyright, language, author of the documents, etc.
• The metadata does not display on the webpage, but it is used by search engines, browsers and other web services which scan the site or webpage to know about the webpage.

​

Meta Elements

• With the help of meta tag, you can experiment and preview that how your webpage will render on the browser.
• The <meta> tag is placed within the <head> tag, and it can be used more than one times in a document.

​

Meta Elements

• Following are some specific syntaxes of meta tag which shows the different uses of meta Tag.

1. <meta charset="utf-8">  

It defines the character encoding. The value of charset is "utf-8" which means it will support to display any language.

2. <meta name="keywords" content="HTML, CSS, JavaScript, Tutorials">  

It specifies the list of keyword which is used by search engines.

​

​

Meta Elements

• 3. <meta name="description" content="Free Online tutorials">  

It defines the website description which is useful to provide relevant search performed by search engines.

4. <meta name="author" content="thisauthor">  

It specifies the author of the page. It is useful to extract author information by Content management system automatically.

​

Meta Elements

• 5. <meta name="refresh" content="50">  

It specifies to provide instruction to the browser to automatically refresh the content after every 50sec (or any given time).

6. <meta http-equiv="refresh" content="5; url=https://www.javatpoint.com/html-tags-list">    

In the above example we have set a URL with content so it will automatically redirect to the given page after the provided time.

​

​

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�

Media Tags

Media Tags - <video>

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

<source src="movie.mp4" type="video/mp4">

</video>

​

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

​

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

Video Tag- example

Media Tags - <audio>

• Used to play an audio file on a web page.

<audio controls>

<source src="horse.ogv" type="audio/ogg">

<source src="Vathi coming.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

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

Audio example

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

​

object tag

• defines an embedded object within an HTML document.

​

<object width="100%" height="500px" data="snippet.html"></object>

<object data="audi.jpeg"></object>

​

​

Embed tag

<embed src="audi.jpeg">

<embed width="100%" height="500px" src="snippet.html">

​

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

Iframe tag

<iframe width="420" height="315“ src=“https://www.youtube.com/embed/D4jj3HHrnSU>

</iframe>

Thank you