Building Your Own Web Site Objectives

Building Your Own Web Site

Objectives • Create and publish a Web site • Write HTML code • Use resources to help build a Web site • Use HTML authoring tools

Creating a Simple Web Site from Beginning to End • Creating a Web site is a three-step process: 1. Create the Web page files. This includes the Web page and any additional multimedia content, such as an image file, sound file, or movie file. 2. View and modify the Web page. 3. Publish the Web site by copying these files to a Web server.

Creating a Simple Web Site from Beginning to End (Continued) • To publish your Web site, you need access to storage space on a Web server. • The Web server that stores your Web site files is known as your Web host.

Creating a Web Page • Using HTML, you can create a dynamic Web page that contains small and large text, hyperlinks to other Web sites, and even an image. • You can create your Web page using a text editor, such as Notepad or Word. Pad. • Although many other tools are available to create and publish Web pages, for your first effort, you use the tools that are common to every computer. • Notepad to create the Web page file and an FTP utility to publish the file to a Web host.

Publishing the Web Site • When you publish a Web site, you copy all the pages and supplemental files needed to build the Web site to the Server. • To copy files to a server, you need: – The domain name or IP address of the Web server where your Web site will reside – A user ID and password that gives you access to the server and your folder – The Web site file or files, and any supporting graphic files – Software to transport files from your computer to the server

HTML Structure • An HTML document is divided into two-parts, the header and the body. • The header contains information about the document, such as the editor that created it, and keywords that help a search engine find it. • Interspersed throughout the header and body are instructions. • Unlike the text and graphics, these instructions are not displayed by the browser.

HTML Structure (Continued) • HTML is interpreted and executed by the browser. • HTML instructions are called tags. • Most tags consist of a keyword. • An example of a keyword is head. • HTML tags are not case sensitive. • You can embed one pair of tags within another pair of tags.

HTML Structure (Continued) • All HTML documents should contain at least the following three sets of tags: <html></html> <head></head> <body></body> • An attribute allows you to specify how an HTML tag behaves.

HTML : Using Headings • Headings and tags assign a predetermined style to text in an HTML document and are used to enhance the appearance of the document. • Use headings tags to format and set off a title or subtitle on a page and to emphasize important text.

HTML : Using Graphics • Graphics, including photographs, clip art, background patterns, and artistic fonts, also are important elements of Web page design. • Three popular types of graphic files: – JPG – JIF – PNG

HTML : Organizing Files on a Web Site • Keeping all your Web site files in one folder can make managing those files difficult, especially when the Web site is complex. • If you are planning a large site, you need to plan the folder structure before you start creating the Web site. • In the top, or root folder, put the home page (index. htm, default. html, or some other name, depending on the requirements of the Web server). • All other folders should be stored in this main folder.

HTML : Using Hyperlinks to Point to Other Web Sites • One nice thing about hyperlinks is that you can use them to point to other HTML files, either on the same Web site or on a different site. • The anchor tag, <a>, is a tag that marks a link to another part of the same document or to another document. • The tag must be used with an attribute; the most common attribute used with the <a> tag is href.

HTML : Using a Graphic as a Hyperlink • A graphic can also be used as a hyperlink. • Instead of entering text in the anchor tag, you simply enter the <img> tag for the graphic. • Example:

HTML : Using Hyperlinks to Point to Locations Within One Document • To create a hyperlink that links to another point in the same HTML file, you need two anchor tags: one for the hyperlink itself and a second anchor tag that marks the destination place in the Web page. • The second anchor tag is called the link target, destination anchor tag, or the jump link.

HTML : Creating Links That Point to Other Pages on the Same Web Site • A hyperlink that points to a different file on the same site needs an anchor tag that contains the name of the HTML file that is the destination, or jump link.

HTML : Using HTML Tables • Web pages commonly make use of tables as convenient methods of organizing information. • A browser displays a table as a set of rows and columns.

HTML : Using HTML Tables

HTML : Creating HTML Forms for Data Input • It’s often necessary to have your Web page collect data from the user and transfer it back to the Web server, or send it to you or someone else through e-mail. • To accomplish this, you need to create a form, which is an HTML element that allows a Web page to collect data and send it back to the Web server or an e-mail recipient. • A form can use standard Windows elements, such as text boxes, check boxes, radio buttons, drop-down lists, and other elements to collect data.

