Chapter 1
Identifying the Basic Structure of an HTML Page
An HTML page contains the following structural tags:
.
.
.
.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<BODY>
<!DOCTYPE HTML>
The <!DOCTYPE> tag provides an instruction to the browser about the version of HTML.
It should be the first tag in an HTML document. It does not have any end tag, as shown in the following code snippet:
<!DOCTYPE HTML>
<HTML>
The <HTML>tag specifies to the browser that a document is an HTML document. The opening HTML tag,
<HTML>, and the closing HTML tag, </HTML>, mark the beginning and end of a Webpage. The <HTML>tag is a container tag that encloses the entire content of the Webpage. The
following code snippet is used to specify the <HTML> tag:
<HTML>
……content of the Web page……
</HTML>
<HEAD>
The <HEAD> tag is contained within the <HTML> and </HTML> tags. It is used to describe the header of the HTML document. The header is the first section of an HTML document where the global settings for the document, such as the Webpage title, file format, and the last modified date, can be defined.
The following code snippet is used to specify the <HEAD> tag:
<HEAD>
…header content
</HEAD>
<BODY>
The <BODY>tag sets the boundary for the content in the HTML document. When the Web
page is displayed in a browser, users can see the content enclosed within the opening <BODY> and closing </BODY> tags. The HTML content that can be placed within the <BODY> tag
includes text and graphics to be displayed on the Webpage.
The following code snippet is used to specify the <BODY> tag:
<BODY>
…content
</BODY>
The head section contains the <HEAD>tag along with some other complex tags. The following tags are used in the <HEAD> section of an HTML document:
.
.
.
.
.
.
.
<TITLE>
<META>
<BASE>
<STYLE>
<LINK>
<SCRIPT>
<NOSCRIPT>
<TITLE>
The <TITLE>tag defines the title of the document that appears in the title bar of the browser window. In addition, this title:
. Displays a title for the page to be used in the search-engine results.
. Provides a title for the page that will be added to favorites.
An HTML document can have only one title. If a title is not provided, most Web browsers display the name of the HTML document as the default title of the Webpage
<META>
The following list describes the usage of the values that are assigned to the name attribute in the preceding code:
. author: Specifies the name of the author who has created the document.
. description: Specifies a short summary of the content of the Webpage.
. keywords: Specifies the keywords used in the Web page. The description and keywords attributes are useful for the search engines to list the reference to your website when relevant keywords are entered by a user for searching.
<LINK>
The <LINK>tag is used to establish the relationship of the current document with other documents in a website.
The following table describes the attributes of the <LINK> tag.
Attribute
Value
Description
hreflang
language_code
Specifies the language of the text used in the
linked document by using a two-letter language code, such as en for English.
media
projection
screen
tv
handheld
Specifies the device on which the linked document will be displayed.
<NOSCRIPT>
The <NOSCRIPT> tag displays an alternate content on the browsers on which the scripts have
been disabled or on the browsers that do not support client-side scripting. Consider the following code snippet for defining the <NOSCRIPT> tag:
<!DOCTYPE HTML><HTML>
<BODY>
<SCRIPT type="text/javascript">
document.write("Welcome to BookYourHotel
website!")
</SCRIPT>
<NOSCRIPT> Your browser does not support scripts </NOSCRIPT>
</BODY>
</HTML>
In the preceding code snippet, the <NOSCRIPT> tag displays the text, Your browser does not support scripts, if the scripts are not supported by the browser.
<PROGRESS>
The <PROGRESS> tag is used to display the progress of a task. It provides the following attributes to display the progress bar:
. max: Specifies the amount of work a task requires.
. value: Specifies the amount of task that has been
completed. Consider the following code snippet for
defining the <PROGRESS>tag:
Progress of a task:
<PROGRESS value="12" max="100">
</PROGRESS>
The preceding code snippet displays a progress bar specifying that 12% of the task has been done, as shown in the following figure.
The Progress Bar Being Displayed
Adding Images
Images add an artistic value to a Webpage. They make the Webpage more interesting as ideas are well communicated with images and graphics.
The three extensively-used image formats on the Web are:
. GIF: The Graphic Interchange Format (GIF) format is the most commonly-used image format on the Web. It is used if the image involves drawing lines, such as images having polygonal shapes. It is considered superior to other formats for its clarity and ability to maintain the originality of an image without lowering its quality.
. JPEG: The Joint Photographic Experts Group (JPEG) format is used when the image is a photograph, medical image, or complex photographic illustration. JPEG images are inherently full-color images. Therefore, they appear distorted when viewed on a monitor supporting 256 colors or less.
. PNG: The Portable Network Graphics (PNG) format is an alternative to GIF. The PNG format defines a portable, well-compressed, and well-specified standard for bitmapped image files that retain their high resolution.
You can use the <IMG> tag to insert images in a website. The <IMG> tag is used to place static as well as animated images on a Web page. You need to use the src attribute inside the <IMG> tag to specify the URL of the image that you want to insert in the Web page. Consider the following code snippet for defining the <IMG> tag:
<BODY>
<IMG src="Room.jpg">
</BODY>
Chapter 2
Identifying the Types of Style Sheets
Different websites use different ways of implementing styles through CSS. Based on the manner in which CSS styles are applied, these can have the following categories:
. Inline style
. Internal style sheet
. External style sheet
Inline Style
To customize only few elements on a Webpage, inline styles can be applied. For example, you want to display a particular paragraph in red color on one of the Webpages.
Consider the following code to specify a style for only one of the <P>tags in the HTML document:
<!DOCTYPE HTML>
<HTML>
<BODY>
<P style="font-size: 24pt; color: red">Hotel booking from the comfort of
your room.</P>
<P>Compare and book from more than 5000 hotels. </P>
</BODY>
</HTML>
Internal Style Sheet
An internal style sheet is used when there is a need to stylize the multiple occurrences of an element on a Webpage with the same style.
An internal style sheet is enclosed within the <STYLE> tag inside the head section of the HTML document, as shown in the following code:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<STYLE type="text/css"> p
{
color:red;
font-size:20pt; font-style:italic;
}
</STYLE>
</HEAD>
<BODY>
<P> Hotel booking from the comfort of your room.</P>
<P> Compare and book from more than 5000 hotels.</P>
</BODY>
</HTML>
External Style Sheet
An external style sheet is used when multiple Web pages are to be styled in the same manner to ensure the consistent look and feel across the entire website.
The following code displays the <LINK>tag along with its some commonly-used attributes:
<LINK type="text/css" rel="stylesheet" href="externalstylesheet.css" />
In the preceding syntax:
. type: Specifies the type of content in the linked document.
. href: Specifies the location of the linked external style sheet.
. rel: Specifies the relationship between the CSS document and the HTML document. The rel attribute is specified with value, stylesheet, which specifies that the current HTML document is importing an external style sheet.
Consider the following code to associate an external style sheet with the HTML document:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> An External Style Sheet </TITLE>
<LINK type="text/css" rel="stylesheet" href="externalstyle.css" />
</HEAD>
<BODY>
<H1> Hotel booking from the comfort of your room. </H1>
<P> Compare and book from more than 5000 hotels. </P>
</BODY>
</HTML>
. An ID selector is used to identify an element that you need to style differently from the rest of the page. An ID selector is defined by using the hash symbol (#).
. A CSS style can be applied to a group of elements by using the class selector. The class selector is defined by using a dot (.).
. A CSS property represents a characteristic of the HTML element that can be customized.
. The display property is used to set the appearance of an element on a Webpage.
. The visibility property is used to specify whether an element should be visible or not.
. The position property is used to position an element on a Webpage.
. The float property is used to place HTML elements to the left or right margin, in relation to the other HTML elements.
. The clear property is used to turn off the float effect on HTML elements.
Chapter 3
Specifying Table Body
The table body contains data arranged in rows. Each row further comprises one or multiple columns. The rows of the body of a table can be grouped by using the <TBODY>tag.
You can use more than one <TBODY> tag inside the <TABLE> tag. This is done when you want to logically group the rows of the table body for applying different presentation styles to each group.
Creating Rows
For adding rows to a table, the <TR> tag is used. The contents of a row areplaced between the <TR> and
</TR> container tags. The content of each row comprises one or more column values. The number of rows in a table depends on the number of <TR> tags within the <TABLE> tag.
Creating Columns
For adding columns to a row, the <TD> tag is used. The <TD> tag specifies the content of the columns. The content is enclosed within the <TD> and </TD> container tags. The <TD> tags
are used within the <TR> and
</TR> tags.
Combining Multiple Rows and Columns into a Single Cell
The colspan attribute is specified within the table cell to define the number of columns the cell can extend to.
The rowspan attribute is specified within table cell to define the number of rows a cell can extend to
. The rows of the body of a table can be grouped by using the <TBODY>tag.
. For adding rows to a table, the <TR> tag is used.
. For adding columns to a row, the <TD> tag is used.
. To extend or merge the cells up to the desired columns, you can use the colspan attribute. Similarly, to merge the rows, you can use the rowspan attribute.
. For creating a table title, the <CAPTION> tag is used.
Chapter 4:
. To create a dynamic and interactive Webpage, you need to incorporate a block of code, which is known as script, in the Web page.
. Client-side scripting refers to the scripts that are executed at the client-side by the Web browser, running on the user’s computer.
. Server-side scripting refers to the scripts that are executed by the Web server on the basis of the user’srequest.
. A script can be embedded directly into a Webpage by writing the JavaScript code inside the <SCRIPT>
tag or by writing the entire JavaScript code in an external JavaScript (.js) file.
. The external JavaScript file is saved with the .js extension.
. An operator is a set of one or more characters that is used for computations or comparisons.
. A function is a self-contained block of statements that has a name.
. You can use the following categories of operators in JavaScript: 1. Arithmetic Operators
2. Assignment Operator
3. Arithmetic Assignment Operators
4. Comparison Operators
5. Logical Operators
. The two conditional constructs in JavaScript are:
1. The if...else construct
2. The switch...case construct
. In JavaScript, the following loop structures can be used:
1. The while loop
2. The do...while loop
3. The for loop
. Some of the built-in functions supported by JavaScript are:
1. isNaN()
2. parseInt()
3. parseFloat()
4. eval()
5. prompt()
6. confirm()
. Functions are created by using the keyword, function, followed by the function name and the parentheses, ().
Chapter 5
To create a form on a Webpage, you need to use the <FORM> tag. The <FORM> tag helps you define a form. It has an opening <FORM>tag and a closing </FORM>tag. The following syntax
is used to specify the
<FORM> tag:
<FORM [attribute list]>
..
..
</FORM>
target
The target attribute is used to specify the name of the frame or the window in which the response obtained after submitting the form needs to be displayed. The following syntax is used to specify the target attribute for a form:
<FORM target="_blank|_self|_parent|_top|frame_name">
The target attribute can have any one of the following values:
. _blank: Specifies that the response should be displayed in a new frame or window.
. _self: Specifies that the response should be displayed in the same frame.
. _parent: Specifies that the response should be displayed in the parent frame or window.
. _top: Specifies that the response should be displayed in the full body of the window.
. frame_name: Specifies that the response should be displayed in the specified frame.
<INPUT>
The <INPUT> tag is used to create input fields inside a form. These fields are used to accept input from the users. Input fields are of various types, such as text box, radio button, or check box. The type of input field is determined by the value of its type attribute. The <INPUT> tag has some important attributes, such as type, value, name, ID, autocomplete, autofocus, form, required, pattern, and placeholder.
. text: Creates a single line editable text field. When the value of the type attribute is
text, two additional attributes, size and maxlength, can also be specified. The size attribute is used for limiting the character width of the text field in the form. The
maxlength attribute defines the maximum number of characters that can be typed in the text field.
. password: Creates a password field, which will not display the characters being typed by the user. It hides the actual characters and shows the masked values for each
character, such as ****.
. radio: Creates a radio button, which lets the user select one of the options from a set of
given options. When the value of the type attribute is radio, an additional attribute, checked, can also be specified.
. checkbox: Creates a check box, which lets the user select one or more options from a set of given options.
. submit: Creates a submit button, which submits the form data to the location specified in the action attribute of the form. When the value of the typeattribute is submit, some additional attributes, such as formaction, formmethod, formtarget, and
formnovalidate can also be specified.
. reset: Creates areset button, which clears the values entered by a user in the form fields.
. URL: Adds a field that is used to enter the URL of a website.
. email: Creates a field in an HTML form to accept the email address from the users. You can even use a normal text field to accept the email address.
. range: Creates a slider control to enter a numeric value within a range
. date: Is used to define a date field in an HTML form. It allows a user to select a date
. time: Is used to define a time field in an HTML form. It allows a user to select time.
. number: Is used to create an input field for entering a numeric value.
. tel: Is used to accept a telephone number from the user.
. image: Is used to specify an image to be used as a submit button.
. Browser objects represent the browser environment and provide properties and methods for its access and manipulation.
. The form object is a browser object, which acts as a container for several other objects that collect information from a user.
. To create a form on a Webpage, you need to use the <FORM> tag.
Chapter 6
Working with Shapes
The rect() method is used to create a rectangle on the canvas. However, it picks the default color of the canvas to draw the outline of the rectangle.
To make a rectangle visible on the canvas, you need to provide its outline or stroke color by using the stroke() method.
The syntax of using the rect() method to create a rectangle on a canvas is:
rect(x,y,width,height);
fillRect()
The fillRect() method is used to create a rectangle filled with the specified color. The default fill color is black. The following syntax is used to create a filled rectangle on a canvas:
fillRect(x,y,width,height);
strokeRect()
When you create a rectangle by using the rect() method, you also need to use the stroke() method to define its outline on the canvas. Instead of using two methods, rect() and stroke(), to draw a rectangle on a canvas, you can use the single method, strokeRect(), to draw a rectangle with the specified stroke color.
clearRect()
The clearRect() method is used to clear a portion of the rectangle. It clears the specified pixels within the given rectangle. The following syntax can be used to clear a rectangle on a canvas:
clearRect(x,y,width,height);
Working with Colors
fillStyle
The fillStyle property is used to define a color that will be used to fill any closed shape drawn on the canvas. The default value of the fillStyleproperty is solid black. The
following syntax is used to apply the fill style on a graphic object:
fillStyle="color";
strokeStyle
The strokeStyle property is used to set the outline color of a shape drawn on the canvas. The default value of the strokeStyle property is solid black. The following syntax can be used to apply the stroke style on a graphic object:
strokeStyle="color";
shadowColor
The shadowColor property is used to set the color for the shadows appearing on the graphic objects and the shadowBlur property is used to set the blur level for the shadows.
You can use the following syntax to use the shadowColor property:
shadowColor="color";
Working with Styles
addColorStop()
You can add one or more colors on a gradient object by using the addColorStop()
method. The addColorStop() method is used to specify the colors and their corresponding
positions in a gradient object. The following syntax can be used to define the
addColorStop() method:
addColorStop(position,color);
createLinearGradient()
The createLinearGradient() method is used to return a gradient object that represents a linear gradient for painting the specified color along a line. The following syntax can be used to apply a linear gradient:
createLinearGradient(x0,y0,x1,y1);
createRadialGradient()
The createRadialGradient() method is used to return a gradient object that represents a radial or circular gradient to be applied on a graphic object. A circular gradient paints colors along a cone specified by two circles, inner and outer. The following syntax can be used to
apply a radial gradient:
createRadialGradient(x0,y0,r0,x1,y1,r1);
. Canvas provides an easy and a powerful way to create graphics on a Webpage.
. A canvas is defined by using the <CANVAS> tag. This tag is defined in the body section of the HTML document.
. Defining the canvas element only creates a blank drawing surface. However, to actually draw graphic objects on the canvas, you need to access the canvas in the JavaScript code.
. You can use the following methods to draw shapes on canvas: 1. rect()
2. fillRect()
3. strokeRect()
4. clearRect()
. The following properties can be used to apply colors on the canvas objects:
1.
fillStyle
2.
strokeStyle
3.
shadowColor
. Apart from creating simple shapes on the canvas, you can also apply styles, such as gradients, on them.
. A path is a series of points joined together to create lines or shapes. In a canvas, you can use lines or paths to draw shapes other than rectangles or squares.
. In addition to drawing shapes or lines on the canvas, you can also draw text on it. You can also apply different styles on the text.
. The drawImage() method is used to draw an image or a video on the canvas.
. In a canvas, you can create graphs, such as bar graph or pie chart, to represent relationships.
. To transform the canvas elements, you can use the following methods: 1. translate()
2. scale()
3. rotate()
. To create such animations, you need to perform the following steps:
1. Create a variable for the animation state.
2. Draw the animation.
3. Redraw the objects.
4361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
