HTML & CSS by Jon Duckett

¡Supera tus tareas y exámenes ahora con Quizwiz!

@font-face

284

Example of Inline Elements:

<a>, <b>, <em>, and <img>.

Subscript

× (Multiplication sign)

× ×

™ (Trademark)

™ ™

An attribute comprises of a "name" and a "value"; the name should be written in lowercase, and the value should be placed in double quotes

Color example (2-3)

see image

' (Right single quote)

’ ’

From example above 1

From example above 2

HTML5 allows you to use uppercase attribute names and omit the quotemarks, but this is not recommended.

Forms refer to different elements that allow you to collect information from visitors to your site.

There are several types of form controls (see image)

Type scales

see image

text to "adding a Flash mP3 PlaYer"

see image

Comment in a CSS file

/asterisk "This is a comment" asterisk/

"color" property

allows you to specify the color of text inside an element - RGB valuse - Hex codes - Color names - HSLA (new)

Spanning Rows

The "rowspan" attribute can be used on a <th> or <td> element to indicate how many rows a cell should span down the table. -There is some CSS in the example

' (Left singe quote)

‘ ‘

< <

- Create a mutli-line text input. - Unlike other input elements this is not an empty element. It should therefore have an opening and a closing tag. - Any text that appears between the opening <textarea> and closing </textarea> tags will appear in the text box when the page loads. - If the user does not delete any text between these tags, this message will get sent to the server along with whatever the user has typed. (Some sites use JavaScript to clear this information when the user clicks in the text area.) -If you are creating a new form, you should use CSS to control the width and height of a <textarea>. However, if you are looking at older code, you may see the cols and rows attributes used with this element.

Types of links:

- Links from one website to another - Links from one page to another on the same website - Links from one part of a web page to another part of the same page - Links that open in a new browser window - Links that start up your email program and address a new email to someone

Button & Hidden Controls

- The <button> element was introduced to allow users more control over how their buttons appear, and to allow other elements to appear inside the button. This means that you can combine text and images between the opening <button> tag and closing </button> tag. - <input type="hidden">: This example also shows a hidden form control. These form controls are not shown on the page (although you can see them if you use the View Source option in the browser). They allow web page authors to add values to forms that users cannot see. For example, a web page author might use a hidden field to indicate which page the user was on when they submitted a form.

Absolute vs. relative URLS

