Learning HTML - The Beginners Guide to Web Development

Page 1

5/28/2008

UMICITY.COM

THE BEGINNERS BEGI GUIDE TO O E-BUSINESS

Video Tutorials Available in Umicity www.umicity.com

Learning HTML |Ahmed Sammy Hegab| © 2008 Umicom Group Plc

Introduction This course is part of the beginners guide to e-business, a comprehensive step by step course with accompanying video tutorials for anyone interested in Web Development, Internet Sales/Marketing, Computerised Accounting, and finally for anyone who aspires to Setting up and run a successful online business. 1.

Starting with web development topics Learning HTML Learning XML Learning CSS Learning JavaScript Learning PHP & MYSQL Learning Smarty Template Engine Learning CodeIgniter Framework: Learning Facebook Application Development Learning UmiCity Application Development

We will also explore the world of Open Source, looking at all the common script like shopping carts, blogs, Forums, Content Management Systems (CMS) and much more .. 2.

Business Application topics • Learning MS Office • Learning Sage Line 50 Financial Controller 2008

3.

Online Sales & Marketing topics • Learning Search Engine Marketing • Learning Online Revenue Channels • Learning Social Networking • Learning Multi Level Marketing (MLM)

4.

Business Start-up topics • Learning Business Start-up Foundation o Registering a company o Inland Revenue, Taxation and National Insurance o Setting up a business bank account o Setting up PayPal accounts and Merchant Accounts o Office leasing, virtual office and hot desking o Telecommunication and internet service providers o Registering Domain name and hosting • Learning Business Planning o Market Research o Cash Flow Forecast o Break even Analysis & pricing o Business plan write up • Learning Business Funding o Share issue and allocation o Bartering

Hyper Text Mark-up Language ( HTML ) Course Lesson 1 - Video Tutorial available on www.umicity.com What is HTML? First we need to understand what HTML is and make quick short lessons on HTML tags Web pages are built using HTML, short for Hyper Text Mark-up language. HTML documents are comprised of text and coding mainly for formatting a page in a web browser just like you would format text in a text editor like Microsoft Word. A HTML documents is recognised by the web server by following extensions: .html .htm What is HTML Tags? Tags are individual instructions to the browser and are surrounded by brackets, <>. Most tags have an opening tag and closing tag. Most commonly it is written in uppercase characters just to make the coding easier to read but in generate it makes no difference in HTML coding whether it is upper or lower case. Who sets the HTML standards? The World Wide Web consortium, or W3C for short, sets HTML standards. The international group consists of the Web’s founders and industry leaders including companies such as Microsoft and Netscape. Web developers look to the W3C to establish standards and introduce new web technologies. The W3C is responsible for maintaining and guiding HTML standards. What is XHTML? XHTML is a stricter version of HTML. While in HTML you can be more free to leave tags out open tags and not close them in XHTML you cannot also in XHTML all codes must be in lowercase letters, all attributes must be enclosed in quotes. What is CSS? HTML allows for separate formatting instructions, called cascading style sheets(CSS). This frees up the Web developer to assign formatting to the entire pages on the web site. The extension of a CSS file is simply .css and can be referred to within a HTML file. Which shall we use HTML or XHTML? Seeing a need for additional structure for HTML documents, W3C introduced XML( extensible Mark-up Language). XML is a meta-mark-up language for creating other languages; however, it is not lenient as HTML, so the W3C rewrote HTML in XML and called it XHTML. XHTML has all the features of HTML but gains XML’s power and flexibility. The future of web pages development lies in XHTML, therefore in this course we will go direct into XHTML How do we view HTML pages? To view a HTML page we use an application called a Web Browser, there are many which include Internet Explorer, Firefox, Opera, Netscape and much more .. Each browser interprets HTML code in a different way, which simply means pages won’t always appear the same on different browsers. For this reason you should follow strict standards and write clean, well-formed HTML code and be sure to test your pages in different browsers to notice any variations in output.

