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? example Can you find the unclosed tag?

Validation In order for HTML to be considered "well formed" it has to pass validation. The W3C provides a validator web app at Go there in your browser.

Validation Click "Validate by File Upload", select "test.html" from your desktop, and click "Check". Uh-oh. Something's wrong, but what?

Validation There it is! I forgot to close out this tag. Correct it by making it a "closed" tag ( ), 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: - headers line paragraphs embedded image unordered list (dots) anchor (hyperlink) 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 me at on Twitter.