Uploaded bywebhostingguy
PPT, PDF1,761 views

Introduction to Web Design

This document provides an introduction to web design concepts including clients, servers, internet service providers, web hosting services, domains, URLs, IPs, and registrars. It discusses the basic components of websites including HTML, CSS, scripting languages, and web authoring tools. It covers fundamental HTML topics such as page structure, headings, lists, links, images, tables, frames, and positioning with DIV tags.

Embed presentation

Downloaded 113 times
Introduction to Web Design Part 1 w. Mike Tyler
Use of this material If you would like to be able to distribute this PowerPont presentation from your own website – simply credit the author with a link to The small Business Depot. Use the following: Link URL: http://www.smallbizdepot.com Link text: By Mike Tyler – The Small Business Depot Copyright – 2005 – The Small Business Depot
Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
Clients & Servers Clients (Browser) Internet Explorer Firefox Mozilla Netscape Opera Amaya AOL MSN Servers Apache Microsoft Netscape zeus AOLserver AV JavaWebServer Oracle
Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
Internet Service Providers Connect Clients to the Internet Phone Company AOL Earthlink Verizone NetZero Basic internet connection Dialup/DSL/Cable/Sat Email
Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
Web Hosting Services Connects Web Sites to the Internet Computer (server) farm Web server software Firewall hardware and software IT services (Backup, troubleshooting, hardware repair) Disk space Bandwidth / connection to internet Routers and switchers Email server / storage
Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
Domain’s URL’s and IPs 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
Web Components Clients and Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
Domain Registrar A company that provides domain name registration services for a fee. Maintain database which maps domain names to IP’s Propagate new domain name/IP address information across the internet
Creating a Web Site Choose a domain name Register with a Registrar Choose a hosting service Tell Registrar the IP address Create web content Store (publish) onto hosting server (FTP) Submit new site to search engines
12 Principles of good web design Visitor-centric, clear purpose Progressive disclosure Displays quickly Browser compatible Intuitive navigation Spelling, grammar, writing Secure (eCommerce) Attractive design, easy to read Cultural bias? (Regional? Domestic? International?) No technical problems (broken links, buggy scripts) Maintainable (separate content from style) Search Engine Accessible
Creating your Web Site Technologies & Tools Markup Languages HTML, DHTML, XML, XSLT, etc.... Cascading Style Sheets (CSS) Scripting languages perl,javascript,php, etc.... Web creation and editing software Notepad, FrontPage, Coldfusion, Flash, Hotmetal, Site Builder, etc..
Markup Languages - HTML Derived from SGML (Standard Generalized Markup Language ) H yper T ext M arkup L anguage
HTML Fundamentals Clear text, case insensitive Ignores white space Comprised of tags <tag /> Open tags and closed tags
HTML - Fundamentals Open tags <name attributes/> <hr/>, <br/> <img src=“url” width=‘100px’ height=’60px’/> Closed tags <name attributes> stuff </name> <b>text to be bolded</b> <h1>level 1 heading text</h1> Comments < ! - - comment text -- >
HTML – Fundamentals Document Structure Header Body < / HTML> < HTML >
HTML – Fundamentals Basic Structure <html> <head> <title> The title of your html page </title> <meta_tags/> </head> <body> <! - - your web page content and markup - -> </body> </html>
HTML - Fundamentals header <body> Hello world </body>
HTML - Fundamentals header <body> Mike Tyler PO Box 190387 Hungry Horse, Mt 59919 </body>
HTML - Fundamentals header <body> <b> Mike Tyler </b><br> PO Box 190387 <br> Hungry Horse, Mt 59919 <br> </body>
HTML - Fundamentals header <body> <font face=“Arial,Times,Courier” color=“red” size=“3”> <b>Mike Tyler</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br> </font> </body>
HTML - Fundamentals header <body> <p align=‘center’> <font face=“Arial,Lucida Sans” color=“red” size=“3”> <b>Mike Tyler</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br></font> </p> </body>
HTML - Fundamentals header <body> <p align=‘center’> <font face=“Arial,Lucida Sans” color=“red” size=“3”> <b>Mike Tyler</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br></font> </p> <img src=‘http://www.myserver.com/images/mike.jpg’/> </body>
HTML - Fundamentals header <body> <p align=‘center’> <font face=‘Arial,Lucida Sans’ color=‘red’ size=3> <b>Mike Tyler</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>
HTML - Fundamentals
HTML - Fundamentals A NCHORS (Hypertext Link) <A href=“url” attributes>Displayed text </A> Attributes NAME = “text” TITLE = &quot;text&quot; TARGET = “frame_name|window_name”
HTML – Fundamentals Hypertext links Click this link opens mywebpage.html in the window / frame named “ window2 ” <a href=“mywebpage.html” target=“window2” >Click this link </a> window2
HTML – Fundamentals Hyperlink Colors <BODY LINK= color , VLINK= color , ALINK= color > <BODY LINK= “blue” , VLINK= “purple” , ALINK= “red” > <BODY LINK= “#0000FF” , VLINK= “#FF00FF” , ALINK= “#FF0000” >
HTML – Fundamentals Colors Cathode Ray Tubes (CRT)
HTML – Fundamentals Colors 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 Red Green Blue # FF FF FF
HTML – Fundamentals Headings Renders text as a heading, the rendering depending on the level of heading selected. Headings should be automatically spaced from the body text. <h1>Heading 1 level text</h1> <h2>Heading 2 level text</h2> <h3>Heading 3 level text</h3> <h4>Heading 4 level text</h4> <h5>Heading 5 level text</h5> <h6>Heading 6 level text</h6>
HTML – Fundamentals Lists Unordered list <ul> <li>apples</li> <li>bananas</li> <li>grapes</li> <li>strawberries</li> </ul> Ordered list <ol type=‘i’ start=‘2’> <li>apples</li> <li>bananas</li> <li>grapes</li> <li>strawberries</li> </ol>
HTML – Fundamentals Lists Unordered list apples bananas grapes strawberries Ordered list apples bananas grapes strawberries
HTML – Fundamentals Tables <TABLE> <CAPTION ALIGN=&quot;bottom&quot;>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>
HTML – Fundamentals Tables
HTML – Fundamentals Tables BORDER= value ALIGN= left | right|center CELLSPACING= value CELLPADDING= value WIDTH= value | percent
HTML – Fundamentals Tables <TABLE BORDER=1 WIDTH=“50%&quot; CELLPADDING=“6” CELLSPACING=“2” ALIGN=&quot;RIGHT&quot;> <CAPTION ALIGN=&quot;bottom&quot;>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>
HTML – Fundamentals Tables Class Grades A+ Sue B- Tom Grade Student
HTML – Fundamentals Tables rowspan and colspan
HTML – Fundamentals <TABLE BORDER=1 WIDTH=&quot;50%&quot; CELLPADDING=5 ALIGN=&quot;center&quot;> <TR> <TD colspan=2 align='center'> <font color=&quot;red&quot;><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>
HTML – Fundamentals Sue A Tom Grade Student Student Grades
Screen Compatibility 1280 x 1024 1024 x 768 800 x 600 640 x 480
HTML – Fundamentals Tables Tables are frequently used to layout the basic web page design . 640 1280
HTML – Fundamentals Frames 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.
HTML – Fundamentals Basic Frames Footer Content Menu Banner
HTML – Fundamentals Basic Frames Basic tags <frameset> ..</frameset> <frame /> <noframes> .. </noframes> Basic attributes cols = “values” rows = “values” name = “frame_name” src = “frame_source(url)” target = “frame_name”
HTML – Fundamentals Basic Frames Footer Content Menu Banner
HTML – Fundamentals Basic Frames <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>
HTML – Fundamentals Basic Frames <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” /> <noframes> <body> Welcome to my page. <A HREF=&quot;noframes.htm&quot;>Continue</A> to the frame-free version. </body> </noframes> </frameset>
HTML – Fundamentals Basic Frames FRAMESET attributes FRAMEBORDER=&quot; yes | no &quot;| 0 BORDER= pixels BORDERCOLOR=&quot; #hexcolor | colorname &quot; < frameset rows=&quot;80,*,80&quot; border= 2 bordercolor=“ red &quot; > .. .. </frameset>
HTML – Fundamentals Basic Frames Individual FRAME attributes SCROLLING=&quot;yes|no|auto&quot; NORESIZE MARGINWIDTH=pixels MARGINHEIGHT=&quot;pixels&quot; BORDERCOLOR=&quot;color&quot; FRAMESPACING=&quot;pixels&quot; FRAMEBORDER=&quot;yes|no&quot;|0 NAME=“frame_name”
HTML – Fundamentals Floating Frames Floating frames allow you to create a frame within the boundaries of a page Basic Frames Floating Frames
HTML – Fundamentals Floating Frames <IFRAME attributes ></IFRAME> Attributes SRC=URL HEIGHT=pixels|percent, WIDTH=pixels|percent HSPACE=pixels VSPACE=pixels ALIGN=left|right FRAMEBORDER=0
HTML – Fundamentals Floating Frames <IFRAME NAME=“frame_name” ALIGN=&quot;right&quot; HSPACE=“40” VSPACE=“40” WIDTH=&quot;75%&quot; HEIGHT=“150” FRAMEBORDER= 0 SRC= http://www.mysite/mypage.htm > </IFRAME>
HTML – Fundamentals Hypertext links <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
HTML – Fundamentals DIV and ILAYER Allows you create a position-able block of content. Content positioned within this block
HTML – Fundamentals DIV <div attributes> content </div> attributes ID=“name” STYLE = “style parameters re: CSS”
HTML – Fundamentals DIV < DIV ID=“fred” STYLE = “POSITION:absolute|relative ; VISIBILITY:visible:hidden ; Z-INDEX:number ; WIDTH:width in pixels ; HEIGHT:height in pixels ; TOP:pixels from top of page or block ; LEFT:pixels from left edge of page or block ; PADDING:margin in pixels ; other style attributes ; “ > content </DIV>
HTML – Fundamentals DIV content contentc content content content content content
<div style=&quot;position:absolute; left: 100px ; top: 100px ; width: 100px ; height: 100px ; background-color:#ffffff; &quot;> HTML – Fundamentals DIV
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) 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
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) 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; }
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) 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; font-weight:bold; } element.class {property:value; }
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Embedded <head> <title> My Page Title </title> <style TYPE=&quot;text/css > <! - - element.class { property:value; } element.class { property:value; } - - > </style> </head>
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Linked Styles can be defined in a separate file <font style=“property:value; “> text </font> <font class=“fred”> text </font> mystyles.css <head> <LINK REL=&quot;stylesheet&quot; HREF=&quot;mystyles.css“ TYPE=&quot;text/css&quot;> </head>
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) /* 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; font-style: italic; } /* End of example style sheet file */
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Inline Styles can be placed within individual elements <font style=“color:red; font-face:ariel;” >
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) Inline > Embedded > Linked Defining the style of your text linked -> font-family:arial,georgia; embedded -> color:navy; inline -> font-size:2pt;
HTML – Fundamentals CASCADING STYLE SHEETS (CSS) 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>
HTML – Fundamentals Images <img src=“images/pic1.jpg” width=75px, height=50px /> <img class=“pics” src=“images/pic1.jpg” /> img.pics { width:75px; height:50px; border-width:3px }
HTML – Fundamentals Using Images Images take longer to download than text The larger the image, the slower the page Use optimization software Use thumb nail images
HTML – Fundamentals Other uses of Images Page background (not recommended) <body background-image = “url” > <body class=“background”> body.background { background-image:$url; } Table background <table background-image=“url”> <table class=“background”> table.background { backlground-image:url; } DIV background <div style={ background-image:url; } >
Resources http://www.w3schools.com/ 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
Courses at FVCC Introduction to Web Design FrontPage Web Design Intermediate Web Design Advanced Topics in Web Design Web Site Promotion Basic Perl Programming Using Macromedia Studio MX

