Download to read offline
More Related Content
Similar to HTML Lab ProjectTo create a simple web page you will need to use.docx
More from fideladallimore
HTML Lab ProjectTo create a simple web page you will need to use.docx
- 1. HTML Lab Project Tocreate a simple web page you will need to use a text processor (Notepad) and HTML (hypertext markup language). Do NOT use Word which can create some problems by automatically formatting your work as a web page. The tags (items enclosed in < >) from HTML create the special effects that are seen on web pages when using a browser like Internet Explorer. Note: some tags require a starting and ending tag. For example: This is my home page Also if multiple tags are used to format a single item, ending tags must be written in reverse order from the starting tags. Example: My First Home Page tag1 tag2 endtag2 endtag1 After completing the steps in the tutorial, you should be able to: 1. Create a Home Page using HTML 2. Create headings 3. Place text and graphics in an HTML document
- 2. 4. Use attributes suchas font color with tags 5. Create links to other places or documents Home Pages The home page of a web site is the starting point that usually describes the purpose of the web site and its categories. The page typically includes hyperlinks which will take the viewer to other web sites or other places within the same web site. In planning a home page consider these items Title – this text will appear on the blue title bar of your web page Headings – customarily the first heading is the same as the title; it appears as the first line of your home page. Each browser displays headings in a unique way, but they allow several levels of headings from H1 to H6. Heading 1 would be the largest, most noticeable, heading 6 the smallest. In the examples that follow, the first line of each pair shows the HTML tags; the second line is the effect produced. H1 headings H1 headings H2 headings H2 headings H3 headings H3 headings H4 headings H4 Headings H5 headings H5 Headings H6 headings
- 3. H6 Headings Content -Text that explains your home page or special features of the page. Create a Sample HTML Page Step 1. A. Open Notepad (Click on Start, Programs, Accessories, Notepad). B. Enter the following text: Your Name Home Page Your Name Home Page C. Choose File, Save As. For the file name, use mysample_Lastname_Firstname.htm in Save As Type , choose All Files, and save to your desktop, or other easy to find location. (CAUTION: if you neglect to choose All Files, this will be saved as a text file, ending in txt, and will not be available for opening in your browser
- 4. . Step 2. A. Start yourbrowser (Internet Explorer). It is not necessary to be online. B. From the menu bar, choose File, Open. C. Browse for the file you just saved on your desktop (mysample_firstname_lastname.htm). D. Choose Open. E. You should see only the title bar and a heading on your newly created homepage. Step 3. A. From the menu bar, choose View, then Source. B. A window should appear showing your Notepad file with the HTML coded text. You can edit your text for the next steps in this window. Just remember to save the Notepad file each time you make changes. C. Use the Refresh button in your browser to see the changes on
- 5. your web page. AdditionalHeadings For your sample page, you’ll create headings for: My Favorites, Headline News, Quote of the Day Step 4. A. On the line following , enter the following My Favorites Headline News Quote of the Day Step 5. A. Choose File, Save. B. On the browser file menu, choose Refresh. You should see the three level-2 headings which you added in Step 1. Content To leave blank lines around a paragraph of text, use the tags To start a new line without adding blank lines, use (Note: no ending tag is needed for a line break) To identify the body of your text enclose it in the tags Tags which may be used to enhance your text: bold centers text underline
- 6. moves text acrossthe screen Step 6. A. Add the tags shown below in your source file (shaded areas). B. Add the tags around your heading. C. Add the content after the headings. ( Edit your current lines to match what is below. ) Your Name Student Page > Your Name Student Page My Favorites Food: pizza Sport: football Color: blue Movie: Fellowship of the Ring Headline News I have a new __________ Quote of the Day Minds are like parachutes; they function only when open.
- 7. Step 7 . Savethe source file. Step 8 . Refresh the browser. Inserting images To insert a graphic file, it should be one of two formats: either a .gif or .jpg file. Gif files may also be animated. These graphic files look more like drawings or cartoons. Jpg files are photographs, like the ones taken by digital cameras. The simplest way to use graphics is to store them all in the same folder as your Notepad source file. I suggest you use google.com and then select Images from the Upper left links. The tags for inserting an image are filename ” >. Substitute the name (including the extension: either gif or jpg) of the file you select for “filename”. Step 9 . Add the following text after the line ending with . filename .gif”> Step 10 . Save your source file. Refresh the browser.
- 8. Colors Colors can add(or detract) from your web page. Avoid background colors like red or orange which are not easy on the eyes. Also beware of blue backgrounds which can make link text (also in blue by default) invisible. Colors are referred to by code or by name, combining letters and numbers as follows Green #00FF00 Red #FF0000 Tan #DEB887 Turquoise #19CCDF Magenta #FF00FF Yellow #FFFF00 Blue #0000FF To change the background color of your web page colorcode > To change color of all text on your page colorcode > Step 11 . Add the following code after the heading, Add before the last line
- 9. . Step 12 . Saveyour source file. View it with the browser. Horizontal Rule Horizontal lines are used to off set or segment text on your web page. They can be either a default grey color or you can specify a color. Inserts a horizontal rule Sets size (height) of rule Sets width of rule, in percentage or absolute value Creates a rule without a shadow Code example: Inserts a horizontal rule Sets size (height) of rule Sets width of rule, in percentage or absolute value Creates a rule without a shadow Sets the rule color This is just a sample of possible colors. A good online reference for color is http://hotwired.lycos.com/webmonkey/reference/color_codes/ Links Hyperlinks allow the viewer to move to other places in your
- 10. document or onthe web quickly. To create a hyperlink (or link), enclose the URL of the web page in URL”> name of link (Note: include all characters of the URL, including http://) Step 13 . Add the following after the text “Minds are like a ….” Web sites: LSC-University Park Step 14 . Save your source file. Refresh the browser. Lists You can add bulleted lists or numbered lists to your web page with the following tags: January February March Or for bulleted lists use and at the start and end of the list items. Reference HTML Cheatsheet --------------------------------------------------------------------------- ----- Basic Tags Creates an HTML document Sets off the title and other information that isn't displayed on
- 11. the Web pageitself Sets off the visible portion of the document Header Tags Puts the name of the document in the title bar Body Attributes Sets the background color, using name or hex value Sets the text color, using name or hex value Sets the color of links, using name or hex value Sets the color of followed links, using name or hex value Sets the color of links on click Text Tags Creates the largest headline Creates the smallest headline Creates bold text Emphasizes a word (with italic or bold) Emphasizes a word (with italic or bold) Sets size of font, from 1 to 7) Sets font color, using name or hex value Links
- 12. Creates a hyperlink Createsa mailto link Creates a target location within a document Links to that target location from elsewhere in the document Formatting Creates a new paragraph Aligns a paragraph to the left, right, or center Inserts a line break Creates a numbered list Precedes each list item, and adds a number Creates a bulleted list Graphical Elements Adds an image Aligns an image: left, right, center; bottom, top, middle Horizontal Rule Sets size of border around an image Inserts a horizontal rule Sets size (height) of rule
- 13. Sets width ofrule, in percentage or absolute value Creates a rule without a shadow Completed Code and sample page: Khavansky M.Johnson Khavansky M. JOhnson Home Page My Favorites Food: Rice and peas Sport: Soccer(football),Basketball, CrossCountry, Tracks, and cricket Color: Green and Blue Movie: The last samaria Headline NewsI have a new rating on monoploy Quite of the Day"Just give the G's and we'll be burning ahh"