Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML Part 4

Size: px

Start display at page:

Download "Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML Part 4"

Maryann Helen Carr
5 years ago
Views:

1 Unit 5 Web Publishing Systems Page 1 of 13 Part 4 HTML 4.01 Version: 4.01 Transitional Hypertext Markup Language is the coding behind web publishing. In this tutorial, basic knowledge of HTML will be covered so that the web designer can look at the source code and be able to find problem areas or add code as needed in order to improve the web design. ACTIVITY 1 GETTING STARTED In this activity, you will become familiar with: Setting Up Folders Using Notepad Using Basic Elements Declaring Doc Type Information Inserting Title Tags Saving HTML Pages Previewing in a Browser Setting Up Folders 1. With your cursor, browse to the place where you intend to save the solutions for these activities. Create a folder named html. 2. Create a subfolder within that folder named images. Using Notepad Open notepad on your computer. If you are using Windows XP, go to Start > All Programs > Accessories > Notepad. Avoid using software to create the basic file that will place other codes in the file. Using Basic Elements 1. In the open notepad file, key <html>[enter]</html>. Note that there are two types of elements: a container element and an empty element. These are container elements as they bracket other elements between two tags. They contain a start and an end tag. The end tag is different than the start tag because it contains a forward slash. Also, placing a hard return or entering between the elements does not show in a browser. It is a good idea to keep them on separate lines to organize your coding so that it is easier to find where to place new codes and also easier to find mistakes.

2 Unit 5 Web Publishing Systems Page 2 of 13 Spacing between elements also does not show in a browser. In order to add spaces in your document, you must have specific codes. In summary, the browser ignores spaces, tabs, and hard returns. 2. Place your cursor between the start html tag and the end html tag. Press Enter, then key <head>[enter]</head>. These tags contain characteristics of the document. Examples of these characteristics are the title, style sheets, and meta data. 3. Place your cursor after the end Start tag. Press Enter, then key <body>[enter]</body>. Anything within these elements is what will be displayed in the browser. Declaring Doc Type Information Key the following to declare the document type: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN This statement should be keyed above everything else in the document. Enter after keying the statement so that the start tag for html starts on a separate line. Avoid running codes together. The statement makes a declaration that the coding in this file is compatible with transitional HTML The other two doc types could be strict or frameset. In this tutorial, you will use transitional HTML. Inserting Title Tags 1. Although the html, head, and body tags that were keyed earlier are optional, it is recommended to include them for a clear and organized web page. However, the title tag is not an optional tag in the document. 2. Place your cursor within the start head and end head tags. Key <title></title>. It is a good idea to key the start and end tags first before keying any data within the tags. This helps to ensure that you have not left off the ending tag which is a common mistake. 3. Place your cursor within the start and end tags for title and key Basic HTML Tutorials.. This keyed text is what the person visiting your web page will see in the top left corner of the browser. If there is no text within these tags, it will show Untitled page. Remember that any text placed in the head tags does not show up on the web page itself. It is a characteristic describing the web page. This shows up at the top of the browser, but it does not appear on the web page. Saving HTML Pages From the menu bar, choose File > Save As. Browse to your location for your solutions and double click the html folder you created earlier. Key basic_tutorial.html. Be sure to key.html as a part of the document name. It will also work by keying.htm; however, the.html file name appears to be compatible with more browsers.

