As you will recall, it is the browser that actually formats the HTML document. But when it displays text, where does it put the line breaks?
The browser automatically determines the position of the line breaks. It tries to fit all of the text into the current window so that the user does not need to do any horizontal scrolling. If the browser window changes size, the browser reformats the document.
It also ignores extra spaces. If there are two spaces between words in the HTML file, the browser will display the text in exactly the same way as if there was only one. Blank lines are ignored in a similar way.
The browser also tries to correct errors in incorrect HTML (such as HTML containing overlapping tags). When doing so, the browser may incorrectly interpret the HTML document, making it a wiser choice to write correct HTML.
Sometimes it can be difficult to have the browser format things as you want. You will learn more tricks on how to do this as you work through the HTML units.
Find out what information in an HTML file is ignored by Web browsers.
The tag <BR> is used to start a new line. <BR>is a standalone tag, that means there is no closing </BR>tag.
Note that <BR> does not place a line space between the two lines. To do that you need to use the <P> paragraph tag.
Read about paragraphs and line breaks in your textbooks.
In this Activity you will use the <P> and <BR> tags to create line breaks in text.
Load Notepad and begin a new HTML document.
Enter the usual structural HTML tags. Set the title to "Formatting text"
Type in the following text exactly as it appears below. Do not use any HTML tags to format it at this stage.
Formatting text: Users of HTML are sometimes surprised to find that HTML gives them little control over the way that a page is displayed. It should be remembered that HTML was developed as a means of marking up the structure of a document not as a way of determining its presentation. Formatting text to appear on a Web page is therefore different from formatting text to appear in a printed document.
Save the document as format.htm and load it in your browser to view it.
Resize your browser and watch how the text is reformatted to fit in the resized browser window.
Return to Notepad and now add the following formatting tags:
Place a line break tag after the initial words "Formatting text:"
Create a new paragraph before the final sentence "Formatting text to appear"
Save the file again and load it in your browser to check your HTML.
Resize the browser and watch how the document is reformatted for the resized window.
Another set of HTML tags are the headings tags. These are <H1>, <H2>, <H3>, <H4>, <H5> and <H6>.
The text surrounded by the <H1> tag is displayed in a very large font size. Text surrounded by the <H2> tag is displayed in a slightly smaller font size, and so on down to the <H6> heading tag.
You can use these tags to provide your page with a standard outline format. For example, the page heading might be displayed using the <H1> tag, a section heading using <H2> and a sub-section heading using <H3> and so on.
Earlier we noted that Web browsers are HTML readers. Each browser is free to interpret HTML any way it likes. Consequently, a document read in one browser might look a little different to one read in another browser.
Although the HTML standard states that <H1> tags should be as big as or bigger than <H2> tags, and <H2> tags should be as big as or bigger than <H3> tags and so on, one browser might display the <H3> tag with the same font size as the <H2> tag, while another browser might display it in a smaller font size. Hence the difference in displaying the same text.
In practice, these implementation questions will become an issue when you are using more complex tags. For now you can ignore this problem while writing HTML.
Read about HTML headings in your textbooks.
In this Activity you will set up a page heading and sub-heading for the Web page begun in Activity 5 and use the HTML headings tags to implement it.
Load format.htm in MS-Notepad.
Set up the page heading "Formatting text" and place the <H1> heading tags around it, in other words, <H1>Formatting text</H1>
Reload format.htm in your browser. You will notice that the effect of the <H1> tag is to display the text not only in an enlarged font size but also to include extra space above and below it. So you do not need a <BR> or <P> tag as well.
Return to Notepad and use the <H2> tag to create a sub-heading for the page, "Paragraphs and line breaks"
Reload the document in your browser to check the HTML.
|
|
The two examples above are lists. The list on the left uses bullets to mark the list elements, and is known as an unordered list. The list on the right uses numbers to mark the list elements and is known as an ordered list.
HTML lists consist of a list tag and list element tags.
In an unordered list, the list tag is <UL> and the list element tag is <LI>. Note that although the list element end tag </LI> was optional in previous versions of HTML, it no longer is. The list end tag </UL> is also not optional.
To create an unordered list as in the above example, use the following HTML.
<UL> <LI>Apples</LI> <LI>Oranges</LI> <LI>Bananas</LI> </UL>
Note that it is useful to indent the <LI> tags on the page to keep track of the level of indentation.
To add more list elements, add extra list element tags <LI> </LI> containing the elements within the <UL> tags.
Ordered lists are specified almost exactly the same as unordered lists, only the <OL> tag is used instead of the <UL> tag.
The definition list, is different: it has neither bullets nor numbers. The definition list tag is <DL> and the list elements consist of a term and its definition. The term is marked by <DT> tags and the definition by <DD> tags. An example use definition lists is the glossary definition that appears below.
HTML,Hypertext Markup Language; the format of Web documents
This was created using the following HTML:
<DL> <DT>HTML </DT> <DD> Hypertext Markup Language; the format of Web documents </DD> </DL>
Note that lists may be nested to create lists within lists.
Read about HTML lists in your textbooks.
In this Activity you will create a series of lists to practise your HTML list-building skills.
Load format.htm in Notepad.
Underneath the text, create three lists as follows:
List one should be a bulleted (i.e. unordered) list, using square bullets, giving the days of the week
List two should be a numbered list of the months of the year. Make the numbers lowercase roman numerals.
List three should be a definition list of the four seasons.
You may need to refer to the section on "Lists" in your textbooks to remind yourself how to do this.
Save the file and view it in your Web browser to ensure that it displays as desired.
Reload format.htm in Notepad and create a new bulleted list showing the four seasons. Within each season create a numbered sublist of the appropriate months of the year.
You may need to refer to your textbooks or the Web to find out how to specify the number of an item if you want to change it mid-way through a list.
Save the file and load it in your Web browser to examine the document.
Use the <PRE> tag to include extra spacing or tabs in the text. Text inside the <PRE> </PRE> tags will be displayed in a non-proportional font such as Courier.
A later unit will describe how to format text using HTML tables, which should be generally preferred over using <PRE>.
Read about <pre> tag in your textbooks.
Notes may be left in an HTML page to, for example, explain how or why something was done; these notes are often useful for other developers who will be working on the HTML document. These notes, called comments, are not displayed by the Web browser, and can only be seen in the HTML source file itself. Web developers make frequent use of HTML comments, and they can found in many Web pages (using the 'View Page Source' menu option).
An HTML comment is given as: <!--- text in the comment ---> .
Read about HTML comments in your textbooks.
In this Activity you will use preformatted text and HTML comments.
Load format.htm in Notepad.
Underneath the lists you have created, add the following table using the preformatted text feature.
Paper Fixed
Web Fluid
Place an HTML comment before this table to remind yourself how you created it.
Save the file and load it in a Web browser.
Read Discussion of Activity 7 — Preformatted text and comments