Where do I code HTML? Writing HTML does not require any special software although there are many HTML Editors also known as IDE ( Integrated Development Environments) such as Dreamweaver and FrontPage, we won’t recommend them for this course. The best way to develop HTML pages is to use a simple text editor such as Notepad or you can download Text pad, Edit pad, Text Editor any nofrill text editor which are often the best choice for writing HTML code. Writing HTML HTML has different components Tags, Elements, Attributes and values Tags We start html with tags, in XHTML which is strict variations of HTML, you need to use lowercase letters in tags. Elements Within the tags we have elements which identify the different parts of HTML document. For example <body> and </body> are tags defining the body text element on a page. Closing tags always include a slash / Attributes and values Each element has unique attributes you can assign. Many attributes require that you set a value, such as measurement or specification. For example, you can set a paragraph’s alignment on the page using the align attribute, and set a value for the alignment by specifying the value as left, right, or center. For example, the code could be: <p align=”center”> My Paragraph text. </p> Values are always enclosed in quotation marks and appear within the element’s start tag. Entities Any special characters you add to a page, such as copyright symbol or a fraction are called entities. HTML uses entities to represent characters not readily available on the keyboard. All entities are preceded with an ampersand (&) and ended with a semicolon (;). For example, to add a copyright symbol to your page, the code looks like this: © Lesson 1: Creating basic HTML page Copy the code below and save it as myfirstpage.html, we will explain the tags and elements shortly after. Example 1: myfirstpage.html <!.DOCTYPE HTML PUBLIC “-//w3C//DTD HTML 4.0 Strict//EN””http://www.w3.org/TR/REC-html40/strict.dtd> <html><head> <title> My First Page: by Ahmed Sammy Hegab </title> <meta name=”author” content=”ahmed Sammy hegab”> <meta name=”description” content=”my first web page”> <meta name=”keywords” content=”html, learning, course, lessons, web development, Umicom, umicity, umigames, facebook”> <meta name=”copyright” content=”2008”> </head> <body><h1> This is my First HTML page</h1> <p align=”left”> Welcome to my very first HTML page. I am a new web developer learning more about this amazing work of web development and teaching others so we can get more done. The first example will show you how to write paragraphs and align them to left. This is just the basics of HTML coding and we hope you enjoy the lessons, it will just get more and more interesting the further we go in the course.. </p><br> Hello <br> Here is a new line <br> <b> now we make new line and the text bold</b> <br> let’s make some       blank space <br> <i>now is all italic</i> </body></html>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Strict//EN””http://www.w3.org/TR/REC-html40/strict.dtd>

To make sure your page is viewable by all web users, it is a good idea to include a DOCTYPE declaration. Copy and paste the above tag in every new page you create. In the above we are referring to the HTML 4.0 Strict <html> This tag declares the document is a HTML document <head> This tag starts the information describing the page, including any title text. <title> Title tag text to appear in the title bar of the Web browser. </title> This is to close the title tag. <meta name=”author” content=”my name”><meta name=”description” content=”my description”> <meta name=”keywords” content=”keyword, keyword, keyword, ..”> <meta name=”copyright” content=”year of copyright”> Adding Meta Data to give more details about your page, such as a page description, authoring information, copyrights, keywords and much more. Although metadata does not appear on the Web page itself, the information you insert in the metadata tags is useful with search engines. </head> This tag completes the document heading information for the page. <body> This tag starts the actual content of your web page. <h1> this is a largest size headline title they come in 7 sizes. 1 is the largest size and 7 is the smallest </h1> this is the closing tag of the headline title <p> This tag is to start a paragraph <p align=”left”> When adding aligns it makes it align to left, right or center. In the above tag we tell the browser to align the text to the left. </p> This is to close the paragraph tag <br> Line break, start a New line <b> start bold tag </b> close bold tag   This makes a blank space character <i> This Tag is the Italic tag and makes the whole string italic till it reach the close italic tag </i> </body> Close the body tag </html> Close the HTML declaration Now we have the basic concepts of HTML tags we will introduce a few more in the next example. We will assume you know how to start a proper HTML file with all necessary start-up tags like DOCTYPE, Meta Data, etc..

Example 2: mysecondpage.html <html> <head><title> A-Okay Apple Orchards ™</title></head> <body> <h1> A-Okay apple Orchards ®</h1> <br> <h4>Now taking orders for fall harvests</h4> <pre> Due to limited crops availability, be sure to place your order early We cannot guarantee the apples you select will be available, but will make every effort to fill your order, or notify you of any substitutions </pre> <br> <blockquote> To be or not to be, that is the question: whether ‘tis nonler in the mind to suffer the slings and arrows of outrageous fortune or to take arms against sea of troubles, and by opposing end them? </blockquote> <i align=”right”> from Hamlet (iii, i, 56-61)</i> <!—this is a comment and will be ignored by the browser –> <h5>Upcoming crop</h5> <ol><li>Special an apple variety, pear variety, or pumpkin type and size</li> <li> fill out your shipping information </li></ol><br> <ol type=”A”> <li>select a payment method</li> <li>submit your order</li> <li>Receive a confirmation e-mail</li> </ol> <h6>Featuring</h6> <ul><li>Red Delicious</li> <li>Golden Delicious</li></ul> <ul type=”square”> <li>Jonathon Gold</li><li>Fuji</li> <li>Macoun</li><ul type=”circle”><li> text1</li><li> text2 </li><li>text 3</li> </ul><li> just another item in the list</li> </ul><h1 align=”center”><u>A-Okay &reg: Apple Orchards</u></h1> <h2> Want to know more about our various apple varieties? </h2> <dl> <dt>Honey Crisp ™</dt> <dd> Developed from a 1960 cross of macoun and honey gold apples, the goal in creating this apple was to develop a variety that could withstand difficult winters without losing fruit quality. Skin in most red with a yellow background. While the surface has hallow dimples and dots, sweet, crunchy, and crisp.</dd> <dt> Cortland ©</dt> <dd> Sweet, juicy, and just a hint of tartness, this apple is known for its tender snow white flesh. Good for eating </dd> <p align=”right”> © 2008 -    Ahmed Sammy Hegab      Umicom Group Plc </p></body></html>

