ICS3U ...
advertisement
ICS3U HTML GUIDE SJA This HTML guide will provide the user with simple instructions, followed by print off examples of how the action command looks like. The topics that will be covered in this guide are Forms, HTML tags, Tables and Lists respectively. Forms: To a user, a form is simply an area in which that person can input information. In an analogy, a person wants to use the Internet to input his/her information such as name, birth, address, etc. Well, if there were no area for the individual to type that information, than such things like online registration forms would never exist. In order to apply this concept to HTML, 4 ideas will be discussed. These are text fields, radio buttons, checkboxes, and text areas. Textfields When a user would like to input letters, numbers, etc. in a form, Textfields are useful. <html> To run an html file you must start with this symbol and end the same way with a “/” <form> The same rule is followed with starting a form. First name: <input type="text" name="firstname"> To have the space to type what the user <br> would like you must type; input type=“text” Last name: <input type="text" name="lastname"> </form> </html> Radio Buttons Instead of typing letters and numbers manually, radio buttons are useful for providing the user with options to choose and pick from. <html> <form> <input type="radio" name="sex" value="male"> Male <br> <input type="radio" name="sex" value="female"> Female </form> </html> By stating input type= “radio” you are commanding the computer to take the action in making a clickable option for the user Checkboxes Checkboxes are similar to radio buttons in that they are ordered into an option list. While radio buttons allow the user to select one option, checkboxes’ allow the user to select two or more options. <html><form> I have a bike: <input type="checkbox" name="vehicle" value="Bike"> <br> I have a car: <input type="checkbox" name="vehicle" value="Car"> <br> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"> </form> </html> Computer Studies This command is simply activated by input type=”checkbox” Page 1 of 6 ICS3U HTML GUIDE SJA Text Areas Text Areas are used when the user may input comments or long paragraphs. <html> <form> comments: <textarea rows="2" name="Comments" cols="34"> </textarea> </html> </form> In order to have this command imputed, you must have; textarea rows= “2” and a cols= “34” By typing this, you are determining the length and width of your text area. HTML Tags: Tags are very important pieces in HTML. They provide the user with a successful HTML web page. Basic tags include starting a tag with “<” and ending the tag with “>.” Also when you start a tag at a beginning of the web page, you must end the same tag with a “/” existing before it at the end of the web page. HTML tags have been used earlier in this presentation. These basic tags include headings, paragraphs, titles, line breaks, and extending quotations. Beginning of a web page At the beginning of any browser you must start by typing <html> and ending the notepad document with </html>. By doing this you are informing the browser that the file will contain HTML-coded information. <html> is the code required to start the notepad <html> <form> comments: <textarea rows="2" name="Comments" cols="34"> </textarea> </form> The same code is used at the bottom except it has a “/” preceding the code to indicate the end of the notepad </html> Title of browser The title has to be indicated with a <title> and preceded by the “title name” were </title> ends the “title name.” The name provides the user with the document title. Furthermore it is the title displayed on the top of the browser. The <title> and </title> <html> <title>Mr.Carvell</title> </html> provides the user with the global browser “Mr.Carvell” on top. Body The symbols <body> and </body> are displayed on the top and bottom of the notepad. The body is simply the context to be displayed in your browser Computer Studies Page 2 of 6 ICS3U HTML GUIDE SJA Headings In HTML there are six levels of headings. They determine the size of the title within your browser. The symbols are <H1></H1> through <H6></H6>. Paragraph In order to start a new paragraph in HTML the symbol <p> is required at the beginning of the notepad and </p> required at the end. Although for a paragraph the end tag is not a necessity, it is important to still follow through with the end tag because future versions of HTML will require this end tag <html> <head> <title>Heading & Paragraph examples</title> </head> This indicates the beginning of content underneath <body> <h1>Heading Level 1</h1> <h2>Heading Level 2</h2> As displayed underneath the different <h3>Heading Level 3</h3> headers shows the six different font <h4>Heading Level 4</h4> The <p> sizes in html. <h5>Heading Level 5</h5> indicated the <h6>Heading Level 6</h6> beginning of <p>This is the first paragraph. It is short, but it is still a paragraph!</p> the paragraph </body> that was </html> written. While This ends the content, much like the conclusion ends the body paragraph </p> ends the paragraph. This is similar to periods to end a sentence. Line Breaks When the user would not like to start a new paragraph but would like to start a new line, than the symbol for a line break is <br>. <html> <form> I have a bike: <input type="checkbox" name="vehicle" value="Bike"> <br> This separates the two lines from each other. I have a car: <input type="checkbox" name="vehicle" value="Car"> </form> </html> Computer Studies Page 3 of 6 ICS3U HTML GUIDE SJA Preformed Text If the user would like to make spaces, line breaks and tabs displayed in the same location as the source file than the symbols <pre> and </pre> are used. <html> <head> <pre> On MouseUp change end on change set the forecolor of sprite 1 to random(256)-1 end</pre> This symbol provided the spaces and line <p>Internet growth</p> breaks displayed underneath. </head> </html> Extended Quotation When writing an essay and the individual is quoting a long speech, an indent is needed for the quotation. These symbols are <blockquote> and </blockquote>. <html> This allowed for the indent of the quotation. <head> <blockquote> <p>”The online community has developed into an incredible mixture of culture, commerce, and entertainment. Whether shopping, planning an evening on the town, or exploring the many attractions, the Internet puts the world at your fingertips.”</p> </blockquote> This initiated the end of the indentation. </head> </html> Horizontal Rules When an individual wants to separate sections of the browser the horizontal rule is used. The width of the horizontal line can issued to help create an appearance for the users liking. <html> <head> <hr size=“3” width=”90%”> </head> </html> This is what initiated the line found underneath. Tables: Tables, which are used not only in HTML but also in day-to-day activities, provides for great organization and a method to follow ideas through. A table includes rows and columns. In essence tables can be created in HTML as well. When making a table in HTML you must start by typing <table> and when the table is finished it is concluded by </table>. Borders Computer Studies Page 4 of 6 ICS3U HTML GUIDE SJA In HTML you can determine how thick the borders of your tables will be. The symbol used is <TABLE border=x>. (See text 1.2). Caption This determines the title of the users table. Before the title is written the symbol <caption> must be typed and after the title has been typed insert </caption>. (See text 1.2). Table Row Table Row is used to create the table rows in your table. The symbol required is <tr> and </tr>. (See text 1.2) Table Header The content within your table is grouped into certain categories. By default, if the symbol <th> and </th> is used it bolds the word and centers it (see text 1.2). Table Data The data that is written inside the cells of the table is initiated and inserted by the symbols <td> and </td>. (See text 1.2). Text 1.2 <html> <head> <title>table example</title> </head> The thickness of the borders were The <caption> allowed for the <body> determined by this title to be displayed above the <TABLE border=2> table as seen. <caption>caption contents are inserted here</caption> <tr> <th>Header cell contents</th> In order to categorize the contents, a bold title was needed to make the <th>Header cell contents</th> table easy to follow. This was initiated because of <th>. </tr> <tr> <td>cell contents</td> Initiated a new row. <td>cell contents</td> </tr> <tr> <td>cell contents</td> <td>cell contents</td> For the data to be observed in the table, <td> was used. </tr> </table> </body> </html> Table Attributes Horizontal Alignment To have horizontal alignment within the cell, the symbol “Align (left, right, center)” is used. Vertical Alignment To have vertical alignment within the cell, the symbol “Valign (top, middle, bottom)” is used. Computer Studies Page 5 of 6 ICS3U HTML GUIDE SJA Columns expansion When the user wants to increase the columns area the symbol “Col span=n” is used, where n represents the number of columns spans. Row expansion When the user wants to increase the row’s area the symbol “Rowspan = n” is used, where n represents the number of row spans. Wrapping When the user would like to turn off wrapping within the cell, the symbol “Nowrap” is used. Lists: Lists are significant in organizing a set of information in order. Lists can be numbered, unnumbered or definition lists. Numbered Lists Also known as ordered list – this type of list is used by <ol> and </ol>. But, the list will not be shown unless it is tagged with <li>. <html> <body> The symbol <ol> stands for the Ordered List. That is how it initiates the numbers. <ol> <li>Buy Groceries <li>Clean House The <li> tags the ordered list and allows it to initiate <li>Walk the dog </ol> </body> </html> Unnumbered List Also known as unordered list, this list is similar to the ordered list except it is <ul> and </ul>. In order for the unordered list to initiate it needs to be tagged as well with <li>. <html> <body> The symbol <ul> stands for the Unordered List. That is how it initiates the bullets. <ul> <li>Buy Groceries <li>Clean House The <li> tags the unordered list and allows it to initiate <li>Walk the dog </ul> </body> </html> Computer Studies Page 6 of 6