3 Unit 5 Web Publishing Systems Page 3 of 13 Previewing in a Browser 1. You can open a browser and, from the menu, choose File > Open. You can also open an html file directly from the folder by double clicking the file name. If it contains an HTM or HTML extension, it will automatically open for previewing in your default browser. Open your basic_tutorial file for previewing. Note there is nothing showing in the document itself; however, the title that you gave the page should be showing in the top left corner of the browser s title bar. 2. You can not edit an HTML file from within the browser. In order to edit the file, after previewing, you should close the file, then reopen basic_tutorial within notepad. You need to open notepad first then from the menu bar, choose File > Open. Browse to the location of your saved solutions and double click the html folder then double click the basic_tutorial file. You can also right click on the file name and choose Open With then choose Notepad. 3. Many coders like to keep both the browser window open with the preview and the notepad open so they can easily preview changes to their coding. If you choose to do this, be sure that you always save the notepad file once you have made a change and then when you toggle back to your browser, always refresh the browser so it will reflect the change. You also want to be sure that you are previewing the correct file. If you resaved the file with a different name, it will not necessarily be the correct preview. Refresh button in Internet Explorer 6 ACTIVITY 1 MINI-PROJECT Start a Web Page using HTML 1. Create a folder in your solutions folder named template. Create a sub folder in that folder named images. 2. Open notepad and key the basic three container elements for html, head, and body. 3. Key a start and end tag for title in the appropriate place. Title the page This can be used as a template. 4. Include a declaration of doc type for transitional HTML 4.01 in the appropriate place. 5. Save the file as template.html. 6. Preview your work in your default browser. The following criteria should be met: Folder and subfolder are created as instructed. Basic container elements are included in notepad with start and end tags as appropriate. Title tag is keyed accurately with no errors in title. Doc type declaration is accurate. File is saved as template.html.

4 Unit 5 Web Publishing Systems Page 4 of 13 ACTIVITY 2 ADDING ELEMENTS AND ATTRIBUTES In this activity, you will become familiar with: Using Meta Elements Using Align Text Inserting Formatting Elements Creating a Bulleted List Creating Numbered Lists Inserting a Horizontal Rule Creating Hypertext Links Using Meta Elements 1. Open basic_tutorial within notepad for editing. There are three primary meta elements that you will learn to add to your document in this tutorial: specifying the document set, description of the web page, and keywords. 2. Place your cursor at the end of the start head tag, within the head element. Press Enter and key <meta http-equiv= Content-Type content= text/html; charset=iso >. This statement is necessary to specify what language is being used on the web page. 3. The next meta element is the description. When a search engine is used to locate web pages, the description shows up in the return search. This description content should do a good job of describing concisely what will be found in the web page. Below the title tags, key <meta name= description content= This web page contains links to basic tutorials for using HTML coding to design a web page effectively. Get your tips and tricks for quick, effective web design here! >. 4. Note that in the above keyed text, the attributes are in quotation marks. For instance, the first attribute is description which tells the name of this meta tag. The next quoted material is the specific content that will be found in the description of the web page. This information is within the head which means it does not show on the web page itself, but it is a characteristic of the document. 5. The third meta element that you will use is keywords. Keywords are important in web viewers being able to locate your web page. You want to include as many key words as possible that a person may use to locate your web page. Below the meta description, Enter and key <meta name= keywords content= tutorials, html, 4.01, transitional, elements, attributes, designing web pages, coding >. 6. From the menu bar, choose File > Save or use the shortcut Ctrl + S.

5 Unit 5 Web Publishing Systems Page 5 of 13 Using Align Text 1. Place your cursor at the end of the start body tag. Press Enter. 2. Key <h1 align= center >Welcome to Basic Tutorials!</align></h1>. (In the beginning stages of coding, you may want to save your file each time you add something new, toggle to your browser, refresh the browser, and see how it looks in the browser.) 3. The statement above should have set a heading level 1. If you are familiar with word processing styles then you may already be somewhat familiar with the heading levels. There are six heading levels in HTML. You may want to practice changing the 1 to another number between 2 and 6 to see the difference. You can also change the attribute center to right or justify to see the difference. Once you have experimented, change the coding back to that you were asked to key in Instruction Save changes. Inserting Formatting Elements 1. Press Enter and key the following below the Welcome title: <p align="justify">the Digital Multimedia textbook includes many great ideas for effective web design. Use the tutorial provided with your textbook to learn basic web editing before proceeding to learning a web editing software such as Dreamweaver. This will give you more flexibility in designing web pages as well as allowing you to troubleshoot problems easier.</align>. Note the paragraph tag <p>. All text should contain html tags. You cannot use additional paragraph tags together to add vertical spacing. A paragraph element can be an empty element, in that it does not require an ending tag. 2. Click in front of Digital in the text and key <i>. Click after Multimedia and key </i>. This places the name of the textbook in italics. 3. Click before great and key <b>. Click after great and key </b>. Be sure you always include the forward slash in the ending tag. Try leaving it out and see what happens so if you accidentally leave it out, you will recognize the problem. 4. Underline Dreamweaver by placing <u> before and </u> after the text. 5. Save changes. Creating a Bulleted List 1. At the end of the paragraph, press ENTER and key two line break tags <br/>. This tag includes the start and end tag together. Only a few tags work with in this manner. You do not have to type the slash and include the ending in the line break; however, it helps to remember that an ending tag is not needed. 2. A bulleted list is also called an unordered list. After the line breaks, key <ul>[enter]</ul>.