Now we will explain the new tags introduced ™ This is a special character which stands for TM – trade mark symbol <pre> Preformatted tag used to keep the line breaks and spaces you enter for a paragraph or block of text. Unlike other tags like paragraph tag the web browser will ignore hard returns, line breaks, or extra spaces between words unless you insert the preformatted text element tags. You can assign the preformatted tags to keep the spacing in place. </pre> This is the closing tag of preformatted tag <blockquote> Use block quotes to set off a paragraph from the rest of the document page. Block quotes are commonly used with quoted text or extracts from other sources. </blockquote> This is the closing tag of the block quote “<!- -“ This is the start of a comment tag, use comments to write notes to yourself within a HTML document. Comments do not appear on the actual Web page. ignore the quotation marks it is not part of the tag “- - >” This is the closing tag of the comment ignore the quotation marks it is not part of the tag <u> underline tag </u> closes the underline tag <ol>This is ordered lists tag which is used to display all kinds of ordered lists, for example, you can use numbered lists to show steps. </ol> This is the close tag of the ordered list <li> This tag is placed in front of each line that you want to add a bullet to, whether a number bullet point or any other kind of bullet point which we will see later on </li> This is the closing tag to the line indent bullet point tag <ol type=”A”> For the ordered list tag we can set a type which means instead of the default numbering bullet points we can use A: A, B, C,.. a: a, b, c, .. I: I, II, III, .. 1: 1, 2, 3, .. <ul>This is another bullet list tag similar to <ol> tag but it has default a disc bullet and it can be changed in a similar way by using it with a <ul type=”square”> and that will have a square bullet point or <ul type=”circle”> for a hollow circle bullet point </ul> is the closing tag for the bullet point tag We can also nest bullet point’s lists and we have demonstrated this by adding a nested <ul> before a closing of the first <ul> tag as seen in the example <DL> This is the definition list tag used to set apart text in the format of a glossary or dictionary. This tag is used when starting the definition list. We close the tag with </dl> <DT> Tag called definition term place in front of the term and close the tag with </dt> <dd> Place in front of each definition and </dd> after each definition to close We have also used some special characters embedded in the code so we will quickly make a list here Description Special Character Blank Space

 

Copyright

©

©

Code

Registered trademark

®

®

Trademark

™ ½ ¼ ¾ † ¢ £ € ¥ ¤ ‡ ± ÷ × ° Ǿ

™

0ne-half fraction One-fourth fraction Three-fourth fraction Dagger Cent Pound sterling Euro Yen sign General currency Double-dagger Plus or minus sign Division sign Multiply sign Degree sign Capital O, slash

&#189 &#188 &#190 &#8224 ¢ £ ₫ ¥ ¤ ‡ ± ÷ × º Ø

Colours, Fonts and styles We have already looked at some tags used in formatting text such as the <b> bold <i> italic, <u> underline We will now expand the text formatting with a few more tags introduced in the next example Example 3: changefont.html <html> <head><title>Umicom Design</title></head> <body> <!- - if we wanted to set a standard colour maroon for the entire text in the document we can within the body tag text=”maroon” for example <body text=”maroon”> will make all text on this page turn maroon - -> <h1 align=”center”> <font face=”arial, time new roman” color=”#008000”> Umicom Design </font> </h1> <p><font size=”1”> Font Size 1 measures 8 point</font></p> <p><font size=”2”> Font Size 2 measures 10 point</font></p> <p><font size=”3”> Font Size 3 measures 12 point</font></p> <hr><basefont size=”5”> <p>this is a test</p><p> Font Size 1 measures 8 point</p> <p>Font Size 2 measures 10 point</p> <p>Font Size 3 measures 12 point</p> <hr size=”12” width=”50%”> <p align=”center”> that is the end of this example </p> </body></html>

