Web Master and Developers Documentation

Web Master:
Geraldine Santos
Web Developers:
Alicia Rose Bie Edilyn Bobiles Ella Mae Mula Ma. Crizia Obea Geraldine Santos
Researchers:
Edilyn Bobiles Ella Mae Mula
DOCUMENTATION:
This site is created for computer enthusiasts who want to learn more about html. This includes definitions of different topics and lessons regarding html. Aside from that, the creators also prepared fun and interactive activities for the visitors of this site. I.
OBJECTIVES 1. 2. 3. To give information or knowledge regarding the basic html. To show that creating websites is challenging yet fun. To give tutorials on html using interactive activities and games.
II.
Website screen shot
III. Syntax
I. <HTML> <FRAMESET BORDER="0"> <FRAMESET ROWS=25%,75%> <FRAME SRC="banner.html"noresize> <FRAMESET COLS=15%,70%,15%> <FRAME SRC="navigation.html" noresize> <FRAME SRC="home.html" name="content"noresize> <FRAME SRC="other links.html" noresize> </FRAMESET> </FRAMESET> </HTML>
II. <html> <title>banner</title> <body background="anigif.gif"> </body> </html>
III. <html> <title>navigation</title> <head><h1>Topics</h1></head> <body background="pink.jpg">
<a href="home.html" target="content">HOME </a> <a href="introduction.html" target="content">Webpage,Website, HTML</a> 
<a href="element.html" target="content">Elements of a Webpage</a> <a href="text editor.html" target="content">Text Editors</a> <a href="4 basic tags.html" target="content">HTML Tags</a> <a href="font.html" target="content">HTML Fonts</a> <a href="background.html" target="content">HTML Background</a> <a href="marquee.html" target="content">HTML Marquee</a> <a href="images.html" target="content">HTML Images</a> <a href="sound.html" target="content">HTML Embed Sounds</a> <a href="videos.html" target="content">HTML Embed Videos</a> <a href="links.html" target="content">HTML Links</a> <a href="lists.html" target="content">HTML Lists</a> <a href="tables.html" target="content">HTML Tables</a> <a href="forms.html" target="content">HTML Forms</a> <a href="radio buttons.html" target="content">HTML Radio Buttons</a> <a href="checkboxes.html" target="content">HTML Check Boxes</a> <a href="option.html" target="content">HTML Select/Option Tag</a> <a href="two special button.html" target="content">HTML Special Buttons</a> <a href="search box.html" target="content">HTML Search Box</a> <a href="frameset.html" target="content">HTML Frameset</a> <a href="counters.html" target="content">HTML Counters</a> <a href="comments.html" target="content">FEEDBACK </a> </body> </html>
IV. <html> <title>other links</title> <head><center><h1>About Us </center></h1></head> <body background="pink.jpg"><center>
<img src="cia.jpg" align="center" height="50" width="50"> <a href="cia.html" target="content">Alicia Rose Bie</a> 
<img src="edilyn.jpg" align="center" height="50" width="50"> <a href="edilyn.html" target="content">Edilyn Bobiles</a> 
<img src="11.jpg" align="center" height="50" width="50"> <a href="ella.html" target="content">Ella Mae Mula</a> 
<img src="13.jpg" align="center" height="50" width="50"> <a href="criz.html" target="content">Ma. Crizia Obea</a> 
<img src="10.jpg" align="center" height="50" width="50"> <a href="ghe.html" target="content">Geraldine Santos</a> 
 </center> </body> </html>
V. <html>
<title>home</title> <head><center><img src="0008.gif" width="500" height="100" ></center></head><hr><hr> <body background="images7.jpeg"> Welcome to our website! This site is created for computer enthusiasts who want to learn more about html. This includes definitions of different topics and lessons regarding html. Aside from that, the creators also prepared fun and interactive activities for the visitors of this site. May this site be a useful source of knowledge so that the visitors, themselves, can also create their own websites in the future. </body> </html>
VI. <html> <title>Introduction</title> <head><center><h1>Webpage, Website,HTML</center></h1></head><hr><hr> <body background="blue.jpg"> <dl> <dt>Webpage <dd>-->It is a document or information resource that is sustainable for the world wide web and can be accessed through a web browser and displayed on a monitor or mobile device. There are ten <a href="element.html">elements of a webpage:</a> <dt>Website <dd>-->It is a collection of related web pages containing images, videos, or other digital assets. A website is hosted on atleast one webserver, accesible via a network through an internet address also called URL. <dt>HTML
<dd>-->It is defined as Hypertext Markup Language, is a predominant markup language of webpages. </dl> <hr><hr> <a href="quizweb.html" target="content">Take a Quiz</a> </body> </html>
VII. <html> <title>element</title> <head><h1><center><img src="cute6.gif" align="right" height="70" width="70">Elements of a Webpage<img src="cute6.gif" align="left" height="70" width="70"></h1></center></head><hr><hr> <body background="hi.jpg"> <dl> <dt>title <dd>-displays the browser's title bar.It is the name assigned to the page. <dt>heading <dd>-a larger size text usually bold or italic in style showing the different sections of a page. <dt>horizontal rule <dd>-inline images that displays line across the page to separate different sections. <dt>images <dd>-graphics,icons,bullet,line photos or pictures that are not part of the html file. <dt>image map
<dd>-a type of inline images that defines hotspots.These are areas that activate functions when selected. <dt>normal text <dd>-the text that makes up tha main content of the webpage.It has many formats.It can be in paragraph form or bulleted list. <dt>background <dd>-the wallpaper of the webpage. <dt>body <dd>-contains the information of the browser's window. <dt>animated images <dd>-inline images that include motion and animation.These images are more attractive to the users. <dt>links <dd>-text,phrases, or graphics that help the user to navigate more in the webpage. <img src="images element.jpg" align="center" height="900" width="600"> <img src="images 2.jpg" align="center" height="900" width="600"> </dl> <a href="quiz.elements.html">Take a Quiz</a> </body> </html>
VII. <html> <title>Text Editor</title> <head><marquee behavior="alternate"><h1><img src="133.gif">Text Editor (NOTEPAD)<img src="133.gif"></h1></marquee></head><hr><hr> <body background="love_25.gif"> There are several text editors that can be used in creating Html. Such editors are MicroSoft Word, Wordpad,and the most commonly used is the Notepad.
<center>Notepad</center> -is a simple text editor for Microsoft Windows. It has been included in all versions of Microsoft Windows since Windows 1.0 in 1985. -Notepad is a common text-only (plain text) editor. The resulting filestypically saved with the .txt extension. -It has no format tags or styles, making the program suitable for editing system files that are to be used in a DOS environment. <hr> <center>Parts Of The Notepad </center> <ul> <li> <li> <li> </ul> <center><img src="notepad.jpg" height="500" width="700"></center><hr> Main menu bar Scroll bar Text area
<center>Rules In Using Tags </center> <ul> <li>Each tag must be enclosed in < brackets >. <li>You can use small or capital letters. <li> Most tags comes in pair : the starting tag and the ending tag. </ul> <a href="quiz.text.html">Take a Quiz</a> </body> </html>
IX. <html> <title>Four Basic Tags</title> <head><h1><marquee behavior="alternate"><img src="ciagnda.gif" Height="50" width="50"> FOUR BASIC TAGS <img src="ciagnda.gif" Height="50" width="50"></h1></marquee></head><hr><hr> <body background="images (10).jpg"> <dl> <dt>< HTML >< /HTML > <dd>-the beginning and the end of the HTML document. <dt>< HEAD>< /HEAD > <dd>-used to header information. It is the beginning ang the end of the section of the document. <dt>< TITLE >< /TITLE > <dd>-indicates the beginning and the end of the title. The title is not dispaled in the body of the Webpage but on the title bar of the browser. <dt>< BODY >< /BODY > <dd>-indicates the beginning and the end of the contents of the body of the Webpage. </dl><a href="4basictags.avi">play a video file</a> <center>FORMATING TAGS</center> <dl> <dt> <dd>-creates a line break.
<dt> <dd>-creates a paragraph. <dt> <dd>-defines a bold text. <dt> <dd>-italic text <dt>< center > < /center > <dd>-center align <center>ACTIVITY 1</center> Directions: Create a syntax using the data below: TITLE: Friends HEADING: What Friends Do (insert break)(24 in size)by Cristal Moonlight(18 in size)(insert 2 horizontal rule) BODY: No matter how sad you feel(break a line) A friend makes your sadness heal.(insert paragraph) Just them being there is all it takes(break a line) For all the hurt inside you to break.(insert paragraph) Friends brighten up your days(break a line) Friends chase those fears away(insert paragraph) Friends help you through all the stress(break a line) When a friend is around, there is no need to distress(insert paragraph) Friends give you an inner strength to help you battle life's mysterious ways.(insert paragraph) A friend makes you feel like you belong(break a line) Even when life isolates you inside its walls.(insert paragraph) A friend is unique and forever true(break a line) 
A firend makes you smile anytime of the day(break a line) That is what friends do they always brighten up your day. <center>ACTIVITY 2</center> Directions: Create a syntax using the poem below: <center>FRIENDS A friend is someone we turn to when our spirits need a lift. A friend is someone we treasure for our friendship is a gift. A friend is someone who fills our lives with beauty, joy, and grace. And makes the whole world we live in a better and happier place. -Jean Kyler McManus-</center><hr><hr> <a href="quizintags.html">Take a Quiz</a> </body> </html>
X. <html> <title>fonts</title> <head><marquee behavior="alternate"><h1><img src="98.gif">The Font Element<img src="98.gif"></h1></marquee></head><hr><hr> <body background="floral.jpg"> <dt>Font Sizes <dd>As you have seen in the previous lessons, the font used by default is the one which is set up as the default text font in your browser. Usually this is "Times New Roman", black color
and size 3. To change the font size of the text on your webpages, you simply embed the text in the FONT element and add the SIZE attribute with a value between 1 (very small) and 7 (very big) to the opening font tag. See example below. Tags to be used: text <dl> <dt>Font Colors <dd>To change the text color you need to add the attribute COLOR to the opening FONT tag and assign it a value for the color. The color value can be any of the following 16 color names: black, silver, white, gray, maroon, red, blue, green, yellow, purple, fuchsia, cyan, lime, olive, navy, teal, aqua. Example: text <dt>Different Fonts <dd>Fonts--> To change the font style from the default (Times New Roman) to a different style, simply add the attribute FACE to the opening FONT tag. As value for the FACE attribute you can use any specific font name such as "verdana", "arial", "georgia", "bookman old style", "comic sans ms" and many more. Alternatively you may use generic font styles such as "serif", "sans-serif", "cursive", "fantasy" and "monospace". The font face values are case-insensitive, i.e. it doesn't matter whether you type "Arial" or "arial". Example: text</dl> </body> </html>
XI. <html> <title>bg</title> <body background="bg.jpg">
</body> </html>
XII. <html> <title>Marquee</title> <head><h1><marquee behavior="alternate" direction="right"><img src="166.gif" align="left" height="70" width="100">MARQUEE<img src="166.gif" align="right" height="70" width="100"></h1></marquee></head><hr><hr> <body background="nature8.gif">What is Marquee? The marquee tag is a non-standard HTML element which causes text to scroll up, down, left or right automatically. Tags to be used <img src="marquee.jpg"> <center> MARQUEE ATTRIBUTES</center> <center><img src="marquee1.bmp" height="600" width="600"></center> <center>ACTIVITY</center> Directions: Create a syntax using the data below: TITLE: Teacher HEADING: Number One Teacher(center)(size 24)(bold)(font color is blue, face is algerian)(marquee behavior is alternate, direction is left) BODY: (background image is teacher.jpg)(center)(font size is 20, face is verdana, color is red) Thank you skillfull teacher(break a line) for teaching me to be (break a line) 
a stronger, smarter person(break a line) academically.(insert paragraph) Thank you number one teacher(break a line) for acting like friend,(break a line) And taking time to show me,(break a line) lessons hard to comprehend,(break a line) Thank you for caring,(break a line) and lots of the stuff(insert paragraph) Thank you, My Number One Teacher.(insert horizontal rule) By Joanna Fuchs</center> <a href="qiuzmarquee.html">Take a Quiz</a> </body> </html>
XIII. <html> <title>Images</title> <head><center><h1><img src="94.gif" align="left" height="70"width="70">INSERTING IMAGES<img src="94.gif" align="right" height="70" width="70"></center></h1></head><hr><hr> <body background="56555.jpg"><h3> <dl> <dt><h2>What is an image?</h2> <dd> In computer science an image is an exact replica of the contents of a storage device (a hard disk drive or CD-ROM for example) stored on a second storage device. <dd>Sample picture of image: <dd><img src="pooh2.jpg" align="center" height="200" width="400"> <dt><h2>What is an animated image?</h2>
<dd> An animated GIF (Graphics Interchange Format) file is a graphic image on a Web page that moves - for example, a twirling icon or a banner with a hand that waves or letters that magically get larger. In particular, an animated GIF is a file in the Graphics Interchange Format specified as GIF89a that contains within the single file a set of images that are presented in a specified order. An animated GIF can loop endlessly (and it appears as though your document never finishes arriving) or it can present one or a few sequences and then stop the animation. <dd>Sample picture of animated images: <dd><img src="cute6.gif" align="center" height="200" width="400"> <hr><hr> <dt><h2>Tags to be used:</h2> <dd> -->the tag used in image: <img src="hun.jpg" height="100" width="500"> -->this tag is empty, which means that it contains attributes only, and has no closing tag. <hr><hr> <dt><h2>Attributes in Inserting Images and Animated Images:</h2> <dd><ol>SRC or SOURCE</ol> <dd>-->to display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display. <dd>Example: <img src="opk.jpg" height="100" width="500"> <dd><ol>Set the HEIGHT and WIDTH of an Image</ol> <dd>-->the height and width attributes are used to specify the height and width of an image. <dd>Example: <img src="yun.jpg" height="100" width="500"> <dt><h2>How to add an Animated Images?</h2> <dd>-->syntax for defining an animated image (.gif ): <dd>Example: <img src="juk.jpg" height="100" width="500">
</dl> </h3> <a href="quizonimages.html">Take a Quiz</a> </body> </html>
XIV. <html> <title>Embedding sounds</title> <head><h1><center><marquee behavior="alternate" direction="right"><img src="124.gif"> <img src="124.gif">Embedding sounds<img src="124.gif"><img src="124.gif"></marquee></h1></center></head><hr> <body background="blush.jpg">What is Sound? Sound is a mechanical wave that is an oscillation of pressure transmitted through a solid, liquid, or gas, composed of frequencies within the range of hearing and of a level sufficiently strong to be heard, or the sensation stimulated in organs of hearing by such vibrations. Tags to be used: Music is inserted onto a web page with the use of the embed tag. There are other ways to link to music, but embed is now considered the standard for inserting media. Below is an minimalist example of the embed tag using the src attribute to define the media file's location. < embed src="name of the song.file extension > Attributes of Html embed 
<ol> <li> <li> <li> </ol> <hr> Example < html > < title >sounds < / title > < body > < embed src="21 guns.mp3" hidden="false autoplay="true" > < / body> < / html > <img src="sound.jpg" height="200" width="500"> <embed src="21 guns.wma" hidden="false" autoplay="false"> <hr><hr> <a href="quizsound.html">Take a Quiz</a> </body> </html> width - the width of the media player. height - the height of the media player hidden - if this value is true then the media player will not be displayed. (Values are true/false)
XV. <html> <title>Videos</title> <head><center><img src="floatie160.gif" height="100" width="70" align="left">Inserting Videos<img src="floatie160.gif" height="100" width="70" align="right"></center></head><hr><hr> <body background="texture4.png"> <h2> Videos can be embedded into your html documents (web pages) two different ways. One method is to use the < embed /> tag to
display your media file. The embed tag does not require a closing tag. In fact, it works much like the image tag. A src attribute must be defined by the correct URL (local or global) in order for the video file to be displayed correctly. </h2> HTML - embed Attributes <h2> There are some unique attributes available to the < embed / > tag including: volume, autostart, hidden, and loop.</h2> <table border="1"> <tr> <th>Attributes <th>Description </tr> <tr> <td>volume <td>set a numeric value for the loudness of your media. (0-100) </tr> <tr> <td>Autostart <td>controls the media's ability to start without prompting. Values are true or false </tr> <tr> <td>hidden <td>controls whether or not the play/stop/pause embedded object is hidden or not. Values are true or false. (Hide your embeded media if you just want background noise) </tr> <tr> <td>loop <td>A true value means the media will continuously loop, false means no looping </tr> <td>playcount
<td>Setting a playcount means the media will repeat itself x number of times instead of continuously as with the loop attribute above. (playcount="2" will repeat the video twice) </tr> <tr> <td>height <td>sets the height of the video player </tr> <tr> <td>width <td>sets the width of the video player </tr> <tr> <td>autoplay <td>If present, then the video will start playing as soon as it is ready </tr> <tr> <td>controls <td>If present, controls will be displayed, such as a play button </tr> </table><hr><hr> HTML- video media file types <h3><ul> <li> .swf files - are the file types created by Macromedia's Flash program. <li>.wmv files - are Microsoft's Window's Media Video file types. <li>.mov files - are Apple's Quick Time Movie format. <li>.mpeg files - set the standard for compression movie files created by the Moving Pictures Expert Group.</h3> The < embed > Tag Example: <img src="video.jpg"> 
<a href="embed video.">Play a video File</a> <hr><hr> <a href="quizvideos.html">Take a Quiz</a> </body> </html>
XVI. <html> <title>Links</title> <head><h1><img src="114.gif"align="left"height="70"width="70"><center>LINKS<img src="114.gif"align="right"height="70"width="70"></center></h1></head><hr><hr> <body background="retro.jpg"> <dl> <dt>HYPERLINK <dd>-can simply be called "link" <dd>-is used to connect different webpages of different websites or web servers anywhere in the world. This can be done by just one click. </dl> <center>Four Types of Links</center> <dl> <dt>a. Links to E-mail <dd>-this link allows the visitors to contact the web developer for comments and additional information regarding the web page.</dl> TAG TO BE USED: <img src="links1.bmp"> <dl> <dt>b. Links to other HTML documents
<dd>-linking is very effective on the website that consists of multiple pages. <dd>-before you can link different HTML documents, there must be different HTML documents created</dl> TAG TO BE USED: <img src="links2.bmp"> <dl> <dt>c. Links to other websites <dd>-the created page will automatically link to the other website.</dl> TAG TO BE USED: <img src="links3.bmp"> <dl> <dt>d. Imagelink <dd>-it is used as a linking tool in connecting to another webpage or websites </dl> TAG TO BE USED: <img src="links4.bmp"> ACTIVITY 1 General Instruction: Create a syntax using the data below: HEAD: Different Examples of Webpages (18 in size)(font color is maroon, face is Bookman Old Style)(must be center)(marquee bahavior is scroll)(insert horizontal rule) TITLE: html link BODY:
To view the different examples of html document or webpages, just click the link below: (font color is green, face is castellar)(insert break) Example A (break a line) Example B (break a line) Example C (break a line) NOTE: Use link to other html file Example A filename is 1.html Example B filename is 2.html Example C filename is 3.html ACTIVITY 2 TITLE: EXAMPLE HEAD: FEEDBACK (must be 24 in size)(font color is blue, face is castellar)(must be center)(marquee behavior of text and image is alternate, name of image are 10.gif and 22.gif)(insert horizontal rule) BODY: For your comments and suggestions, click the link below: (font color is red, face is papyrus, size is 6)(break)(use email link, this will be mailed to apps_ac@yahoo.com) ACTIVITY 3 HEAD: (Add 2 images, alignments are left and right; height is 100, width is 100; the name of images are 13.gif)YOUR FEED BACK(24 in size)(font color is green, face is comic sans)(must be center)(marquee behavior is alternate)(insert horizontal rule) TITLE: email link BODY:
(background color is yellow) For your comments and suggestions, click the link below:(break)(font color is red, face is papyrus, size is 6) Click here (use email link, this will be mailed to comments@yahoo.com)<hr><hr> <a href="quizlink.html">Take a Quiz </a> </body> </html>
XVII. <html> <title>LISTS</title> <head><h1><marquee behavior="alternate" direction="right"><img src="89.gif" align="left" height="70" width="100">LISTS<img src="89.gif" align="right" height="70" width="100"></h1></marquee></head><hr><hr> <body background="1.jpg"> What is LIST?? <ul> <li> <li> Lists are often used to present information in an easy to read fashion. Lists can also be used to indent information. Lists can be bulleted, numbered or printed without bullets
and numbers. <li> It should also be noted that in any type of list, you can still use the line break and paragraph tags and
normal text mark-up tags to emphasize text etc. </ul> Different types of List in HTML <dl> <dt>Ordered List: 
<dd>It is a numbered list where the numbers are in order beginning with no. 1 <dt>Unordered List: <dd>It is a bulleted list <dt>Definition List: <dd> A definition list is a list of terms and corresponding definitions. <dd> Definition lists are typically formatted with the term on the left with the definition following on the right or on the next line. <dd>The definition text is typically indented with respect to the term. </dl><hr><hr>
<center>Tags </center> Ordered List <img src="ol.jpg" height="500" width="1000"> Unordered List <img src="ul.jpg" height="500" width="1000"> Definition List <img src="dd.jpg" height="500" width="1000"> <hr>
<center>TIPS </center> 
In any type of list, you can still use the line break and paragraph tags and normal text mark-up tags to emphasize text etc. Ordered list are numbered list so it includes a step by step procedure. Unordered lists are bulleted list so it is use or choices, for summaries <center>ACTIVITY L</center> Direction: Create an ordered list using the data below TITLE: Favorite Top 10 Songs HEAD: (must be bold, center)(24 in size)(font face is papyrus)Top 10 Favorite Songs(insert 2 line breaks) BODY: (background color is blue) 1. Broken-Heart- Motion City Soundtrack 2. If You Ever Come Back- The Script 3. How to Save a Life- The Fray 4. When It Rains- Paramore 5. Secrets- One Republic 6. Congratulations, I Hate You- Alesana 7. This Photograph is Proof- Taking Back Sundays 8. The World is Black- Good Charlotte 
9. Second Chance- Faber Drive 10. Shadow of the Day- Linkin Park <center>ACTIVITY M</center> Direction: Create an unordered list using the data below TITLE: Album and Songs HEAD: (must be center, bold)(24 in size)(font face is goudy stout, color is violet) Album and Songs(insert 2 line breaks) BODY: (background color is pink)(must be center, bold)(18 in size) -Feeling Sorry -Turn It Off -Where the Line Overlaps -Careful -Lookin Up -Ignorance -The Only Exception -Playing God -Brick By Boring Brick -Misguided Ghost -All I Wanted 
 <center>ACTIVITY N</center> Direction: Create a definition list using the data below TITLE: Subjects HEAD: (must be center, bold)(24 in size)(font face is verdana)Subjects with Meaning(insert 2 line breaks) BODY: (background color is yellow) English- The commonly used language -Language of United States and British Science- An area of knowledge that is an object of study -Knowledge covering general truths Mathematics- The science of numbers - The operation and relation between numbers <hr><hr> <a href="listquiz.html">Take a Quiz</a> </body> </html>
