Learn HTML with Song Lyrics

Read Along While You Learn the Song

List Tags-Get It Right

Ben Laatsch

Listen to the song



Chorus 1:

There is an OL tag, a UL tag too, an LI tag for you to choose
What kind of list we need to type let's sort it out let's get it right

Verse 1:

Well I don't know what you've been told, but CSS can make Text bold

But first of all we got to learn
How to make each Item take its turn
For an ordered list insert OL in the brackets and then LI with each item packet

Of things like detections that we can't
Mix up, Then end tag every section.

Chorus 2:

Oh. The OL and UL both of them use items and we can use CSS to hide em'
What kind of list do we need to type

Verse 2:

For Unordered lists type UL to begin and end tag UL when all list items fit in
Before each item an LI we must type
Then end tag LI to make it turn out right
For a UL list, item order can be scattered they'll appear with bullets but the order don't matter

Back to Top

Anchor Tag

Ben Laatsch, with Claude Parnell as backup

Chorus 1:

The anchor tag has all you need
one half opens
the other half closing
the anchor tag contains the hypertext link
the href text directs you where you are going

claude: the href text

links to where you are going
using hypertext links we need to know

claude: we need to know, we need to know

the attributes links to the destination
creating links is a photo or text
where the anchor tag you can't forget

don't forget that anchor tag
don't forget that anchor tag
the href attribute is the path destination
the attribute points to the link destination

claude: break it down

the attribute tells the anchor tag where to link to
anchor tag, can't forget
anchor tag, can't forget
using hypertext links we need to know

claude: we need to know, tell me how to go

the attribute that links to the destination
creating links is a photo or text
the anchor you just can't forget

you can't forget
you can't forget
you can't forget
you can't forget
using hypertext links we need to know

claude: we need to know, tell me how to go

the attributes that link to the destination

claude: ok ok

creating links is a photo or text

claude: for all your links

the anchor tag, you just can't forget
you can't forget
come on
you can't forget
come on
you can't forget

the anchor tag you won't forget
the anchor tag you won't forget
the anchor tag you won't forget
you can't forget

Back to Top

HTML5 Down the Road

Ben Laatsch

Listen to the song

Watch the video



Chorus 1:

Down the road, Down the road

Verse 1:

Here and Now I was at a loss of what and how to Code
When I type I don't want to re-write what the servers won't behold
don't want that old code not to show, all the new things down the road

Verse 2:

Now and then I feel a little lost with different kinds of code
Some insight to reach new heights, is just go with the flow
Don't want to be working harder when I could be working smarter

Working smarter

Chorus 1:

Down the road, Down the road

Back to Top

XHTML Standards

Ben Laatsch

Listen to the song



Verse 1:

Use XHTML and everybody you know can tell
that you've got it together
with a code cooler and way more clever.

One thing you can quote me on is to quote all values short and long.
Close all tags and you won't be sad
Just close all tags and you won't be sad

Pre Chorus:

There's no uppercase, initial case, camel case,
keep it down u gotta stick to the bottom drawer.
There's no uppercase, initial case, camel case,
keep it down u gotta stick to the bottom drawer.

Chorus:

Cus, all tags are lower case, you gotta close all tags,
remember rules for nesting and the quotes that all values have.

Verse 2:

So for proper nesting it's first in last out.
Just get the order correct that's what nesting is really all about.

Finish what you start, or your code will fall apart.
Self close your break tag or your gonna wish you had.
Close all your tags and you won't be sad.
Close all your tags and you won't be sad.

Pre Chorus:

There's no uppercase, initial case, camel case,
keep it down u gotta stick to the bottom drawer.
There's no uppercase, initial case, camel case,
keep it down u gotta stick to the bottom drawer.

Chorus:

Cus, all tags are Lower case, you gotta close all tags,
remember rules for nesting and the quotes that all values have.

Verse 1:

Use XHTML and everybody you know can tell
that you've got it together
with a code cooler and way more clever.

Back to Top

HTML5 Looser Standards

Ben Laatsch

Verse 1:

I found a good new way
to take it way more easy
don't have to take one track
don't have to break from scratch

Verse 2:

don't even need to waste more time
to cross my T's and dot my I's
it's only human to mis-type
but this code still syncs all right
all right

Chorus 1:

H-T-M-L-5 f-i-v-e
aaahhhhhh

Verse 1:

I found a good new way
to take it way more easy
don't have to take one track
don't have to break from scratch

Verse 2:

don't even need to waste more time
to cross my T's and dot my I's
it's only human to mis-type
but this code will sync all right
all right

Chorus 1:

H-T-M-L-5 f-i-v-e
aaahhhhhh

Back to Top

List Tags-O-L-U-L

Claude Parnell

Listen to the song

Watch the video



Hook

O-L, my numbers lists
U-L, for my bullets-bullets
L-I, to list my items
On my bullets or numbers list
On my bullets or numbers list
On my bullets or numbers list
On my bullets or numbers list (List Tags)

Verse

I’m gonna list my favorite sodas
Yea, I use O-L for numerical order
Underneath L-I Cherry
Close L-I
Underneath L-I Berry
Close L-I
Underneath L-I Strawberry
Close L-I
After my list looking well
I close O-L

Bridge

O-L, first in-last out
In-between items between
Open and closed L-I brackets
That’s for numerical order (order)
That’s for numerical order (order)

Repeat Bridge

Repeat Hook

Verse

I use U-L for bullets
If no certain order
No 1-2 step
No numerical order
Underneath
I list some words that rhyme with feet
L-I teeth Close L-I
Underneath L-I me
Close L-I
Underneath L-I see
Close L-I
After my list looking well
I close U-L

Bridge

U-L, first in-last out
In-between items between
Open and closed L-I brackets
That’s for bullet order (order)
That’s for bullet order (order)

Repeat Bridge

Hook

O-L, my numbers lists
U-L, for my bullets-bullets
L-I, to list my items
On my bullets or numbers list
On my bullets or numbers list
On my bullets or numbers list
On my bullets or numbers list (List Tags)

Back to Top

HTML Four Core Tags

Claude Parnell

Listen to the song



Chorus:

HTML, that's my format.
Four core tags found that and form that
(Page code-page code, page code-page code).

Verse:

Four core tags
Don't know what it mean?
Essential tags for your web page properties
Labeled in order, more than sorta, make it a habit
Like keeping each tag between open and closed brackets.
(Page-code)
Yeah, that’s my life.
And I’ma keep spitin till they get it right.
To put your web page on blast on the internet
You need four core tags to start building (building in it).

Chorus:

HTML, that's my format.
Four core tags found that and form that
(Page code-page code, page code-page code).

Verse:

HTML is my first core tag
If you forget that then you starting off bad
It's sorta like the language for your page to get read
And always come first
Family over friends
Up next,
My head tag in open and close brackets
Unseen on your page but still more than active
(Page-code)
Two out of four core tags
Two more left then homie it’s a (w)rap

Chorus:

HTML, that's my format.
Four core tags found that and form that
(Page code-page code, page code-page code).

Verse:

My third core tag is my title
(Yeah my title)
More important than your words at your recital
(Your recital)
Don't have one, that's a big fault
Cause every good title improves your search engine results.
My last core tag is my body
(Yeah my body)
It's what used to show your page to the everybody
(Everybody)
HTML
Head
Title
Body
My four core tags
Search and you’ll find me (now).

Chorus:

HTML, that's my format.
Four core tags found that and form that
(Page code-page code, page code-page code).

Back to Top

Image Tag

Claude Parnell

Listen to the song

Watch the video



Hook:

(I-M-G, I-M-G)
Image tag for my pics, now you can see
(I-M-G, I-M-G)
Jpeg, Gif, or PNG’s

Verse:

Yeah, we rocking H-T-M-L
With an image format for the web
I-M-G, I-M-G
Starts with the source of the picture to be(be)

Starts with the source of the picture to be
Source-attribute, something you have to do
Cuz if you don’t then they won’t see
Dot-JPEG’s or PNG’s
Compress formats make it easy to see (now)

Hook:

(I-M-G, I-M-G)
Image tag for my pics, now you can see
(I-M-G, I-M-G)
Jpeg, Gif, or PNG’s

Verse:

Width and Height next attribute to cite.
An attribute for each enlarge the sight
Help out the browser, load it faster
For everybody to see

Alternative text for the vision impaired
A-L-T that’s the attribute right there
TITLE those the words in the box
When they scroll on your image and the mouse points there

Bridge:

Got my image source, width, and Height
A-L-T text
Yes, I’m doing alright. (Repeat)

Hook:

(I-M-G, I-M-G)
Image tag for my pics, now you can see
(I-M-G, I-M-G)
Jpeg, Gif, or PNG’s

Back to Top

A Love Story Told in HTML Syntax

Claude Parnell

Listen to the song

Watch the video



Intro:

Guy 1:Alright, alright. For example,
If her hair was blonde
The attribute would be hair
Guy 2: Ah-huh
Guy 1: Equals...
Guy 2: equals
Guy 1: ...Value, which is blonde, in quotations
Guy 2: Yea!
Guy 1: Alright man, let’s start up
Guy 2: Yea man, HTML Syntax man
It’s the new thing