<body text=”maroon”> By adding the word text and assigning maroon like in the tag above it will make the entire document text colour to be maroon <font face=”arial, time new roman” color=”#008000”> You can change the font of your test using the font tags, <font> and </font> to close The FACE attribute allows you to add the font name and also include an alternative font name incase the user computer does not have the first option available. The colour attribute allows you to set a font colour. <font size=”1”> The size attribute can be used to set a font size <basefont size=”5”> The basefont tag sets a default size for the entire text font size in the document unless otherwise set individually. <hr size=”12” width=”50%> <hr> tag as we know is the horizontal ruler line, we used the size attribute to set a hight or thickness to the line and width attribute set to 50% means it would only take up 50% of the available screen Example 4: changecolours.html <html><head><title> Umicom Colours example</title></head> <body text=”#ffffff” bgcolor=”#808000” > <!- - we have now set the text colour to white and background to olive colour - -> <p> To be or not to be, that is the question! </p> <br><hr><br> <p> All the world’s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.<br> From As You Like It (ii, Scene VII)</p> <hr></body></html>

<body text=”#ffffff” bgcolor=”#808000”> The attribute text used in the body tag makes a default colour of white for all the text used in the document and the attribute bgcolor we used to set a default background olive colour Below is a table of common colour codes which can be used for text or background colours Colour Hexadecimal value Black #000000 White #ffffff Blue #0000ff Red #ff0000 Yellow #ffff00 Green #008000 Purple #800080 Gray #808080 Silver #C0C0C0 Navy #000080 Fuchsia #ff00ff Lime #00ff00 Maroon #800000 Olive #808000 Teal #008080

Hyper Text Mark-up Language ( HTML ) Course Lesson 2 Adding an Image We can add images to our page using the <img src=”filename”> you place this tag where we want the image to appear no need to close the tag Specify an Image size By default the image will appear at its size but if we wanted to place it within certain dimensions we can do this by resizing the image manually with an imaging editing program or adding the width and height property within the img tag <img src=”mypic.jpg” width=”300” height=”200”> Adding Alternative Text In some occasions a user might not be able to view an image due to browser settings also by adding alternative text description helps search engines identify the image and as a result the site is more optimize for search engines. To add an alternative tag we simply add the property alt=”this is an alternative text” within the img tag like so <img src=”mypic.jpg” width=”300” height=”200” alt=”this is a picture of Ahmed Sammy Hegab”> We can also add an additional text for the user to view which also benefits the search engine ranking called image title The code could look something like this <img src=”mypic.jpg” width=”300” height=”200” alt=”this is a pic of Ahmed Sammy Hegab” title=”Ahmed Sammy Hegab”> When the user scrolls over the image the text Ahmed Sammy Hegab will appear over the image. Align an image horizontally & Vertically We can use align attribute also in any tag such as a paragraph <p align=”left”> likewise we can use it in the img tag like the code below <img src=”mypic.jpg” width=”300” height=”200” alt=”this is a pic of Ahmed Sammy Hegab” title=”Ahmed Sammy Hegab” align=”right”> We now aligned the image to the right of the page. Vertical alignment we have three options: top, middle and bottom The code could be like this <img src=”mypic.jpg” width=”300” height=”200” alt=”this is a pic of Ahmed Sammy Hegab” title=”Ahmed Sammy Hegab” align=”middle”> There is also a <center> tag which can align to center a text or image and that must be closed otherwise the entire page of text and images will be all aligned in center <center> <img src=”mypic.jpg” width=”300” height=”200” alt=”this is a pic of Ahmed Sammy Hegab” title=”Ahmed Sammy Hegab”> </center>

Adding an Image border We can add a border around an image to give it added emphasis or make it more attractive using the board attribute within the img tag <center> <img src=”mypic.jpg” width=”300” height=”200” alt=”this is a pic of Ahmed Sammy Hegab” title=”Ahmed Sammy Hegab” border=”10”> </center> Now the image will have a border of size 10 pixels and we have also added the center tag to make the image centred in the middle of the page. Adding Space around an image We can add padding around an image using the attributes vspace and hspace the code could now look like follows <img src=”mypic.jpg” width=”300” height=”200” alt=”this is a pic of Ahmed Sammy Hegab” title=”Ahmed Sammy Hegab” hspace=”15” vspace=”15”> This will add 15 pixels to the height and width in blank space Stop text wrap In the situation where text is wrapped around an image and we wish to stop text wrapping or a portion of the text we can use the line break tag with the clear attribute which can hold three values: left, right or all All will stop text wrapping from all directions <br clear=”all”> No closing tag required. Adding a background image If we wanted to add a background image instead of just an image on a page, we simply add within the body tag the attributes of the name of image and the colour of text as an example below <body text=”white” background=”mybackground.jpg”> This will make the text white and add the background image called mybackground.jpg Adding Copyright notice on a page We can simply add a copy right underneath an image or at the footer or any page we create with the following &copy It can look something like this <p align=”center”> &copy 2008 Umicom Group Plc <p> Insert a link to another page We can create a link in the page when clicked takes the visitor to another page on the web or locally We will use the copy right example above and add a hyperlink to umicom.com, here is the example <p align=”center”> &copy 2008<a href=”http://www.umicom.com”> Umicom Group Plc</a> </p> Insert an image link We can just the same way as adding a text link we can also add an image link as below <center><a href=”http://www.umicom.com”><img src=”Umicom-logo.jpg” width=”100” height=”75”></a></center>

We simply instead of adding text we add an image. Link to a new window In some occasions we might want the user to start a new window instead of redirecting away from the main page, we can do this by adding the element target=”_blank” <a href=”http://www.umicom.com” target=”_blank”><img src=”Umicom-logo.jpg” width=”100” height=”75”></a> If we wanted to have this as a default for all links to be opened into a new window We simply add this tag <base target=”_blank”> between <head> tag For example <html> <head> <title>This is a page which will make every link to open in a new window</title> <BASE TARGET=”_blank”> </head> <body> <a href=”http://www.umicom.com”><img src=”Umicom-logo.jpg” width=”100” height=”75”></a> </body> Links to an area on the same page We can create links to other area on the same page and the best way is to illustrate this with an example to review all what we have learned. <html> <head> <title>Lesson 2: This is a HTML Course example</title> </head><body bgcolor=”#ffccff”> <h1> The Beginners Guide to Web Development </h1> <p><a href=”#section 1”> Section 1</a></p> <p><a href=”#section 2”> Section 2</a></p> <p><a href=”#section 3”> Section 3</a></p> <p><a href=”#section 4”> Section 4</a></p> <p><a href=”#section 5”> Section 5</a></p> <p> This is an introduction to the web development course created by Ahmed Sammy Hegab</p> <h2> Content</h2> <h3><a name=”section 1”></a>Section 1</h3> <p> In this section we will learn the basics of HTML </p> <center><p align=”center”> &copy 2008<a href=”http://www.umicom.com”> Umicom Group Plc</a> </p></center> </body> </html> Link to another file type We can add links to add non html pages resources like allowing users to download a .zip file this can be done very simply in the same way as linking to a page. <a href=”mydownload.zip”>Download Now</a> Link to an E-mail Address We can add a link to an email address, to allow the user to send us an email, this can be done with <a href=”mailto: ahmedsammyhegab@hotmail.co.uk”> email me</a> Change Link colours We can control the colour of the links on a page when a user clicks a link, the link changes colour.

We can assign link colours in the <body> tag. Using the link attribute to assign a colour to all the links on the page that the user has no clicked. Use the alink attribute, which stands for active link, to change the colour of active links, which appear when the user is in the process of selecting the link. Use the vlink attribute, which stands for visited link, to change the colour of links users have previously selected. <body bgcolor=”#ccffcc” link=”#ff00ff” alink=”#008000” vlink=”#000080”> Link to Audio or Video Files We can insert links on our page that when clicked download and play an audio or video file. When you link to a file, the file opens to play in a separate window Here is an example of the code which is very similar to adding a normal link Click<a href=”classic.mp3”>here</a> to listen to a selection from our gardening music collection We can embed the audio file so that it plays within the page for this we use the <embed> tag below is an example of the code Music from our garden collection<br> <embed src=”classic.mp3” width=”170” height=”25” autostart=”false” loop=”true”> We use the embed tag for video files also like this <embed src=”greenvideo.avi” width=”320” height=”240” autostart=”true” loop=”true”> This would play the video automatically and loop since both properties are set to true in the code above. Setup a background audio In some occasions we might want to play a background audio this can be achieved by using the <bgsound> tag with SRC & loop elements Example of code to appear below the <body> tag could look like this <bgsound src=”classic.mp3” loop=”3”> <!—this will loop 3 times Embed a Flash movie To add a flash movie it would be a little more length code than simply adding audio or video file. We use the <object> tag; let’s look at the code required <object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0 width=”160 height=”120”> <param name=”movie” value=”bee.swf” /> </object>