More Related Content

PPT
Introduction to web design
byStephen Pollard
 
PPT
Understanding THML
byHinopak Motors Limited
 
PPT
Learning HTML
byMd. Sirajus Salayhin
 
PPT
Html ppt
byIblesoft
 
DOC
Handout1 intro to html
byNadine Guevarra
 
PPT
How the web works june 2010
byMark Carter
 
PPT
Introduction to web design
bySynapseindiaComplaints
 
DOC
Handout2 formatting tags
byNadine Guevarra
 
Introduction to web design
byStephen Pollard
 
Understanding THML
byHinopak Motors Limited
 
Learning HTML
byMd. Sirajus Salayhin
 
Html ppt
byIblesoft
 
Handout1 intro to html
byNadine Guevarra
 
How the web works june 2010
byMark Carter
 
Introduction to web design
bySynapseindiaComplaints
 
Handout2 formatting tags
byNadine Guevarra
 

What's hot

PPTX
Html
byNisa Soomro
 
PPT
Learning Html
byDamian Gonz
 
PPT
HTML
byCONNECTINGTO
 
PPTX
Html basic
byViccky Khairnar
 
PPT
Html ppt
bySanmuga Nathan
 
PDF
Intro to html revised2
bymmvidanes29
 
PPTX
Html
byLincoln School
 
