Learning more

Do It!

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 P tags like this:

<p>This is a paragraph</p>

Example:

In the iframe 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 img tag contain? What line dictates the background image?

Your browser does not support inline frames or is currently configured not to display inline frames.<br> <a href="writing_web_pages.htm" target="_blank">View example page</a> &nbsp;&nbsp;&nbsp;<a href="writing_web_pages-source.htm" target="_blank">View source code</a>

View source

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.

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

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.

source

*The WYSIWYG editor above is TinyEditor , 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.

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

Дата добавления: 2014-12-23