Web Design

Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URLs and Ips.
Registrars
Clients (Browser) Internet Explorer Chrome Firefox Netscape Opera AOL Safari
Servers Apache Microsoft IIS Java WebServer Oracle Wamp Xampp
Telephone Companies such as BSNL(NIB), Airtel, Reliance, TATA etc. VSAT Service Providers such as TATA Net etc. Wireless Service Providers such as Tikona, Photon+, Netconnect, MTS, Vodafone, Airtel etc.
Computer Server Web server software Firewall hardware and software IT services Disk space Bandwidth / connection to internet Routers and switchers Email server / storage
(Backup, troubleshooting, hardware repair)
Domain name: The specific address of a computer on the Internet

microsoft.com
Uniform Resource Locator (URL):

http://www.microsoft.com/faqs.html
Internet protocol (IP) address

192.168.1.1
A company that provides domain name registration services for a fee. Maintain database which maps domain names to IPs. Propagate new domain name/IP address information across the internet.
Choose a domain name. Register the domain with a Registrar. Choose a web hosting service. Point the domain to the hosting server . Create web content. Store (publish) onto hosting server (FTP). Submit new site to search engines (SEO).
Visitor-centric, clear purpose. Displays/loads quickly. Browser compatible. Intuitive navigation. Secure (eCommerce). Attractive design, easy to read. No technical problems (broken links, buggy scripts). Maintainable (separate content from style). Search Engine Optimized (SEO).
Markup Languages
HTML, DHTML, XML, XSLT, etc....
Cascading Style Sheets (CSS) Scripting languages

perl, javascript, php, asp, etc....
Web creation and editing software

Notepad++, Microsoft Expression Studio, Adobe Dreamweaver , coffee cup etc.
10
Derived from SGML (Standard Generalized Markup Language )
HyperText Markup Language
11
Clear text, case insensitive Ignores white space Comprised of tags <tag /> Open tags and closed tags Open tag <tag> Close tag </tag>
12
Open tags
Closed tags
<name attributes/> <hr/>, <br/> <img src=url width=100px height=60px/> <name attributes> stuff </name> <b>text to be bolded</b> <h1>level 1 heading text</h1> < ! - - comment text -- >
Comments
13
< HTML >

Header
Body
< / HTML>
14
<html> <head>
</head> <body>
<title> The title of your html page </title> <meta_tags/> <link_tags/>
<! - - your web page content and markup - ->
</body> </html>
15
header
<body>
Hello world
</body>
16
header
<body>
Tim Berners-Lee PO Box 190387 Hungry Horse, Mt 59919
</body>
17
header
<body>
<b>Tim Berners-Lee</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br>
</body>
18
header
<body>
<font face=Arial,Times,Courier color=red size=3> <b>Tim Berners-Lee</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br></font>
</body>
19
header
<body> <p align=center>
<font face=Arial,Lucida Sans color=red size=3> <b>Tim Berners-Lee</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br></font> </p>
</body>
20
header
<body> <p align=center> <font face=Arial,Lucida Sans color=red size=3> <b>Tim Berners-Lee</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br></font> </p> <img src=http://www.myserver.com/images/tim.jpg/> </body>
Copyright 2005 - The Small Business Depot 21
header
<body> <p align=center> <font face=Arial,Lucida Sans color=red size=3> <b>Tim Berners-Lee</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br></font> </p> <img src=http://www.domain.com/images/mike.jpg> <a href=biopage.html>Read my Bio</a> </body>
Copyright 2005 - The Small Business Depot
22
23
ANCHORS (Hypertext Link) <A href=url attributes>Displayed text </A>
Attributes

NAME = text TITLE = "text" TARGET = frame_name|window_name
24
<a href=mywebpage.html target=window2 >Click this link </a>
Click this link
opens mywebpage.html in the window / frame named window2
window2
25
<BODY LINK=color, VLINK=color, ALINK=color >
<BODY LINK=blue, VLINK=purple, ALINK=red >

<BODY LINK=#0000FF, VLINK=#FF00FF, ALINK=#FF0000 >
Copyright 2005 - The Small Business Depot
26
147 color names are defined in the HTML and CSS colour specification (16 basic color names plus 130 more). The 16 basic color names are: aqua, black, blue, fuchsia, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Colors are specified by 6 digit HEX values.
27
color = red (Browser compatibility issues) 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
#FF FF FF
Blue Green
Red
28
<h1>Heading 1 level text</h1>

<h4>Heading 4 level text</h4> <h5>Heading 5 level text</h5>
Renders text as a heading, the rendering depending on the level of heading selected. Headings should be automatically spaced from the body text.

29
Unordered list <ul> <li>apples</li> <li>bananas</li> <li>grapes</li> <li>strawberry</li> </ul>
Ordered list <ol type=i start=2> <li>apples</li> <li>bananas</li> <li>grapes</li> <li>strawberry</li> </ol>
30
Unordered list

