Transcript HTML
HTML – acronym for HyperText Markup Language Markup language - people create documents on the WWW that can easily be linked by words and pictures to other documents. HTML documents - plain text - created using any text editor (example: Notepad) HTML - invented by Tim Berners-Lee. Hypertext links enable to display another web document on current screen (links to many other related documents). A link may be a word, a group of words or a picture. Terminology and Definition Internet - Sometimes called simply “the Net” It is a worldwide system of computer networks. World Wide Web - Also call WWW,W3 or just the web. The World Wide Web is a whole hypertext servers that let HTML programmers present virtual, on screen pages combining text, graphics, audio and other files types. HTML - - The authoring language used to create documents on the World Wide Web. Html is similar to SGML (Standard Generalized Markup Language) Hypertext - Hypertext links enables to display another web document on a current screen Web Browser - - - This is an application software used to view the Html document created in Notepad. 2 most popular browser are:a) Microsoft Internet Explorer b) Netscape Navigator Others include Mosaic and Lynx. The appearances of a particular Web site may vary slightly depending on the browser you use. Getting Started. First time, save HTML code, must save it as an HTML file. Go to File Menu, choose SAVE AS and give a document a file name. Right after the name, put .html For the example: myhomepage.html The correct structure for an HTML document starts with: <HTML><HEAD>(enter here what document is about)<BODY> and ends with </BODY></HTML>. All the information you'd like to include in your Web page fits in between the <BODY> and </BODY> tags. - Tags 2. Paragraphs 3. Attributes 4. Lists 5. Making Lines 1. • • • • Graphics Alignment Links Tables -Most HTML tags of beginning tag and an ending tag. For example: <HTML> </HTML> -Notice the / in the second tag, all the ending tags contain a /. -This slash is very important, it tell the browser that what you wanted done has ended. At the top of every HTML document before anything has been types <HTML> At the end of HTML document after everything has been types </HTML> -This signifies the end of your HTML document. Notice the / in the second tag, always remember to put the / in the end tag, otherwise your page will not turn out right. -under <HTML> comes this page: <HEAD> -This tag does not affect what is on the page but you should get in the habit of putting it in. Below <HEAD> put this tag: <TITLE> - Beside it type the name of your web page, for instance “Arsenal Die Hard Fan Page”. At the end of “Practice Page” type this: </TITLE> - Remember the / in the end tag? So this is what it looks like: <TITLE> Arsenal Die Hard Fan Page </TITLE> -The <TITLE> tags designate what will appear in the title bar at the top of the browser. 2. Paragraphs A. Making a paragraphs -To make a paragraphs, start typing the text you want to appear on your web pages. -At the point where you want the paragraph to end put: <P> -This is the single tag requiring no end tag -The “P” stands for you guess it, paragraph. It makes the text that follow skip down two lines. Here is how it is used in our HTML example: <HTML> <HEAD> <TITLE> Practice Page </TITLE> </HEAD> <BODY> <CENTER> <H1> HTML is Easy To Learn </H1> </CENTER> <H3> Step One </H3> The key in learning HTML is practice. I know you can all do it <P>So let us give a try. </BODY> </HTML> Here is how web page would look: HTML is Easy To Learn Step One The key in learning HTML is practice. I know you can all do it. So let us give a try. B. Give a Break -If you want to start a new line in a certain place within a paragraph, you need to use this tag: . <BR> -It means “break”. It is a single tag requiring no end tag and acts like the <P> tag except it skips one line instead of two. -Using it if you want to start a new line in a particular place within a paragraph. Example: The key in learning HTML is practice. <BR> I know you can all do it.<P> So let us give a try. This is what would look like on your page. The key in learning HTML is practice. I know you can all do it So let us give a try. C. - Changing the way Text looks To make a word or several words bold like this, use these tags: <B></B> - For example: <B> Guess <B/> -To make word or several words underline: <U></U> -To make italicized words <I></I> A. Telling what To Do - Your probably noticed that the text on your web page is very small. We are about to change that with a new tag: <FONT></FONT> To change a size <FONT SIZE=“+3”>practice </FONT> -You may use any size from -6 to -6 anf from +1 to +6 to put them inside quotation marks. To change Color <FONT COLOR=“#FF0000”>practice</FONT> (#FF0000= red in color) To change a style <FONT FACE=“arial”>practice </FONT> To make a combination <FONT SIZE=“+6” COLOR=“#FF0000”FACE=“arial”>practice</FONT> To make ALIGN attribute in the beginning heading tag: <H3 ALIGN=“right”> your text </H3> For example: <P ALIGN=“right”> practice, practice, practice</P> Result: practice, practice, practice A. Unnumbered Lists -To make an unnumbered, bullets list, start with opening list 1. <UL> tag for unnumbered list 2. <LI>tag for list item, no closing tag 3. </UL> tag for closing list to end the entire My Hobbies include: Result: <UL> <LI>reading <LI>Swimming <LI>Traveling </UL> My Hobbies include: • reading •Swimming •Traveling B.Numbered Lists -To make an unnumbered, bullets list, start with opening list 1. <UL> tag for unnumbered list 2. <LI>tag for list item, no closing tag 3. </UL> tag for closing list to end the entire My Hobbies include: <OL> <LI>reading <LI>Swimming <LI>Traveling </OL> Result: My Hobbies include: 1. reading 2. Swimming 3. Traveling C. - Definition Lists A definition list ( code as <DL>) usually consists of alternating a definition term (code as <DT>) and a definition (code as <DD>) The Example: <DL> <DT>NCSA <DD>NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at UrbanaChampaign. <DT>Cornell Theory Center <DD>CTC is located on the campus of cornell University in Ithaca, New York <DL> Result: NCSA NCSA, the National Center for Supercomputing Applications, is located on the campus of the University of Illinois at Urbana-Champaign. Cornell Theory Center CTC is located on the campus of Cornell University in Ithaca, New York Example: <UL> <LI> A few New England states: <UL> <LI>Vermont <LI>New Hampshire <LI>Maine </UL> <LI>MICHIGAN <LI>INDIAN </UL> RESULT: A line Across the page Use <HR> It this “horizontal reference” and this is what it does: _____________________________________________________ See the line? Too long? How about this? ___________________ Little bigger? Okay. _____________________________ So how is done? By using the Width attribute in the <HR> tag like this:<HR WIDTH=“50%”> Exercise <HTML> <HEAD> <TITLE>practice page </TITLE> </HEAD> <BODY> <CENTER><H1>HTML is Easy To Learn</H1></CENTER> <H2><U>Step One</U></H2> <FONT SIZE =“+2” FACE=“arial”>The<I>key</I> in learning HTML is <B>practice. </B><BR> I know you can all do it.<P> So let give a try</FONT> <P ALIGN=“right”><FONT SIZE=“+6” COLOR=“red” FACE=“arial”>Practice</FONT></P><HR> </BODY> </HTML> Result: HTML is Easy To Learn Step One The key in learning HTML is practice. I know you can all do it. So let give a try Practice ________________________________________________ A. - - Putting a Picture On the Web Page The tag for putting a picture on the you web page is <IMG SRC=“graphicfilename.gif”> It is a single tag. IMG means “image” and SRC means “source”. SRC is an attribute of IMG. It tells the browser where to find the graphics. When putting of graphic name in IMG SRC tag always include the format it is in and always enclose it in quotation marks. For examples: “button.gif’ B. Each Graphic has Its Own IMG SRC 1. Each graphic you want to put on the page will have its own IMG SRC tag <IMG SRC=“button.gif”><IMG SRC=“button.gif”> Result: 2. To put the graphics further apart from each other add this: & nbsp;between the two tags: <IMG SRC=“button.gif”> <IMG SRC=button2.gif”> Result: 3. Each graphic on a new use either the <BR> or <P> tags: <IMG SRC=“button.gif”><P><IMG SRC=“button.gif”> Result: 4. To make graphic go down even further add a couple of <BR> tags between the graphics or to give your finger a break add this between the pictures:: <IMG SRC=“button.gif”><P> </P><IMG SRC=button2.gif”> - That will make a picture jump down more than a single <P> tag 3. Use a CENTER to center your graphics on the web page: <CENTER> <IMG SRC=“button.gif”></CENTER><IMG SRC=“button.gif”> Result: C. Background - To add textured background on your web page you will need background wallpaper which is actually a graphic repeated over until the screen is filled. <BODY BACKGROUND=“graphicname.jpg”> - Background is an attribute which goes in the beginning <BODY> tag. If all you want is to change the color of the web page use the BGCOLOR attribute in the BODY tag: <BODY BGCOLOR=“#00FFFF”> A. Alignment Text With Graphics - if you try to align a paragraph with a picture you know how frusting it can be. After the first text jumps right down and underneath the picture.To shop that from happening use a ALIGN attribute in the IMG SRC tag: <IMG SRC =“graphicname.gif”ALIGN=“left”> - To makes the text flow down the side of the picture. Example 1: <IMG ALIGN=“left”SRC=“pups.jpg”><I>See how the text here is going down the picture?<BR>The align attribute makes this possible</I> - Result: See how the text here is going down the picture? The align attribute makes this possible - Example 2: <IMG SRC=“pups.jpg” align-”left”><BR><BR><BR><I>See how the text here is going down the picture?<BR>The break tags make this possible</I> Result: See how the text here is going down the picture? The break tags make this possible. - If you paragraph ended before it reached the bottom of the picture and you want to start a new line of the text below the picture.use the CLEAR=“all” attribute in the <BR> tag: <BR CLEAR=“all”> Example 3: <IMG ALIGN=“left” SRC=“pups.jpg”><P> </P><I>see how far down the text here starts? <BR> The space in the P tags make it happen.<BR CLEAR=“all”> See how the line of the text starts below the picture?The CLEAR attribute did it.</I> Result: - See how far the text here starts? The space in the P tags it happen. See how this line of text starts below the picture?The CLEAR attribute did it. - - Putting It All Together Links, this is what the web is all about and it’s simple to do by using the anchor tags: <A></A> The anchor tag has an attributes HREF. It means “Hypertext Reference”. This attribute tells the browser where to find the link. A link on the same website would look like this: <A HREF=“filename.html”> here goes text or image to be clicked</A> - - The beginning <A> tag include the attribute with the file name of the web page you want to link to. Notice that the file name has the HTML extension, separated by a dot and that it’s enclosed in quatation marks. Keep all you pages in the same directory,something like “foldername/filename.html” - After the beginning anchor tag put the text or graphic you want people to click. This become the link to another page. - The end </A> finished the link. Here how to turn a graphic into a link: <A HREF=“filename.html”><IMG SRC=“graphicname.jpg”></A> - By default a linked graphic has a border around it, you can remove it by putting a BORDER attribute set to “0” in the IMG tag: <IMG SRC-graphicname.gif”BORDER=“0”> Linking To Another Site - To link to another website you have to type in the entire URL (internet address). For instance to link to this website you could put: <A HREF=“http://www.websitepages.ipfox.com”> click here</A> - - The beginning <A> tag contains the entire web address of the site enclosed in quotes. Sending Email For visitors to be able to send you email from your site, do the same thing bit instead of the web address, put your email adress after mailto: <A HREF=mailto:[email protected]>here goes stuff to be clicked</A> - There are no spaces between the mailto: and the email address.See where the quotation marks. Making a Table - Table can be used as page layouts to help better the placement of things on your web page. First is: <TABLE></TABLE> - The stuff between these tags will make up your table.After the beginning TABLE tag comes: <TR></TR> - It means “table row” the stuff between them will make up one row across the tables.After the beginning <TR> tag comes: <TD></TD> 1. It means “table data”. The stuff between them will make one box, call a cell in the one row of the table.Here is the example: <TABLE> <TR> <TD>parrot </TD> <TD>bird </TD> </TR> <TR> <TD>eagle</TD> <TD> cat </TD> </TR> </TABLE> - Can you see that this table will have two rows and each row will have two cells. Here’s the result: parrot bird eagle cat 2. <TABLE> tag has a border attribute: <TABLE BORDER=“1”> - The higher the number the thinker the lines will be and do not forget the quotation marks around the number.Result: 3. A couple of other attribute that can go into the <TABLE> tag are CELLSPACING and CELLPADDING. CELLSPACING define how far apart the cells are from each other. Example: <TABLE BORDER=“1” CELLSPACING=“5”> Result: CELLPADDING Cellpadding defines how far away from the cells edges the stuff inside them will be. Example: <TABLE BORDER=“1” CELLPADDING=“5”> Result: - Aligning Data By default everything in the cell will be to the left. You can center it or move it to the right by using the ALIGH attribute in the <TD> tag: <TD ALIGN =“right”>parrot</TD> Result: - There is also the VALIGN attribute. It makes stuff in the cell line up at the top or the bottom but there has to be enough space in the cell for it to work. This can be done by using the HEIGHT attribute in the <TD> tag: <TD VALIGN=“top”HEIGHT =“50”>bird</TD> Result: Putting Color In Cells - You can have your cell be a different color by using the BGCOLOR attribute: <TD BGCOLOR=“#87CEFA”>eagle</TD> Result: