I-5 Internet Applications After completion of this unit, you should be able to understand and code a webpage that includes pictures, sounds, color, a table, a cursor trail, hypertext, and hyperlinks.
Assignments: Act 1: Using beginning webpage tags Act 2: Using formatting tags and color Act 4: Using hypertext, hyperlinks, and pictures Act 6: Using table tags Act 8: Using internal links Note: all webpages will be built upon the prior version!
The Webtop Publishing Revolution History of Communication Use of Drums Rock Walls Printing Press Books, Magazines, Advertisements, and Printed Material
The Next Big Step: Webtop Publishing World Wide Web and the Internet: Way to share information electronically
Very inexpensive per copy Instantly available to millions of people Changeable Electronic, saving the lives of trees Writing Skills Incorporates graphics, video, sound, and animation - Creative Artistic Skills Word Processing Skills Computer Skills Interdisciplinary
Chapter 1
3 Rules to Coding All tags are capitalized! Spelling and punctuation counts! All files must be saved in one (1) location!
Tim Berners Lee Father of the Web! HyperText Markup Language The language of the World Wide Web. What Browsers, like Netscape or Internet Explorer, use to interpret and display documents on the World Wide Web. Hypertext are words that take you somewhere at the speed of electricity. Markup is using tags within angle brackets < > to tell your browser how to display Web pages so that we can read them.
Tags are very important in HTML! They create the language spoken by Web browsers and Web servers. Tags tell the browsers how to display Web pages. If tags are not entered correctly, web pages look defective.
More on Tags!! There are two kinds of tags. Open and close. Open tags look like this < > Close tags look like this </ > Tags normally appear in pairs.
More on Tags!! If you wish to center text in HTML, the coding you would use would be: <CENTER>Ms. Depew</CENTER> Notice the open tag (< >) and the close tag (</ > for centering.
Starting Tags Every HTML document starts with the same basic HTML tags. These are: <HTML> <HEAD><TITLE> </TITLE></HEAD> <BODY> </BODY> </HTML> NOTE: ALL TAGS ARE CAPITALIZED!
All activities are to be keyed in Notepad. This simple text editor is found START--> PROGRAM--> ACCESSORIES-->NOTEPAD. Upon saving a document, save as name (of your document).html to your file on the server. This tells the Browser to only use files with the.html file extension.
TO VIEW YOUR DOCUMENT IN THE BROWSER DIRECTIONS: Right-click on the browser icon of the file you are working on. Go to Open with and click on the browser that you wish to use. While you are working, only have notepad and the browser open. Too many files open can be confusing.
Review of Opening Tags: HTML Tags <HTML> </HTML> Announces that this document is a web document. Headers Tags <HEAD> </HEAD> Lets you enter special info about your web page. Title Tags <TITLE> </TITLE> Places a short title or description in the Browser s title bar. Body Tags <BODY> </BODY> Encloses the part of your web page document that will actually be displayed by the Web browser. Do Activity 1- Write the starting tags of a web page and enter personal information.
Act. 1 <HTML> <HEAD> <TITLE> Your name s web page</title></head> <BODY> Hi, my name is. I live in. I am in the grade. I like to do,, and. </BODY> </HTML> Save this file as act1.html and view in the browser.
Making Mistakes These are easy to fix if you find your web page is not what you want it to look like. You just fix the mistake, save the file again. Go back to the Browser, and click on Reload or Refresh. Common Mistakes: Missing brackets, brackets facing the wrong way, and not including the slash mark in the closing tags. (This item is very important in HTML).
Chapter 2
To make your web pages more interesting, you can add formatting tags. These are: <CENTER> </CENTER> <H1 TO H6> or Heading Tags <P> and <BR> Tags (do not need a closing tag) <OL> <LI> </OL> Ordered List <UL> <LI> </UL> Unordered List <DL> <DT> <DD> </DL>
<CENTER>This tag places text in the </CENTER> <CENTER>center of the Web page.</center> Notice the closing tag! If you don t close, everything will be centered on your web page.
The purpose of these tags is to make text bigger or smaller. <H1> </H1> Largest text <H2> </H2> <H3> </H3> <H4> </H4> <H5> </H5> <H6> </H6> Smallest text
These tags are used to signify breaks in between paragraphs. <P> tag adds an extra line between paragraphs like using a doublespace command in your word processor; <BR> tag is like using the <Enter> key on your keyboard. It ends a line leaving only a single space between the lines. <HR> tag is a horizontal rule across the webpage. Note: These tags do not have a closing tag.
Lists are easy in HTML! If you wish to create a list of items using numbered items, you would use the Ordered List Tag: <OL> <LI> Item 1 <LI> Item 2 <LI> Item 3 </OL>
However, if you wish to make a list of items using bullets, you would use the Unordered List Tag: <UL> <LI>Item 1 <LI>Item 2 <LI>Item 3 </UL>
Act. 2 <HTML> <HEAD> <TITLE> Your name s web page</title></head> <BODY> <CENTER><H1>Hi, my name is.</center></h1><p> <H3>I live in.<br> I am in the grade.<br> <UL>I like to <LI> <LI> <LI> </UL> </BODY> </HTML> Save this file as act2.html and view in the browser. Add formatting tags.
Chapter 3
Things to look for when viewing a Web page: Source Codes Attributes and Values Copyright Issues URLs and Titles Hypertext Links Graphics Background color, link, and text colors Tags that add emphasis Lists
Directions: Select the View, Source or the View, Document Source command. You can also Right click the mouse and locate the View, Source command. In this view, you can see all the tags which markup the Web page.
Attributes are the strangely different tags you see on the Web page like BGCOLOR, ALIGN, HREF. These describe in detail what the tag is meant to display. For instance: Within the <BODY> tag, we want the background color to be green. This is what you would type: <BODY BGCOLOR=#00FF00> and if you want orange text, <BODY BGCOLOR=#00FF00 TEXT =#D38800> Note: Browsers are now sophisticated enough that they can read color name (i.e. red, brown, yellow etc)
Copyright Issues There are two kinds of graphics on the Web: Those you can take off the Web and use on your page (Public Domain); and those you can t take off the Web without violating copyright laws. Copyright laws protects artistic work, characters (like cartoons), logos, and trademarks, and written works from theft or misuse by unauthorized individuals.
GRABBING AN IMAGE Also part of Web pages are the images. Graphics are identified by addresses. To make them part of a Web page, you use the tag <IMG SRC> short for IMaGe SeaRCh This tag searches for graphics and inserts into the place defined by the attributes and values you put in.
More Tags to View <IMG SRC= name of file ALIGN=DIRECTION HEIGHT=# WIDTH=#> Searches an image on your computer or the Web. These are attributes to the picture that is included inside the IMG SRC tag: ALIGN= Aligns pictures with the text HEIGHT= Determines the height of a graphic WIDTH= Determines the width of a graphic Note: # of pixels
Hyperlinks To use hyperlinks and hypertext in your Web pages, you need to know the URLs. URL stands for Uniform Resource Locator, the address of the site you want to visit in your Web page. Hyperlinks can be pictures, called icons, that you can link to visit other sites; Hypertext links are words that you can click that link you to other Web pages, pictures, and graphics.
Creation of Hypertext links You must use HTML anchor tags. <A> </A> to show on what you want a link to appear. Also, you need to add attributes to that anchor. The key attribute is Hypertext REFerence command or HREF followed by an = sign and a value which is usually a URL. <A HREF= http://www.disney.com >The Disney Web Page</A>
Hyperlinks using a picture as a link <A HREF= http://www.disney.com > <IMG SRC= NAME OF FILE > </A> A is the anchor tag HREF is the command to fly to this page when you click on the picture. Make sure that there is an = sign and the URL in quotation marks. Also notice the closing anchor tag </A>.
Do Activity #6: Add hypertext links using 5 of your favorite web pages. Also, create 1 hyperlink. <P> These are my favorite websites: <UL> <LI><A HREF= http://www.yahoo.com>yahoo</a> </UL> Add a hyperlink to the webpage. <A HREF=http://www.disney.com><IMG SRC= disney.jpg ></A> (sample coding)
More Tags to View <HR> Creates a horizontal line. No closing tag necessary. <B> </B> Bolds text <I> </I> Italicizes text <EM> </EM> Emphasizes text, often italics <STRONG> </STRONG> Strongly emphasizes text (often bold) <BLINK> </BLINK>
Act 4 Add images to your web page. Please include attributes to the images such as height, width, and alignment to fit it just right to your webpage. <IMG SRC= NAME OF FILE HEIGHT=# WIDTH=#> (# is the number of pixels you want the picture to be) Also add the copyright to your webpage: ©Williston-Elko High School 2013 right above </BODY> tag.
Tables Sounds Internal Links
Tables on Webpages Tables are found everywhere on webpages. This is the coding for tables <TABLE BORDER>Begin a table w/ border <CAPTION > Title of Table</CAPTION> <TH>column headings</th> <TR>table rows </TR> <TD>table data </TD> </TABLE> We will work together on this. Add a table of your class schedule to your webpage.
Formatting Tables in Act. 6 Insert a table in your webpage of your class schedule. <CAPTION> My Classes </CAPTION> <P> <TABLE BORDER> <CAPTION>My Classes</CAPTION> <TR> <TH>Period</TH> <TH>Teacher</TH> <TH>Subject</TH> <TH>Course Description</TH> </TR> <TR> <TD>1A</TD> <TD>Depew</TD> <TD>IBA</TD> <TD>Learning about Computers</TD> </TR> </TABLE> Copy/paste and change the data for each succeeding row.
Lastly, we will be using internal links! Internal Links Just like an external link for coding: Text you click on and takes you somewhere else in webpage (not outside) <A HREF= #NAME >NAME</A> <A NAME= NAME >target <CENTER><A HREF="#0-5">0-5</A> <A NAME="0-5">0-5<H3><P> Add internal links to your webpage. Act. 8
Act 8 Resave Act. 6 as Act. 8. Insert the following above copyright coding: <P> My Life Story centered Divide the story by the following: Include a menu bar below the title. Link each item to the section. Be sure to include a Back link. 0-5 6-10 11-15 16 and older Add details to each section about yourself. You will be adding formatting tags as you add details to your story. Yes, you will have to type. 8-)
Sounds/Music Coding like hyperlink <A HREF= NAME OF FILE>TEXT</A> File is a wave (.wav) or a midi (.mid) You can also place the file in your <BODY> tag as background sound. It will play while the webpage is open. Read this link for more information on how to code for sound. Copy/paste is a great technique in webpage coding. <A HREF="TOPGUN_3.MID">DANGER ZONE</A> <BODY BGSOUND= name of file >
Summation Formatting Tags Lists Links Pictures Color Sounds Tables Navigation Tools Go to the top for example Cursor Trail (if browser supports it). Do a search and copy and paste the coding, as well as the picture Copyright symbol ©Williston-Elko High School 2013 All webpages are a combination of above features.