Hyper Text Mark-up Language ( HTML ) Course Lesson 3 Add a Table We can insert a table onto a page to organise data or control the entire page layout. Cells can hold text data, images, and other page elements We start a table with a <table> tag where you want to insert a table and close the table tag </table> <tr> to start the first row in the table </tr> to close the row <td> to start a column and close a column </td> Assigning a border around the table We can place borders similar way to a picture or any other element using the border attribute, we will do an example below <table border=”5”> Adjust cell padding and spacing We can also add padding and have a consistent cell sizes to make the table more uniform using cellpadding=”10” attribute And cellspacing=”10” attribute We can also use the height and width attributes to adjust the whole table or a column or row an example could be <td width=”100” height=”75”>Toys</td> Example 1: Tableexample.html <html> <title> This is a table with border, cell padding, spacing and width and hight example </title> <body> <h4 align=”center”>Our Top-Selling Products</h4> <table border=”5” cellpadding=”10” cellspacing=”10”> <tr> <td width=”100” height=”75”>Toys</td> <!—this will create a width of 100 pixels and 75 in height <td>DIY</td> <td>Clothes</td> </tr> <tr> <td>Teddy Bear</td> <td>Magnetic bracelet</td> <td>T-Shirt</td> </tr> <tr> <td>Doll</td> <td>Screw Driver</td> <td>Trousers</td> </tr></table></body></html>

Adding Column Labels If we are building a table to populate with data, we can add labels, also called headers, to the top of each column to identify column contents. To make the cell text bold, centred, we use the <th> tag An example could be

<table border=”4” bordercolor=”maroon” cellpadding=”10”> <tr> <th>Apple Variety</th> <th>price</th> <th># of apples</th> </td> <tr> <td>Jonathon Gold</td> <td>£10</td> <td>20-22 Apples</td> </tr> </table> Adding a Table Caption We can add a caption to the table to help us indentify the information in the table using the <caption> tag which needs to be closed with </caption> tag

<table border=”4” bordercolor=”maroon” cellpadding=”10”> <caption>Fall Apple Pricing</caption> <tr> <th>Apple Variety</th> <th>price</th> <th># of apples</th> </td> <tr> <td>Jonathon Gold</td> <td>£10</td> <td>20-22 Apples</td> </tr> </table>

Control which border to display We can exclude certain parts of a border and be selective which to show amd we can select the type of border to use The table below can help us to decide which value to use for external and internal borders

Value Void Above Below rhs lhs hsides vsides border

EXTERNAL BORDERS Display No external borders A border above the table A border below the table A border on the right side of the table A border on the left side of the table Borders on the top and bottom of the table Borders on the left and right sides of the table Borders on every side of the table (default)

Value None Cols Rows Groups all

INTERNAL BORDER Display No internal borders Borders between columns Borders between rows Borders between column and row groups Borders throughout the table cells (default)

Try the different table format to illustrate the border effects Here are two examples which you can test out within the table tag Example 1 <table border=”4” rules=”cols” bordercolor=”maroon” cellpadding=”10”> Example 2 <table border=”4” frame=”hside” bordercolor=”maroon” cellpadding=”10”> Adjust the table size We can control the width and height and this can be done in pixel size or in percentage of the whole page using the width and height attributes within the table tag, to make a table fit to the max size of the screen we set the width to 100% like in example below <table border=”4” bordercolor=”maroon” width=”100%” cellpadding=”10”> Span Cells across Columns and Rows We can span text across rows or columns using Colspan= or rowspan= An example of a code can be as follows <th rowspan=”6”> Available Crops</th> This will span across 6 rows <th colspan=”4”> Apples Prices </th> This will span across 4 columns Change Table Alignment Just like aligning paragraphs and images we can align tables, pretty much anything we can do to an image or paragraph we can do to a table from adding images, background colours, images etc.. We simply add the attribute within the table tag or the table row or table column tag Here is an example of aligning to right <table border=”4” bordercolor=”maroon” width=”100%” cellpadding=”10” align=”right”>

Hyper Text Mark-up Language ( HTML ) Course Lesson 4 Understanding forms We can use forms to gather data from users and this is the start of creating a more interactive website To create a form we start with the <Form> tag and we close just like most HTML tags with </form> However in a form tag we need to include a few attributes to explain what is to be done with the data after it had been submitted. Most common is to have the data processed by a CGI script, ASP script or PHP script. We will cover this in more depth with a PHP lesson in forms later. The code would look something like this <form method=”post” action=”submitted.php”> </form> Of course, this would be an empty form with no submit button or any input fields so we will learn how to do that in this lesson To illustrate the use of forms without any PHP or CGI script, we will submit the collected data to an email so the action property value would be mailto: ahmedsammyhegab@hotmail.co.uk We will re-write the above and replace submitted.php with the email address < form method=”post” enctype=”text/plain” action=”mailto: ahmedsammyhegab@hotmail.co.uk”> Entype property specify the type of data that would be sent, it tells the form it will be in text and plain not in HTML tags Adding a text box and large text area We can add text boxes a single line or a large text area. When creating a text box, we must identify the input field with a unique name. We can control the size and number of characters a user enters into a field. Example 1: Basicform.html <html> <head><title> Umicom Garden Shop </title>< < form method=”post” enctype=”text/plain” action=”mailto: ahmedsammyhegab@hotmail.co.uk”> <h3> Thanks for visiting our site. Please take a moment and fill out our survey. Your input will help us to create a better website</h3> <br>Where do you purchase most of your gardening materials and supplies? <input type=”text” name=”purchase” size=”45” maxlength=”40” value=”Please enter here”> </form> </body> </html>

