WHAT IS WEB DESIGNER?
A web designer is a person who is skillfully creates
presentation with special coding languaes like HTML,CSS,etc.
Those presentations are delivered through the world wide web via
web browser.
• May use web-authoring software or an
HTML editor to create the actual pages
• May design the overall look and let a web
master do the actual coding
• Most often, there are also proficient with
web graphics and images.
WHAT IS HTML?
HTML = HYPER TEXT MARKUP LANGUAGE
A markup language design 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
Programs for coding HTML(called HTML editors) including
Notepad and Notedpad++.
HTML TAGS
A tag is non-hierarchical keywords or term assigned to a
piece of information.
Document Tags:- The tags that are required for every HTML
page we create.
Tags usually goes with pair: an open tag (<b>) and an end
tag (</b>)
< > - Opening tag
</> - closing tag
HTML TAGS CONTINUING.....
• Open/close tags:
<html></html>
• Self-closing :
<br/>, <img/> , <hr/>
Closing tags & self-closing tags require a forward slash(/)
either in the closing tags or at the end of the self-closing tag:
</h1> or <img/>
THE BASICS TAGS IN HTML...
HTML CONSISTS OF COMMAND BETWEN THE ANGLED
BRACKETS (<>), CALLED TAGS OR MARKUP.
<HTML>
<HEAD>
<TITLE> MY FIRST WEB PAGE </TITLE>
</HEAD>
<BODY>
<P> THIS IS MY INTRODUCTION..</P>
</BODY>
</HTML>
THE BASICS TAGS IN HTML (CONTD)...
• <FORM> - </FORM>
Commonly used form elements include :
Text field
Radio buttons
Chechboxes
list boxes
Submit and Reset button
• <IMG> - </IMG>
• <A> - </A> (ANCHOR TAG)
• <INPUT>
THE BASICS TAGS IN HTML (CONTD)...
• <B> - </B>
• <U> - </U>
• <I> - </I>
• <SUP> - </SUP>
• <SUB> - </SUB>
HEADING TAGS
<H1> </H1> - largest heading font size
<H2> </H2>
<H3> </H3>
<H4> </H4>
<H5> </H5>
<H6> </H6> - Smallest heading font size
OTHER COMMON TAGS:
• Paragraph tag - <p> </p>
• Order list (numbered)- <ol> </ol>
• Unordered list(bulleted) - <ul> </ul>
• Tables : <tables> </tables>
<tr> - table row
<td> - table data - contains text,links,
images,list,forms,
other tables.
ATTRIBUTES USED IN HTML
BODY TAG'S ATTRIBUTES :
• bgcolor- specifies a background-color for a HTML page
• background- specifies a background-image for a HTML page
IMAGE TAG'S ATTRIBUTES:
• src
• alt
• height
• width
ATTRIBUTES USED IN HTML(CONTD)...
ANCHOR TAG'S ATTRIBUTES :
• Hyper Reference
• Target
• GO TO MY WEB PAGE
CSS....
WHAT IS CSS ?
CSS - CASCADING STYLE SHEET
CSS is 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 elements applied to.
Syntax :
<p style=”color: red”> HELLO WORLD!!</P>
• Internal or Embedded : Affects only the elements in a single
line.
Syntax:
<head>
<style type=”text/css”>
h1{border:1px solid red;
color: aqua;}
img{ width:100px;
height:400px;}
</style>
</head>
• External : linked to an unlimited number of files.
Syntax:
<head>
<title>My page </title>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
WHAT IS JAVA SCRIPT?
A Scripting language that works with HTML to enhance
web pages and make them more interactive.
Runs in a web browser(client-side).
Embedded in HTML files and can manipulate the HTML
itself.
WHY USE JAVA SCRIPT?
To add dynamic function to your HTML.
Java script 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.
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
1. Image Zoom
2. Image Menu
3. Shutter Menu
4. Tabs
5. Contact From Validation
