book

HTML, XHTML, and CSS All-In-One Desk Reference For Dummies®

Name: HTML, XHTML, and CSS All-In-One Desk Reference For Dummies®
ISBN: 9780470186275

by Andy Harris, Chris McCulloh

May 2008

Beginner

960 pages

20h 4m

English

For Dummies

Read now

Unlock full access

Copyright
About the Authors
Authors' Acknowledgments
Publisher's Acknowledgments
Introduction
No Experience NecessaryGreat for Advanced Folks, Too!Use Any ComputerDon't Buy Any SoftwareHow This Book Is OrganizedIcons Used in This BookWhat's Next?
I. Creating the XHTML Foundation
1. Sound HTML Foundations
1.1. Creating a Basic Page1.2. Understanding the HTML in the Basic Page1.3. Meeting Your New Friends, the Tags1.4. Setting Up Your System1.4.1. Displaying file extensions1.4.2. Setting up your software
2. It's All about Validation
2.1. Somebody Stop the HTML Madness!2.1.1. XHTML to the rescue2.1.2. There's XHTML, and then there's good XHTML2.2. Building an XHTML Document2.2.1. Don't memorize all this!2.2.2. The DOCTYPE tag2.2.3. The xmlns attribute2.2.4. The meta tag2.2.5. You validate me2.3. Validating Your Page2.3.1. Aesop visits W3C2.3.1.1. Examining the overview2.3.1.2. Validating the page2.3.1.3. Examining the first error2.3.1.4. Fixing the title2.3.1.5. Solving the next error2.3.1.6. Checking the headline repair2.3.2. Showing off your mad skillz2.3.3. Using Tidy to repair pages
3. Choosing Your Tools
3.1. What's Wrong with the Big Boys?3.2. Alternative Web Development Tools3.2.1. The things you need to have on your computer3.2.2. Building a basic toolbox3.3. Picking a Text Editor3.3.1. Some tools to use when you have nothing else3.3.1.1. Windows Notepad3.3.1.2. Mac TextEdit3.3.2. A noteworthy editor: Notepad++3.3.3. The old standards: VI and Emacs3.3.3.1. VI and VIM3.3.3.2. Emacs3.3.4. Other text editors3.4. The Web Developer's Browser3.4.1. A little ancient history3.4.1.1. Mosaic/Netscape — the killer application3.4.1.2. Microsoft enters (and wins) the battle3.4.1.3. Firefox shakes up the world3.4.2. Overview of the prominent browsers3.4.2.1. Microsoft Internet Explorer 73.4.2.2. Older versions of Internet Explorer3.4.2.3. Mozilla Firefox3.4.3. Other notable browsers3.4.3.1. Opera3.4.3.2. Safari3.4.3.3. Mozilla3.4.3.4. Portable browsers3.4.3.5. Text-only browsers3.4.4. The bottom line in browsers3.5. Tricking Out Firefox3.5.1. Validating your pages with HTML Validator3.5.2. Using the Web Developer toolbar3.5.3. Using Firebug3.6. Using a Full-Blown IDE3.6.1. Introducing Nvu3.6.2. Introducing Aptana3.6.3. Customizing Aptana3.6.3.1. Getting to the HTML editor preferences3.6.3.2. Changing the extension3.6.3.3. Changing the initial contents3.6.3.4. Changing the view
4. Managing Information with Lists and Tables
4.1. Making a List and Checking It Twice4.1.1. Creating an unordered list4.1.1.1. Looking at an unordered list4.1.1.2. Building an unordered list4.1.2. Creating ordered lists4.1.2.1. Viewing an ordered list4.1.2.2. Building the ordered list4.1.3. Making nested lists4.1.3.1. Examining the nested list example4.1.3.2. Indenting your code4.1.3.3. Building a nested list4.1.4. Building the definition list4.2. Building Tables4.2.1. Defining the table4.2.1.1. Adding your first row4.2.1.2. Making your data rows4.2.1.3. Building tables in the text editor4.2.2. Spanning rows and columns4.2.2.1. Spanning multiple columns4.2.2.2. Spanning multiple rows4.2.3. Avoiding the table-based layout trap