PPTX
HTML
byAkash Varaiya
 
PPTX
HyperText Markup Language - HTML
bySun Technlogies
 
PPT
Html text formatting
byderekoei
 
ODP
Creating Web Sites with HTML and CSS
byBG Java EE Course
 
PPTX
HTML
byCHANDERPRABHU JAIN COLLEGE OF HIGHER STUDIES & SCHOOL OF LAW
 
PPTX
Learn HTML Step By Step
bySatish Chandra
 
PDF
Html Tutorial
byDenMas Hengky
 
PDF
Html text and formatting
byeShikshak
 
PPTX
Elements of html powerpoint
byAnastasia1993
 
PPTX
Creating a webpage in html
byShrey Goswami
 
PPT
Download Workshop Lecture
bywebhostingguy
 
PPT
SEO Audit TNT Express
byTiago Gonçalves MA - Msc
 
PPT
Html 4.0
bywaynet20
 
Html
byNisa Soomro
 
Learning Html
byDamian Gonz
 
HTML
byCONNECTINGTO
 
Html basic
byViccky Khairnar
 
Html ppt
bySanmuga Nathan
 
Intro to html revised2
bymmvidanes29
 
Html
byLincoln School
 
HTML
byAkash Varaiya
 
HyperText Markup Language - HTML
bySun Technlogies
 
