2. World Wide Web (WWW)
• Subset of the Internet
• World wide collection of XHTML documents
called Web pages
• Web pages are viewed using browsers
• Web browser
– Software application running on a user’s computer
– Requests Web pages from Web servers and displays
those Web pages on the user’s computer
4. Web Technologies
• XHTML (Extensible Hypertext Markup
Language)
• DHTML (Dynamic HTML with Java Script and
Ajax)
• XML (Extensible Markup Language)
• Scripting languages (Php)
• MySQL
5. Introduction
• XHTML (Extensible HyperText Markup
Language)
– markup language for creating web pages
• Based on HTML (HyperText Markup
Language)
– legacy technology of the World Wide Web
Consortium (W3C)
• XHTML 1.0
– Allows only a document’s content and structure
to appear in a valid XHTML document, and not
its formatting
5 – Formatting is specified with Cascading Style
Sheets
6. XHTML
• Extensible Hypertext Markup Language
• Used to create Web pages
• Formats the content on a Web page by using
tags to mark the text
7. Creating Web Pages
• Text Editor
– Simple, text-based editing
– User enters both content and HTML code
– Example: Notepad
• HTML Converters
– Converts text from one format, such as a word
document, to HTML code
– Example: Microsoft Word
8. Creating Web Pages
• XHTML Editor
– GUI Interface
– Generates XHTML code for the user
– Examples: Microsoft FrontPage
Macromedia Dreamweaver
9. XHTML Tags
• Brackets enclose tag name
– <tag_name>
• Tags usually come in pairs
– Opening tag <html>
– Closing tag </html>
• Attributes define additional characteristics
– <h3 align=center>My Heading</h3>
• Tags can be nested inside other tags
• Case insensitive
10. XHTML Tags
• <html> </html>
Identifies an HTML document
• <head> </head>
Identifies the document heading
• <title> </title>
Used within the heading to specify a page title
• <body> </body>
Identifies the content that will be displayed on
the page
11. The Basic Web Page
<html>
<head>
<title> This is the title of the page</title>
<body> This is the body of the page</body>
</html>
12. XHTML Tags
• <h1> </h1> through <h6> </h6>
Headings - h1 is the largest
• <p> </p>
Identifies a paragraph
• <hr> (no closing tag)
Horizontal rule - creates a horizontal line
• <br> (no closing tag)
Line break
13. Create Paragraphs with
<p>,</p>
…<body>
<p>This is the first sentence.</p>
<p>This is the second sentence.</p>
<p>This is the third sentence.
This is the fourth sentence.
This is the fifth sentence.</p>
</body>
14. Formatting Text
<b>This will be presented in bold.</b>
<i>This will be printed in italics.</i>
<h1>This is the largest heading.<h1>
<h6>This is the smallest heading.</h6>
<b><i>This will be in bold & italics.<i></b>
15. 1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 4.2: heading.html -->
6 <!-- Heading elements h1 through h6. -->
7
8
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> | Heading
9 <title>Headings</title>
10
11
</head> Creates six headings, each with elements
decreasing significance
h1 through
12 <body>
13 <h1>Level 1 Heading</h1>
14 <h2>Level 2 heading</h2>
15
16
17
<h3>Level
<h4>Level
<h5>Level
3
4
5
heading</h3>
heading</h4>
heading</h5>
h6.
18 <h6>Level 6 heading</h6>
19 </body>
20 </html>
15
16. Images
• Formats:
– .gif – Can be transparent or animated.
– .jpg – Smaller file sizes for photographs.
– .png – Portable Network Graphics.
Example:
<img src = "Logo.gif" alt="Logo" width ="80" height ="100"/
>
17. Images
• Inline Image
<img src=“filename”>
– filename is the name and extension of the image file
– filename may also include the path to the file as well
– supports GIF, JPEG and PNG image file formats
18. 1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3
4
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Images in
XHTML
5 <!-- Fig. 4.5: picture.html -->
6 <!-- Images in XHTML files. --> Specifies the image
7 <html xmlns = "http://www.w3.org/1999/xhtml">
file’s location
8
9
<head>
<title>Images</title>
Specifies the image’s
files.
10 </head>
11 width
12 <body> Specifies the image’s
13
14
<p>
<img src = "cpphtp6.jpg" width = "92" height = "120"
height
15 alt = "C++ How to Program book cover" /> Specifies text to display
16
17
<img src = "jhtp.jpg" width = "92" height = "120"
alt = "Java How to Program book cover" />
if the image is
18 </p> unavailable
19 </body>
20 </html>
18
19. Adding Hyperlinks to Text
Link to a different page:
<a href="home.htm" title="Home Page" >Home
page</a>
Link to a different place on same page:
<a href="#bottom"> bottom of page </a>
links to
…. <a name="bottom"> ending text </a>…
20. Pieces of a URL
Protocol Folder
http://www.mysite.com/files/jsPage.ht
m
Web Server Name File Name
21. Other Types of URLs
• http – HyperText Transfer Protocol.
– http://www.againsttheclock.com
• https – Secure HyperText Transfer
Protocol.
– https://www.melitta.com/default.html
• File – Searches local hard drive only.
– File:///HardDrive/desktop/headerpage.htm
• ftp – File Transfer Protocol.
– ftp://ftp4.netscape.com/netscape6/ntscfull.zip
22. Creating Links
• To other Web sites
– <a href=“#URL”>…</a>
URL is the address of the Web site on the Internet
Example: <a href=“http://www.concordia.ca”>…</a>
• To Internet resources such as email
– <a href=mailto:email_address>…</a>
23. 1
Linking to
<?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 other web
5 <!-- Fig. 4.3: links.html -->
6
7
<!-- Linking to other web pages. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
pages.
8 <head>
9 <title>Links</title> Creates anchor elements that
10 </head>
11
link to the URL specified in the
12 <body> href attribute
13 <h1>Here are my favorite sites</h1>
14 <p><strong>Click a name to go to that page.</strong></p>
15
16 <!-- Create four text hyperlinks -->
17 <p><a href = "http://www.deitel.com">Deitel</a></p>
18 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p>
19 <p><a href = "http://www.yahoo.com">Yahoo!</a></p>
20 <p><a href = "http://www.usatoday.com">USA Today</a></p>
21 </body>
22 </html>
23
24. 1 <?xml version = "1.0" encoding = "utf-8"?>
2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Linking to an e-
4
5 <!-- Fig. 4.4: contact.html -->
mail address (Part
6
7
<!-- Linking to an e-mail address. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
1 of 2).
8 <head>
9 <title>Contact Page</title> Hyperlink that creates a message
10 </head>
11 to the address
12 <body> deitel@deitel.com with
13 <p>
14 My email address is the computer’s default e-mail
15
16
<a href = "mailto:deitel@deitel.com">
deitel@deitel.com
program
17 </a>
18 . Click the address and your default email client
19 will open an e-mail message and address it to me.
20 </p>
21 </body>
22 </html>
24
27. 1
Internal
<?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> hyperlinks to
4
5 <!-- Fig. 4.14: internal.html --> make pages
6
7
<!-- Internal hyperlinks to make pages more navigable. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
more
8 <head>
Sets the id attribute navigable
9 <title>Internal Links</title>
10 </head> for the h1 element (Part 1 of 3).
11
12 <body>
13 <!-- id attribute creates an internal hyperlink destination -->
14 <h1 id = "features">The Best Features of the Internet</h1>
15
16 <!-- an internal link's address is "#id" -->
17 <p><a href = "#bugs">Go to <em>Favorite Bugs</em></a></p>
18
19 <ul>
20 <li>You can meet people from countries Creates a link to the
21 around the world.</li> element in this document
22 <li>You have access to new media as it becomes public:
23 <ul> with id = bugs
24 <li>New games</li>
25 <li>New applications
26 <ul>
27 <li>For Business</li>
28 <li>For Pleasure</li>
29 </ul>
30 </li>
31
27
28. 32 <li>Around the clock news</li>
33 <li>Search Engines</li>
34 <li>Shopping</li> Internal
35 <li>Programming
hyperlinks to
36 <ul>
37 <li>XHTML</li>
make pages more
38 <li>Java</li> navigable (Part 2
39 <li>Dynamic HTML</li> of 3).
40 <li>Scripts</li>
41 <li>New languages</li>
42 </ul>
43 </li>
44 </ul>
45 </li>
46
47 <li>Links</li>
48 <li>Keeping in touch with old friends</li> Sets the id attribute for
49 <li>It is the technology of the future!</li> this h1 element
50 </ul>
51
52 <!-- id attribute creates an internal hyperlink destination -->
53 <h1 id = "bugs">My 3 Favorite Bugs</h1>
54 <p>
55 <!-- internal hyperlink to features -->
56 <a href = "#features">Go to <em>Favorite Features</em></a>
57 </p>
58 <ol>
59 <li>Fire Fly</li>
60 <li>Gal Ant</li>
Creates a link to the element in
61 <li>Roman Tic</li>
62 </ol> this document with id =
63 </body> features
64 </html>
28
31. 1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Creating a basic
4
5 <!-- Fig. 4.10: table1.html --> table (Part 1 of
6
7
<!-- Creating a basic table. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
Begins a new 3).
8 <head>
XHTML table
9 <title>A simple XHTML table</title>
10 </head> Sets the table’s
11
border to be one pixel
12 <body>
13 wide
14 <!-- the <table> tag opens a table -->
Sets the table’s width
15 <table border = "1" width = "40%"
16 summary = "This table provides information about to 40% of the screen
17 the price of fruit">
18
19 <!-- the <caption> tag summarizes the table's --> Describes the table’s
20 <!-- contents (this helps the visually impaired) --> contents in the
21 <caption><strong>Price of Fruit</strong></caption>
22 summary attribute
23 <!-- the <thead> section appears first in the table -->
24 <!-- it formats the table header area --> Sets the text above
25 <thead> the table
26 <tr> <!-- <tr> inserts a table row -->
27 <th>Fruit</th> <!-- insert a heading cell -->
28 <th>Price</th> Creates a head
29 </tr>
30 </thead>
element
31
Creates a table heading
cell in the new table row
Makes a new table Creates the next cell in the row
31
row
32. 32 <!-- the <tfoot> section appears last in the table -->
33 <!-- it formats the table footer -->
34
35
<tfoot>
<tr>
Creates a foot section Creating a basic
36 <th>Total</th> table (Part 2 of
37 <th>$3.75</th>
38 </tr> Creates table header 3).
39
40
</tfoot>
cells at the bottom of
41 <!-- all table content is enclosed --> the table
42 <!-- within the <tbody> -->
43
44
<tbody>
<tr>
Creates a body
45 section
<td>Apple</td> <!-- insert a data cell -->
46 <td>$0.25</td>
47 </tr> Inserts a cell in the
48
49
<tr>
<td>Orange</td>
body of the table
50 <td>$0.50</td>
51 </tr>
52 <tr>
53 <td>Banana</td>
54 <td>$1.00</td>
55 </tr>
56 <tr>
57 <td>Pineapple</td>
58 <td>$2.00</td>
59 </tr>
60 </tbody>
61 </table> Ends the table
62
63 </body>
64 </html>
32
34. Tables (Cont.)
• You can merge data cells with the
rowspan and colspan attributes
– The values of these attributes specify the
number of rows or columns occupied by the
cell
– Can be placed inside any data cell or table
header cell
34
35. 1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Complex
4
5 <!-- Fig. 4.11: table2.html --> XHTML table
6
(Part 1 of 3).
<!-- Complex XHTML table. -->
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>Tables</title>
10 </head>
11
12 <body>
13 <h1>Table Example Page</h1>
14
15 <table border = "1">
16 <caption>Here is a more complex sample table.</caption>
17
18 <thead>
19 <!-- rowspans and colspans merge the specified -->
20 <!-- number of cells vertically or horizontally -->
21 <tr>
22 <!-- merge two rows --> Makes the header cell
23 <th rowspan = "2">
24 <img src = "camel.gif" width = "205" span 2 rows
25 height = "167" alt = "Picture of a camel" />
26 </th>
27
35
41. 1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3
4
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Nested and ordered
5 <!-- Fig. 4.9: list.html --> lists (Part 1 of 3).
6 <!-- Nested and ordered lists. -->
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>Lists</title>
10 </head>
11
12 <body>
13 <h1>The Best Features of the Internet</h1>
14
15 <!-- create an unordered list -->
16 <ul>
17 <li>You can meet new people from countries around
18 the world.</li>
19 <li>
20 You have access to new media as it becomes public:
21
22 <!-- this starts a nested list, which uses a -->
23 <!-- modified bullet. The list ends when you -->
24 <!-- close the <ul> tag. -->
25 <ul> A single list element
26 <li>New games</li>
27 <li>New applications
28
41
42. 29 <!-- nested ordered list -->
30 <ol> Creates an ordered
31 <li>For business</li> list within a list Nested and ordered
32 <li>For pleasure</li>
33 </ol>
element lists (Part 2 of 3).
34 </li> <!-- ends line 27 new applications li --> Ends nested list
35
36 <li>Around the clock news</li>
37 <li>Search engines</li>
Ends the list
38 <li>Shopping</li> element
39 <li>Programming Another single
40
41 <!-- another nested ordered list -->
unordered list
42 <ol> element
43 <li>XML</li> Creates an ordered
44 <li>Java</li> list within this list
45 <li>XHTML</li>
46 <li>Scripts</li>
element
47 <li>New languages</li>
48 </ol>
49 </li> <!-- ends programming li of line 39 -->
50 </ul> <!-- ends the nested list of line 25 -->
51 </li>
52
53 <li>Links</li>
54 <li>Keeping in touch with old friends</li>
55 <li>It is the technology of the future!</li>
56 </ul> <!-- ends the unordered list of line 16 -->
57 </body>
58 </html>
42
44. meta Elements
• One way that search engines catalog pages is by
reading the meta element’s contents.
– The name attribute identifies the type of meta
element
– The content attribute
• Of a keywords meta element: provides search
engines with a list of words that describe a page,
which are compared with words in search
requests
• Of a description meta element: provides a
three- to four-line description of a site in
sentence form, used by search engines to
catalog your site. This text is sometimes
displayed as part of the search result
45. 1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 | meta elements
5 <!-- Fig. 4.15: meta.html -->
6 <!-- meta elements provide keywords and a description of a page. --> provide keywords and
7
8
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
a description of a
9 <title>Welcome</title> page (Part 1 of 2).
10
11 <!-- <meta> tags provide search engines with -->
12 <!-- information used to catalog a site -->
13 <meta name = "keywords" content = "web page, design, Provides keywords
14
15
XHTML, tutorial, personal, help, index, form,
contact, feedback, list, links, deitel" />
describing the page for
16 <meta name = "description" content = "This website will a search engine
17 help you learn the basics of XHTML and web page design
18
19
through the use of interactive examples and
instruction." />
Provides the site’s description in
20 </head> sentence form for a search
21
22
<body>
<h1>Welcome to Our Website!</h1>
engine
23
24 <p>We have designed this site to teach about the wonders
25 of <strong><em>XHTML</em></strong>. <em>XHTML</em> is
26 better equipped than <em>HTML</em> to represent complex
27 data on the Internet. <em>XHTML</em> takes advantage of
28 XML’s strict syntax to ensure well-formedness. Soon you
29 will know about many of the great features of
30 <em>XHTML.</em></p>
31
32 <p>Have Fun With the Site!</p>
33 </body>
34 </html>
47. Frames
• Uses
– Consistent header and navigation throughout the site
– Information does not need to be repeated on multiple
pages
• Problems
– Not all browsers support frames
– May cause problems with search engine indexing
– Users may not like them
• Printing and bookmarking issues
– May effect performance
52. <frame> Attributes
• src=“filename”
specify the URL of the page to be loaded into the frame
• scrolling=YES or NO
display/remove scrollbars
• marginheight=“value” and marginwidth=“value”
distance (in pixels) between the frame border and its
contents
• noresize
frame can not be resized by the user
• name=“frame_name”
frame name to be used with hyperlinks
53. Frames and Hyperlinks
• By default a link will open in the same frame that
contains the link
• To open the link in a different frame (target
frame)
– Give the target frame a name
<frame src=“filename” name=“frame_name”>
– Include the target attribute in the <a> tag of the
hyperlink
<a href=“URL” target=“frame_name”>
57. Special Target Names
• _blank
Load the page in a new browser window
• _self
Load the page in the same frame that contains the link
• _parent
Load the page in the parent frame of the frame with the
hyperlink (for nested framesets)
• _top
Load the page in the full display area (replaces all
frames)
It is important to make the distinction between the Internet and the World Wide Web – they are not the same. The World Wide Web is just one aspect of the Internet. Web pages are formatted with HTML (we’ll learn more about this in upcoming slides) which allows the documents to be linked to other documents. You can jump from one page to another by clicking on the links. Web browsers provide users with access to the Web. There are several types of Web browsers available. The two most popular browsers are Internet Explorer and Netscape Navigator. Each browser often has several different versions as well. Different browsers and even different versions of a browser will vary in their level of support for HTML and other associated technologies. Because of this varying level of support it is important to test the Web pages that you create on different browsers to make sure that they load properly.
A Web browser running on a user’s computer (the client) will generate a request for a Web page. This request is transmitted across the Internet to the Web server that hosts that Web page. When the Web server receives the request it will locate the specified file and send it back through the Internet to the Web browser application. Depending on the type of Web page the server may need to perform some processing before returning the file or it may be even more complicated involving other servers. The Web browser receives the Web page file, formats the contents according to the HTML tags and finally displays the page in the browser window.
HTML is the language used to create Web pages. HTML pages are text files that include: Content – the actual content that is displayed on a Web page Tags – used to format the content of the Web page You will be working with HTML throughout the course as you learn how to create Web pages.
You will be working with Notepad for many of the assignments. In fact you will use Notepad to create your first Web page this week. This does require a little more effort than some of the other methods however, you will have a much better understanding of HTML when you work directly with the tags.
HTML editors are another tool for creating Web pages and the do have several advantages – we will discuss the advantages and disadvantages next week. We will be using FrontPage in this course. However, I would caution against relying too much on the GUI interface – you still need to learn the tags!
Guidelines for working with HTML tags. HTML tags are enclosed in brackets as shown in this slide. Most (but not all) tags come in pairs. There is an opening tag and a closing tag. The tags are similar but the closing tag will include a / as in the example. Content between the opening and closing tags can be further formatted by using tag attributes. Each tag has its own set of attributes. We will learn many of these as we learn the different tags. Attributes and their values are given in the opening tag. Tags can be nested within other tags. HTML is case insensitive. You can use either uppercase, lowercase or a combination for tag names and their attributes. However, I do suggest that you use all lowercase as other standards (such as XHTML) are case sensitive.
These are the structural tags that are used to define the major sections of the HTML document. The <html> tag indicates that the page is an HTML page and will be rendered by a Web browser. The <head> tag is used to define the head section of the HTML document. The head section can include the <title> tag, comments about the page, and other global information. The <title> tag is used to specify the title of the page. This is the title that appears in the title bar of the Web browser. The <body> tag is used to define the body of the HTML page. This includes the actual content that will be displayed in the browser window.
Headings - h1 through h6 Used to create document headings Change the font size and bold the text between the opening and closing tags h1 is the largest and h6 is the smallest The align attribute can be used to control the horizontal alignment. The default alignment is left. Other options include center, justify and right. Example: <h2 align=“center”>…</H2> Paragraph – p Breaks up text and will insert a blank line before and after the enclosed text Horizontal rule – hr Creates a horizontal line to separate sections of the Web page Break – br Create a line break Two of these used together will create a blank line Example: < br >< br >
Inline images are images that are placed within a Web page. The <img> tag does not have an align attribute. So, you will need to nest the <img> tag within a <p> tag to control the alignment. <p align=“center”><img src=“filename”></p> Note that the <img> tag does not require a closing tag.
Mailto links When the hyperlink is clicked the default email client on the computer will be launched and a new message will be created. The email address specified by the HREF attribute will be placed in the To field of the email address. Mailto links will not work if a default email client is not set up on the browser’s computer.
In this example you can see how two different web pages are loaded into a single window. In this case the display area has been divided into two columns. The toolbar.html is loaded into the left frame and the products.html file is loaded into the right frame.
While there are some benefits to using frames, there are also some problems. Keep these in mind when deciding whether or not to use frames. Also, frames should be use to facilitate the navigation of the Web page and should not be use to control the layout of a single page – use a table instead.
Frameset (frames page) – this is the web page that contains multiple frames Frame – part of the frameset; loads a single page The frames page is a separate page in the Web site (.htm) – it defines the organization of the frames. Note that the <body> tags have been replaced by the <frameset> tags.
The <frameset> tags has two attributes: Rows and Cols Within a single frameset tag you use either the rows attribute or the cols attribute but not both. Row or column size can be specified using either a percentage (of the total display area) or the number of pixels. Pixels are absolute while percentages will adjust as the window is resized. The * designates whatever amount of space is left (can be used with either percentages or pixels). In this example there are three rows – the first two each take up 33% of the space and the last frame takes up the remaining amount (34%). For each row in the frameset you need to have a <frame> tag to specify the course file that is loaded into each frame.
Columns function in the same manner as rows.
More complicated frame structures can be created by nesting one frameset within another. In this case the outer frameset specifies two rows (the first is 100 pixels and the second row takes up the remaining space. ) The first row load a page called header.htm. The second row is another frameset – this frameset specifies two columns. So, the second row is broken up into two columns.
Attributes of the <frame> tag can be used to specify the file that is loaded into the frame, the appearance of the frame and its behavior.
You can also specify a target for all the links in a Web page. His is done by including <base target=“target_name”> in the head section of the HTML code. <head> <title>Page Title</title> <base target=“target_name”> </head>
These can be used within the <a> tag as values for the target attribute.
Not all browsers support frames – so, it is possible to provide additional code to be executed if frames are not supported. If frames are supported then the frameset will be loaded – everything between the <noframes> tags will be ignored. . If frames are not supported then everything will in he <frameset> tags will be ignored. However, the information between the body tags will be displayed on the page.