Head First HTML Bullet Points!

• 0 Bend your brain
• 1 The Language of the Web
• 2 Meeting the 'HT' in HTML
• 3 Web Page Construction
• 4 A Trip to Webville
• 5 Meeting the Media
• 6 Serious HTML
• 7 Putting an 'X' into HTML
• 8 Adding a Little Style
• 9 Expanding your vocabulary
• 10 Getting Intimate with Elements
• 11 Advanced Web Construction
• 12 Arranging Elements
• 13 Getting Tabular
• 14 Getting Interactive

Here's what YOU can do to bend your brain into submission

So, we did our part. The rest is up to you. These tips are a starting point; listen to your brain and figure out what works for you and what doesn't. Try new things.

cut this out and stick it on your refrigerator.

1. Slow down. The more you understand, the less you have to memorize. Don't just read. Stop and think. When the book asks you a question, don't just skip to the answer. Imagine that someone really is asking the question. The more deeply you force your brain to think, the better chance you have of learning and remembering.
2. Do the exercises. Write your own notes. We put them in, but if we did them for you, that would be like having someone else do your workouts for you. And don't just look at the exercises. Use a pencil. There's plenty of evidence that physical activity while learning can increase the learning.
3. Read the "There are No Dumb Questions" That means all of them. They're not optional sidebarsthey're part of the core content! Don't skip them.
4. Make this the last thing you read before bed. Or at least the last challenging thing.Part of the learning (especially the transfer to long-term memory) happens after you put the book down. Your brain needs time on its own, to do more processing. If you put in something new during that processing-time, some of what you just learned will be lost.
5. Drink water. Lots of it. Your brain works best in a nice bath of fluid. Dehydration (which can happen before you ever feel thirsty) decreases cognitive function.
6. Talk about it. Out loud. Speaking activates a different part of the brain. If you're trying to understand something, or increase your chance of remembering it later, say it out loud. Better still, try to explain it out loud to someone else. You'll learn more quickly, and you might uncover ideas you hadn't known were there when you were reading about it.
7. Listen to your brain. Pay attention to whether your brain is getting overloaded. If you find yourself starting to skim the surface or forget what you just read, it's time for a break. Once you go past a certain point, you won't learn faster by trying to shove more in, and you might even hurt the process.
8. Feel something! Your brain needs to know that this matters. Get involved with the stories. Make up your own captions for the photos. Groaning over a bad joke is still better than feeling nothing at all.
9. Create something! Apply this to something new you're designing, or rework an older project. Just do something to get some experience beyond the exercises and activities in this book. All you need is a pencil and a problem to solve... a problem that might benefit from using HTML and CSS.

1 - The Language of the Web

• HTML and CSS are the languages we use to create web pages.
• Web servers store and serve Web pages, which are created from HTML and CSS. Browsers retrieve pages and render their content based on the HTML and CSS.
• HTML is an abbreviation for HyperText Markup Language and is used to structure your web page.
• CSS is an abbreviation for Cascading Style Sheets, and is used to control the presentation of your HTML.
• Using HTML we mark up content with tags to provide structure. We call matching tags, and their enclosed content, elements.
• An element is composed of three parts: an opening tag, content and a closing tag. There are a few elements, like <img>, that are an exception to this rule.
• Opening tags can have attributes. We've seen a couple: type and align.
• Closing tags have a "/" after the left angle bracket, in front of the tag name to distinguish them as closing tags.
• Your pages should always have an <html> element along with a <head> element and a <body> element.
• Information about the Web page goes into the <head> element.
• What you put into the <body> element is what you see in the browser.
• Most whitespace (tabs, returns, spaces) are ignored by the browser, but you can use these to make your HTML more readable (to you).
• CSS can be added to an HTML Web page by putting the CSS rules inside the <style> element. The <style> element should always be inside the <head> element.
• You specify the style characteristics of the elements in your HTML using CSS.

2 - Meeting the 'HT' in HTML

