Netiquette - aworc.org
advertisement
AWORC – Women’s Electronic Network Training (WENT’99) Web Authoring 1 Web Authoring 1 1.Introduction to HTML 1)Why we know how to code html? Many Web authoring tools don't support all the latest HTML tags. If you know how to code HTML, it's easy to open up an HTML file and add extra tags by hand--including new tags that were developed after the site-authoring software hit the shelves. HTML is a living, growing language; understanding how it works is critical to keeping up with its latest innovations. 2)What is HTML? HTML stands for HyperText Markup Language. Hypertext is text, in any format, with an added feature: parts of the text is linked to other parts of the text, making it easy to jump from one part of the text to another. HTML is also a markup language. What this means is that it takes a document and marks specific parts of it, giving them special meaning. When you point your Web browser to a URL, the browser interprets the HTML commands embedded in the page and uses them to format the page's text and graphic elements HTML is a simple, universal mark-up language that allows Web publishers to create complex pages of text and images that can be viewed by anyone else on the Web, regardless of what kind of computer or browser is being used. HTML is just a series of tags that are integrated into a text document. They're a lot like stage directions - silently telling the browser what to do, and what props to use. HTML tags are usually English words (such as blockquote) or abbreviations (such as "p" for paragraph), but they are distinguished from the regular text because they are placed in small angle brackets. So the paragraph tag is <p>, and the blockquote tag is <blockquote>. Every time you use a tag - say <blockquote> - you must also close it off with another tag - in this case, </blockquote>. Note the slash - / - before the word "blockquote"; that's what distinguishes a closing tag from an opening tag. The basic HTML page begins with the tag <html> and ends with </html>. In between, the file has two sections - the header and the body. The header - enclosed by the <head> and </head> tags - contains information about a page that won't appear on the page itself, such as the title. The body - enclosed by <body> and </body> - is where the action is. Every thing that appears on the page is contained within these tags. So let's create a simple sample page, shall we? The first step, of course, is to create a new text document and name it "anything.html" where "anything" is, uh, anything. Your basic document will look something like this: <html> <head> <title>Summer</title> </head> <body> <h1>Summer Vacation</h1> <p>My summer vacation was sunny, silly, and far too short. <p>How many days till Christmas? </body> </html> 1 AWORC – Women’s Electronic Network Training (WENT’99) Web Authoring 1 So within the <head> tags, we have the title - "Summer" - which will appear in the bar across the top of your browser . Within the body tags, we have everything that will appear on the page. In this case it would look something like this: 1 As you might have guessed, <h1> is the tag for a headline (the largest headline, in fact) and <p>, of course, marks the beginning of a new paragraph. A <p> tag is one of the few tags that doesn't need to be closed off by a corresponding </p>, because the paragraph's end is implied with the next formatting tag. Seems simple, huh? Well, it is. Oh, and don't go thinking you need your own homepage to practice, either. You can save HTML documents on your local drive, and then open them up, using the "Open" option under the "File" menu on your browser. 3)Authoring HTML documents How to Create and View an HTML document? 1. Use an text editor such as Notepad to write the document. 2. Save the file as filename.html on a PC. This is called the Document Source. 3. Open Netscape (or any browser) Off-Line 4. Switch to Netscape 5. Click on File, Open File and select the filename.html document that you just created. Your HTML page should now appear just like any other Web page in Netscape. 6. You may now switch back and forth between the Source and the HTML Document switch to Notepad with the Document Source make changes save the document again switch back to Netscape click on RELOAD and view the new HTML Document switch to Notepad with the Document Source...... 4) Basic HTML Document Format Type This; <html> <head> <title>Basic HTML Format</title> </head> <body> <h1>Basic HTML Document Format</h1> </body> </html> 2 AWORC – Women’s Electronic Network Training (WENT’99) Web Authoring 1 Notes; Tags are always surrounded with angle brackets (less-than/greater-than characters)--for example, <HEAD> or <body> Most tags come in pairs and surround the material they affect. the first tag turns the action on, and the second turns it off. (There are some exceptions. For example <P>, <br> tags creates paragraphs and doesn't have an "off switch." The second tag--the "off switch"--always starts with a forward slash. For example, <B> </B>. Tags are embedded, so if you try, for instance, to do this: <HEAD><TITLE>Your text</HEAD></TITLE> it won't work. The correct order is <HEAD><TITLE>Your text</TITLE></HEAD>. The tags may be in either upper or lower case or mixed. Many tags have optional attributes that use values to modify the tag's behavior. The <P> tag's ALIGN attribute, for instance, lets you change the default (left) paragraph alignment. For example, <P ALIGN=CENTER> centers the paragraph following it. The <html> </html> pair instruct the browser to read it as an HTML document. The HEAD pair of tags identify the TITLE area. Notice that the TITLE text appears in the TITLE BAR of the browser window. The TITLE text will also be read by WWW search engines. The BODY pair of tags identify the BODY of the document. The H1 pair of tags instruct the line to be printed as the largest size HEADER. All HTML documents you write should have this basic structure. So, they should be included in all your HTML pages. All the rest of your page should be put between the BODY tags 2. The HTML basics Every Web page starts with <HTML> and ends with </HTML>. The whole Web page happens between these two tags. <HTML> ...</HTML> tells browsers the page is written in HTML Every HTML document is split into a head and a body, which are marked by <HEAD> and <BODY> tags. Every HTML document must have one of each, inside the <HTML> </HTML> tags. 1.1.1 Tags in head 1. <HEAD>...</HEAD> >-- contains information about the document ; appears just below the HTML tag in every HTML document 2. <TITLE>...</TITLE>-- tag, which puts text on the browser's title bar. For example, <HEAD> <TITLE>AWORC_TRAINING</TITLE> </HEAD> 1.1.1.1 Tags in Body Everything that appears on the Web page proper will go between the <BODY> tags. <HTML> <HEAD><TITLE>AWORC_TRAINING </TITLE></HEAD> <BODY> </BODY> </HTML> 3 AWORC – Women’s Electronic Network Training (WENT’99) Web Authoring 1 1) Headings: <H1>..</H1>--;codes text as headings; Header tags range from <H1> to <H6>, with <H1> the largest and <H6> the smallest. Notice that the headers automatically break the line for you. <BODY> <H1>Welcome to Went’99</H1> <H2>Learning good HTML</H2> </BODY> 2) Center: <CENTER>...</CENTER>--centers text and other elements on page <BODY> <CENTER> <H1>Welcome to Went’99</H1> <H2>Learning good HTML</H2> </CENTER> </BODY> 3) line break:<BR>--breaks text onto a new line (no vertical space between lines) separating paragraph :<P>--breaks text into a new paragraph The <P> tag breaks the text and inserts a blank line, which is useful for separating paragraphs from each other. The <P> tag have ALIGN attribute, for instance, lets you change the default (left) paragraph alignment.. Use <P ALIGN=RIGHT>...</P>: to align the paragraph right or <P ALIGN=CENTER>...</P> to center the paragraph. What’s a tag? <br> How do you create an Html document? <p> if you want to know that? It’s time to create our first HTML document. 5) Phrase Markups Not bad, but you can make some points jump out by using the <I> (italic) and <B> (bold) tags. Alternatively, you can use logical tags that let the browser decide what emphasis to use. Text marked with the <EM> and <STRONG> tags appear as italic and bold, respectively, in most upto-date browsers, but some older browsers that can't handle italic or bold may underline the text instead. (Those browsers won't differentiate text tagged with <I> or <B> at all.) You can also "nest" these tags to create bold and italic text (remember: first on, last off). Apply these tags judiciously, of course. <I>...</I>--creates italic text <B>...</B>--creates bold text <EM>...</EM>--creates emphasized text, usually italic <STRONG>...</STRONG>--creates strongly emphasized text, usually bold 4 AWORC – Women’s Electronic Network Training (WENT’99) Web Authoring 1 What’s a <I>tag</I>? <br> How do you create an <B>Html</B> document? <p> if you want to know that? It’s time to create our first <B><I>HTML</I></B> document. 6) Horizontal rule :<HR> <HR size=number> <HR width=number|%> <HR align=left|center|right> <HR noshade> <BODY> <H1>Welcome to Went’99</H1> <HR> <HR width=80% size=5 noshade> <H2>Learning good HTML</H2> </BODY> 7)List: <UL>...</UL>--creates an unordered (bulleted) list <OL>...</OL>--creates an ordered (numbered) list <LI>--used in conjunction with the <UL> or <OL> tag, designates a list item in an unordered or ordered list <UL> <LI>APWINC <LI>AWORC <LI>UNESCO </UL> To get an ordered, or numbered, list, we'd replace the <UL> tags with <OL> tags; the <LI> tags remain the same: The <P> tag have ALIGN attribute, for instance, lets you change the default (left) paragraph alignment The <OL> tag have TYPE attribute,.for instance , lets you change the default (number) numbered format. Use <OL type=A> or <OL type=a> or <OL type=I> or <OL type=i> <OL> <LI>APWINC <LI>AWORC <LI>UNESCO </OL> <OL type=a> <LI>APWINC <LI>AWORC <LI>UNESCO </OL> <UL> <LI>APWINC <UL> <LI>apwin.sookmyung.ac.kr <LI>www.women.or.kr </UL> <LI>AWORC <LI>UNESCO </UL> <UL> <LI>APWINC <OL> <LI>apwin.sookmyung.ac.kr <LI>www.women.or.kr </OL> <LI>AWORC <LI>UNESCO </UL> 5 AWORC – Women’s Electronic Network Training (WENT’99) Web Authoring 1 8) Image : <IMG>--adds an image to a page; must have SRC attribute The fllowing are attributes of <IMG> tag: 2 <IMG SRC=”filename”>--; points to location of digital image file <IMG WIDTH=number>-- defines width of image in pixels <IMG HEIGHT=number>-- height of image in pixels <IMG BORDER=number>-- defines border of image in pixels <IMG ALIGN=left|right>-- change the image alignment <IMG ALT=”text”>-- defines comment about image Use <IMG SRC="logo.gif">. When you place the image file in the same directory as your pages. JPEG or GIF format--the two formats supported by today's browsers. (JPEG works best for photographs; GIF for drawings and line art.) Images, even small ones, take a long time to download compared with text. Always keep the image as small as possible in both physical size and file size while still allowing it to get its message across. You can also speed up downloads by using the <IMG> tag's WIDTH and HEIGHT attributes <IMG SRC="logo.gif" ALIGN=RIGHT WIDTH=100 HEIGHT=50> C:\ :logo.gif a--sun.gif b--snow.gif < IMG src=logo.gif> < IMG src=a/sun.gif> < IMG src=a/b/snow.gif> < IMG src=../wind.gif> 2.1.1.1.1.1 C:\ b--wind.gif : a--rain.gif < IMG src=../a/rain.gif> 9) link --<A>...</A>--marks text as the start and/or destination of a link; requires the HREF attribute <A HREF=filename|URL>--attribute of <A> tag; makes text or image between <A> tags a hyperlink Give a warm welcome to the anchor (<A>) tag, which lets you connect text on your Web page to other Web pages, email addresses, and online destinations. The <A> tag tells the browser that you're creating a link. The HREF attribute stands for Hypertext Reference--a fancy name for a link. Whatever follows HREF= in quotes is the actual name, or URL, of what you want to link to. In this case, we're assuming that you're linking to pages that reside in the same Web server directory as your original index.html page. The anchor tag can do more than just link to other Web pages on the same site. <A HREF=iam.html>Who am i</A>? It can also link to pages at other Web sites. For instance, we could link to the APWINC home page like this: ...in the <A HREF="http://www.women.or.kr/">APWINC</A> . To make a link to your email address, you'll need to use the anchor tag again. <A HREF= "mailto:skrhee@women.or.kr">Send mail to me</A> 6 AWORC – Women’s Electronic Network Training (WENT’99) Web Authoring 1 10). <BODY>...</BODY>--contains all the text and images that make up the Web page, together with all the HTML elements that provide the control/formatting of the page <BODY BGCOLOR=RGB>--; designates color of page's background you can changing a page's background color is as simple as adding a attribute and value to the <BODY> tag. Modern browsers read some colors from a list of standard English words--such as white, blue, black, and the like. But to get total color control, you'll need to use hexadecimal codes that represent colors. That's not as daunting as it sounds: there are plenty of people who've already worked out all the color combinations and posted their hexadecimal equivalents on the Web. Try Doug Jacobson's RGB Hex Triplet Color Chart. For this example, let's keep things simple and use a plain white background. The hexadecimal code for white is #FFFFFF, so we'll expand the existing <BODY> tag to read: <BODY BGCOLOR="#FFFFFF"> <BODY BACKGROUND="image.gif">--;designates image as page's background If plain hues aren't exciting enough for you, you can use an image as your background. Any image you choose will tile into the background--that is, it will go into the background at whatever size it is and then reproduce itself over and over to fill the page. (Just remember that complex background images can often make the text difficult to read.) <BODY TEXT=RGB>--; designates color of page’s text <BODY LINK=RGB>--; designates color of link <BODY VLINK=RBG>--; designates color of visited link <HTML> <HEAD> <TITLE>APWIN Homepage</TITLE> </HEAD> <BODY bgcolor=#000000 text=#ffffff link=#ffff00 vlink=#ff2400> <CENTER> <H1>Welcome to Went’99</H1> <H2>Learning good HTML</H2> </CENTER> </BODY> </HTML> For this example about the hexadecimal code: FF0000 :red 0000FF:blue FF7F00:magenta FF1CAE:coral 000000:spicy FFFF00:spring green 00FF00:block 00FFFF:yellow FF2400:green 8F8FBD:cyan 007FFF:light sreel blue you can use 16 colors from a list of standard English words 7 AWORC – Women’s Electronic Network Training (WENT’99) 1.agua 2.black 3.blue 4.fuchsia 5.grey 6.green 7.lime 8.maroom 9.navy 10.olive 11.purple 12.red 13.silver 14.teal 15.white 16.yellow *http://www.infi.net/wwwimages/colorindex2.html 8 Web Authoring 1