Ordered list
II. III. IV. V.
apples bananas grapes strawberries
apples bananas grapes strawberries
31
<TABLE> <CAPTION ALIGN="bottom">Class Grades</CAPTION> <TR> <TH>Student</TH> <TH>Grade</TH> </TR> <TR> <TD>Tom</TD> <TD>B+</TD> </TR> <TR> <TD>Sue</TD> <TD>A-</TD> </TR> </TABLE>
32
33
BORDER=value ALIGN=left|right|center CELLSPACING=value CELLPADDING=value WIDTH=value|percent
34
<TABLE BORDER=1 WIDTH=50%" CELLPADDING=6 CELLSPACING=2 ALIGN="RIGHT">

<CAPTION ALIGN="bottom">Class Grades</CAPTION> <TR> <TH>Student</TH> <TH>Grade</TH> </TR> <TR> <TD>Tom</TD> <TD>B+</TD> </TR> <TR> <TD>Sue</TD> <TD>A-</TD> </TR> </TABLE>
35
Student Tom Sue
Grade BA+
Class Grades
36
rowspan and colspan
37
<TABLE BORDER=1 WIDTH="50%" CELLPADDING=5 ALIGN="center"> <TR> <TD colspan=2 align='center'> <font color="red"><b>Student Grades</b></font> </TD> </TR> <TR> <TD><b>Student</b></TD> <TD><b>Grade</b></TD> </TR> <TR> <TD>Tom</TD> <TD rowspan=2>A</TD> </TR> <TR> <TD>Sue</TD> </TR> </TABLE>
38
Student Grades Student Tom Sue A Grade
39
1280 x 1024 1024 x 768 800 x 600 640 x 480
40
Tables are frequently used to layout the basic web page design.
1280
640
41
Basic Frames Floating Frames (inline frames) Picture in picture
Frames let you divide a screen into windows with each window viewing a different web page.
42
Banner
Menu
Content
Footer
43
Basic tags <frameset> ..</frameset> <frame /> <noframes> .. </noframes>
Basic attributes cols = values rows = values name = frame_name src = frame_source(url) target = frame_name
44
<frameset rows=80,*,80> <frame src=banner.html /> <frameset cols = 25%,75% > <frame src=menu.html /> <frame src=content.html /> </frameset> <frame src=footer.html /> </frameset>
45
FRAMESET attributes

FRAMEBORDER="yes|no"|0 BORDER=pixels BORDERCOLOR="#hexcolor|colorname"
< frameset rows="80,*,80" border=2 bordercolor=red" > .. .. </frameset>
46
Individual FRAME attributes

SCROLLING="yes|no|auto" NORESIZE MARGINWIDTH=pixels MARGINHEIGHT="pixels" BORDERCOLOR="color" FRAMESPACING="pixels" FRAMEBORDER="yes|no"|0 NAME=frame_name
47
<a href=page.html target=blank >Click this link </a>

Creates new window for the page
<a href=page.html target=parent >Click this link </a>

Opens page in the parent frame/wind of this frame/window
<a href=page.html target=top >Click this link </a>

Opens page in top most frame/window
48
Allows you create a position-able block of content.
Content positioned within this
block
49
<div attributes> content </div> attributes ID=name STYLE = style parameters : CSS
50
Styles enable you to define a consistent 'look' for your documents by describing once how headings, paragraphs, quotes, etc. should be displayed.
Style sheet syntax is made up of three parts:
selector {property: value} selector = element.class

51
H1 {text-align: center; color: blue} A {color:green; font-familiy:arial,courier; font-weight:bold;} td { align:center; background-color:grey; border-color:red;}
div {position:absolute; visibily:hidden; margin:10px }

