V. Breaking it up into paragraphs
So far you have created and modified HTML documents, and you should feel comfortable with the process of editing text and reloading it into your web browser. So now relax for this fast lesson on inserting paragraph breaks.
Objectives
After this lesson, you will be able to:
- Identify the paragraph break tag in HTML.
- Copy text from the web page and paste it in another document.
- Insert paragraph breaks into the text of your HTML document and view the changes within your web browser.
Lesson
HTML Paragraph Breaks
We've seen earlier that a web browser will ignore all of the CARRIAGE RETURNS typed into your text editor. But, wherever a browser sees the paragraph tag, it inserts a blank line and starts a new paragraph. The HTML code for forcing a paragraph break is:
<p>..</p>
NOTE: When using HTML it is good practice to remember that the tags come in pairs; an opening tag and a closing tag. There are very few exceptions (empty elements). The difference is that the opening tag is a plain tag and the closing tag contains a "/" before the actual tag.
Also, the <hx> (header tags) have a built in break so it is unnecessary to put <p> tag before a header tag:
Example
<p>
<h2>Blah Blah Blah Blah</h2>
</p>
Inserting Paragraph Breaks
NOTE: For the purpose of illustrating the use of the tags and so they may be distuinguished easier when viewing the examples, they will be shown being used with carriage returns after them, putting them on a seperate line. That practice is not necessary in regular use. The reason you see it done here is that in plain notepad, everything will appear in monochrome (black on white), so to distuinguish the tags from the text content they are seperated by carriage returns and shown on seperate lines. You will find later when using more advanced editors that things are color coded so that the text content, tags and attributes are easier to distuinguish from one another.
Follow the directions below to insert and view a paragraph break in your HTML document.
- Re-open your workspace (if not already opened).
- Go to the text editor window.
- Open your working document, cars.html, in the text editor (if not already opened).
- First we want to move the sentences ("People everywhere are.....") so that they are under the Introduction heading. Use the mouse to cut and paste this text in the proper location.
- After these sentences, we want to add some more text. Add the following text:
<p>
Fascination with cars has existed since the dawn of automobiles. Compare the history of the automobile to the
history of industrialization, which over the past 125 years, ran almost in parallel.
</p>
- Now, return to your HTML document in the text editor, and paste this text after the existing sentences under the <h2>Introduction</h2> heading.
- Save the changes in the text editor.
- Return to your web browser.
- Select Reload from the File menu. You should now see the two sentences of the Introduction. We now want to put paragraph tags around both of these sentences.
- Again, return to your HTML document in the text editor.
- Before the first sentence under <h2>Introduction</h2>, press RETURN (it is not necessary but it makes the HTML more readable as you work on it), and then enter the paragraph tag:
<p> make sure you include the corresponding closing tag when the sentence ends.
- Then do the same for the next sentence.
- This section should now look like:
<h2>Introduction</h2>
<p>
People everywhere are fascinated by exotic, sporty and luxurious cars they most likely cannot even afford. This fascination is driven by a combination of exorbitant cost, beauty of the design, rarity, or brand recognition.
</p>
<p>
Fascination with cars has existed since the dawn of automobiles. Compare the history of the automobile to the history of industrialization, which over the past 125 years, ran almost in parallel.
</p>
- Save the changes in the text editor.
- Return to your web browser and Reload the document. The two sentences of the introduction should now be separate paragraphs.
Other Types of Breaks
To separate major sections of a web page, use the horizontal rule <hr> tag. This inserts a straight line like you see right above the heading for this section (5. Breaking it up into paragraphs).
The HTML format for a horizontal rule tag is:
<hr>
Let's try it now! Put an <hr> tag above the Introduction heading in your document named cars.html, this will help to separate the opening sentence of the lesson from other portions that will follow. Also, there is the <br> tag which forces text to a new line like the <p> tag, but without inserting a blank line. You might use this tag when making a list of items, when writing the lines of a poem, etc. Compare the differences between using the <br> and <p> in these two examples:
Examples
<p>Tag only:
And then, we could all see at once the brilliant purpose of the paragraph tag.
<p>
Moving on...
<p>
The more tags you write, the better you will feel?
Sample Result
<p> and <br> Tags:
And then, we could all see<br>
at once the brilliant purpose<br>
of the paragraph tag.
<br>
<p>
Moving on...
<br>
the more tags you write,<br>
the better you will feel?<br>
<p>
Sample Result
Section Titles w/ Header Tags
and in the end it was all
for naught.
<h4>The New Cheese Edict</h4>
Later, Sir Longhorn declared
that all makers of cheese would
have to be certified before
commencing production.
Sample Result
Section Titles w/<b> and <br> Tags
and in the end it was all
for naught.
<p>
<b>The New Cheese Edict</b><br>
Later, Sir Longhorn declared that all makers of cheese would have to be certified before commencing production.?
The difference may seem trivial now, but it opens up possibilities when learning to create text of different size and color for future section headings.
Check your Work
If you would like, compare your web page to this sample. If your document was different from the sample, review how you entered the paragraph break, <p>, into the text editor. Make sure you entered it as instructed in the Inserting Paragraph Breaks section of this lesson.
Review Topics
- What is the HTML tag for a paragraph break?
- What steps did you use for inserting a paragraph break in your document?
- How did you display and view the changes in your web browser?
- * Extra Credit: Explain what a horizontal rule
<hr> tag and a <br> tag are, and what they are used for.
Independent Practice
Use the <p>, the <hr>, or the <br> tags to create paragraphs or sections in your own document.
VI. Doing it with Style
Just like a word processor, HTML can tell a web browser to display certain portions of text in Italic or Bold Style or even a combination.
Objectives
After this lesson, you will be able to:
- Identify the HTML tags for the text styles: bold, italic, and typewriter (mono-spaced).
- Enter text in your HTML document in these different text styles and view the changes within your web browser.
Lesson
HTML Style Tags
HTML offers several tags for adding style to your text. Just remember to be judicious and consistent in the use of styles; too much can make the text uncomfortable to read...
Examples
Style Tags
<b>This is Bold...</b>
<i>This is Italic...</i>
<tt>This is Typewriter...</tt>
Sample Result
Style Tags
<i><b>This is Bold AND Italic</b></i>
<b><i>And So is This</i></b>
Sample Result
blah blah blah
<h2><i>New</i> and <tt>Improved!</tt></h2>
blah blah blah
NOTE: In the example above you see how you can combine the style tags as long as they are correctly nested, the italic tags are both within the bold tags. Note also, that the order the sets are used does not matter as long as it the sets are in consistent order.
Entering Styled Text in your HTML Document
Follow these steps to apply style tags to your HTML document.
- Re-open your workspace (if not already opened).
- Return to your HTML document, cars.html, in the text editor.
- Find the word "cars" in the first sentence of the Introduction. We are going to make this bold to highlight an important word.
- Insert the tags to make this word appear as bold text:
<b>cars</b>
- Now we will modify the second paragraph with the bold and italic tags to emphasize a word.
Enter <b>...</b> and <i>...</i> tags around "125 years" so this section looks like:
Example
<p>
Fascination with cars has existed since the dawn of automobiles. Compare the history of the automobile to the history of industrialization, which over the past <b><i>125 years</i></b>, ran almost in parallel.
</p>
- Finally, we will use the typewriter, tag to indicate a special word. Under the
<h2>Terminology</h2> heading, enter the following:
Many uncommon terms are encountered with the interest in cars, such as <tt>Teutonic Engineering</tt>.
- Save in the text editor and Reload in your web browser.
Check your Work
Compare with the sample that shows these changes. It is important when using style tags to properly close the tag(s) with the proper </> tag. Otherwise, all succeeding text will inherit this text style. It can look bizarre and get frustrating to find.
Review Topics
- What are HTML style tags?
- What are the different tags used for different styles of text?
- What steps did you use in entering styled text into your HTML document?
- *Extra Credit: How can these styles be useful in creating a web page or lesson?
Independent Practice
Try using the style tags for bold, italic, and typewriter to the text of your own web page. See if you can successfully combine styles... that are pleasing to read.
VII. Lists, Lists, Lists
Lists can present items of information in an easy-to-read format. In fact, there is a list right here, lurking under the next heading!
Objectives
After this lesson, you will be able to:
- Identify HTML codes for creating unordered, ordered, and nested lists for a web page.
- Place different list types within your HTML document and view the changes within your web page.
Lesson
Many web pages display lists of items -- these may be items preceded with a "bullet" (Unordered) or a sequentially numbered list (Ordered).
These lists are easy to format in HTML, and they may even be nested (lists of lists) to produce an outline format. Lists are also handy for creating an index or table of contents to a series of documents or chapters.
Unordered Lists
Unordered Lists, or <ul> .. </ul> tags, are ones that appear as a list of items with "bullets" or markers in the front. The bullet marks will depend on the particular version of your web browser and the font specified for displaying normal WWW text (e.g. for Macintosh, the bullets are the option-8 character -- in Times font this is a small square, in Geneva it is a large round dot).
Here is an example of an unordered list:
Example
Unordered Lists
<b>My Unordered List:</b>
<ul>
<li> Item 1
<li> Item 2
<li> Item 3
</ul>
Sample Result
Note: The <ul> tag marks the beginning and end of the list, and the <li> indicates each list item.
Ordered lists are ones where the browser numbers each successive list item starting with "1." Note that the only difference is changing the <ul> tag to <ol> tag. Using the example from above:
Example
Ordered Lists
<b>My Ordered List:</b>
<ol>
<li> Item 1
<li> Item 2
</ol>
Sample Result
Nested Lists
Ordered Lists and Unordered lists can have different levels; each will be indented appropriately by your web browser. Your major concern will be to verify that each list is properly terminated and the nesting order is correct.
It can start to look complicated with all of those <ol>, <li>, </ul>, <li> tags floating around, but just try to remember the basic structure:
NOTE: The basic structure consists of the opening list tag followed by the list items and completed with a closing list tag (for easier identification indent the list items).
<ul>
|
|
<ol>
|
<li>..</li>
|
|
<li>..</li>
|
<li>..</li>
|
...or |
<li>..</li>
|
</ul>
|
|
</ol>
|
Example
Nested Lists
<b>Nested Unordered List</b>
<ul>
<li>This is the first item</li>
<li>This is the second item</li>
<ul>
<li> This is the first sub item of the second item</li>
<ul>
<li> And this is a sub item of a sub item</li>
<li> Getting lost yet?</li>
</ul>
<li> This is the second sub item of the second item</li>
<li> This is the third sub item of the second item</li>
</ul>
<li>This is the third item</li>
</ul>
Sample Result
Mixed Nested List
<b>Nested Unordered List</b>
<ol>
<li>This is the first item</li>
<li>This is the second item</li>
<ul>
<li> This is the first sub item of the second item</li>
<ol>
<li> And this is a numbered sub item of a sub item</li>
<li> And this is another numbered sub item of a sub item</li>
<li> Getting lost yet?</li>
</ol>
<li> This is the second sub item of the second item</li>
<li> This is the third sub item of the second item</li>
</ul>
<li>This is the third item</li>
</ol>
Sample Result
Placing Lists into your Project HTML Document
Using the list tags, you will now add an ordered and an unordered list to your Cars web page.
- Re-open your workspace (if not already opened).
- Open your HTML document in the text editor.
- Under the Terminology header we will use an unordered list to display examples of terms used with performance cars. Go to this section in your HTML document.
- First add the following sentence.
<p>How many of these do you know?</p>
- Now enter the following HTML format to create the list of terms:
<ul>
<li>Carbon Fiber</li>
<li>Direct Injection</li>
<li>Hemi</li>
<li>Carbon Ceramic Brakes</li>
</ul>
- Now we will use an ordered list to define the required parts of the assignment in this lesson. At the end of the document add a horizontal rule followed by a new heading named "Research Project" and designated as a Heading 2. Your mission is to find information and report on a car of your choice, from the ones listed. Your reports must include:
<ol>
<li>Type of Car</li>
<li>Geographic location of the manufacturer</li>
<li>Noteworthy details</li>
<li>Comparable vehicles</li>
<li>The reason you like the car</li>
</ol>
<br>
Then, write a one paragraph description of how the performance vehicles of today compare to the muscle cars of the 60's and 70's.
- Save your HTML file and Reload in your web browser.
Check Your Work
You may want to compare your document with a sample for this section. If your list is different than the list in the sample, review how you entered your list in your text editor. Make sure it matches the instructions in the Placing Lists in Your HTML Document section of this lesson.
Review Topics
- How are lists valuable in a web page?
- What is the HTML tag for an unordered list?
- What is the tag for an ordered list?
- How might you set up a nested list?
- What steps did you use in adding a list to your HTML document?
Independent Practice
You may want to experiment with changing the ordered list you created to one that is unordered. Also, insert an ordered or an unordered list of items to your own web document. Be sure to verify that it displays correctly in your web browser. Can you create a list that includes sub-lists?
VIII. Graphics á la "the Web"
Sending text over the Internet is just so bland. People have been doing it for decades! When you can include Pictures, your message can be much more informative! There is a reason they coined the phrase: "...a picture is worth a 1000 words". Pictures allow a person to see something clearer than most can explain. They can be used to present a product, tell a story or clarify a concept.
Objectives
After this lesson, you will be able to:
- Identify the graphic formats for the World Wide Web.
- Discuss key points to consider when including graphics in web documents.
- Copy an image from one folder to another.
- Use the correct HTML format for including pictures in your web page.
Lesson
Lean back and relax! This lesson is mostly an introduction to graphics for the Web. But you will have to do a little activity below.
The Web's Graphic Format
There are numerous file formats for computer graphics... PICT, GIF, TIFF, PNG, not to mention EPS, BMP, PCX, JPEG, etc... It sounds like alphabet soup!
The way a web browser displays graphics in HTML format indicates the location of a graphic file in a single format that can be interpreted by different types of computers. For example, when the information in that format is received by your Macintosh computer, the web browser knows to display it as a picture format for Macintosh. However, when that same information is received by your Windows browser, it is displayed as a Windows graphic.
In technical jargon, we would say that this picture format is platform independent. HTML itself is platform independent, since plain text characters can be understood by any computer.
The granddaddy of all online graphics is the GIF or Graphics Interchange Format. The GIF compresses the picture information (reduces the file size) and translates it to binary code that can be sent over the Internet. GIF compression is most effective on graphics that have contiguous areas of solid color, and compression is even greater when the color is continuous in the horizontal direction. GIF images have the feature of defining a color to be "transparent" so images can appear to have non-rectangular boundaries.
The other widely used format used on the web is JPEG (named after the Joint Photographic Expert Group that designed this format). In the early web years, JPEG images were not displayed in the page but were displayed in a separate window, using an external "helper" application. Now all web browsers support JPEG images to be displayed right in the web page. JPEG compression is very effective for photographic images where the colors can vary spatially over short distances ("grainy" images). JPEG offers some dramatic compression in file size, sometimes by a factor of 10 (e.g. a 1500 kb file reduced to 150 kb), which may be at a trade-off for some image quality. JPEG images do not have the ability to have transparency.
Another popular file format for graphics on the web is the PNG (Portable Network Graphic). It has a good balance between features and file size. Besides a GIF this is the only other file format that can display transparencies.
There is also the BMP (Bitmap) format, which is most appropriate for photo-realistic images or complex drawings. Unfortunately it creates a very large file size and is not commonly used for web pages. Bit-depth determines the number of colors that can be displayed (monochrome, 16-color, 256-color, 24-bit or 32-bit) by an individual pixel.
Then there is the SVG (Scalable Vector Graphics) format, which is the most appropriate for drawn shapes (mathematically expressed such as from CAD software). They can be filled with color or patterns and file sizes are usually a fraction of the size of a Bitmap. Vector graphics do require a Flash plug-in to display on the web.
There are many graphics formats to choose from and as you can see some have specific features that would cause choosing one over another for certain situations.
More and more graphics programs have built-in features to save files as GIF format. Software such as ImageReady and Fireworks from Adobe have been specifically designed for creating web graphics. Adobe also offers other premium software which are valuable for graphics editing and creation, such as Illustrator and Photoshop. You can find other shareware programs/utilities such as Artweaver for converting graphics to web format at sites such as download.com. The most valuable feature on any graphics program is the ability to optimize the graphic for file for size. Remember, the smaller the image (dimensions) the less detail or image quality you can get away with.
Points to Consider when Using Graphics
For this tutorial, it will not be necessary to use one of these graphics programs. This tutorial will explain how to get a copy of the images that you will need to complete this project. For independent practice though it is encouraged to explore Artweaver for manipulating images so that as you begin to develop your own web pages, you will be familiar with creating images in GIF, JPEG, PNG or any other usable format.
If your web pages include graphics, consider the following points:
- Large and numerous images may look great on a high-end computer, but bloated page sizes caused by reckless use of large images and other content can create issues. As a suggestion, keep the total file size of all images on a web page to less than 250k (the aim is for as little as possible). There used to be a time when load times of the pages were an issue over slow networks. Now it is not the connection speed but rather the sheer bulk of data that can be transmitted at a blink of an eye. In these times it is easy to lose sight of bandwidth.
- When signing up for a web hosting package, the account comes with a certain amount of disk space on the server to store information. If the data stored consists mainly of text, there is no need to worry about hitting the limit. But if the intention is to store lots (as in, thousands) of pictures, be aware that they eat server space like nothing else. Especially if they are high-resolution multi-megapixel images such as the ones produced by high quality digital DSLR cameras, which can typically occupy more than 10 MB each. If this may be , check the small print of the web hosting package to find out just how much server space is included in the package. Remember, too, that people who view or download the pictures on the site will use up the site's bandwidth allocation. For example, if there is a 10 MB picture on the site and 100 people download it that equals to 1 GB of bandwidth traffic from the site's server.
- Not everyone uses large screen monitors with super stupid resolutions! When using graphics in web pages, it's important to consider your target audience's likely screen resolution. At the time of this writing, most users have computer monitors that are at least 1024 pixels wide by default, A graphic that is wider than the width of their screen, such as a 1152-pixel-wide design, will always cause a horizontal scroll bar to appear. To ensure you avoid this, you need to slim the design down to a width that is narrower than their browser window is likely to be. In the case of a monitor set to a resolution of 1024 by 768 the safest bet is to keep the graphic at around 960 pixels wide.
- Color gradients may look pretty but for GIF images they do not compress as much as solid color areas and they can sometimes come out "banded".
- " Some graphics programs offer options for "no dithering" when converting to GIF -- this can reduce the amount of "noise" in a solid background.
- Many dark grey tones on Macintosh computers are not discernible on Windows computers.
- Rather than displaying all of the images on the web page, have them linked as external images that are downloaded only when a viewer clicks on a hypertext item (this will be covered later in lesson 8a and in lesson 8d). If you have numerous pictures to display, try to break the web page into a series of linked pages.
- A single image (e.g. a small "bullet") can appear several times in a web page with little added delay each time you use that same image.
- Many web browsers "cache" images (storing them on your computer) meaning that using the same file in several web pages will load them from the viewer's computer rather than loading them across the Internet.
- Most importantly, make sure that the images are ones that add meaning to your HTML documents.
You may design a beautiful web page, loaded with large pictures that may look nice, but may adversely affect bandwidth usage on both the host and user ends. The 'net is a busy place and getting busier every second so efficiency is a good goal to keep in mind.
Saving and Including Pictures in Your Web Page
For the next lesson you will first need to find a copy of a GIF image. Under normal circumstances you would just access the internet and retrieve an image of anything you wanted but since there is no internet access we will have to make do with what is available on your local computer.
For this exercise you will need a specific image made for this tutorial and the simple way to accomplish this task is for you to open the folder by clicking the following link to access the folder. Click here to access the Logos folder. Look for the file named "ferrari logo.gif" and select it by clicking on it once. When the image appears in the browser, right click on it and choose the "save as" option. Before saving it look for the "create new folder" icon to the right of the "save in" dialog box, name this folder "images". Then save it. You should now have saved this image in the images folder which is within your HTML 101 folder.
NOTE: As of the HTML 4 standard, it is imperative that with any filename containing a space, you use %20 to fill the blank!! For example, ferrari logo.gif needs to be entered as ferrari%20logo.gif when entering as HTML. To avoid having to do this, do not use any spaces in filenames and use underscores or CamelCase instead.
Check Your Work
Check to see that the file, ferrari logo.gif, is saved in the images folder within the same folder as your HTML file, "cars.html". If it is not there, check to see if you accidentally saved it in another directory/folder. Then, move it to the correct location.
Review Topics
- Name at least 3 graphic formats used for the World Wide Web?
- Name the graphic file format you would most likely use to post photographs from your vacation onto a website?
- What are some key points to consider when including graphics in web pages?
- How did you save the ferrari logo graphic for use in your web document?
Independent Practice
Pay close attention here! Go to "My Documents" (the folder may be named Student's Documents on some computers) and follow these steps all the way to the images folder JMAC ->FCBP Web ->Class Info ->Web Design ->HTML 101 ->images. When you get to the "HTML 101" folder, look for the images folder. Right-click it once, choose, click copy, then open your HTML 101 folder you have for this class. Right click in it and click on paste. You will see the following:
If in fact you do see this message, then at least you know you have done something right because it means that it recognizes the images folder that you created here earlier. If that is the case then click "yes to all". If not, I would strongly advise for you to call for help to see what you missed! With this step complete you will now have the entire image folder with all images that you will need for this project stored in your folder.