6 Unit 5 Web Publishing Systems Page 6 of Place your cursor on the line underneath the start code <ul>. Key <li>why learn the language of HTML?. The <li> code does not need an ending tag. 4. On the next line key or copy and paste the <li> code again. Key Why learn effective web design?. 5. Key <li>why learn a web editing software?. Creating Numbered Lists 1. After the </ul> code, key two line breaks. 2. Select and copy the code and text from <ul> to </ul>. 3. Paste the copied text below the line breaks. Change the <ul> to <ol>. Change the </ul> to </ol>. On the lines with <li> code, replace the current text with the following. <li>learn HTML codes. <li>learn to effectively design web pages. <li>learn a web editing software such as Dreamweaver. 4. Save, refresh, and preview in the browser. Inserting a Horizontal Rule 1. Insert a horizontal line that is red in color by keying the following below the ending code for ordered list: <hr color="red">. 2. Note that there are only sixteen colors that can be identified with color name. Most colors must be identified with hexadecimal numbering. For more information on this topic, search the Internet. 3. Save, refresh, and preview the web page in the browser. Creating Hypertext Links 1. An anchor element adds hypertext links with text. It can be used to link external web pages, internal pages, and On the line below the code for the horizontal rule, key <a href=" Bean's Web Site</a><br />. The <a href adds the anchor element. In parenthesis the exact web site address, or named anchor or address should be keyed. After the end tag, the text that displays on the Web page should be keyed. End the Anchor element with a closing anchor tag. In this case, you also added a line break so the next link would not be on the same line with the web site address. 3. On the line below the first anchor element, key another anchor element. Key <a href= mailto:kbean@blinn.edu > </a>. 4. Save, refresh the browser, and preview in the browser. Be sure to try the links to make sure they work.

7 Unit 5 Web Publishing Systems Page 7 of Using notepad open template from your solutions folder. Change the title to Home Page. Within the body elements key <a href= basic_tutorial >Basic Tutorial.</a>. This provides a link to another page that you have created. 6. Save as index.html. All first pages (home pages) should be named index. This is the first page that is loaded when someone accesses your site. 7. Save, refresh the browser, and preview in the browser. Be sure to try the link. ACTIVITY 2 MINI-PROJECT Edit and Create a Template 1. Open notepad then open template that you previously saved within notepad. 2. Create similar content that is generic in nature demonstrating the skills learned in this activity. 3. Save the file, refresh the browser, and preview the file in the browser. The following criteria should be met: Meta elements for specification of language used, description, and keywords were added. Information in description and keywords explained what these were used for instead of a specific description or keywords. A title was created using a heading tag and an align tag. The title can be Replace This With Title. Demonstrated use of paragraph tag, underline, bold, and italics. Generic bulleted list was created. Generic numbered list was created. A horizontal rule was created with color added. A hyperlink to a web page and a hyperlink to were created