Html text formatting
byderekoei
 
Creating Web Sites with HTML and CSS
byBG Java EE Course
 
HTML
byCHANDERPRABHU JAIN COLLEGE OF HIGHER STUDIES & SCHOOL OF LAW
 
Learn HTML Step By Step
bySatish Chandra
 
Html Tutorial
byDenMas Hengky
 
Html text and formatting
byeShikshak
 
Elements of html powerpoint
byAnastasia1993
 
Creating a webpage in html
byShrey Goswami
 
Download Workshop Lecture
bywebhostingguy
 
SEO Audit TNT Express
byTiago Gonçalves MA - Msc
 
Html 4.0
bywaynet20
 

Similar to Introduction to Web Design

PPT
Intro to html
byanshuman rahi
 
PPT
Html Intro2
bymlackner
 
PPT
HTML & CSS Workshop Notes
byPamela Fox
 
PPT
Html For Beginners 2
bySriram Raj
 
PPT
Design Tools Html Xhtml
byAhsan Uddin Shan
 
PPT
Intro to html
byanshuman rahi
 
PPT
Introduction to HTML
byMayaLisa
 
PPT
Lecture 4
byuccwebcourses
 
PPTX
Unit 1wt
byvamsi krishna
 
PPTX
Html
byFAKHRUN NISHA
 
PPTX
Html
byFAKHRUN NISHA
 
PDF
Unit 2 (it workshop)
byDr.Lokesh Gagnani
 
DOCX
Html basics
byRamesh Kumar
 
PPT
The Ulta-Handy HTML Guide
byjsved
 
PPT
Introduction to web design
byUmamaheshwariv1
 
PPT
Introduction to web design
bySumit Tambe
 
PPT
Html
byAlisha Kalidhar
 
PPTX
IPW HTML course
byVlad Posea
 
PPT
Introduction to web_design_cs_final_ason
byK S RANGASAMY COLLEGE OF ARTS AND SCIENCE
 
DOC
web technologiesUnit 1
byPathi Radhika
 
Intro to html
byanshuman rahi
 
Html Intro2
bymlackner
 
HTML & CSS Workshop Notes
byPamela Fox
 
Html For Beginners 2
bySriram Raj
 
Design Tools Html Xhtml
byAhsan Uddin Shan
 
Intro to html
byanshuman rahi
 
Introduction to HTML
byMayaLisa
 
Lecture 4
byuccwebcourses
 
Unit 1wt
byvamsi krishna
 
Html
byFAKHRUN NISHA
 
