Spark Boulder, Summer 2017
Session 1: The Motion Picture
Hosting your site on Site44, HTML tags
Over the course of the next 10 weeks, I'm going to have you complete 4 different projects.
You can present your project to the class, if you want! Definitely not required.
Just like all of the other assignments, these aren't formally "due" anytime.
These projects won't be formally graded at all, but they'll be included in your "report card" at the end of the class. They're also really cool to show off to potential clients and employers!
For your first project, I'd like you to create a simple portfolio site. Nothing too fancy!
You can put whatever you'd like on it! You can include things like:
Really, anything you want! I'm not "grading" these. You can submit them whenever you want.
If you'd like to see a couple examples of other portfolios, you can check them out on the readings for session 4. Some of these are pretty advanced! I just want you to create something simple that you're comfortable with.
A couple things:
submit 4 http://my-awesome-portfolio.site44.com/index.htmlon @classbot.
If you don't already have Dropbox on your computer, go install that first!
This whole flow may look slightly different when you sign up for the first time - at some point in the process Site44 will ask to access your Dropbox, and you should allow it access.
index.html(the one inside the Dropbox site44 folder) in Atom
<html> <body> <h1>Hello, World!</h1> </body> </html>
index.htmlfile in your Dropbox so that it opens in your browser, and check the URL. It should say something like
yoursitenamehere.site44.com. You should see the exact same page.
You can have multiple pages on the same site, but you have to specify which file you want in the URL.
contact.html -> http://notajetski.site44.com/contact.html
Way back in the dark beginnings of the internet, you would connect to a web server (a site) and browse all of the files that they had.
You needed to know what files there were on the server, so by default, the server sent back a file
index.html which contained a list of all of the files on the server.
Because it was basically default to want the
index.html when you connected to a server, servers started sending
index.html when the client didn't request a specific file.
This means that both of these URLs:
will serve the exact same file (
Firefox and Safari both have their own versions of this - they might look a little bit different, but you should be able to accomplish the same things.
There's a couple ways to access developer tools:
ctrl-opt-Iif you're on a PC)
There's a couple ways to inspect an element:
ctrl-shift-Cif you're on a PC)
Once you've selected an element, check out the "Styles" pane inside of Developer tools, and see what's going on there.
We already learned that we can use HTML tags to create HTML elements, and we need both an opening and closing tag for each HTML element.
Remember: HTML elements can be nested! You can put HTML elements inside of other HTML elements.
We saw paragraph tags last time. They're literally what they sound like - just an easy way to separate out a couple of paragraphs of content.
<p> Lose yourself to dance digital love nightvision, phœnix. Alive, veridis quo voyager. Motherboard, face to face, technologic giorgio by moroder, too long. Fragments of time. Harder, better, faster, stronger, within daftendirekt, da funk rock'n roll on/off. Make love high life human after all. Television rules the nation fragments of time. </p> <p> Beyond steam machine daftendirekt, human after all, rock'n roll, within get lucky. Veridis quo robot rock, contact WDPK 83.7 FM indo silver club one more time. Contact. Make love. Steam machine superheroes. One more time around the world burnin' da funk. Lose yourself to dance robot rock, high life. Get lucky. </p> <p> Rock'n roll nightvision lose yourself to dance technologic. Lose yourself to dance crescendolls digital love giorgio by moroder veridis quo high fidelity lose yourself to dance rock'n roll superheroes motherboard touch touch, beyond. Nightvision the prime time of your life da funk. Homework. Emotion rollin' and scratchin', da funk motherboard. </p>
We also saw an
h1 "Heading" element last time. Headings are a good way to provide "titles" for different sections of a page.
You can have headings of different levels of importance, from
h1 (most important) to
h6 (least important).
<h1>Around the World</h1> <h2>Around the World</h2> <h3>Around the World</h3> <h4>Around the World</h4> <h5>Around the World</h5> <h6>Around the World</h6>
We can put lists of elements on the page, in a numbered (ordered) and bullet point (unordered) format.
First, you need to decide if you want an ordered (
<ol>) or unordered (
<ul>) list. Then, you put some list items (
<li>) inside of the list tags.
<h1>How to be a web developer</h1> <ol> <li>Look stuff up on the internet</li> <li>Make stuff</li> <li>Repeat</li> </ol> <h1>Ken's shopping list</h1> <ul> <li>Milk</li> <li>Eggs</li> <li>Absurd amounts of peanut butter</li> </ul>
<p> Never accept the world as it <em>appears</em> to be. Dare to see it for what it <strong>could</strong> be. </p>
Notice the difference in whitespace here.
Anchor tags are basically just links.
Why are they called anchor tags? Sounds like they were originally intended to link between different sections of a page (we'll do that next session) but then Tim Berners-Lee came up with the "teleporter" concept.
Put anchor tags in everything! Everywhere!
href attribute to tell where the anchor tag to link to. (we'll talk more about attributes next session)
href attribute can link to other pages in the same folder, or to other pages on the internet.
<a href="syllabus.html">back to syllabus</a> <p> You can have anchor tags <a href="https://en.wikipedia.org/wiki/HTML_element">only on specific parts</a> of a nested element. </p>
In general, put anchor tags inside other tags. One exception is image tags, which we'll demonstrate in just a bit.
Did you know: when designing the Internet, anchor tags were supposed to be "privileged" - they could only link to pages that gave permission to be linked to. They got the first part done (linking to external pages), then the internet blew up and they never got around to building the second part (making sure that external pages gave permission to be linked to)
(still need to find the source for that)
<img src="pugs/pug1.jpeg" /> <img src="https://media.giphy.com/media/oSwcTWom8isyA/giphy.gif" />
Note that image tags typically don't include a closing tag!
You can put a
/ at the end of any tag instead of a closing tag. That means that the element has no content, and it's typically called a self-closing tag.
<a href="https://media.giphy.com/media/daUOBsa1OztxC/giphy.gif"> <img src="https://media.giphy.com/media/daUOBsa1OztxC/giphy.gif" /> </a>
This is one of those situations where you'd put another tag inside the anchor tag, instead of some text.
If you want to have a bunch of elements nested together, you might want to use a division tag. This is handy for making a bunch of tags into a single link, or especially for styling. More on that when we get to CSS!
<a href="projects.html"> <div> <h1>Projects</h1> <p> I've done a lot of projects and stuff! No matter if you click on the heading or the paragraph, you'll get taken to the same place. </p> </div> </a>
There's a whole group of tags focused on helping the user interact with the page -
<option>, and more - they can be styled and manipulated just like any other elements.
Forms usually interact with a "Back End" - user adding email address to a mailing list, or changing some profile information.
<button> is clicked.
See that little text on the browser tab? That's the page's "title".
We can change that with the
<title>Ken's Super Duper Awesome Portfolio Site</title>
It's important to note that the title isn't actually rendered anywhere on the page - just on that little tab text at the top.
You can put the title tag wherever you'd like on your page, but I'd recommend putting it inside of your
<head> tag. More on that in just a bit.
Technically, all of your tags on your page should be wrapped in a single
This just lets browsers know that the page should be rendered as HTML.
<html> <p> Hey look! A valid HTML document using the html tag. This won't look any different than if you left out the html tag. </p> </html>
If the browser is pretty confident that your file is an HTML file (if it has a
.html extension, if it has a bunch of HTML tags in it), then the browser will usually automatically add the
<html> tag for you.
Directly inside the
<html> tag, you should have a
<head> tag and a
Put all the content that is going to be displayed on the page inside the
<body> tag. This includes headings, paragraphs, images, links, etc.
Put all the content that doesn't get directly displayed on the page inside the
<head> tag. This includes our
<html> <head> <title>my page title goes here!</title> </head> <body> <h1>my page content goes here!</h1> </body> </html>
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h1>This heading's size looks different on your mobile device, depending on if you've included that tag at the top or not.</h1> </body> </html>
(try opening your page on your phone, and then adding/removing that
HTML tables are kind of a pain. Wrap everything in a
<table>, define rows using
<tr>, and individual cell data with
<td>. You can use
<th> instead of
<td> to denote a heading cell.
Don't use tables to lay out your site! That's so 1996. We'll do page layout once we get to CSS.
<html> <body> <h1>Places Ken Has Lived</h1> <table> <tr> <th> Year </th> <th> City </th> <th> State </th> </tr> <tr> <td> 2016-present </td> <td> Boulder </td> <td> Colorado </td> </tr> <tr> <td> 2014-2015 </td> <td> Seattle </td> <td> Washington </td> </tr> <tr> <td> 2007-2013 </td> <td> Boulder </td> <td> Colorado </td> </tr> </table> </body> </html>
Files and folders are represented as a tree on your computer.
"directory" == "folder"
/ - is the "root" of your file system. The absolute top-most directory of your hard drive
/Users/ken/Documents - a directory where I keep all my documents!
/Users - all the users on my computer
/Users/ken - all the things that I (ken) own (are there other users?)
/Users/ken/dev - where I keep all of my development-related directories
(for Windows or Linux, this will look a bit different)