HTML : Testing Your Site • You should always test your Web site before you publish it. • Start by testing all the hyperlinks. • Be certain to test every hyperlink on every page to make certain that each link jumps to the correct location. • In addition to testing hyperlinks, you need to check the appearance of your Web page using different Web browsers in varying versions, and ensure your Web page doesn’t take too long to download.

HTML: Testing Your Site (Continued) Testing Various Browsers and Screen Resolutions • Web browsers interpret HTML in ways that are subtly unique. • In addition, individual settings such as screen resolution can dramatically affect the way a Web page looks. Calculating Download Rates • Bandwidth is the speed at which data is transmitted, usually measured in bits per second.

HTML: Testing Your Site (Continued) • If your Web page takes a long time to download, users will get frustrated and not view your page. • Every communication, every instruction, and every piece of data in a computer can be reduced to a series of zeroes and ones. • The term bit refers to a state, either On (one) or Off (zero).

HTML: Testing Your Site (Continued) • The following list summarizes information about bits and bytes: – A bit is either a 0 or a 1 – 1, 024 bits = 1 kilobit (1 Kb) – 8 bits = 1 byte – 1, 024 bytes = 1 kilobyte (1 KB) – 1, 024 kilobytes = 1 megabyte (1 MB) – 1, 024 megabytes = 1 gigabyte (1 GB)

Resources to Help You Develop Web Design Skills • Check out these sites, which have much to offer to both the novice and the expert and also offer some free graphics and photos: – HTML Help by the Web Design Group at www. htmlhelp. com – CNET Web Building at builder. com and www. cnet. com – Web Developer’s Virtual Library at www. wdvl. com – Refer to page 103 for the remainder of this list.

Using a Simple HTML Code. Based Editor • Many good code-based HTML editors are available. • Cute. HTML can be downloaded from the Web site www. globalscape. com, www. download. com, or www. cutehtml. com. • You can download a free evaluation version that works for 30 days.

Introducing Microsoft Front. Page • If you have access to Microsoft Front. Page, you should complete the steps listed in the text to create the index. html file. • Refer to pages 104 through 110 for the procedures to create the index. htm file in Front. Page.

Macromedia Dreamweaver • Dreamweaver, by Macromedia, is a favorite WYSIWYG HTML editor for professionals. • Pages created in Dreamweaver can be customized using Java. Script, and HTML. • You can edit tags manually in design view without using the HTML editing window or an external HTML editor.

Macromedia Home. Site • Home. Site, by Macromedia, is an HTML editor that began as a shareware program and has evolved to become one of the most popular code-based HTML editors on the market. • Beginners find it easy to master and it also is popular with more advanced users.

Net. Objects Fusion • Net. Objects Fusion is a good tool for those who have little HTML experience, but who want to produce a Web site quickly without having to deal with HTML code. • Net. Objects Fusion is not as popular with experienced HTML users.

Adobe Go. Live • Go. Live, by Adobe, is available for both Macintosh and Windows systems. • The interface is easy to use in its presentation of basic HTML functions, but not as simple when creating style sheets.

Cute. HTML • It’s an easy-to-use, code-based HTML editor that offers color-coded tags and help when entering tags. • When you begin to type a tag, a dropdown list of tags opens. • When you select a tag, a drop-down list of attributes for that tag opens.

1 st Page 2000 • 1 st Page 2000, by Eversoft Inc. , is a free HTML editor that offers four modes of use: Easy, Normal, Expert, and Hardcore.

Summary • A Web Site requires hard drive storage space on a Web server, together with an account and password to the server to be published. • HTML contains instructions called tags that are enclosed in angle brackets. • Three types of graphic files supported by the Internet are JPEG, for photographs, and PNG, and GIF files for clip art.

Summary (Continued) • Hyperlinks are created using the HTML anchor tags <a>. • An HTML form receives user input that can be e-mailed to a recipient or sent back to the Web server for processing. • HTML editors are of two types: code-based and graphical (also known as WYSIWYG).