My Love is an Empire of Learning - weeks 2-5

WEEK 2 - August 29^th

SEMANTICS

There is a very important concept called Semantic Markup. The idea is that one's code should be a written form of the corresponding visual design. For example, the use of the italics tag for the words "Semantic Markup" is just for making the note that this is a technical term. Now, if I wanted to really push a point, I would use the em tag, short for "emphasis." It may look the same, but for someone using a screen reader, the computer would put a verbal emphasis on the word enclosed within the "emphasis" tag. The "italics" would be read as normal since the code is written only for technical purposes.

Another example of Semantic Markup is the difference the bold tag and the strong tag. Again, they look exactly the same on the screen, but they serve different semantic purposes. The "bold" tag can be used for highlighting key words in a textbook, for example. The tag one would use for denoting a word/term/statement that needed strong emphasis, like a BEWARE notice would make use of the "strong" tag.

LINE BREAKS & HORIZONTAL RULES

Every section of code is written on its own line. For example, the space between the two paragraphs in the SEMANTICS section is automatic. However, if I wanted to add a line break in the middle of a paragraph, I would make use of the line break tag. The quickest example for using the line break tag would be for poetry. Let's look at this haiku:

Haikus are easy
But sometimes they don't make sense
Refrigerator

Nice, right?

A horizontal rule is a basically a horizontal line. It can be used for breaking up sections that will reflect on the web browser. I have already used one underneath the "Home" link. I will be using them to separate each week's asignment examples.

LISTS

There are three kinds of lists in HTML:

1. Ordered Lists
2. Unordered Lists
3. Definition Lists

The list above is an example of an Ordered List. It is characterized by the use of numbers for each list item. If you include a type attribute to the ordered list tag, you can define what kind of number (or letter) marker you would like to use.

Here is a list of things I like, in no particular order...

• Good design
• Jesus
• Japanese
• the language
• the geography
• the various and sundry styles of fighting
• Kempo
• Uechi-ryu (techically Okinawan)
• Goju-ryu (technically Okinawan)
• Different words for what happens after your body is done with certain nutrients

What kind of list was that, do you think? I won't tell you; use your context clues! You probably learned about those in primary school. If you can't remember, though, I will define it for you:

Context Clue

Words or phrases that tip one off to figuring what the heck that word one doesn't recognize means

Primary School

A fancy way to say "elementary school." Other lesser than MURICA nations use the term to make themselves feel cool.

(Seriously, if you can't figure out what kind of lists these are now, you need help.)

LINKS

I created a link with a relative URL to this Homeworks n' Explanations page, but I will show you a couple other useful links. A link using relative URL is the address to a page within the same site.

Here is a link that uses an absolute URL that will open in another window (which requires its own coding instruction). An absolute URL must be used in the code to access a completely different website. Our textbook points out that having a website open in a new window is something to avoid in general because, hey, who likes a site that keeps popping up new windows at every click? NO ONE, gosh darnit. An example of when it can be useful is when the website writer includes a link to a completely different site, but wants the user to come back to his site. In that case, it's brilliant.

CSS-Tricks

I'm sure this is going to be an incredible resource once we get to using CSS.

Here is an example of a mailto: link. It will open your configured email program with the specified email address in the "To:" field. Watch the science:

Email Me

Just kidding. That email address isn't real.

---

WEEK 3 - September 5^th

IMAGES

Some of the homework for this week revolves around images. There are several attributes you can add to the "img" tag to outline the specifics of your image. We also learned when to use a jpeg format and when to use a gif or png formatted image. Jpegs are best used with a photograph where there is a lot of pixel color variation. I don't know the technical reasons why, but I assume it may have to do with how much information can be packed into each pixel or something... Only God knows. Here is an example of using a jpeg file format for a photograph (in this case, a scanned image of my art):

Because there is so much color variation in the black circle and the gray pixels on some parts of the paper, it is appropriate to use a jpeg file format.

Gifs and pngs are best used when the image features only a few colors, and expecially when there are large areas of a flat color. Most logos fit that description, so using a gif or png would be better than using a jpeg in such a situation. Here is an example:

As you can see, the only color here is black. There isn't even white here! It's a transparent background! You cannot save any kind of transparency with jpeg formatting.

WEEK 4 - September 12^th

TABLES

Hey, y'all. Here is an example of a table:

Pet Grooming Schedule
	9AM	10AM	11AM	Noon
Monday	dogs		cats	tarantulas
Tuesday	lizards	tarantulas	dogs	cats
Wednesday	cats	dogs	tarantulas
Thursday	dogs	lizards
Friday	tarantulas
	No Weekend Grooming Scheduled

Tables are for laying out information in grid format. It is easy to read because the relationships between each cell item are clearly delineated by their positions on the table.

FORMS

Forms bring us to interactive coding! Yahoo! Creating a form allows the user to put in information that will then be sent to a server; the specific action it will take depends on the controls you use. There are controls for adding text, making selections, submitting information with buttons, and uploading files. Lemme show you...

Please give us your name, please:

Pick your favorite food... OR ELSE:
Vietnamese Ethiopian West African American

What spaketh thou?:

Give us your email:

This little form here allows me to collect your name. The action I chose–TO BE CONTINUED...

WEEK 5 - September 19^th

EXTRA MARKUP

So, we've covered a lot of the foundation of HTML. Goodness! Heavens to Mergatroid! Who would have guessed? What in th world? GASP!

Yes, it's true. Now, even though we've covered so much it's still just a little bittle itsy bitsy piece of the practice of coding. Here is the stuff we are going over this week:

IFRAMES

An iframe on your webpage is like someone took a scalpel and sliced out a chunk of the webpage's body so you can see through to another dimension. This dimension is another webpage. Cool, huh? The exercise in our text calls us to use the iframe element to open a portal-window to Google Maps, which, now that it points it out, must be a pretty common practice. Here we go...

Here is a map to my favorite restaurant. It's got the best seafood in Richmond, I promise you. The spiciest, too! It's basically a crustatean boil joint: crawfish, shrimp, mussels, crabs... Oh my goodness; my mouth is literally watering right now. They are actually moving their location in a few weeks to across the parking lot. They are going with a "beach shore" theme for the decor in the new spot; it's Mardi Gras right now. What's funny about that is the owners are Cambodian! Ha! Not even American, but it doesn't even matter. They know how to throw down; ethnicity doesn't matter if the food is legit.

METADATA

Metadata is information about your page that lives inside the head in the code. Since it lives in the head, it cannot be seen by the web user. It's the same as a person: You cannot see the brains and such of a person because they live inside the head.

FLASH, VIDEO, AUDIO

We looked at how to embed animations, video and audio into your code file. I was a little bit confused as I was reading the code about how to take all the information I have on my computer and write it into the code. I want to practice it, but for the meantime, here is me following instructions:

WAIT. This is a hilarious video, but mute it from 3:27-3:46 if you don't want to be offended by some "off color" humor. I haven't seen this video in a long time, so I forgot about that part. Sorry! Other than that part this is one of the best short-film pieces I've ever seen.

Dinner Party from Andrew DeYoung on Vimeo.

If you check the code, you can see that using the "embed" feature straight from Vimeo (and YouTube, I checked), it uses the iframe element. That makes sense because I'm essentially slicing a chunck out of my webpage to create a window-portal to Vimeo. Makes total sense. It's the same for this audio file from SoundCloud:

This is my favorite Chelsea Wolfe song, btw.