Path To Web Development

Path to Web Development
Sumesh Kumar Nair

NTG Infotech Pvt. Ltd.
Introduction
• In this workshop we will go through the idea of how web pages are
made and how they work over the internet
• What is internet?
• The internet is a global network of interconnected computers that communicate with each other. It
allows the exchange of data and information between devices worldwide.
• How do websites work?

• Websites are hosted on web servers, which are powerful computers accessible through the internet.
• Web Browsers are used to retrieve web pages from internet and display them on screen.
Client Server Model Cont’d
• The client-server model is a fundamental architecture used in computing and networking to enable
communication and resource sharing between two types of entities: clients and servers.
Client Server Model Cont’d
• Client
• A client is an entity, which can be a computer, device, or software application
• requests services, resources, or data from a server
• Client initial communication
• Clients can be end-user devices like personal computers, smartphones, or IoT devices
• Server
• A server is an entity, typically a computer or a specialized hardware device
• provides services, resources, or data to clients
• listen for incoming client requests and respond to those requests
Characteristics of Client Server Model
• Centralized Service
• Request-Response
• Statelessness
• Scalability
• Security and Control
• Distributed Systems
Common Example of Client Server Model
 Web servers (servers) serving web pages to web browsers (clients).
 Email servers (servers) delivering email to email clients (clients).
 Database servers (servers) providing data to database clients (clients).
 File servers (servers) sharing files with file client applications (clients).
 Online gaming servers (servers) facilitating gameplay for game client applications (clients).
What is HTML?
• HTML stands for HyperText Markup Language.
• standard markup language used to create web pages
• provides a structured way to present content on the web
• defines the structure and layout of a webpage
HTML syntax and structure
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
 <!DOCTYPE html> declares the document type and version.
 <html> is the root element that contains all other elements.
 <head> contains metadata about the document, such as the title.
 <title> sets the title displayed in the browser tab.
 <body> contains the visible content of the webpage.
 <h1> is a heading element.
HTML Elements
•The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
•Examples of some HTML elements:
<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

HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
HTML Headings
• HTML headings are titles or subtitles that you want to display on a webpage.
• HTML headings are defined with the <h1> to <h6> tags.
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>
HTML Paragraphs
• The HTML <p> element defines a paragraph.
• A paragraph always starts on a new line.
• Browsers automatically add some white space (a margin) before and after a paragraph.
• The <p> tag in HTML is used to define a paragraph of text.
• It is one of the most fundamental and commonly used HTML elements for structuring content.
• The <p> tag allows you to group and format text, creating separate blocks of content, which are
typically displayed with some spacing above and below to visually separate them.
• Here's an explanation of the <p> tag
<p>This is a paragraph of text.</p>

HTML Links – Hyperlinks
• It often referred to as hyperlinks or just "links,“.
• It enable users to navigate between different web pages or resources on the internet.
• Here's an explanation of how HTML links work:
1. HTML Anchor Element.

2. Hypertext Reference (href).
3. Link Text.
4. Relative Links.
<a href="url">link text</a>

HTML Images
• Images can improve the design and the appearance of a
web page.
<img src=“Image Source" alt=“alternate text”>
HTML List
• HTML provides a way to create lists on web pages. There are three main types of lists in HTML
1. Ordered Lists
2. Unordered Lists
3. Definition Lists
1. Ordered Lists ( <ol> ): Ordered 2. Unordered Lists ( <ul> ): 3. Definition Lists ( <dl> ): Definition lists
lists are used to create numbered Unordered lists are used to create are used to create lists of terms and their
lists. bullet-point lists. definitions. They consist of pairs of
terms ( <dt> ) and definitions ( <dd> )
<ol> <ul> <dl>
<li>Item 1</li> <li>Item A</li> <dt>Term 1</dt>
<li>Item 2</li> <li>Item B</li> <dd>Definition 1</dd>
<li>Item 3</li> <li>Item C</li> <dt>Term 2</dt>
</ol> </ul> <dd>Definition 2</dd>
</dl>
ul -> unordered list, ol-> ordered list, li-> list item, dl-> Definition List, dt-> Definition Term, dd-> Definition Description
HTML Tables
• Table is a structured grid of data or information organized in rows and columns.
• It used to present and arrange data in a tabular format.
• It makes it easier for users to read, compare, and understand the information.
Table Structure: Column and Row Spanning:

<table border="1"> <table border="1">
<tr> <tr>
<th>Header 1</th> <th>Header 1</th>
<th>Header 2</th> <th>Header 2</th>
</tr> </tr>
<tr> <tr>
<td>Data 1</td> <td>Data 1</td>
<td>Data 2</td> <td>Data 2</td>
</tr> </tr>
</table> <tr>
<td colspan="2">Data 3 spans two columns</td>
</tr>
</table>
HTML Forms
• An HTML form is used to collect user input. The user input is most often sent to a server for
processing.
 The <form> Element  Text Fields
<form> <form>
. <label for="fname">First name:</label><br>
form elements <input type="text" id="fname" name="fname“
. placeholder=“Enter Your first name”><br>
</form> <label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
HTML Forms
• Here are some examples:
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
HTML Form Elements
The HTML <form> element can contain one or more of the following form elements:
•<input>
•<label>
•<select>
•<textarea>
•<button>
•<datalist>
•<option>
HTML Form Elements
• The <input> Element
 One of the most used form elements is the <input> element.
 The <input> element can be displayed in several ways, depending on
the type attribute.
Examples
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
HTML Form Elements
• The <select> Element
• The <select> element defines a drop-down list:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value=“Harrier">Harrier</option>
<option value=“XUV700">XUV 700</option>
<option value=“creta">Creta</option>
<option value=“Thar">Thar</option>
</select>
• Visible Values:
Use the size attribute to specify the number of visible values .
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
• Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
• The <textarea> Element:
• The <textarea> element defines a multi-line input field (a text area):
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
• The rows attribute specifies the visible number of lines in a text area.
• The cols attribute specifies the visible width of a text area.
• This is how the HTML code above will be displayed in a browser:
• You can also define the size of the text area by using CSS:
<textarea name="message">
The cat was playing in the garden.
</textarea>
• The <button> Element
• The <button> element defines a clickable button:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
HTML Forms Elements Table:
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation
CSS (Cascading Style Sheet)
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed

on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of

multiple web pages all at once
• External stylesheets are stored in CSS files

CSS Syntax
• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated by semicolons.
• Declaration includes a CSS property name and a value, separated by a colon.
• CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.
How to insert CSS
• Inline CSS
• Internal CSS
• External CSS
Inline CSS
• An inline style may be used to apply a unique style for a
single element.
• <h1 style="color:blue;text-align:center;">This is a
heading</h1>
• <p style="color:red;">This is a paragraph.</p>

Internal CSS
• An internal style sheet may be used if one single HTML page has a
unique style.
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
External CSS
• <head>
<link rel="stylesheet" href="mystyle.css">
</head>
• mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
CSS Selectors
• CSS selectors are used to "find" (or select) the HTML
elements you want to style.
• Basic CSS Selector

• Based on name
• Based on ID
• Based on class
Example of Selectors
• Element Selector
• p {
text-align: center;
color: red;
}
• The CSS id Selector

• #para1 {
text-align: center;
color: red;
}
• The CSS class Selector

• .center {
text-align: center;
color: red;
}
• Try it Yo
CSS Colors
• RGB (Red, Green, Blue)
• rgb(0,0,0) to rgb(255, 255, 255)
• Hexa Color (Also known as Hexa Decimal Color)

• #000000 -#ffffff
Style=“background-color: #000000;”
Style=“background-color:rgb(255,255,255);”
• Style=“background-color: #000000;”
• Style=“border-style: solid;
• Style=“border-color: red;
• Style=“border-color: red;
• border-radius: 5px;
CSS Margin & CSS Padding
• Margins are used to create space around elements,
outside of any defined borders.
• margin: 25px 50px 75px 100px;
• Padding is used to create space around an element's

content, inside of any defined borders.
• padding: 25px 50px 75px 100px;

CSS Text
• color: blue;
• text-align: center;
• text-decoration-line: underline;
• text-transform: uppercase;
HTML Links

Path To Web Development

Uploaded by

Path To Web Development

Uploaded by

Path to Web Development

Sumesh Kumar Nair

• How do websites work?

Start Tag Element Content End Tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

• HTML headings are defined with the <h1> to <h6> tags.

<p>This is a paragraph of text.</p>

1. HTML Anchor Element.

<a href="url">link text</a>

Table Structure: Column and Row Spanning:

 The <form> Element  Text Fields

• Allow Multiple Selections:

• CSS describes how HTML elements are to be displayed

• CSS saves a lot of work. It can control the layout of

• External stylesheets are stored in CSS files

• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by semicolons.

• Declaration includes a CSS property name and a value, separated by a colon.

• <p style="color:red;">This is a paragraph.</p>

• Basic CSS Selector

• The CSS id Selector

• The CSS class Selector

• Hexa Color (Also known as Hexa Decimal Color)

• Padding is used to create space around an element's

• padding: 25px 50px 75px 100px;

You might also like