Html and CSS

7 Forms XX How to collect information from visitors XX Different kinds of form controls XX New HTML5 form controls

Traditionally, the term 'form' has referred to a printed document that contains spaces for you to fill in information. 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: ●● How to create a form on your website ●● The different tools for collecting data ●● New HTML5 form controls 145 FORMS

FORMS 146

Why Forms? 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. 147 FORMS

Form Controls There are several types of form controls that you can use to collect information from visitors to your site. ADDING TEXT: Password input Text area (multi-line) Text input (single-line) Like a single line text box but it For longer areas of text, such as Used for a single line of text such masks the characters entered. messages and comments. as email addresses and names. Making Choices: Checkboxes Drop-down boxes Radio buttons When a user can select and When a user must pick one of a For use when a user must select unselect one or more options. number of options from a list. one of a number of options. Submitting Forms: Image buttons Uploading Files: Submit buttons Similar to submit buttons but File upload To submit data from your form they allow you to use an image. Allows users to upload files to another web page. (e.g. images) to a website. FORMS 148

How Forms Work A user fills in a form and then presses a button to submit the information to the server. 1 The name of each form control is sent to the VOTE FOR YOUR FAVORITE JAZZ server along with the MUSICIAN OF ALL TIME value the user enters or selects. Username: Ivy 2 I vote for: Ella Fitzgerald Herbie Hancock 3 John Coltrane Miles Davis The server processes Thelonius Monk the information using a programming language Submit such as PHP, C#, VB.net, or Java. It may also store the information in a database. Thank you, Ivy! 4 You voted for Herbie Hancock. The server creates a new 149 FORMS page to send back to the browser based on the information received.

A form may have several form controls, each gathering different information. The server needs to know which piece of inputted data corresponds with which form element. Name username=Ivy Value To differentiate between various pieces of inputted data, information is sent from the browser to the server using name/value pairs. In this example, the form asks for the visitor's username and also for their favorite jazz musician. The name/value pairs sent to the server are: username=Ivy vote=Herbie If the form control allows the If the form control allows you user to enter text, then the value to choose from a fixed set of of the form control is whatever answers (e.g. radio buttons, the user has typed in. checkboxes or a drop down list), the web page author will add code that gives each option an automatic value. 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. FORMS 150

Form Structure <form> chapter-07/form-structure.html HTML Form controls live inside a <form action=\"http://www.example.com/subscribe.php\" <form> element. This element method=\"get\"> should always carry the action <p>This is where the form controls will appear. attribute and will usually have a </p> method and id attribute too. </form> action R e s u lt Every <form> element requires With the post method the If the method attribute is not an action attribute. Its value values are sent in what are used, the form data will be sent is the URL for the page on the known as HTTP headers. As a using the get method. server that will receive the rule of thumb you should use the information in the form when it post method if your form: id is submitted. ●● allows users to upload a file We look at the id attribute on method page 183, but the value is used to ●● is very long identify the form distinctly from Forms can be sent using one of other elements on the page (and two methods: get or post. ●● contains sensitive data is often used by scripts — such (e.g. passwords) as those that check you have With the get method, the values entered information into fields from the form are added to ●● adds information to, or that require values). the end of the URL specified in deletes information from, a the action attribute. The get database method is ideal for: ●● short forms (such as search boxes) ●● when you are just retrieving data from the web server (not sending information that should be added to or deleted from a database) 151 FORMS

TexAtrItnipculet HTML chapter-07/text-input.html <input> <form action=\"http://www.example.com/login.php\"> The <input> element is used <p>Username: to create several different form <input type=\"text\" name=\"username\" size=\"15\" controls. The value of the type maxlength=\"30\" /> attribute determines what kind </p> of input they will be creating. </form> type=\"text\" R e s u lt When the type attribute has a size (although a user could enter value of text, it creates a single- more characters if they desired). line text input. The size attribute should not be used on new forms. It was In any new forms you write, name used in older forms to indicate CSS should be used to control the width of the text input the width of form elements. When users enter information (measured by the number of The size attribute is only into a form, the server needs to characters that would be seen). mentioned here because you know which form control each may come across it when looking piece of data was entered into. For example, a value of 3 would at older code. (For example, in a login form, the create a box wide enough to server needs to know what has display three characters 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 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. FORMS 152