Hook:

Her tag Attribute
Done got me loose (done got me loose)
Her tag attributes value (in quotations)

Repeat Hook:

Her tag Attribute
Done got me loose (done got me loose)
Her tag attributes value (in quotations)

Verse:

Her attitude equal cool (cool in quotations)
Her eyes equal blue (blue in quotations)
Her curves equal smooth (smooth in quotations)
Girl looking so new
Told her, her body equal hot (hot) (hot in quotations)
Girl, I’m wishing you would stop
For some convo over dinner (for some convo over dinner)
Cuz my persona equal winner (winner in quotations)
Yeah, girls equal tonnage (tonnage in quotations)
I keep my swag one hundred (swag one hundred)
Girl before you came along (girl before you came along)
My wait equal long (long in quotations)
Didn’t have to chase far (didn’t have to chase far)
Soon as she hopped up in my car
Her mood used to equal crappy
Now both our moods equal happy (happy in quotations)

Hook:

Her tag Attribute
Done got me loose (done got me loose)
Her tag attributes value (in quotations)

Repeat Hook:

Her tag Attribute
Done got me loose (done got me loose)
Her tag attributes value (in quotations)

Back to Top

XHTML Strict Syntax

Claude Parnell

Listen to the song

Watch the video



Intro:

X-HTML, X-HTML
X-HTML, X-HTML

Bridge:

Capitol never the case
All my tags are lower case
All my values in quotes like HTML
But X-H-TML is better more dope
And plus the other codes...
Outdated getting old

Hook:

X-HTML, more cooler more swell
X-HTML, better than the eye can tell
X-HTML, more cooler more swell
X-HTML, better than the eye can tell

Verse:

Its sorta like that new girl, when your old played out
Sorta like a guarantee for your page to show out
Plus it’s clean...
Sexy like that blonde from Walgreens
Consistent in an instant
Like when I talk they listen
Envision my visions all shown with precision
If not, I know XHTML is missing (I said)
Envision my visions all shown with precision
If not, I know XHTML is missing (missing)

Hook:

X-HTML, more cooler more swell
X-HTML, better than the eye can tell
X-HTML, more cooler more swell
X-HTML, better than the eye can tell

Bridge:

Capitol never the case
All my tags are lower case
All my values in quotes like HTML
But X-H-TML is better more dope
And plus the other codes...
Outdated getting old

Verse:

First in
Last out
Self-close your break tag
Get the order cor-rect
You’ll be more than a-threat
Use a slash when you close
You already should know
I’m just tes-ting your pro-per nes-ting (now)

Hook:

X-HTML, more cooler more swell
X-HTML, better than the eye can tell
X-HTML, more cooler more swell
X-HTML, better than the eye can tell

Back to Top

HTML5 Looser Syntax

Claude Parnell

Listen to the song



Verse:

H-T-M-L-5 (page code)
It’s new, cool, laidback on the rules
For my old page code it’s about to raise the roof
No gimmicks, less limits, quicker finish
No press, less stress on your tags when you fill it
No straight up guessing just looser nesting
Sometimes you need quotes, sometimes you really don’t
Combination of the new and old school
H-T-M-L, X-H-T-M-L
How I do it well, that’s for me to tell
Upper or lowercase, tags looking swell
Don’t sweat it run corvette
And say YounGnBrilliant when they ask who told ya
My old format bout to feel cold shoulders

Chorus:

Sometimes in life things change a little
Set us back a little, make it look far
With the old came the new with a common middle
Syntax relax when things get hard
When my H-T-M-L felt old
My X-H-T-M-L felt gold
Now it make the rest seem dead cuz it’s so alive
My H-T-M-L-5

Relax Syntax for your page code
Now your common mistakes won’t be as fatal

It rocks! And that’s what this song on
Cuz all that extra stuff is now long gone (I feel it)

H-T-M-L-5 (I feel it)
H-T-M-L-5 (I feel it)
H-T-M-L-5

Verse:

See sometimes (La La Lala)
Like before (La La Lala)
There’s rules (La La Lala)
To explore (La La Lala)
But sometimes (I probably won’t)
Use quotes (but probably gonna)
Need form, to preform (perform)(La La Lala)

Chorus:

Sometimes in life things change a little
Set us back a little, make it look far
With the old came the new with a common middle
Syntax relax when things get hard
When my H-T-M-L felt old
My X-H-T-M-L felt gold
Now it make the rest seem dead cuz it’s so alive
My H-T-M-L-5