Html
byFAKHRUN NISHA
 
Unit 2 (it workshop)
byDr.Lokesh Gagnani
 
Html basics
byRamesh Kumar
 
The Ulta-Handy HTML Guide
byjsved
 
Introduction to web design
byUmamaheshwariv1
 
Introduction to web design
bySumit Tambe
 
Html
byAlisha Kalidhar
 
IPW HTML course
byVlad Posea
 
Introduction to web_design_cs_final_ason
byK S RANGASAMY COLLEGE OF ARTS AND SCIENCE
 
web technologiesUnit 1
byPathi Radhika
 

More from webhostingguy

PPT
Web design for business.ppt
bywebhostingguy
 
PPS
Excel and SQL Quick Tricks for Merchandisers
bywebhostingguy
 
PPT
File Upload
bywebhostingguy
 
PPT
Managing Diverse IT Infrastructure
bywebhostingguy
 
PPT
Novell® iChain® 2.3
bywebhostingguy
 
PDF
Dell Reference Architecture Guide Deploying Microsoft® SQL ...
bywebhostingguy
 
PDF
MySQL and memcached Guide
bywebhostingguy
 
PPS
IT Power Management Strategy
bywebhostingguy
 
PDF
Reseller's Guide
bywebhostingguy
 
PDF
Master Service Agreement
bywebhostingguy
 
PPT
PHP and MySQL PHP Written as a set of CGI binaries in C in ...
bywebhostingguy
 
PPT
Notes8
bywebhostingguy
 
PPT
Parallels Hosting Products
bywebhostingguy
 
PDF
What is mod_perl?
bywebhostingguy
 
PDF
What is mod_perl?
bywebhostingguy
 
PPT
Microsoft PowerPoint presentation 2.175 Mb
bywebhostingguy
 
PDF
Running and Developing Tests with the Apache::Test Framework
bywebhostingguy
 
PDF
Load-balancing web servers Load-balancing web servers
bywebhostingguy
 
PDF
SQL Server 2008 Consolidation
bywebhostingguy
 
PPT
OLUG_xen.ppt
bywebhostingguy
 
Web design for business.ppt
bywebhostingguy
 
Excel and SQL Quick Tricks for Merchandisers
bywebhostingguy
 
File Upload
bywebhostingguy
 
Managing Diverse IT Infrastructure
bywebhostingguy
 
Novell® iChain® 2.3
bywebhostingguy
 
Dell Reference Architecture Guide Deploying Microsoft® SQL ...
bywebhostingguy
 
MySQL and memcached Guide
bywebhostingguy
 
IT Power Management Strategy
bywebhostingguy
 
Reseller's Guide
bywebhostingguy
 
Master Service Agreement
bywebhostingguy
 
PHP and MySQL PHP Written as a set of CGI binaries in C in ...
bywebhostingguy
 
Notes8
bywebhostingguy
 
Parallels Hosting Products
bywebhostingguy
 
What is mod_perl?
bywebhostingguy
 
What is mod_perl?
bywebhostingguy
 
Microsoft PowerPoint presentation 2.175 Mb
bywebhostingguy
 
Running and Developing Tests with the Apache::Test Framework
bywebhostingguy
 
Load-balancing web servers Load-balancing web servers
bywebhostingguy
 
SQL Server 2008 Consolidation
bywebhostingguy
 
OLUG_xen.ppt
bywebhostingguy
 