• When you want to link from one page to another, use the <a> element.
• The href attribute of the <a> element specifies the destination of the link.
• The content of the <a> element is the label for the link. The label is what you see on the Web page. By default, it's underlined to indicate you can click on it.
• You can use words or an image as the label for a link.
• When you click on a link, the browser loads the Web page that's specified in the href attribute.
• You can link to files in the same folder, or files in other folders.
• A relative path is a link that points to other files on your Web site relative to the Web page you're linking from. Just like on a map, the destination is relative to the starting point.
• Use ".." to link to a file that's one folder above the file you're linking from.
• ".." means "parent folder."
• Remember to separate the parts of your path with the "/" character.
• When your path to an image is incorrect, you'll see a broken image on your Web page.
• Don't use spaces in names when you're choosing names for files and folders for your Web site.
• It's a good idea to organize your Web site files early on in the process of building your site, so you don't have to change a bunch of paths later when the Web site grows.
• There are many ways to organize a Web site; how you do it is up to you.

3 - Web Page Construction

• Plan the structure of your Web pages before you start typing in the content. Start with a sketch, then create an outline, and finally write the HTML.
• Plan your page starting with the large, block elements, and then refine with inline elements.
• Remember, whenever possible, use elements to tell the browser what your content means.
• Always use the element that most closely matches the meaning of your content. For example, never use a paragraph when you need a list.
• <p>, <blockquote>, <ol>, <ul>, and <li> are all block elements. They stand on their own and are displayed with space above and below the content within them.
• <q>, <em>, and <a> are all inline elements. The content in these elements flows in line with the rest of the content in the containing element.
• Use the <br> element when you need to insert your own linebreaks.
• <br> is an "empty element."
• Empty elements have no content.
• An empty element consists of only one tag.
• A nested element is an element contained completely within another element. If your elements are nested properly, all your tags will match correctly.
• You make an HTML list using two elements in combination: use <ol> with <li> for an ordered list; use <ul> with <li> for an unordered list. When the browser displays an ordered list, it creates the numbers for the list so you don't have to.
• You can specify your own ordering in an ordered list with the start attribute. To change the values of the individual items, use the value attribute.
• You can build nested lists within lists by putting <ol> or <ul> elements inside your <li> elements.
• Use entities for special characters in your HTML content.

4 - A Trip to Webville

• Typically the best way to get on the Web is to find a hosting company to host your Web pages.
• A domain name is a unique name, like amazon.com or starbuzzcoffee.com, that is used to identify a site.
• A hosting company can create one or more Web servers in your domain. Servers are often named "www".
• The File Transfer Protocol (FTP) is a common means of transferring your Web pages and content to a server.
• FTP applications, like Fetch for Mac or WS_FTP for Windows, can make using FTP easier by providing a graphical user interface.
• A URL is a Uniform Resource Locator, or Web address, that can be used to identify any resource on the Web.
• A typical URL consists of a protocol, a Web site name, and an absolute path to the resource.
• HTTP is a request and response protocol used to transfer Web pages between a Web server and your browser.
• The file protocol is used by the browser to read pages from your computer.
• An absolute path is the path from the root folder to a file.
• "index.html" and "default.htm" are examples of default pages. If you specify a directory without a filename, the Web server will look for a default page to return to the browser.
• You can use relative paths or URLs in your <a> element's href attribute to link to other Web pages. For other pages in your site, it's best to use relative paths, and use URLs for external links.
• Use the id attribute to create a destination anchor in a page. Use '#' followed by a destination anchor id to link to that location in a page.
• To help accessibility, use the title attribute to provide a description of the link in <a> elements.
• Use the target attribute to open a link in another browser window. Don't forget that the target attribute can be problematic for users on a variety of devices and alternative browsers.

5 - Meeting the Media