XVIII. <html> <title>tables</title>
<head><h1><marquee behavior="alternate" direction="right"><img src="151.gif" align="left" height="70" width="70">Creating Tables<img src="151.gif" align="right" height="70" width="70"></h1></marquee></head><hr> <body background="ji.gif">What are tables? The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells. Tags to be used: <img src="tab.jpg" height="500" width="1000"> Cell Spacing and Cell Padding With the cell spacing and cell padding attributes, you will be able to adjust the white space on your table. Spacing defines the width of the border, while the padding represents the distance between the cell borders and the content within. Cell padding <center><table border="1" cellspacing="10"><caption>Daily Allowance</caption> <tr> <th>day</th> <th>amount</th> </tr> <tr> <td>monday</td> <td>40.00</td> </ tr> </table> </center> Cell Spacing <center><table border="1" cellpadding="10"><caption>Daily Allowance</caption>
<tr> <th>day</th> <th>amount</th> </tr> <tr> <td>monday</td> <td>40.00</td> </ tr> </table> </center>
Example <center> <table border="1"> <caption>Daily Allowance</caption> <tr> <th>day</th> <th>amount</th> </tr> <tr> <td>monday</td> <td>40.00</td> </ tr> </tr> <tr> <td>tuesday</td> <td>40.00</td> </tr> <tr> <td>wednesday</td>
<td>60.00</td> </tr> <tr> <td>thursday</td> <td>45.00</td> </tr> <tr> <td>friday</td> <td>55.00</td> </tr> </table> </center> <dl> <dt><center>Tips on Creating Tables</center> <dd>- - Tables can be given backgrounds using the bgcolor attribute. Also, be aware that backgrounds are not limited to the <table> tag, you can also give separate backgrounds to < td > and < tr > tags. <dd>- - The < tr > tag must always be placed before the <t d > tag. <dd>- - The examples above show good form for organizing the table code. It may seem a bit complicated, but if you keep everything organized it will be much easier to manage down the road. <dd>- - Cell Padding and Spacing <dd>- - With the cellpadding and cellspacing attributes you will be able to adjust the white space on your tables. Spacing defines the width of the border, while padding represents the distance between cell borders and thecontent within. </dl> <hr><hr> <a href="quiztable.html">Take a Quiz</a>
</body> </html>
XIX. <html> <title>Forms</title> <head><h1><center><img src="119.gif" size="align="left' height="70" width="100">All About Forms<img src="119.gif" size="align="right" height="70" width="100"></h1></center></head><hr><hr> <body background="89899.gif"><center>Form</center> It is a container tag - It holds all of the elements such as text boxes and submmit buttons, etc. - It is used to pass data to a server. - Used to collect and process information inputted by the user, through its controls.<hr><center>Adding Forms</center> The Form Input Elements You can have different types of input elements in a form. Examples are checkboxes, radio buttons, simple text boxes, etc. Text - tells the browser that a single line text input box should be created. Name -gives a name to the field and used to identify the field on the server slide. Value -the text you give as value will be displayed by default in the text box. Maxlength -specifies the maximum number of characters the user can enter into a text box. Example: <img src="forms3.jpg"><hr><center>Form Attributes</center>Action - points to the url which the form submission is sent Method - specifies how to send form data Get - the form's data is added to the URL defined in the action attribute Post - the form's data is added to the body of the form.<hr><hr>
<a href="quizform.html">Take a Quiz</a></body> </html>
XX. <html> <title>Radio Buttons</title> <head><center><h1><img src="27.gif" align="left" height="70"width="70">RADIO BUTTONS<img src="27.gif" align="right" height="70"width="70"></center></h1></head><hr><hr> <body background="texture3.png"><h3> <dl> <dt><h2>What is radio buttons?</h2> <dd>-->A radio button or option button is a type of graphical user interface element that allows the user to choose only one of a predefined set of options. <dd>-->Radio buttons are used when you want to let the visitor select one - and just one - option from a set of alternatives. <dd>-->If more options are to be allowed at the same time you should use check boxes instead. <dd>Sample picture of radio buttons <dd><img src="radiobuttons.jpg" align="center" height="200" width="400"> <hr><hr> <dt><h2>Tags to be used:</h2> <dd><img src="oink.jpg" height="100" width="500"> <dd>-->is used to display a radio button. <hr><hr> <dt><h2>different attributes used:</h2> <dd>TYPE 
<dd>-->the TYPE attribute takes the value "radio" when used to create a radio button. <dd>NAME <dd>-->the author of the form assigns a value to the NAME attribute. Use the same name for all of the radio buttons in each group, this way the user is limited to exactly one option in the group. <dd>value <dd>-->used the VALUE attribute to distinguish between the different radio buttons in a group. <dd>checked <dd>-->the CHECKED attribute indicates which radio button should be selected when the page is first loaded. Only one radio button in each group may be checked. The CHECKED attribute does not take a value.<hr><hr> <dt><h2>examples:</h2> <dd><a href="example1.html">EXAMPLE 1</a> <dd><a href="example2.html">EXAMPLE 2</a><hr><hr> <dt><h2>tips:</h2> <dd>-->You should display your web page in several browsers to see how each one renders your page. <hr><hr> <dt><h2>importance:</h2> <dd>a. All radio buttons within a group must share the same name. That is, the value of the name attribute should be the same. For example, all three radio buttons in the "Preferred Color" group have name="preferred color". <dd>b. All radio buttons within a group should have a different value for the value attribute. For example, if one radio button has value="red", none of the others in that group should have a value of red, as this would defeat the purpose of having the extra radio button. 
<dd>c. The "label" for each radio button is determined by the text next to the radio button (not the value attributes). The value attribute is used by the form handler. </dl> </h3> <hr><hr> <a href="quizradio.html">Take a Quiz</a> </body> </html>
XXI. <html> <head><marquee behavior="alternate" direction="left"><h1><img src="119.gif" hieght="150" width="150">Checkboxes<img src="119.gif" hieght="150" width="150"></h1></marquee></head><hr><hr> <title>Checkboxes</title> <body background="criz.jpg"> <center>What is Checkbox?</center> <ul><li>Checkbox is a graphical user interface element that permits the user to make multiple selections from a number of options <li>Normally, checkboxes are shown on the screen as a square box that can contain white space. <li>A caption describing the meaning of the checkbox is normally shown adjacent to the checkbox. </ul> 
<center>Tags to be Used</center>
<center><img src="checkboxtags.jpg" hieght="400" width="500"></center> 
<center>Attributes for Checkboxes</center> 
<dl> <dt>NAME <dd>The name setting adds an internal name to the field so the program that handles the form can identify the fields. <dt>VALUE <dd>The value setting defines what will be submitted if checked. <dt>CHECKED <dd>It is possible to pre check the input boxes for your viewers using the checked attribute. Simply set the checked attribute to yes or no. </dl><hr>
<center><img src="cb1.jpg"></center>
<center><img src="cb2.jpg"></center> <hr> 
<center>Sample Output</center> <center><img src="output1.jpg"</center> <hr><hr> <a href="quizcheck.html">Take a Quiz</a> </body> </html>
XXII. <html> <title>select/option</title> <head><marquee behavior="alternate"><center><h1><img src="cool.gif">SELECT/OPTION TAG<img src="cool.gif"></center></h1></marquee></head><hr><hr> <body background="blush.jpg"> <ul> <li>The < option > tag defines an option in a select list. <li>The option element goes inside the select element. </ul> <center>ATTRIBUTES</center> <table border="1"> <tr> <td>Attribute <td>Value <td>Description </tr> <tr> <td>Disabled <td>Disabled <td>Specifies that an option should be disabled </tr> <tr> <td>Label <td>text <td>Specifies a shorter label for an option </tr>
<tr> <td>Selected <td>Selected <td>Specifies that an option should be selected by default </tr> <tr> <td>Value <td>text <td>Specifies the value to be sent to a server when a form is submitted </tr> </table> <center>EXAMPLE</center> <center><img src="select.bmp"></center> <hr><hr> <a href="quizselect.html">Take a Quiz</a> </body> </html> XXIII. <html> <title>two special buttons</title> <head><h1><center><img src="143.gif" align="right" height="70" width="70">Two Special Buttons <img src="143.gif" align="left"height="70" width="70">Submit and Reset Button</h1></center></head> <body background="surfaces.gif"> <dl> <dt><hr>Submit <dd>-used to send form data to a server.The data is send to the page specified.
<dt>Tags to be used: <dd>< form > < input type="submit" > <dd> -->help us to send information <dd>< form action"url" method="get"> </body> </html ><hr> <dt>Reset <dd>-exist to reset the field of your form.These are handy for very large forms and the user is having difficulty. <dt>Tags to be used: <dd>< input type="reset" > </dl><hr> <center> <table border="1"> <caption>Attributes to be used:</caption> <tr> <th>attribute</th> <th>descriptions</th> </tr> <tr> <td>Name</td> <td>adds an internal name.</td></tr> <tr> <td>Value</td> <td>defines what is written on the button</td></tr> <tr> <td>Align</td> <td>-defines how the button is aligned 
-etries are(middle, button,right, left, top, button) </td> </tr> <tr> <td>Tab Index</td> <td>defines in which order the different fields should be activated when the visitor clicks the tab key.</td></tr></table></center> <hr><hr> <a href="quizspecial.html">Take a Quiz</a> </body> </html>
XXIV. <html> <title>Search box</title> <head><center><h1><img src="98.gif" align="left" height="70"width="70">SEARCH BOX<img src="98.gif" align="right" height="70"width="70"></center></h1></head><hr><hr> <body background="texture4.png"><h3> <dl> <dt><h2>What is search box?</h2> <dd>-->A search box or search field is a common GUI element of computer programs, especially in file and web browsers and on web sites. <dd>-->It is basically a type of text box, the contents of which are to be searched for in a database. <dd>-->It is commonly coupled with a search button (sometimes indicated only by a magnifying glass symbol). 
<dd>Sample picture of search box: <dd><img src="search3.jpg" align="center" height="100" width="400"><hr><hr> <dt><h2>Tags to be used for:</h2> <dd>Google Search<img src="q.jpg" height="100" width="600"> <dd>Yahoo Search<img src="p.jpg" height="100" width="600"> <dd>Wikipedia Search<img src="search.jpg" height="100" width="600"> <hr><hr> <dt><h2>Attributes:</h2> <dd>TYPE <dd>-->tells the browser what kind of input it's looking. <dd>NAME <dd>-->the name that the search box will recognize. For example, "q" is for google search, "p" for yahoo search and "search" for wikipedia search.<hr><hr> </h3> <hr><hr> <a href="quizsearch.html">Take a Quiz</a> </body> </html>
XXV. <html> <title>Frameset</title> <head><marquee behavior="alternate"><h1><img src="163.gif">CREATING FRAMES<img src="163.gif"></h1></marquee></head><hr><hr> <body background="56555.jpg">
<ul> <li>Frames divide the browser window into parts, each of which appears as a separate HTML document. <li>Frames are used to divide the screen into two or more web pages and simultaneously display their contents in a single browser window. <li>A frame document is similar to regular HTML document. <ul> <center><img src="frameset.jpg"></center> ATTRIBUTES <dl> <dt>ROWS <dd>Defines a number and size of the horizontal frames to create. <dt>COLS <dd>Defines a number and size of the vertical frames to create.</dl> <center>< FRAME ></center> <dl> <dt>SRC <dd>Defines location and filename for frame contents. <dt>NAME <dd>Defines frame name reference by hyperlinks. <dl> <center>EXAMPLE OF FRAMES</center> SAMPLE SYNTAX FOR FINAL WEBSITE: <img src="frame1.jpg"> <img src="frame2.jpg"> <hr><hr>
<a href="quizframes.html">Take a Quiz</a> </body> </html>
XXVI. <html> <title>Frameset</title> <head><marquee behavior="alternate"><h1><img src="163.gif">CREATING FRAMES<img src="163.gif"></h1></marquee></head><hr><hr> <body background="56555.jpg"> <ul> <li>Frames divide the browser window into parts, each of which appears as a separate HTML document. <li>Frames are used to divide the screen into two or more web pages and simultaneously display their contents in a single browser window. <li>A frame document is similar to regular HTML document. <ul> <center><img src="frameset.jpg"></center> ATTRIBUTES <dl> <dt>ROWS <dd>Defines a number and size of the horizontal frames to create. <dt>COLS <dd>Defines a number and size of the vertical frames to create.</dl> <center>< FRAME ></center> <dl>
<dt>SRC <dd>Defines location and filename for frame contents. <dt>NAME <dd>Defines frame name reference by hyperlinks. <dl> <center>EXAMPLE OF FRAMES</center> SAMPLE SYNTAX FOR FINAL WEBSITE: <img src="frame1.jpg"> <img src="frame2.jpg"> <hr><hr> <a href="quizframes.html">Take a Quiz</a> </body> </html>
XXVII. <html> <title>comments</title> <head><center><h1>For comments and suggestions<h1></center> </body></head><hr> <body background="cia.png"height="300" width="500"> <form action="gerham_17@yahoo.com"method="get"> Name:<input type="text" name="first name" size="25" maxlength="50"> Age:<input type="text" name="age" size="2" maxlength="2"> GENDER: <input type="radio" name="group1" value=Male checked > Male <input type="radio" name="group1" value=Female" > Female Address:<input type="text" name="address"size="50" maxlength="60"> 
E-mail:<input type="text" name="E-mail"size="50" maxlength="60"> Birthday:<select> <option>january</option> <option>february</option> <option>march</option> <option>june</option> <option>july</option> <option>august</option> <option>september</option> <option>october</option> <option>november</option> <option>december</option> </select> <select> <option>01</option> <option>02</option> <option>03</option> <option>04</option> <option>05</option> <option>06</option> <option>07</option> <option>08</option> <option>09</option> <option>10</option> <option>11</option> <option>12</option> <option>13</option> <option>14</option> <option>15</option>
<option>16</option> <option>17</option> <option>18</option> <option>19</option> <option>20</option> <option>21</option> <option>22</option> <option>23</option> <option>24</option> <option>25</option> <option>26</option> <option>27</option> <option>28</option> <option>29</option> <option>30</option> <option>31</option> </select> <select> <option>1980</option> <option>1981</option> <option>1982</option> <option>1983</option> <option>1984</option> <option>1985</option> <option>1986</option> <option>1987</option> <option>1988</option> <option>1989</option> <option>1990</option>
<option>1991</option> <option>1992</option> <option>1993</option> <option>1994</option> <option>1995</option> <option>1996</option> <option>1997</option> <option>1998</option> <option>1999</option> <option>2000</option> <option>2001</option> <option>2002</option> <option>2003</option> <option>2004</option> <option>2005</option> <option>2006</option> <option>2007</option> <option>2008</option> <option>2009</option> <option>2010</option> <option>2011</option> </select> Is our website a user-friendly? <input type="radio" name="group1" value=yes checked > yes <input type="radio" name="group1" value=no" >no <input type="radio" name="group1" value=not so" >not so <input type="radio" name="group1" value=maybe" >maybe Is our website an educational site? <input type="radio" name="group1" value=yes checked > yes 
<input type="radio" name="group1" value=no" >no <input type="radio" name="group1" value=not so" >not so <input type="radio" name="group1" value=maybe" >maybe What part do you like most? <input type="checkbox" name="group1" value="home">home <input type="checkbox" name="group1" value=navigation" >navigation <input type="checkbox" name="group1" value=other links" >other links <input type="checkbox" name="group1" value=resources" >resources <input type="checkbox" name="group1" value=contacts" >contacts <input type="checkbox" name="group1" value=banner" >banner Comments and Suggestions <textarea cols="50" rows="10" wrap="hard"></textarea> <input type="submit"> <input type="reset"> </form></center> </body> </html>