8 Unit 5 Web Publishing Systems Page 8 of 13 ACTIVITY 3 BASIC PAGE FORMATTING In this activity, you will become familiar with: Changing Font Sizes Specifying Font List Working With Colors Using A Background Image Floating Images Changing Font Sizes 1. Open notepad and open template within notepad. From the menu bar, choose File > Save As. Browse to your solutions folder. Double click the html folder. Save as tips.html. 2. Select all text between the body tags and remove the text. 3. Select the information within the title tags. Overtype with Great tips for web sites. 4. Place your cursor after the start body tag. Press the Enter key. Key Top 10 Tips for Web Design. 5. Add start and end tags for paragraph with an align attribute of center. 6. Before the title Top 10 Tips for Web Design, key a start font tag: <font>. After the title, key the ending font tag: </font>. 7. Place your cursor in front of the ending bracket of the start tag. Space then key size= 5. The font tag performs several functions, but in this case, it performs the function of changing the size of the font. This is an absolute font size. There are 7 absolute font sizes with 1 being the smallest and 7 being the largest. Absolute font size 3 is comparable to size 12 font in word processing. 8. The completed line should look like the following: <p align="center"><font size="5">top 10 Tips for Web Design</font></p> Specifying Font Lists 1. Click the cursor after <font size= 5. Press the space bar then key face= Geneva, Verdana, Arial. 2. Fonts should include at least three fonts in the list. In the case of the list you just included, if Geneva was not available on the viewer s computer then it would default to Verdana. If neither of those were available, then it would default to Arial. Most computers should have Arial and/or Times New Roman on their computer so one of these fonts should be included as the third in the list. 3. Save, refresh the browser, and preview the web page in the browser.

9 Unit 5 Web Publishing Systems Page 9 of 13 Working With Colors 1. Change the color of the text to blue. After the font list, press the space bar and key color= blue. 2. Colors for background, for text of the entire page, unvisited links, visited links, and activated links can be changed by placing the appropriate attribute within the body tag. Place your cursor directly before the right bracket on the start tag of body. Key bgcolor= ffffcc. This changes the background color of the page to a light yellow. This is using the hexadecimal code for light yellow. Using A Background Image 1. Browse to your student data files and locate the file bubbles. Copy and paste the file into the images folder in the html folder. 2. Open notepad, then open basic_tutorial within notepad to edit the html file. 3. Place the cursor in front of the right bracket in the start body tag. Key background= images/bubbles.jpg. Note that the image name must be exact as well as the exact location. The word images is included in the path, because it is within the html folder in the images folder. Be very careful when including images on your web page. They must be keyed with exact names and paths, and they must be included within the folders. You may also notice that you want to be careful with using images as backgrounds. They can overpower the text and take away from the message on your web page. Floating Images 1. Place your cursor directly in front of The Digital Multimedia Key <img src= images/pencils.jpg >. The image element does not need a closing tag. It is an empty element. Be sure that the pencils image has been moved from your student data files to the folder that you have specified as the source. 3. Save, refresh the browser, and preview in the browser. 4. Directly after the quotation mark ending the image name, key align= right. This should float the image to the right side. 5. Save, refresh the browser, and preview in the browser. 6. Note that the image is very close to the surrounding text. Toggle back to notepad and key hspace= 10 after the align right code. This adds horizontal space between the image and the text. You can do the same to add vertical space (vspace) if needed. 7. After the horizontal space attribute, key alt= Example of image with right alignment..

10 Unit 5 Web Publishing Systems Page 10 of 13 ACTIVITY 3 MINI-PROJECT Building a Template 1. Open notepad and open template from within notepad. 2. Place a font element in the appropriate place in the file. Add a generic title with an attribute font size in the font element. 3. Specify a font list of at least three font names with the last one being Arial or Times New Roman. 4. Add color to the title. 5. Locate a background image from the Internet. Add an image source. 6. Add an image of your choice with alignment. 7. Save the file, refresh the browser, and preview the file in the browser. The following criteria should be met: Font elements are in the appropriate place with a change of size. Font list contains three font faces with at least one being Arial or Times New Roman. Color is added to the title. Background image added appropriately. Image added with appropriate alignment. File saved. ACTIVITY 4 TABLES In this activity, you will become familiar with: Inserting Tables Formatting Tables Inserting Tables 1. Open notepad. Browse to your student data files and double click tables to open it within notepad. 2. Select the text within the title tags and key Learning Tables. 3. Click after the start body tag. Press Enter and key <table>. Press Enter and key </table>. 4. Place your cursor after the start table tag and press Enter. Key <tr> then press Enter and key </tr>. This creates a row. Each row must contain a pair of table data tags to create the row. Click after the start table row tag and press Enter. Key <td></td>. This can be on the same row. Key Row 1 Column 1 within the table data tags. 5. Select everything between <tr> and </tr>. From the menu bar choose Edit > Copy or press Ctrl + C.

