Drboots presents. Web 101 Utility links | Join SWIFT | Pylons Navigation links Some place Another...
14
WEB SITE CONSTRUCTION BASICS drboots presents
-
Upload
bethany-may -
Category
Documents
-
view
214 -
download
0
Transcript of Drboots presents. Web 101 Utility links | Join SWIFT | Pylons Navigation links Some place Another...
WEB SITE CONSTRUCTION BASICS
drboots presents
Web 101 Utility links | Join SWIFT | Pylons
Navigation links
•Some place
•Another place
•Links
•Nothinghere
Content goes here
This is content…seriously
Other stuff can go here if you want, but that depends if you got a Google Calendar or something. This is tl;dr so you’re probably not paying attention anyway.
That’s the title.
Yeah, yeah, you know this already, but you’re building this stuff, you gotta know. Most commercial websites have links down here too.
HTML Basics
•A website is merely an HTML file•You can use a basic text editor and make a basic website in merely 15 minutes. Add .html to the end of the file.•A website can be…• Informative• Contain as many pylons references as you want• Flash based• A money maker• Actually do useful things (SQL, php, asp, etc)• And much more!
HTML Basics<html>
<head><title>Random site</title></head>
<body><b><font size = "34">This is crap</b></font></br>Don't do it</br></br></br></br></br>
<font color = "green">This is green text</font></br></br>
Anyways, this is seriously what makes a website</body></html>
This is what it did.
Table Formats
Before the proliferation of CSS, Table based layouts were popular. All content was enclosed in <table> tags.
Web site size
• Most of people on the internet run at 1024 by 768 or higher, many, many more run higher resolutions
• Horizontal scroll bars are bad – notice many major web sites resize themselves depending on the monitor resolution or browser window size.
• Be sure to let the viewer know the optimal resolution
Browser compatibility
• As of December 2010, the most used web browser is Firefox. Internet Explorer and Chrome are a close and third. Different tags do different things in different browsers
• CSS Templates, Flash, possible ads, etc.
• W3 schools has a ton of useful info and statistics to help you out. All free to view too.
CSS Templates
A CSS template is used to format the way a website appears
Many free templates are available online
You can develop one yourself, they’re not too hard when you get the hang of them
A CSS template does not automatically ensure a cool looking website, it has to be well done.
Sample CSS* {
margin: 0;padding: 0;
}
body {background: #fff url(images/bg.gif) repeat-x;font-family: "Verdana" Arial, Helvetica, sans-serif;font-size: 12px;line-height: 17px;color: #333;}
a {text-decoration: none;color: #157D6A;}a:hover {text-decoration: underline;color: #37AB96;}
#wrap {margin: 0 auto;width: 800px;}
#header {height: 80px;}#header h1 { font-size: 28px;letter-spacing: -1px;padding: 23px 0 0 20px;color: #EE4000;}letter-spacing: -2px;
CSS In your HTML file
<html><head><link href="style.css" media="screen" rel="stylesheet" type="text/css"><title></title></head><body><div id="wrap"><div id="header">
<h1><a href="#">Random Website!</a></h1></div>
<div id="menu"><ul><li><a href="film.html">Join SWIFT</a></li><li><a href="image-edit.html">About</a></li><li><a href="production.html">Site Map</a></li></ul></div>
<div id="content"><div class="right">
<h2>Stuff</h2><br>
</div>
Looks like this
The advanced stuff
Websites can display results from a database. SQL code and server side scripting can do this for you.•Javascript•PHP•Active Server Page
There’s also flash.
Seriously, web design and development is huge.
Probably not the best firetalk topic
Questions?
