The structure of the page
A web page is actually a text file marked “marked up” to indicate structure and function. You can prepare and edit web pages in any text editor or word processor you like. The tagging system (called HTML (Hypertext Markup Language)) is very logical and not difficult to learn. However, you don’t need to speak fluent HTML to create your own web pages. Several shortcuts to simplify the process have been developed.
Common icons, pictures, sound locations and video clips on web pages are actually separate files referenced by special HTML codes. When a web browser (such as Firefox or Internet Explorer) views the page, the browser will interpret these HTML codes, which will drag and drop all the individual files into the form you finally see. This is in contrast to modern word processors, where editing and viewing functions are integrated into a program, where all the text, graphics, and other elements of a document are contained in a document file. Therefore, the process of creating a Web page is less straightforward to create an equivalent word processor document.
Writing HTML pages
The text is still the most important part of most websites, so it will be the first element considered here. All the text of a web page is contained in an ASCII text file “marked” with HTML code, usually with a file name ending in “.html”. The “body” of the page is just written in plain text in the html file. You can use any convenient plain text editor to write HTML files, such as SimpleText on Mac or Notepad on Windows.
Should you learn HTML?
Learning HTML on your own will allow you to customize your web pages. Not difficult to learn; in fact, this is a very logical system with a certain appeal. Try to check out my introductory HTML tutorial with working examples. It explains all important aspects of HTML. There are text format, graphics, hyperlinks, sounds, lists, tables, background colors and patterns.
Do I need to buy a web editor?
not real. What you really need is a web browser and a text editor that comes with your computer. There is no need to bind to a commercial web editor, it will eventually become obsolete or need to be upgraded to a new version. However, the web editor can easily create attractive web pages without having to learn HTML. But you don’t actually need to spend money; there are good free web editors that you can download, such as Kompozer (screenshot) and my current favorite SeaMonkey, which is a web browser with a convenient built-in web editor . These jobs are very similar to word processors, but they include additional functions for creating links, site management, uploading pages to the server, cascading style sheets, etc. There are also some web-based page editors that can perform all operations in a web browser, such as Google’s easy-to-use Google site
HTML template
If you don’t want to learn HTML right away, you can still create a web page using a template created by someone else, which has all the required HTML tags, and you type or paste text. Just Google “HTML template” or “web page template”, you can find thousands of colorful and fascinating templates to download.
If you are a teacher looking for a simple template for classroom website construction, please refer to Using Templates to Generate Web-Distributable Multimedia Projects. This was created for my wife, who is a fifth-grade teacher. These templates create an entire website with multiple pages linked together with navigation buttons. There are links to downloadable templates that are used to build entire project sites, such as slides, alphabets, etc. Full step-by-step instructions are included.
For editing templates, I recommend NoteTab Light, a free multi-file text editor that can open all files in a template at the same time, and perform search and replace functions in all files of a template at the same time. It is very suitable for changing the background and text color in the entire template, adding image and sound links, or changing the type of graphics or sound files in a multi-page website.
Some tips for creating web pages
If you are using a text editor to develop a web page to write HTML, it is very convenient to open both the web browser and the html file in a text editor (such as Notepad, NoteTab or SimpleText). To browse the page displayed in the web browser, click the browser window, pull down the file menu and select Open File, select the html file, and then click Open. If you want to make changes, click the text editor window, edit the html text, save it, then click the browser window, and then click the reload button.
It might be easier for you to open the text in your favorite word processor, where you can access the spell checker, etc., and then copy and paste the text into the template. Don’t try to format the text in the word processor, because all formatting will be lost when copying and pasting the text, unless you “Save As…” in HTML format, and then copy and convert the HTML code into the template. Instead, the formatting code can be added to the text later. Don’t worry about line lengths and line breaks; web browsers ignore carriage returns and other line breaks, and automatically format the text to the width of the window (controlled by the user, not by the author). To separate paragraphs, add
tags between paragraphs.
You can use a word processor to create and edit HTML templates, but make sure to save as… in “TEXT only” format.
Convert Word processor files to HTML
You can use the “Save as HTML” command to convert your document to HTML. This will automatically convert the text part of the document into HTML format and save all graphics in the document as a separate folder. Therefore, a single word processor document with pictures will be converted into an HTML document and a graphics folder; put them together so that they are not separated. You will find that the HTML generated by a word processor is very messy and difficult to read, but it is effective. It is best to use a web editor such as Kompozer.
Find graphics for your web page
The icons, background patterns and pictures on the webpage are actually separate files referenced by special HTML codes. The graphic file adopts GIF, JPG or PNG format. You can create such graphics in a variety of ways; for example, by drawing in a drawing program, capturing screenshots, taking photos with a digital camera, scanning photos and flat graphics with a scanner, capturing still frames from video sources, etc. Then you can use a graphics editor program to convert the file to the required PNG, GIF or JPG format. JPG is the best format for photos; PNG and GIF are best for line drawings and graphics.
The easiest way to get graphics to decorate a new web page is to capture graphics from other web pages. Any graphics displayed on the web page can be easily captured by you and saved for your own use. All you need to do is place the mouse pointer on the graph you want and hold down the mouse button (right mouse button on the PC). A pop-up menu appears; move the pointer to select “Save picture as…”, then release the mouse button. The “Save As…” dialog box will be displayed, showing the name of the graphic file (with a .png, .gif or .jpg extension, indicating whether it is a PNG, GIF or JPG file type). Navigate to the desired location and click Save.
Graphics saved in PNG, GIF or JPG format can be used on web pages; to display such graphics on your page, just save the graphics file in the same directory (folder) as the HTML file and add the HTML file Add to the image reference tag: where FILE NAME OF GRAPHIC is replaced by the full file name of the graphic. For example, if the name of the graphic file is “mypicture.jpg”, then the HTML code will display
.
There are many graphic sources on the web. Use a search engine to search for “clip art” or “free pictures” or “free pictures”. A convenient way to find images is to use Google’s image search or AltaVista’s image search engine at http://www.altavista.com/r? L10. Enter one or more search terms, and this image search engine will return a list of results shown in the thumbnail preview (small postage stamp-sized image) of each image searched.
Make your own digital image
There are two basic ways to display your own digital images on the web: use a digital camera to take pictures, or use a scanner to scan photos or other flat copy materials. Digital cameras and scanners are now widely available and relatively inexpensive.
Digital cameras are an ideal place to photograph people, artworks, classroom activities and field trips. Most of them come with cables and software to transfer pictures to your computer. Most cameras save their images as JPG files, which is the format used for photos on the web. However, the images taken by most digital cameras are too large to be placed on a web page and take too long, but you can use a graphics editing program to crop or reduce the image to a more manageable size. I recommend using the freeware program Picasa for this task; its “Export” function will automatically reduce the size of the entire folder of images to the size you specify and save them in a separate folder-very convenient.
Color scanners are ideal for scanning printed photo magazines and flat graphics (such as paintings and drawings). The scanner comes with its own software-refer to the scanner’s documentation to learn how to operate it. Before starting to scan, set the scan resolution to 72 dpi or 75 dpi (dpi = dots per inch). (Follow the instructions of the scanner to learn how to set the resolution). This will result in a “life size” image that is as large as the original scanned object. In order to make the image a larger life size, set the scan resolution to be greater than 75 dpi; to make the image smaller, the size scan resolution is less than 75 dpi for most Scanners can save scanned images in various formats: JPG format is usually the best choice, when you save the scanned image, please select “JPG” in the “Format” pop-up menu. However, if you are using such as SeaMonkey Web page editor, you can insert or copy and paste any pixel size graphics, and then drag the “handle” at the corner to adjust the size in the word processor.
Change the graphic format
The graphics and icons displayed on the webpage are files in PNG, GIF or JPG format, respectively. To crop an image or convert from one format to another, you can use a free graphics program, such as Graphic Converter for Mac, or Paint (a simple graphics editor that comes with all PCs) or Irfanview for Windows.
The choice between PNG, GIF or JPG format depends on the nature of the graphics. The GIF format is the most effective for sharp computer-generated charts and flat cartoon graphics. PNG handles colors more accurately. It is better if there are gradient shadows. JPG is the most effective for digital photos, captured video frames, and other natural objects. image. Using the correct format will give you the best image quality and the smallest file size, which minimizes the time required to view pictures using a slow Internet connection.
GIF images can also be animated, they will be played on any web browser without any additional components, plug-ins or any actions by the viewer. I use ScreenCast-O-Matic, a free one-click screenshot recording on a Windows or Mac computer without installation. You can use it to capture the animated screen display of any program. very convenient.