Unit 5 Web Publishing Systems Page 11 of 13 6. Place your cursor below the ending table row tag. From the menu bar, choose Edit > Paste. Change Row 1 to Row 2. 7.

11 Unit 5 Web Publishing Systems Page 11 of Place your cursor below the ending table row tag. From the menu bar, choose Edit > Paste. Change Row 1 to Row Save the file, refresh the browser, and preview the file in the browser. 8. Copy the table data row and paste another one right below the first one. Change the Column number to Repeat this for the other table data row, changing Row to 2 and Column to Copy and paste the table row until there are 4 rows and 2 columns in the table. Completed Code for Table Formatting Tables 1. Place your cursor in front of the right bracket for the start tag for table. Key border= In front of the border attributes, key an align= center attribute. 3. Click after the border attribute and add a width= 75% attribute. 4. Place your cursor before the right bracket in the start tag for the first table data cell. Key width= 75% to change the width for that entire column. 5. Within the start table tag, add a bgcolor= yellow. 6. Save the file, refresh the browser, and preview the file in the browser.

12 Unit 5 Web Publishing Systems Page 12 of 13 ACTIVITY 4 MINI-PROJECT Create a Table of Local Businesses 1. Set up a folder named local with a subfolder named images. 2. Create a 2-column, 4 row table. In the first column, input the name of four local businesses that you think employee the most people in the area. In the second column, enter the number of employees. (This can be found by looking on a city Web site or a Chamber of Commerce site. If there are no sites available, call or visit the Chamber of Commerce.) 3. Demonstrate formatting of tables by changing the background color, centering the table, adding a visible border, and changing the table and column width. The following criteria should be met: Table is created appropriately with accurate code. Information input accurately into the columns and rows. Background color is changed on the table. Table is centered horizontally. Visible border is added to the table. Table width and column width are changed.

13 Unit 5 Web Publishing Systems Page 13 of 13 PART 4 SIMULATION Creating Web Pages with HTML 1. Create a folder named web_page. Create a subfolder named images. 2. Using notepad, create a web page titled What I Learned About HTML. 3. Demonstrate an example of each of the codes you learned in Activities 1-3. Begin by keying the basic elements, doc type information, and the three meta elements that were covered. Use either a bulleted or numbered list to list at least 5 things you learned in HTML coding. You may use any image to demonstrate inserting an image. Be sure you include the image in the images folder. Use your own address at the bottom of the page to demonstrate linking of Save as index.html. 5. Open notepad and open your template from the solutions folder. Save as colors.html. Change the title to Hexadecimal. 6. Insert a 2-column table with 5 rows. Search the Internet and locate the hexadecimal number for five of your favorite colors. Key the name of the color in the first column and the code number in the second column. 7. Add a visible border, table and row width changes, background color change, and any other formatting desired to the table 8. Save the file. The following criteria should be met: Basic elements, doc type information, and the three meta elements are included accurately. File is saved as instructed. Example of skills learned in formatting and adding of elements are included. Page formatting skills are demonstrated. Image is inserted and saved in images folder. All elements and attributes on the page work appropriately. Table is coded accurately for design and format. No entry errors found in the table. Colors page is saved in the appropriate place with the appropriate name and title.

CSC 121 Computers and Scientific Thinking

CSC 121 Computers and Scientific Thinking Fall 2005 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language