• Use the <img> element to place images in your Web page.
• Browsers treat <img> elements a little differently than other HTML elements; after reading the HTML page, the browser retrieves each image from the Web server and displays it.
• If you have more than a couple of large images on a Web page, you can make your Web page more usable and faster to download by creating thumbnails small images that the user can click on to see the large version of the image.
• The <img> element is an inline element, which means that the browser doesn't put a linebreak before or after an image.
• The src attribute is how you specify the location of the image file. You can include images from your own site using a relative path in the src attribute, or images from other sites using a URL.
• The alt attribute of an <img> element is a meaningful description of the image. It is displayed in some browsers if the image can't be located, and is used by screen readers to describe the image for the visually impaired.
• A width of less than 800 pixels is a good rule of thumb for the size of photo images in a Web page. Most photo images that are created by digital cameras are too large for Web pages, so you'll need to resize them.
• Photoshop Elements is one of many photo editing applications you can use to resize your images.
• Images that are too large for the browser make Web pages difficult to use and slow to download and display.
• A pixel is the smallest dot that can be represented on the screen. Each image is composed of thousands of pixels. Depending on your monitor, there can be anywhere from 72 pixels in an inch to 120 pixels in an inch.
• JPEG and GIF are the two formats for images that are widely supported by Web browsers.
• The JPEG format is best for photographs and other complex images.
• The GIF format is best for logos and other simple graphics with solid colors, lines, or text.
• JPEG images can be compressed at a variety of different qualities, so you can choose the best balance of quality and file size for your needs.
• The GIF image format allows you to make an image with a transparent background. If you put an image with a transparent background in a Web page, what's behind the image, such as the background color of the page, will show through the transparent parts of the image.
• In Photoshop Elements, use the Matte color menu in the "Save for Web" dialog to choose the right color for softening the edges of your transparent GIF image.
• Images can be used as links to other Web pages. To create a link from an image, use the <img> element as the content of an <a> element, and put the link in the href attribute of the <a> element.

6 - Serious HTML

• HTML 4.01 is the HTML standard that is most widely supported by browsers.
• The World Wide Web Consortium (W3C) is the standards organization that defines what "standard HTML" is.
• Many browsers have two modes for displaying HTML: "quirks" mode for old HTML and standards mode for HTML 4.01.
• If you don't tell the browser which version of HTML you are using, many browsers will use quirks mode, which may cause inconsistent page display in various browsers.
• The document type definition (DOCTYPE) is used to tell the browser which version of HTML your Web page is written in.
• The strict DOCTYPE is used if you are writing fully compliant HTML 4.01.
• Use the transitional DOCTYPE if you are transitioning HTML that still includes display-oriented elements and attributes.
• The <meta> tag in the <head> element tells the browser additional information about a Web page, such as the content type and character encoding.
• A character encoding tells the browser the character set that is used in the Web page.
• Most Western-European languages used on computers today can be represented with the ISO-8859-1 character encoding.
• The W3C validator is a free online service that checks pages for compliance with standards.
• Use the validator to ensure that your HTML is well formed and that your elements and attributes meet the standards.
• By adhering to standards, your pages will display more quickly and with fewer display differences between browsers.

Putting an 'X' into HTML

The XHTML 1.0 checklist

Here's the list of things you must doto convert from HTML to XHTML.

1. Change your DOCTYPE toStrict XHTML. Or, you can use Transitional XHTML if you're still usingTransitional HTML.
2. We've checked off the requirements that you're already on top of. So, that doesn't leave you with much to do to move to XHTML 1.0.
3. Add the xmlns, lang, andxml:lang attributes to your <html> opening tag.
4. The <html> tag must be the first tag after the DOCTYPE and the </html> closing tag must be the last tag in the document.
5. All element names must be written with lowercase letters.
6. All opening tags must have closing tags. Or, if an element is empty, the tag must end with a space and then />.
7. All attribute values must be surrounded by double quotes and must have values.
8. We're going to talk about what this means.
9. Don't use & in the content of your HTML. & is for starting entities, so use & instead. Also convert any other special characters to entities.

8 - Adding a Little Style