5. Making Connections with Links
5.1. Making Your Text Hyper5.1.1. Introducing the anchor tag5.1.2. Comparing block-level and inline elements5.1.3. Analyzing an anchor5.1.4. Introducing URLs5.2. Making Lists of Links5.3. Working with Absolute and Relative References5.3.1. Understanding absolute references5.3.2. Introducing relative references
6. Adding Images
6.1. Adding Images to Your Pages6.1.1. Adding links to images6.1.2. Adding inline images using the <img> tag6.1.2.1. src (source)6.1.2.2. height and width6.1.2.3. alt (alternate text)6.2. Choosing an Image Manipulation Tool6.2.1. An image is worth 3.4 million words!6.2.2. Introducing IrfanView6.3. Choosing an Image Format6.3.1. BMP6.3.2. JPG/JPEG6.3.3. GIF6.3.4. PNG6.3.5. Summary of Web image formats6.4. Manipulating Your Images6.4.1. Changing formats in IrfanView6.4.2. Resizing your images6.4.3. Enhancing image colors6.4.4. Using built-in effects6.4.5. Other effects you can use6.4.6. Batch processing6.5. Using Images as Links6.5.1. Creating thumbnail images6.5.2. Creating a thumbnail-based image directory
7. Creating Forms
7.1. You Have Great Form7.1.1. Forms must have some form7.1.2. Organizing a form with fieldsets and labels7.2. Building Text-Style Inputs7.2.1. Making a standard text field7.2.2. Building a password field7.2.3. Making multi-line text input7.3. Creating Multiple Selection Elements7.3.1. Making selections7.3.2. Building check boxes7.3.3. Creating radio buttons7.4. Pressing Your Buttons7.4.1. Making input-style buttons7.4.2. Building a submit button7.4.3. It's a do-over: The reset button7.4.4. Introducing the button tag
II. Styling with CSS
1. Coloring Your World
1.1. Now You Have an Element of Style1.1.1. Setting up a style sheet1.1.2. Changing the colors1.2. Specifying Colors in CSS1.2.1. Using color names1.2.2. Putting a hex on your colors1.2.3. Coloring by number1.2.4. Hex education1.2.5. Using the Web-safe color palette1.3. Choosing Your Colors1.3.1. Starting with Web-safe colors1.3.2. Modifying your colors1.3.3. Doing it on your own pages1.3.4. Changing CSS on the fly1.4. Creating Your Own Color Scheme1.4.1. Understanding hue, saturation, and value1.4.2. Using the Color Scheme Generator1.4.3. Selecting a base hue1.4.4. Picking a color scheme
2. Styling Text
2.1. Setting the Font Family2.1.1. Applying the font-family style attribute2.1.2. Using generic fonts2.1.3. Making a list of fonts2.2. The Curse of Web-Based Fonts2.2.1. Understanding the problem2.2.2. Examining possible solutions2.2.3. Using images for headlines2.3. Specifying the Font Size2.3.1. Size is only a suggestion!2.3.2. Using the font-size style attribute2.3.3. Absolute measurement units2.3.3.1. Points (pt)2.3.3.2. Pixels (px)2.3.3.3. Traditional measurements (in, cm)2.3.4. Relative measurement units2.3.4.1. Named sizes2.3.4.2. Percentage(%)2.3.4.3. Em (em)2.4. Determining Other Font Characteristics2.4.1. Using font-style for italics2.4.2. Using font-weight for bold2.4.3. Using text-decoration2.4.4. Using text-align for basic alignment2.4.5. Other text attributes2.4.6. Using the font shortcut2.4.7. Working with subscripts and superscripts
3. Selectors, Class, and Style
3.1. Selecting Particular Segments3.1.1. Defining more than one kind of paragraph3.1.2. Styling identified paragraphs3.2. Using Emphasis and Strong Emphasis3.2.1. Adding emphasis to the page3.2.2. Modifying the display of em and strong3.3. Defining Classes3.3.1. Adding classes to the page3.3.2. Combining classes3.3.3. Combining classes3.4. Introducing div and span3.4.1. Organizing the page by meaning3.4.2. Why not make a table?3.5. Using Pseudo-Classes to Style Links3.5.1. Styling a standard link3.5.2. Styling the link states3.5.3. Best link practices3.6. Selecting in Context3.7. Defining Multiple Styles at Once
4. Borders and Backgrounds
4.1. Joining the Border Patrol4.1.1. Using the border attributes4.1.2. Defining border styles4.1.3. Using the border shortcut4.1.4. Creating partial borders4.2. Introducing the Box Model4.2.1. Borders, margin, and padding4.2.2. Positioning elements with margins and padding4.3. Changing the Background Image4.3.1. Getting a background check4.3.2. Solutions to the background conundrum4.3.2.1. Using a tiled image4.3.2.2. Getting a tiled image4.3.2.3. Setting background colors4.3.2.4. Reducing the contrast4.4. Manipulating Background Images4.4.1. Turning off the repeat4.4.2. Making effective gradients with repeat-xand repeat-y4.5. Using Images in Lists
5. Levels of CSS
5.1. Managing Levels of Style5.1.1. Using local styles5.1.1.1. When to use local styles5.1.1.2. The drawbacks of local styles5.1.2. Using an external style sheet5.1.2.1. Defining the external style5.1.2.2. Reusing an external CSS style5.1.2.3. Understanding the link tag5.1.2.4. Specifying an external link5.2. Understanding the Cascading Part of Cascading Style Sheets5.2.1. Inheriting styles5.2.2. Hierarchy of styles5.2.3. Overriding styles5.2.4. Precedence of style definitions5.3. Using Conditional Comments5.3.1. Coping with incompatibility5.3.2. Making Internet Explorer–specific code5.3.3. Using a conditional comment with CSS5.3.4. Checking the Internet Explorer version
III. Using Positional CSS for Layout
1. Fun with the Fabulous Float
1.1. Avoiding Old-School Layout Pitfalls1.1.1. Problems with frames1.1.2. Problems with tables1.1.3. Problems with huge images1.1.4. Problems with Flash1.2. Introducing the Floating Layout Mechanism1.2.1. Using float with images1.2.2. Adding the float property1.3. Using Float with Block-Level Elements1.3.1. Floating a paragraph1.3.2. Adjusting the width1.3.3. Setting the next margin1.4. Using Float to Style Forms1.4.1. Using float to beautify the form1.4.2. Adjusting the fieldset width1.4.3. Using the clear attribute to control page layout
2. Building Floating Page Layouts
2.1. Creating a Basic Two-Column Design2.1.1. Designing the page2.1.2. Building the XHTML2.1.3. Adding preliminary CSS2.1.4. Using temporary borders2.1.5. Setting up the floating columns2.1.6. Tuning up the borders2.1.7. Advantages of a fluid layout2.2. Building a Three-Column Design2.2.1. Styling the three-column page2.2.2. Problems with the floating layout2.2.3. Specifying a min-height2.3. Building a Fixed-Width Layout2.3.1. Setting up the XHTML2.3.2. Using an image to simulate true columns2.4. Building a Centered Fixed-Width Layout2.4.1. Making a surrogate body with an all div2.4.2. How the jello layout works2.4.3. Limitations of the jello layout
3. Styling Lists and Menus
3.1. Revisiting List Styles3.1.1. Defining navigation as a list of links3.1.2. Turning links into buttons3.1.3. Building horizontal lists3.2. Creating Dynamic Lists3.2.1. Building a nested list3.2.2. Hiding the inner lists3.2.3. Getting the inner lists to appear on cue3.3. Building a Basic Menu System3.3.1. Building a vertical menu with CSS3.3.2. Building a horizontal menu
4. Using Alternative Positioning
4.1. Working with Absolute Positioning4.1.1. Setting up the HTML4.1.2. Adding position guidelines4.1.3. Making absolute positioning work4.2. Managing z-index4.2.1. Handling depth4.2.2. Working with z-index4.3. Building a Page Layout with Absolute Positioning4.3.1. Overview of absolute layout4.3.2. Writing the XHTML4.3.3. Adding the CSS4.4. Creating a More Flexible Layout4.4.1. Designing with percentages4.4.2. Building the layout4.5. Exploring Other Types of Positioning4.5.1. Creating a fixed menu system4.5.2. Setting up the XHTML4.5.3. Setting the CSS values4.6. Determining Your Layout Scheme
IV. Client-Side Programming with JavaScript
1. Getting Started with JavaScript
1.1. Working in JavaScript1.1.1. Choosing a JavaScript editor1.1.2. Picking your test browser1.2. Writing Your First JavaScript Program1.2.1. Embedding your JavaScript code1.2.2. Creating comments1.2.3. Using the alert() method for output1.2.4. Adding the semicolon1.3. Introducing Variables1.3.1. Creating a variable for data storage1.3.2. Asking the user for information1.3.3. Responding to the user1.4. Using Concatenation to Build Better Greetings1.4.1. Comparing literals and variables1.4.2. Including spaces in your concatenated phrases1.5. Understanding the String Object1.5.1. Introducing object-based programming (and cows)1.5.2. Investigating the length of a string1.5.3. Using string methods to manipulate text1.6. Understanding Variable Types1.6.1. Adding numbers1.6.2. Adding the user's numbers1.6.3. The trouble with dynamic data1.6.4. The pesky plus sign1.7. Changing Variables to the Desired Type1.7.1. Using variable conversion tools1.7.2. Fixing the addInput code
2. Making Decisions with Conditions
2.1. Working with Random Numbers2.1.1. Creating an integer within a range2.1.2. Building a program that rolls dice2.2. Using if to Control Flow2.2.1. The basic if statement2.2.2. All about conditions2.2.3. Comparison operators2.3. Using the else Clause2.3.1. Using else if for more complex interaction2.3.2. Solving the mystery of the unnecessary else2.4. Using switch for More Complex Branches2.4.1. Creating an expression2.4.2. Switching with style2.5. Nesting if Statements2.5.1. Building the nested conditions2.5.2. Making sense of nested ifs
3. Loops and Debugging
3.1. Building Counting Loops with for3.1.1. Building a standard for loop3.1.2. Counting backwards3.1.3. Counting by 53.2. Looping for a While3.2.1. Creating a basic while loop3.2.2. Avoiding loop mistakes3.3. Introducing Bad Loops3.3.1. Managing the reluctant loop3.3.2. Managing the obsessive loop3.4. Debugging Your Code3.4.1. Letting Aptana help3.4.2. Debugging JavaScript on Internet Explorer3.4.3. Finding errors in Firefox3.4.4. Finding Errors with Firebug3.5. Catching Logic Errors3.5.1. Logging to the console with Firebug3.5.2. Looking at console output3.6. Using the Aptana Debug Mode3.6.1. Adding a breakpoint3.6.2. Running the debugger3.6.3. Using the debug perspective3.6.4. Examining the debug mode with a paused program3.6.5. Walking through your program3.6.6. Viewing expression data
4. Functions and Arrays
4.1. Breaking Code into Functions4.1.1. Thinking about structure4.1.2. Building the antsFunction.html program4.2. Passing Data into and out of Functions4.2.1. Examining the main code4.2.2. Looking at the chorus4.2.3. Handling the verses4.2.3.1. Passing data to the verse() function4.2.3.2. Determining the distraction4.2.3.3. Creating the text4.3. Managing Scope4.3.1. Introducing local and global variables4.3.2. Examining variable scope4.4. Building a Basic Array4.4.1. Accessing array data4.4.2. Using arrays with for loops4.4.3. Revisiting the ants song4.5. Working with Two-Dimension Arrays4.5.1. Setting up the arrays4.5.2. Getting a city4.5.3. Creating a main() function
5. Talking to the Page
5.1. Understanding the Document Object Model5.1.1. Navigating the DOM5.1.2. Changing DOM properties with Firebug5.1.3. Examining the document object5.2. Harnessing the DOM through JavaScript5.2.1. Getting the blues, JavaScript-style5.2.2. Writing JavaScript code to change colors5.3. Managing Button Events5.3.1. Embedding quotes within quotes5.3.2. Writing the changeColor function5.4. Managing Text Input and Output5.4.1. Introducing event-driven programming5.4.2. Creating the XHTML form5.4.3. Using GetElementById to get access to the page5.4.4. Manipulating the text fields5.5. Writing to the Document5.5.1. Preparing the HTML framework5.5.2. Writing the JavaScript5.5.3. Finding your innerHTML5.6. Working with Other Text Elements5.6.1. Building the form5.6.2. Writing the function5.6.3. Understanding generated source
6. Getting Valid Input
6.1. Getting Input from a Drop-Down List6.1.1. Building the form6.1.2. Reading the list box6.2. Managing Multiple Selections6.2.1. Coding a multiple selection select object6.2.2. Writing the JavaScript code6.3. Check, Please: Reading Check Boxes6.3.1. Building the check box page6.3.2. Responding to the check boxes6.4. Working with Radio Buttons6.4.1. Interpreting radio buttons6.5. Working with Regular Expressions6.5.1. Introducing regular expressions6.5.2. Using characters in regular expressions6.5.3. Marking the beginning and end of the line6.5.4. Working with special characters6.5.5. Conducting repetition operations6.5.6. Working with pattern memory
7. Animating Your Pages
7.1. Making Things Move7.1.1. Looking over the HTML7.1.2. Getting an overview of the JavaScript7.1.3. Creating global variables7.1.4. Initializing7.1.5. Moving the sprite7.1.6. Checking the boundaries7.2. Reading Input from the Keyboard7.2.1. Building the keyboard page7.2.2. Overwriting the init() function7.2.3. Setting up an event handler7.2.4. Responding to keystrokes7.2.5. Deciphering the mystery of key codes7.3. Following the Mouse7.3.1. Looking over the HTML7.3.2. Initializing the code7.3.3. Building the mouse listener7.4. Creating Automatic Motion7.4.1. Creating a setInterval() call7.5. Building Image-Swapping Animation7.5.1. Preparing the images7.5.2. Building the page7.5.3. Building the global variables7.5.4. Setting up the interval7.5.5. Animating the sprite7.6. Movement and Swapping7.6.1. Building the code7.6.2. Defining global variables7.6.3. Initializing your data7.6.4. Animating and updating the image7.6.5. Moving the sprite
V. Server-Side Programming with PHP
1. Setting Up Your Server
1.1. Introducing Server-Side Programming1.1.1. Programming on the server1.1.2. Serving your programs1.1.3. Picking a language1.1.3.1. ASP.NET1.1.3.2. Java1.1.3.3. PHP1.2. Installing Your Web Server1.2.1. Starting your server1.2.2. Testing the installation1.3. Inspecting phpinfo()
2. Generating HTML with PHP
2.1. Creating Your First PHP Program2.2. Coding with Quotation Marks2.3. Working with Variables PHP Style2.3.1. Concatenation2.3.2. Interpolating variables into text2.4. Building XHTML Output2.4.1. Using double quote interpolation2.4.2. Generating output with heredocs2.4.3. Switching from PHP to XHTML
3. PHP and XHTML Forms
3.1. Exploring the Relationship between PHP and XHTML3.1.1. Embedding PHP inside XHTML3.1.2. Viewing the results3.2. Sending Data to a PHP Program3.2.1. Creating a form for PHP processing3.2.2. Receiving data in PHP3.3. Choosing the Method of Your Madness3.3.1. Using get to send data3.3.2. Using the post method to transmit form data3.3.3. Getting data from the form3.4. Retrieving Data from Other Form Elements3.4.1. Building a form with complex elements3.4.2. Responding to a complex form
4. Control Structures
4.1. Introducing if-else Conditionals4.1.1. if conditionals4.1.2. else conditionals4.1.3. Comparison operators4.1.4. Logical operators4.2. Comparing with switch Structures4.3. Looping It Up with Loops4.3.1. while loops4.3.2. for loops
5. Working with Arrays
5.1. Using One-Dimensional Arrays5.1.1. Creating an array5.1.2. Filling an array after creation5.1.3. Filling an array upon creation5.1.4. Accessing an array index5.1.5. Debugging with print_r5.2. Introducing Associative Arrays5.3. Expanding to Multidimensional Arrays5.3.1. Creating and filling multidimensional arrays5.3.2. Accessing a value in a multidimensional array5.4. Using foreach Loops to Simplify Array Management5.4.1. Using foreach with associative arrays5.5. Breaking a String into an Array5.5.1. Creating arrays with explode5.5.2. Creating arrays with split
6. Using Functions and Session Variables
6.1. Creating Your Own Functions6.1.1. Rolling dice the old-fashioned way6.1.2. Improving code with functions6.1.3. Managing variable scope6.1.4. Returning data from functions6.2. Managing Persistence with Session Variables6.2.1. Understanding session variables6.2.2. Adding session variables to your code
7. Working with Files and Directories
7.1. Text File Manipulation7.1.1. Writing text to files7.1.1.1. fopen()7.1.1.2. fwrite()7.1.1.3. fclose()7.1.2. Creating a CSV file7.1.2.1. str_replace()7.1.2.2. The CSV file creation example7.1.3. Reading from text files7.1.3.1. fgets()7.1.3.2. feof()7.1.3.3. file()7.1.4. Reading from a CSV file7.1.4.1. split()7.1.4.2. list()7.1.4.3. Using split() and list() together7.1.4.4. The CSV file read example7.2. Working with File and Directory Functions7.2.1. opendir()7.2.2. readdir()7.2.3. chdir()7.2.4. Generating the list of file links
8. Connecting to a MySQL Database
8.1. Retrieving Data from a Database8.1.1. Understanding data connections8.1.2. Building a connection8.1.3. Passing a query to the database8.1.4. Processing the results8.1.5. Extracting the rows8.1.6. Extracting fields from a row8.1.7. Printing the data8.2. Improving the Output Format8.2.1. Building definition lists8.2.2. Using XHTML tables for output8.3. Allowing User Interaction8.3.1. Building an XHTML search form8.3.2. Responding to the search request8.3.3. Breaking the code into functions8.3.4. Processing the input8.3.5. Generating the output
VI. Databases with MySQL
1. Getting Started with Data
1.1. Examining the Basic Structure of Data1.1.1. Determining the fields in a record1.1.2. Introducing SQL data types1.1.3. Specifying the length of a record1.1.4. Defining a primary key1.1.5. Defining the table structure1.2. Introducing MySQL1.2.1. Why use MySQL?1.2.2. Understanding the three-tier architecture1.2.3. Practicing with MySQL1.3. Setting Up phpMyAdmin1.3.1. Changing the root password1.3.2. Adding a user1.3.3. Using phpMyAdmin on a remote server1.4. Making a Database with phpMyAdmin
2. Managing Data with SQL
2.1. Writing SQL Code by Hand2.1.1. Understanding SQL syntax rules2.1.2. Examining the buildContact.sql script2.1.3. Dropping a table2.1.4. Creating a table2.1.5. Adding records to the table2.1.6. Viewing the sample data2.2. Running a Script with phpMyAdmin2.3. Using AUTO_INCREMENT for Primary Keys2.4. Selecting Data from Your Tables2.4.1. Selecting only a few fields2.4.2. Selecting a subset of records2.4.3. Searching with partial information2.4.4. Searching for the ending value of a field2.4.5. Searching for any text in a field2.4.6. Searching with regular expressions2.4.7. Sorting your responses2.5. Editing Records2.5.1. Updating a record2.5.2. Deleting a record2.6. Exporting Your Data and Structure2.6.1. Exporting SQL code2.6.2. Creating XML data
3. Normalizing Your Data
3.1. Recognizing Problems with Single-Table Data3.1.1. The identity crisis3.1.2. The listed powers3.1.3. Repetition and reliability3.1.4. Fields that change3.1.5. Deletion problems3.2. Introducing Entity-Relationship Diagrams3.2.1. Using DBDesigner 4 to draw ER diagrams3.2.2. Creating a table definition in DBDesigner3.2.3. Connecting to a database with DBDesigner3.2.4. Manipulating your data from DBDesigner3.3. Introducing Normalization3.3.1. First normal form3.3.2. Second normal form3.3.3. Third normal form3.4. Identifying Relationships in Your Data
4. Putting Data Together with Joins
4.1. Calculating Virtual Fields4.1.1. Introducing SQL Functions4.1.2. Knowing when to calculate virtual fields4.2. Calculating Date Values4.2.1. Using DATEDIFF to determine age4.2.2. Adding a calculation to get years4.2.3. Converting the days integer into a date4.2.4. Using YEAR() and MONTH() to get readable values4.2.5. Concatenating to make one field4.3. Creating a View4.4. Using an Inner Join to Combine Tables4.4.1. Building a Cartesian join and an inner join4.4.2. Enforcing one-to-many relationships4.4.3. Counting the advantages of inner joins4.4.4. Building a view to encapsulate the join4.5. Managing Many-to-Many Joins4.5.1. Understanding link tables4.5.2. Using link tables to make many-to-many joins
VII. Into the Future with AJAX
1. AJAX Essentials
1.1. AJAX Spelled Out1.1.1. A is for asynchronous1.1.2. J is for JavaScript1.1.3. A is for ...and?1.1.4. And X is for ...data1.2. Making a Basic AJAX Connection1.2.1. Building the HTML form1.2.2. Creating an XMLHttpRequest object1.2.3. Opening a connection to the server1.2.4. Sending the request and parameters1.2.5. Checking the status1.3. All Together Now — Making the Connection Asynchronous1.3.1. Setting up the program1.3.2. Building the getAJAX() function1.3.3. Reading the response
2. Improving JavaScript with jQuery
2.1. Introducing jQuery2.1.1. Getting acquainted with jQuery2.1.1.1. Downloading the jQuery library2.1.1.2. Using the documentation2.1.1.2.1. The official documentation2.1.1.2.2. Tutorials2.1.1.2.3. Visual jQuery2.1.2. Getting started with jQuery2.1.2.1. Including the library2.1.2.2. Hello World, jQuery-style2.1.3. Coding with jQuery2.2. Putting jQuery to Work2.2.1. Selecting elements in jQuery2.2.2. Selecting all elements of a specific type2.2.3. Modifying the list items2.2.4. Selecting elements by class name2.3. Managing Events through jQuery2.3.1. Using bind to bind events to elements2.3.2. Unbinding
3. Animating with jQuery
3.1. jQuery's Special Effects3.1.1. Predefined animations3.1.2. Custom animations3.2. Interfacing with the Official UI Plugin3.2.1. Dragging and dropping3.2.1.1. The draggable() function3.2.1.2. Dropping with the droppable() function3.2.1.3. Playing the Catch the Worms game3.2.2. Sorting with the table sorter3.2.2.1. Making a basic table3.2.2.2. Sorting options3.2.2.2.1. sortList3.2.2.2.2. sortForce3.2.3. Creating dialog boxes3.2.3.1. Basic dialog box3.2.3.1.1. dialog()3.2.3.1.2. dialogClose()3.2.3.1.3. dialogOpen()3.2.3.2. Dialog box options3.2.3.2.1. buttons3.2.3.2.2. draggable3.2.3.2.3. position3.2.3.2.4. Other options3.3. Interface Elements for jQuery3.3.1. Getting to know the Interface Elements3.3.1.1. Super dragging and dropping with the sortables interface3.3.1.1.1. Basic sorting3.3.1.1.2. Options3.3.1.1.3. onchange3.3.2. Selectables3.3.2.1. Basic selectables3.3.2.2. Selectables options3.3.3. Making a slider3.3.3.1. Basic slider3.3.3.2. Slider options
4. Sending and Receiving Data
4.1. Working with XML4.1.1. Generating XML with PHP4.1.1.1. Setting the content type4.1.1.2. The XML declaration4.1.1.3. Populating the XML document with data4.1.2. Handling the XML response with jQuery4.1.2.1. Getting the XML from the server4.1.2.1.1. Sending the request with jQuery4.1.2.1.2. Receiving the response with jQuery4.1.2.2. Parsing the XML4.2. Introducing JSON4.2.1. Overview of JSON4.2.2. Using JSON with PHP4.2.2.1. json_encode()4.2.2.2. json_decode()4.2.3. Using JSON with AJAX4.2.3.1. Sending the request4.2.3.2. Receiving the response4.2.4. Generating tables with JSON
VIII. Moving from Web Pages to Web Sites
1. Managing Your Servers
1.1. Understanding Clients and Servers1.1.1. Parts of a client-side development system1.1.2. Parts of a server-side system1.2. Creating Your Own Server with XAMPP1.2.1. Running XAMPP1.2.2. Testing your XAMPP configuration1.2.3. Adding your own files1.2.4. Setting the security level1.2.5. Compromising between functionality and security1.3. Choosing a Web Host1.3.1. Finding a hosting service1.3.2. Connecting to a hosting service1.4. Managing a Remote Site1.4.1. Using Web-based file tools1.4.2. Understanding file permissions1.4.3. Using FTP to manage your site1.5. Naming Your Site1.5.1. Understanding domain names1.5.2. Registering a domain name1.6. Managing Data Remotely1.6.1. Creating your database1.6.2. Finding the MySQL server name
2. Moving from Pages to Sites
2.1. Creating a Multipage Web Site2.2. Planning a Larger Site2.3. Understanding the Client2.3.1. Ensuring that the client's expectations are clear2.3.2. Delineating the tasks2.4. Understanding the Audience2.4.1. Determining whom you want to reach2.4.2. Finding out the user's level of technical expertise2.5. Building a Site Plan2.5.1. Creating a site overview2.5.2. Building the site diagram2.6. Creating Page Templates2.6.1. Sketching the page design2.6.2. Building the XHTML template framework2.6.3. Creating page styles2.6.4. Building a data framework2.7. Fleshing Out the Project2.7.1. Making the site live2.7.2. Contemplating efficiency
3. Introducing Content Management Systems
3.1. Overview of Content Management Systems3.2. Previewing Common CMSs3.2.1. Moodle3.2.2. WordPress3.2.3. Drupal3.3. Installing a Content Management System3.3.1. Adding content3.3.2. Building a menu system3.3.3. Editing your pages3.3.4. Adding a new content block3.3.5. Changing the look
4. Taking Control of Content
4.1. Getting Started with CMSMS4.1.1. Installing CMSMS4.1.2. Playing around with the default package4.1.3. Adding a new page4.2. Customizing CMSMS4.2.1. Adding a theme4.2.2. Working with templates4.2.3. Changing a style4.2.4. Adding a custom tag4.3. Building a "Poor Man's CMS" with Your Own Code4.3.1. Using Server-Side Includes (SSIs)4.3.2. Using AJAX/JQuery for client-side4.3.3. Building a page with PHP includes4.4. Creating Your Own Data-Based CMS4.4.1. Using a database to manage content4.4.2. Writing a PHP page to read from the table4.4.3. Improving the dbCMS design
A. What's on the CD
A.1. System RequirementsA.2. Using the CDA.3. What You'll Find on the CDA.3.1. Author-created materialA.3.2. Aptana Studio 1.1, Community EditionA.3.3. CMS Made Simple 1.2.2A.3.4. DBDesigner 4.0.5.6A.3.5. Dia 0.96.1A.3.6. FireFox 2.0.0.12 and ExtensionsA.3.7. GIMP 2.4.4A.3.8. IrfanView 4.10A.3.9. jQuery 1.2.1A.3.10. Nvu 1.0A.3.11. prototype 1.6A.3.12. SQLite 303.5.6A.3.13. WinSCP 4.0.5A.3.14. Vim 7.1A.3.15. XAMPP 1.6.4A.4. Troubleshooting