Relax Syntax for your page code
Now your common mistakes won’t be as fatal

It rocks! And that’s what this song on
Cuz all that extra stuff is now long gone (I feel it)

H-T-M-L-5 (I feel it)
H-T-M-L-5 (I feel it)
H-T-M-L-5

Back to Top

HTML Image Tag

LaeCharles Lawerence Jr.

Listen to the song

Watch the video



Verse 1:

So you're working on your website
You want an image this width this height

Cause a picture's worth a thousand words
Let it speak, cause it needs to be heard

We'll use this image tag
From the HTML grab bag
Communicate with browser, right?
Display a picture on your site

i-m-g is how we start the tag
Then a s-r-c, which will define the path
With a equal sign then quotation marks, that surround the link
to the location start (I'm using)

Chorus:

H-T-M-L, hyper-text mark up language
You can do it as well
Take a tag and make a sandwich
Open a tag, Close a Tag
Open a tag, Close a Tag
Open a tag, Close a Tag
Unless the tag is self closing

Verse 2:

Now we'll give the image tag, some attributes next
Like size, title and alternative text
What's the width and height?
Soon you'll be an image tag master
When the browser knows the size
It helps the (web) page load faster
Lets say width equals 350 height equals 125
Place quotations marks around the numbers that dictate the size
Next is a-l-t equals the image description
quotes around the values
Are now proper prescription (using)

Chorus:

H-T-M-L, hyper-text mark up language
You can do it as well
Take a tag and make a sandwich
Open a tag, Close a Tag
Open a tag, Close a Tag
Open a tag, Close a Tag
Unless the tag is self closing

Verse 3:

Last part we'll talk about,
The title attribute, if you
Want a visible label
This is just the one for you

Then comes a slash cause the image
tag is self-closing
Make sure that the path to the
Picture you're proposing

Is of compression format (sing)
Gif , j-peg, ping that is that
(dunt dunt)
Now I think you got it gonna
leave it all to you, Just
remember what we said and you'll al-
ways know what to do

Back to Top

Hexadecimal Color

LaeCharles Lawerence Jr.

Watch the video



Verse 1:

So you need to specify
Colors on the web
It doesn't use a proper name
But a number value instead
Not 10's or 100'
But groups of 16
Listen to this song
And learn exactly
What I mean
RGB red green blue
Are the primary colors of light for you
And the hexadecimal
Shows you how much
Of each of those colors
Should be mixed up and such

Chourus:

Oh Hexadecimal
You're the code for me
You're so colorful
So the browser can see
And we just want to know
What the colors can be
Oh Hexadecimal, co-wo-wo-wode(code)

Verse 2:

Start with a hash tag that's what you must do
Then the rest of the Hexa code, is numbers three sets of two
The first set of two is how much red
00 is the lowest, FF the highest said
The second set of numbers
Is the same just for green
As this song goes along
I think you might know what I mean
The last set of number, specify what? Blue!
Aww look, I think you got it
Now you know just what to do

Back to Top

Super Geek

LaeCharles Lawerence Jr.

Verse 1:

She's a very geeky girl
The kind who'll name your Pantone number
She'll make your menu drop-down
Once you let her at your hyperlink, aww girl
She likes to watch old Star Trek (Star Trek Star Trek)
Says Captain Kirk's her all-time favorite (He's my favorite)
When you let her alphabetize your spice rack
She'll alphabetize your keys (Oh, no)

She'll validate your code, yeah (The girl's a super geek)
The kind of girl you read about (in Smashing Magazine)
That girl is pretty geeky (The girl's a super geek)
Lives in varied color spaces (Hex Pantone RGB!)

Chorus:

She's all right right right right right
She's all right right right right
She's all right with me,
Hey, hey,

She's all right right right right right
She's all right right right right
She's all right with me,
Hey, hey,

Verse 2:

She knows the URL (H T T P semi-colon)
And knows font designers by name (Adrian's her fav, yeah)
And she'll put it in her list tags with a border (Uh huh)
In perfect order (Uh huh, that's how she does it)

Buys each and every toy she wants (That's how I do it)
She contemplates taxonomy (Specialty description)
and the philogenic order, humans and bees (WOOOOO!)
She's a chronic color sorter (Alright! Super Geeky!)

She'll validate your code, yeah (The girl's a super geek)
The kind of girl you read about (in Smashing Magazine)
That girl is pretty geeky (The girl's a super geek)
Lives in varied color spaces (Hex Pantone RGB!)

Chorus:

She's all right right right right right
She's all right right right right
She's all right with me,

Blow, Claude

Back to Top