- URL stands for Uniform Resource Locator. Every web page has its own URL. - An absolute URL starts with the domain name for that site, and can be followed by the path to a specific page. If no page is specified, the site will display the homepage. (https://www.empireonline.com/) - When linking to other pages within the same site, you can use relative URLs. These are like a shorthand version of absolute URLs because you do not need to specify the domain name (Exact form depends on where the files are located, if in the same folder or in another one, etc.). Relative URLs help when building a site on your computer because you can create links between pages without having to set up your domain name or hosting.

Photo editors:

Software: - Adobe Photoshop (cheaper version is "Photoshop Elements") - Adobe Fireworks - Pixelmator - PaintShop Pro - Paint.net Online editors: www.photoshop.com www.pixlr.com www.splashup.com www.ipiccy.com

Techniques that offer a wider choice of typefaces (1-2)

see image

Techniques that offer a wider choice of typefaces (2-2)

see image

£ (Pound Sign)

£ £

" (Quotation mark)

" "

" (Right double quotes)

” ”

® (Registered trademark)

® ®

¥ (Yen sign)

¥ ¥

Difference between <b> and <strong>

Similar differences as in <i> and <em> (bold is a style).

<s>

The <s> element indicates something that is no longer accurate or relevant (but that should not be deleted). Visually the content of an <s> element will usually be displayed with a line through the center.

adding a Flash mP3 PlaYer

text on image of next slide

& (Ampersand)

& &

¢ (Cent Sign)

¢ ¢

÷ (Division sign)

÷ ÷

Euro sign

€ €

> &

" (Left double quotes)

“ “

A definition lists, which are distinct from ordered lists and unordered lists, are made up of a set of terms along with the definitions for each of those terms

- <dl>: The definition list is created with the <dl> element and usually consists of a series of terms and their definitions. Inside the <dl> element you will usually see pairs of <dt> and <dd> elements. - <dt>: This is used to contain the term being defined (the definition term). - <dd>: This is used to contain the definition. Sometimes you might see a list where there are two terms used for the same definition or two different definitions for the same term. -Example: <dl> .....<dt>Sashimi</dt> .....<dd>Sliced raw fish that is served with condiments such as shredded daikon radish or ginger root, wasabi and soy sauce</dd> .....<dt>Scale</dt> .....<dd>A device used to accurately measure the weight of ingredients</dd> .....<dd>A technique by which the scales are removed from the skin of a fish</dd> .....<dt>Scamorze</dt> .....<dt>Scamorzo</dt> .....<dd>An Italian cheese usually made from whole cow's milk (although it was traditionally made from buffalo milk)</dd> .....</dl>

Grouping from elements

- <fieldset>: You can group related form controls together inside the <fieldset> element. This is particularly helpful for longer forms. Most browsers will show the fieldset with a line around the edge to show how they are related. The appearance of these lines can be adjusted using CSS. - <legend>: The <legend> element can come directly after the opening <fieldset> tag and contains a caption which helps identify the purpose of that group of form controls.

<figure> and <figcaption> tags

- <figure> element contains images and their caption so that the two are associated. You can have more than one image inside the <figure> element as long as they all share the same caption. - The <figcaption> element has been added to HTML5 in order to allow web page authors to add a caption to an image. (Before these elements were created there was no way to associate an <img> element with its caption. Older browsers that do not understand HTML5 elements simply ignore the new elements and display the content of them.) <figure> .....<img src="images/otters.jpg" alt="Photograph of two sea otters floating in water"> .....<br /> .....<figcaption>Sea otters hold hands when they sleep so they don't drift away from each other.</figcaption> </figure>

Form structure

- <form>: Form controls live inside a <form> element. This element should always carry the "action" attribute and will usually have a "method" and "id" attribute too. - "action" attribute: Its value is the URL for the page on the server that will receive the information in the form when it is submitted. - "method": Forms can be sent using one of two methods: "get" or "post". With the get method, the values from the form are added to the end of the URL specified in the action attribute. The get method is ideal for short forms (such as search boxes), and when you are just retrieving data from the web server (not sending information that should be added to or deleted from a database) With the post method the values are sent in what are known as HTTP headers. As a rule of thumb you should use the post method if your form allows users to upload a file, it is very long contains sensitive data (e.g. passwords) or adds information to (or deletes information from) a database. If the method attribute is not used, the form data will be sent using the get method. "id" attribute: value is used to identify the form distinctly from other elements on the page (and is often used by scripts — such as those that check you have entered information into fields that require values).

image button

- <input type="image">: If you want to use an image for the submit button, you can give the type attribute a value of image. The "src", "width", "height", and "alt" attributes work just like they do when used with the <img> element.

Password input

- <input type="password">: creates a text box that acts just like a single-line text input, except the characters are blocked out. - "name" attribute: indicates the name of the password input, which is sent to the server with the password the user enters. - "size", and "max length" attributes: see former slide; the former is obsolete. - Although the password is hidden on the screen, this does not mean that the data in a password control is sent securely to the server. You should never use these for sending sensitive data such as credit card numbers. For full security, the server needs to be set up to communicate with users' browsers using Secure Sockets Layer (SSL). The topic of SSL is beyond the scope of this book.

HTML5: Search Input

- <input type="search"> - If you want to create a single line text box for search queries, HTML5 provides a special type of input for that purpose. Older browsers will simply treat it like a single line text box. Recent browsers add some features that improve usability. For example, Safari on a Mac adds a cross to clear the search box when you have started to enter information. Safari also automatically rounds the corners on the search input field. - "placeholder" attribute: On any text input, you can also use an attribute called placeholder whose value is text that will be shown in the text box until the user clicks in that area. Older browsers simply ignore this attribute.

Submit button

- <input type="submit">: creates a submit button is used to send a form to the server. - "name" attribute: It can use a name attribute but it does not need to have one. - "value" attribute: The value attribute is used to control the text that appears on a button. It is a good idea to specify the words you want to appear on a button because the default value of buttons on some browsers is 'Submit query' and this might not be appropriate for all kinds of form. - Different browsers will show submit buttons in different ways and tend to fit the visual presentation of the browser. If you want to control the appearance of a submit button, you can either use CSS (as you will learn on page 343), or you can use an image for the button.

Text input

- <input>: used to create several different form controls. The value of the "type" attribute determines what kind of input they will be creating. -When the "type" attribute has a value of "text", it creates a single-line text input. -"name" attribute: When users enter information into a form, the server needs to know which form control each piece of data was entered into. (For example, in a login form, the server needs to know what has been entered as the username and what has been given as the password.) Therefore, each form control requires a name attribute. The value of this attribute identifies the form control and is sent along with the information they enter to the server. -"maxlength" attribute: You can use the maxlength attribute to limit the number of characters a user may enter into the text field. Its value is the number of characters they may enter. For example, if you were asking for a year, the maxlength attribute could have a value of 4. -"size" attribute: The size attribute should not be used on new forms. It was used in older forms to indicate the width of the text input (measured by the number of characters that would be seen). For example, a value of 3 would create a box wide enough to display three characters (although a user could enter more characters if they desired). In any new forms you write, CSS should be used to control the width of form elements. The size attribute is only mentioned here because you may come across it when looking at older code.

Drop Down list box

- <select name="">: A drop down list box (also known as a select box) allows users to select one option from a drop down list. The <select> element is used to create a drop down list box. It contains two or more <option> elements. The "name" attribute indicates the name of the form control being sent to the server, along with the value the user selected. - <option>: The <option> element is used to specify the options that the user can select from. The words between the opening <option> and closing </option> tags will be shown to the user in the drop down box. The <option> element uses the "value" attribute to indicate the value that is sent to the server along with the name of the control if this option is selected. The "selected" attribute can be used to indicate the option that should be selected when the page loads. The value of this attribute should be selected. If this attribute is not used, the first option will be shown when the page loads. If the user does not select an option, then the first item will be sent to the server as the value for this control. - The function of the drop down list box is similar to that of the radio buttons (in that only one option can be selected). There are two key factors in choosing which to use: 1. If users need to see all options at a glance, radio buttons are better suited. 2. If there is a very long list of options (such as a list of countries), drop down list boxes work better.

Multiple select box

- <select> - "size" attribute: You can turn a drop down select box into a box that shows more than one option by adding the size attribute. Its value should be the number of options you want to show at once. In the example you can see that three of the four options are shown. Unfortunately, the way that browsers have implemented this attribute is not perfect, and it should be tested throroughly if used (in particular in Firefox and Safari on a Mac) - "multiple" attribute: You can allow users to select multiple options from this list by adding the multiple attribute with a value of multiple. - It is a good idea to tell users if they can select more than one option at a time. It is also helpful to indicate that on a PC they should hold down the control key while selecting multiple options and on a Mac they should use the command key while selecting options.

hTml5: mulTiPle Video sources

- <source> tag: To specify the location of the file to be played, you can use the <source> element inside the <video> element. (This should replace the src attribute on the opening <video> tag.) You can also use multiple <source> elements to specify that the video is available in different formats. (Due to a bug on the iPad, you should provide the MP4 video as the first format. Otherwise, it might not play.) - "src" attribute: This attribute specifies the path to the video. - "type" attribute: You should use this attribute to tell the browser what format the video is. Otherwise, it will download some of the video to see if it can play the file (which will take time and bandwidth). - "codecs" attribute: The codec that was used to encode the video is supplied within the type attribute. Note the use of single quotes, as well as double quotes in the type attribute, when it is supplied. -If the browser does not support the <video> element or the format of video used, it will display whatever is between the opening <video> and closing </video> tags.

Tables

- <table> - <tr> (table row) - <td> (table data) - <th> (table heading); used instead of "td" - The <th> element is used just like the <td> element but its purpose is to represent the heading for either a column or a row. - Even if a cell has no content, you should still use a <td> or <th> element to represent the presence of an empty cell otherwise the table will not render correctly. (The first cell in the first row of this example shows an empty cell.) - Using <th> elements for headings helps people who use screen readers, improves the ability for search engines to index your pages, and also enables you to control the appearance of tables better when you start to use CSS. - You can use the "scope" attribute on the <th> element to indicate whether it is a heading for a column or a row. It can take the values: "row" to indicate a heading for a row, or "col" to indicate a heading for a column. - Browsers usually display the content of a <th> element in bold and in the middle of the cell. - Some browsers automatically draw lines around the table and/or the individual cells

- Allow users to select (and unselect) one or more options in answer to a question. -"name" attribute: the name attribute is sent to the server with the value of the option(s) the user selects. When a question provides users with options for answers in the form of checkboxes, the value of the name attribute should be the same for all of the buttons that answer that question. - "value" attribute: indicates the value sent to the server if this checkbox is checked. - "checked" attribute: indicates that this box should be checked when the page loads. If used, its value should be checked.

File input box

- Allows users to upload a file (for example an image, video, mp3, or a PDF) - <input type="file">: This type of input creates a box that looks like a text input followed by a browse button. When the user clicks on the browse button, a window opens up that allows them to select a file from their computer to be uploaded to the website. - When you are allowing users to upload files, the "method" attribute on the <form> element must have a value of post. (You cannot send files using the HTTP get method.) - When a user clicks on the browse button, the presentation of the window that allows them to browse for the file they want to upload will match the windows of the user's operating system. You cannot control the appearance of these windows.

- Creates the radio button that allows users to pick just one of a number of options. - "name" attribute: The name attribute is sent to the server with the value of the option the user selects. When a question provides users with options for answers in the form of radio buttons, the value of the name attribute should be the same for all of the radio buttons used to answer that question. - "value" attribute: indicates the value that is sent to the server for the selected option. The value of each of the buttons in a group should be different (so that the server knows which option the user has selected). - "checked" attribute: can be used to indicate which value (if any) should be selected when the page loads. The value of this attribute is checked. Only one radio button in a group should use this attribute. - Once a radio button has been selected it cannot be deselected. The user can only select a different option. If you are only allowing the user one option and want them to be able to deselect it (for example if they are indicating they agree to terms and conditions), you should use a checkbox instead.

Summary of Flash, Video & audio

- Flash allows you to add animations, video and audio to X the web. - Flash is not supported on iPhone or iPad. X - HTML5 introduces new X <video> and <audio> elements for adding video and audio to web pages, but these are only supported in the latest browsers. - Browsers that support the HTML5 elements do not X all support the same video and audio formats, so you need to supply your files in different formats to ensure that everyone can see/hear them.

HTML 5: Email & URL Input

- HTML5 has also introduced inputs that allow visitors to enter email addresses and URLs. Browsers that do not support these input types will just treat them as text boxes. - <input type="email">: If you ask a user for an email address, you can use the email input. Browsers that support HTML5 validation will check that the user has provided information in the correct format of an email address. Some smart phones also optimize their keyboard to display the keys you are most likely to need when entering an email address (such as the @ symbol). - <input type="url">: A URL input can be used when you are asking a user for a web page address. Browsers that support HTML5 validation will check that the user has provided information in the format of a URL. Some smart phones also optimize their keyboard to display the keys you are most likely to need when entering a URL.

When to use which image formats?

- JPEG: Whenever you have many different colors in a picture you should use a JPEG. A photograph that features snow or an overcast sky might look like it has large areas that are just white or gray, but the picture is usually made up of many different colors that are subtly different. - Use GIF or PNG format when saving images with few colors or large areas of the same color (When a picture has an area that is filled with exactly the same color, it is known as flat color. Logos, illustrations, and diagrams often use flat colors. (Note that photographs of snow, sky, or grass are not flat colors, they are made up of many subtly different shades of the same color and are not as suited to GIF or PNG format.)

HTML: date input

- Many forms need to gather information such as dates, email addresses, and URLs. This has traditionally been done using text inputs. HTML5 introduces new form controls to standardize the way that some information is gathered. Older browsers that do not recognize these inputs will just treat them as a single line text box. - <input type="date">: If you are asking the user for a date, you can use an <input> element and give the type attribute a value of date. This will create a date input in browsers that support the new HMTL5 input types. - The appearance of the date input changes across different browsers.

Directory Structure

- On larger websites it's a good idea to organize your code by placing the pages for each different section of the site into a new folder. Folders on a website are sometimes referred to as directories. - Structure: The top-level folder is known as the root folder. (In this example, the root folder is called examplearts.) The root folder contains all of the other files and folders for a website. Each section of the site is placed in a separate folder; this helps organize the files - Relationships: The relationship between files and folders on a website is described using the same terminology as a family tree. The examplearts folder is a parent of the movies, music and theater folders. And the the movies, music and theater folders are children of the examplearts folder - Homepages: The main homepage of a site written in HTML (and the homepages of each section in a child folder) is called index.html. Web servers are usually set up to return the index.html file if no file name is specified. Therefore, if you enter "examplearts.com" on the navigation bar of the browser it will return "examplearts.com/index .html", and "examplearts.com/music" will return "examplearts .com/music/index.html." -Every page and every image on a website has a URl (or Uniform Resource Locator). The URL is made up of the domain name followed by the path to that page or image. The path to the homepage of this site is www.examplearts .com/index.html. The path to the logo for the site is examplearts.com/images/ logo.gif. You use URLs when linking to other web pages and when including images in your own site. On the 2nd next slide, you will meet a shorthand way to link to files on your own site. Example: -The root folder contains: --A file called index.html which is the homepage for the entire site --Individual folders for the movies, music and theatre sections of the site. -Each sub-directory contains: --A file called index.html which is the homepage for that section --A reviews page called reviews .html --A listings page called listings .html (except for the DVD section) -The movies section contains: --A folder called cinema --A folder called DVD.

CSS declarations sit inside curly brackets and each is made up of two parts: a property and a value, separated by a colon. You can specify several properties in one declaration, each separated by a semi-colon.

- Properties indicate the aspects of the element you want to change. For example, "color", "font", "width", "height" and "border". - Values specify the settings you want to use for the chosen properties. For example, if you want to specify a "color" property then the value is the color you want the text in these elements to be.

CSS works by associating rules with HTML elements; a CSS rule contains two parts: a selector and a declaration.

- Selectors indicate which element the rule applies to. The same rule can apply to more than one element if you separate the element names with commas. - Declarations indicate how the elements referred to in the selector should be styled. Declarations are split into two parts (a property and a value), and are separated by a colon.

- Structural markup: the elements that you can use to describe both headings and paragraphs - Semantic markup: which provides extra information; such as where emphasis is placed in a sentence, that something you have written is a quotation (and who said it), the meaning of acronyms, and so on

- Structural markup: the elements that you can use to describe both headings (h1) and paragraphs (p) - Semantic markup: which provides extra information; such as where emphasis is placed in a sentence, that something you have written is a quotation (and who said it), the meaning of acronyms, and so on - Quora: "I think the most important part about the meaningfulness of semantic tags, is that they do not focus on how something is visually presented, at all, but how important it is. The visual browsers have simply come to a common agreement on what that means in terms of visual presentation, but that is something of a side-effect. Not all browsing is done visually, after all. A text-to-speech browser, for instance - as used by someone with a visual impairment, or dyslexia - might implicitly understand that emphasised text should, perhaps, be vocalised in a more emphatic way, whereas italics are an instruction to lean the letters over, and might simply be being used as for visual effect. And with things like text-to-speech and speech-to-text becoming an increasingly important part of how all of us now interact with our digital content, it is becoming increasingly important to embed information and meaning, and decreasingly important to embed visual styling prompts."

Example of forms:

- The <form> element uses the action attribute to indicate the page that the data is being sent to. Each of the form controls sits inside the <form> element. Different types of form control are suited to collecting different types of data. The <fieldset> element is used to group related questions together. The <label> element indicates the purpose of each form control.

Long tables

- There are three elements that help distinguish between the main content of the table and the first and last rows (which can contain different content). - These elements help people who use screen readers and also allow you to style these sections in a different manner than the rest of the table. - <thead> - <tbody> - <tfoot> - By default, browsers rarely treat the content of these elements any differently than other elements however designers often use CSS styles to change their appearance. - Part of the reason for having separate <thead> and <tfoot> elements is so that, if you have a table that is taller than the screen (or, if printed, longer than one page) then the browser can keep the header and footer visible whilst the contents of the table scroll. This is intended to make it easier for users to see which column the data is in (however this functionality is not implemented by default in any current browser).

Email links

- To create a link that starts up the user's email program and addresses an email to a specified email address, you use the <a> element. However, this time the value of the href attribute starts with mailto: and is followed by the email address you want the email to be sent to.

Names and values in forms

- To differentiate between various pieces of inputted data, information is sent from the browser to the server using name/value pairs - You should never change the name of a form control in a page unless you know that the code on the server will understand this new value.

Labelling Form Controls

- When introducing form controls, the code was kept simple by indicating the purpose of each one in text next to it. However, each form control should have its own <label> element as this makes the form accessible to vision-impaired users. - The <label> element can be used in two ways. It can: 1. Wrap around both the text description and the form input (as shown on the first line of the example to your right). 2. Be kept separate from the form control and use the for attribute to indicate which form control it is a label "for" (as shown with the radio buttons). - "for" attribute: states which form control the label belongs to. Note how the radio buttons use the id attribute. The value of the for attribute matches that of the id attribute on the form control it is labelling. This technique using the for and id attributes can be used on any form control. When a <label> element is used with a checkbox or radio button, users can click on either2 the form control or the label to select. The expanded clickable area makes the form easier to use. The position of the label is very important. If users do not know where to enter information or what information to enter, they are less likely to use the form correctly. - As a rule of thumb, here are the best places to place labels on form controls. --Above or to the left: ----Text inputs ----Text areas ----Select boxes ----File uploads --To the right: ----Individual checkboxes ----Individual radio buttons

<meta>

- lives inside the <head> element and contains information about that web page. - It is not visible to users but fulfills a number of purposes such as telling search engines about your page, who created it, and whether or not it is time sensitive. (If the page is time sensitive, it can be set to expire.) - empty element so it does not have a closing tag. - uses attributes to carry the information. - The most common attributes are the name and content attributes, which tend to be used together. These attributes specify properties of the entire page. The value of the name attribute is the property you are setting, and the value of the content attribute is the value that you want to give to this property (In the first line of the example on the opposite page, you can see a <meta> element where the name attribute indicates an intention to specify a description for the page. The content attribute is where this description is actually specified.) -The value of the name attribute can be anything you want it to be. Some defined values for this attribute that are commonly used are: --"description": This contains a description of the page. This description is commonly used by search engines to understand what the page is about and should be a maximum of 155 characters. Sometimes it is also displayed in search engine results. -- "keywords": This contains a list of commaseparated words that a user might search on to find the page. In practice, this no longer has any noticeable effect on how search engines index your site. -- "robots": This indicates whether search engines should add this page to their search results or not. A value of noindex can be used if this page should not be added. A value of nofollow can be used if search engines should add this page in their results but not any pages that it links to. - The <meta> element also uses the http-equiv and content attributes in pairs. In our example, you can see three instances of the http-equiv attribute. Each one has a different purpose: -- "author": This defines the author of the web page. -- "pragma": This prevents the browser from caching the page. (That is, storing it locally to save time downloading it on subsequent visits.) -- "expires": Because browsers often cache the content of a page, the expires option can be used to indicate when the page should expire (and no longer be cached). Note that the date must be specified in the format shown.

hTml5: PreParing Video For Your Pages

- suPPorT: The new HTML5 <video> element is only supported by recent browsers, so you cannot just use this one technique if you want everyone to be able to see your video (you need to combine this HTML5 with Flash Video). - digiTal righTs: At the time of writing, the <video> element does not support any type of Digital Rights Management (DRM — sometimes referred to as copy protection). But a dedicated pirate will usually find a way around DRM. - FormaTs: Not all browsers support the same video formats. Therefore, you need to supply your video in more than one format. To reach as many browsers as possible, you should provide the video in the following formats: H264: IE and Safari; WebM: Android, Chrome, Firefox, Opera; Chrome, Firefox, and Opera have indicated that they will support a format called WebM. (Some Flash players also support H264, and WebM - which will save on the number of conversions). - conTrols: The browser supplies its own controls for the player, and these can vary from browser to browser. You can control the appearance of these controls using JavaScript (but that is beyond the scope of this book). - in The browser: One of the problems with players such as the Flash Player is that they can behave inconsistently when elements such as menus drop over them, or the window is scaled up or down. The HTML5 option solves these issues.

undersTanding Video FormaTs and PlaYers

-Formats: Online, there are several video formats (including AVI, Flash Video, H264, MPEG, Ogg Theora, QuickTime, WebM, and Windows Media). In order for users to view your video online, you may need to convert it to another format. The process of converting a video into another format is sometimes referred to as "encoding" the video. There are several apps available on the web that enable you to encode videos (such as www. mirovideoconverter.com). -Players/Plugins: Browsers were initially designed to show text and images only. For this reason, browsers built prior to 2010 generally required another program called a player or plugin to to be installed in order to play video content. These players and plugins only supported certain video formats. Recently browsers have evolved to support the HTML5 <video> tag (which renders players and plugins obsolete). Unfortunately, however, you cannot rely on every visitor to your website having a recent browser that supports this new HTML5 element and the browsers that do recognize the <video> element require the video to be encoded in different formats. -Approach: The easiest way to add video to your site is to use a hosted service such as YouTube or Vimeo. However, there are some cases where using these services is not appropriate (as you will see on the next page) and you will want to host the video on your own site. At the time of writing, to ensure most people can play your video content, it is considered best practice to use the HTML5 <video> element for browsers that support it, and also Flash video for those that do not.This means you would need to upload any videos you want to show in at least two different formats: WebM and MP4.

How forms work

1) A user fills in a form and then presses a button to submit the information to the server. 2) The name of each form control is sent to the server along with the value the user enters or selects. 3) The server processes the information using a programming language such as PHP, C#, VB.net, or Java. It may also store the information in a database. 4) The server creates a new page to send back to the browser based on the information received.

