HTML and CSS Reference
In-Depth Information
</
style
>
<
meta http
-
equiv
=
”Content-Type”
content
=
”text/html; charset=UTF-8”
>
<
title
>
Using IDs
</
title
>
</
head
>
<
body
>
<
div id
=
”littleHead”
>
Everything you always wanted
<
br
>
to know about variables
:</
div
>
<
p id
=
”javascript”
>
JavaScript variables do not have to be given a data type
.</
p
>
<
p id
=
”php”
>
PHP variables can be nudged toward a data type with type hinting
.</
p
>
<
p id
=
”actionscript”
>
ActionScript variables must be assigned a data type
.</
p
>
</
body
>
</
html
>
In looking at that code, you may have wondered what the slash-asterisk (/* ... */) marks are.
Quite simply, they're comment code for CSS3. Within a
<style>
container and in external
style sheets, they work just like the
<!-- -->
comment marks in HTML5. Figure 3-14
shows what you'll see when you test it.
63
Figure 3-14: IDs in a Web page.
If you have a long Web page with discussions about JavaScript, PHP, and ActionScript, the
user may have to scroll down to i nd the topic he wants. Using IDs, you can write the URL to
include the exact paragraph the user is trying to i nd. For example, the following URL will go
directly to the paragraph covering PHP:
www.smashingHTML5.com/myIDs#php
. h e
added
#php
calls the specii c paragraph with the php ID.
TAKE THE WHEEL
h is chapter has covered a lot of material, and you'll want to see what you can do with it. Here
are two challenges:
You can design better than that!
At er starting a Web page using dif erent h elements,
the page that resulted in what you see in Figure 3-4 still needs help. For a kid's page, it's
not too colorful and the font is boring. Besides, the text is right next to the image. Using
CSS3, see if you can make it better.