font {color:navy; font-size:2pt; font-face:trebuchet; } hr {color:#ff0000; width:80%; align:center; } table {width:80%; align:center; border:2px; padding:5px; }
52
H1 {text-align: center; color: blue} H1.widget {text-align: center; color: red; font-size:80%; } A {color:green; font-familiy:arial,courier; font-weight:bold;} A.menu {color:cyan; font-familiy:arial,courier; font-style:italics;} td { align:center; background-color:grey; border-color:red;} td.figure { align:right; background-color:white; border-color:black;} font {color:navy; font-size:2pt; font-face:trebuchet; } font.fred {color:blue; font-size:2pt; font-face:trebuchet; fontweight:bold; }
element.class {property:value; }
53
<head>
<title> My Page Title </title>

<style TYPE="text/css > <! - --> </style>
element.class { property:value; } element.class { property:value; }
</head>
54
Styles can be defined in a separate file

<font style=property:value; > text </font> <font class=fred> text </font>
mystyles.css
<head> <LINK REL="stylesheet" HREF="mystyles.css TYPE="text/css"> </head>
55
/* Example style sheet file (note how this comment was created) */ BODY {background: #FFFFD8; margin-top: 20} A:link {color: #400080; background: #FFFFD8}
H1 {font-weight: bold; text-align: center; color: #006000; background: #FFFFD8; font-family: Gill Sans, Arial, sans-serif; }
font.caption {font-family: Gill Sans, Arial, sans-serif; fontstyle: italic; } /* End of example style sheet file */
56
Styles can be placed within individual elements

<font style=color:red; font-face:ariel; >
57
Inline > Embedded > Linked Defining the style of your text linked -> font-family:arial,georgia; embedded -> color:navy; inline -> font-size:2pt;
58
Using IDs
IDs enable you to define a unique style which you can apply to a number of elements.
<STYLE> <! #copyright {font-style:italic; font-size:smaller; } --> </STYLE>
<p ID=copyright> Any textual content </p>
59
<img src=images/pic1.jpg width=75px, height=50px /> <img class=pics src=images/pic1.jpg />
img.pics { width:75px; height:50px; borderwidth:3px }
60
Images take longer to download than text The larger the image, the slower the page Use optimization software Use thumb nail images
61
Page background
<body background-image = url > <body class=background>
body.background { background-image:$url; }
Table background
<table background-image=url> <table class=background>
DIV background
table.background { backlground-image:url; }
<div style={ background-image:url; } >
62
HTML Tutorials Learn HTML Learn XHTML Learn CSS Learn TCP/IP Browser Scripting Learn JavaScript Learn DHTML Learn VBScript Learn HTML DOM Learn WMLScript Server Scripting Learn SQL Learn ASP Learn ADO Learn PHP
XML Tutorials Learn XML Learn XSL Learn XSLT Learn XSL-FO Learn XPath Learn XQuery Learn XLink Learn XPointer Learn DTD Learn Schema Learn XML DOM Learn XForms Learn SOAP Learn WSDL Learn RDF Learn RSS Learn WAP
.NET (dotnet) .NET Microsoft .NET ASP .NET Mobile Multimedia Learn Media Learn SMIL Learn SVG Learn Flash Web Building Web Building Web W3C Web Browsers Web Quality Web Semantic Web Careers Web Hosting Web Certification
63
64

Web Design

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Design

Uploaded by

Copyright:

Available Formats

Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URLs and Ips.

Servers Apache Microsoft IIS Java WebServer Oracle Wamp Xampp

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

Uniform Resource Locator (URL):

Internet protocol (IP) address

Cascading Style Sheets (CSS) Scripting languages

Web creation and editing software

Derived from SGML (Standard Generalized Markup Language )

HyperText Markup Language

< HTML >

<title> The title of your html page </title> <meta_tags/> <link_tags/>

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

<body> <p align=center>

ANCHORS (Hypertext Link) <A href=url attributes>Displayed text </A>

NAME = text TITLE = "text" TARGET = frame_name|window_name

<a href=mywebpage.html target=window2 >Click this link </a>

Click this link

opens mywebpage.html in the window / frame named window2

<BODY LINK=color, VLINK=color, ALINK=color >

<BODY LINK=blue, VLINK=purple, ALINK=red >

Copyright 2005 - The Small Business Depot

<h1>Heading 1 level text</h1>

<h2>Heading 2 level text</h2>

Unordered list <ul> <li>apples</li> <li>bananas</li> <li>grapes</li> <li>strawberry</li> </ul>

apples bananas grapes strawberries

apples bananas grapes strawberries

BORDER=value ALIGN=left|right|center CELLSPACING=value CELLPADDING=value WIDTH=value|percent

<TABLE BORDER=1 WIDTH=50%" CELLPADDING=6 CELLSPACING=2 ALIGN="RIGHT">

Student Tom Sue

rowspan and colspan

Student Grades Student Tom Sue A Grade

1280 x 1024 1024 x 768 800 x 600 640 x 480

Basic Frames Floating Frames (inline frames) Picture in picture

Basic tags <frameset> ..</frameset> <frame /> <noframes> .. </noframes>

FRAMEBORDER="yes|no"|0 BORDER=pixels BORDERCOLOR="#hexcolor|colorname"

< frameset rows="80,*,80" border=2 bordercolor=red" > .. .. </frameset>

Individual FRAME attributes

SCROLLING="yes|no|auto" NORESIZE MARGINWIDTH=pixels MARGINHEIGHT="pixels" BORDERCOLOR="color" FRAMESPACING="pixels" FRAMEBORDER="yes|no"|0 NAME=frame_name

<a href=page.html target=blank >Click this link </a>

<a href=page.html target=parent >Click this link </a>

<a href=page.html target=top >Click this link </a>

Allows you create a position-able block of content.

Content positioned within this

Style sheet syntax is made up of three parts:

selector {property: value} selector = element.class

div {position:absolute; visibily:hidden; margin:10px }

<title> My Page Title </title>

element.class { property:value; } element.class { property:value; }

Styles can be defined in a separate file

Styles can be placed within individual elements

<STYLE> <! #copyright {font-style:italic; font-size:smaller; } --> </STYLE>

<p ID=copyright> Any textual content </p>

<img src=images/pic1.jpg width=75px, height=50px /> <img class=pics src=images/pic1.jpg />

img.pics { width:75px; height:50px; borderwidth:3px }

<table background-image=url> <table class=background>

<div style={ background-image:url; } >

You might also like