Creating an image that is partially transparent (or "see-through") for the web involves selecting one of two formats:

1) Transparent GIF: - If the transparent part of the image has straight edges and it is 100% transparent (that is, not semi-opaque), you can save the image as a GIF (with the transparency option selected). 2) PNG: - If the transparent part of the image has diagonal or rounded edges or if you want a semiopaque transparency or a dropshadow, then you will need to save it as a PNG. - Transparent PNGs are not fully supported in older browsers, most notably Internet Explorer 6 (IE6). There is some JavaScript you can use to get around this issue. The details of this script can be found in the tools section of the website accompanying this book.

CSS selectors (1-2)

1) Universal selector 2) Type selector 3) Class selector 4) ID selector - CSS selectors are case sensitive, so they must match element names and attribute values exactly. - There are some more advanced selectors which allow you to select elements based on attributes and their values, which you will see on page 292 (attribute selectors). - (IE 7 was the first version of IE to support the last two selectors in the table (the sibling selectors), so their use is less common than the other selectors shown here).

Three steps to prepare to add a Flash Video to your web page:

1. Convert your video into FLV format: To play a Flash Video, you need to convert your video into FLV format. Since Flash 6, the Flash authoring environment has come with a Flash Video Encoder to convert videos into FLV format. Some Flash video players also support a format called H264 (and some video editing programs export video in this format). Googling "FLV or H264 converters" will allow you to find alternative encoding software. 2.Find an FLV player to play the video: You'll need a player written in Flash to play the FLV file. Its purpose is to hold the FLV movie and add controls such as play/pause. Here are two sites that offer FLV players: www.osflv.com www.longtailvideo.com You do not need the Flash authoring environment to use either of these on your website. 3. Include the player & video in your page: You can include the player in your page using a JavaScript technique such as SWFObject, which was mentioned earlier in this chapter. You will also need to tell the player where it can find the video file that you want it to play. (Some players have advanced features such as the ability to create playlists of multiple videos, or add a still picture before the video plays.) - I have provided a sample FLV file that you can use with the download code on the website (It is in a separate folder because the video files are large.) In the following example, we will use the OS FLV player, which is a free, open-source Flash Video player. This is included in the download code. It only supports the FLV format (not H264). In the following example, we will also be using the SWFObject JavaScript technique mentioned on pages 207-208.

