Web Development
A web page, broken down
Styling Client/Server
Content/Data
Rules Logic
Web Browser
Website
A web page, broken down
PHP/ASP/
HTML CSS
JavaScript
Web Browser
IE/FF/Opera/Chrome
Website
What is HTML
■ HTML= HyperText Markup Language
A markup language designed for the creation
of web pages and other information
viewable in a browser.
The basic language used to write web pages.
File extension: .htm, .html
The basic Tags
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>Hello everyone</h1>
</body>
</html>
HTML Syntax
The element content is everything between
the start and the end tag ( <p>Hello</p> )
Some HTML elements have empty content(
<br /> )
Most HTML elements can have attributes
Itsnot case sensitive - <p> means the same
as <P>
Steps for creating a HTML file
Open a text editor ( e.g. Notepad )
Create your HTML document
Head - not displayed with body
Body
Save the HTML (extension of .htm or .html)
Display your HTML document in WWW
browser window.
Check your work and modify as necessary.
Upload it on the Web.
Working it out…
HTML <body> Tag
The body element defines the document's body and
contains all the contents of an HTML document, such as text,
hyperlinks, images, tables, lists, etc.
HTML <body> Tag (contd..)
output
HTML <body> Tag (contd..)
Attributes
bgcolor - Specifies a background-color for a HTML page.
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
background - Specifies a background-image for a
HTML page.
<body background="clouds.gif">
<body background="http://www.abc.com/clouds.gif">
HTML <img> Tag
The <img> tag embeds an image in an HTML
page.
The <img> tag has attributes: src , alt,
height, width.
HTML code output
<img src="sachin.jpg" alt="sachin"
height = "200" width= "200“>
HTML <p> Tag
The <p> tag defines a paragraph.
HTML <li> Tag
The <li> tag defines a list item.
HTML <a> Tag - Anchor
The <a> tag defines an anchor.
Attribute for <A ...> HREF = "URL"
HREF indicates the URL being linked to.
A Hypertext link
< a href=“http://www.google.com ”>Google</a>
Output: Google
A Email link
<a href=“mailto:
[email protected]”>Email me</a>
Output: Email me
HTML <font> Tag
The <font> tag specifies the font face, font
size, and font color of text.
HTML <table> Tag
The <table> tag defines an HTML table.
A simple HTML table consists of the table
element and one or more tr, th, and td
elements.
Attribute Values
Value Description
border Specifies the width of the borders around a table
width Specifies the width of a table
cellpadding Specifies the space between the cell wall and the cell content
cellspacing Specifies the space between cells
align Specifies the alignment of a table
HTML <table> example
HTML <form> Tag
A form is an area that can contain form
elements.
Commonly used form elements includes:
1. Text fields
2. Radio buttons
3. Checkboxes
4. List Boxes
5. Submit buttons
HTML <input> Tag
Attribute Values
Value Description
button Defines a clickable button
checkbox Defines a checkbox
password Defines a password field. The characters in this field are masked
radio Defines a radio button
Defines a reset button. A reset button resets all form fields to their
reset
initial values
Defines a submit button. A submit button sends form data to a
submit
server
Defines a one-line input field that a user can enter text into.
text
Default width is 20 characters
HTML <input> Tag
TextInput Fields.
Used when you want the user to type
letters, number, etc.
HTML <input> Tag contd…
Submit and Reset button.
HTML <input> Tag contd…
Checkboxes and Radio Button.
HTML <select> Tag
The<select> tag is used to create a select list
(drop-down list)
HTML <marquee> Tag
g fun learning HTML.
HTML Header Tags
<h1> definesthe largest heading and <h6>
defines the smallest heading.
What is CSS
■ CSS= Cascading Style Sheets
CSSis a way to style HTML. Whereas the HTML is
the content, the style sheet is the presentation of
that document.
A Style
Selector Property Value
p { color: red; }
The property is followed by a colon (:) and
the value is followed by a semicolon(;)
Applying CSS
There are three ways to apply CSS to HTML.
Inline
Affects only the element applied to.
Internal or Embedded
Affects only the elements in a single file.
External
Linked to an unlimited number of files.
Applying CSS (Inline)
<p style="color: red">Hello Pailan !!</p>
Applying CSS (Internal)
<style type="text/css">
body {
font-family: Tahoma, Arial, sans-serif;
...
}
</style>
Applying CSS (External)
<link rel="stylesheet" type="text/css" href="web.css" />
Inline Style Sheets
Inline
styles are applied straight into the
HTML tags using the style attribute.
Internal Style Sheets
Internal styles are used for the whole page.
Inside the head tags, the style tags surround
all of the styles for the page.
External Style Sheets
Internal styles are used for the whole page.
Inside the head tags, the style tags surround
all of the styles for the page.
CSS class example
What is JavaScript ?
A scripting language that works with HTML to enhance
web pages and make them more interactive.
JavaScript is not Java, or even related to Java
Statements in JavaScript resemble statements in Java,
because both languages borrowed heavily from the C
language
Runs in a Web browser (client-side).
Embedded in HTML files and can manipulate the HTML
itself.
Why use JavaScript ?
To add dynamic function to your HTML.
JavaScript does things that HTML can’t—like logic.
You can change HTML on the fly.
JavaScript can validate the data the user enters
into the form, before it is sent to your Web
Application.
Things to Do with JavaScript
Data validation
Preload images
Dropdown menus
Data validation in HTML Forms
Set timer / Auto Refresh
Open a window
Display date / Countdown Timers
Print page
Save and access a cookie….. & many more
Add JavaScript to HTML
In the HTML page itself:
<html>
<head>
<script language=“javascript”>
// JavaScript code
</script>
</head>
As a file, linked from the HTML Page
<head>
<script language=“javascript” src=“script.js”>
</script>
</head>
JavaScript examples
JavaScript examples
changing Web Page background color
<script language = "JavaScript">
function newBackColor(color) {
if (color == 1) {document.bgColor="red"}
if (color == 2) {document.bgColor="green"}
if (color == 3) {document.bgColor="blue"}
}
</script>
<form>
<input type = "button" value = "red" onClick = "newBackColor(1)">
<input type = "button" value = "green" onClick = "newBackColor(2)">
<input type = "button" value = "blue" onClick = "newBackColor(3)">
</form>
JavaScript examples
View current URL
<script language = "JavaScript">
function getURL ()
{
alert("You are in document: " +
document.location);
}
</script>
<form>
<input type = "button" value = "Show Me URL"
onClick = "getURL()">
</form>
JavaScript examples
Opening a Browser Window
<script language = "JavaScript">
function myNewWindow()
{
window.open("http://www.abc.com", "newWindow",
"height=100,width=100,status=yes");
newWindow.focus();
}
</script>
<form name = "myForm">
<input type = "button" value = "Open Window"
onClick = "myNewWindow()">
</form>
JavaScript examples
Opening a Browser Window
<script language = "JavaScript">
function myNewWindow()
{
window.open("http://www.abc.com", "newWindow",
"height=100,width=100,status=yes");
newWindow.focus();
}
</script>
<form name = "myForm">
<input type = "button" value = "Open Window"
onClick = "myNewWindow()">
</form>
JavaScript examples
To print a page…
<a href="#"
onClick="window.print();">
Print this page
</a>
Questions ?
SHOUBHIK ROY / SANDEEP BAJORIA
Email : [email protected]
M : +91 98319 28362 / +91 98309 36993
web : www.brainware-baguiati.com
www.facebook.com/Brainware.Kolkata
