• Save
Tutorial 8 - Creating Effective Web Pages
Upcoming SlideShare
Loading in...5
×
 

Tutorial 8 - Creating Effective Web Pages

on

  • 5,417 views

 

Statistics

Views

Total Views
5,417
Views on SlideShare
5,408
Embed Views
9

Actions

Likes
5
Downloads
0
Comments
0

2 Embeds 9

https://etudes-ng.fhda.edu 8
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Tutorial 8 - Creating Effective Web Pages Tutorial 8 - Creating Effective Web Pages Presentation Transcript

  • Tutorial 8 Creating Effective Web Pages
  • Objectives
    • Define HTML and understand how it works
    • Examine the tools used to create HTML documents
    • Understand tags, attributes, and anchors
    • Create an HTML document
    • Add graphics and links to an HTML document
    • Examine Web site creation and management programs
    New Perspectives on The Internet, Seventh Edition
  • Objectives
    • Learn about JavaScript, Flash, and Shockwave
    • Learn about the different types of graphics that you can use in a Web page and the programs that create them
    • Understand the questions to ask when selecting a Web hosting service
    • Understand the issues involved when publishing a Web site
    • Learn about search engine submission and search engine optimization
    New Perspectives on The Internet, Seventh Edition
  • Understanding Markup Languages
    • Hypertext Markup Language ( HTML ): nonproprietary markup language that a Web browser interprets and uses to display the content as a Web page
    • Markup language : general term that indicates the separation of the formatting of a document and the content of a document
    • Standard Generalized Markup Language ( SGML ): metalanguage (language used to create other languages) was the standard for formatting documents in a way that was not dependent on the operating system or environment on which the documents were created or viewed
    New Perspectives on The Internet, Seventh Edition
  • Understanding Markup Languages
    • Tim Berners-Lee and Robert Calliau developed the first version of HTML using SGML in 1989
    • World Wide Web Consortium ( W3C ) developed specifications , or sets of standards, that identify how a browser interprets the HTML code
    • Specifications are voluntary, but most organizations follow the specifications as much as possible
    • Current specification for HTML is 401
      • Since 2004, the W3C has been working on the fifth revision of the HTML specification
    New Perspectives on The Internet, Seventh Edition
  • Understanding Markup Languages
    • Extensible Markup Language ( XML ): popular markup language that began in 1998 to describe the format and structure of data
    • Extensible Hypertext Markup Language ( XHTML ) or XHTML 11 :
      • Most recent markup language specification from the W3C
      • Combines the formatting features of HTML with a stricter syntax that works to combine HTML and XML so that Web content is more readily and easily delivered to all devices that are connected to the Internet
      • Compatible with the HTML 401 specification
    • HTML specifications not included when newer specifications are released or not included in the XHTML specification are deprecated
    New Perspectives on The Internet, Seventh Edition
  • Understanding Tags and Attributes
    • Tags : codes that indicate different elements on a Web page such as headings, paragraphs, and bulleted lists
    • Nested tags : tags that are included within other tags
    • Tags are either two-sided and require a tag at the beginning and the end of the element, or they are one-sided
    • Some tags include attributes that specify additional information about the content to be formatted by the tag
    New Perspectives on The Internet, Seventh Edition
  • Planning an HTML Document
    • To create a Web page, use a text editor or use a program that includes features for working with Web pages and Web sites
      • An example of a text editor is the Notepad program that is installed with Windows
      • When you use a text editor to create a Web page, you type the content of the Web page and the tags that you need to format that content; you need a thorough understanding of HTML
    • Programs such as Microsoft Expression Web or Adobe Dreamweaver provide a graphical user interface ( GUI ) in which you type the content of your Web page and use toolbar buttons and menus to format that content, and then the program creates all of the necessary tags to format the Web page
    New Perspectives on The Internet, Seventh Edition
  • Planning an HTML Document New Perspectives on The Internet, Seventh Edition
  • Planning an HTML Document
    • Color is an element that depends on the user’s computer and browser to render it correctly
    • Web-safe color palette : collection of 216 colors that all computers render in the same way
    • The fonts that are available on your computer are not always the same ones that are available on other computers
    • A good rule for beginning Web page developers is to use fonts that are considered to be common on all computers
    New Perspectives on The Internet, Seventh Edition
  • Planning an HTML Document New Perspectives on The Internet, Seventh Edition
  • Creating an HTML Document
    • Start Notepad
    • Save the document with the html filename extension
      • Filename extensions htm and html are associated with Web pages
      • If you used the default filename extension for text files (txt) or any other filename extension besides htm or html, then a Web browser will not recognize your file as a Web page
    • Need an opening <html> tag to indicate that the file is an HTML document
    New Perspectives on The Internet, Seventh Edition
  • Creating the HTML Document Structure
    • Head section :
      • Begins with the <head> tag
      • Includes general information about the document, such as keywords that identify the document’s content for search engines and comments about the document’s creator or the date the document was last updated
      • Includes the nested <title> tag
        • Identifies the title of the Web page so the browser can display it in the title bar and page tab
        • Used to identify the content of the page
        • Appears as the default name when you use the browser to save the page as a bookmark or favorite
    • The <head> tag is a two-sided tag, so you must include the closing </head> tag
    New Perspectives on The Internet, Seventh Edition
  • Creating the HTML Document Structure
    • Body section :
      • Required in an HTML document after the head section
      • Includes the content of the Web page along with the tags needed to format that content
      • Opening <body> tag indicates the beginning of the body section
      • Closing </body> tag indicates the end of the body section
    • Include the closing </html> tag as the last item in the HTML document
    New Perspectives on The Internet, Seventh Edition
  • Basic HTML Document Structure in Notepad New Perspectives on The Internet, Seventh Edition
  • Adding a Comment to an HTML Document
    • In an HTML document, comments identify the author, purpose, date created or last updated, and other information as required
    • Comment tag :
      • One-sided tag
      • Browser ignores it and does not display it in a Web page
      • Visible when you view the HTML document in a text editor
      • Has the following syntax:
        • <!-- comment -->
      • Can appear anywhere in an HTML document
    New Perspectives on The Internet, Seventh Edition
  • Inserting and Formatting Headings
    • Identify headings with tags
      • Use the <h1> tag for a level-one heading
      • Use the <h2> tag for a level-two heading
      • And so on down to the <h6> tag for a level six heading
    • Add attributes to change alignment and color of headings
    New Perspectives on The Internet, Seventh Edition
  • Inserting and Formatting Headings
    • To change the alignment:
      • In HTML, add the align attribute with the center value, for example: <h1 align=&quot;center&quot;>
      • Center value is deprecated in XHTML
      • To add a code that is compatible with both HTML and XHTML, use the style attribute with the text-align: center value, for example: <h1 style=&quot;text-align: center&quot;>
    • To change the color, add a color attribute to the heading tag
    • When using the style attribute, you can separate multiple values with a semicolon
    New Perspectives on The Internet, Seventh Edition
  • Headings and Comment Added to the HTML Document New Perspectives on The Internet, Seventh Edition
  • Inserting and Formatting Headings
    • As you work in an HTML document, it is a good idea to check your work periodically in a Web browser to look for problems in your coding and also to make sure that the page you are creating looks correct
    • As you are working with your HTML document in your text editor, you can save the page and then refresh the Web page in the browser to see your updates
    New Perspectives on The Internet, Seventh Edition
  • Inserting and Formatting a Paragraph
    • To insert a paragraph in an HTML document:
      • Type the opening paragraph tag <p>
      • Type the paragraph text
      • Type the closing paragraph tag </p>
    • To change font style:
      • Enclose the text in the appropriate tags
      • To change text to italics, use the italic tags <i> and </i>
      • To change text to bold, use the bold tags <b> and </b>
    New Perspectives on The Internet, Seventh Edition
  • Paragraph Added to HTML Document New Perspectives on The Internet, Seventh Edition
  • Creating a List
    • HTML supports three kinds of lists:
      • Bulleted list ( unordered list ): contains a list of items with a bullet character to the left of each item in the list
      • Numbered list ( ordered list ): creates a list of items with sequential numbering for each item
      • Definition list : usually associated with terms and their definitions
    New Perspectives on The Internet, Seventh Edition
  • Creating a List New Perspectives on The Internet, Seventh Edition
  • Using Pictures in an HTML Document
    • Graphic : any file that contains a picture, such as a photograph, logo, or computer-generated image
    • To include a picture in a Web page, it must be stored as a file
    • Graphic file formats commonly used on the Web:
      • JPG (or JPEG)
      • GIF
      • PNG
    New Perspectives on The Internet, Seventh Edition
  • Using Pictures in an HTML Document
    • The JPG format is good for photographs and complex graphics because JPG files support up to 16 million colors
    • GIF files are limited to 256 colors, so they are a good choice for scanned images, line drawings, and simple graphics
    • PNG files are similar to GIF files, but support up to 16 million colors
    • Nearly all Web browsers support JPG, GIF, and PNG files; however, some older versions of browsers do not support PNG files, and as such it is not as popular on the Web as the JPG and GIF formats
    New Perspectives on The Internet, Seventh Edition
  • Using Pictures in an HTML Document
    • To use a graphic in an HTML document, reference the file location where the graphic is stored by using the one-sided <img /> tag
      • If the graphic is stored in the same folder (directory) as the HTML document, then the browser loads the graphic from the same folder
      • If the graphic is stored anywhere else, the reference to it in the HTML document must include the path to the folder or drive on which the graphic is stored
    New Perspectives on The Internet, Seventh Edition
  • Using Pictures in an HTML Document
    • Src (source) attribute:
      • Must be included with the <img /> tag
      • Defines the location of the graphic
      • Relative path : specifies a file’s location relative to the location of the current file
      • Absolute path : specifies a file’s location with absolute precision; there is no reference to the current file
    New Perspectives on The Internet, Seventh Edition
  • Using Pictures in an HTML Document
    • Optional attributes for the <img /> tag are:
      • Height and width : describe the graphic’s height and width in pixels
        • Pixel is a single point in an image
      • Border : describes the graphic’s border size in pixels
      • Alt : provides alternative text that identifies the graphic’s function or description when it is loaded by a browser that either does not display pictures or reads Web page content for visually impaired users
    • The alt attribute is required in XHTML, so you should always include it
    New Perspectives on The Internet, Seventh Edition
  • Broken Link Displayed in Internet Explorer New Perspectives on The Internet, Seventh Edition
  • Using Anchors
    • Anchor tag ( <a> ):
      • HTML tag that creates a hyperlink
      • Two-sided tag
      • Includes the href attribute, which specifies the filename of the target page
    • Target or target page : page that opens when a hyperlink on a Web page is clicked
    • Source page : Web page that contains a hyperlink
    • Bookmark : hyperlink to a location on the same Web page as the source page
    New Perspectives on The Internet, Seventh Edition
  • Adding a Link to a Web Page
    • You can create a hyperlink at any time when developing a Web page
    • Make sure that the page to which you are linking exists and that the page exists in the correct location
      • To avoid problems, open the source page in a browser, and then click the hyperlink to make sure that it opens the correct page
      • Do the same testing after you publish the HTML document to the server
    New Perspectives on The Internet, Seventh Edition
  • Using a Web Site Management Tool
    • Most Web developers rely on options other than text editors for creating Web sites, such as Microsoft Expression Web and Adobe Dreamweaver
      • These standalone programs use a graphical user interface (GUI) to generate the HTML documents necessary to produce Web pages
      • Using a Web site management tool such as Expression Web or Dreamweaver lessens the burden on the developer to understand the syntax of all the HTML tags and attributes that create Web pages
    New Perspectives on The Internet, Seventh Edition
  • Web Page Created Using Microsoft Expression Web New Perspectives on The Internet, Seventh Edition
  • HTML Document Generated by Expression Web New Perspectives on The Internet, Seventh Edition
  • Web Page Created Using Adobe Dreamweaver New Perspectives on The Internet, Seventh Edition
  • HTML Document Generated by Dreamweaver New Perspectives on The Internet, Seventh Edition
  • Choosing Other Development Tools
    • Some Web pages include dynamic content that is beyond the capabilities of HTML
    • This dynamic content might be a graphic that represents the number of times a page has been viewed, an animated graphic, or an interactive product display
    • This type of Web page content requires more than just HTML to produce
    New Perspectives on The Internet, Seventh Edition
  • Programming with JavaScript
    • Scripting language : a programming language that is executed by a Web browser
    • Scripting engine : a browser feature that processes scripts by translating the code in the script into a format that the browser can execute
    • JavaScript :
      • Scripting language
      • Originally available as part of the Netscape Navigator browser
    New Perspectives on The Internet, Seventh Edition
  • Programming with JavaScript
    • Microsoft created a compatible language called JScript , and subsequently, the language VBScript , both of which are processed by Internet Explorer
    • Because JavaScript is interpreted by most browsers and only the Internet Explorer browser can process scripts written in VBScript, most developers choose JavaScript to extend the functionality of a Web page
    • Many Web sites include resources for downloading and installing free scripts written in JavaScript in your Web pages
    New Perspectives on The Internet, Seventh Edition
  • Programming with JavaScript
    • The script itself is embedded in the head section of the HTML document
      • When you view the HTML document in a Web browser, the browser executes the script and displays the result of the script in the body section of the Web page
      • When a browser cannot execute the script (because it does not have a scripting engine to process the script), it simply displays the contents of the script as text
      • To avoid this situation, most scripts are enclosed in HTML comment tags so browsers that cannot execute the script will ignore the script as if it were really a comment
    New Perspectives on The Internet, Seventh Edition
  • Programming with JavaScript
    • You can use a script to:
      • Display a greeting based on the time of the day, or the day of the week, or a special occasion
      • Display a calendar or an interactive calendar that lets the user pick a date
      • Display the current date and time, or a countdown until a specific day and time, such as a holiday or a grand opening
      • Display scrolling text, a drop-down menu of selections, or animated buttons that change color or display a message when the user points to or clicks the button
      • Detect the user’s browser version or open a pop-up window with a message
      • Add functionality to a Web page, such as a simple or scientific calculator
    New Perspectives on The Internet, Seventh Edition
  • Creating Animated Content
    • Browser extensions : software that enhances the capabilities of Web browsers to perform tasks they were not originally designed to perform
    • Plug-ins : integrated browser software that the browser uses to display or play a specific file that you request
    • Helper applications : programs installed on the user’s computer that the browser starts and uses to “help” display or play a file
    • Add-ons : tools that enhance your browsing experience, such as toolbars that let you access a search engine without opening its Web site or programs that block pop-up ads and other windows from opening when you view a Web site
    New Perspectives on The Internet, Seventh Edition
  • Creating Animated Content New Perspectives on The Internet, Seventh Edition
  • Creating Animated Content
    • Flash :
      • The Flash Player lets your Web browser display simple animations, user interfaces, static graphics, movies, sound, and text that was created using Adobe Flash software
      • 96% of all Internet users have the Flash Player installed on their computers, so many Web developers regularly use Flash to develop content that is more visually interesting and appealing to their site visitors
      • Latest version of Internet Explorer includes the Flash Player so users do not have to download it
    New Perspectives on The Internet, Seventh Edition
  • Creating Animated Content
    • Shockwave Player :
      • More fully featured browser plug-in than Flash Player
      • Lets you view animated, 3D interfaces, interactive advertisements and product demonstrations, multiuser games, streaming CD-quality audio, and video that was created using Director software
      • Uses streaming technology so you do not need to wait for an entire file to download before playing it
      • According to Adobe, more than 200 million Internet users use Shockwave Player to play games and view animated content
    New Perspectives on The Internet, Seventh Edition
  • Creating Animated Content
    • Flash is much less expensive to purchase than Director (the program used to create Shockwave files), and Flash Player is a much more widely distributed plug-in than Shockwave Player
    • Flash is the more attractive choice for creating animation in a Web page, unless the more robust features of Director are required for creating games and extensive applications
    • Flash is also delivered well to various types of mobile devices, which is an important consideration given the developments and future expansion in wireless Internet devices
    New Perspectives on The Internet, Seventh Edition
  • Choosing Image Editing and Illustration Programs
    • Computer-generated graphics come in two basic varieties:
      • Raster ( bitmap ) graphics :
        • Composed of pixels
        • Also called bitmap images
      • Vector graphics :
        • Composed of paths
    New Perspectives on The Internet, Seventh Edition
  • Graphic Created Using Windows Paint New Perspectives on The Internet, Seventh Edition
  • Choosing Image Editing and Illustration Programs
    • Raster graphics have the following filename extensions:
      • bmp
      • gif
      • jpg
      • png
      • tif
    • Raster graphics are created using:
      • Paint
      • Adobe Photoshop
      • Adobe Fireworks
      • Corel Paint Shop Pro
    • Any image that you take using a digital camera or make using a scanner is a raster graphic
    New Perspectives on The Internet, Seventh Edition
  • Graphic Created Using Adobe Illustrator New Perspectives on The Internet, Seventh Edition
  • Choosing Image Editing and Illustration Programs
    • Vector graphics have the following filename extensions:
      • ai
      • wmf
      • cdr
      • dxf
    • Vector graphics are created using:
      • Illustrator,
      • CorelDRAW
      • AutoCAD programs
    New Perspectives on The Internet, Seventh Edition
  • Choosing Image Editing and Illustration Programs
    • Raster graphics are the choice for photographs and graphics with different levels of shading
    • Vector graphics are the choice when you need to create drawings that require lines and curves to create different shapes
    • Raster graphics require the use of a category of programs called image editing programs
    • Vector graphics require the use of a category of programs called illustration software
    New Perspectives on The Internet, Seventh Edition
  • Choosing a Web Hosting Service
    • Choose a Web hosting service or a Web presence provider to host a Web site before you begin work on creating the Web site’s pages
    • The choice of a Web hosting service is more than just one of affordability—it is important to understand what services the company offers and the software it uses to host sites
    • It is important to have a thorough understanding of what is involved in upgrading your server space and services in case your initial plan changes over time
    New Perspectives on The Internet, Seventh Edition
  • Understanding Your Web Site’s Technical Requirements
    • First, evaluate your Web site’s content and goals and understand the tools that you will be using to create your pages
    • Storyboard:
      • Sketch of the Web site that shows the pages that you plan to include, separated into levels that show the relationships of the pages to each other
      • Also called the site’s navigation structure, because it shows the path of navigation through the site
    New Perspectives on The Internet, Seventh Edition
  • Sample Storyboard New Perspectives on The Internet, Seventh Edition
  • Understanding Your Web Site’s Technical Requirements
    • If you have pages that process information, such as collecting data supplied by the user in a form and storing it in a database or other file or sending the results of that form to an e-mail address, the Web server must collect the data and save it in the specified format
    • The Web server must rely on a server extension or a script to process the data collected in the form
    • If your site uses Active Server Pages ( ASP )—dynamic Web pages based on the content stored in a database—you’ll need to store the site on a Windows-based Web server because the Unix and Linux Web servers do not support ASP
    New Perspectives on The Internet, Seventh Edition
  • Using a Secure Server
    • Secure sever : encrypts data
    • Dedicated server : Web server that hosts only one site
    • Shared server : hosts several sites
    • If you plan to use a secure server, you need to install a server certificate to prove to users that the site is actually secure
    New Perspectives on The Internet, Seventh Edition
  • Understanding Your Web Site’s File Size and Transfer Requirements
    • Consider the amount of traffic your site will receive and the sizes of the files that users will download from the Web server
    • Bandwidth or data transfer : amount of data that is transferred from the Web server
      • Most companies sell server space based on a file size limit and a daily or monthly data transfer limit
      • When you exceed either of these limits, you might incur extra fees from the Web hosting service or your Web hosting service might not be able to increase your Web site’s server space or bandwidth
    New Perspectives on The Internet, Seventh Edition
  • Understanding Your Web Site’s File Size and Transfer Requirements
    • Make sure that the company you select to host your site has technical support services available to you when you need them, especially if you are a new Web site developer
    • When you talk to people at the Web hosting service, try to get a sense of the level of support and service that it provides
    • When you view the online help resources, you can get a sense of the company’s intended audience and whether it will assist you with future questions
    New Perspectives on The Internet, Seventh Edition
  • Securing a Domain Name
    • When securing a Web hosting service, ask about the Web hosting service’s policy for securing a domain name for your Web site
      • You can use a registrar such as Register.com to enter your proposed domain name and check its availability
      • If the domain name you want is available, see if the Web hosting service can purchase it as part of your hosting agreement and assist you to establish the company as the Web site’s host
      • When you renew your Web site hosting contract, ask the company if it provides domain name renewal service so it will automatically renew your domain for you
    New Perspectives on The Internet, Seventh Edition
  • Asking about Other Services Offered by the Web Hosting Service
    • Items, such as site statistics, e-mail accounts for the domain name you registered, Web site templates, Web site construction tools, and database software are “value added” by most companies
    • You might need to pay an extra service fee to obtain detailed site traffic reports, but this information is very valuable when analyzing who is coming to your site and which pages they are viewing
    New Perspectives on The Internet, Seventh Edition
  • Publishing a Web Site
    • Publishing your Web site means moving your files to the company’s Web server
    • Most companies will ask you to use FTP to move your files
    • Control panel : Web page you access with your Web site’s user name and password that includes all the tools
    • If you are using a Web site management program, you can use the tools in those programs to publish your Web site
    New Perspectives on The Internet, Seventh Edition
  • Publishing a Web Site
    • When you move your Web site’s files to the Web server, include all of the folders and supporting files to the Web server, and not just the Web site’s HTML documents
      • A common mistake is to omit the Web site’s supporting files, such as pictures and multimedia files
      • If your HTML documents include relative links to supporting files, include the supporting files in the same folders as the HTML documents
      • If your HTML documents include absolute links, make sure that the location of the absolute link is available
    New Perspectives on The Internet, Seventh Edition
  • Publishing a Web Site
    • After you publish a Web site for the first time, make any changes to the copy that you stored on your local drive, and then move those files to the Web server
    • If something happens to the Web site stored on the Web server (the remote Web site ), you will be able to publish the files from the copy of the Web site on your hard or other local drive (the local Web site )
    • If you make changes to pages stored on the server and someone is viewing those pages at the same time that you are editing them, they will have problems with broken links and other problems while you are editing the page
    New Perspectives on The Internet, Seventh Edition
  • Search Engine Submission and Optimization
    • The <meta> tag is a summary of the page’s contents that a search engine might include in its search results
    • A search engine indexes the page by looking at the keywords in the <meta> tag to identify the search expressions that users might type to locate your page
    • Search engine submission : process of submitting your site’s URL to one or more search engines so they will list your site in their indexes
    • Search engine optimization : process of fine-tuning your site so that it ranks well in a search engine’s results when a user searches the Web using your site’s keywords
    New Perspectives on The Internet, Seventh Edition
  • Summary
    • Markup languages are used to create Web pages
    • Text editors are one way to create a simple Web page that includes a graphic, a heading, a paragraph with formatted text, a bulleted list, and a hyperlink
    • Programs such as Microsoft Expression Web and Adobe Dreamweaver are more sophisticated ways to create Web pages and manage a Web site
    • JavaScript can display animated content in a Web page
    • Image editing programs and illustration software create graphics
    New Perspectives on The Internet, Seventh Edition
  • Summary
    • The Flash Player and the Shockwave Player are two programs that are popular for displaying animated content
    • Consider all the issues when selecting a Web hosting service
    • Move all of your Web site’s files from your local drive to a Web server
    • To list a Web site in search engines, create <meta> tags to cause your Web site to be ranked high in the search engine results
    New Perspectives on The Internet, Seventh Edition