Three examples of image placement that produce different results:

1: before a paragraph: The paragraph starts on a new line after the image. 2: InsIde the start of a paragraph: The first row of text aligns with the bottom of the image. 3: In the mIddle of a paragraph: The image is placed between the words of the paragraph that it appears in.

CSS selectors (2-2)

5) Child selector 6) Descendant selector 7) Adjacent sibling selector 8) General siblIng selector

<head> ≠ <h1>-<h6> [headings] ≠ <header>

hTml5: adding Video To Your Pages

<video> - "src" attribute: specifies the path to the video. (The example video is in H264 format so it will only work in IE and Safari.) - "poster" attribute: allows you to specify an image to show while the video is downloading or until the user tells the video to play. - "width", "height" attributes: specify the size of the player in pixels. - "controls" attribute: When used, this attribute indicates that the browser should supply its own controls for playback - "autoplay" attribute: When used, this attribute specifies that the file should play automatically. - "loop" attribute: When used, this attribute indicates that the video should start playing again once it has ended. - "preload" attribute: This attribute tells the browser what to do when the page loads. It can have one of three values: --- "none" value: The browser should not load the video until the user presses play. --- "auto" value: The browser should download the video when the page loads. --- "metadata" value: The browser should just collect information such as the size, first frame, track list, and duration. - In HTML5 you do not need to supply values for all attributes, such as the controls, autoplay, and loop attributes used with the <video> element. These attributes are like on/ off switches. If the attribute is present, it turns that option on. If the attribute is omitted, the option is turned off. - If the browser does not support the <video> element or the format of video used, it will display whatever is between the opening <video> and closing </video> tags.

<div> (Grouping text & elements in a block)

Allows you to group a set of elements together in one block-level box. In a browser, the contents of the <div> element will start on a new line, but other than this it will make no difference to the presentation of the page. Using an id or class attribute on the <div> element, however, means that you can create CSS style rules to indicate how much space the <div> element should occupy on the screen and change the appearance of all the elements contained within it. Since there may be several other elements inside a <div> element, it can be helpful to add a comment after the closing </div> tag (This allows you to clearly see which opening tag it is supposed to correspond to). </div>

An iframe is like a little window that has been cut into your page — and in that window you can see another page. The term iframe is an abbreviation of inline frame. One common use of iframes (that you may have seen on various websites) is to embed a Google Map into a page. The content of the iframe can be any html page (either located on the same server or anywhere else on the web). - "src" attribute: specifies the URL of the page to show in the frame. - "height" attribute: specifies the height of the iframe in pixels. - "width" attribute: specifies the width of the iframe in pixels. - "scrolling" attribute: The scrolling attribute will not be supported in HTML5. In HTML 4 and XHTML, it indicates whether the iframe should have scrollbars or not. This is important if the page inside the iframe is larger than the space you have allowed for it (using the height and width attributes). Scrollbars allow the user to move around the frame to see more content. It can take one of three values: yes (to show scrollbars), no (to hide scrollbars) and auto (to show them only if needed). - "frameborder" attribute: The frameborder attribute will not be supported in HTML5. In HTML 4 and XHTML, it indicates whether the frame should have a border or not. A value of 0 indicates that no border should be shown. A value of 1 indicates that a border should be shown. - "seamless" attribute: In HTML5, a new attribute called seamless can be applied to an iframe where scrollbars are not desired. The seamless attribute (like some other new HTML5 attributes) does not need a value, but you will often see authors give it a value of seamless. Older browsers do not support the seamless attribute. <iframe .....width="450" .....height="350" .....src="http://maps.google.co.uk/maps?q=moma+new+york &output=embed"> </iframe>

Browser quirks

Any seasoned user of CSS will tell you that some browsers display a few of the CSS properties in an unexpected way. But finding and squashing those bugs is easy when you know how...

Linking to a Specific Part of Another Page

As long as the page you are linking to has id attributes that identify specific parts of the page, you can simply add the same syntax to the end of the link for that page. Therefore, the href attribute will contain the address for the page (either an absolute URL or a relative URL), followed by the # symbol, followed by the value of the id attribute that is used on the element you are linking to. For example, to link to the bottom of the homepage of the website that accompanies this book, you would write: <a href="http:/www. htmlandcssbookcom/ #bottom">

