Teach Yourself VISUALLY HTML and CSS
2nd Edition
Published on 17. July 2023
320 pages
978-1-394-16069-3 (ISBN)
Description
Level-up your HTML and CSS web development skills with this dynamic, visual guide Teach Yourself VISUALLY HTML and CSS is the perfect resource for those of you who prefer to learn visually and would rather be shown how to do something - with crystal-clear screenshots and easy explanations - than suffer through long-winded explanations. You'll find step-by-step walkthroughs showing you how to tackle over 120 individual tasks involving HTML and CSS. Each task-based spread covers a single technique, ensuring you learn first the basics and then more advanced topics one straightforward piece at a time. You'll learn to write HTML code in a text editor or an integrated development environment, add and format text, prepare images for the web, insert links to other pages, control layout with style sheets, add JavaScript to a web page, and more. You'll also discover how to: * Create websites that look great in 2023 and beyond with classic HTML and skills and the most modern tips and tricks for contemporary web coding * Optimize your websites for performance and speed, ensuring every visitor gets the best possible experience * Add modern elements to your code, including
More details
Other editions
Additional editions
Book
06/2023
Wiley
€31.50
Shipment within 15-20 days
Content
- Cover
- Title Page
- Copyright Page
- About the Author
- How to Use This Book
- Table of Contents
- Chapter 1 Getting Ready to Create Websites
- Grasp How the Web Works
- Understanding HTML, CSS, and Responsive Web Design
- Understanding Static and Dynamic Web Pages
- What Is a Responsive Website?
- Understanding Tools for Creating Web Pages
- Prepare to Create Your Website
- Install Visual Studio Code
- Install Visual Studio Code
- Meet and Configure Visual Studio Code
- Meet and Configure Visual Studio Code (continued)
- Install GIMP
- Install the Major Browsers
- Create a Folder Structure for Your Website
- Chapter 2 Creating Your First Web Pages
- Study the Anatomy of a Web Page
- Tell Visual Studio Code Which Folder to Use
- Create a Folder for Your Website
- Create Your First Web Page
- Create Your First Web Page
- Open the Web Page in a Browser
- Open the Web Page in a Browser
- Add Headings and Text
- Add Headings and Text
- Nest One Element Within Another Element
- Add Comments
- Add Comments
- Apply Direct Formatting
- Apply Direct Formatting
- View a Page's Source Code
- Validate a Web Page
- Validate a Web Page
- Create Another Web Page
- Create Another Web Page
- Understanding the Essentials of Hyperlinks
- Create a Hyperlink Between Your Web Pages
- Create a Hyperlink Between Your Web Pages
- Interpret HTTP Status Codes
- Chapter 3 Structuring a Web Page
- Meet the Elements for Structuring Web Pages
- Grasp Semantic and Nonsemantic Elements
- Select Items with span and div Elements
- Select Items with span and div Elements
- Select Text with the span Element
- Select Text with the div Element
- Create header Elements and footer Elements
- Create header Elements and footer Elements
- Add article Elements to a Page
- Add article Elements to a Page
- Create Pull Quotes with the aside Element
- Create Pull Quotes with the aside Element
- Divide a Page Using section Elements
- Divide a Page Using section Elements
- Create Collapsible Sections
- Create Collapsible Sections
- Chapter 4 Including Images
- Grasp the Essentials of Web Image Formats
- Launch GIMP and Perform Essential Moves
- Launch GIMP and Perform Essential Moves
- Launch GIMP and Open an Image File
- Launch GIMP and Perform Essential Moves (continued)
- Launch GIMP and Perform Essential Moves (continued)
- Zoom In or Out on the Image File
- Save Changes to an Image File and Close It
- Rotate or Straighten an Image
- Rotate or Straighten an Image
- Crop an Image
- Crop an Image
- Resize an Image
- Resize an Image
- Reduce the Number of Colors in an Image
- Reduce the Number of Colors in an Image
- Convert an Image to the Format You Need
- Convert an Image to the Format You Need
- Learn the HTML for Images
- Insert an Image
- Insert an Image
- Create a Figure with a Caption
- Create a Figure with a Caption
- Chapter 5 Working with Links
- Grasp the Essentials of Links
- Create a Link to a Web Page
- Create a Link to a Web Page
- Create a Link to Elsewhere on the Same Web Page
- Create a Link to Elsewhere on the Same Web Page
- Specify the ScreenTip for a Link
- Specify the ScreenTip for a Link
- Redirect the Browser to a Different Page
- Redirect the Browser to a Different Page
- Create a Link for Downloading a File
- Create a Link for Downloading a File
- Create a Link That Starts an Email Message
- Create a Link That Starts an Email Message
- Create a Link from an Image
- Create a Link from an Image
- Create Multiple Links from an Image
- Create Multiple Links from an Image
- Create Multiple Links from an Image (continued)
- Create Multiple Links from an Image (continued)
- Include an Audio File in a Web Page
- Link an Audio File
- Include a Video File in a Web Page
- Include a Video File in a Web Page
- Embed a YouTube Video in a Web Page
- Embed a YouTube Video in a Web Page
- Chapter 6 Creating Lists and Tables
- Grasp the Different Types of Lists
- Create a Numbered List
- Create a Numbered List
- Create a Bulleted List
- Create a Bulleted List
- Create a Definition List
- Create a Definition List
- Nest One List Inside Another List
- Nest One List Inside Another List
- Learn the HTML for Tables
- Create a Table
- Create a Table
- Add Rows or Columns to a Table
- Add Rows or Columns to a Table
- Specify Table Width and Column Width
- Specify Table Width and Column Width
- Format Table Borders
- Format Table Borders
- Adjust Table Padding and Spacing
- Adjust Table Padding and Spacing
- Create Groups of Columns
- Create Groups of Columns
- Align Tables, Rows, and Cells
- Align Tables, Rows, and Cells
- Create Cells That Span Rows or Columns
- Set a Background Color or Image for a Table
- Nest One Table Inside Another Table
- Nest One Table Inside Another Table
- Chapter 7 Getting Started with CSS
- Grasp How CSS Works
- Format Elements with Inline CSS
- Format Elements with Inline CSS
- Format a Page Using Internal CSS
- Format a Page Using Internal CSS
- Create an External CSS File
- Create an External CSS File
- Link an External CSS File to a Web Page
- Link an External CSS File to a Web Page
- Distinguish Element, Class, and ID Selectors
- Apply Styles Using Element Selectors
- Apply Styles Using Element Selectors
- Apply Styles Using Class Selectors
- Apply Styles Using Class Selectors
- Create a Class of Items in the HTML File
- Create the Class Selector in the CSS File
- Apply Styles Using ID Selectors
- Apply Styles Using ID Selectors
- Assign an ID to an Element in the HTML File
- Create the ID Selector in the CSS File
- Chapter 8 Formatting Text with CSS
- Understanding Fonts and How to Use Them
- Specify the Font Family
- Specify the Font Family
- Set the Font Size and Font Weight
- Set the Font Size and Font Weight
- Adjust Line Height and Letter Spacing
- Adjust Line Height and Letter Spacing
- Create Superscripts and Subscripts
- Create Superscripts and Subscripts
- Add Superscripts and Subscripts to an HTML File
- Configure the Superscript Style and Subscript Style
- Understanding Ways to Set Color in CSS
- Set Font Color
- Set Font Color
- Apply Text Shadows
- Apply Text Shadows
- Display Monospaced Font
- Display Monospaced Font
- Apply Text Decoration
- Apply Text Decoration
- Understanding HTML Entities
- Insert Special Characters with HTML Entities
- Insert Special Characters with HTML Entities
- Insert Emojis
- Insert Emojis
- Using Custom Fonts on Web Pages
- Chapter 9 Sizing and Positioning with CSS
- Understanding Pseudo-Classes
- Apply Contextual Formatting with Pseudo-Classes
- Apply Contextual Formatting with Pseudo-Classes
- Understanding CSS Combinators
- Target Elements Using CSS Combinators
- Target Elements Using CSS Combinators
- Open the CSS File and HTML File
- Target an Element with a Child Selector
- Target an Element with an Adjacent Sibling Selector
- Target an Element with a General Sibling Selector
- Understanding Pseudo-Elements
- Apply CSS to Pseudo-Elements
- Apply CSS to Pseudo-Elements
- Add the ::first-letter Pseudo-Element
- Add the ::first-line Pseudo-Element
- Override CSS by Using the !important Declaration
- Override CSS by Using the !important Declaration
- Understanding the CSS Box Model
- Understanding Ways of Sizing Elements
- Specify the Size for an Element
- Specify the Size for an Element
- Specify Padding and Borders for an Element
- Specify Padding and Borders for an Element
- Set Margins to Control Element Spacing
- Set Margins to Control Element Spacing
- Understanding CSS Positioning Essentials
- Create Block Quotes
- Create Block Quotes
- Fix an Element in Place in the Viewport
- Fix an Element in Place in the Viewport
- Float an Element Beside Another Element
- Float an Element Beside Another Element
- Understanding the display Property
- Control the Display of an Element
- Control the Display of an Element
- Create a Flexbox Layout
- Chapter 10 Creating Responsive and Appealing Pages
- Understanding the Tools for Creating Responsive Pages
- Apply Relative Sizing
- Add Media Queries to a Page
- Set Tap Targets for Touch Screens
- Set the Viewport Size
- Check Your Pages on Various Devices and Screens
- Understanding How CSS Gradients Work
- Apply a Linear Gradient to an Element
- Apply a Linear Gradient to an Element
- Apply a Radial Gradient to an Element
- Apply a Radial Gradient to an Element
- Using Sprites
- Understanding CSS Animations
- Apply Transitions to HTML Elements
- Create a Keyframe Animation
- Create a Keyframe Animation
- Chapter 11 Creating Forms
- Grasp Web Form Essentials
- Create a Form
- Create a Form
- Add Text Input Controls to a Form
- Add Text Input Controls to the Form
- Add Radio Buttons to a Form
- Add Radio Buttons to a Form
- Add Check Boxes to a Form
- Add Check Boxes to a Form
- Add a Drop-Down List of Options to a Form
- Add a Drop-Down List of Options to a Form
- Add Command Buttons to a Form
- Add Command Buttons to a Form
- Chapter 12 Taking Your Website to the Next Level
- Understanding How Search Engines Work
- Optimize Your Website for Search Engines
- Guide Search Spiders with a robots.txt File
- Understanding Accessibility Issues for Websites
- Meet Chrome's Live Development Tools
- Troubleshoot CSS with Chrome DevTools
- Troubleshoot CSS with Chrome DevTools (continued)
- Troubleshoot CSS with Chrome DevTools (continued)
- Using a Staging Server
- Understanding Front-End Frameworks
- Index
- EULA
