DIY Web Development

Hand Code Your Own Page (For Free!)

by Bryan Brown, Indiana University Bloomington SLIS

HELLO!This workshop will cover:

• How the web works

• The relationship between HTML,

CSS and JavaScript

• Identifying parts of a web page

• Editing source code (build a

resume!)

Why Code?• Obviously the web isn't going

away

• Build the sites you want!

• HTML is a gateway drug

• Page building skills look good on

a resume

• Better understand the web

Why HAND Code?

• WYSIWYG editors are bad for

you!

o bad code that needs to be

fixed

o limits what you can do

• Ability to fix bugs and errors

• Have COMPLETE control over

your page.

What's a web page?

• A plain-text (ASCII) file

• Mainly HTML, but can contain

CSS and Javascript, or reference

them in external files

• A complete package of

information wrapped up and

sent to you

HTML• Hypertext Markup Language

• Originally all there was (static pages of the

early web)

• A series of nested tags

• Gives the page it's content and structure

• The main event, references everything else

CSS• Cascading Style Sheets

• Came after HTML

• Controls the layout, colors, spacing, etc.

called "style"

• Works on HTML elements

• Can be external (good idea for really big

sites)

JavaScript• Completely unrelated to Java (marketing)

• Came around the same time as CSS

• Controls the dynamic elements of a web page,

called "behavior"

• Also works on HTML elements

• Full blown programming language. Learn

HTML and CSS first, they're more important.

Putting it all together

Trying It Out• Type "iolug.site44.com" into

your browser

• Right click anywhere on the

page, and then click "View

Page Source"

• Copy all of the text

(CTRL+A, CTRL+C)

Trying It Out• Open Notepad

• Right click anywhere in the

text field, and then click

"Paste"

• Save to desktop as

"test.html"

Trying It Out• Web page has 2 main parts, the "head" and the "body"

• "head" has metadata about document, including CSS style

info and JavaScript code. Not displayed.

• "body" has all displayed info. It's what you see in your

browser when you load the page.

• Notice how every HTML tag has a closing tag?

<tag>example</tag> Can you find the unclosed tag?

ValidationIn order for HTML to be considered "well formed" it has to

pass validation. The W3C provides a validator web app at

http://validator.w3.org/. Go there in your browser.

ValidationClick "Validate by File Upload", select "test.html" from your

desktop, and click "Check".

Uh-oh. Something's wrong, but what?

ValidationThere it is! I forgot to close out this tag. Correct it by making it a "closed" tag (</ul>), save it, and then revalidate it. It should now have no errors.

Now feel free to play around with the page and change things however you want. All the basic elements are listed:

<h1> - <h4> headers <hr/> line<p> paragraphs <img> embedded image<ul> unordered list (dots) <a> anchor (hyperlink)<li> list items

BONUS: Try to de-uglify it by playing around with the CSS!

Build a Resume!

Now that you have some coding experience under your belt, click on the link that says "Resume Example." Follow the same process of viewing the source, copying it into Notepad and saving it to the desktop.

Look at the content of the resume. Even if you don't know what the tags do, you could probably make a good guess by looking at the context. Change the text around to make this resume yours, or simply play around with it until it breaks. Then fix it.

Extra Credit!Done with the resume already? Try hosting it on Dropbox or Site44. Follow the instructions in the "Resources for Further Learning" link on "test.html", or simply go to:

iolug.site44.com/resources.html

Continue to play around with the code, and check out the "Learning Resources" sites to quench your thirst for coding knowledge. Above all else, have fun with it!

Thank you for attending this workshop, if you have any future questions, please feel free to email me at bryjbrow@indiana.edu, or @bryjbrown on Twitter.