• CSS contains simple statemlents, called rules.
• Each rule provides the style for a selection of XHTML elements.
• A typical rule consists of a selector along with one or more properties and values.
• The selector specifies which elements the rule applies to.
• Each property declaration ends with a semicolon.
• All properties and values in a rule go between {} braces.
• You can select any element using its name as the selector.
• By separating element names with commas, you can select multiple elements at once.
• One of the easiest ways to include a style in HTML is the <style> tag.
• For XHTML and for sites of any complexity, you should link to an external style sheet.
• The <link> element is used to include an external style sheet.
• Many properties are inherited. For instance, if a property that is inherited is set for the <body> element, all the <body>'s child elements will inherit it.
• You can always override properties that are inherited by creating a more specific rule for the element you'd like to change.
• Use the class attribute to add elements to a class.
• Use a "." between the element name and the class name to select a specific element in that class.
• Use ".classname" to select any elements that belong to the class.
• An element can belong to more than one class by placing multiple class names in the class attribute with spaces between the names.
• You can validate your CSS using the W3C validator, at http://jigsaw.w3.org/css-validator.

9 - Expanding your Vocabulary

• CSS gives you lots of control over the look of your fonts, including properties like font-family, font-weight, font-size, and font-style.
• A font-family is a set of fonts that share common characteristics.
• The font families for the Web are serif, sans-serif, monospace, cursive, and fantasy. Serif and sans-serif fonts are most common.
• The fonts that your visitors will see in your Web page depend on the fonts they have installed on their own computers.
• It's a good idea to specify font alternatives in your font-family CSS property in case your users don't have your preferred font installed.
• Always make the last font a generic font like serif or sans-serif, so that the browser can make an appropriate substitution if no other fonts are found.
• Font-sizes are usually specified using px, em, %, or keywords.
• If you use pixels ("px") to specify your font size, you are telling the browser how many pixels tall to make your letters.
• em and % are relative font sizes, so specifying your font size using em and % means the size of the letters will be relative to the font size of the parent element.
• Using relative sizes for your fonts can make your pages more maintainable.
• Use the font size keywords to set the base font size in your body rule, so that all browsers can scale the font sizes if users want the text to be bigger or smaller.
• You can make your text bold using the font-weight CSS property.
• The font-style property is used to create italic or oblique text. Italic and oblique text is slanted.
• Web colors are created by mixing different amounts of red, green, and blue.
• If you mix 100% red, 100% green, and 100% blue, you will get white.
• If you mix 0% red, 0% green, and 0% blue, you will get black.
• CSS has 17 predefined colors, including black, white, red, blue, and green.
• You can specify which color you want using percentages of red, green, and blue, using numerical values of 0255 for red, green, and blue, or using a color's hex code.
• An easy way to find the hex code of a color you want is to use a photo-editing application's color picker or one of many online Web tools.
• Hex codes have 6 digits, and each digit can be from 0-F. The first two digits represent the amount of red, the second two the amount of green, and the last two the amount of blue.
• You can use the text-underline property to create an underline for text. Underlined text is often confused as linked text by users, so use this property carefully.

10 - Getting Intimate with Elements

• CSS uses a box model to control how elements are displayed.
• Boxes consist of the content area and optional padding, border, and margin.
• The content area contains the content of the element.
• The padding is used to create visual space around the content area.
• The border surrounds the padding and content and provides a way to visually separate the content.
• The margin surrounds the border, padding, and content, and allows space to be added between the element and other elements.
• Padding, border, and margin are all optional.
• An element's background will show under the content and the padding, but not under the margin.
• Padding and margin size can be set in pixels or percentages.
• Border width can be set in pixels or by using the keywords thin, medium, and thick.
• There are eight different styles for borders, including solid, dashed, dotted, and ridge.
• When setting margins, padding, or the border, CSS provides properties for setting all the sides (top, right, bottom, left) at once, or it allows them to be set independently.
• Use the line-height property to add space between lines of text.
• You can place an image in the background of an element with the background-image property.
• Use the background-position and background-repeat properties to set the position and tiling behavior of the background image.
• Use the class attribute for elements that you want to style together, as a group.
• Use the id attribute to give an element a unique name. You can also use the id attribute to provide a unique style for an element.
• There should only be one element in a page with a given id.
• You can select elements by their id using the id # selector; for example #myfavoriteid.
• An element can have only one id, but it can belong to many classes.
• You can use more than one style sheet in your XHTML.
• If two style sheets have conflicting property definitions, the style sheet that is last in the XHTML file will receive preference
• You can target media devices such as "print" or "handheld" by using the media attribute in your <link> element.