Types of DOCYTPES

Because there have been several versions of HTML, each web page should begin with a DOCTYPE declaration to tell a browser which version of HTML the page is using (although browsers usually display the page even if it is not included). - see image - Because XHTML was written in XML, you will sometimes see pages that use the XHTML strict DOCTYPE start with the optional XML declaration. Where this is used, it should be the first thing in a document. There must be nothing before it, not even a space.

Choosing a typeface for your website (2-2)

Browsers are supposed to support at least one typeface from each of the 5 groups above. For this reason, it is common to add the generic font name after your preferred choice of typefaces. For example, if you wanted serif type, you could write the following: font-family: Georgia, Times, serif;

"background-color" property

CSS treats each HTML element as if it appears in a box, and the background-color property sets the color of the background for that box. If you do not specify a background color, then the background is transparent. By default, most browser windows have a white background, but browser users can set a background color for their windows, so if you want to be sure that the background is white you can use the "background-color" property on the <body> element.

Class Attribute

Every HTML element can also carry a class attribute (global attribute). Sometimes, rather than uniquely identifying one element within a document, you will want a way to identify several elements as being different from the other elements on the page. For example, you might have some paragraphs of text that contain information that is more important than others and want to distinguish these elements, or you might want to differentiate between links that point to other pages on your own site and links that point to external sites. The class attribute on any element can share the same value. - If you would like to indicate that an element belongs to several classes, you can separate class names with a space (<p class="important admittance"></p>)

Adding animations, video, and audio to websites.

Flash is a very popular technology used to add animations, video, and audio to websites Also, you can add video and audio to your site using either the new HTML5 <video> and <audio> elements or a hosted service (such as YouTube or SoundCloud).

How CSS rules cascade

If there are two or more rules that apply to the same element, it is important to understand which will take precedence. Last rule: If the two selectors are identical, the latter of the two will take precedence. Here you can see the second i selector takes precedence over the first. SpecIfIcIty: If one selector is more specific than the others, the more specific rule will take precedence over more general ones. In this example: - "h1" is more specific than "*" - "p b" is more specific than "p" - "p#intro" is more specific than "p" Important: You can add "!important" after any property value to indicate that it should be considered more important than other rules that apply to the same element. Understanding how CSS rules cascade means you can write simpler style sheets because you can create generic rules that apply to most elements and then override the properties on individual elements that need to appear differently.

Sometimes you might consider placing CSS rules in the same page as your HTML code.

If you are just creating a single page, you might decide to put the rules in the same file to keep everything in one place. (However, many authors would consider it better practice to keep the CSS in a separate file.) If you have one page which requires a few extra rules (that are not used by the rest of the site), you might consider using CSS in the same page. (Again, most authors consider it better practice to keep all CSS rules in a separate file.) - [Most of the examples in this book place the CSS rules in the <head> of the document (using the <style> element) rather than a separate document. This is simply to save you opening two files to see how the CSS examples work.]

Inheritance

If you specify the "font-family" or "color" properties on the <body> element, they will apply to most child elements. This is because the value of the "font-family" property is inherited by child elements. It saves you from having to apply these properties to as many elements (and results in simpler style sheets). You can compare this with the "background-color" or "border" properties; they are not inherited by child elements. If these were inherited by all child elements then the page could look quite messy. You can force a lot of properties to inherit values from their parent elements by using "inherit" for the value of the properties. In this example, the <div> element with a class called "page" inherits the padding size from the CSS rule that applies to the <body> element.

HTML5 (2000)

In HTML5, web page authors do not need to close all tags, and new elements and attributes will be introduced. At the time of writing, the HTML5 specification had not been completed, but the major browser makers had started to implement many of the new features, and web page authors were rapidly adopting the new markup. Despite the fact that HTML5 is not yet completed, you can safely take advantage of the new features of the language as long as you endeavour to ensure that users with older browsers will be able to view your pages (even though some of the extra features will not be visible to them).

Animated GIFs

It Is Important to remember: - Each extra frame of the image increases the size of the file, and can therefore add to the time it takes for an image to download (and web users do not like waiting a long time for images to download). - Because GIFs are not an ideal format for displaying photographs, animated GIFs are really only suitable for simple illustrations - Some designers frown on animated GIFs because they remember a lot of amateur web designers overusing them in the 1990's.

Most computer screens only show web pages at 72 pixels per inch. So saving images at a higher resolution results in images that are larger than necessary and take longer to download. Due to the fact that computer displays are capped at a resolution of 72 ppi, using images on the web with a higher resolution will not result in better image quality — only in larger file sizes, which will increase the time needed to load them and therefore slow down viewing of your web pages.

"Title" attribute in "img" tag

Provides additional information about the image. Most browsers will display the content of this attribute in a tootip when the user hovers over the image.

Typeface terminology (1-2)

Serif: Serif fonts have extra details on the ends of the main strokes of the letters. These details are known as serifs. In print, serif fonts were traditionally used for long passages of text because they were considered easier to read. Sans-Serif: Sans-serif fonts have straight ends to letters, and therefore have a much cleaner design. Screens have a lower resolution than print. So, if the text is small, sans-serif fonts can be clearer to read. Monospace: Every letter in a monospace (or fixed-width) font is the same width. (Non-monospace fonts have different widths.)

The exact size at which each browser shows the headings [<h1>-<h6>] can vary slightly

So, the natural markup that come with some HTML tags depends on the browser?

Superscript

The <address> element has quite a specific use: to contain contact details for the author of the page. It can contain a physical address, but it does not have to. For example, it may also contain a phone number or email address. Browsers often display the content of the <address> element in italics.

The <em> element allows you to indicate where emphasis should be placed on selected words, and the <blockquote> element indicates that a block of text is a quotation. Browsers often display the contents of these elements in a different way. For example, the content of the <em> element is shown in italics, and a <blockquote> is usually indented. But you should not use them to change the way that your text looks; their purpose is to describe the content of your web pages more accurately. The reason for using these elements is that other programs, such as screen readers or search engines, can use this extra information. For example, the voice of a screen reader may add emphasis to the words inside the <em> element, or a search engine might register that your page features a quote if you use the <blockquote> element.

The <ins> element can be used to show content that has been inserted into a document, while the <del> element can show text that has been deleted from it. The content of a <ins> element is usually underlined, while the content of a <del> element usually has a line through it. - Older versions of HTML had a <u> element for content that was underlined, but this is being phased out.

using hosTed Video serVices

The easiest way to add a video to your site is to upload the video to a site like YouTube or Vimeo and use the features provided on their site to embed the video in your page. - Advantages: Hosted video sites (such as YouTube) provide players that work with the majority of web browsers. You do not need to worry about encoding your video since these sites allow you to upload your content in a range of formats. Once uploaded, they automatically convert your video into the various formats required by different browsers. Web hosting companies often charge extra if you use a lot of bandwidth, and video files can be quite large. Therefore, it can cost you extra to host the videos on your own site. If your video is hosted on a site like YouTube or Vimeo, however, you do not need to pay for the bandwidth. - Disadvantages: Your video will be available on the site of the hosted service, so if you want the content to be exclusively available on your site (and not visible on other sites), you need to host the video on your own server and add your own player into the page. Some services will limit what your video is allowed to include. For example, most prohibit the use of advertising within the video you upload (which prevents you from monetizing that content). Some hosted services will play their own adverts before your video will begin, or even overlay them over the screen as your video is playing. The quality of video on some hosted services can also be limited. - The alternative: If you want to host video on your own site - rather than a hosted service - a lot more work is involved in setting up your site to play the video. We will be looking at two different ways that you can host your own videos: using both Flash Video and the HTML5 <video> element. In order to ensure that the maximum number of visitors to your site can see the video, you will need to use a combination of both of these techniques.

<dfn>

The first time you explain some new terminology (perhaps an academic concept or some jargon) in a document, it is known as the defining instance of it. The <dfn> element is used to indicate the defining instance of a new term. Some browsers show the content of the <dfn> element in italics. Safari and Chrome do not change its appearance.

adding a Flash moVie To Your web Page (part 1)

The most popular way of adding Flash into a web page is using JavaScript. There are several scripts that allow you to do this without an in-depth understanding of the JavaScript language. The script we will be looking at here is called SWFObject. You can obtain a copy of it for free from Google, and you can see how we use it on the next page. One advantage to using this technique is that it allows browsers to show alternative content for users whose browsers are not capable of showing Flash. This technique uses a <div> element to create a space where the Flash movie should sit. The <div> element has an id attribute whose value is used by the SWFObject script. In this example, the value of the id attribute is bird. Inside the <div> element you can place the alternative content for users who are not able to play Flash. The SWFObject script will check to see if the user's browser can play the Flash movie. If it can, the script will replace the content of the <div> with the .swf file. For users who cannot see the Flash movie, you could show a still from the movie instead. You might also like to consider using a text description of the Flash file. If you use a text description as alternative content, then you can achieve two further benefits: 1. The text can be accessed by those with visual and/or physical impairments who are not able to interact with the Flash file. 2. The text can be indexed by search engines (which are not as effective at indexing SWF files), increasing the chance that your content will be found.

The properties that allow you to control the appearance of text can be split into two groups: 1) Those that directly affect the font and its appearance (including the typeface, whether it is regular, bold or italic, and the size of the text). 2) Those that would have the same effect on text no matter what font you were using (including the color of text and the spacing between words and letters).

There are two elements commonly used for marking up quotations: 1) <blockquote> The <blockquote> element is used for longer quotes that take up an entire paragraph. Note how the <p> element is still used inside the <blockquote> element. Browsers tend to indent the contents of the <blockquote> element, however you should not use this element just to indent a piece of text — rather you should achieve this effect using CSS. 2) <q> The <q> element is used for shorter quotes that sit within a paragraph. Browsers are supposed to put quotes around the <q> element, however Internet Explorer does not — therefore many people avoid using the <q> element. - Both elements may use the cite attribute to indicate where the quote is from. Its value should be a URL that will have more information about the source of the quotation.

Color example (1-3)

This example shows a pH scale to demonstrate the different ways that colors can be specified using CSS (using color names, hex codes, RGB, and HSL). - The rule for the <body> element sets a default color for all the text as well as the default background color for the page. Both use color names. - The rule for the <h1> element sets the color of the heading using a hex code. There are two values for the "background-color" property of the <h1> element. The first provides a fallback color using a hex code and the second is an HSLA value for browsers that support this method. - Each paragraph is then shown in a different color to represent the varying levels of acidity or alkalinity, and these are specified using RGB values. - The example also uses a property called "margin" to decrease the gap between the paragraph boxes, and a property called "padding" to create a gap between the edge of the boxes and the text within them. (These properties are covered on pages 313-314.)

adding a Flash Video To Your Pages

This example uses the OS FLV player to display a video called puppy.flv, which has already been convered into FLV format. You have already seen how to use SWFObject to embed a basic animation in a page, but sometimes Flash movies need information in order for them to work. In this example, the video player needs to know the path to the video it has to play, so SWFObject uses JavaScript variables to pass this information to the Flash movie. These are provided in the two lines of code that start with var. This particular player is not expecting any information in the flashvars variable, so that is left empty. The path to the movie is supplied in the variable called params. var params = {movie: "../videos/puppy.flv"}; The line after the variables is the one that tells the script to replace the HTML element with the video player. It is very similar to the one you saw in the earlier example that introduced SWFObject. Different video players usually require information such as the path to the video in slightly different formats, but they usually come with examples and documentation to help you understand how to use them.

Typeface terminology (2-2)

Values of "weight" property: - Light - Medium - Bold - Black - The font weight not only adds emphasis but can also affect the amount of white space and contrast on a page. Values of "style" property: - Normal - Italic - Oblique - Italic fonts have a cursive aspect to some of the lettering. Oblique font styles take the normal style and put it on an angle. Values of "stretch" property: - Condensed - Regular - Extended - In condensed (or narrow) versions of the font, letters are thinner and closer together. In expanded versions they are thicker and further apart.

JPGs, GIFs, and PNGs belong to a type of image format known as bitmap. They are made up of lots of miniature squares. The resolution of an image is the number of squares that fit within a 1 inch x 1 inch square area.

Vector images differ from bitmap images and are resolution-independent. Vector images are commonly created in programs such as Adobe Illustrator. When an image is a line drawing (such as a logo, illustration, or diagram), designers will often create it in vector format. Vector formatted images are very different to bitmap images. Vector images are created by placing points on a grid, and drawing lines between those points. A color can then be added to "fill in" the lines that have been created. The advantage of creating line drawings in vector format is that you can increase the dimensions of the image without affecting the quality of it. The current method of using vector images for display on websites involves saving a bitmap version of the original vector image and using that. Scalable Vector Graphics (SVG) are a relatively new format used to display vector images directly on the web (eliminating the need to create bitmap versions of them), however its use is not yet widespread.

Choosing a typeface for your website (1-2)

When choosing a typeface, it is important to understand that a browser will usually only display it if it's installed on that user's computer. As a result, sites often use a small set of typefaces that are installed on most computers (shown above). There are some techniques to get around this limitation (which are covered on pages 271-272). It is possible to specify more than one typeface and create an order of preference (in case the user does not have your first choice of typeface installed). This is sometimes referred to as a font stack.

When using escape characters (the signs above), it is important to check the page in your browser to ensure that the correct symbol shows up. This is because some fonts do not support all of these characters and you might therefore need to specify a different font for these characters in your CSS code.

Difference between <i> and <em>

While both are typically (but not always) styled to display as italic, <em> is used when you want to put more stress on a word or phrase. <i> would be used when you don't need to stress a word or phrase, but do want it to be different from the words around it, for example when you might use it to indicate an alternative voice.

With regards to images, the "height", "width", and "align" attributes are being phased out and you are encouraged to use CSS properties instead.

HTML 4 (1997)

With the exception of a few elements added in HTML5 (which have been highlighted), the elements you have seen in this book were all available in HTML 4. Although HTML 4 had some presentational elements to control the appearance of pages, authors are not recommended to use them any more. (Examples include the <center> element for centering content on a page, <font> for controlling the appearance of text, and <strike> to put a line through the text — all of these can be achieved with CSS instead.)

HTML5: Form Validation

You have probably seen forms on the web that give users messages if the form control has not been filled in correctly; this is known as form validation. Traditionally, form validation has been performed using JavaScript (which is beyond the scope of this book). But HTML5 is introducing validation and leaving the work to the browser. Validation helps ensure the user enters information in a form that the server will be able to understand when the form is submitted. Validating the contents of the form before it is sent to the server the helps: - Reduce the amount of work the server has to do. - Enables users to see if there are problems with the form faster than if validation were performed on the server. At the time of writing, only Chrome and Opera supported HTML5 validation, although other browsers are expected to follow. In order to support older browsers (that do not understand HTML5), web page authors are likely to continue using JavaScript to validate forms. An example of HTML5 form validation is the "required" attribute, which can be used on any form element that the user is expected to fill in. This HTML5 attribute does not need a value, but in HTML 4 all attributes must have a value. So, some people give this attribute a value of "required".

hTml5: combining Flash & hTml5 Video

You may choose to offer HTML5 as the first option, and Flash video as a fallback for people whose browser does not support HTML5 video. Or you may work the other way around. Because some of the video players built in Flash support H264 encoding, if you use a player that supports this format you would only need to provide the video in H264 and WebM formats. (You would not need it in FLV format as well.) You will see this demonstrated in the example at the end of the chapter. If you start to work with HTML5 video in depth, you can also: - Create your own playback controls - Provide different versions of the video for browsers that have different sized screens (so you can provide lower resolution content for handheld devices) - Tell different parts of a page to change when the video reaches a certain point

