Download - Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand
![Page 1: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/1.jpg)
dbwebsites 1.1
Making Database backed Websites
Session 1
Building a simplewebsite by hand
![Page 2: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/2.jpg)
dbwebsites 1.2
How does the web work?
A web-server waits for requests from a browser (web-client)
When you go to a site your browser sends a request to the web server
It sends back the HTML for the page
Your browser parses the page looking for other resources it needs (eg images)
It requests and receives the additional resources
![Page 3: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/3.jpg)
dbwebsites 1.3
HTML
Originally designed as a Semantic Markup Language
Consists of Head and Body
Head contains information about the web page (eg title)
Body contains the content of the page itself
![Page 4: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/4.jpg)
dbwebsites 1.4
Tags
HTML tags markup parts of the page as being head, body, a title, bold, etc.
Tags look like…<head> ...some stuff… </head>
Some tags also have attributes<img src=“foo.gif”>
Note, in HTML not all tags close
![Page 5: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/5.jpg)
dbwebsites 1.5
A short page
<html> <head> <title>A short page</title> </head> <body> Some content for our short page </body></html>
Note: The indenting is not important, but it makes it easier to see the structure of the document.
![Page 6: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/6.jpg)
dbwebsites 1.6
The major tags
<HTML><head>
<title>
<body><h1> <h2> <h3> <h4> <h5> <h6><p> <img src=“foo.gif” alt=“a foo”><table>
<tr><td> <th>
<a href=“foo.html”> <a name=“bar”>
<!-- comment -->
![Page 7: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/7.jpg)
dbwebsites 1.7
Linking pages together
<html><body>
<ul><li><a href=“stuff.html”>Stuff</a></li><li><a href=“bother.html”>Bother</a></li>
</ul></body>
</html>
This page will be have links to a page called stuff.html and another called bother.html
![Page 8: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/8.jpg)
dbwebsites 1.8
Blue Peter moment
Here’s one I prepared earlier…
Errr…why does it look awful? We need some style!
![Page 9: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/9.jpg)
dbwebsites 1.9
Getting it to look good
There are two broad approaches…
Using HTML as a layout language (a Bad Thing)
…or…
Using Semantic Markup (a Good Thing)
![Page 10: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/10.jpg)
dbwebsites 1.10
Non-Semantic Markup
<b> <i>
<font>
<table> when used for layout
Widely used (even by me), but considered a “Bad Thing”. Don’t do it…use semantic markup instead
![Page 11: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/11.jpg)
dbwebsites 1.11
Semantic Markup
Use markup to denote the meaning of parts of the document.
i.e. Which part is the title, which parts are headings
Then use style sheets to control the appearance.
<strong> <em> <span> <div>
![Page 12: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/12.jpg)
dbwebsites 1.12
Style Sheets
h1 {font-family: Helvetica;color: #008800;background-color: #ffffff;text-decoration: underline;
}
div.special { color: #bbbbbb; }
![Page 13: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/13.jpg)
dbwebsites 1.13
Style Sheets
Inline styles – the <style> tag<style> h1 { color: #ff0000; }<style>
External Style sheets <link> tag<link rel=“stylesheet” type=“text/css”
href=“/styles/style.css”>
External styles generally are generally better, unless you want to add one extra style to a specific page, that’s never going to be used elsewhere… Why?
![Page 14: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/14.jpg)
dbwebsites 1.14
Colours
Look like #ff6790 (which is a pinkish colour)
Made up of Red, Green and Blue
#RRGGBB
Unfortunately in hexadecimal, (base 16).
![Page 15: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/15.jpg)
dbwebsites 1.15
Regions
<div class=“special”> here’s some text in a grey region</div><span class=“weird”>Freaky</span>
The appearance of the regions is defined by style sheets.
![Page 16: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/16.jpg)
dbwebsites 1.16
Site layout strategies
Addressing types
Absolute <a href=http://www.foo.com/bar.html>will work from anywhere. The only option for linking to
pages on another site
Relative <a href=“bar.html”>assuming that the page with the link is in the same
directory. Will stop working if you move either of the pages.
Root Relative <a href=“/bar.html”>assuming the page with the link is on the same server.
Will work so long as the target page is not moved.
Since sites tend to have lots of links within the site Root Relative is very useful.
![Page 17: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/17.jpg)
dbwebsites 1.17
Site layout strategies
Use folders to group related pages within a site. The URL can be a useful navigation tool for experienced surfers.
Put images that are used all over the site in one place – often in /images/
Site wide style sheets in one place – say /styles/
Resources that are only used for part of a site in subfolders.
![Page 18: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/18.jpg)
dbwebsites 1.18
Why does site layout matter?
If you’ve written 5 webpages, it probably doesn’t.
If you’ve written 5000 and you decide you want to change something… bad layout will toast you.
Bad separation of style from content will also toast you since you’ll have to update the style elements on every page.
![Page 19: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/19.jpg)
dbwebsites 1.19
Forms!
This is where it gets exciting…
<form action=“dosomething.php” method=“get”><input type=“button” name=“foo” value=“bar”><input type=“text” name=“baz” value=“wibble”
size=“20”><input type=“checkbox” name=“c1”
value=“c1on”><textarea rows=“6” cols=“40”>Some text</textarea>
</form>
![Page 20: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/20.jpg)
dbwebsites 1.20
So where does the data go?
We’ll come to that in the final week!!
For now just use the script “echo.php”
![Page 21: Dbwebsites 1.1 Making Database backed Websites Session 1 Building a simple website by hand](https://reader035.vdocuments.net/reader035/viewer/2022062802/56649e9f5503460f94ba1115/html5/thumbnails/21.jpg)
dbwebsites 1.21
Questions?
Presentation online at…
http://people.surfaceeffect.com/pete/
tech/howitworks/dbwebsites/