11 - Advanced Web Construction

• <div> elements are used to group related elements together into logical sections.
• Creating logical sections can help you identify the main content areas, header, and footer of your page.
• You can use <div> elements to group elements together that need a common style.
• Use nested <div> elements to add further structure to your files for clarity or styling. But don't add structure unless you really need it.
• Once you have grouped together sections of content with <div> elements, you can style the <div>s just like you would any other block element. For example, you can add a border around a group of elements using the border property on the <div> they are nested in.
• The width property sets the width of the content area of an element.
• The total width of an element is the width of the content area, plus the width of any padding, border, and margins you add.
• Once you set the width of an element, it no longer expands to fit the entire width of the browser window.
• Text-align is a property for block elements that centers all inline content in the block element. It is inherited by any nested block elements.
• You can use descendant selectors to select elements nested within other elements. For instance, the descendant selector

      div h2 { ... }    

  
  selects all <h2>s nested in <div> elements (including children, grandchildren, etc.).
• You can use shortcuts for related properties. For instance, padding-top, padding-right, padding-bottom, and padding-left are all related to padding, and can be specified with one shortcut rule, padding.
• Padding, margin, border, background, and font properties can all be specified with shortcuts.
• The <span> inline element is similar to the <div> element: it is used to group together related inline elements and text.
• Just like with <div>, you can add <span> elements to classes (or give <span> elements unique ids) to style them.
• The <a> element is an example of an element with different states. The main <a> element states are unvisited, visited, and hover.
• You can style each of these states separately with pseudo-classes. The pseudo-classes used most often with the <a> element are :link, for unvisited links, :visited, for visited links, and :hover, for the hover state.
• Other elements support the :hover pseudoclass, and some browsers also support the :first-child, :active, and :focus pseudo-classes for other elements.

12 - Arranging Elements

• Browsers place elements in a page using flow.
• Block elements flow from the top down, with a linebreak between elements. By default, each block element takes up the entire width of the browser window.
• Inline elements flow inside a block element from the top left to the bottom right. If more than one line is needed, the browser creates a new line, and expands the containing block element vertically to contain the inline elements.
• The top and bottom adjacent margins of two block elements in the normal page flow collapse to the size of the larger margin, or to the size of one margin if they are the same size.
• Floated elements are taken out of the normal flow and placed to the left or right.
• Floated elements sit on top of block elements and don't affect their flow. However, the inline content respects the boundaries of a floated element and flows around it.
• The clear property is used to specify that no floated elements can be on the left or right (or both) of a block element. A block element with clear set will move down until it is free of the block element on its side.
• A floated element must have a specific width set to a value other than auto.
• A liquid layout is one in which the content of the page expands to fit the page when you expand the browser window.
• A frozen layout is one in which the width of the content is fixed and it doesn't expand or shrink with the browser window. This has the advantage of providing more control over your design, but at the cost of not using the browser width as efficiently.
• A jello layout is one in which the content width is fixed, but the margins expand and shrink with the browser window. A jello layout usually places the content in the center of the page. This has the same advantages as the frozen layout, but is often more attractive.
• There are four values the position property can be set to: static, absolute, fixed, and relative.
• Static positioning is the default, and places an element in the normal flow of the page.
• Absolute positioning lets you place elements anywhere in the page. By default, absolutely positioned elements are placed relative to the sides of the page.
• If an absolutely positioned element is nested within another positioned element, then its position is relative to the containing element that is positioned.
• The properties top, right, bottom, and left are used to position elements for absolute, fixed, and relative positioning.
• Absolutely positioned elements can be layered on top of one another using the z-index property. A larger z-index value indicates it is higher in the stack (closer to you on the screen).
• Fixed position elements are always positioned relative to the browser window and do not move when the page is scrolled. Other content in the page scrolls underneath these elements.
• Relatively positioned elements are first flowed into the page as normal, and then offset by the specified amount, leaving empty the space where they would normally sit.
• When using relative positioning, left, right, top, and bottom refer to the amount of offset from the element's position in the normal flow.
• The same design can often be achieved using floating elements or absolutely positioned elements.
• Float provides a flexible solution for multicolumn layouts and allows elements to clear floated elements from their sides, something that can't be done with absolute positioning.