Content preview from HTML, XHTML, and CSS All-In-One Desk Reference For Dummies®

Chapter 6. Adding Images

In This Chapter

Understanding the main uses of images
Choosing an image format
Creating inline images
Using IrfanView and other image software
Changing image sizes
Modifying images with filters

You have the basics of text, but pages without images are ... well, a little boring. Pictures do a lot for a Web page, and they're not that hard to work with. Still, you should know some things about using pictures in your pages. In this chapter, you get all the fundamentals of adding images to your pages.

Adding Images to Your Pages

Every time you explore the Web, you're bound to run into tons of pictures on just about every page you visit. Images are typically used in four different ways on Web pages:

External link: The page has text with a link embedded in it. When the user clicks the link, the image replaces the page in the Web browser. To make an externally linked image, just make an ordinary link (as I describe in Chapter 5 of this minibook) but point toward an image file, rather than an HTML (HyperText Markup Language) file.
Embedded images: The image is embedded into the page directly. The text of the page usually flows around the image. This is the most common type of image used on the Web.
Background images: An image can be used as a background for the entire page or for a specific part of the page. Images usually require some special manipulation to make them suitable for background use.
Custom bullets: With CSS, you can assign a small image to be a bullet for an ordered ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

HTML, XHTML, & CSS All-in-One For Dummies®, 2nd Edition

Publisher Resources

ISBN: 9780470186275Purchase book

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

HTML, XHTML, and CSS All-In-One Desk Reference For Dummies®

by Andy Harris, Chris McCulloh

Chapter 6. Adding Images

Adding Images to Your Pages

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.