Skip to main content

NETWORK BASICS

Network A system of interconnected computers and computerized peripherals such as printers is called computer network. This interconnection among computers facilitates information sharing among them. Computers may connect to each other by either wired or wireless media. A computer network consists of a collection of computers, printers and other equipment that is connected together so that they can communicate with each other.  


Network application
A Network application is any application running on one host and provides a communication to another application running on a different host, the application may use an existing application layer protocols such as: HTTP(e.g. the Browser and web server), SMTP(e.g. the email-client). And may be the application does not use any existing protocols and depends on the socket programming to communicate to another application. So the web application is a type of the network applications. 
There are lots of advantages from build up a network, but the th…

Building the User Interface by Using HTML5: Text, Graphics, and Media


Hypertext Markup Language (HTML) uses markup to describe content for display on a Web page. An element is the combination of tags and the content they enclose. You may need to use special characters on a Web page, which requires character encoding. Finally, every Web page requires the doc-type declaration at the top of the page.

Hypertext Markup Language (HTML) is called a markup language because you use it to describe (mark up) pieces of content to display on a Web page. A Web page with markup means it includes tags, which are keywords that help to give an HTML page structure. (You’ll learn more about tags shortly.) The key to using HTML is learning which tags to use and when. The combination of content, tags, and perhaps graphics, multimedia, and so on are what build a Web page.

You can easily identify an HTML document because it has an .htm or .html file extension. When a Web browser or mobile device such as a smartphone opens an HTML file, it renders (interprets and reproduces) the content of the page.

Basic Markup and Page Structure

Every HTML page includes tags. A tag is a keyword surrounded by angled brackets. Most tags come in pairs; one tag is called the opening or start tag, and the other is the closing or end tag. A tag pair is case sensitive—a closing tag must have the same case as the opening tag. A closing tag is identical to an opening tag except the closing tag includes a slash before the keyword.

Tags surround content and give it definition. For example, this markup creates a first-level heading:

<h1>Pet Care 101</h1>

HTML also uses some single tags, like <br /> for a line break and <hr /> for a horizontal line. In HTML 4, these tags are called empty tags because they don’t require an end tag. HTML5 is less restrictive than HTML 4. You don’t have to include end tags for all elements (although some elements still require start and end tags), and you can enter tags in uppercase or lowercase. However, this book uses start and end tags, and all lowercase for markup, for consistency.

There are many tags available for HTML pages. Some of the most commonly used tags are listed in Table 2-1. The first four—<html>, <head>, <title>, and <body>—are required on every Web page.

USING ATTRIBUTES

Not all tags describe data on their own or at least not in enough detail for rendering, so some elements must include attributes, which are modifiers of HTML elements that provide additional information. Attributes are easy to use and are just extensions of elements. You add attributes to elements according to this basic syntax: 

<tag attribute="value">

Notice that the attribute and its value are both inside a tag. You must include an attribute within a tag so that the Web browser knows how to handle the attribute. A good example of an attribute is when creating a hyperlink, as follows: 

<a href="http://www.example.com">This is a link.</a>

The Web browser uses the combination of the anchor element and the href attribute to display a hyperlink. 

A good Web page editor or app development tool should show you which attributes you can use with an element, which is a time saver. The tool should also help you debug the markup if you used an attribute incorrectly.

Two of the most common uses of attributes are to create hyperlinks and to insert simple graphics. You’ll learn how to work with graphics later in this lesson. HTML5 includes several global attributes, which you can use with any HTML5 element. Examples of global attributes include id, lang, and class, among many others.

NESTING ELEMENTS

How a Web browser displays your HTML depends on the way you combine elements, their attributes (if any), and content. When two or more elements apply to the same block of text, you should nest tag pairs appropriately so that they do what you intended. Nesting means to place one element inside another. Here’s an example of correct nesting: 

<p>Make sure your pet has plenty of <i><b>fresh water</b></i> during hot weather.</p>

In this case, we want the words “fresh water” to stand out so they are italicized and bolded by using the <i> and <b> tags. If you placed the </b> end tag after the </p> end tag (shown below), the words “fresh water during hot weather” would appear bold but only “fresh water” would be italicized. It would look awkward, 

 <p>Make sure your pet has plenty of <i><b>fresh water</i> during hot weather.</p></b>

The rule for nesting is that nested tags must be closed before their parent tags. Looking back at the correct example, notice that the paragraph element opens first, followed by the italic element, and then the font element. Then the bold element closes, followed by the italic element, and finally the paragraph element. The italic and bold elements are completely nested within the paragraph element.

UNDERSTANDING ENTITIES

An entity is a special character, such as the dollar symbol, the registered trademark (a capital R within a circle), and accented letters. The process of incorporating entities in a Web page is called character encoding. Today’s Web editing tools and browsers do a good job of handling special characters that appear on your keyboard, such as those above the number keys. In most cases, those characters render without any problems. 

With some browsers, the character you expected doesn’t appear and you get a gibberish character or symbol instead. Those situations are easy to handle. Each special character that can be reproduced in a Web page has an entity name and a numerical code. You can use either in a Web page. However, it’s generally safer to represent symbols like the trademark using a numbered entity to ensure proper rendering in a wide variety of browsers.

An entity begins with an ampersand (&) and ends with a semicolon (;). For example, the entity &reg; represents the registered trademark symbol, and its numerical code is &#174; . When a browser encounters an ampersand, it tries to match the characters that follow with an entity. If the browser finds a match, it displays the special character in place of the entity. 

Another important thing to know about character encoding in HTML5 is that you should use UTF-8 encoding whenever possible, because most browsers use UTF-8. That means you add the following declaration to the head element: 

<meta charset="UTF-8">