You should save the image at the same width and height it will appear on the website. If the image is smaller than the width or height that you have specified, the image can be distorted and stretched. If the image is larger than the width and height if you have specified, the image will take longer to display on the page.`

adding a Flash moVie To Your web Page (part 2)

Color example (3-3)

see image

Contrast

see image

Relative URLS

(See image) - If all of the files in your site are in one folder, you simply use the file name for that page. If your site is organized into separate folders (or directories), you need to tell the browser how to get from the page it is currently on to the page that you are linking to. If you link to the same page from two different pages you might, therefore, need to write two different relative URLs. - When a website is live (that is, uploaded to a web server) you may see a couple of other techniques used that do not work when the files are on your local computer. For example, you may see the name of a child folder without the name of a file. In this case the web server will usually try to show the homepage for that section. A forward slash will return the homepage for the entire site, and a forward slash followed by a file name will return that file providing it is in the root directory.

Nested lists

- You can put a second list inside an <li> element to create a sublist or nested list. - Browsers display nested lists indented further than the parent list. In nested unordered lists, the browser will usually change the style of the bullet point too.

hTml5: adding hTml5 audio To Your Pages

<audio> tag: HTML5 introduced the <audio> element to include audio files in your pages. As with HTML5 video, browsers expect different formats for the audio. The <audio> element has a number of attributes which allow you to control audio playback: - "src" attribute: This attribute specifies the path to the audio file. controls This attribute indicates whether the player should display controls. If you do not use this attribute, no controls will be shown by default. You can also specify your own controls using JavaScript. - "autoplay" attribute: The presence of this attribute indicates that the audio should start playing automatically. (It is considered better practice to let visitors choose to play audio.) - "preload" attribute: This attribute indicates what the browser should do if the player is not set to autoplay. It can have the same values we saw on page 214 for the <video> element. - "loop" attribute: This attribute specifies that the audio track should play again once it has finished. This example only works in browsers that support the Ogg Vorbis audio format (Firefox, Chrome, and Opera). For it to work in Safari 5 and IE 9, the audio would need to be in MP3 format (or use the <source> element covered on the next page to offer different formats).

Examples of block level elements:

It is a good habit to write self-closing tags, or empty elements, like this:

<hr /> [a space and a forward slash before the closing angled bracket]

Using external CSS

hTml5: mulTiPle audio sources

<source> tag: It is possible to specify more than one audio file using the <source> element between the opening <audio> and closing </audio> tags (instead of the src attribute on the opening <audio> tag). This is important because different browsers support different formats for audio files. MP3: Safari 5+, Chrome 6+, IE9; Ogg Vorbis: Firefox 3.6, Chome 6, Opera 1.5, IE9; So you would need to supply two audio formats to get coverage across all recent browsers that support the <audio> element. You could also provide a Flash alternative for older browsers that do not support the <audio> element. - "src" attrbute: The <source> element uses the src attribute to indicate where the audio file is located. - "type" attribute: At the time of writing, the type attribute was not commonly being used on the <source> element in the same way it was for the <video> element. - The HTML5 <audio> tag has not gained as widespread adoption as the <video> tag, and there have been some issues with audio quality in the first browsers to implement it.

Using internal CSS

why use external style sheets?

All of your web pages can share the same style sheet. This is achieved by using the <link> element on each HTML page of your site to link to the same CSS document. This means that the same code does not need to be repeated in every page (which results in less code and smaller HTML pages). Therefore, once the user has downloaded the CSS stylesheet, the rest of the site will load faster. If you want to make a change to how your site appears, you only need to edit the one CSS file and all of your pages will be updated. For example, you can change the style of every <h1> element by altering the one CSS style sheet, rather than changing the CSS rules on every page. The HTML code will be easier to read and edit because it does not have lots of CSS rules in the same document. It is generally considered good practice to have the content of the site separated from the rules that determine how it appears.

Block elements always appear on a new line. Examples of block elements include the <h1> and <p> elements. - If the <img> is followed by a block level element (such as a paragraph) then the block level element will sit on a new line after the imageas shown in the first example on this page. Inline elements sit within a block level element and do not start on a new line. Examples of inline elements include the <b>, <em>, and <img> elements. - If the <img> element is inside a block level element, any text or other inline elements will flow around the image as shown in the second and third examples on this page.

adding audio To web Pages

By far the most popular format for putting audio on web pages is MP3. As with video, there are three routes commonly taken: 1)use a hosTed serVice: There are several sites that allow you to upload your audio, and provide a player which you can embed in your page, such as SoundCloud.com and MySpace.com. 2) use Flash: There are several Flash movies that allow you to play MP3 files; from simple buttons that play one track to complex players that allow you to create playlists and juke boxes. 3) use hTml5: HTML5 has introduced a new <audio> element. Browsers that support this element provide their own controls — much as they do for the video files we just looked at. -Some people ask how to get music to play consistently even when visitors move from one page to another on a website. This is actually quite difficult to achieve and would rely on techniques like using AJAX to load page content or developing the entire site in Flash. This is why some sites offer audio players in new windows, so that listeners are not interrupted when they move between pages.

Different versions of CSS

CSS1 was released in 1996 and CSS2 followed two years later. Work on CSS3 has been ongoing but the major browsers have already started to implement it

HSL colors

CSS3 introduces an entirely new and intuitive way to specify colors using hue, saturation, and lightness values. Hue Hue is the colloquial idea of color. In HSL colors, hue is often represented as a color circle where the angle represents the color, although it may also be shown as a slider with values from 0 to 360. Saturation Saturation is the amount of gray in a color. Saturation is represented as a percentage. 100% is full saturation and 0% is a shade of gray. Lightness Lightness is the amount of white (lightness) or black (darkness) in a color. Lightness is represented as a percentage. 0% lightness is black, 100% lightness is white, and 50% lightness is normal. Lightness is sometimes referred to as luminosity. (Please note that lightness is a different concept to brightness. Graphic design software (such as Photoshop and GIMP) have color pickers that use hue, saturation, and brightness — but brightness only adds black, whereas lightness offers both white and black.)

Opacity

CSS3 introduces the "opacity" property which allows you to specify the opacity of an element and any of its child elements. The value is a number between 0.0 and 1.0 The CSS3 "rgba" property allows you to specify a color, just like you would with an RGB value, but adds a fourth value to indicate opacity. This value is known as an alpha value and is a number between 0.0 and 1.0. The rgba value will only affect the element on which it is applied (not child elements). Because some browsers will not recognize RGBA colors, you can offer a fallback so that they display a solid color. If there are two rules that apply to the same element, the latter of the two will take priority. To create the fallback, you can specify a color as a hex code, color name or RGB value, followed by the rule that specifies an RGBA value. If the browser understands RGBA colors it will use that rule. If it doesn't, it will use the RGB value. At the time of writing, the "opacity" and "rgba" properties are only supported by the most recent browsers.

ID attribute

Every HTML element can carry the id attribute (a global attribute). It is used to uniquely identify that element from other elements on the page. Its value should start with a letter or an underscore (not a number or any other character). It is important that no two elements on the same page have the same value for their id attributes (otherwise the value is no longer unique).

If you are working with a content management system, blogging software, or an e-commerce system, you might not have individual files for each page of the website. Instead, these systems often use one template file for each different type of page (such as news articles, blog posts, or products). Editing the template file would change all of the pages that use that template. Do not change any code that is not HTML or you may break the page.

Opening Links in a New Window

If you want a link to open in a new window, you can use the target attribute on the opening <a> tag. The value of this attribute should be "_blank". - Generally you should avoid opening links in a new window, but if you do, it is considered good practice to inform users that the link will open a new window before they click on it.

XHTML 1.0 (2000)

In 1998, a language called XML was published. Its purpose was to allow people to write new markup languages. Since HTML was the most widely used markup language around, it was decided that HTML 4 should be reformulated to follow the rules of XML and it was renamed XHTML. This meant that authors had to follow some new, more strict rules about writing markup. For example: - Every element needed a closing tag (except for empty elements such as <img />). - Attribute names had to be in lowercase. - All attributes required a value, and all values were to be placed in double quotes. - Deprecated elements should no longer be used. - Every element that was opened inside another element should be closed inside that same element. The examples in this book all follow these strict rules of XML. One of the key benefits of this change was that XHTML works seamlessly with other programs that are written to create and process XML documents. It could also be used with other data formats such as Scalable Vector Graphics (SVG) — a graphical language written in XML, MathML (used to mark up mathematical formulae), and CML (used to mark up chemical formulae). In order to help web page authors move to this new syntax, two main flavors of XHTML 1.0 were created: -Strict XHTML 1.0, where authors had to follow the rules to the letter - Transitional XHTML 1.0, where authors could still use presentational elements (such as <center> and <font>). The transitional version of XHTML was created because it allowed authors to continue to follow older practices (with a less strict syntax) and use some of the elements and attributes that were going to be removed from future versions of HTML. There was also a third version of XHTML 1.0 called XHTML 1.0 Frameset, which allowed web page authors to partition a browser window into several "frames," each of which would hold a different HTML page. These days, frames are very rarely used and are being phased out.

<span> (Grouping text & elements inline)

It acts like an inline equivalent of the <div> element. It is used to either: 1. Contain a section of text where there is no other suitable element to differentiate it from its surrounding text 2. Contain a number of inline elements The most common reason why people use <span> elements is so that they can control the appearance of the content of these elements using CSS. You will usually see that a class or id attribute is used with <span> elements: - To explain the purpose of this <span> element - So that CSS styles can be applied to elements that have specific values for these attributes. <p>Anish Kapoor won the Turner Prize in 1991 and exhibited at the <span class="gallery">Tate Modern</span> gallery in London in 2003.</p>

How Flash Works and The Use of Flash

Since the late 1990s, Flash has been a very popular tool for creating animations, and later for playing audio and video in websites. Whether you are creating an animation or a media player in Flash, the files you put on your website are referred to as Flash movies. If you want to create your own Flash movie, you need to purchase the Flash authoring environment from Adobe. There are, however, several companies that offer Flash animations and slideshows, as well as video and audio players that you can use without purchasing this tool. When you create a Flash file in the Flash authoring environment, it is saved with the .fla file extension. In order to use this file on a web page it has to be saved in a different format known as SWF. (It has the .swf file extension.) When you export the movie into SWF format, Flash creates code that you can use to embed the Flash movie in your page. Traditionally, this code used the HTML <object> and <embed> tags. However, now it is more common to use JavaScript. To view Flash, browsers need to use a plugin (an extra piece of software that runs in the browser) called the Flash Player. Statistics commonly indicate that 98% of browsers on desktop computers have the Flash plugin installed. (The percentage of mobiles and tablets with it is much less.) There is not space in this book to teach you how to create Flash movies (there are many books devoted to that one topic), but this chapter will show you how to add Flash movies to your site. Since 2005, a number of factors have meant that fewer websites are written in Flash or even use elements of Flash in their pages. When Flash was first released, it was developed to create animations. The technology quickly evolved, however, and people started to use it to build media players and even entire websites. Although Flash is still very popular, in recent years people have been more selective about when they use it (and now rarely consider building an entire website in Flash). Despite this, Flash does have a future on the web because there are some things it does very well, such as creating animations. There are several reasons why fewer websites are using Flash these days, including: In 2005-6, a set of JavaScript libraries were launched (including Prototype, script.aculo.us, and JQuery) which made it easier for people to create animated effects using JavaScript. When Apple launched the iPhone in 2007 and later the the iPad in 2010, they took the decision not to support Flash. There have been laws introduced to ensure that websites are usable by those with visual or physical impairments — and Flash has been criticized because Flash content does not always meet accessibility requirements. In 2008, browsers started to support HTML5 <video> and <audio> tags. At the time of writing, Flash is still a popular way of playing video and audio on the web but more and more people are switching to HTML5

Spanning Columns

The "colspan" attribute can be used on a <th> or <td> element and indicates how many columns that cell should run across (Sometimes you may need the entries in a table to stretch across more than one column.). - Example: You can see that the second and third rows have fewer <td> elements than there are columns. This is because, when a cell extends across more than one column, the <td> or <th> cells that would have been in the place of the wider cells are not included in the code. I added some CSS styles to this example so that you can see how the cells span more than one column. You will learn how to do this on pages 250, 337-340.

"font-family" property

The "font-family" property allows you to specify the typeface that should be used for any text inside the element(s) to which a CSS rule applies. - The value of this property is the name of the typeface you want to use. - The people who are visiting your site need the typeface you have specified installed on their computer in order for it to be displayed. - You can specify a list of fonts separated by commas so that, if the user does not have your first choice of typeface installed, the browser can try to use an alternative font from the list. - It is also common to end with a generic font name for that type of font (which you saw on pages 269-270). - If a font name is made up of more than one word, it should be put in double quotes. - Designers suggest pages usually look better if they use no more than three typefaces on a page.

"font-size" property

The "font-size" property enables you to specify a size for the font. There are several ways to specify the size of a font. The most common are: - Pixels: Pixels are commonly used because they allow web designers very precise control over how much space their text takes up. The number of pixels is followed by the letters px. - Percentages: The default size of text in browsers is 16px. So a size of 75% would be the equivalent of 12px, and 200% would be 32px. If you create a rule to make all text inside the <body> element to be 75% of the default size (to make it 12px), and then specify another rule that indicates the content of an element inside the <body> element should be 75% size, it will be 9px (75% of the 12px font size). - Ems: An em is equivalent to the width of a letter m.

"hsl", and "hsla" color properties

The "hsl" color property has been introduced in CSS3 as an alternative way to specify colors. The value of the property starts with the letters hsl, followed by individual values inside parentheses for: - hue: This is expressed as an angle (between 0 and 360 degrees). - saturation: This is expressed as a percentage. - lightness: This is expressed as a percentage with 0% being white, 50% being normal, and 100% being black. The "hsla" color property allows you to specify color properties using hue, saturation, and lightness as above, and adds a fourth value which represents transparency (just like the rgba property). The a stands for: - alpha: This is expressed as a number between 0 and 1.0. For example, 0.5 represents 50% transparency, and 0.75 represents 75% transparency. Because older browsers do not recognize HSL and HSLA values, it is a good idea to add an extra rule which specifies the color using a hex code, RGB value, or color name. This should appear before the rule that uses the HSL or HSLA value. This provides a fallback because if there are two rules that apply to the same element in CSS, the latter of the two always takes priority. This means that if the browser understands HSL and HSLA colors, it will use that rule; and if it does not, it will use the first rule.

The term "tag" and "element" are often used interchangeably (Strictly speaking, however, an element comprises the opening tag and the closing tag and any content that lies between them.)

The value of the id attribute should start with a letter or an underscore (not a number or any other character) and, on a single page, no two id attributes should have the same value.

The "lang" attribute can appear on any element

The value of the lang attribute is an abbreviated way of specifying which language is used inside the element that all browsers understand.

Example of flash, video, and audio

This example uses HTML5 to show a video. The video has been encoded in H264 and WebM formats to reach as many browsers as possible. A Flash player has been added to the page for browsers that do not support HTML5 video. The Flash player is embedded using SWFObject. If the browser does not support HTML5 video or Flash, then a plain text message will be shown to the user.

<cite>

When you are referencing a piece of work such as a book, film or research paper, the <cite> element can be used to indicate where the citation is from. In HTML5, <cite> should not really be used for a person's name — but it was allowed in HTML 4, so most people are likely to continue to use it. Browsers will render the content of a <cite> element in italics.

The key to understanding how CSS works is to imagine that there is an invisible box around every HTML element. CSS allows you to create rules that control the way that each individual box (and the contents of that box) is presented (Using CSS, you could add a border around any of the boxes, specify its width and height, or add a background color. You could also control text inside a box — for example, its color, size, and the typeface used.).

ibid

Units of type size

see image

Understanding color

see image - Color picking tools are available in image editing programs like Photoshop and GIMP. You can see the RGB values specified next to the radio buttons that say R, G, B. The hex value is provided next to the pound or hash # symbol. There is also a good color picking tool at: colorschemedesigner.com

HTML & CSS by Jon Duckett

Conjuntos de estudio relacionados

Ch 10 Head & Neck (Seidel)

Compensation and Benefits Chapter 4- Incentive and Variable Pay

History 1221 Exam

Chapter 18: Apoptosis

Muscles of the Shoulder Girdle

apes unit 1 group

Environmental unit 4&5

MASTERING BIOLOGY CHP 17 Transcription and Translation

Balance sheet

Chapter 11

Expected findings

Peds Test 3 Practice Questions

Chapter 11: Traditional Leadership Approaches

Georgia law, rules and regulations

Java Applications Final(100)

Buddhism

Exam 1 Sample Questions

MicroEcon LO6

LearningCurve 6a.

SFAS Topic test