HTML5 in 24 Hours

Hour 1 Code Samples - Sams Teach Yourself Responsive Web Design in 24 Hours

· 3 min read

Listing 1.1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Single Pixel GIF Trick Demonstrated</title>
</head>
<body>
    <h1>Single Pixel GIF Trick Demonstrated </h1>
    <p>Here is a simple page with two paragraphs (besides this one). The first paragraph uses a single-pixel transparent GIF to indent the first line. The second uses a single-pixel GIF that is not transparent to demonstrate the same technique. </p>
    <p><img src="images/single-pixel-transparent.gif" width="50" height="1" alt=""/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    <p><img src="images/single-pixel.gif" width="50" height="1" alt=""/>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</body>
</html>

Comments:

Doug - Mar 5, 2015

Should be able to download all the html and images instead of cutting and pasting considering the cost of the book. Speaking of images in your examples, where are they?

Jennifer Kyrnin - Mar 0, 2015

Most people have told me they prefer to copy and paste the HTML and CSS so they can more easily work with it. I will take your suggestion to make them downloadable under advisement. It’s a good idea, but I want to make sure I can do it effectively without causing other problems on my website. As for the images in the examples, those are copyrighted and not available for use. The idea is for you to use your own images and the images I used in the book are there so you can see how the HTML and CSS will look. Thanks for your feedback.

Liz - Mar 0, 2015

Cutting and pasting images is stealing dude. It is called copyright infringement and is a Federal law.

Jennifer Kyrnin - Mar 4, 2015

I found out from my editor that if you register your copy of the book you can download the code samples from their site. The registration link is http://informit.com/register

Patrice Clarkson - May 5, 2015

I went and registered my book but can’t see where I can download the code samples on their site. Please advise - Thanks!

Jennifer Kyrnin - May 0, 2015

The code samples are available here for reading and review.

Patrice Clarkson - May 1, 2015

YES!!! Thank you :D

Dan O’Shea - Jul 3, 2015

I think the code samples is fine. I just bookmark, go to chapter, copy/paste into Dreamweaver, save the page and practice. Love the book, highlighted throughout and the TRY IT YOURSELF is extremely helpful.

Jennifer Kyrnin - Jul 0, 2015

thanks Dan, I’m glad you find the book useful.