In the input tag we have several attributes First being type this allows us to set the kind of data which will be collected in that input field, in the above example we are taking a text type then we give our field a name in this example we are calling it purchase next is size set to 45 characters but we set a maxlength of 40 characters which means users would be limited to enter up to 40 characters. We notice we used the value attribute which gives the field a default value which would be please enter here, it can be blank or we can avoid entering any default value to leave the input field blank. If we wanted to take a password input we take the type=”password” this will replace the characters entered with asterisk (*) We will expand on previous example to add a large text block we do this with the <textarea> tag Example 2: Textblockform.html <html> <head><title> Umicom Garden Shop </title>< < form method=”post” enctype=”text/plain” action=”mailto: ahmedsammyhegab@hotmail.co.uk”> <h3> Thanks for visiting our site. Please take a moment and fill out our survey. Your input will help us to create a better website</h3> <br> What gardening information would you like to see on our site? <textarea name=”gardeninfo” rows=”10” cols=”70” wrap=”hard”> </textarea> <br>Where do you purchase most of your gardening materials and supplies? <input type=”text” name=”purchase” size=”45” maxlength=”40” value=”Please enter here”> </form> </body> </html> Just the same way in every input field we need to assign it a name in the above the name we give to the textarea field is gardeninfo Rows is assigned 10 rows and 70 columns The value hard given to wrap forces the text to wrap in the text area and in the form result, we could have gave it the value off which means it will force the user to create a new line as they type. Adding Check boxes and radio buttons We can add check boxes and radio buttons to offer the user the option of clicking on more than one option or having the option to select more than one option This is simply by making the type a radio or checkbox instead of text we will illustrate this in the example below.

Example 3: checkradioform.html <html> <head><title> Umicom Garden Shop </title>< < form method=”post” enctype=”text/plain” action=”mailto: ahmedsammyhegab@hotmail.co.uk”> <h3> Thanks for visiting our site. Please take a moment and fill out our survey. Your input will help us to create a better website</h3> <br>How did you learn about our site? <br><input type=”radio” name=”learn” value=”search” >Random search <br><input type=”radio” name=”learn” value=”advert”>TV or Radio Advertisement <br><input type=”radio” name=”learn” value=”friend”>Friend or family member <br><input type=”radio” name=”learn” value=”newspaper”>Newspaper or Magazine <br><input type=”radio” name=”learn” value=”other”>other&nbsp<input type=”text” name=”other” size=”45”> <br> Did you find the information you were looking for? <br><input type=”checkbox” name=”find” value=”yesanswer”>Yes <br><input type=”checkbox” name=”find” value=”noanswer”>No <br> <br> What gardening information would you like to see on our site? <textarea name=”gardeninfo” rows=”10” cols=”70” wrap=”hard”> </textarea> <br>Where do you purchase most of your gardening materials and supplies? <input type=”text” name=”purchase” size=”45” maxlength=”40” value=”Please enter here”> </form> </body> </html>

Add a Menu List We can also add a drop down menu, for this we use the <select name=”menuoption” size=”1”> </select> Example 3: menuoptionform.html <html> <head><title> Umicom Garden Shop </title>< < form method=”post” enctype=”text/plain” action=”mailto: ahmedsammyhegab@hotmail.co.uk”> <h3> Thanks for visiting our site. Please take a moment and fill out our survey. Your input will help us to create a better website</h3> <br>How did you learn about our site? <br><input type=”radio” name=”learn” value=”search” >Random search <br><input type=”radio” name=”learn” value=”advert”>TV or Radio Advertisement <br><input type=”radio” name=”learn” value=”friend”>Friend or family member <br><input type=”radio” name=”learn” value=”newspaper”>Newspaper or Magazine <br><input type=”radio” name=”learn” value=”other”>other&nbsp<input type=”text” name=”other” size=”45”> <br> Did you find the information you were looking for? <br><input type=”checkbox” name=”find” value=”yesanswer”>Yes <br><input type=”checkbox” name=”find” value=”noanswer”>No <br> <br> What gardening information would you like to see on our site? <textarea name=”gardeninfo” rows=”10” cols=”70” wrap=”hard”> </textarea> <br> <br> What area of your yard would you most like to improve? <select name=”yard” size=”1”> <option value=”flowerbeds”>Flower Beds <option value=”deck”>Deck Area <option value=”grass”>Grassy Areas <option value=”frontyard” selected> front yard <option value=”backyard”>Back Yard <option value=”sideyard”>Side Yard </select> <br> <br>Where do you purchase most of your gardening materials and supplies? <input type=”text” name=”purchase” size=”45” maxlength=”40” value=”Please enter here”> </form> </body> </html>

Adding Submit and Reset button Most important feature of the form is the submit button and reset data button we will do this in the following expanded example here is the tag code <input type=”submit” value=”submit”>&nbsp&nbsp<input type=”reset” value=”reset”> Example 4: submitresetform.html <html> <head><title> Umicom Garden Shop </title>< < form method=”post” enctype=”text/plain” action=”mailto: ahmedsammyhegab@hotmail.co.uk”> <h3> Thanks for visiting our site. Please take a moment and fill out our survey. Your input will help us to create a better website</h3> <br>How did you learn about our site? <br><input type=”radio” name=”learn” value=”search” >Random search <br><input type=”radio” name=”learn” value=”advert”>TV or Radio Advertisement <br><input type=”radio” name=”learn” value=”friend”>Friend or family member <br><input type=”radio” name=”learn” value=”newspaper”>Newspaper or Magazine <br><input type=”radio” name=”learn” value=”other”>other&nbsp<input type=”text” name=”other” size=”45”> <br> Did you find the information you were looking for? <br><input type=”checkbox” name=”find” value=”yesanswer”>Yes <br><input type=”checkbox” name=”find” value=”noanswer”>No <br> <br> What gardening information would you like to see on our site? <textarea name=”gardeninfo” rows=”10” cols=”70” wrap=”hard”> </textarea> <br> <br> What area of your yard would you most like to improve? <select name=”yard” size=”1”> <option value=”flowerbeds”>Flower Beds <option value=”deck”>Deck Area <option value=”grass”>Grassy Areas <option value=”frontyard” selected> front yard <option value=”backyard”>Back Yard <option value=”sideyard”>Side Yard </select> <br> <br>Where do you purchase most of your gardening materials and supplies? <input type=”text” name=”purchase” size=”45” maxlength=”40” value=”Please enter here”> <br> <br><input type=”submit” value=”submit”>&nbsp&nbsp<input type=”reset” value=”reset”> </form> </body> </html>

Adding a file upload element We want users to send us files, such as CV’s or photos we can do this with the <input type=”file” name=”photo” size=”50”> We will illustrate by extending the further example to include the file up-loader field. Example 5: filesubmitform.html <html> <head><title> Umicom Garden Shop </title>< < form method=”post” enctype=”multipart/form-data” action=”mailto: ahmedsammyhegab@hotmail.co.uk”> <h3> Thanks for visiting our site. Please take a moment and fill out our survey. Your input will help us to create a better website</h3> <br>How did you learn about our site? <br><input type=”radio” name=”learn” value=”search” >Random search <br><input type=”radio” name=”learn” value=”advert”>TV or Radio Advertisement <br><input type=”radio” name=”learn” value=”friend”>Friend or family member <br><input type=”radio” name=”learn” value=”newspaper”>Newspaper or Magazine <br><input type=”radio” name=”learn” value=”other”>other&nbsp<input type=”text” name=”other” size=”45”> <br> Did you find the information you were looking for? <br><input type=”checkbox” name=”find” value=”yesanswer”>Yes <br><input type=”checkbox” name=”find” value=”noanswer”>No <br> <br> What gardening information would you like to see on our site? <textarea name=”gardeninfo” rows=”10” cols=”70” wrap=”hard”> </textarea> <br> <br> What area of your yard would you most like to improve? <select name=”yard” size=”1”> <option value=”flowerbeds”>Flower Beds <option value=”deck”>Deck Area <option value=”grass”>Grassy Areas <option value=”frontyard” selected> front yard <option value=”backyard”>Back Yard <option value=”sideyard”>Side Yard </select> <br> <br>Where do you purchase most of your gardening materials and supplies? <input type=”text” name=”purchase” size=”45” maxlength=”40” value=”Please enter here”> <br> <br>Send us your favourite lower photos &nbsp&nbsp<input type=”file” name=”photo” size=”50”> <br> <br><input type=”submit” value=”submit”>&nbsp&nbsp<input type=”reset” value=”reset”> </form> </body> </html>

Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.