The HTML5 specification requires that the whole meta element fits in the first 1,024 bytes of the document, which is why you include it at the top of the page in the head element.

UNDERSTANDING THE DOC-TYPE

The doc-type is a declaration that is found at the very top of almost every HTML document. When a Web browser reads a doc-type declaration, the browser assumes that everything on the Web page uses the language or rules specified in the declaration.

In HTML 4, all <!DOCTYPE> declarations require a reference to a DTD, which stands for Document Type Definition. The DTD is simply a set of rules that help a Web browser turn tags and content into the pages you see on the Web. There are a few different DTDs that an HTML 4 Web page can use. Because of how HTML5 was created, it doesn’t require a reference to a DTD.

In HTML 4, the doc-type declaration specifies the HTML page’s language and DTD, and looks quite complex. Here’s an example: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.example.com/TR/xhtml11/DTD/  xhtml11.dtd">

The new HTML5 doc-type, in comparison, is very simple:

<!doc-type html>

The HTML5 doc-type is case-insensitive, so the keyword “doc-type” can be uppercase or lowercase. This simplified doc-type is partially responsible for why HTML5 pages easily lend themselves for viewing in a Web browser on a computer or a mobile device. HTML5 is designed to be broadly compatible with both new and old Web browsers, and the mobile device environment.

EXPLORING THE MARKUP OF A SIMPLE WEB PAGE

An example of markup and content for a simple HTML5 Web page looks like this:

<!doc-type html>

<html>  
<head>    
<title>78704 Pet Services</title>  
</head>

<body>  
<p>Your dog is a friend for life. Why not  
provide the best care possible?</p> 
</body>

</html>

