diy web development - iredale.net · diy web development an introduction to building and...
TRANSCRIPT
![Page 1: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/1.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
1
DIY Web DevelopmentDIY Web Development
An introduction to building and An introduction to building and maintaining your own web site.maintaining your own web site.
www.iredale.netwww.iredale.net
![Page 2: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/2.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
2
Technology StackTechnology Stack
● Web Browser ● DOM/CSS/ECMAScript-262
● Transfer via HTTP/HTTPS● Web Server
● CGI or plug-ins● Support Services
● SSH, Database, Backup● Operating System● Hardware
Browser
Server
![Page 3: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/3.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
3
Hardware & Operating SystemHardware & Operating System
● Basic web server just need a balanced hardware platform:● 1 GHz CPU● 1 GiB RAM● Fast disks● Good network
● Any OS will do:● *nix e.g. Linux, BSD, Solaris● other e.g. VAX, zOS, Windows
![Page 4: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/4.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
4
Hosting...Hosting...
● Self Host● e.g. domestic ADSL Internet connection (£0)
● Virtual Hosting● e.g. an Apache virtual host (£0-£10 pm)
● Virtual Server● e.g. Xen, UML, Vmware (£10-£100 pm)
● Co-Location & Dedicated Hosting● e.g. commercial hosting company (£100- pm)
![Page 5: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/5.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
5
Self HostingSelf Hosting
● Advantages:● Free● Easy● Secure
● Disadvantages:● Usually limited up-stream bandwidth● Hard● Insecure
![Page 6: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/6.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
6
Virtual HostingVirtual Hosting
● Advantages:● Free or very cheap● Easy & simple● Secure
● Disadvantages:● You don't have full control● Insecure
![Page 7: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/7.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
7
Virtual ServerVirtual Server
● Advantages:● Fairly Cheap● Nearly full control● Secure
● Disadvantages:● Need to manage more than just the server● Insecure
![Page 8: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/8.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
8
Hosted ServerHosted Server
● Advantages:● Full control● Scalability● Performance● Security
● Disadvantages:● Expensive
![Page 9: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/9.jpg)
SuggestionsSuggestions
● Self Hosted server on home network only● Not exposed – don't connect to Internet● Free● Learning space
● Virtual Server (e.g. ISP)● Someone else looks after box & software● Free/nearly-free● Low Risk
![Page 10: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/10.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
10
Web ServerWeb Server
● You have several to choose from● Most servers offer similar features● Most Linux distros allow you to install and
configure automatically● Apache:
● Is not the best● It is very well known● A good overall compromise
![Page 11: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/11.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
11
First StepsFirst Steps
● Web server maps a real directory on your system to a web address:● /var/wwwroot/htdocs/
● becomes
● http://xxxxxxx/● Files to deal with:
● web pages, style sheets, scripts● plain text files!
● graphics, Java, animations, movies● binaries
![Page 12: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/12.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
12
ToolsTools● WYSIWYG Tools:
● Nvu, Dreamweaver, FrontPage● Dedicated non-WYSIWYG Tools or IDE:
● Bluefish, Quanta+, HomeSite, HTML-Kit● Kate, Emacs, GVim, Eclipse
● Text Editor:● Vi*, Emacs, nano, Joe
● Graphics:● GIMP, Inkscape, PhotoShop
![Page 13: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/13.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
13
Hello World (1)Hello World (1)
● Install Apache on your PC (2 pre-fork)
● Pick/install a text editor/non-WYSIWYG editor● Create file in the correct place, e.g. hello.html
● Edit the page● View with web browser
![Page 14: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/14.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
14
hello.htmlhello.html
<html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World</h1> <p>This is my first page!</p> </body></html>
![Page 15: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/15.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
15
Browse To http://127.0.0.1/Browse To http://127.0.0.1/
Index of /
Name Last modified Size Description
<- Parent Directory - [] hello.html 11-Sep-2006 10:16 3.2K
Apache/2.0.54 (Debian GNU/Linux) Server at 127.0.0.1 Port 80
![Page 16: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/16.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
16
Click on hello.htmlClick on hello.html
Hello World
This is my first Page!
![Page 17: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/17.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
17
Where Next?Where Next?
● Web pages are made from XHTML● Make them pretty using CSS● Make them interactive with ECMA Script-262
(JavaScript)● Add pictures, JPEG, PNG or GIF● World Wide Web Consortium (W3C)
● http://www.w3c.org/● Books● Web Sites
![Page 18: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/18.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
18
W3C StandardsW3C Standards
● XHTML (mark-up)● 1.1 (May 2001)
● CSS (style)● 2.0 (May 1998)
● WCAG (accessibility)● 1.0 (May 1999)
● ECMAScript-262 (JavaScript)● 3rd Edition (December 1999)
![Page 19: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/19.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
19
Why Use Standards?Why Use Standards?
● Pages more predictable across browsers and versions
● Pages usually more compact, therefore faster to download and render
● Pages easier to create (honestly) and much easier to edit later
● Accessibility is good – it's the law, and anyway Google will find your page
![Page 20: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/20.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
20
Browser & DeveloperBrowser & Developer
● Your web browser has many built-in/add-in tools to help you learn:● Web Developer● FireBug● View Source
● Validators:● On-line via browser● In-line within Editor
![Page 21: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/21.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
21
XML BasicsXML Basics
● Tags are created from < a word >, e.g.● <body>
● All tags are closed, e.g.● <h1>Heading</h1>● <br />
● Tags are logically nested:● <strong><span>Correct</span></strong>● <strong><span>WRONG!</strong></span>
![Page 22: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/22.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
22
XML Basics 'contXML Basics 'cont
● Tags are case sensitive● <h1>Good Heading</h1>● <h2>Bad Heading</H2>
● Attributes must be quoted● <span class=”good”>Foo</span>● <span class='okay'>Bar</span>● <span class=bad>Baz</span>● <span class=”not good'>Womble</span>
![Page 23: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/23.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
23
xhtml Basicsxhtml Basics
● xhtml is XML● There is a list of permitted tags● There is a list of permitted nesting● Documents MUST validate
![Page 24: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/24.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
24
Minimal xhtml DocumentMinimal xhtml Document<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="iredale consulting, Home of XML, Perl and more!" /> <meta name="keywords" content="XML, Perl, mod_perl, CGI, Apache, Linux, XHTML, CSS, W3C" /> <meta name="robots" content="INDEX, FOLLOW" /> <link rel="StyleSheet" href="/s/s-0.css" type="text/css" media="screen" /> <link rel="shortcut icon" href="/i/favicon.ico" type="image/x-icon" /><title>iredale consulting @ home :: Web :: Useful Links</title></head><body> <!-- Navigation zone, upper right --> <div id="top-nav" class="navigation"> <ul> <li class="home"><a href="/" title="Site HOME">Home</a></li> <li class="break"><span class="break">::</span></li> <li class="nohit"><strong><a href="/stats/" title="Access Stats">Stats</a></strong></li> </ul> </div> <div id="content"> <h1>Web</h1> <h2>Useful Links</h2> <h3>Web Specifications</h3> <p><a href="http://www.w3.org/MarkUp/">xhtml</a> - the eXtensible HyperText Markup Language specification at the <abbr title="World Wide Web Consortium">W3C</abbr>. <href="http://www.w3.org/WAI/">WAI</a> - the Web Accessibility Initiative at the W3C.</p> </div> <p><small>© 2003-2006</small></p></body></html>
![Page 25: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/25.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
25
Simple Style SheetSimple Style Sheetbody { background-color: #b6c7ea; color: #000; font-family: "DejaVu Sans", verdana, Arial, Helvetica, Sans-Serif; font-size: 13px; padding: 0; margin: 0;}
a img { border: 0;}
h1, h2, h3, h4, h5, h6 { font-family: "DejaVu Serif", "Times New Roman", Times, Serif; text-align: left; padding: 5px 10px; margin: 5px 10px; color: #003;}
h1 { padding: 10px; margin: 10px; border-bottom: 3px solid #039;}
.footer { text-align: right; margin-right: 40px;}
a:link { color: #00f;}
#top-nav { border-bottom: 2px solid #039; height: 50px; padding: 5px 10px; margin: 0;}
![Page 26: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/26.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
26
BooksBooks
● Web Design in a Nutshell, 3rd Edition, O'Reilly, 0-596-00987-9
● HTML & XHTML: The Definitive Guide, 6th Edition, O'Reilly, 0-596-52732-2
● CSS: The Definitive Guide, 3rd Edition, O'Reilly, 0-596-52733-0
● and many many more...
![Page 27: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/27.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
27
Web PagesWeb Pages
● View the source of pages● Learning XHTML/CSS Sites:
● http://www.useit.com/● http://www.w3schools.com/● http://alistapart.com/● http://www.csszengarden.com/● http://www.positioniseverything.net/● http://www.quirksmode.org/
![Page 28: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/28.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
28
Some of My WorkSome of My Work
● http://www.overton-biodiversity.org/● http://www.eastcourtschool.co.uk/● http://www.iredale.net/● http://iredale.dyndns.org/
![Page 29: DIY Web Development - iredale.net · DIY Web Development An introduction to building and maintaining your own web site. ... Free Easy Secure Disadvantages: ... Virtual Hosting Advantages:](https://reader034.vdocuments.us/reader034/viewer/2022051909/5ffdca3df028f36d741cfc5d/html5/thumbnails/29.jpg)
Version 1.0.0 © Adam Trickett December-2006 Distributed under a creative commons Attribution-NonCommercial-ShareAlike licence.
29