Computer Basics

Link to Applications 2 - Applications:  Web Pages

Link to Home - Jan's Illustrated Computer Literacy 101



To create a web page for the Internet, you must write HTML (Hypertext Markup Language) code to define what is on the page, create or acquire the images for the page, and then upload the files to a web server.

 

What do you need?

  • HTML editing program
  • Graphics editing program
  • Uploading program
  • Browser
  • Web space

HTML Editor:
You can use any plain text editor, like Notepad, to write the code. Or, you can use a specialty program for writing HTML pages. Such programs make it much easier to manage complex pages and large web sites. Also useful are programs that help you write scripts or that check your HTML code for errors.

Popular programs for writing HTML include Notepad (write the code yourself!), Microsoft Expression Web, and Macromedia Dreamweaver.

Graphics:
For the images on your web pages you need a graphics program that can save your images in GIF or JPG format. PNG format will work for newer browsers, but GIF and JPG work for all browsers.

TipMS Paint: Older versions of MS Paint, which comes with Windows, cannot save images in GIF, JPG or PNG formats.

Dialog: MSPaint Save As  - file typesCan your version?
Open MS Paint (Start menu > Run > type mspaint and click OK). Look in the Save As dialog at the file types: File > Save As > File type list. If the list includes GIF and JPG, you are ready to create and edit images for your web pages.

(If you do much with images, you will soon want a more advanced program than MSPaint!)

TipYou might also want a scanner to scan photos and drawings. Collections of clip art come in very handy.

Uploading:
To move your new web pages and images to a web server, you need uploading software, such as an FTP program. HTML editors like Expression Web and Dreamweaver include uploading as a built-in feature.

Browser:
To view your web pages you need a browser, like Internet Explorer, FireFox, Google Chrome, Safari, or Opera.

Web space:
You can view pages yourself that you save to your hard disk, but no one else can see them. You need access to space on a web server to share your work with others on the Web. Your ISP account, with which you connect to the Internet, may come with some web space. There are ad-based, free web hosting accounts. Or, you can purchase a web hosting account with a commercial hosting service.


Where you are:
JegsWorks > Lessons > Computer Basics


1. Computer TypesArrow: Subtopics
Link to Applications 2. ApplicationsArrow: Subtopics list open
    Intro
    Word Processing
    Desktop Publishing
    Spreadsheet
    Database
    Graphics
    Presentations
    Communications
    Browser
    Web Pages
    Email
    Security & Utility
    PIM
    Integrated & Suites
    Quiz
3. InputArrow: Subtopics
4. ProcessingArrow: Subtopics
5. OutputArrow: Subtopics
6. StorageArrow: Subtopics
7. Computer to ComputerArrow: Subtopics
8. System SoftwareArrow: Subtopics
9. ProgrammingArrow: Subtopics

10. What You SeeArrow: Subtopics
11. Hands On!Arrow: Subtopics
12. On Your OwnArrow: Subtopics

Search

Glossary

Appendix



HTML Code

When each logical part of a web page is marked, the browser will know how to display the contents in a way that makes sense for the particular display device and user.

Special code tags are used to mark all the parts of a web page. For example the text in an ordinary paragraph is written in between opening and closing tags like this:

<p>This is a paragraph</p>


Example

In the frame below is a simple web page. Click the link below it to view the source code for the page. Can you find the tags that define the two headings and the list items? How about a simple paragraph? What does the image tag contain? What line dictates the background image?

View source 

Do It!

A Really Simple HTML Editor *

The text area below is actually a basic WYSIWYG editor for HTML.   Formatting buttons appear when you click inside the text area. You apply HTML tags by first selecting text and then clicking one of the buttons. In the source code view, the code is packed tight into a continuous line that wraps, instead of being on separate lines for easy reading.

WarningSelect first: Be sure to select text before clicking a button to apply a tag! If the display goes crazy, refresh the browser window and start over.

  1. Click in the text area below. Buttons appear across the top and one at the bottom left.

    Icon: Chrome Icon: Firefox Chrome & Firefox: Use the bottom left button to switch between WYSIWYG Mode (where you can see the effect of your tags) and the source code. The label on the button changes to the mode your are not in.
    Icon: IE IE9 is not happy with this HTML editor though it apparently worked in earlier versions of IE. It is will do the formatting but refuses to show the source code. No clue as to why! If you do not have an earlier version of IE, use Chrome or Firefox to do this exercise.

    *The WYSIWYG editor above is TinyEditor Icon: Off Site, by Michael Leigeber, used under creative commons license.

  2. Type several lines of text. Include your name in the first line.
     
  3. Use the ENTER key on your keyboard to start a new line.
    Use SHIFT + ENTER to create a line break.
     
  4. Play with the various buttons until you understand what each of them does.
     
  5. Apply at least two heading styles and 2 formatting choices to text that you select.
     
  6. Look at your lines in both WYSIWYG and Source modes.
     

Learning more

Reading and analyzing the source code for the pages you see on the Web is a good way to learn about writing web pages. You can view the source code for any page that you can view with your browser.

Try it with this page. Right click on the page (not on a link or an imag. A context menu appears. Select View Source or View page source or similar command.  The source code will open in a text editor or in the browser, depending on your browser. The code for this page is a lot more complex than the example above!

For a set of lessons on writing web pages, go to Working with the Web: HTML BasicsIcon: Change web


Lessons Computer Basics Previous Page Next Page




Teachers: Request permission to use this site with your class

Copyright © 1997-2012 Jan Smith   <jegs1@jegsworks.com>
All Rights Reserved

Icon: DownloadIcon: CDWant a local copy with no ads? - Download/CD
Want to help?


~~  1 Cor. 10:31 ...whatever you do, do it all for the glory of God.  ~~


Last updated: 30 Apr 2012