Intro to Web Development
HTML & CSS: You can do it!
Class Overview
Classes 1 - 3: HTML & CSS Projects
Class 4: Version Control -- Learning the Command Line & Git
Classes 5 - 8: Programming Concepts -- Learning Javascript
Class Overview
Software
Sublime Text & Slack
What are we going to learn?
HTML Basics: Elements, Tags, Forms, Document Structure
CSS Basics: Selectors, How to Style Your Site
The Creative Commons - What is it?
HTML vs CSS
HTML stands for HyperText Markup Language. We’re using HTML 5.0. (It evolves like most languages.)
CSS stands for Casading Stylesheets.
Timeline of HTML & CSS
What are HTML and CSS?
HTML: structure of the content that goes inside the tags. Browsers provide default style, but it’s ugly.
CSS: controls the style of HTML content. You can change colors, fonts, layout and more.
HTML: Elements and Tags
HTML Elements start with an <opening tag> and end with a </closing tag>. The element content is anything within that container.
HTML uses <tags> to tell the browser how to format the content.
HTML Document Structure
HTML Syntax: Elements & Tags
HTML Content Tags: Headers
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
HTML Tags: Paragraph <p></p>
HTML Content Tags
Header: <h1></h1>
Paragraph: <p></p>
Forms: <input />
Images:<img />
Links: <a href=LINK></a>
HTML Content Tags
Unordered list: <ul></ul>
Order list: <ol></ol>
List items:<li></li>
Cheat Sheet: http://websitesetup.org/html5-cheat-sheet/
HTML Tags: Forms
To get information from users, you need forms, which use the <input> tag.
There are many different types of inputs, but for now we’ll cover “email” and “submit”.
HTML Basics: Forms
HTML Basics: Forms
Form Problem?
We don’t say what users are supposed to type in the input field.
HTML Document Structure
The best way to select elements at once is to have a parent element that contains other elements.
HTML gives us a tag called <body> that is designed for that purpose.
HTML Document Structure
HTML Document Structure
HTML Document Structure
To have a valid HTML document, we need to tell the browser we’re using HTML 5.
Add <!DOCTYPE html> to the top of your file. Add <html> tags.
HTML Document Structure
Together, the doctype, head, and body make up the basic foundation/structure that every website starts from.
Styling = CSS
1. What is CSS? How do you add it to your site?
2. How to structure your doc properly.
3. How to add common styles to your site.
CSS Syntax
Add Style Tag and CSS Selectors
More Styling
More Styling
1. Change the background color to black.
2. Change the text color to white.
3. Change the font-family to your favorite google font!
More Styling: Padding vs Margins
Add Padding to Your Inputs
Padding
More Styling
Set the input’s font-size to 18px.
Selecting Specific Elements
Selecting Specific Elements
More Styling
Set the submit input’s background to a color of your choice. (Find an HTML color online.)
My favorite: http://color.hailpixel.com/
Add an image your site
Find an image you like on the internet.
Add <img src=”URL”> in body above the p tag.
URLs: Absolute vs Relative
Absolute: The links you’re used to. They include http:// and the full domain name before the directory.
Relative: Shortcuts that allow you to skip the domain name. It only works if you’re linking to a file on the same domain as the current page. (Looks for the relative path of the image.)
More HTML Attributes: Classes vs IDs
IDs are unique. Each element can only have one ID. Each page can only have one element with that id.
Classes are NOT unique. You can the same classes for multiple elements. You can use multiple classes on the same element.
More Styling
Add an id to your image.
Style your image so the border-radius is 70%.
Navigation: Unordered Lists
One of the most commonly used HTML tags is the <ul> tag, which stands for unordered lists. We’ll use this for our navigation bar.
Add <ul> tags to your body.
List Items
List Items: Links
Since this is a navigation bar, each list item should not just be text, but a link to another page. To accomplish this, we’ll use the <a> tag.
List Items: Links
The <a> tag has an attribute called href, which controls the URL your browser opens when you click the link.
Style Those Ugly <li>s
Style Your Links
Set text color to white.
Set text-decoration to none.
Copyright Your Content:
Choose Your CC License!
What is the Creative Commons?
Creative Commons offers a core suite of six copyright licenses written to conform to international treaties governing copyright. The international licenses, as well as existing ported licenses, are all intended to be effective anywhere in the world, with the same effect.
"People want to bridge the public domain with the realm of private copyrights. Our licences build upon their creativity, taking the power of digital rights description to a new level. They deliver on our vision of promoting the innovative reuse of all types of intellectual works, unlocking the potential of sharing and transforming others' work."
- Lawrence Lessig
Who uses Creative Commons?
Al Jazeera
In early 2009, Al Jazeera launched a Creative Commons Repository–a section of their website dedicated to posting videos under the CC Attribution license. These videos were shot in Gaza, highlighting the Israeli/Palestine conflict. Whereas most Western media had no access to the area, Al Jazeera was visibly present.
Flickr
Flickr was one of the first major online communities to incorporate Creative Commons licensing options into its user interface, giving photographers around the world the easy ability to share photos on terms of their choosing.
Google has utilized CC licenses in a variety of instances throughout their digital services. Either by enabling CC-search capabilities through their main search engine,image search engine, and book search engine, or by allowing users to CC license their own content in Picasa, Google Knol, and documentation at Google Code. YouTube, which is Google-owned, has added the CC BY licensing option for video uploads; used CC-licenses in their audio-swap program, allowing users to swap “All Rights Reserved” music for similar-sounding CC-licensed tracks; and has also enabled CC-licensing for select institutions.
Creative Commons Attribution
Inspect Element!
Resources Moving Forward