没有合适的资源?快使用搜索试试~ 我知道了~
首页Head First HTML & CSS(2nd版):现代网页标记与设计指南
Head First HTML & CSS(2nd版):现代网页标记与设计指南
需积分: 10 17 下载量 101 浏览量
更新于2024-07-19
收藏 98.3MB PDF 举报
"《Head First HTML and CSS(第二版,2012年)》是由Elisabeth Robson所著的一本深入浅出的计算机编程书籍,专注于网页标记语言HTML和CSS的学习。该书在2012年的出版引起了业界的高度评价,被广泛认为是现代Web开发入门的权威之作。 书中作者以一种图形化且循序渐进的教学方法,帮助读者理解和掌握这两个技术。它预见并解决了初学者可能会遇到的困惑,并及时给出解决方案,这与实际学习过程中的实践性学习方式——每次小步调整并实时观察浏览器反馈相契合。因此,这本书被誉为是学习HTML和CSS的理想教材,强调了随着互联网复杂度的提升,优雅的设计理念和实用主义在构建网页中的关键作用。 多位业内专家对《Head First HTML and CSS》给出了高度评价。Danny Goodman,知名作者在评价中提到,这本书以现代化的方式讲解,使原本困难的学习过程变得简单易懂。Ken Goldstein,迪士尼在线的执行副总裁和管理总监,赞赏了其对网页设计精髓的阐述,认为每一个章节都融合了实用性和智慧。 L.David Baron,Mozilla Corporation的布局和CSS技术负责人,更是指出这本书对于新手HTML作者的重要性,他认为过去费时的学习现在通过这本书得到了简化,使得学习者能够更有效地掌握这两个核心技术。 《Head First HTML and CSS》不仅提供了全面的基础知识,还注重理论与实践相结合,适合那些希望进入Web开发领域或提升现有技能的读者。它的成功在于其易懂的语言、丰富的实例和与时俱进的指导,使之成为IT行业内的经典教程之一。"
资源详情
资源推荐
xiv
5
Meeting the Media
adding images to your pages
Here’s one pixel.
Here’s a lot
of pixels that
together make up
the upper part of
the right wing of
the butterfly.
This image is made up
of thousands of pixels
when it’s displayed on
a computer screen.
Smile and say “cheese.” Actually, smile and say “gif,”
“jpg,” or “png”—
these are going to be your choices when “developing
pictures” for the Web. In this chapter you’re going to learn all about adding your
first media type to your pages: images. Got some digital photos you need to get
online? No problem. Got a logo you need to get on your page? Got it covered.
But before we get into all that, don’t you still need to be formally introduced to
the <img> element? So sorry, we weren’t being rude; we just never saw the “right
opening.” To make up for it, here’s an entire chapter devoted to <img>. By the end
of the chapter you’re going to know all the ins and outs of how to use the <img>
element and its attributes. You’re also going to see exactly how this little element
causes the browser to do extra work to retrieve and display your images.
How the browser works with images 164
How images work 167
<img>: it’s not just relative links anymore 171
Always provide an alternative 173
Sizing up your images 174
Creating the ultimate fan site: myPod 175
Whoa! The image is way too large 178
Open the image 182
Resizing the image 183
Fixing up the myPod HTML 188
More photos for myPod 190
Turning the thumbnails into links 196
Create individual pages for the photos 197
So, how do I make links out of images? 198
What format should we use? 203
To be transparent, or not to be transparent? That is the question… 204
Wait, what
is
the color of the web page background? 206
Check out the logo with a matte 207
Add the logo to the myPod web page 208
Exercise Solutions 213
table of contents
xv
6
Serious HTML
standards and all that jazz
What else is there to know about HTML? You’re well on your way to
mastering HTML. In fact, isn’t it about time we move on to CSS and learn how to make
all this bland markup look fabulous? Before we do, we need to make sure your HTML
is really ready for the big leagues. Don’t get us wrong, you’ve been writing first-class
HTML all along, but there are just a few extra things you need to do to make it “industry
standard” HTML. It’s also time you think about making sure you’re using the latest and
greatest HTML standard, otherwise known as HTML5. By doing so, you’ll ensure that
your pages play well with the latest i-Device, and that they’ll display more uniformly
across all browsers (at least the ones you’d care about). You’ll also have pages that
load faster, pages that are guaranteed to play well with CSS, and pages that are ready
to move into the future as the standards grow. Get ready, this is the chapter where you
move from web tinkerer to web professional.
A Brief History of HTML 222
The new, and improved, HTML5 doctype 227
HTML, the new “living standard” 228
Adding the document type definition 229
The doctype test drive 230
Meet the W3C validator 233
Validating the Head First Lounge 234
Houston, we have a problem… 235
Fixing that error 236
We’re almost there… 237
Adding a <meta> tag to specify the character encoding 239
Making the validator (and more than a few browsers) happy
with a <meta> tag… 240
Third time’s the charm? 241
Calling all HTML professionals, grab the handbook… 244
Exercise Solutions 251
table of contents
xvi
7
Adding a Little Style
getting started with CSS
I was told there’d be CSS in this book. So far you’ve been
concentrating on learning HTML to create the structure of your web pages. But as
you can see, the browser’s idea of style leaves a lot to be desired. Sure, we could
call the fashion police, but we don’t need to. With CSS, you’re going to completely
control the presentation of your pages, often without even changing your HTML.
Could it really be so easy? Well, you are going to have to learn a new language;
after all, Webville is a bilingual town. After reading this chapter’s guide to learning
the language of CSS, you’re going to be able to stand on either side of Main Street
and hold a conversation.
Five-Minute
Mystery
You’re not in Kansas anymore 256
Overheard on Webville’s “Trading Spaces” 258
Using CSS with HTML 259
Getting CSS into your HTML 261
Adding style to the lounge 262
Let’s put a line under the welcome message too 265
So, how do selectors really work? 267
Seeing selectors visually 270
Getting the Lounge style into the elixirs and directions pages 273
It’s time to talk about your inheritance… 281
Overriding inheritance 284
Adding an element to the greentea class 287
Creating a class selector 288
Taking classes further… 290
The world’s smallest and fastest guide to how styles are applied 292
Exercise Solutions 303
table of contents
body
html
title
head
stylemeta
h1 p h2 pp
img a em a
xvii
8
Expanding Your Vocabulary
styling with fonts and colors
Your CSS language lessons are coming along nicely. You
already have the basics of CSS down, and you know how to create CSS rules to
select and specify the style of an element. Now it’s time to build your vocabulary,
and that means picking up some new properties and learning what they can do
for you. In this chapter we’re going to work through some of the most common
properties that affect the display of text. To do that, you’ll need to learn a few
things about fonts and color. You’re going to see you don’t have to be stuck with
the fonts everyone else uses, or the clunky sizes and styles the browser uses as
the defaults for paragraphs and headings. You’re also going to see there is a lot
more to color than meets the eye.
1
2
3
4
5
6
7
8
9
A
B
C
D
E
10
11
F
12
13
14
15
0
Text and fonts from 30,000 feet 312
What is a font family anyway? 314
Specifying font families using CSS 317
Dusting off Tony’s journal 318
How do I deal with everyone having different fonts? 321
How Web Fonts work 323
How to add a Web Font to your page… 325
Adjusting font sizes 328
So, how should I specify my font sizes? 330
Let’s make these changes to the font sizes in Tony’s web page 332
Changing a font’s weight 335
Adding style to your fonts 337
Styling Tony’s quotes with a little italic 338
How do web colors work? 340
How do I specify web colors? Let me count the ways… 343
The two-minute guide to hex codes 346
How to find web colors 348
Back to Tony’s page… 351
Everything you ever wanted to know about text-decorations 353
Removing the underline… 354
Exercise Solutions 357
table of contents
xviii
9
Getting Intimate with Elements
the box model
To do advanced web construction, you really need to know
your building materials.
In this chapter we’re going to take a close look
at our building materials: the HTML elements. We’re going to put block and inline
elements right under the microscope and see what they’re made of. You’ll see how
you can control just about every aspect of how an element is constructed with CSS.
But we don’t stop there—you’ll also see how you can give elements unique identities.
And, if that weren’t enough, you’re going to learn when and why you might want to
use multiple stylesheets. So, turn the page and start getting intimate with elements.
The lounge gets an upgrade 362
Starting with a few simple upgrades 364
Checking out the new line height 366
Getting ready for some major renovations 367
A closer look at the box model 368
What you can do to boxes 370
Creating the guarantee style 375
A test drive of the paragraph border 376
Padding, border, and margins for the guarantee 377
Adding a background image 380
Fixing the background image 383
How do you add padding only on the left? 384
How do you increase the margin just on the right? 385
A two-minute guide to borders 386
Border fit and finish 389
Using an id in the lounge 396
Using multiple stylesheets 399
Stylesheets—they’re not just for desktop browsers
anymore… 400
Add media queries right into your CSS 401
Exercise Solutions 407
table of contents
剩余763页未读,继续阅读
我怀念De
- 粉丝: 660
- 资源: 1006
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 前端面试必问:真实项目经验大揭秘
- 永磁同步电机二阶自抗扰神经网络控制技术与实践
- 基于HAL库的LoRa通讯与SHT30温湿度测量项目
- avaWeb-mast推荐系统开发实战指南
- 慧鱼SolidWorks零件模型库:设计与创新的强大工具
- MATLAB实现稀疏傅里叶变换(SFFT)代码及测试
- ChatGPT联网模式亮相,体验智能压缩技术.zip
- 掌握进程保护的HOOK API技术
- 基于.Net的日用品网站开发:设计、实现与分析
- MyBatis-Spring 1.3.2版本下载指南
- 开源全能媒体播放器:小戴媒体播放器2 5.1-3
- 华为eNSP参考文档:DHCP与VRP操作指南
- SpringMyBatis实现疫苗接种预约系统
- VHDL实现倒车雷达系统源码免费提供
- 掌握软件测评师考试要点:历年真题解析
- 轻松下载微信视频号内容的新工具介绍
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功