Building Your Own Web Site - PowerPoint PPT Presentation

Loading...

PPT – Building Your Own Web Site PowerPoint presentation | free to download - id: 2139c-NmEyM



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Building Your Own Web Site

Description:

... to both the novice and the expert and also offer some free graphics and photos: ... You can download a free evaluation version that works for 30 days. ... – PowerPoint PPT presentation

Number of Views:65
Avg rating:3.0/5.0
Slides: 35
Provided by: meya9
Learn more at: http://www.csudh.edu
Category:
Tags: building | free | graphics | site | web

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Building Your Own Web Site


1
Building Your Own Web Site
2
Objectives
  • Create and publish a Web site
  • Write HTML code
  • Use resources to help build a Web site
  • Use HTML authoring tools

3
Creating a Simple Web Site from Beginning to End
  • Creating a Web site is a three-step process
  • 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.
  • View and modify the Web page.
  • Publish the Web site by copying these files to a
    Web server.

4
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.

5
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 WordPad.
  • 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.

6
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

7
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.

8
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.

9
HTML Structure (Continued)
  • All HTML documents should contain at least the
    following three sets of tags
  • An attribute allows you to specify how an HTML
    tag behaves.

10
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.

11
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

12
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.

13
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, , 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 tag is href.

14
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 tag for the graphic.
  • Example

15
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.

16
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.

17
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.

18
HTML Using HTML Tables
19
HTML Creating HTML Forms for Data Input
  • Its 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.

20
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 doesnt take too long to
    download.

21
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.

22
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).

23
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)

24
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 Developers Virtual Library at www.wdvl.com
  • Refer to page 103 for the remainder of this list.

25
Using a Simple HTML Code-Based Editor
  • Many good code-based HTML editors are available.
  • CuteHTML 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.

26
Introducing Microsoft FrontPage
  • If you have access to Microsoft FrontPage, 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 FrontPage.

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

28
Macromedia HomeSite
  • HomeSite, 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.

29
NetObjects Fusion
  • NetObjects 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.
  • NetObjects Fusion is not as popular with
    experienced HTML users.

30
Adobe GoLive
  • GoLive, 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.

31
CuteHTML
  • Its 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 drop-down list of
    tags opens.
  • When you select a tag, a drop-down list of
    attributes for that tag opens.

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

33
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.

34
Summary (Continued)
  • Hyperlinks are created using the HTML anchor tags
    .
  • 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).
About PowerShow.com