Password Input <input> chapter-07/password-input.html HTML type=\"password\" <form action=\"http://www.example.com/login.php\"> <p>Username: When the type attribute has <input type=\"text\" name=\"username\" size=\"15\" a value of password it creates maxlength=\"30\" /> a text box that acts just like a </p> single-line text input, except <p>Password: the characters are blocked out. <input type=\"password\" name=\"password\" size=\"15\" They are hidden in this way so maxlength=\"30\" /> that if someone is looking over </p> the user's shoulder, they cannot </form> see sensitive data such as passwords. R e s u lt name Although the password is hidden For full security, the server needs on the screen, this does not to be set up to communicate The name attribute indicates mean that the data in a password with users' browsers using the name of the password input, control is sent securely to the Secure Sockets Layer (SSL). The which is sent to the server with server. You should never use topic of SSL is beyond the scope the password the user enters. these for sending sensitive data of this book, however there are such as credit card numbers. links to learn more about it on size, maxlength the accompanying website. It can also carry the size and maxlength attributes like the the single-line text input. 153 FORMS

TexAtrAtircelae HTML chapter-07/textarea.html <textarea> <form action=\"http://www.example.com/comments.php\"> The <textarea> element <p>What did you think of this gig?</p> is used to create a mutli-line text input. Unlike other input <textarea name=\"comments\" cols=\"20\" rows=\"4\">Enter elements this is not an empty your comments...</textarea> element. It should therefore have </form> an opening and a closing tag. R e s u lt Any text that appears between the opening <textarea> and If you are creating a new form, The cols attribute indicates closing </textarea> tags will you should use CSS to control how wide the text area should appear in the text box when the the width and height of a be (measured in numbers of page loads. <textarea>. However, if you are characters). The rows attribute looking at older code, you may indicates how many rows If the user does not delete any see the cols and rows attributes the text area should take up text between these tags, this used with this element. vertically. 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.) FORMS 154

Radio Button <input> chapter-07/radio-button.html HTML type=\"radio\" <form action=\"http://www.example.com/profile.php\"> <p>Please select your favorite genre: Radio buttons allow users to pick <br /> just one of a number of options. <input type=\"radio\" name=\"genre\" value=\"rock\" name checked=\"checked\" /> Rock <input type=\"radio\" name=\"genre\" value=\"pop\" /> The name attribute is sent to Pop the server with the value of the <input type=\"radio\" name=\"genre\" value=\"jazz\" /> option the user selects. When Jazz a question provides users with </p> options for answers in the form </form> of radio buttons, the value of the name attribute should be the R e s u lt same for all of the radio buttons used to answer that question. Please note: Once a radio button option and want them to be has been selected it cannot be able to deselect it (for example value deselected. The user can only if they are indicating they agree select a different option. If you to terms and conditions), you The value attribute indicates are only allowing the user one should use a checkbox instead. 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 The 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. 155 FORMS

ChAecrktibcolxe HTML chapter-07/checkbox.html <input> <form action=\"http://www.example.com/profile.php\"> type=\"checkbox\" <p>Please select your favorite music service(s): <br /> Checkboxes allow users to select (and unselect) one or more <input type=\"checkbox\" name=\"service\" options in answer to a question. value=\"itunes\" checked=\"checked\" /> iTunes <input type=\"checkbox\" name=\"service\" name value=\"lastfm\" /> Last.fm <input type=\"checkbox\" name=\"service\" The name attribute is sent to value=\"spotify\" /> Spotify the server with the value of the </p> option(s) the user selects. When </form> a question provides users with options for answers in the form R e s u lt of checkboxes, the value of the name attribute should be the same for all of the buttons that answer that question. value The value attribute indicates the value sent to the server if this checkbox is checked. checked The checked attribute indicates that this box should be checked when the page loads. If used, its value should be checked. FORMS 156

