the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book. HTML & CSS. DeSign anD. Pages·· MB·96, Downloads. Web Design with HTML and CSS Digital Classroom. Published by. Wiley Publishing, Inc. Web Design wit. HTML & CSS Design and Build Websites JOn dUCKeTT JOHn WILeY mp3, or a PDF), you will need to use a file .
|Language:||English, Spanish, Portuguese|
|Genre:||Academic & Education|
|Distribution:||Free* [*Registration needed]|
Every day, more and more people want to learn some HTML and CSS. Joining the professional web designers and programmers are new audiences who need . The simpler way to learn HTML and CSS, in a beautifully presented, full-color book. Wiley (NYSE: JWA) is a global publishing company that specializes in. Wiley also publishes its books in a variety of electronic formats. Some content . of Web browsers support different versions of HTML and CSS, but the exact formatting that couple of PDF files, and over 60 different graphics files. Instead of.
These tags provide extra meaning and allow browsers to show users the appropriate structure for the page. In this chapter we focus on how to add markup to the text that appears on your pages. You will learn about: Browsers display the contents of headings at different sizes. The exact size at which each browser shows the headings can vary slightly. Users can also adjust the size of text in their browser. You will see how to control the size of text, its color, and the fonts used when we come to look at CSS.
The To create a paragraph, surround start of a paragraph is indicated by a new the words that make up the line.
For example, a book may have chapters. Chapters can have subheadings. Under By default, a browser will show each heading there will be one or more each paragraph on a new line paragraphs. It is commonly used with foot notes or chemical formulas such as H Similarly if it comes across a line break, it treats that as a single space too. You will often see that web page authors take advantage of white space collapsing to indent their code in order to make it easier to follow. They are known as empty elements and they are written differently.
Before the closing angled bracket of an empty element there will often be a space and a forward slash character. Some web page authors miss this out but it is a good habit to get into. Visual editors often resemble If you copy and paste text from Code views show you the code word processors. Although a program that allows you to created by the visual editor so each editor will differ slightly, format text such as Word into you can manually edit it, or so there are some features that a visual editor, it may add extra you can just enter new code are common to most editors markup.
To prevent this copy yourself. It is often activated that allow you to control the the text into a plain text editor using a button with an icon presentation of text. In the rest of the chapter you Browsers often display the The reason for using these will meet some more elements contents of these elements in elements is that other programs, that will help you when you are a different way. For example, such as screen readers or search adding text to web pages. Not many listen though. That's the used for longer quotes that take problem.
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.
Safari and Chrome do not change its appearance. For example, it may also contain a phone number or email address. You may also be interested in something called the hCard microformat for adding physical address information to your markup.
You can find out more about hCards on the website accompanying this book. It had been Molly's favorite book since college, and the longer she spent in these four walls the more she felt she needed to be free. X They also provide semantic information e. HTML provides us with three different types: For example, the list might be a set of steps for a recipe that must be performed in order, or a legal contract where each point needs to be identified by a section number.
The li stands for list item. It is better to use the CSS list- style-type property covered on pages It is better to use the CSS list-style- type property covered on pages Sometimes you might see a list where there are two terms used for the same definition or two different definitions for the same term.
An unordered list is used to outline the ingredients and an ordered list is used to describe the steps. Here is a recipe for deliciously rich scrambled eggs. X Ordered lists use numbers. X Unordered lists use bullets. X Definition lists are used to define terminology. X Lists can be nested inside one another. You will commonly come across the following types of links: You specify which page you want to link to using the href attribute.
Where Clear link text can help visitors use when searching for the possible, your link text should find what they want. This page that you are linking to. It also helps people "hotels in New York. Browsers show links in blue with an underline by default. Every web the domain name for that site, page has its own URL. This is the and can be followed by the path web address that you would type to a specific page. If no page is into a browser if you wanted to specified, the site will display the visit that specific page.
If you have different pages of a site in different folders, then you R E S U LT can use a slightly more complex syntax to indicate where the page is in relation to the current page. You will learn more about these on the pages If you look at the download code for each chapter, you will see that the index. These are like as there are several helpful you can create links between a shorthand version of absolute shortcuts you can use to write pages without having to set up URLs because you do not need links to other pages on your own your domain name or hosting.
Folders on a website are sometimes referred to as directories. The top-level folder is known In the diagram on the right, you Web servers are usually set up as the root folder. In this can see some relationships have to return the index. The root folder contains all of the other files and The examplearts folder is a Therefore, if you enter folders for a website.
And the examplearts. If you are working with a content Instead, these systems often Editing the template file would management system, blogging use one template file for each change all of the pages that use software, or an e-commerce different type of page such as that template. Do not change system, you might not have news articles, blog posts, or any code that is not HTML or individual files for each page of products.
The URL is. The path including images in your own made up of the domain name to the logo for the site is site. On the next page, you will followed by the path to that page examplearts. The root folder contains: Each sub-directory contains: The movies section contains: They provide a shorthand way of telling the browser where to find your files. When you are linking to a page If all of the files in your site are on your own website, you do in one folder, you simply use the not need to specify the domain file name for that page.
You can use relative URLs which are a shorthand way to tell If your site is organized into the browser where a page is in separate folders or directories , relation to the current page. These links make use of the Because you do not need to same terminology borrowed repeat the domain name in each from that of family trees you link, they are also quicker to met on the previous page which write.
Nothing else is needed. When a website is live that For example, you may see the A forward slash will return the is, uploaded to a web server name of a child folder without homepage for the entire site, you may see a couple of other the name of a file. In this case and a forward slash followed techniques used that do not the web server will usually try by a file name will return that work when the files are on your to show the homepage for that file providing it is in the root local computer.
On the right you can see that an email link looks just like any other link but, when it is clicked on, the user's email program will open a new email message and address it to the person specified in the link.
R E S U LT One of the most common reasons a web page author might want a link to be opened in a new window is if it points to another website. In such cases, they hope the user will return to the window containing their site after finishing looking at the other one.
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.
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. 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: There is an email link to allow readers to contact the author of the web page.
There are also a number of links to qualified URLs. These link to various film festivals. Below this list is a link to a relative URL which is an "about" page that lives in the same directory. X If you are linking to a page within your own site, it is best to use relative links rather than qualified URLs. X You can create links to open email programs with an email address in the "to" field.
X You can use the id attribute to target elements within a page that can be linked to. There are several things to consider when selecting and preparing images for your site, but taking time to get them right will make it look more attractive and professional.
In this chapter you will learn how to: Images can be used to set the pay to use there is a list of stock If you have a page that shows tone for a site in less time than photography websites below. If Remember that all images are photographs or members of a you do not have photographs subject to copyright, and you team then putting them on a to use on your website, there can get in trouble for simply simple, consistent background are companies who sell stock taking photographs from helps them look better as images; these are images you another website.
You Be instantly recognisable www. As a website grows, keeping On a big site you might like to If you are using a content images in a separate folder add subfolders inside the images management system or blogging helps you understand how the folder.
For example, images such platform, there are usually tools site is organized. Here you can as logos and buttons might sit in built into the admin site that see an example of the files for a folder called interface, product allow you to upload images, a website; all of the images are photographs might sit in a page and the program will probably stored in a folder called images.
This is an empty domestic cat. It must carry the following two attributes: This will usually be a relative URL pointing to an image on your own site. Here you can see that the images are in a child folder called images — relative URLs were covered on pages Most browsers description of the image content graphic dividing line , then the will display the content of this so it can be understood by alt attribute should still be used attribute in a tootip when the screen reader software used by but the quotes should be left user hovers over the image.
Images often take longer to load than the HTML code that makes up the rest of the page. It is, therefore, a good idea to specify the size of the image so that the browser can render the rest of the text on the page while leaving the right amount of space for the image that is still loading.
Many species undertake The paragraph starts on a new long distance annual migrations, and many more line after the image. Many species undertake long distance annual 3: Block elements always appear on a new line. Inline elements sit within a block level element and do not start on a new line.
Block and inline elements are discussed in greater depth on pages Many species undertake long distance and new websites should use annual migrations, and many more perform shorter CSS to control the alignment of irregular journeys. Many species undertake long distance because some visual editors still annual migrations, and many more perform shorter insert this attribute when you irregular journeys.
The align attribute can take these horizontal values: When you give the align attribute a value of left, the image is placed on the left and text flows around it. When you give the align attribute a value of right, the image is placed on the right and the text flows around it.
When text flows right up to the edge of an image it can make it harder to read. You will learn how to add a gap between text and images on pages using the CSS padding and margin properties.
Many species undertake long distance annual migrations, and many more perform shorter You can see how to use CSS irregular journeys. Many species undertake long distance align vertically with the text that annual migrations, and many more perform shorter surrounds it: Many species undertake long distance annual migrations, and many more perform shorter middle irregular journeys.
The value of middle places the first line of text near the vertical middle of the image and subsequent lines of text appear under the image. The value of bottom places the first line of text near the bottom of the image and subsequent lines of text under the image.
If you would like all of the text to wrap arond the image rather than just one line of text , you should use the CSS float property discussed on pages In older code, you may see the align attribute used with the values left or right to achieve the same effect as described on the previous page , although its use is no longer recommended.
We go into greater detail on each topic over the next nine pages. If you the same width and height it will of dots known as pixels. Images choose the wrong image appear on the website. If used on the web are also made format then your image might the image is smaller than the up of tiny dots.
Resolution refers not look as sharp as it should width or height that you have to the number of dots per inch, and can make the web page specified, the image can be and most computer screens only slower to load. If the show web pages at 72 pixels image is larger than the width per inch.
So saving images at and height if you have specified, a higher resolution results in the image will take longer to images that are larger than display on the page.
The most popular tool amongst web professionals is Adobe Photoshop. In fact, professional web designers often use this software to design entire sites. The full version of Photoshop is expensive, but there is a cheaper version called Photoshop Elements which would suit the needs of most beginners.
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. 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. For example, if you have image.
When sourcing images, it OnLIne exTRA designed a page to include an is important to understand how Visit the tools section of the image that is pixels wide by you can alter the dimensions of website accompanying this pixels tall, the image you use an image; imagine that you had book to watch a video guide to should be x pixels. You designed a web page to include resizing images in Photoshop may need to use image editing an image that is pixels wide and GIMP. If your image is Example: If your image is only Example: This will create an image Result: The image will look Result: Only some images can that is quicker to download.
It is best to source images that are the correct shape if possible. The higher the resolution of the image, the larger the size of the file. JPGs, GIFs, and PNGs belong to Images appearing on computer computers display images at a a type of image format known screens are made of tiny squares resolution of 72 pixels per inch as bitmap.
They are made up of called pixels. A small segment ppi. Images in print materials lots of miniature squares. The of this photograph has been such as books and magazines resolution of an image is the magnified to show how it is are made up of tiny circles called number of squares that fit within made up of pixels. The web dots. These images are usually a 1 inch x 1 inch square area. For this image: Vector images are commonly created in programs such as Adobe Illustrator.
When an image is a line drawing Vector images are created by The advantage of creating line such as a logo, illustration, or placing points on a grid, and drawings in vector format is that diagram , designers will often drawing lines between those you can increase the dimensions create it in vector format. A color can then be of the image without affecting Vector formatted images are added to "fill in" the lines that 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. There are several tutorials about Because GIFs are not an how to do this on the web. There ideal format for displaying are also several websites that photographs, animated GIFs are allow you to upload the graphics really only suitable for simple for the individual frames and illustrations.
This can be check the size of images and achieved by right-clicking on the image and making a selection from how to download them using the pop-up menu that appears. Mac users will need to hold down the Safari. Below is a brief overview control key and click rather than right-click. View Image Info Size appears in pop-up window Download: Properties If you want to download images from a website, you can do so by Size appears in pop-up window accessing the same pop-up menu.
Please remember however that all Download: Save Image images online are subject to copyright and require explicit permission to reuse. Older browsers that do not understand HTML5 elements simply ignore the new elements and display the content of them. This is are encouraged to use CSS has its own caption. X You must always specify a src attribute to indicate the source of an image and an alt attribute to describe the content of an image. X You should save images at the size you will be using them on the web page and in the appropriate format.
For example: When representing information in a table, you need to think in terms of a grid made up of rows and columns a bit like a spreadsheet. A table represents information in a grid format. Examples of tables include financial reports, TV schedules, and sports results.
Grids allow us to understand Each block in the grid is referred complex data by referencing to as a table cell. In HTML a information on two axes. The td stands for table data. You will learn how to control the borders of tables using CSS on pages and It can take the values: 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 , I have added some CSS styles to this example so that you can see how the cells span more than one row.
You will learn how to apply these CSS styles to tables on pages , 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.
You will learn how to apply these CSS styles to tables on pages and The values for these attributes were given in pixels.
I added CSS styles to this example so that you can see the width of the table cells more clearly. If you want to control the width or spacing of tables and cells you should use CSS as shown on pages , There are it.
Each cell of the table must be a row or column. X A table is drawn out row by row. X You can make cells of a table span more than one row or column using the rowspan and colspan attributes.
HTML borrows the concept of a form to refer to different elements that allow you to collect information from visitors to your site. Whether you are adding a simple search box to your website or you need to create more complicated insurance applications, HTML forms give you a set of elements to collect data from your users.
In this chapter you will learn: The best known form on the web is probably the search box that sits right in the middle of Google's homepage. In addition to enabling users to when registering as a member search, forms also allow users of a website, when shopping to perform other functions online, and when signing up for online. You will see forms newsletters or mailing lists. AddInG TexT: Text input single-line Password input Text area multi-line Used for a single line of text such Like a single line text box but it For longer areas of text, such as as email addresses and names.
Radio buttons Checkboxes Drop-down boxes For use when a user must select When a user can select and When a user must pick one of a one of a number of options.
Submit buttons Image buttons File upload To submit data from your form Similar to submit buttons but Allows users to upload files to another web page. Ivy I vote for: It may also store the information in a database. The server creates a new You voted for Herbie Hancock. The server needs to know which piece of inputted data corresponds with which form element. In this example, the form asks for the visitor's username and also for their favorite jazz musician.
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. Its value is the URL for the page on the server that will receive the information in the form when it is submitted.
With the get method, the values With the post method the If the method attribute is not from the form are added to values are sent in what are used, the form data will be sent the end of the URL specified in known as HTTP headers. As a using the get method. The get rule of thumb you should use the method is ideal for: For example, in a login form, the server needs to know what has size been entered as the username The size attribute should not although a user could enter and what has been given as the be used on new forms.
It was more characters if they desired. Therefore, each form used in older forms to indicate control requires a name attribute. For example, a value of 3 would mentioned here because you create a box wide enough to may come across it when looking display three characters at older code.
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. R E S U LT name The name attribute indicates the name of the password input, which is sent to the server with the password the user enters. The server. You should never use topic of SSL is beyond the scope these for sending sensitive data of this book, however there are such as credit card numbers.
It should therefore have an opening and a closing tag. R E S U LT 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.
Please note: Once a radio button option and want them to be The value of each of the buttons has been selected it cannot be able to deselect it for example in a group should be different deselected. The user can only if they are indicating they agree so that the server knows which select a different option. If you to terms and conditions , you option the user has selected.
The value of this attribute is checked. Only one radio button in a group should use this attribute. When a question provides users with options for answers in the form of checkboxes, the value of the R E S U LT name attribute should be the same for all of the buttons that answer that question.
If used, its value should be checked. R E S U LT name The name attribute indicates the name of the form control being sent to the server, along with the value the user selected. The value of this option can be selected. There be shown to the user in the drop attribute should be selected.
If this attribute is not used, the first option will be shown 1. If users need to see all options value when the page loads. If there is a very long list along with the name of the control. You can select more than one option by holding size down control on a PC or command key on a Mac You can turn a drop down select while selecting different options.
R E S U LT multiple 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. 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.
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. 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 , or you can use an image for the button.
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. It can: Wrap around both the text description and the form input as shown on the first line of the example to your right. 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.
The appearance of these lines can be adjusted using CSS. Validating the contents of the form before it is sent to the server the helps: HTML5 validation, although other attribute, which can be used on browsers are expected to follow. So, some people give validate forms. HTML5 introduces new form controls to standardize the way that some information is gathered.
This will create a date input in browsers that support the new HMTL5 input types. This example shows what the date input looks like in the Opera browser. The appearance of the date input changes across different browsers. 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 a URL. Older browsers will simply treat it like a single line text box. R E S U LT placeholder 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. It uses a variety of form controls.
Different types of form control are suited to collecting different types of data. X Each form control is given a name, and the text the user types in or the values of the options they select are sent to the server. X HTML5 introduces new form elements which make it easier for visitors to fill in forms.
In this chapter, we will focus on some helpful topics that are not easily grouped together. Its purpose last with new elements and which have been highlighted , was to allow people to write attributes added and older code the elements you have seen in new markup languages.
Since removed. This meant that web users, however, have the authors are not recommended to authors had to follow some new, latest browsers installed on use them any more. XHTML was created because not need to close all tags, and it allowed authors to continue new elements and attributes will One of the key benefits of this to follow older practices with a be introduced.
At the time of change was that XHTML works less strict syntax and use some writing, the HTML5 specification seamlessly with other programs of the elements and attributes had not been completed, but that are written to create and that were going to be removed the major browser makers had process XML documents.
Vector Graphics SVG — a 1. These days, frames are very long as you endeavour to ensure rarely used and are being phased that users with older browsers In order to help web page out. There must be nothing before it, not even a space.
R E S U LT Although comments are not visible to users in the main browser window, they can be viewed by anyone who looks at the source code behind the page. On a long page you will often see comments used to indicate where sections of the page start or end, and to pass on notes to help anyone who is looking at the code understand it.
Comments can also be used around blocks of code to stop that code from being displayed in the browser. In the example on the left, the email link has been commented out. So very commonplace are these from other elements on the substances, they hardly attract attention - and page.
Its value should start with yet they vouchsafe our very existence. As you will see when you come to look at CSS in the next R E S U LT section, giving an element a unique identity allows you to style it differently than any other instance of the same element on the page.
The id attribute is known as a global attribute because it can be used on any element. To do this you can use the class attribute. Its value should describe the class it belongs to. In the example on the left, key paragraphs have a class attribute whose value is important.
The class attribute on any element can share the same value. So, in this example, the value of important could be used on headings and links, too.
By default, using these attributes In this example, CSS has been If you would like to indicate that does not affect the presentation applied to make elements with an element belongs to several of an element. It will only change a class attribute whose value classes, you can separate class their appearance if there is a CSS is important uppercase, and names with a space, as you can rule that indicates it should be elements with a class attribute see in the third paragraph in the displayed differently.
It is used to either: Contain a section of text where there is no other suitable element to differentiate it from its surrounding text 2. The content of the iframe can be any html page either located on the same server or anywhere else on the web.
There are a few attributes that you will need to know to use it: It can take one of three values: A value of 0 indicates that no border should be shown.
A value of 1 indicates that a border should be shown. 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. Some defined values for this web page. It is not visible to users but fulfills a number of purposes such as telling search engines description This contains a description about your page, who created of the page.
This description it, and whether or not it is time is commonly used by search sensitive. If the page is time engines to understand what the sensitive, it can be set to expire.
It uses attributes to carry the information. These attributes In practice, this no longer has specify properties of the entire any noticeable effect on how page. The value of the name search engines index your site. A value of noindex can be used if In the first line of the example on this page should not be added.
The content attribute is where this description is actually specified. Note that the date must be specified in the format shown. For example, the left and right angled brackets.
Therefore, if you want these There are also special codes When using escape characters, characters to appear on your that can be used to show it is important to check the page you need to use what are symbols such as copyright and page in your browser to ensure termed "escape" characters trademark, currency symbols, that the correct symbol shows also known as escape codes or mathematical characters, and up. This is because some fonts entity references.
For example, some punctuation marks. In the to identify their purpose. X The id and class attributes allow you to identify particular elements. This chapter begins by looking at how to use it in your web pages. Whether you are creating an When you create a Flash file in To view Flash, browsers need animation or a media player in the Flash authoring environment, to use a plugin an extra piece Flash, the files you put on your it is saved with the. In order to use this file browser called the Flash Player.
It has the. Flash plugin installed. The download the Flash authoring percentage of mobiles and environment from Adobe. When you export the movie tablets with it is much less.
However, now it is more this chapter will show you how downloading this tool. The Flash authoring environment The. When Flash was first released, There are several reasons why There have been laws introduced it was developed to create fewer websites are using Flash to ensure that websites are animations. The technology these days, including: At the time of when they use it and now rarely writing, Flash is still a popular consider building an entire When Apple launched the way of playing video and audio website in Flash.
Despite this, Flash does have a decision not to support Flash. Here you can see some of the changes in how animation, video, and audio are created on the web. If it can, the achieve two further benefits: The text can be accessed by by the SWFObject script. Flash movie, you could show a interact with the Flash file.
The text can be indexed by can place the alternative content a text description of the Flash search engines which are not as for users who are not able to file. The src attribute tells the browser where to find the script. This element is actually telling the SWFObject script five pieces of information, which are in the brackets: The location of the.
The width of the Flash movie: The height of the Flash movie: The minimum version of the Flash player needed to view the movie: Online, there For this reason, browsers built service such as YouTube or are even more video formats prior to generally required Vimeo. This a video into another format browser that supports this means you would need to upload is sometimes referred to as new HTML5 element and the any videos you want to show in "encoding" the video.
There are several apps available video to be encoded in different on the web that enable you to formats. You do not need to worry about you need to host the video on encoding your video since your own server and add your We will be looking at two these sites allow you to upload own player into the page. Once uploaded, they Some services will limit what Flash Video and the HTML5 automatically convert your video your video is allowed to include.
Therefore, it can Some hosted services will play cost you extra to host the videos their own adverts before your on your own site. If your video video will begin, or even overlay is hosted on a site like YouTube them over the screen as your or Vimeo, however, you do not video is playing.
You will also need to tell the Some Flash video players www. H and some video editing Some players have advanced programs export video in this You do not need the Flash features such as the ability format.
This is included in the on pages It only supports the FLV format not H 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.
Here are some of the key issues to be aware of: Therefore, controls for the player, and recent browsers, so you cannot you need to supply your video in these can vary from browser just use this one technique if you more than one format.
If the attribute is none should supply its own controls present, it turns that option on. The browser should not load for playback. If the attribute is omitted, the the video until the user presses option is turned off. The browser should just collect indicates that the video should information such as the size, start playing again once it has first frame, track list, and ended. Otherwise, it will download some of the video to see if it can play the file which will take time and bandwidth.
Or you may work you would only need to provide the other way around. You would not need of the video for browsers it in FLV format as well. You that have different sized will see this demonstrated in screens so you can provide lower resolution content for the example at the end of the handheld devices chapter.
As with video, there are three routes commonly taken: Browsers that provide a player which you can from simple buttons that play support this element provide embed in your page, such as one track to complex players their own controls — much as SoundCloud.
Some people ask how to get This is actually quite difficult This is why some sites offer music to play consistently even to achieve and would rely on audio players in new windows, when visitors move from one techniques like using AJAX to so that listeners are not page to another on a website.
For it to visitors choose to play audio. Firefox 3. The video has been encoded in H and WebM formats to reach as many browsers as possible. If the browser does not support HTML5 video or Flash, then a plain text message will be shown to the user.
X Flash is not supported on iPhone or iPad. CSS allows you to create rules that specify how the content of an element should appear. For example, you can specify that the background of the page is cream, all paragraphs should appear in gray using the Arial typeface, or that all level one headings should be in a blue, italic, Times typeface. Once you have learned how to write a CSS rule, learning CSS mostly involves learning the different properties you can use.
So this chapter will: On this page, you can see a basic HTML page. On the right hand page, you can see the same HTML page, but I have added outlines to each of the elements so that you can see how CSS will treat each element as if it lives inside its own box.
In this example, block level elements are shown with red borders, and inline elements have green borders. 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. Italics, bold, uppercase, and forms. These rules govern how the content of specified elements should be displayed. A CSS rule contains two parts: The same rule can apply to the selector should be styled.
You can specify several properties in one declaration, each separated by a semi-colon. Arial; color: For example, color, font, properties.
For example, if you typeface, in a yellow color. This example uses two documents: They are usually described as href early, second early and maincrop. For example, some authors use one CSS file to control the presentation such as fonts and colors and a second to control the layout.
They are usually described as an external CSS style sheet. Here is an example a style attribute on most of to that one element. You should that changes the color of the text the elements that appear in the avoid using this attribute in any in a single paragraph red: Here you can see the second i selector takes CSS precedence over the first. In this color: It early and maincrop potatoes. Arial, Verdana, sans-serif; border properties; they are not color: If padding: When building a website there are several advantages to placing your CSS rules in a separate style sheet.
All of your web pages can share Therefore, once the user has the one CSS style sheet, rather the same style sheet. If you want to make a will be easier to read and edit your site to link to the same CSS change to how your site appears, because it does not have lots of document. This means that the you only need to edit the one CSS rules in the same document.
For example, practice to have the content of results in less code and smaller you can change the style of the site separated from the rules HTML pages. Again, than a separate document. This consider it better practice to most authors consider it better is simply to save you opening keep the CSS in a separate file. Work on CSS3 has been ongoing but the major browsers have already started to implement it.
In the same way that there have Browsers did not implement all This is mentioned when it is been several versions of HTML, CSS features at once, so some likely to affect you, along with there have also been different older browsers do not support notes where CSS properties versions of CSS.
But finding and squashing those bugs is easy when you know how Before launching any new site, Using these tools, it is a good Some common browser bugs are it is important to test it in more idea to check the site on discussed in this book, but there than one browser, because there different operating systems PC, are many smaller bugs that only can be slight differences in how Mac, and Linux and in older occur in rare situations, or on old browsers display the pages.
You do not need lots of If you come across a CSS bug, computers to test your site, as When you look at your site in you can use your favorite search there are online tools to show more than one browser, you engine to try and find a solution.
X Rules are made up of selectors that specify the elements the rule applies to and declarations that indicate what these elements should look like. X Different types of selectors allow you to target your rules at different elements. X Declarations are made up of two parts: For example, the font-family property sets the choice of font, and the value arial specifies Arial as the preferred typeface. In this chapter we will look at: DarkCyan We look at these three different ways of specifying colors on the next double-page spread.
Anything long document into sections. RGB values, hex codes, and color names covered on the next page. We have also used the padding property to separate the text from the edges of the boxes. This makes it easier to read and you will learn more about this property on page To find the color you want, you can use a color picker. Computer monitors are made up of thousands of tiny squares called pixels if you look very closely at your monitor you should be able to see them.
When the screen is not turned on, it's black because it's not emitting any light. When it's on, each pixel can be a different color, creating a picture. The color of every pixel on the screen is expressed in terms of a mix of red, green, and blue — just like on a television screen. The hex value is provided next to the pound or hash symbol. There is also a good color picking tool at: However, between 0 and The of the green is color is MediumAquaMarine.
Technically speaking of gray in a color. At maximum to how much black is in a color. At minimum would be no black in the color. A lack of contrast is particularly If you want people to read a lot You can reduce contrast by a problem for those with of text on your page, however, using dark gray text on a white visual impairments and color then too much contrast can background or an off-white text blindness.
It also affects those with poor monitors and sunlight on their If text is reversed out a light color on a dark background , you screens which is increasingly can increase the height between lines and the weight of the font common as people use handheld to make it easier to read.
To check contrast there is a handy online tool at: This value is known as an alpha value and is a number between 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. 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. In HSL colors, hue is often gray in a color. Saturation is white lightness or black represented as a color circle represented as a percentage.
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. C8C8C8; The value of the property starts background-color: The hsla color property allows you to specify color properties using hue, saturation, and lightness as above, and adds a fourth value which represents Because older browsers do not This provides a fallback because transparency just like the rgba recognize HSL and HSLA values, if there are two rules that apply property.
The a stands for: This means that if the This is expressed as a color name. This should appear browser understands HSL and number between 0 and 1. Both use color names. 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 X There are three ways to specify colors in CSS: RGB values, hex codes, and color names.
X Color pickers can help you find the color you want. X It is important to ensure that there is enough contrast between any text and the background color otherwise people will not be able to read your content. It is known as RGBA. It is known as HSLA. As we look through these properties I will also give you some design tips on how to display your type.
These details are have a much cleaner design. Non-monospace fonts known as serifs. So, if the text is small, used for code because they align passages of text because they sans-serif fonts can be clearer nicely, making the text easier to were considered easier to read.
Oblique versions of the font, letters are the amount of white space and font styles take the normal style thinner and closer together. In expanded versions they are thicker and further apart. Times Verdana Times New Roman Helvetica As a result, sites often use a small set of typefaces that are installed on most computers shown above.
Jon Duckett. Joining the professional web designers and programmers are new audiences who need to know a little bit of code at work update a content management system or e-commerce store and those who want to make their personal blogs more attractive. Many books teaching HTML and CSS are dry and only written for those who want to become programmers, which is why this book takes an entirely new approach. This educational book is one that you will enjoy picking up, reading, then referring back to.
Request permission to reuse content from this site. Undetected country. NO YES. Read an Excerpt Excerpt: PDF Excerpt: Selected type: Added to Your Shopping Cart.
Evaluation Copy Request an Evaluation Copy.
Instructor View Instructor Companion Site. Original Price: