• APCO/IASC 1P01 – Lab 8 This lab is a bit longer than the others. If necessary, since next week's lab will be a bit shorter (and directly related to this week's), you can submit your work from this lab next week as well. Introduction: For this lab (or these labs, depending on perspective), you'll be learning some basic HTML. We'll also introduce some additional features that largely won't seem helpful until you get to Lab 9. At first glance, the tasks will seem very easy. However, don't let this fool you. You'll actually be expected to follow the instructions very carefully in preparation of the final lab. Specifically, you'll be using more HTML tags than will seem necessary for the level of document that you're creating. In HTML, several tags are largely semantic until you give them a more expressive meaning. For this lab, you'll be marking different types of text appropriately (even when it doesn't appear to have any real use), but in the final lab, you'll be applying styles to all of those elements. For that reason, even if it doesn't look terribly impressive, you're still required to fully complete this lab. It really will save you a great deal of work later on. Tasks: Overall, you'll be writing a series of multiple web pages, all connected to a common theme. Refer to the screenshots to see an example, but feel free to use your own material. The requirements for the labs are: • Pick a topic. Something that you can write about, something you made up, or the example topic • Write three (or more) pages altogether. Each page will cover some aspect related to your main topic • Each page needs a different title • Each page needs to contain your name, username, and student number in commenting at the beginning of the file • Within at least one of the pages, you must use more than one 'heading' level. ◦ I'd suggest actually doing this on all pages ◦ e.g. you can use H2 tags for that page's description, and then H3 tags for articles/subtopics • Each page must have a header tag. You may include additional elements, but a nav tag for navigating between the different pages is suggested ◦ You will probably want to simply copy and paste the same header across all of your pages • At least one page needs a list of some sort ◦ It doesn't matter if it's an unordered list (bulleted list) or ordered (numbered) • Include links somewhere that link to different places within the same page • Use the section tag on at least one page • Use at least one article somewhere • Include a footer on each page. It doesn't need to be fancy • Use at least one image (img) somewhere ◦ It doesn't matter what the image is ◦ Give it some additional attribute (e.g. width, height, or alt/title) • Find somewhere to use strong, em, i, and b tags • It's suggested to use a blockquote, q, or other tag not mentioned above, for experience Ostensibly, anything you create that covers that list will qualify as “sufficient”, so feel free to get creative. However, if you prefer a more guided exercise, then we'll build up an example after this page. Before we begin: As mentioned in class, it's always nice to have a reference. If you're interested in “official” documentation, here's an example: https://www.w3.org/TR/html5/ Ain't that just painful to read? That's why I prefer using this as a reference: https://www.w3schools.com/tags/ However, there are myriad options online, and you can go with whatever you like. Step 1: Before we can view a webpage, we first need to create one. That, of course, means we need to be able to edit it. Assuming you're following on a lab computer, open either notepad or notepad++ (the latter is fancier, but either will work). If you're following along on a mac, you'll probably want to use TextEdit (in plaintext mode). Irrespective of what you're using, type in the following: Test Now, save the file somewhere you can easily find it. Technically, the filename doesn't matter, but it'll be much more intuitive if you use the .html extension. I'll be saving mine as main.html. We already have something we can view. Let's try doing that! 1. Start your browser of choice (I'll be assuming Chrome) 2. Either press control+o to find the file to open, or simply drag the file's icon right onto your browser 3. There is no step three. You should see your minimal page now You should see something like: As a refresher of our lecture, let's go over those HTML tags again: • Our html tag marks the beginning and end of the entire document • The head tag is where we describe attributes about the document • The body tag is where the actual content for the page goes • All of these tags have both an opening and a closing tag, to mark where they begin and end What can we add next? Before we get to the content, let's fix that “main.html” in the tab bar. Test So, what's different? Well, first off, I've indented in a couple of places. That won't affect anything at all, since additional whitespace is just ignored. Besides that, I've added the title tag. To see the change, we could drag the file back onto the browser again, but it's easier to just refresh the page (either via the reload button, or by pressing control+r). We now wee “Bad Ideas” instead of “main.html”, which is nicer. Before we start filling in all of our content, a bit of organization is probably a good idea. What will we want? I like to start files with notes to myself so I don't forget anything. We'll also have a header at the top, some content, and a footer. What will be inside them? We'll figure that out later. Let's just get this much sketched out:
  Maybe we could use this for navigation?
  Try reloading the page, to see the difference between a header and a footer. Huh. Couple things worth noting: • The header and footer look the same ◦ This is because, before you start adding some significance to the tags (next week), these both start out as normal block-level tags; nothing more, nothing less. So they define new blocks of text, but aren't special. We're just setting ourselves up for later when we'll eventually want to define a connected decoration or style to the semantic hint of being whatever “header” or “footer” means • The comments aren't rendered by the browser ◦ e.g. that note about adding a block for content doesn't show up at all • I mentioned a student name/number in the comments at the top. You should do that. But with yours Let's start adding some content. Again, write whatever you like; it doesn't have to be what I wrote. I'm going to start only commenting when there's something useful to point out. You can copy that into your own document, or not; again, it doesn't actually do anything.
  Maybe we could use this for navigation?

  There is no established correlation between good ideas and actually making money. Novelty is a reasonable selling point. So go ahead, and snap up all of those ideas everyone else is too smart to use, and make them your own!

  Wonderful (terrible) ideas include: ejector seats for helicopters, solar powered flashlights, research-paper autogenerators, and monkey chauffeurs!

  Feel free to take a look at how it renders, but it should be pretty predictable by now. Pretty plain, isn't it? For the most part, that won't be changing until next week. However, there are still a few semantic designations (and structural organization) we can apply to improve it. What's missing? Well, any notion of emphasis is the most obvious. Also, the second paragraph includes a list, and we have a way of presenting proper lists. Finally, that bit at the bottom is what we'd normally call “fine print”, and we actually have a tag for that! • We can make text stand out via any of several tags: ◦ i will make text italicized ◦ em will make text emphasized. By default, this will usually be the same thing (until you change it) ◦ b bolds ◦ strong mark text as important (by default, bolded) ◦ u marks text as “stylistically different” (by default, underlined) ◦ small marks text that should be smaller than normal (e.g. for fine print) • An unordered (bulleted) list is achieved with ul; an ordered (numbered) list with ol ◦ Either way, a list item within the list is marked with li • Fine print is easy; just use small ◦ I also felt like adding contact info to the footer, so I simply added a line break (br)
  Maybe we could use this for navigation?

  There is no established correlation between good ideas and actually making money. Novelty is a reasonable selling point. So go ahead, and snap up all of those ideas everyone else is too smart to use, and make them your own!

  Wonderful (terrible) ideas include:

• ejector seats for helicopters
• solar-powered flashlights
• research-paper autogenerators
• monkey chauffeurs

What does this look like? Let's find out! There's something else worth pointing out: while the p, header, and footer tags were all block-level — they actually define their own blocks — that isn't true for the i, em, b, strong, u, and small tags. These tags (and some other similar tags) don't define their own blocks, because they aren't intended to create separations, or designate independent sections of text. Rather, they're meant to identify portions (or selections) of text that should be treated as special. These are what we call inline tags. We're doing far better now. By this point, I think we can start adding a bit more detail. However, as the page gets bigger, our organization should also match. This page is going to have two articles (one to address the premise, and one to explain a rationale). Each article will have a couple of sections. To best identify each section, I'll be putting in headings, very similar to the heading styles we used in Word. Let's put this between the list and the footer:

Premise

Why They're Bad:

Each of these has a major flaw with them. For example, trying to eject through spinning blades would be detrimental to your haircut. Similarly, solar-powered flashlights throw off lighting angles for photography.

Does It Matter?

Identifying the problems with an idea can be very valuable. They don't necessarily have to stop you, but you're better prepared if you can anticipate potential issues. If you don't find them, someone else will.

Rationale

The Value of the Unwanted

Nobody will fight you over a bad patent. Nobody.

So What?

So you can repurpose them, to make good ideas! Maybe you can ditch out the side of the helicopter and deploy gliding wings? Maybe you can add a battery to the flashlight for the solar panel to charge?

What does this look like? We're definitely making good progress here. As the page gets longer, it might be nice to be able to jump between different points in the page. Let's try something a little odd. Below all four of the h2 tags, let's add some empty anchor tags, with the id attribute assigned:

Why They're Bad:

…

Does It Matter?

…

The Value of the Unwanted

…

So What?

Note the quotation marks around each id label. What does this do? It creates a bookmark; a place in the page to which you can jump. In the browser's address bar, try adding #value (in other words, change main.html to main.html#value). The octothorpe is how you identify the separation between filename and bookmark name. Actually, you can assign the id attribute to any HTML tag you like, but this is pretty much the only use for the empty version of the anchor tag. What about the non-empty version? That's the primary use for anchors: linking to documents. In this case, we can link to the same document. We'll get to a more interesting example of anchors in a moment, but first let's just make a simple table of contents. We don't need any special tags for this, but feel free to if you like (e.g. bulleted list). I'll go simple, between the header and the first paragraph: Why not to Is this pointless? Some value Why not? Reload the page, and we now have clickable links! The href attribute is a hypertext reference (i.e. an identifier for the corresponding page's address). Normally, these would include a filename (possibly an entire path to another website/domain), but since we're linking to the same page, we can skip the filename. Although, that brings up the issue of the other two pages we'd planned to create. Also, we haven't really filled in the header yet. Additionally, we don't even have any pictures yet! Let's take care of all of this together, with a navigation bar:

Broccoli University

So many new things! • First, notice that we're using anchor tags to link to other documents now ◦ I didn't bother including a link to the same page, but there wouldn't have been any harm in it • We've used the img tag (another empty element!) to include an image (draw one, or download one) ◦ The src attribute lists the image's source (filename). Unless you specify a path, it assumes the image is in the same folder as the .html file ◦ We could have also included width or height attributes, but they didn't seem necessary here • The nav tag is for a navigational bar Again, we've introduced new tags that are identical in result to what we've already seen (e.g. a navigational bar is apparently identical to a section?). We'll be adding significance next week. Naturally, the geneteclair.html and cyberdyne.html documents don't really exist (yet). Create whatever two pages you like, and link to those. Just make sure that they include links to each other, and back to this document (for easier navigation). There are only three major tags remaining to cover. All of them will be more interesting next week, so let's just briefly discuss them here. You can create a table via the table tag. The table is just the outer box. Within that you'd include several table rows (tr). Inside each row, you'd have one or more table header cells (th) or table data cells (td). There's also a block-level div tag and an inline span tag, which have no innate semantic meaning. They're considered generic tags, that only have unique roles when given them by the developer (as we'll see next week). So, what did we end up with altogether?

Broccoli University

Why not to Is this pointless? Some value Why not?

There is no established correlation between good ideas and actually making money. Novelty is a reasonable selling point. So go ahead, and snap up all of those ideas everyone else is too smart to use, and make them your own!

Wonderful (terrible) ideas include:

• ejector seats for helicopters
• solar-powered flashlights
• research-paper autogenerators
• monkey chauffeurs

Premise

Why They're Bad:

Each of these has a major flaw with them. For example, trying to eject through spinning blades would be detrimental to your haircut. Similarly, solar-powered flashlights throw off lighting angles for photography.

Does It Matter?

Identifying the problems with an idea can be very valuable. They don't necessarily have to stop you, but you're better prepared if you can anticipate potential issues. If you don't find them, someone else will.

Rationale

The Value of the Unwanted

Nobody will fight you over a bad patent. Nobody.

So What?

So you can repurpose them, to make good ideas! Maybe you can ditch out the side of the helicopter and deploy gliding wings? Maybe you can add a battery to the flashlight for the solar panel to charge?