1. drboots presents

2. 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.

3. 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!

4. HTML Basics Random site This is crap Don't do it This is green text Anyways, this is seriously what makes a website

5. This is what it did.

6. Table Formats Before the proliferation of CSS, Table based layouts were popular. All content was enclosed in tags.

7. 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

8. 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.

9. 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.

10. 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;

11. CSS In your HTML file Random Website! Join SWIFT About Site Map Stuff

12. Looks like this

13. 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

14. Questions?