Skip to content

Instantly share code, notes, and snippets.

@stevekinney

stevekinney/follow-up.md

Last active December 12, 2015 03:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save stevekinney/4704079 to your computer and use it in GitHub Desktop.
Save stevekinney/4704079 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
follow-up.md

Week One: Day Two

Notes to Middle School Class

  • You can submit your work from yesterday and today here.

Notes to High School Class

  • I have received the homework that was due yesterday from 12 of you.
  • If you submitted your first web page yesterday, I sent you an email in response.
  • If you didn't submit it, you received a zero. There is more work due at the end of class today and you're quickly falling behind.
    • If you can get it in to me by the end of the period and it's good, I will give you half credit.
    • If you can't get it in to me, I will not accept it after 9:52am today, February 5, 2013.

Hyperlinks and Images

Hyperlinks

Basically, we are just going to take what we did yesterday and up the ante a bit. Text pages that don't go anywhere are great and wonderful, but they are ultimately missing the point of the web. A big part of the Hypertext Transfer Protocol (HTTP) and the Hypertext Markup Languange (HTML) is this idea of hyper text.

Hypertext sounds fancy, but it really isn't. You know those links you click on to get from one page to another? Those are hypertext. Single page web apps are rising in popularity, but if you are going to be writing software for the web, then you're going to need to learn how to link to other pages and sites.

Let's take a look at the code that would create a link to the Google homepage:

<a href="http://google.com">Google</a>

Alright, there are some new things going on here—but nothing that you should be unfamilar with if you've done your reading. First we have our tag element: <a></a>. Inside of that element, we have the text we want to turn into a hyperlink. But inside of the opening tag, we added an attribute. An attribute is an extra piece of information. In this case the attribute href (which stands for hyper-reference) is telling us where the link points to. You can also add a title to the link that will be shown to the user when they hover their mouse over it.

<a href="http://google.com" title="The Google Homepage">Google</a>

Please notice that you don't need to include these attributes in the closing tag, only the opening one.

Images

Alright, let's take a look at another element: the <img>. Images are a little funky because they don't have closing tags.

<img src="nyancat.gif">

Again, there is no </img> tag. Also, just like the <a> element, the <img> needs a bit more information in order to work. We need to tell the element where the image is by setting the src attribute. In this case, we're telling the <img> element to look for a file called nyancat.gif in the same folder at the HTML file we're working with. If it's in a different folder, it's not going to load. The number one reason why students complain that their pages don't work is because their images (or Javascript files or stylesheets) are in the wrong place.

We can also link to images elsewhere on the web.

<img src="http://f.cl.ly/items/2p270p1I2f1V1K1P1B2d/Screen%20Shot%202013-02-05%20at%208.52.04%20AM.png">

This is get a remote image and display it on the page. It is generally a terrible idea to link to images you don't control. if you link to an image on my page and I move it or delete it, your site breaks. That stinks.

Your Mission Today

  • Create a page with all of the elements from yesterday's assignment
  • This page should be about your favorite food and why you like it
  • Link to the Wikipedia article on that food
  • Include an image (it can be a remote image) to a photograph of your favorite food.

This is due at the end of the period and it is worth ten points.

Raw
week-one.md

Week One: A Basic Introduction to the Web

The web isn't just one thing. There are a bunch of technologies that work together to create the experience that you know and love. Let's talk about the three most commonly associated with the web: HTML, CSS, and Javascript.

  • HTML defines the structure of a page. It's kind of like the foundation and frame of a house.
  • CSS styles our pages so they look pretty. It's like the paint and deocations within the house.
  • Javascript makes our pages interactive. Without Javascript, we can make read-only pages. It's like the electricity within our house. With Javascript, our page can respond to user interaction and do things based on rules we set. Pretty cool stuff.

We're going to learn all three, but we have to start somewhere. So, this week we'll focus on HTML.

Today's Lesson

We're going to cover the following:

  • Writing some basic HTML
  • Saving the file correctly
  • Loading it up in the browser
  • Viewing your changes in the browser

Reading

