12,99 €
Mehr erfahren.
- Herausgeber: John Wiley & Sons
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
- Veröffentlichungsjahr: 2024
The easy way to brush up on your HTML & CSS programming skills HTML & CSS Essentials For Dummies is your quick and handy reference to all the core concepts of HTML & CSS--the must-know markup and style languages that make the internet go. This no-nonsense book gets right to the point, eliminating review material, wordy explanations, and fluff. Understand all the fundamentals of HTML and CSS, quickly. Perfect for a brush-up on the basics or as an everyday desk reference on the job, this is the reliable little book you can always turn to for answers. * Get simple explanations of the basic concepts of coding with HTML & CSS * Review what you've already learned or pick up essential new skills * Create attractive and functional front ends for websites of all kinds * Keep this concise reference book handy for jogging your memory as you work This book is clear and direct, focusing on the key topics you need to know about defining a website's user interface. Great for supplementing classroom learning, reviewing for a certification, or staying knowledgeable on the job.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 186
Ähnliche
HTML & CSS Essentials For Dummies®
To view this book's Cheat Sheet, simply go to www.dummies.com and search for “HTML & CSS Essentials For Dummies Cheat Sheet” in the Search box.
Table of Contents
Cover
Title Page
Copyright
Introduction
About This Book
Foolish Assumptions
Icons Used in This Book
Where to Go from Here
Chapter 1: Getting to Know HTML and CSS
Getting a Bird’s-Eye View of the Process
Getting to Know HTML
Getting Familiar with CSS
Chapter 2: Constructing Pages with Good Bones
Getting to Know HTML’s Basic Structure Tags
Structuring the Page
Chapter 3: Adding Links, Lists, and Images
Applying the Basic Text Tags
Creating Links
Building Bulleted and Numbered Lists
Inserting Special Characters
Inserting Images
Chapter 4: Building Web Forms
What the Heck Is a Web Form?
Getting Your Form off the Ground
Including a Button
Gathering Text
Including Checkboxes
Setting Up Radio Buttons
Making Selection Lists
Adding a Picker or Two
Chapter 5: Exploring the CSS Box Model
Getting to Know the Box Model
Putting on Some Padding
Building a Border
Messing with Margins
Styling Sizes
Chapter 6: Selecting Stuff with Selectors
Understanding Element Relationships
Getting to Know the Selector
Exploring the Standard Selectors
Selecting Descendants, Children, and Siblings
Working with Pseudo-Classes
Chapter 7: Taking the Measure of CSS
Getting to Know the CSS Measurement Units
Learning the Absolute Measurement Units
Learning the Relative Measurement Units
Chapter 8: Decorating Element Colors and Backgrounds
Picking Out Colors in CSS
Coloring Page Text
Styling Background Colors and Images
Chapter 9: Tweaking Text Typographically
Formatting with Fonts
Tweaking the Type Size
Styling Text with Bold and Italics
Aligning Text Just So
Chapter 10: Ten Must-Memorize CSS Selectors
The Class Selector
The Id Selector
The Type Selector
The Descendant Combinator
The Child Combinator
The Subsequent-Sibling Combinator
The Next-Sibling Combinator
The First-Child Pseudo-Class
The Last-Child Pseudo-Class
The Nth-Child Pseudo-Class
Index
About the Author
Connect with Dummies
End User License Agreement
List of Tables
Chapter 5
TABLE 5-1 The padding Shorthand Property
TABLE 5-2 The Extended border-radius Shorthand Property
TABLE 5-3 The margin Shorthand Property
Chapter 7
TABLE 7-1 CSS Absolute Measurement Units
TABLE 7-2 CSS Relative Measurement Units
List of Illustrations
Chapter 1
FIGURE 1-1: The sentence revised to italicize the word
important.
FIGURE 1-2: The text you insert into the
<title>
tag shows up in the br...
FIGURE 1-3: Text you add to the page body appears in the browser’s content wind...
FIGURE 1-4: An internal style sheet that applies different border styles to the...
Chapter 2
FIGURE 2-1: Bare text has no structure in an HTML document.
FIGURE 2-2: The text from Figure 2-1 separated into paragraphs by adding
<p>
...
FIGURE 2-3: The six HTML heading tags.
FIGURE 2-4: The text from Figure 2-2 with headings added.
FIGURE 2-5: A limerick that has each line as a paragraph.
FIGURE 2-6: The limerick using line breaks instead of paragraphs.
FIGURE 2-7: An abstract view of HTML’s semantic page structure tags.
FIGURE 2-8: A page header with a logo, title, and horizontal rule.
FIGURE 2-9: The
<nav>
section usually appears just after the
<header>
...
FIGURE 2-10: The browser renders each
<div>
section on a new line.
FIGURE 2-11: Using
<span>
makes the container flow with the surrounding...
Chapter 3
FIGURE 3-1: The web browser renders emphasized text using italics.
FIGURE 3-2: The browser renders important text using bold.
FIGURE 3-3: The web browser renders
<blockquote>
text indented slighted...
FIGURE 3-4: The web browser renders
<q>
text surrounded by quotation ma...
FIGURE 3-5: How the link appears in the web browser.
FIGURE 3-6: A typical bulleted list.
FIGURE 3-7: When the web browser renders the ordered list, it’s kind enough to ...
FIGURE 3-8: A web page with an image thrown in.
Chapter 4
FIGURE 4-1: The various text input types you can use in your forms.
FIGURE 4-2: Some checkbox form fields, wrapped in a
fieldset
group with a
legen
...
FIGURE 4-3: Some radio button form fields.
FIGURE 4-4: Some examples of selection lists.
FIGURE 4-5: The color picker that appears in Google Chrome for the Mac.
FIGURE 4-6: The date picker that appears in Microsoft Edge.
FIGURE 4-7: The date picker that appears in Chrome.
FIGURE 4-8: The month picker that appears in Microsoft Edge.
FIGURE 4-9: The week picker that appears in Chrome.
Chapter 5
FIGURE 5-1: The components of the CSS box model.
FIGURE 5-2: The CSS box model applied to an actual page element.
FIGURE 5-3: Some text with a border, but no padding.
FIGURE 5-4: The same text from Figure 5-3, with padding added.
FIGURE 5-5: The border style keywords in action.
FIGURE 5-6: How CSS rounds a border based on the arc of a circle.
FIGURE 5-7: Putting different values of the
width
property to work.
Chapter 6
FIGURE 6-1: The web page code as a set of nested containers.
FIGURE 6-2: Using
nth-child(even)
to style every second row in a table.
Chapter 7
FIGURE 7-1: Users can (and very often do) modify the default font size in the w...
Chapter 8
FIGURE 8-1: Go to my WebDev Workshop to check out a full list of the CSS color ...
FIGURE 8-2: In the HSL color model, hue refers to a color’s position on the col...
FIGURE 8-3: The browser tiles smaller images to fill the element’s background.
FIGURE 8-4: The browser uses only enough of a larger image to fill the element ...
FIGURE 8-5: The various values for
background-repeat
.
Chapter 9
FIGURE 9-1: The letter on the left has serifs; the letter on the right does not...
FIGURE 9-2: Generic fonts are implemented by all web browsers and come in five ...
FIGURE 9-3: Google Fonts is by far the most popular font provider.
FIGURE 9-4: When your selections are complete, click Copy to copy the
<link>
...
FIGURE 9-5: A typographically terrible web page.
FIGURE 9-6: The example page with an upgraded typeface.
FIGURE 9-7: The example page with
font-size
set to
1.25rem
.
FIGURE 9-8: The
font-weight
numeric values as rendered by the browser.
FIGURE 9-9: The
text-align
property doing its thing (left to right): left-align...
FIGURE 9-10: A justified, unhyphenated paragraph (left) and a justified, hyphen...
Guide
Cover
Table of Contents
Title Page
Copyright
Begin Reading
Index
About the Author
Pages
i
ii
1
2
3
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
HTML & CSS Essentials For Dummies®
Published by: John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, www.wiley.com
Copyright © 2024 by John Wiley & Sons, Inc., Hoboken, New Jersey
Published simultaneously in Canada
No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without the prior written permission of the Publisher. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions.
Trademarks: Wiley, For Dummies, the Dummies Man logo, Dummies.com, Making Everything Easier, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book.
LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.
For general information on our other products and services, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002. For technical support, please visit https://hub.wiley.com/community/support/dummies.
Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com. For more information about Wiley products, visit www.wiley.com.
Library of Congress Control Number: 2024934074
ISBN 978-1-394-26290-8 (pbk); ISBN 978-1-394-26292-2 (ebk); ISBN 978-1-394-26291-5 (ebk)
Introduction
Let me start off this book by letting you in on a little secret. If you talk to or read things written by people who make websites for a living, it’s all “HTML this” and “CSS that.” They go on and on about “tags” and “properties” and “collapsing margins” and blah blah blah. It can be more than a little intimidating, so you can easily come away with the idea that crafting a web page is really hard. You may end up believing that creating stuff for the web is a for-geeks-with-CS-graduate-degrees-only business.
Okay, it’s time for that secret I just promised you. Ready? Come closer. Closer. Okay:
*whispers* Learning how to build web pages is not hard.
Sure, it sounds hard; and if you’ve ever taken a peek at some web page code, it certainly looks hard; and, I’ll admit, building a huge and insanely complex site like Amazon or Instagram really is hard. But creating a personal website? Not hard. Fabricating a site to showcase a hobby? Not hard. Crafting some pages for a local charity, team, or small business? You got it: Not hard!
Still don’t believe me? That’s okay, I get it: HTML and CSS — the technologies that enable anyone to assemble web pages — have a reputation problem. After all, so the thinking goes, people have used HTML and CSS to sculpt some truly sensational sites, so of course such sophistication must come with a near-vertical learning curve. Duh.
For years now I’ve talked to many smart people who believed all that and who therefore wouldn’t even dream of building a web page from scratch. How many awesome websites never got built because their would-be builders thought HTML and CSS were well beyond their capabilities? Why is no one talking about how accessible these technologies really are?
After asking myself these questions over and over, I finally decided to do something about it. I decided to write this book, the aim of which is to prove to everyone — yes, even skeptical you — that the technologies behind the web are approachable, straightforward, and readily learnable.
About This Book
Welcome, then, to HTML & CSS Essentials For Dummies. This book gives you a solid education on the technologies that enable anyone to craft professional-looking web pages. You learn how to set up the tools you need and how to use HTML and CSS to design and build your site. My goal is to show you that these technologies aren’t hard to learn, and that even the greenest rookie web designer can learn how to put together pages that will amaze their family and friends (and themselves).
If you’re looking for lots of programming history, computer science theory, and long-winded explanations of concepts, I’m sorry, but you won’t find it here. My philosophy throughout this book comes from Linus Torvalds, the creator of the Linux operating system: “Talk is cheap. Show me the code.” I explain what needs to be explained and then I move on without further ado (or, most of the time, without any ado at all) to examples that do more to illuminate a concept that any verbose explanations I could muster (and believe me, I can muster verbosity with the best of them).
Foolish Assumptions
This book is not a primer on the internet or on using the World Wide Web. This is a book on building web pages, pure and simple. This means I assume the following:
You know how to operate a basic text editor, and how to get around the operating system and file system on your computer.
You have an internet connection.
You know how to use your web browser.
Yep, that’s it.
Icons Used in This Book
This icon points out juicy tidbits that are likely to be repeatedly useful to you — so please don’t forget them.
Think of these icons as the fodder of advice columns. They offer (hopefully) wise advice or a bit more information about a topic under discussion.
Look out! In this book, you see this icon when I’m trying to help you avoid mistakes that can cost you time, money, or embarrassment.
Where to Go from Here
How you approach this book depends on your current level of web coding expertise (or lack thereof):
If you’re just starting out, begin at the beginning with
Chapters 1
and
2
. This will give you all the knowledge you need to pick and choose what you want to learn throughout the rest of the book.
If you know a bit of HTML and CSS, you can probably get away with taking a fast look at the first three chapters and then settle in with
Chapter 4
and beyond.
Chapter 1
Getting to Know HTML and CSS
IN THIS CHAPTER
Finding out a bit about what you’re getting yourself into
Befriending HTML
Introducing yourself to CSS
This book is a sort of manual for using HTML and CSS. However, and this is particularly true if you’re just getting started with coding web pages, if there’s any part of the book that fits the old RTFM (read the freakin’ manual) credo, it’s this chapter. Everything you learn in this chapter acts as a kind of home base for the explorations that come later.
In this chapter, you learn the basic concepts behind HTML and CSS, get a better understanding of how they work, and get started exploring these powerful technologies.
Getting a Bird’s-Eye View of the Process
You can add special codes inside a text file to specify how you want your web page to look. For example, maybe you want a particular collection of words or phrases to appear as a bulleted list. When the web browser comes to that part of the file, it dutifully renders those items as a list, bullets and all. The person browsing your page doesn’t get the “render these items as a bulleted list” code; they just get the bulleted list. The web browser performs these and many other transformations behind the scenes. As long as you have the right HTML and CSS markings in the right places, the browser will render your page the way you want.
Launching a new text file
Your first step whenever you want to create a web page is to start a new text file. To do that, not surprisingly, you need to fire up your favorite text editor:
Notepad (Windows):
In Windows 11, choose Start ⇒ All Apps ⇒ Notepad. Notepad displays a brand-new text file automatically when you start the program. You can also fire up a new document by choosing File ⇒ New.
TextEdit (Mac):
Click Search (the magnifying glass) in the menu bar, start typing
textedit
, and then click TextEdit as soon as it shows up in the search results. In the dialog box that appears, click New Document. You can launch a new text file any time you need one by choosing File ⇒ New.
Something else:
If you have another text editor, launch it the way you normally do and create a new file.
Saving HTML files
When it’s time to save your work, here are a few notes to consider:
Use the right file extension.
For garden-variety web pages, your file names must end with either the
.htm
or the
.html
file extension (for example,
mypage.html
).
Use lowercase filenames without spaces.
For best results, always enter your filenames using only lowercase letters and don’t use spaces in your filenames. If you want to separate words in file and directory names, use an underscore (
_
) or a hyphen (
-
).
Use the right file type.
While in the Save As dialog box, you need to select the correct file type for your HTML file. How you do this depends on what program you’re using. In most programs (including TextEdit), you use the File Format (or Save As Type) list to select Web Page (
.html
) or something similar. If you’re using Notepad, use the Save As Type list to select All Files (*.*). This ensures that Notepad uses your
.htm
or
.html
extension (and not its normal
.txt
extension).
Edit. Save. Reload. Repeat.
Assuming that you’ve previously saved your HTML file as I describe in the previous section, your first task is to open the HTML file in your text editor and in your web browser:
Text editor:
Run the Open command (almost always by choosing File ⇒ Open or by pressing Ctrl+O or ⌘ +O) to open the HTML file you want to work with (if it’s not open already, that is).
Web browser:
Run the Open command to load the same HTML file that you have open in your text editor. Finding the Open command is either trivial or tricky, depending on your operating system:
Windows:
Whether you’re using Edge, Chrome, or Firefox, press Ctrl+O to display the Open dialog box; then select the HTML file and click Open.
macOS:
Whether you’re using Safari, Chrome, or Firefox, choose File ⇒ Open File (or press ⌘ +O) to display the Open dialog; then select the HTML file and click Open.
With your HTML file open in both your text editor and your web browser, here’s the basic cycle you use to build your pages:
Add some text and HTML stuff (I define what this “stuff” is in the rest of this chapter) to your file.
Run the editor’s Save command (almost always by choosing File ⇒ Save or by pressing Ctrl+S or ⌘ +S) to save your work.
Run the web browser’s Reload command. Again, how you invoke Reload depends on the operating system:
Windows:
Whether you’re using Edge, Chrome, or Firefox, press Ctrl+R to reload the page.
macOS:
If you’re using Safari or Chrome, choose View ⇒ Reload Page (or press ⌘ +R) to reload the page. In Firefox, press ⌘ +R.
The web browser reloads the page and displays whatever changes you made to the HTML file in Step 1.
Repeat Steps 1 through 3 as often as you like.