Web Master and Developers Documentation

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Master and Developers Documentation

Uploaded by

Copyright:

Available Formats

Web Master:

Website screen shot

II. <html> <title>banner</title> <body background="anigif.gif"> </body> </html>

<img src="edilyn.jpg" align="center" height="50" width="50"><br> <a href="edilyn.html" target="content">Edilyn Bobiles</a><br><br>

<img src="10.jpg" align="center" height="50" width="50"><br> <a href="ghe.html" target="content">Geraldine Santos</a><br><br>

</font></b> </center> </body> </html>

XI. <html> <title>bg</title> <body background="bg.jpg">

<center><font color="brown" face="gretoon"size="6">TIPS </font></center><br>

XVIII. <html> <title>tables</title>

<font face="forte" size="6"><a href="quizform.html">Take a Quiz</font></a></body> </html>

<center><b><font face="snap ITC" color="brown"size="6">Tags to be Used</font></b></center>

<center><img src="checkboxtags.jpg" hieght="400" width="500"></center><br><br>

<center><b><font face="snap ITC" color="brown"size="6">Attributes for Checkboxes</font></b></center><br>

<center><img src="cb2.jpg"></center><br> <hr><br>

<font face="forte" size="6"><a href="quizframes.html">Take a Quiz</font></a> </body> </html>

You might also like