Skeleton Tables Tags Used: Sample Table In HTML:

Size: px

Start display at page:

Download "Skeleton Tables Tags Used: Sample Table In HTML:"

Tyler Perry
7 years ago
Views:

1 HTML Handout HTML is a web programming language that consists of a series of open and closed tags. In this handout it will go over several commonly used HTML tags. When coding in HTML a standard practice is to when opening a new tag always indent and close it immediately. Reason? When web pages get up to 1000 lines of code it will make it much easier to troubleshoot and diagnosis problems much more efficiently. Skeleton Every HTML page has to have a basic structure. Without this structure the web page will not render at all. Here is the Skeleton Of HTML. Anything that needs to be shown within the web browser should be placed within the body tags. <html> <head> <title> My First Web Page </title> </head> <body> </body> </html> Tables One of the best ways to keep content organized on a web page is the use of tables. Tags Used: <table> <thead> Sample Table In HTML: <table border="1"> row 1, cell 1 row 1, cell 2 </tr> row 2, cell 1 row 2, cell 2 </tr> </table>

2 Preview In Web Browser: Formatting Tags HTML has several formatting tags to help make emphasis on certain sections of content. Tags Used: <u> underline certain words within a paragraph <i> italicize words within paragraphs <strong> Bold words within sentences. These tags can be used within other formating tags and they have corresponding closing tags as well. Example Code Using Formatting Tags The dog <strong> quick brown </strong> <i> fox jumped </i> <u> over the lazy </u> Preview In Web Browser: New Line Sometimes white space will need to be added to separate one section of the site with another.. The html tag to use is a <br />. This is one of the few html tags that requires no close tag. Within the webpage wherever a <br /> is found a blank line will be shown. Image. Sometimes to make a website more pleasing to the human eye, some pictures can be added to the web page. The Image tag is special because it has several attributes that can be added and does not have any

3 closing tag. Some attributes include a max width and height, border, and description known as alt. Example Of Image Code <img border="0" src="pulpit.jpg" alt="pulpit rock" width="304" height="228" /> Preview In Browser: Forms: Forms are one of the easiest ways for a web site programmer to get information from the person who is using the site. Some items found within a form are select boxes, text fields, radio buttons, textarea, and check boxes. The next section of this handout will go over. Each form item has a name attribute. A smart practice is to have a label in front of each form element so the user knows what is being asked. It is important to name each form element an appropriate name due to the reason when php gets introduce it will come in handy. The next few examples will show sample code of each form item with 1 example of what it would look like in a web browser. The Form has two attributes that must be set properly or else the form will not work. The two attributes are action and method. The method must ALWAYS be set to POST and action is the file name of the next webpage which does the logic of the form. Usually its called save_form.php How the logic gets done with the form will have to wait until php is taught. Text Field TextBox Element <input type= textbox name= textbox1 > Text Area Textarea<textarea name= textarea > Select Box Select Box Choice<Select Name= Select_Box > <option value= 1 > 1 </option> <option value= 2 > 2 </option> <option value= 3 > 3 </option> </Select>

Radio Buttons: <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female Check Boxes <input type="checkbox" name="vehicle" value="bike" /> I have a

4 Radio Buttons: <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female Check Boxes <input type="checkbox" name="vehicle" value="bike" /> I have a bike <input type="checkbox" name="vehicle" value="car" /> I have a car Submit Buttom Without this form element, the form is basically useless <input type="submit" value="submit" name= submit /> Preview In Web Browser: Colours Now that this handout has covered some of the basics for programming a web page, now it is time to slowly add some colour to the web page. This can be done by adding a style to each previously mentioned tag. We can either change the background colour of an object or can change the font colour of an object. The colour can be set by either using English words (Example blue, green,red, pink, gold) or can be done using hex values (#FCCFCC, #AABBCC). Hex values range from 0-9 and A-F. Change Background Colour Of An Object. <body bgcolor= red >

5 Preview In Web Browser: Change Font Colour Of An Object. <font color= green > This text will be green </font>

Site Maintenance. Table of Contents

Site Maintenance. Table of Contents Site Maintenance Table of Contents Adobe Contribute How to Install... 1 Publisher and Editor Roles... 1 Editing a Page in Contribute... 2 Designing a Page... 4 Publishing a Draft... 7 Common Problems...