The blank lines between parts of the page, such as between the doc-type declaration and the <html> tag, don’t appear on a Web page. Neither do indents, such as those for the paragraphs. (Notice that the paragraph elements are indented a bit from the <body> tags. Blank lines and indents simply help you read the markup more easily in an editing tool.

CREATE A SIMPLE WEB PAGE

GET READY. To create a simple Web page and see the effect of missing tags, nesting, and entities, perform the following steps:

1. On your computer or a flash drive, create a sub-folder within the My Documents folder that will hold the files you work on in lessons throughout this book. This is your working folder. You can name the sub-folder HTML5 or something similar.

2. Open a Web page editor, app development tool, or even a simple text editor like Notepad and type the following:

<!doctype html> 
<html>  
<head>   
 <title>78704 Pet Services</title>  
</head> 
<body> 
<h1>Care and Feeding</h1>  
<p>Your dog is a friend for life. Why not provide the best    
care possible?</p>  
<p>Make sure your pet has plenty of <i><b>fresh water</b></i>  
during hot weather. When taking your dog on long walks,  
bring along a collapsible water dish and bottled water.  
You can find specialty water dishes at many pet supply 
stores for $10 or less.</p> 
</body> 
</html>

You have a lot of choices when it comes to editors and development tools. Notepad is the built-in text editor in Windows, but you can download Notepad++ for free from the Web. Notepad+++ offers features that make it easier to create and edit HTML documents. Text-wrangler has a similar feature set and is designed for Macintosh systems. Free HTML editors include HTML-Kit and KompoZer. Development tools include Microsoft Visual Studio, Visual Studio for Web, Microsoft Web Matrix, and Microsoft Expression Web, among many others. All of these applications enable you to create and edit HTML files.

3. Save the file as L2-pet-orig.html in the working folder you created in My Documents. 

4. Navigate to your working folder and open the HTML page in a Web browser. 

5. To see the effect of a missing tag in a tag pair, delete the </b> end tag after “water.” Create a new         file to test the changes by saving it as L2-pet-test.html and open it in the browser. Now all of the         content from “fresh water” to the end of the document is in boldface.

NOTE:In Internet Explorer 9, you can press F12 to open browser mode. This mode enables you to edit pages without leaving the browser. In addition, you can click Document Mode on the menu bar and then select an older version of the browser to see how a page renders.

6. To see the effect of improper nesting, move the </i> end tag to appear after the last </p> tag. Save       L2-pet-test.html again and view it in a browser. 

7. Close the L2-pet-test.html file in the editor and open L2-pet-orig.html. 

8. Add a copyright line to the bottom of the page by pressing Enter a few times after the closing </p> tag and typing <p>&copy; 2012</p>. Substitute the current year for “2012”, if necessary. Press Enter to add a blank line. Make sure the copyright line is above the </body> and </html> end tags.

9. Create a new file again by saving L2-pet-test.html as L2-pet-copyright.html and view it in the browser. Does the circle C symbol appear as shown in Figure 2-6? If not, change &copy; to &#169;, save the file, and then view it again.

10. Go to the W3C Markup Validation Service Web page at http://validator.w3.org. Upload L2-pet-copyright.html and click Check to have the service check it. Fix any errors reported by the checker that relate to missing tags or typos, if any.

11. You probably received an error message about character encoding. To fix this, open L2-pet-copyright.html in your editing tool, insert <meta charset="UTF-8"> in the head element, on its own line, just before the title.
<head>   
 <meta charset="UTF-8">    
<title>78704 Pet Services</title>  
</head> 

12. Save the file, upload it to the validation checker again, and check it. The checker should indicate that your file is valid. 

13. Leave the editing tool and Web browser open if you’re continuing immediately to the next section.

NOTE:When viewing Web pages that you’re editing, it’s best to use a variety of Web browsers to ensure your markup renders as expected for the widest audience. Some editing tools let you select a browser for previewing Web pages from a list. If your tool doesn’t include that option, you’ll need to install three or four different browsers and open your Web pages in each one.

Choosing and Configuring HTML5 Tags to Display Text Content

HTML5 uses most of the same elements and attributes specified in HTML 4, and has introduced some new tags, modified the preferred usage of others, and no longer supports certain elements. New text-related elements include command, mark, time, meter, and progress. A few of the deprecated elements are base-font, center, font, and strike.

All of the elements covered in the first section in this lesson work well in HTML5, even though they have been used for years in previous versions of HTML. For the most part, HTML5 replaces very little HTML syntax. That means developers can still use most of the same elements they always have. Some elements have the same tag but slightly tweaked functionality, which you’ll learn about shortly. HTML5 also includes many new elements that increase the functionality of Web pages or streamline the markup. These include multimedia elements such as audio and video, and elements that make the structure of a Web page seem more intuitive. Structure-related tags include elements for page sections, headers, footers, navigation, and even sidebars. If you create Web forms, new form features make creation and validation much easier. This section, however, focuses on HTML5 markup for text.

Text Elements from HTML 4 with New Meaning or Functionality

Some HTML 4 text-related elements now have slightly different meaning or functionality in HTML5. The elements include <b>, <i>, <strong>, <em>, and <small>. The <b> element should now be used to offset text without conveying importance, such as for keywords or product names. The <i> element now indicates content in an alternate voice or mood, like spoken text. The <strong> element indicates strong importance, whereas the <em> element indicates emphatic stress. The <small> element should be used for small print, like a copyright line.

Let’s look at some of the text elements carried over from HTML 4 that have slightly different meaning or functionality in HTML5:

 • <b>: This commonly used element has always represented boldface, and was often used for emphasis or to convey importance. The W3C suggests you now use it to indicate “stylistically offset” text without conveying importance. Use <b> for keywords, product names, and actionable items (such as items you click or press in a list of how-to steps). For example: 

<p>Click the <b>Check</b> button, and then click 
<b>OK.</b> </p>

• <i>: The italic element is now used for text in an “alternate voice or mood.” This could be spoken text, thoughts, or something similar that doesn’t convey importance or emphasis. It may also include technical terms and transliterated foreign words. For example: 

<p><i>He truly has a kind heart,</i> she thought. 

• <strong>: The strong element is for strong importance, where the content is more important than nearby words. For example: 
<p>Courtney wore the <strong>same</strong> outfit to work three days in a row.</p> 

• <em>: The emphasis element indicates emphatic stress. For example: 
<p>You should <em>always</em> validate your HTML 
markup before sharing it with others.</p>

• <small>: The small element should be used for small print or side comments. This element is useful for copyright lines or adding a source line to an image. For example: 

<p><small>Copyright 2012 by XYZ 
Corporation</small></p> 

The intended functionality for some of these elements in HTML5 can be confusing, such as knowing when to use the italic element. The best approach is to strive for consistency within a page or Web site, and watch how other developers use the same elements.

MODIFY TEXT-RELATED TAGS IN A WEB PAGE

GET READY. To modify tags in a Web page, perform the following steps: 

1. In your editing tool, open L2-pet-copyright.html if it’s not already open. 

2. In the following paragraph, replace the italic and bold tags with the strong element. 

<p>Make sure your pet has plenty of <i><b>fresh 
water</b></i> during hot weather.</p> 
The resulting markup will look like this:

<p>Make sure your pet has plenty of <strong>fresh  
water</strong> during hot weather.</p> 
Note that the strong element will look like the bold element. 
The W3C prefers that you use <strong> over <b>, although they seem to produce nearly identical results. 
3. Add <small> start and end tags to the copyright line, nesting them properly within the paragraph tags. 
4. Save the file as L2-pet-modified.html and view it in a Web browser.
5. Leave the editing tool and Web browser open if you’re continuing immediately to the next section.

New Text Elements in HTML5

New text-related elements in HTML5 include <command>, <mark>, and <time>, along with a few others. The <command> element creates a command button. When the user clicks a command button, a command executes. The <mark> element highlights text on a page, similar to the highlighting feature in Microsoft Word. The <time> element displays a machine-readable time and date, such as 10:10 A.M., CST, July 19, 2012, which is handy for blogs and calendars, and potentially helps search engines provide better results when time and date are part of the search criteria.

Let’s take a look at some of the new text elements in HTML5 along with some examples:

• <command>: The command element is used to define a command button that users click to invoke a command. The command element has many attributes you can use, such as type, label, title, icon, disabled, checked, and radio-group. For example: 
<menu label="Music Genre">
   <command type="radio" radiogroup="musicgenre" label="Art">
   <command type="radio" radiogroup="musicgenre" label="Popular">
   <command type="radio" radiogroup="musicgenre" label="Traditional">
</menu>

• <mark>: The mark element is very handy for highlighting text on a page. You could use it on a search results page, for example, or to set off a block of text that you want to draw to the reader’s attention. For example: 
<p>Since I started jogging last fall, I have <mark style="background-color:yellow;">lost 35 pounds</mark>.</p>

• <time>: The time element indicates content that is a time or date, which can be made machine-readable with the date-time attribute. The time element defines time on a 24-hour clock and a date in the Gregorian calendar. One benefit of making times and dates machine-readable on your Web page is that it helps search engines produce better search results. For example:
<time datetime="2013"> means the year 2013 
<time datetime="2013-04"> means April 2013 
<time datetime="04-15"> means 15 April (any year) 

Two other new elements are meter and progress. The meter element indicates content that’s a fraction of a known range, such as disk usage. The progress element indicates the progress of a task towards completion.

USE THE MARK ELEMENT

GET READY. To use the mark element to highlight text, perform the following steps:
1. In your editing tool, open L2-pet-modified.html if it’s not already open. 
2. Modify the following paragraph by inserting the mark element around the text “friend for life”.
<p>Your dog is a <mark style="background-color:orange;"> 
friend for life</mark>. 
3. Create a new file by saving it as L2-pet-mark.html and view it in a Web browser. 
4. Leave the editing tool and Web browser open if you’re continuing immediately to the next section.

Text Elements Not Used in HTML5

While new elements become available, the W3C earmarks other elements for eventual removal because their functionality is no longer useful. Removing elements from the list of available HTML elements is referred to as deprecation. (The same thing applies to attributes.) 

Deprecation may be due to a new element replacing the functionality of an older element, or the preference of a new method of formatting over an older element.An example of the latter is formatting with Cascading Style Sheets (CSS). Using CSS to change the look and feel of text, images, and other Web content separates style from content. The W3C has been nudging developers toward using CSS to control Web page formatting instead of using local formatting for quite some time, and it’s clearly the method to be used in HTML5. This makes sense because you can easily change styles in CSS that apply across a Web page or even a Web site. Inserting individual styles throughout even a single Web page can be time consuming to modify when a change becomes necessary. 

The following HTML elements are considered deprecated and are not supported in HTML5 pages:

• <acronym>: Defines acronyms in HTML 4 that can be spoken as if they are a single word, such as GUI for graphical user interface. Use the <abbr> tag instead. 

• <applet>: Defines an embedded applet. Use the <object> tag instead.

• <basefont>: Defines a default font color, font size, or font family for all the text in a document. Use CSS for applying all fonts. 

• <big>: Makes text bigger relative to the current font size. Use CSS instead. • <center>: Center-aligns text and content. Use CSS instead. 

• <dir>: Defines a directory list. Use the <ul> tag instead. • <font>: Specifies the font face, font size, and font color of text. Use CSS instead. • <frame>: Defines a particular frame (a window) within a frameset (see the next bulleted item). • <frameset>: Defines a frame-set for organizing multiple frames (windows). • <noframes>: Displays text for browsers that don’t support frames. • <strike>: Defines strike-through text. Use the <del> tag instead for small amounts of text, or use CSS for large blocks of text. • <tt>: Defines teletype or monospaced text. Use the <code> tag or CSS instead.

Just because an element isn’t supported doesn’t mean it won’t work within certain browsers. Many users still use older versions of browsers, and many deprecated elements render well in those browsers. However, a best practice is to create pages assuming Web page visitors use a current or near-current browser, which means using the latest HTML elements. If you know all of your Web page visitors use an older browser version, it’s acceptable to use deprecated elements. Regardless, if you need to apply a lot of formatting to any Web page, it’s best to use CSS for efficiency. 

The following attributes are not used in HTML5, although these attributes are not actually part of any HTML specification: 

• bgcolor: Applies a specified background color to whatever content its associated element describes, which is usually a table or a page. Use the CSS property background-color instead. 

• border-color: Applies a specified color to the cell of a table. Use the border-color CSS property instead. 

• bordercolorlight: Applies a specified color to the upper and left corners of a table cell. Use the border-color CSS property instead. 

• bordercolordark: Applies a specified color to the lower and right corners of a table cell. Use the border-color CSS property instead.

Like with deprecated elements, you may use these attributes if you know that your Web page visitors use older browsers. Be aware that your attempts to validate your Web page will result in errors, which you can ignore if you’re certain your visitors’ browsers support the attributes.

SEE THE EFFECTS OF DEPRECATED ELEMENTS

GET READY. To see the effects of deprecated elements in an HTML5 Web page, perform the following steps: 

1. In your editing tool, open L2-pet-mark.html if it’s not already open. 

2. Modify the h1 heading to incorporate the center element, as shown: <h1><center>Care and Feeding</center></h1> 

3. Create a new file by saving it as L2-pet-temp.html and view it in a Web browser. Did the element center the heading in your browser? 

4. Add the big element to the following content, as shown: <p>Your dog is a <mark style="background-color:orange;"> <big>friend for life</big></mark>. 

5. Save the file and view it in a Web browser.

6. Go to the W3C Markup Validation Service Web page at http://validator.w3.org. Upload L2-pet-temp.html and click Check to have the service check it. 

7. Notice that the validator displays errors regarding use of the deprecated elements. What can you conclude about using deprecated elements in HTML5? (Deprecated elements don’t validate but many of them still render properly in a Web browser.) 

8. Close L2-pet-temp.html and leave the editing tool and Web browser open if you’re continuing immediately to the next section.

Choosing and Configuring HTML5 Tags to Display Graphics

Use the img element to display linked images in a Web page. The images can be located with the Web pages HTML files, usually in an images sub-folder, or on a different server or Web site. The figure and figure caption elements are new to HTML5, and give you more control of the type of image you are displaying and the ability to include captions. The canvas element is used for drawing, rendering, and manipulating images and graphics dynamically in HTML5. Scalable Vector Graphics (SVG) enables you to create scalable objects that resize to best fit the screen on which they’re viewed, whether a PC screen or a smartphone.

You can display different kinds of images on a Web page, most of which fall into two main categories: raster (or bitmap) and vector. A raster image is made up of pixels, whereas a vector image is made up of lines and curves based on mathematical expressions. A photograph is a type of raster image and is most often in JPG format. Other raster file formats that work well on Web pages are PNG, GIF, and BMP. A vector image is an illustration, such as a line drawing. Developers often convert vector file formats from programs like Adobe Illustrator or CorelDRAW, which aren’t supported by Web browers, into PNG or GIF for Web display. An important difference between the two types of files is that raster images lose quality (they become pix-elated) as you enlarge them, but vector images maintain quality even when enlarged. 

The primary way to add images to an HTML document is with the img element. Like the anchor tag, the img tag does nothing by itself and requires attributes and values that specify the image the Web browser should display. For example, to insert an image named redball.jpg that’s in a sub-folder called images, type this element: 
   
<img src="images/redball.jpg" alt="Red ball graphic" /> 

The image will display as long as the images sub-folder is accessible. Both the src attribute and the alt attribute are required to be fully valid. The value of the alt attribute (short for alternate text) displays when a user hovers the mouse pointer over the image; in this case, the phrase “Red ball graphic” would display. The W3C requires the alt attribute for accessibility by people with disabilities. People with limited vision may use a screen reader, which reads aloud the alternate text for each image. Search engines also use the alt attribute to identify types of images and what’s in them, since search engines can’t “see” pixels in images.

As another example, to insert an image named bluelogo.png that’s accessible from another Web site, type the following element: 

<img src="http://www.example.com/mrkt/images/bluelogo.png"     
alt="Company XYZ blue logo" />

Using the figure and fig-caption Elements

Two new graphics-related elements introduced in HTML5 are the figure and fig-caption elements. The figure element specifies the type of figure you want to use in an HTML document, such as an illustration or photo. The fig-caption element provides a caption for the figure.

The figure element specifies the type of figure you’re adding, such as an image, diagram, photo, and so on. This element provides a major benefit: the ability to easily add multiple images side by side. With HTML 4, doing so requires a good bit of markup. The fig-caption element is optional. It adds a caption to an image on a Web page, and you can display the caption before or after the image. 

The following markup uses the figure element, specifies the width and height of the image, and adds a caption. 

<figure>  
<img src="doghappy.jpg" alt="Happy dog"  
 width="100" height="125" />  
<figcaption>Happy dogs are good dogs</figcaption> 
</figure>

The following markup is for a figure with multiple images that share a single caption, 
 <figure>  
<img src="doghappy.jpg" alt="Happy dog"   
width="100" height="125" />  

<img src="dogpaws.jpg" alt="Happy dog"   
width="100" height="125" />  

<img src="dogwalk.jpg" alt="Happy dog"   
width="100" height="125" />  

<figcaption>Happy dogs are good dogs</figcaption> 
</figure>

DISPLAY AN IMAGE IN A WEB PAGE

GET READY. To display an image in a Web page, perform the following steps: 

1. Locate a JPG, PNG, GIF, or BMP file on your computer to use in this exercise. The image can depict anything you want, but something to do with pets would be most appropriate.
2. In your editing tool, open L2-pet-mark.html. 

3. Remove the <mark> tags from the first paragraph.
4. Insert the following markup after the h1 element, leaving a blank line before and after it, and replacing dogwalk.jpg with your own image file: 

<figure> 
 <img src="dogwalk.jpg" alt="Walking a dog"   
width="100" height="125" />  
<figcaption>Happy dogs are good dogs</figcaption> 
</figure> 
5. Create a new file by saving it as L2-pet-image.html and view it in a Web browser. 
6. Leave the editing tool and Web browser open if you’re continuing immediately to the next exercise.

USE THE FIGURE AND FIG-CAPTION ELEMENTS

GET READY. To display an image in a Web page, perform the following steps: 

1. Locate two additional JPG, PNG, GIF, or BMP files to use in this exercise. The image can depict anything you want, but something to do with pets would be most appropriate. You should have three images to work through these steps. 

2. In your editing tool, open L2-pet-image.html if it’s not already open.

3. Replace the markup for the figure that follows the h1 element with the following, replacing the image file names (doghappy.jpg, dogpaws.jpg, and dogwalk.jpg) with your image file names:

<figure>
  <img src="doghappy.jpg" alt="Happy dog"   
width="100" height="125" />
 <img src="dogpaws.jpg" alt="Dog paws"   
width="100" height="125" />
  
<img src="dogwalk.jpg" alt="Walking a dog"   width="100" height="125" />
  <figcaption>Happy dogs are good dogs</figcaption>

</figure> 

4. Save the file as L2-pet-multpimage.html and view it in a Web browser.

Close the L2-pet-multpimage.html file. Leave the editing tool and Web browser open if you’re continuing immediately to the next exercise.

Creating Graphics with Canvas

The canvas element is new in HTML5 and creates a container for graphics, and uses JavaScript to draw the graphics dynamically. 

With canvas, the Web page becomes a drawing pad, and you use JavaScript commands to draw pixel-based shapes on a canvas that include color, gradients, and pattern fills. Canvas also enables you to render text with various embellishments, and animate objects by making them move, change scale, and so on.

NOTE Developers use canvas to create online games, rotating photo galleries, stock tickers, and much more. The canvas element graphics and animation functions are intended to provide quality similar to those in Flash movies.

CANVAS BASICS

To use canvas, you first define a canvas in HTML. The basic syntax for the canvas element is as follows: 

<canvas id="smlRectangle" height="100" 
width="200"></canvas> 

This element creates your drawing pad. The canvas element requires the id attribute to reference the canvas in JavaScript and to add it to the Document Object Model (DOM). You should also specify the dimensions of the canvas—the height and width—which are in pixels. JavaScript works with the two-dimensional (2D) application programming interface (API) to actually draw items on the canvas.

USE THE CANVAS TO CREATE A SHAPE

GET READY. To use the canvas element to create a shape, perform the following steps: 
1. In your editing tool, type the following markup: 
<!doctype html>
<html>  
<head>   
 <meta charset="UTF-8">     
<title>Canvas Test</title>
<script>   function f1() { var canvas = 
document.getElementById("smlRectangle"); 
context = canvas.getContext("2d");
 context.fillStyle = "rgb(0,0,255)"; 
context.fillRect(10, 20, 200, 100);   }  </script>  </head>
<body onload = "f1();">
<canvas id="smlRectangle" height="100" width="200 "> 
</canvas>
</body>
</html>

NOTE You can include Java Scrips inside the head element of your HTML document, or in an external file

The onload attribute causes the JavaScript function in the script to run. This script first finds the element with the id smlRectangle:
var canvas = document.getElementById("smlRectangle"); 

The context.fillStyle method fills the rectangle with a blue color using the RGB values 0, 0, 255. The context.fillRect method creates a 200-pixel wide x 100-pixel tall rectangle, positioned 10 pixels down and 20 pixels over from the upper-left corner of the canvas and fills it using the color specified by fill-style. 

2. Save the file as L2-canvas.html and view it in a browser.

3. If a blue rectangle doesn’t appear, go to the W3C Markup Validation Service Web page at http://validator.w3.org. Upload L2-canvas.html and click Check to have the service check it. Fix any errors reported by the checker. Save the file again and view it in a browser. 

4. Leave the file, editing tool, and Web browser open if you’re continuing immediately to the next exercise.

CREATING AN OUTLINE OF A SHAPE

To create an outline of a rectangle without a fill color, use the context.strokeRect method. It uses the same values as context.fillRect. To modify the color of the outline (the stroke color), use context.strokeStyle. For example, to create a 200 x 100 pixel rectangular outline in red, use these methods in your JavaScript: 

context.strokeStyle = "red";

context.strokeRect(10,20,200,100);

USE CANVAS TO CREATE THE OUTLINE OF A SHAPE

GET READY. To use the canvas element to create the outline of a shape, perform the following steps: 1. In your editing tool, save L2-canvas.html as L2-canvas-stroke.html. 

2. Replace the fill-style and fillRect code lines with the following: context.strokeStyle = "red";
context.strokeRect(10,20,200,100); 

3. Delete the width and height attributes from the canvas element in the body (after id="smlRectangle"). 

4. Save the file and view it in a Web browser. 

5. Close the file but leave the editing tool and Web browser open if you’re continuing immediately to the next exercise.

PROVIDING AN ALTERNATE IMAGE OR TEXT FOR OLDER BROWSERS

Some older browsers cannot render canvas drawings or animation. Therefore, you should add an image, text, or some other HTML content within the canvas element that will display if the drawing cannot. The “backup” content, also referred to as fallback content, won’t display if canvas is supported. This example displays an image (smlRectangle.jpg) similar to that which a filled rectangle canvas would create: 
<canvas id="smlRectangle" height="100" width="200">  
<img 
src="http://www.example.com/images/smlRectangle.jpg" 
alt="A blue rectangle" /> 
</canvas> 
To display text instead of an image, you would insert text in place of the <img> tag.

ADD A FALLBACK TO YOUR HTML DOCUMENT

GET READY. 

To add a fallback to your HTML document, perform the following steps: 

1. In your editing tool, open L2-canvas.html and save it as L2-canvas-canvas-fallback.html. 

2. Replace the canvas element with the following: <canvas id="smlRectangle" height="100" width="200">  Your browser does not support the canvas tag. </canvas> 

3. Save the file and view it in the Internet Explorer 9 Web browser. You should see the canvas drawing. 

4. Press F12 to enter browser mode, click Document Mode on the menu bar, and select Internet Explorer 7 standards.

5. Press F12 again. An error message appears, stating that it doesn’t recognize a property or method. Close the error message.

6. Leave the file, editing tool, and Web browser open if you’re continuing immediately to the next exercise.

Creating Graphics with SVG

Scalable Vector Graphics (SVG) is a language for describing 2D graphics in Extensible Markup Language (XML). XML is a cousin to HTML, and has played an important part of HTML 4.01 Web pages. SVG technology is not new, but HTML5 now enables SVG objects to be embedded in Web pages without using the <object> or <embed> tags. (All types of SVG graphics are referred to as objects, and SVG loads into the DOM.)

The main purpose of SVG, as its name implies, is to create scalable vector graphic shapes, but you can create images and text as well. Much like canvas, you can apply solid colors, gradients, and pattern fills to SVG objects, and copy and clone objects. You can also use SVG anywhere you would insert a PNG, JPG, or GIF. With SVG, you provide drawing instructions rather than an image file. 

One of the major benefits of SVG is its flexibility. Its vector graphic changes size to fit the screen on which it’s displayed, whether the screen is on a 32-inch computer monitor or a mobile device like a smartphone. Because only the XML that describes the SVG graphic is transmitted, even large images don’t require a lot of bandwidth. This makes SVG handy for use as a Web page background without having to use the repeat property. (Most solid Web page backgrounds are actually a thin line that’s repeated using a CSS style.) In addition, SVG can be indexed by search engines because it’s created by XML.

You can include attributes such as color, rotation, stroke color and size, and so on, to each SVG object. The following markup can be included in an HTML file to create a purple ball: 

<svg id="svgpurpball" height="200"   
xmlns="http://www.w3.org/2000/svg">

  <circle id="purpball" cx="40" cy="40"   
r="40" fill="purple" />

</svg> 

The cs, cy, and r attributes help to define the circle by defining the center x and y points and radius. SVG has a plethora of attributes, which help you create all kinds of shapes. The attributes are available on the W3C Web site at http://www.w3.org/TR/SVG/attindex.html. 

CREATE AN SVG VECTOR GRAPHIC

GET READY. To create a simple SVG vector graphic, perform the following steps: 

1. In your editing tool, type the following markup: 

<!doctype html> 
<html>  
<head>    
<meta charset="UTF-8">    
 <title>SVG Star</title>  
</head> 
<body> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  
<polygon points="100,10 40,180 190,60 10,60 160,180" 
style="fill:aqua;stroke:orange;stroke-width:5; 
fill-rule:evenodd;"/> 
</svg> </body> </html>

The points attribute defines the x and y coordinates for each corner, or “point,” of the polygon. The fill-rule determines how the inside of the polygon is filled. 

2. Save the file as L2-SVG.html and view it in a Web browser. The page should look similar to Figure 2-17. If the page doesn’t appear, check it using the W3C Markup Validation Service at http://validator.w3.org and fix any errors.

3. Change a few of the polygon point parameter values. Save the file as L2-SVG-test.html and view it in a Web browser.

4. Delete fill-rule:evenodd;, save the file, and then view it in a Web browser. 

5. Close any open data files. Leave the editing tool and Web browser open if you’re continuing immediately to the next exercise.

When to Use Canvas Instead of SVG

There are no hard and fast rules for choosing to use canvas or SVG. Your choice depends mainly on the nature of your project, and your skill level in one or the other.
The following are some considerations that will help you make the right decision: 
• If the drawing is relatively small, use canvas. 

• If the drawing requires a large number of objects, use canvas. SVG begins to degrade as it continually adds objects to the DOM.

• Generally, use canvas for small screens, such as those on mobile devices. As the size of the screen increases and more pixels are needed, canvas begins to pix-elate so use SVG. 

• If you must create highly detailed vector documents that must scale well, go with SVG. 

• If you are displaying real-time data output, such as maps, map overlays, weather data, and so on, use canvas. 

A tip from Microsoft: Think of canvas as being similar to Microsoft Paint. You can draw images using shapes and other tools, and the result is pixel based. Think of SVG as being similar to an Office PowerPoint slide, which uses scalable objects.

Choosing and Configuring HTML5 Tags to Play Media

HTML5 introduces the audio and video elements, which do away with the need for plug-ins or media players to listen to music or watch videos via a Web browser

The audio element and video element are two of the major changes in HTML5, enabling you to provide multimedia from a Web browser without the need for plugins, such as those for Microsoft Windows Media Player, Microsoft Silver-light, Adobe Flash, or Apple QuickTime. That means users can simply open an HTML5-supported browser to listen to music or audio books, enjoy rich sound effects, and watch video clips or movies. The HTML5 specification includes the <video> and <audio> tags to incorporate multimedia. The following sections cover each in detail.

Understanding and Using Video Tags

You use the video element along with the src attribute to designate a video file to be played in an HTMLt document. Including he height and width attributes enables you to control the size of the window in which the video displays. 

The video element enables you to incorporate videos in HTML documents using minimal code. The structure for embedding video is simple. The following is an example of the markup for adding an MP4 file to a Web page: 
<video src="intro.mp4" width="400" height="300"> 
</video> 
The src attribute points to the name of the video file (in this case, video.mp4) to be played. The height and width attributes specify the size of window in which the video will display. 

Other attributes are available that you can add for control of the video: 

• poster: Displays a static image file before the video loads 

• autoplay: Start playing the video automatically upon page load 

• controls: Displays a set of controls for playing, pausing, and stopping the video, and controlling the volume 

• loop: Repeats the video 

Using all of the controls listed above, the markup would look similar to this: 

<video src="/videos/intro.mp4"    
width="400" height="300    poster="78704-splash.jpg"     
autoplay="autoplay"    
controls="controls"    
loop="loop">
</video> 

Notice that this markup refers to an MP4 video file. Other popular Web video formats also include H.264, OGG, and WebM, although WebM is used less than 10 percent of the time. Along with a video format, you should also specify the codec, which is a technology used for compressing data. Compression reduces the amount of space needed to store a file, and it reduces the bandwidth needed to transmit the file. Video compression reduces the size of video images while retaining the highest quality video with the minimum bit rate. All of this makes for better performance.

In a nutshell, the main video formats along with codecs (for the last two) are: 

• MP4 or H.264 
• OGG + Theora with Vorbis audio
 • WebM + VP8 

A best practice is to use the type attribute to specify the video format. You should also use the codecs attribute to specify the codec(s), if applicable. Sample markup is shown as follows: 

<video  
width="400" height="300"   
poster="78704-splash.jpg"   
autoplay="autoplay"   
controls="controls"   
loop="loop">
  <source src="intro.mp4" type="video/mp4" />
  </video> 

The <source> tag is being used as content of the video element so that the type attribute can be set and so that the multiple format option is available. Not all video formats are supported by all browsers, although MP4/H.264 is the most widely used by both Web browsers and mobile devices. (The HTML5 Video Web page at http://www.w3schools.com/html5/html5_video.asp displays a table showing which video formats work for what browser. The table is updated regularly.)  To help make your video viewable by the majority of browsers and devices, you can use the source attribute to include multiple formats in your markup. This example shows the same video available in two formats, and the OGG format specifies codecs: 

<video  
width="400" height="300" poster="image.png"  
autoplay="autoplay"   
controls="controls"   
loop="loop">
  <source src="video.mp4" type="video/mp4">
  
<source src="video.ogg" type=’video/ogg;   
 codecs="theora, vorbis"’>
</video>

WORK WITH THE VIDEO ELEMENT

GET READY. To work with the HTML5 video element, perform the following steps: 
1. Locate a video clip, and an image file to use as a poster. If you don’t have a video clip, search for a public domain MP4 file on the Web and download it. Save the video and image files to your HTML5 folder. 

2. In your editing tool, create an HTML file with the following markup. Substitute appropriate file names for your image file and video clip. Change the type attribute, if necessary, and replace sample.mp4 with the name of your video file.

<!doctype html> 
<html>  <head>  
  <meta charset="UTF-8">     
<title>Video Test</title>  
</head> <
body>  
<video    
width="400" height="300"     
poster="sample.jpg"     
autoplay="autoplay"     
controls="controls">    
<source src="sample.mp4" type="video/mp4" />  
</video> 
</body> 
</html> 

3. Save your file as L2-video.html. 

4. Go to the W3C Markup Validation Service Web page at http://validator.w3.org. Upload L2-video.html and click Check to have the service check it. Fix any errors reported by the checker that relate to missing tags or typos, if any. 

5. Open the HTML file in a Web browser. Does the video play automatically? Do the controls appear? You should open the L2-video.html file in a variety of Web browsers as a test. 

6. In your editing tool, delete the autoplay line and replace controls="controls" with simply controls. 

7. Save the file again and validate it. It should validate with no errors. That indicates that HTML5 allows you to use a shorthand method of specifying the controls attribute. The same principle applies to the autoplay and loop attributes. 

8. Leave the editing tool and Web browser open if you’re continuing immediately to the next exercise.

Understanding and Using Audio Tags

The HTML5 audio element works much like the video element but for sound only. To use the audio element, include the <audio> tag and a path to the file on your hard drive or a uniform resource locator (URL) that points to the audio file. 

The audio element enables you to incorporate audio, such as music and other sounds, in HTML documents. You can include the same control-related attributes as the video element: autoplay, controls, and loop. the following example shows just the controls attribute included: 

<audio src="sample.mp3" controls="controls">
</audio>

NOTE  If you use the autoplay attribute so that the audio plays automatically when the Web page loads, use a short clip such as a sound effect. Many Web visitors dislike automatic sound and prefer to have more control.

The three primary types of audio files supported by popular browsers are OGG, MP3, and WAV. However, not every browser supports every audio file format, at least not today. For the most part, MP3 is the best choice for multiple browser compatibility. 

To help ensure your audio plays on the majority of browsers and devices, use the source attribute to include multiple formats in your markup. This example shows the same audio file available in two formats: 

<audio controls="controls">  
<source src="sample.ogg" type="audio/ogg" />  
<source src="sample.mp3" type="audio/mp3" /> 
</audio> 

You can find a lot of free audio files, which are also royalty and copyright free, at http://flashkit.com. This is a good resource for learners, and for developers who may need a sound effect for a project. Another source is the Public Domain Sherpa Web site at http://www.publicdomainsherpa.com/public-domain-recordings.html. You can also make your own recordings using your computer and recording software. Windows 7 includes the Sound Recorder, which lets you save audio files in WAV format.

WORK WITH THE AUDIO ELEMENT

GET READY. To work with the HTML5 audio element, perform the following steps: 
1. Locate an audio clip. 

2. In your editing tool, create an HTML file with the following markup. Substitute the appropriate file name for your audio clip.

<!doctype html> <
html>  
<head>    
<meta charset="UTF-8">     
<title>Audio Test</title>  
</head> 
<body>  
<audio src="sample.mp3" controls="controls">  
</audio> 
</body> 
</html> 

3. Save your file as L2-audio.html and view it in a browser. 

4. If the audio controls don’t appear, go to the W3C Markup Validation Service Web page at http://validator.w3.org. Upload L2-audio.html and click Check to have the service check it. Fix any errors reported by the checker that relate to missing tags or typos, if any. 

5. Save the file again and open it in a Web browser. Play the audio clip. 

6. Close any open files, including the editing tool and Web browser.




Comments

Popular posts from this blog

What if Analysis

What-If Analysis What-If Analysis in Excel allows you to try out different values (scenarios) for formulas. The following example helps you master what-if analysis quickly and easily.  Use scenarios to consider many different variables  A scenario is a set of values that Excel saves and can substitute automatically in cells on a worksheet. You can create and save different groups of values on a worksheet and then switch to any of these new scenarios to view different results. 
Create Different Scenarios 
Note: You can simply type in a different revenue and Cost into cell B2 and B3 respectively to see the corresponding result of a scenario in cell B4. However, what-if analysis enables you to easily compare the results of different scenarios.  
I. On the Data tab, click What-If Analysis and select Scenario Manager from the list. The Scenario Manager Dialog box appears  II. Add a scenario by clicking on Add.  III. Type a name (e.g. “First Case”), select cell B2 and B3 (represents “Revenue” and “…

PROFESSIONAL ENGLISH

Asking For and Giving Opinions on Likes and Dislikes

Words Meaning Sample Sentence Opinion A statement or judgment formed about some matter. Bhoomika gave her final opinion on the company’s matter. Dialogue A conversation between two or more people. Her dialogue stated her opinion about the company’s matter. Expression The action of making known one’s thought or feelings. Her expression was sad at the meeting. Frank An open, honest, and direct speech or writing Bhoomika is very frank with her friends. Recover Return to normal state of health, mind or strength. The company’s economic crisis will be recovered soon. Turmoil A state of great disturbance. The company is facing financial turmoil. Economics The branch of knowledge concerned with the production, consumption, and transfer of wealth. Bhoomika studied Economics at the State University. Betrayed Expose to danger by treacherously giving information to an enemy.

DAILY LIFE VOCABULARY

Apology Etiquette and Office Vocabulary 

Chapter Vocabulary

Word Meaning Sample Sentence Stressed A state of any mental or emotional tension. Ram seems much stressed after his poor exam. Launch An act of instance of starting something. The government launched a new scheme for the poor people. Error A mistake Ravi found a grammatical error in his new grammar book. Scold Blaming someone for any wrong doing Bhuvan scolded his employees for their poor performance. Accuse Claiming that someone has done something wrong. Bharati accuses her friend Chaya for stealing her necklace. Fair Good and honest Ravi got promoted for doing a fair job. Ashamed Embarrassed or guilty because of one’s action. <