1 / 17

DIY Web Development

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

dextra
Download Presentation

DIY Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. DIY Web Development Hand Code Your Own Page (For Free!) by Bryan Brown, Indiana University Bloomington SLIS

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

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

  4. Why HAND Code? • WYSIWYG editors are bad for you! • bad code that needs to be fixed • limits what you can do • Ability to fix bugs and errors • Have COMPLETE control over your page.

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

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

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

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

  9. Putting it all together

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

  11. Trying It Out • Open Notepad • Right click anywhere in the text field, and then click "Paste" • Save to desktop as "test.html"

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

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

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

  15. Validation There 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!

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

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

More Related