Drop Down List Box <select> chapter-07/drop-down-list-box.html HTML A drop down list box (also <form action=\"http://www.example.com/profile.php\"> known as a select box) allows <p>What device do you listen to music on?</p> users to select one option from a <select name=\"devices\"> drop down list. <option value=\"ipod\">iPod</option> The <select> element is used <option value=\"radio\">Radio</option> to create a drop down list box. It <option value=\"computer\">Computer</option> contains two or more <option> </select> elements. </form> name R e s u lt The name attribute indicates the selected The function of the drop down name of the form control being list box is similar to that of the sent to the server, along with the The selected attribute can be radio buttons (in that only one value the user selected. used to indicate the option that option can be selected). There should be selected when the are two key factors in choosing <option> page loads. The value of this which to use: attribute should be selected. The <option> element is used 1. If users need to see all options to specify the options that the If this attribute is not used, at a glance, radio buttons are user can select from. The words the first option will be shown better suited. between the opening <option> when the page loads. If the user and closing </option> tags will does not select an option, then 2. If there is a very long list be shown to the user in the drop the first item will be sent to of options (such as a list of down box. the server as the value for this countries), drop down list boxes control. work better. value 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. 157 FORMS

Multiple SeleAcrttiBcolxe HTML chapter-07/multiple-select-box.html <select> <form action=\"http://www.example.com/profile.php\"> size <p>Do you play any of the following instruments? (You can select more than one option by holding You can turn a drop down select down control on a PC or command key on a Mac box into a box that shows more while selecting different options.)</p> than one option by adding the <select name=\"instruments\" size=\"3\" size attribute. Its value should multiple=\"multiple\"> be the number of options you <option value=\"guitar\" selected=\"selected\"> want to show at once. In the Guitar</option> example you can see that three <option value=\"drums\">Drums</option> of the four options are shown. <option value=\"keyboard\" selected=\"selected\">Keyboard</option> Unfortunately, the way that <option value=\"bass\">Bass</option> browsers have implemented this </select> attribute is not perfect, and it </form> should be tested throroughly if used (in particular in Firefox and R e s u lt Safari on a Mac). 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. FORMS 158

File Input Box <input> chapter-07/file-input-box.html HTML If you want to allow users to <form action=\"http://www.example.com/upload.php\" upload a file (for example an method=\"post\"> image, video, mp3, or a PDF), <p>Upload your song in MP3 format:</p> you will need to use a file input <input type=\"file\" name=\"user-song\" /><br /> box. <input type=\"submit\" value=\"Upload\" /> </form> type=\"file\" R e s u lt 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. 159 FORMS

Submit ABurtitcolne HTML chapter-07/submit-button.html <input> <form action=\"http://www.example.com/subscribe.php\"> type=\"submit\" <p>Subscribe to our email list:</p> <input type=\"text\" name=\"email\" /> The submit button is used to <input type=\"submit\" name=\"subscribe\" send a form to the server. value=\"Subscribe\" /> </form> name R e s u lt It can use a name attribute but it does not need to have one. value 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. FORMS 160

Image Button <input> chapter-07/image-button.html HTML type=\"image\" <form action=\"http://www.example.org/subscribe.php\"> <p>Subscribe to our email list:</p> If you want to use an image for the submit button, you can give <input type=\"text\" name=\"email\" /> the type attribute a value of <input type=\"image\" src=\"images/subscribe.jpg\" image. The src, width, height, width=\"100\" height=\"20\" /> and alt attributes work just </form> like they do when used with the <img> element (which we saw R e s u lt on pages 99-100). 161 FORMS

Button &Ahritdidcelne Controls HTML chapter-07/button-and-hidden-controls.html <button> <form action=\"http://www.example.com/add.php\"> The <button> element was <button><img src=\"images/add.gif\" alt=\"add\" introduced to allow users more width=\"10\" height=\"10\" /> Add</button> control over how their buttons <input type=\"hidden\" name=\"bookmark\" appear, and to allow other value=\"lyrics\" /> elements to appear inside the </form> button. R e s u lt 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. FORMS 162

Labelling Form Controls <label> chapter-07/labelling-form-controls.html HTML When introducing form controls, <label>Age: <input type=\"text\" name=\"age\" /></label> the code was kept simple by <br/ > indicating the purpose of each Gender: one in text next to it. However, <input id=\"female\" type=\"radio\" name=\"gender\" each form control should have value=\"f\"> its own <label> element as this <label for=\"female\">Female</label> makes the form accessible to <input id=\"male\" type=\"radio\" name=\"gender\" vision-impaired users. value=\"m\"> <label for=\"male\">Male</label> The <label> element can be used in two ways. It can: R e s u lt 1. Wrap around both the text id attributes can be used on any As a rule of thumb, here are the description and the form input form control. When a <label> best places to place labels on (as shown on the first line of the element is used with a checkbox form controls. example to your right). or radio button, users can click on either the form control or the Above or to the left: 2. Be kept separate from the label to select. The expanded ●● Text inputs form control and use the for clickable area makes the form ●● Text areas attribute to indicate which form easier to use. The position of the ●● Select boxes control it is a label for (as shown label is very important. If users ●● File uploads with the radio buttons). do not know where to enter information or what information To the right: for to enter, they are less likely to ●● Individual checkboxes use the form correctly. ●● Individual radio buttons The for attribute states which form control the label belongs to. Note how the radio buttons use the id attribute. The value of the id attribute uniquely identifies an element from all other elements on a page. (The id attribute is covered on page 183.) 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 163 FORMS

GroupinAgrFtoicrlme Elements HTML chapter-07/grouping-form-elements.html <fieldset> <fieldset> You can group related form <legend>Contact details</legend> controls together inside the <label>Email:<br /> <fieldset> element. This is <input type=\"text\" name=\"email\" /></label><br /> particularly helpful for longer <label>Mobile:<br /> forms. <input type=\"text\" name=\"mobile\" /></label><br /> <label>Telephone:<br /> Most browsers will show the <input type=\"text\" name=\"telephone\" /></label> fieldset with a line around </fieldset> the edge to show how they are related. The appearance of these R e s u lt 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. FORMS 164

HTML5: Form Validation You have probably seen forms chapter-07/html5-form-validation.html HTML on the web that give users messages if the form control has <form action=\"http://www.example.com/login/\" not been filled in correctly; this is method=\"post\"> known as form validation. <label for=\"username\">Username:</label> <input type=\"text\" name=\"username\" Traditionally, form validation required=\"required\" /></title><br /> has been performed using <label for=\"password\">Password:</label> JavaScript (which is beyond the <input type=\"password\" name=\"password\" scope of this book). But HTML5 required=\"required\" /> is introducing validation and <input type=\"submit\" value=\"Submit\" /> leaving the work to the browser. </form> Validation helps ensure the R e s u lt user enters information in a form that the server will be able At the time of writing, only An example of HTML5 form to understand when the form Chrome and Opera supported validation is the required is submitted. Validating the HTML5 validation, although other attribute, which can be used on contents of the form before it is browsers are expected to follow. any form element that the user sent to the server the helps: In order to support older browsers is expected to fill in. This HTML5 (that do not understand HTML5), attribute does not need a value, ●● Reduce the amount of work web page authors are likely to but in HTML 4 all attributes must the server has to do continue using JavaScript to have a value. So, some people give validate forms. this attribute a value of required. ●● Enables users to see if there are problems with the form faster than if validation were performed on the server. 165 FORMS

HTML5: DatAerItnipculet HTML chapter-07/html5-date-input.html <input> <form action=\"http://www.example.com/bookings/\" Many forms need to gather method=\"post\"> information such as dates, email <label for=\"username\">Departure date:</label> addresses, and URLs. This has <input type=\"date\" name=\"depart\" /> traditionally been done using <input type=\"submit\" value=\"Submit\" /> text inputs. </form> HTML5 introduces new form R e s u lt 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. 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. This example shows what the date input looks like in the Opera browser. The appearance of the date input changes across different browsers. FORMS 166

HTML5: Email & URL Input <input> chapter-07/html5-email-input.html HTML HTML5 has also introduced <form action=\"http://www.example.org/subscribe.php\"> inputs that allow visitors to <p>Please enter your email address:</p> enter email addresses and URLs. <input type=\"email\" name=\"email\" /> Browsers that do not support <input type=\"submit\" value=\"Submit\" /> these input types will just treat </form> them as text boxes. R e s u lt type=\"email\" chapter-07/html5-url-input.html HTML If you ask a user for an email address, you can use the email <form action=\"http://www.example.org/profile.php\"> input. Browsers that support <p>Please enter your website address:</p> HTML5 validation will check <input type=\"url\" name=\"website\" /> that the user has provided <input type=\"submit\" value=\"Submit\" /> information in the correct format </form> of an email address. Some smart phones also optimize their R e s u lt keyboard to display the keys you are most likely to need when entering an email address (such as the @ symbol). 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. 167 FORMS

HTML5: SearcAhrItnipculet HTML chapter-07/html5-search-input.html <input> <form action=\"http://www.example.org/search.php\"> If you want to create a single <p>Search:</p> line text box for search queries, <input type=\"search\" name=\"search\" /> HTML5 provides a special type <input type=\"submit\" value=\"Search\" /> of input for that purpose. </form> type=\"search\" R e s u lt If you want to create a single HTML chapter-07/html5-placeholder.html line text box for search queries, HTML5 provides a special <form action=\"http://www.example.org/search.php\"> search input. <p>Search:</p> <input type=\"search\" name=\"search\" To create the HTML5 search box placeholder=\"Enter keyword\" /> the <input> element should <input type=\"submit\" value=\"Search\" /> have a type attribute whose </form> value is search. Older browsers will simply treat it like a single R e s u lt 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 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. FORMS 168

169 FORMS

Example FORMS This example shows a feedback and newsletter sign-up form. It uses a variety of form controls. 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. FORMS 170

Example FORMS <html> <head> <title>Forms</title> </head> <body> <form action=\"http://www.example.com/review.php\" method=\"get\"> <fieldset> <legend> Your Details: </legend> <label> Name: <input type=\"text\" name=\"name\" size=\"30\" maxlength=\"100\"> </label> <br /> <label> Email: <input type=\"email\" name=\"email\" size=\"30\" maxlength=\"100\"> </label> <br /> </fieldset> <br /> <fieldset> <legend> Your Review: </legend> <p> <label for=\"hear-about\"> How did you hear about us? </label> <select name=\"referrer\" id=\"hear-about\"> <option value=\"google\">Google</option> <option value=\"friend\">Friend</option> <option value=\"advert\">Advert</option> <option value=\"other\">Other</option> </select> </p> <p> 171 FORMS

Example FORMS Would you visit again? <br /> <label> <input type=\"radio\" name=\"rating\" value=\"yes\" /> Yes </label> <label> <input type=\"radio\" name=\"rating\" value=\"no\" /> No </label> <label> <input type=\"radio\" name=\"rating\" value=\"maybe\" /> Maybe </label> </p> <p> <label for=\"comments\"> Comments: </label> <br /> <textarea rows=\"4\" cols=\"40\" id=\"comments\"> </textarea> </p> <label> <input type=\"checkbox\" name=\"subscribe\" checked=\"checked\" /> Sign me up for email updates </label> <br /> <input type=\"submit\" value=\"Submit review\" /> </fieldset> </form> </body> </html> FORMS 172



Summary FORMS XX Whenever you want to collect information from visitors you will need a form, which lives inside a <form> element. XX Information from a form is sent in name/value pairs. XX 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. XX HTML5 introduces new form elements which make it easier for visitors to fill in forms.



8 Extra Markup XX Specifying different versions of HTML XX Identifying and grouping elements XX Comments, meta information and iframes

At this point, we have covered the main tags that fit nicely into groups and sections. In this chapter, we will focus on some helpful topics that are not easily grouped together. You will learn about: ●● The different versions of HTML and how to indicate which version you are using ●● How to add comments to your code ●● Global attributes, which are attributes that can be used on any element, including the class and id attributes ●● Elements that are used to group together parts of the page where no other element is suitable ●● How to embed a page within a page using iframes ●● How to add information about the web page using the <meta> element ●● Adding characters such as angled brackets and copyright symbols 177 EXTRA MARKUP

EXTRA MARKUP 178

The Evolution of HTML Since the web was first created, there have been several different versions of HTML. Each new version was designed HTML 4 XHTML 1.0 to be an improvement on the last (with new elements and Released 1997 Released 2000 attributes added and older code removed). With the exception of a few In 1998, a language called XML elements added in HTML5 was published. Its purpose There have also been several (which have been highlighted), was to allow people to write versions of each browser used to the elements you have seen in new markup languages. Since view web pages, each of which this book were all available in HTML was the most widely used implements new code. Not all HTML 4. markup language around, it was web users, however, have the decided that HTML 4 should be latest browsers installed on Although HTML 4 had some reformulated to follow the rules their computers, which means presentational elements to of XML and it was renamed that not everyone will be able to control the appearance of pages, XHTML. This meant that view all of the latest features and authors are not recommended to authors had to follow some new, markup. use them any more. (Examples more strict rules about writing include the <center> element markup. For example: Where you should be for centering content on a particularly aware of browsers page, <font> for controlling ●● Every element needed a not supporting certain features, the appearance of text, and closing tag (except for empty I have made a note of this (as <strike> to put a line through elements such as <img />). you have seen with some of the the text — all of these can be HTML5 elements introduced in achieved with CSS instead.) ●● Attribute names had to be in the Forms chapter — and as you lowercase. will see in the CSS chapters). ●● 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. 179 EXTRA MARKUP

The examples in this book all The transitional version of HTML5 follow these strict rules of XML. XHTML was created because it allowed authors to continue Released 2000 One of the key benefits of this to follow older practices (with a change was that XHTML works less strict syntax) and use some In HTML5, web page authors do seamlessly with other programs of the elements and attributes not need to close all tags, and that are written to create and that were going to be removed new elements and attributes will process XML documents. from future versions of HTML. be introduced. At the time of writing, the HTML5 specification It could also be used with other There was also a third version had not been completed, but data formats such as Scalable of XHTML 1.0 called XHTML the major browser makers had Vector Graphics (SVG) — a 1.0 Frameset, which allowed started to implement many of graphical language written in web page authors to partition the new features, and web page XML, MathML (used to mark a browser window into several authors were rapidly adopting up mathematical formulae), and \"frames,\" each of which would the new markup. CML (used to mark up chemical hold a different HTML page. formulae). These days, frames are very Despite the fact that HTML5 rarely used and are being phased is not yet completed, you can In order to help web page out. safely take advantage of the authors move to this new syntax, new features of the language as two main flavors of XHTML 1.0 long as you endeavour to ensure were created: that users with older browsers ●● Strict XHTML 1.0, where will be able to view your pages (even though some of the extra authors had to follow the rules features will not be visible to to the letter them). ●● Transitional XHTML 1.0, where authors could still use presentational elements (such as <center> and <font>). EXTRA MARKUP 180

DOCTYPEs Because there have been HTML5 HTML several versions of HTML, each web page should begin with a <!DOCTYPE html> DOCTYPE declaration to tell a browser which version of HTML HTML 4 the page is using (although browsers usually display the <!DOCTYPE html PUBLIC page even if it is not included). \"-//W3C//DTD HTML 4.01 Transitional//EN\" We will therefore be including \"http://www.w3.org/TR/html4/loose.dtd\"> one in each example for the rest of the book. Transitional XHTML 1.0 As you will see when we come to <!DOCTYPE html PUBLIC look at CSS and its box model on \"-//W3C//DTD XHTML 1.0 Transitional//EN\" page 316, the use of a DOCTYPE \"http://www.w3.org/TR/xhtml1/DTD/ can also help the browser to xhtml1-transitional.dtd\"> render a page correctly. Strict XHTML 1.0 Because XHTML was written in XML, you will sometimes <!DOCTYPE html PUBLIC see pages that use the XHTML \"-//W3C//DTD XHTML 1.0 Strict//EN\" strict DOCTYPE start with \"http://www.w3.org/TR/xhtml1/DTD/ the optional XML declaration. xhtml1-strict.dtd\"> Where this is used, it should be the first thing in a document. XML Declaration There must be nothing before it, not even a space. <?xml version=\"1.0\" ?> 181 EXTRA MARKUP

Comments AinrtHiTcMleL HTML chapter-08/co m m ents-in-ht ml.ht ml <!-- --> <!-- start of introduction --> If you want to add a comment <h1>Current Exhibitions</h1> to your code that will not be <h2>Olafur Eliasson</h2> visible in the user's browser, you <!-- end of introduction --> can add the text between these <!-- start of main text --> characters: <p>Olafur Eliasson was born in Copenhagen, Denmark in 1967 to Icelandic parents.</p> <!-- comment goes here --> <p>He is known for sculptures and large-scale installation art employing elemental materials It is a good idea to add such as light, water, and air temperature to comments to your code because, enhance the viewer's experience.</p> no matter how familiar you <!-- end of main text --> are with the page at the time <!-- of writing it, when you come <a href=\"mailto:[email protected]\">Contact</a> back to it later (or if someone --> else needs to look at the code), comments will make it much R e s u lt easier to understand. 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. EXTRA MARKUP 182

ID Attribute Every HTML element can carry chapter-08/id-attribute.html HTML the id attribute. It is used to uniquely identify that element <p>Water and air. 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.</p> a letter or an underscore (not a <p id=\"pullquote\">Every time I view the sea I feel number or any other character). a calming sense of security, as if visiting my It is important that no two ancestral home; I embark on a voyage of seeing. elements on the same page </p> have the same value for their id <p>Mystery of mysteries, water and air are right attributes (otherwise the value is there before us in the sea.</p> no longer unique). R e s u lt As you will see when you come to look at CSS in the next section, giving an element a unique identity allows you to style it differently than any other instance of the same element on the page. For example, you might want to assign one paragraph within the page (perhaps a paragraph containing a pull quote) a different style than all of the other paragraphs. In the example on the right, the paragraph with the id attribute whose value is pullquote is made uppercase using CSS. If you go on to learn about JavaScript (a language that allows you to add interactivity to your pages), id attributes can be used to allow the script to work with that particular element. The id attribute is known as a global attribute because it can be used on any element. 183 EXTRA MARKUP

Class AttArritbiuctle HTML chapter-08/class-attribute.html Every HTML element can also carry a class attribute. <p class=\"important\">For a one-year period from Sometimes, rather than uniquely November 2010, the Marugame Genichiro-Inokuma identifying one element within Museum of Contemporary Art (MIMOCA) will host a a document, you will want a cycle of four Hiroshi Sugimoto exhibitions.</p> way to identify several elements <p>Each will showcase works by the artist as being different from the thematically contextualized under the headings other elements on the page. \"Science,\" \"Architecture,\" \"History\" and For example, you might have \"Religion\" so as to present a comprehensive some paragraphs of text that panorama of the artist's oeuvre.</p> contain information that is more <p class=\"important admittance\">Hours: 10:00 – 18:00 important than others and want (No admittance after 17:30)</p> to distinguish these elements, or you might want to differentiate R e s u lt between links that point to other pages on your own site and links that point to external sites. 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 an element belongs to several of an element. It will only change applied to make elements with classes, you can separate class their appearance if there is a CSS names with a space, as you can rule that indicates it should be a class attribute whose value see in the third paragraph in the displayed differently. is important uppercase, and example above. elements with a class attribute whose value is admittance red. EXTRA MARKUP 184

Block Elements Some elements will always chapter-08/block-elements.html HTML appear to start on a new line in the browser window. These are <h1>Hiroshi Sugimoto</h1> known as block level elements. <p>The dates for the ORIGIN OF ART exhibition are as follows:</p> Examples of block elements are <ul> <h1>, <p>, <ul>, and <li>. <li>Science: 21 Nov - 20 Feb 2010/11</li> <li>Architecture: 6 Mar - 15 May 2011</li> <li>History: 29 May - 21 Aug 2011</li> <li>Religion: 28 Aug - 6 Nov 2011</li> </ul> R e s u lt 185 EXTRA MARKUP

Inline ElAermteincltes HTML chapter-08/inline-elements.html Some elements will always appear to continue on the Timed to a single revolution of the planet around same line as their neighbouring the sun at a 23.4 degrees tilt that plays out the elements. These are known as rhythm of the seasons, this <em>Origins of Art</em> inline elements. cycle is organized around four themes: <b>science, architecture, history</b> and <b>religion</b>. Examples of inline elements are <a>, <b>, <em>, and <img>. R e s u lt EXTRA MARKUP 186

Grouping Text & Elements In a Block <div> chapter-08/grouping-block-elements.html HTML The <div> element allows you to <div id=\"header\"> group a set of elements together <img src=\"images/logo.gif\" alt=\"Anish Kapoor\" /> in one block-level box. <ul> <li><a href=\"index.html\">Home</a></li> For example, you might create <li><a href=\"biography.html\">Biography</a></li> a <div> element to contain all <li><a href=\"works.html\">Works</a></li> of the elements for the header <li><a href=\"contact.html\">Contact</a></li> of your site (the logo and the </ul> navigation), or you might create </div><!-- end of header --> a <div> element to contain comments from visitors. R e s u lt In a browser, the contents of Since there may be several This allows you to clearly see the <div> element will start on other elements inside a <div> which opening tag it is supposed a new line, but other than this element, it can be helpful to add to correspond to, as shown at it will make no difference to the a comment after the closing the end of the example here. presentation of the page. </div> tag. 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. It can also make it easier to follow your code if you have used <div> elements to hold each section of the page. 187 EXTRA MARKUP

GroupingATretxictl&e Elements Inline HTML chapter-08/grouping-inline-elements.html <span> <p>Anish Kapoor won the Turner Prize in 1991 and The <span> element acts like exhibited at the <span class=\"gallery\">Tate an inline equivalent of the <div> Modern</span> gallery in London in 2003.</p> element. It is used to either: R e s u lt 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 EXTRA MARKUP 188

IFrames <iframe> chapter-08/iframes.html HTML An iframe is like a little window <iframe that has been cut into your width=\"450\" page — and in that window you height=\"350\" can see another page. The term src=\"http://maps.google.co.uk/maps?q=moma+new+york iframe is an abbreviation of inline &amp;output=embed\"> frame. </iframe> One common use of iframes R e s u lt (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). An iframe is created using the <iframe> element. There are a few attributes that you will need to know to use it: src The src attribute specifies the URL of the page to show in the frame. height The height attribute specifies the height of the iframe in pixels. width The width attribute specifies the width of the iframe in pixels. 189 EXTRA MARKUP

Article HTML chapter-08/iframes-continued.html scrolling <iframe The scrolling attribute will src=\"http://maps.google.co.uk/maps?q=moma+new+york not be supported in HTML5. In &amp;output=embed\" HTML 4 and XHTML, it indicates width=\"450\" whether the iframe should height=\"350\" have scrollbars or not. This is frameborder=\"0\" important if the page inside the scrolling=\"no\"> iframe is larger than the space </iframe> you have allowed for it (using the height and width attributes). R e s u lt 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 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 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. EXTRA MARKUP 190

Information About Your Pages <meta> The value of the name attribute can be anything you want it to The <meta> element lives be. Some defined values for this inside the <head> element and attribute that are commonly contains information about that used are: web page. description It is not visible to users but fulfills a number of purposes This contains a description such as telling search engines of the page. This description about your page, who created is commonly used by search it, and whether or not it is time engines to understand what the sensitive. (If the page is time page is about and should be a sensitive, it can be set to expire.) maximum of 155 characters. Sometimes it is also displayed in The <meta> element is an empty search engine results. element so it does not have a closing tag. It uses attributes to keywords carry the information. This contains a list of comma- The most common attributes separated words that a user are the name and content might search on to find the page. attributes, which tend to be In practice, this no longer has used together. These attributes any noticeable effect on how specify properties of the entire search engines index your site. page. The value of the name attribute is the property you robots are setting, and the value of the content attribute is the value This indicates whether search that you want to give to this engines should add this page property. to their search results or not. A value of noindex can be used if In the first line of the example on this page should not be added. A the opposite page, you can see a value of nofollow can be used <meta> element where the name if search engines should add this attribute indicates an intention page in their results but not any to specify a description for the pages that it links to. page. The content attribute is where this description is actually specified. 191 EXTRA MARKUP

Article HTML chapter-08/meta.html The <meta> element also uses the http-equiv and <!DOCTYPE html> content attributes in pairs. <html> In our example, you can see <head> three instances of the http- <title>Information About Your Pages</title> equiv attribute. Each one has a <meta name=\"description\" different purpose: content=\"An Essay on Installation Art\" /> <meta name=\"keywords\" author content=\"installation, art, opinion\" /> <meta name=\"robots\" This defines the author of the content=\"nofollow\" /> web page. <meta http-equiv=\"author\" content=\"Jon Duckett\" /> pragma <meta http-equiv=\"pragma\" content=\"no-cache\" /> This prevents the browser from <meta http-equiv=\"expires\" caching the page. (That is, content=\"Fri, 04 Apr 2014 23:59:59 GMT\" /> storing it locally to save time </head> downloading it on subsequent <body> visits.) </body> </html> 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. EXTRA MARKUP 192

Escape Characters There are some characters that are used in and reserved by HTML code. (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. For do not support all of these to write a left angled bracket, example, if you want to include a characters and you might you can use either &lt; or copyright symbol on a web page therefore need to specify &#60;. For an ampersand, you you can use either &copy; or a different font for these can use either &amp; or &#38;. &#169;. characters in your CSS code. Online Extra You can find a more complete list of escape codes in the tools section of the website accompanying this book. 193 EXTRA MARKUP