Transcript 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!)
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?
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.
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 (</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
<p> paragraphs
<ul> unordered list (dots)
<li> list items
<hr/> line
<img> embedded image
<a> anchor (hyperlink)
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
[email protected], or @bryjbrown on Twitter.