13 - Getting Tabular

• XHTML tables are used to structure tabular data.
• Use the HTML table elements, <table>, <tr>, <th>, and <td> together to create a table.
• The <table> element defines and surrounds the entire table.
• Tables are defined in rows, using the <tr> element.
• Each row contains one or more data cells, defined with the <td> element.
• Use the <th> element for data cells that are row or column headings.
• Tables are laid out in a grid. Each row corresponds to a <tr>...</tr> row in your HTML, and each column corresponds to the <td>...</td> content within the rows.
• You can provide additional information about your tables with the table summary attribute, and the <caption> element.
• Table data cells can have padding, borders, and border spacing, which is the space between cells.
• Just like you can control the padding, borders, and margins of elements, you can control the padding, borders, and border spacing of table cells with CSS.
• The border-collapse property is a special CSS property for tables that allows you to combine cell borders into one border for a cleaner look.
• You can change the alignment of the data in your table cells with the text-align and vertical-align CSS properties.
• You can add color to your tables with the background-color property. Background color can be added to the entire table, to each row, or to a single data cell.
• If you have no data for a data cell, put no content into the <td> element. You need to use a <td>...</td> element to maintain the alignment of the table, however.
• If your data cell needs to span multiple rows or columns, you can use the rowspan or colspan attributes of the <td> element.
• You can nest tables within tables by placing the <table> element and all its content inside a data cell.
• Tables should be used for tabular data, not for laying out your pages. Use CSS positioning to create multi-column page layouts as we described in Chapter 12.
• Lists can be styled with CSS just like any other element. There are a few CSS properties specific to lists, such as list-style-type and list-style-image.
• list-style-type allows you to change the type of the marker used in your list.
• list-style-image allows you to specify an image for your list marker.

14 - Getting Interactive

• The <form> element defines the form, and all form input elements are nested inside it.
• The action attribute contains the URL of the Web Application.
• The method attribute contains the method of sending the form data: either POST or GET.
• A POST packages form data and sends it as part of the request.
• A GET packages form data and appends it to the URL.
• Use POST when the form data should be private, or when it is large, such as when a <textarea> or file <input> element is used.
• Use GET for requests that might be bookmarked.
• The <input> element can act as many different input controls on the Web page, depending on the value of its "type" attribute.
• A type of "text" creates a single line text input.
• A type of "submit" creates a submit button.
• A type of "radio" creates one radio button. All radio buttons with the same name make up a group of mutually exclusive buttons.
• A type of "checkbox" creates one checkbox control. You can create a set of choices by giving multiple checkboxes the same name.
• A <textarea> element creates a multi-line text input area.
• A <select> element creates a menu, which contains one or more <option> elements.<option> elements define the items in the menu.
• If you put text into the content of a <textarea> element, it will become the default text in a text area control on the Web page.
• The value attribute in the text <input> element can be used to give a single-line text input an initial value.
• Setting the value attribute on a submit button changes the text of the button.
• When a Web form is submitted, the form data values are paired with their corresponding names, and all names and values are sent to the server.
• Tables are often used to layout forms, given that forms have a tabular structure. Once laid out, CSS should be used to style forms to provide the presentation, including color, font styles, etc.
• XHTML allows form elements to be organized with the <fieldset> element.
• The <label> element can be used to attach labels to form elements in a way that aids accessibility.