Introduction to Web Design

  • 1.
    Introduction to WebDesign Part 1 w. Mike Tyler
  • 2.
    Use of thismaterial If you would like to be able to distribute this PowerPont presentation from your own website – simply credit the author with a link to The small Business Depot. Use the following: Link URL: http://www.smallbizdepot.com Link text: By Mike Tyler – The Small Business Depot Copyright – 2005 – The Small Business Depot
  • 3.
    Web Components Clientsand Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
  • 4.
    Clients & ServersClients (Browser) Internet Explorer Firefox Mozilla Netscape Opera Amaya AOL MSN Servers Apache Microsoft Netscape zeus AOLserver AV JavaWebServer Oracle
  • 5.
    Web Components Clientsand Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
  • 6.
    Internet Service Providers Connect Clients to the Internet Phone Company AOL Earthlink Verizone NetZero Basic internet connection Dialup/DSL/Cable/Sat Email
  • 7.
    Web Components Clientsand Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
  • 8.
    Web Hosting Services Connects Web Sites to the Internet Computer (server) farm Web server software Firewall hardware and software IT services (Backup, troubleshooting, hardware repair) Disk space Bandwidth / connection to internet Routers and switchers Email server / storage
  • 9.
    Web Components Clientsand Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
  • 10.
    Domain’s URL’s andIPs 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
  • 11.
    Web Components Clientsand Servers Internet Service Providers Web Site Hosting Services Domains Names, URL’s and Ips Registrars
  • 12.
    Domain Registrar Acompany that provides domain name registration services for a fee. Maintain database which maps domain names to IP’s Propagate new domain name/IP address information across the internet
  • 13.
    Creating a WebSite Choose a domain name Register with a Registrar Choose a hosting service Tell Registrar the IP address Create web content Store (publish) onto hosting server (FTP) Submit new site to search engines
  • 14.
    12 Principles ofgood web design Visitor-centric, clear purpose Progressive disclosure Displays quickly Browser compatible Intuitive navigation Spelling, grammar, writing Secure (eCommerce) Attractive design, easy to read Cultural bias? (Regional? Domestic? International?) No technical problems (broken links, buggy scripts) Maintainable (separate content from style) Search Engine Accessible
  • 15.
    Creating your WebSite Technologies & Tools Markup Languages HTML, DHTML, XML, XSLT, etc.... Cascading Style Sheets (CSS) Scripting languages perl,javascript,php, etc.... Web creation and editing software Notepad, FrontPage, Coldfusion, Flash, Hotmetal, Site Builder, etc..
  • 16.
    Markup Languages -HTML Derived from SGML (Standard Generalized Markup Language ) H yper T ext M arkup L anguage
  • 17.
    HTML Fundamentals Cleartext, case insensitive Ignores white space Comprised of tags <tag /> Open tags and closed tags
  • 18.
    HTML - FundamentalsOpen tags <name attributes/> <hr/>, <br/> <img src=“url” width=‘100px’ height=’60px’/> Closed tags <name attributes> stuff </name> <b>text to be bolded</b> <h1>level 1 heading text</h1> Comments < ! - - comment text -- >
  • 19.
    HTML – FundamentalsDocument Structure Header Body < / HTML> < HTML >
  • 20.
    HTML – FundamentalsBasic Structure <html> <head> <title> The title of your html page </title> <meta_tags/> </head> <body> <! - - your web page content and markup - -> </body> </html>
  • 21.
    HTML - Fundamentalsheader <body> Hello world </body>
  • 22.
    HTML - Fundamentalsheader <body> Mike Tyler PO Box 190387 Hungry Horse, Mt 59919 </body>
  • 23.
    HTML - Fundamentalsheader <body> <b> Mike Tyler </b><br> PO Box 190387 <br> Hungry Horse, Mt 59919 <br> </body>
  • 24.
    HTML - Fundamentalsheader <body> <font face=“Arial,Times,Courier” color=“red” size=“3”> <b>Mike Tyler</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br> </font> </body>
  • 25.
    HTML - Fundamentalsheader <body> <p align=‘center’> <font face=“Arial,Lucida Sans” color=“red” size=“3”> <b>Mike Tyler</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br></font> </p> </body>
  • 26.
    HTML - Fundamentalsheader <body> <p align=‘center’> <font face=“Arial,Lucida Sans” color=“red” size=“3”> <b>Mike Tyler</b><br> PO Box 190387<br> Hungry Horse, Mt 59919<br></font> </p> <img src=‘http://www.myserver.com/images/mike.jpg’/> </body>
  • 27.
    HTML - Fundamentalsheader <body> <p align=‘center’> <font face=‘Arial,Lucida Sans’ color=‘red’ size=3> <b>Mike Tyler</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>
  • 28.
  • 29.
    HTML - FundamentalsA NCHORS (Hypertext Link) <A href=“url” attributes>Displayed text </A> Attributes NAME = “text” TITLE = &quot;text&quot; TARGET = “frame_name|window_name”
  • 30.
    HTML – FundamentalsHypertext links Click this link opens mywebpage.html in the window / frame named “ window2 ” <a href=“mywebpage.html” target=“window2” >Click this link </a> window2
  • 31.
    HTML – FundamentalsHyperlink Colors <BODY LINK= color , VLINK= color , ALINK= color > <BODY LINK= “blue” , VLINK= “purple” , ALINK= “red” > <BODY LINK= “#0000FF” , VLINK= “#FF00FF” , ALINK= “#FF0000” >
  • 32.
    HTML – FundamentalsColors Cathode Ray Tubes (CRT)
  • 33.
    HTML – FundamentalsColors 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 Red Green Blue # FF FF FF
  • 34.
    HTML – FundamentalsHeadings Renders text as a heading, the rendering depending on the level of heading selected. Headings should be automatically spaced from the body text. <h1>Heading 1 level text</h1> <h2>Heading 2 level text</h2> <h3>Heading 3 level text</h3> <h4>Heading 4 level text</h4> <h5>Heading 5 level text</h5> <h6>Heading 6 level text</h6>
  • 35.
    HTML – FundamentalsLists Unordered list <ul> <li>apples</li> <li>bananas</li> <li>grapes</li> <li>strawberries</li> </ul> Ordered list <ol type=‘i’ start=‘2’> <li>apples</li> <li>bananas</li> <li>grapes</li> <li>strawberries</li> </ol>
  • 36.
    HTML – FundamentalsLists Unordered list apples bananas grapes strawberries Ordered list apples bananas grapes strawberries
  • 37.
    HTML – FundamentalsTables <TABLE> <CAPTION ALIGN=&quot;bottom&quot;>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>
  • 38.
  • 39.
    HTML – FundamentalsTables BORDER= value ALIGN= left | right|center CELLSPACING= value CELLPADDING= value WIDTH= value | percent
  • 40.
    HTML – FundamentalsTables <TABLE BORDER=1 WIDTH=“50%&quot; CELLPADDING=“6” CELLSPACING=“2” ALIGN=&quot;RIGHT&quot;> <CAPTION ALIGN=&quot;bottom&quot;>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>
  • 41.
    HTML – FundamentalsTables Class Grades A+ Sue B- Tom Grade Student
  • 42.
    HTML – FundamentalsTables rowspan and colspan
  • 43.
    HTML – Fundamentals<TABLE BORDER=1 WIDTH=&quot;50%&quot; CELLPADDING=5 ALIGN=&quot;center&quot;> <TR> <TD colspan=2 align='center'> <font color=&quot;red&quot;><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>
  • 44.
    HTML – FundamentalsSue A Tom Grade Student Student Grades
  • 45.
    Screen Compatibility 1280x 1024 1024 x 768 800 x 600 640 x 480
  • 46.
    HTML – FundamentalsTables Tables are frequently used to layout the basic web page design . 640 1280
  • 47.
    HTML – FundamentalsFrames 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.
  • 48.
    HTML – FundamentalsBasic Frames Footer Content Menu Banner
  • 49.
    HTML – FundamentalsBasic Frames Basic tags <frameset> ..</frameset> <frame /> <noframes> .. </noframes> Basic attributes cols = “values” rows = “values” name = “frame_name” src = “frame_source(url)” target = “frame_name”
  • 50.
    HTML – FundamentalsBasic Frames Footer Content Menu Banner
  • 51.
    HTML – FundamentalsBasic Frames <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>
  • 52.
    HTML – FundamentalsBasic Frames <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” /> <noframes> <body> Welcome to my page. <A HREF=&quot;noframes.htm&quot;>Continue</A> to the frame-free version. </body> </noframes> </frameset>
  • 53.
    HTML – FundamentalsBasic Frames FRAMESET attributes FRAMEBORDER=&quot; yes | no &quot;| 0 BORDER= pixels BORDERCOLOR=&quot; #hexcolor | colorname &quot; < frameset rows=&quot;80,*,80&quot; border= 2 bordercolor=“ red &quot; > .. .. </frameset>
  • 54.
    HTML – FundamentalsBasic Frames Individual FRAME attributes SCROLLING=&quot;yes|no|auto&quot; NORESIZE MARGINWIDTH=pixels MARGINHEIGHT=&quot;pixels&quot; BORDERCOLOR=&quot;color&quot; FRAMESPACING=&quot;pixels&quot; FRAMEBORDER=&quot;yes|no&quot;|0 NAME=“frame_name”
  • 55.
    HTML – FundamentalsFloating Frames Floating frames allow you to create a frame within the boundaries of a page Basic Frames Floating Frames
  • 56.
    HTML – FundamentalsFloating Frames <IFRAME attributes ></IFRAME> Attributes SRC=URL HEIGHT=pixels|percent, WIDTH=pixels|percent HSPACE=pixels VSPACE=pixels ALIGN=left|right FRAMEBORDER=0
  • 57.
    HTML – FundamentalsFloating Frames <IFRAME NAME=“frame_name” ALIGN=&quot;right&quot; HSPACE=“40” VSPACE=“40” WIDTH=&quot;75%&quot; HEIGHT=“150” FRAMEBORDER= 0 SRC= http://www.mysite/mypage.htm > </IFRAME>
  • 58.
    HTML – FundamentalsHypertext links <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
  • 59.
    HTML – FundamentalsDIV and ILAYER Allows you create a position-able block of content. Content positioned within this block
  • 60.
    HTML – FundamentalsDIV <div attributes> content </div> attributes ID=“name” STYLE = “style parameters re: CSS”
  • 61.
    HTML – FundamentalsDIV < DIV ID=“fred” STYLE = “POSITION:absolute|relative ; VISIBILITY:visible:hidden ; Z-INDEX:number ; WIDTH:width in pixels ; HEIGHT:height in pixels ; TOP:pixels from top of page or block ; LEFT:pixels from left edge of page or block ; PADDING:margin in pixels ; other style attributes ; “ > content </DIV>
  • 62.
    HTML – FundamentalsDIV content contentc content content content content content
  • 63.
    <div style=&quot;position:absolute; left:100px ; top: 100px ; width: 100px ; height: 100px ; background-color:#ffffff; &quot;> HTML – Fundamentals DIV
  • 64.
    HTML – FundamentalsCASCADING STYLE SHEETS (CSS) 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
  • 65.
    HTML – FundamentalsCASCADING STYLE SHEETS (CSS) 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; }
  • 66.
    HTML – FundamentalsCASCADING STYLE SHEETS (CSS) 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; font-weight:bold; } element.class {property:value; }
  • 67.
    HTML – FundamentalsCASCADING STYLE SHEETS (CSS) Embedded <head> <title> My Page Title </title> <style TYPE=&quot;text/css > <! - - element.class { property:value; } element.class { property:value; } - - > </style> </head>
  • 68.
    HTML – FundamentalsCASCADING STYLE SHEETS (CSS) Linked Styles can be defined in a separate file <font style=“property:value; “> text </font> <font class=“fred”> text </font> mystyles.css <head> <LINK REL=&quot;stylesheet&quot; HREF=&quot;mystyles.css“ TYPE=&quot;text/css&quot;> </head>
  • 69.
    HTML – FundamentalsCASCADING STYLE SHEETS (CSS) /* 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; font-style: italic; } /* End of example style sheet file */
  • 70.
    HTML – FundamentalsCASCADING STYLE SHEETS (CSS) Inline Styles can be placed within individual elements <font style=“color:red; font-face:ariel;” >
  • 71.
    HTML – FundamentalsCASCADING STYLE SHEETS (CSS) Inline > Embedded > Linked Defining the style of your text linked -> font-family:arial,georgia; embedded -> color:navy; inline -> font-size:2pt;
  • 72.
    HTML – FundamentalsCASCADING STYLE SHEETS (CSS) 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>
  • 73.
    HTML – FundamentalsImages <img src=“images/pic1.jpg” width=75px, height=50px /> <img class=“pics” src=“images/pic1.jpg” /> img.pics { width:75px; height:50px; border-width:3px }
  • 74.
    HTML – FundamentalsUsing Images Images take longer to download than text The larger the image, the slower the page Use optimization software Use thumb nail images
  • 75.
    HTML – FundamentalsOther uses of Images Page background (not recommended) <body background-image = “url” > <body class=“background”> body.background { background-image:$url; } Table background <table background-image=“url”> <table class=“background”> table.background { backlground-image:url; } DIV background <div style={ background-image:url; } >
  • 76.
    Resources http://www.w3schools.com/ HTMLTutorials 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
  • 77.
    Courses at FVCCIntroduction to Web Design FrontPage Web Design Intermediate Web Design Advanced Topics in Web Design Web Site Promotion Basic Perl Programming Using Macromedia Studio MX