Mozilla's tutorials can be a bit dense, but they are excellent sources of information and a good place to refer to when you are stuck.

The HyperText Markup Language

On a very simple level, web pages are made up of something called HTML. HTML stands for "HyperText Markup Language." It's not really a programming language. HTML is a way to structure your content in a way that the web browser understands and can make sense of. At the end of the day, HTML is just plain text with some notation that the your web browser knows how to deal with.

The web browser (e.g. Chrome, Firefox, Internet Explorer, and Safari) is an application on your computer that contacts a web server for information. The web server sends off some HTML, which the browser makes sense of.

Basic HTML Tags

HTML works by wrapping little tags around plain text. For example, wrapping <strong> and </strong> around some text makes it bold. Wrapping that same text in <emphasis> and </emphasis> makes it italicized. Notice how each closing tag includes a /. This slash tells your browser to close the tag. If you don’t close your tags, the formatting will go on forever and ever—and that's not a good thing.

Headers, Paragraphs, and Lists

There are six levels of headers. <h1> is the largest. <h6> is the smallest. Nobody ever uses <h6>. Don’t be a hero.

Next up: paragraphs. HTML couldn’t care less how many times you hit return. It’s going to take all of your text and make it one giant block. These seems annoying but it is for a good reason. As you start writing more advanced code, you’ll be using whitespace (blank lines, spaces, and tabs) to keep things organized. If you want to break things up into paragraphs, HTML has a tag for you: the <p> tag.

Lastly‐and this is the most complicated yet!‐we’re going to talk about making lists. Making lists involves nesting HTML tags. What is nesting? We’ll I’ll show you with an example!

<h1>This is an example</h1>

<p>This is where I should write some text. I could write a whole paragraph here if I wanted to!</p>

	<ul>
  		<li>First item on the list.</li>
  		<li>Second item on the list.</li>
  		<li>Third item on the list.</li>
	</ul>

<p>Another paragraph of text!</p>

So, let’s take a look at what’s going on here:

  • We have a level one header.
  • We have a paragraph.
  • We have a <ul> tag to start an unordered list.
  • For each list item, I have an <li> tag. <li> stands for list item, duh.
  • I close off the list with a
tag.
  • I make another paragraph just because I can.
  • Unordered lists use bullets, just like the one at the very beginning of this story. But what if you want a fancy numbered list like the one above? Well, silly, you make an ordered list with the <ol> tag.

    • A Video Walkthrough

    A few months ago I did a summer program where we learned how to code. It was a lot like this class. To help get everyone up to speed, I made a twenty-minute video that covered the basics of HTML and CSS. If this kind of stuff is new to you, watch the video and let me know if you have any questions.

    An HTML Skeleton

    There is some boilerplate code associated with making a basic HTML page. This foundation can be a hassle to have to retype over and over again. I made a template for you. You can copy and paste this code when you are starting a new page. Anything wrapped in <!-- --> is what's called a comment. Basically, it's something that is not going to appear when the browser renders it. You can leave these placeholders, or you can delete them—it's up to you.

    You can find the HTML skeleton here.

    Your Mission

    This assignment is worth 10 points.

    1. Start off the HTML Skeleton that I made for you because I'm a nice guy.
    2. You're going to be doing most of your work inside of the <body></body> tag. That said, you may also want to change the contents of the <title></title> tag to something relevant (i.e. your name).
    3. Basically, you're going to make a basic page telling me about yourself. I'm not as concerned about the content as much as I am that you get the hang of using the basic HTML tages we discussed. Keep in mind, however, this will being on the Internet and if you embarrass yourself or me, I will deduct points.
    4. Use the following tags in your page:
      • <strong></strong>
      • <em></em>
      • <h1></h1>
      • <h2></h2>
      • <p></p>
      • <ul></ul>
      • <li></li>
    5. Extra credit (Four points): Incude a link and include an image.

    Submission

    If you have done your homework, you already have a Github account. If not, make one now. When you're done, head over to http://gist.github.com and paste your code into a new gist. Send me an email with the URL to your gist. That's it.

    Make sure you select HTML as your language in the Gist editor.

    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment