Lesson 2.
________________
Phase 1.
Getting Started
1. Open thenips1.html in your text editor.
2.Note that some of this page has already been marked up. However there is still some work to be done.
3. There is a new tag here, around the text "From Wikipedia, the free encyclopedia". similar to which is a first level heading, indicates a third level heading.
4. Open thenips1.html in your web browser.
5. Note the size of "The Nipple Erectors" vs. the size of "From Wikipedia, the free encyclopedia". Those are the default styles for those tags. We will change them in lesson 3.
6. Note how the rest of the text has apparently lost the formatting present in the original text version, and all the text now runs together in a single wordwrapped line.
Phase 2.
We will reintroduce the paragraph formatting of the original text using the
tag.
1. insert an opening
tag before just before the text "The Nipple Erectors were a British punk rock band"
2. Insert a closing
tag just after the text "by introducing elements of rackabilly, r&b and pop into their music"
these are the beginning and end of the first paragraph.
3. Save your changes.
4. Refresh your browser and note the result.
5. if this worked correctly you should see that the first paragraph has become a distinct block of text seperated from the rest of the content.
6. wrap the next two paragraphs in p tags, as in steps 1 and 2, starting with "The band renamed themselves The Nips" and the second starting with "The Jam frontman Paul Weller"
7. save your changes, and refresh your browser again, noting the results
Phase 3.
Dealing with numbered lists
After the first three paragraphs, there is a table of contents. which should look like this:
Contents
¥ 1 Discography
¥ 2 Singles
¥ 3 Albums
¥ 4 External links
1. Put the word "contents" in a second level header. that is, make it look like this: Contents
2. delete the extraneous symbols and numbers, leaving only the words "Discography" "Singles" "Albums" and "External links" seperated by carriage returns
3. Place all four items in the list in a single ol element. (ol stands for ordered list).
After step 3, you should see something like this:
Contents
Discography
Singles
Albums
External links
4. Wrap each item in its own li element. (li stands for list item). the result should look like this:
Contents
- Discography
- Singles
- Albums
- External links
5. Save changes, refresh browser, note result. Wee, lookit them numbers!
Phase 4
Unordered lists (Bulleted lists)
the next bit of text looks a bit like this
Discography
Singles
¥ "King of the Bop" (1978)
¥ "All the Time in the World" (1978)
¥ "Gabrielle" (1979)
¥ "Happy Song" (1981)
Albums
¥ "Only the End of the Beginning" (1980) - live in Wolverhampton
¥ "Bops, Babes, Booze and Bovver" (1987) - posthumous singles compilation
External links
¥ The Nips: Licensed to Cool - a fan site.
¥ Nipple Erectors biography at punk77.co.uk.
1. Let's start with the headings. Remember to make your mark up logical to the content
Discography
Singles
¥ "King of the Bop" (1978)
¥ "All the Time in the World" (1978)
¥ "Gabrielle" (1979)
¥ "Happy Song" (1981)
Albums
¥ "Only the End of the Beginning" (1980) - live in Wolverhampton
¥ "Bops, Babes, Booze and Bovver" (1987) - posthumous singles compilation
External links
¥ The Nips: Licensed to Cool - a fan site.
¥ Nipple Erectors biography at punk77.co.uk.
2. Strip away bogus characters
Discography
Singles
"King of the Bop" (1978)
"All the Time in the World" (1978)
"Gabrielle" (1979)
"Happy Song" (1981)
Albums
"Only the End of the Beginning" (1980) - live in Wolverhampton
"Bops, Babes, Booze and Bovver" (1987) - posthumous singles compilation
External links
The Nips: Licensed to Cool - a fan site.
Nipple Erectors biography at punk77.co.uk.
3. put the lists in list elements. This time we'll be using tags instead of tags. ul stands for "unordered list"
Discography
Singles
"King of the Bop" (1978)
"All the Time in the World" (1978)
"Gabrielle" (1979)
"Happy Song" (1981)
Albums
"Only the End of the Beginning" (1980) - live in Wolverhampton
"Bops, Babes, Booze and Bovver" (1987) - posthumous singles compilation
External links
The Nips: Licensed to Cool - a fan site.
Nipple Erectors biography at punk77.co.uk.
4. Put the list items in list item elements using - tags.
Discography
Singles
- "King of the Bop" (1978)
- "All the Time in the World" (1978)
- "Gabrielle" (1979)
- "Happy Song" (1981)
Albums
- "Only the End of the Beginning" (1980) - live in Wolverhampton
- "Bops, Babes, Booze and Bovver" (1987) - posthumous singles compilation
External links
- The Nips: Licensed to Cool - a fan site.
- Nipple Erectors biography at punk77.co.uk.
let me just again point out a couple things about all my tags here.
* Every opening has a corresponding ending
* all tags are in lower case
5. Save, refresh, note. Ooohhh bullets. Headers. STRUCTURE!!
Phase 5.
And now HYPERLINKS.
these are what make the web, the web.
1. Let's go back to the first paragraph and pick out a couple of words that we want to make into a hyperlink.
"The Nipple Erectors were a British punk rock band formed in Soho, London in 1977 and notable as former Pogues frontman Shane MacGowan's first musical group. "
Okay, let's make a hyperlink for "punk rock" and then we'll make a hyperlink for "Soho"
2. wrap our target text in an "a" element. like so:
The Nipple Erectors were a British punk rock band
3. Next we'll add an href attribute, the value of which will be "http://en.wikipedia.org/wiki/Punk_rock", the URL of the page we will link to.
The Nipple Erectors were a British punk rock band
Note:
*attributes should only be placed in the opening tag of an element.
*attribute names such as "href" should be lower case.
*attribute names are followed by an equals = sign
*attribute values are placed inside double quotes " (or if you're a typographic stickler... you can call them inch marks.)
4. save, refresh, note, test!
5. Let's do it again with the word "Soho". We'll link to "http://en.wikipedia.org/wiki/Soho%2C_London"
were a British punk rock band formed in Soho, London in 1977 and notable
6. Wrap the word in an "a" element. (if you must know, it stands for "anchor")
band formed in Soho, London in 1977 and notable
7. Add an href attribute
band formed in Soho, London in 1977 and notable
8. add the attribute value
band formed in Soho, London in 1977 and notable
9. S, R, N, T!!
Don't you feel HAPPY NOW? YOU ARE IN COMMAND OF THIS LANGUAGE. you can make things HAPPEN, and you know why they happen.
FEEL EMPOWERED DAMN YOU
Phase 6.
Anchor links. YEAY
Okay the goal of this excercise is a special kind of link that doesn't take you to another page, but moves the scroll bar to a different part of the page you're already on. We'll be linking the table of contents to the relevant parts of the page.
what did the table of contents look like again?
Contents
- Discography
- Singles
- Albums
- External links
oh yeah.. ookay.. so, anchor links are pretty much the same as the regular links I just showed you. But what is the URL for a specific part of the current page? We have to make one, using something called a fragment identifier. Here's how:
1. let's look at this part of the code:
Discography
Singles
- "King of the Bop" (1978)
- "All the Time in the World" (1978)
- "Gabri...........
2. Add an "id" attribute to the element which contains "discography" since, that's what we want to link TO.
Discography
*disc is just something I made up. It can be anything you want, really, as long as it doesn't have spaces or other funny characters. Helps if it makes sense.
3. let's go back to the table of contents now
Contents
- Discography
- Singles
- Albums
- External links
4. wrap discography in an "a" element.
Contents
- Discography
- Singles
- Albums
- External links
( goes inside - not the other way around!)
5. add the href property
Contents
- Discography
- Singles
- Albums
- External links
6. Link to our fragment identifier... by starting with the character that goes by many names. Octothorpe, Hash, Pound, Number Sign, tic tac toe... etc.. in other words: #
Contents
- Discography
- Singles
- Albums
- External links
you see that? Just like a regular hyperlink, but we're linking to an element with a specific id.
7. Use the previous steps to link the rest of the table of contents.. like so
Contents
- Discography
- Singles
- Albums
- External links
and the corresponding id attributes:
Discography
Singles
- "King of the Bop" (1978)
- "All the Time in the World" (1978)
- "Gabrielle" (1979)
- "Happy Song" (1981)
Albums
- "Only the End of the Beginning" (1980) - live in Wolverhampton
- "Bops, Babes, Booze and Bovver" (1987) - posthumous singles compilation
External links
- The Nips: Licensed to Cool - a fan site.
- Nipple Erectors biography at punk77.co.uk.
8. Save your document, Refresh your browser, and test these anchor links. Note particularly what you see in the address bar when you click the anchor links.
Phase 7.
Holy fuck, images? Okay fine.
Attached to this email is an image named "nipsy2.jpg". If you followed my initial directions, the image SHOULD be saved in the same directory with the file we are currently working on. That is, thenips1.html okay, you with me? let's add an image to this beyotch.
1. Let's put the image at the top just after the heading. The tag for image is ![]()
The Nipple Erectors
From Wikipedia, the free encyclopedia
![]()
2. What the fuck is that? It's a self closing tag. Now shut up and follow along. Add a "src" attribute.
The Nipple Erectors
From Wikipedia, the free encyclopedia
3. The value of this attribute is the URL to the image.
The Nipple Erectors
From Wikipedia, the free encyclopedia
4. Where's all that http stuff? We don't need it since we're linking to a file in the same directory! The technical term is relative path. links with http:// etc.. are absolute paths.
5. Save, refresh, note, test
Phase 8.
We're almost done!
This phase is about ENTITIES. The html way of entering in special characters.
1.find this bit of text:
elements of rockabilly, R&B and pop
2. and use & to change it to this:
elements of rockabilly, R&B and pop
3. find this bit of text:
King of the Bop Ñ as many radio stations
4. El niÑo? I think not. change it to this:
King of the Bop – as many radio stations
5. change this:
departed, replaced by an ever-changing series
to this:
departed, replaced by an ever–changing series
6. change this:
series of musicans Ñ most notably future
to this:
series of musicans – most notably future
7. and change all this:
Singles
- "King of the Bop" (1978)
- "All the Time in the World" (1978)
- "Gabrielle" (1979)
- "Happy Song" (1981)
Albums
- "Only the End of the Beginning" (1980) - live in Wolverhampton
- "Bops, Babes, Booze and Bovver" (1987) - posthumous singles compilation
to this:
Singles
- "King of the Bop" (1978)
- "All the Time in the World" (1978)
- "Gabrielle" (1979)
- "Happy Song" (1981)
Albums
- "Only the End of the Beginning" (1980) - live in Wolverhampton
- "Bops, Babes, Booze and Bovver" (1987) - posthumous singles compilation
8. Why did we just do all that? Save, refresh, note.. .It doesn't look like very much changed.
The point of this is, in html the characters &, <, >, and " have special meaning. If you happen to need those characters in your content, if you don't use the entities & < > and " you run the risk of confusing browsers, search engines, screen readers, and all variety of different user agents and parsers. It may seem pointless, but it is good professional practice to make sure your code is valid, and won't jam the machines later on.
Plus, if you look at that html cheat sheet, you can do just about any character using entities. not just those four. Special.
FINALLY
Phase 9.
1.Bolding and italicizing text. This is easy.
2.You just take take the text you want, and put it in a "strong" element to bold it.
Shane MacGowan's
3. wrap it in an "em" element to italicize. (em for emphasis)
Initially
4. These replace older tags, and (which still work). Why bother? Thanks to CSS, we can style any tag to look like anything we want. If we did this
Shane MacGowan's
and then restyled the tag to be normal weight, but simply be a more vibrant color than normal text, then for bold no longer makes any sense. However, still does, because it refers to a specific sort of emphasis in content, rather than it's physical appearance. Same goes for
5. What about underline? you could use the tag, but the same problem occurs. Normally the reason you underline something is for emphasis (so you could use em instead, and simply style it to be underlined instead of italic), or to cite something or someone, in which case, you can use and restyle.