Download
learning html http www w3schools com n.
Skip this Video
Loading SlideShow in 5 Seconds..
Learning HTML w3schools PowerPoint Presentation
Download Presentation
Learning HTML w3schools

Learning HTML w3schools

527 Views Download Presentation
Download Presentation

Learning HTML w3schools

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Learning HTMLhttp://www.w3schools.com SWE 444 Internet and Web Application Development Dr. Ahmed Youssef

  2. Introduction HTML is a language for describing web pages. • HTML stands for Hyper Text Markup Language • HTML is not a programming language, it is a markup language • A markup language is a set of markup tags • HTML uses markup tags to describe web pages Ahmed Youssef:: SWE444: Internet and Web Application Development

  3. HTML Tags • HTML tags are keywords surrounded by angle brackets like <html> • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end tag Ahmed Youssef:: SWE444: Internet and Web Application Development

  4. Web Page

  5. HTML Basic Document <html><head><title>Title of document goes here</title></head> <body> Visible text goes here…</body> </html> Ahmed Youssef:: SWE444: Internet and Web Application Development

  6. Example Explained • The text between <html> and </html> describes the web page • The text between <body> and </body> is the visible page content • The text between <h1> and </h1> is displayed as a heading • The text between <p> and </p> is displayed as a paragraph Ahmed Youssef:: SWE444: Internet and Web Application Development

  7. Heading Elements <h1>Largest Heading</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . . </h4> <h5> . . . </h5> <h6>Smallest Heading</h6> Ahmed Youssef:: SWE444: Internet and Web Application Development

  8. Heading Elements <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>

  9. Paragraphs Paragraphs are defined with the <p> tag. <html> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html> Ahmed Youssef:: SWE444: Internet and Web Application Development

  10. HTML Links HTML links are defined with the <a> tag. The href attribute specifies the destination of a link. Example <html> <body> <a href="http://www.w3schools.com"> This is a link</a> </body> </html> Ahmed Youssef:: SWE444: Internet and Web Application Development

  11. HTML Comments • Comments can be inserted into the HTML code to make it more readable and understandable. • Comments are ignored by the browser and are not displayed. • Comments are written like this: <!-- This is a comment --> Ahmed Youssef:: SWE444: Internet and Web Application Development

  12. HTML Lines • The <hr /> tag creates a horizontal line in an HTML page.<html> <body> <p>The hr tag defines a horizontal rule:</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> </body> </html> Ahmed Youssef:: SWE444: Internet and Web Application Development

  13. HTML Line Breaks • Use the <br /> tag if you want a line break (new line) without starting a new paragraph • Example <html> <body> <p>Welcome in Hail </p> <p>Welcome<br />in <br />Hail</p> </body> </html> Ahmed Youssef:: SWE444: Internet and Web Application Development

  14. HTML Text Formatting Ahmed Youssef:: SWE444: Internet and Web Application Development

  15. Exapmle <html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><i>This text is italic</i></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html>

  16. Preserving Whitespace <pre> class Foo { static void main(string[] args) { return; } } </pre> vs

  17. HTML Images In HTML, images are defined with the <img> tag. To display an image on a page, you need to use the src attribute. <imgsrc="/images/pulpit.jpg" border=“0" width="304" height="228" /> Ahmed Youssef:: SWE444: Internet and Web Application Development

  18. Images • WIDTH="..." The width in pixels of an image. • HEIGHT="..." The height in pixels of the image. • BORDER="..." Creates a border around image. Ahmed Youssef:: SWE444: Internet and Web Application Development

  19. (Relative) URL of the binary image file <img src="../images/bird.jpg" alt="Magpie picture" width="200px"/> Alternative text to be displayed if the image can't be displayed width and/or height attributes used to scale the rendered size of the image Ahmed Youssef:: SWE444: Internet and Web Application Development

  20. HTML Lists Ordered list: • The first list item • The second list item • The third list item Unordered list: • List item • List item • List item Definition Lists list of items, with a description of each item. Coffee - black hot drink Milk - white cold drink

  21. HTML List Tags HTML List Tags

  22. Lists Unordered Lists <ul> <li>First Item</li> <li>Another item</li> </ul> Ordered Lists <ol> <li>First Item</li> <li>Second Item</li> </ol> Definition Lists <dl> <dt>job</dt> <dd>a piece of work</dd> <dt>spade</dt> <dd>a tool for digging</dd> </dl>

  23. Numbered List <html> <body> <h4>Numbered list:</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> </html> </body> Ahmed Youssef:: SWE444: Internet and Web Application Development

  24. <h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase letters list:</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> Ahmed Youssef:: SWE444: Internet and Web Application Development

  25. <h4>Roman numbers list:</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase Roman numbers list:</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> Ahmed Youssef:: SWE444: Internet and Web Application Development

  26. Different types of unordered lists <html> <body> <h4>Disc list:</h4> <ul type="disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> </html> </body>

  27. <h4>Circle bullets list:</h4> <ul type="circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Square bullets list:</h4> <ul type="square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>

  28. HTML Tables • Tables are defined with the <table> tag. • A table is divided into • rows (with the <tr> tag), • data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. • <td> tag can contain text, links, images, lists, forms, other tables, etc.

  29. Example <table border="1"><tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td></tr><tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td></tr></table>

  30. HTML Table Headers <table border="1"><tr> <th>Header 1</th> <th>Header 2</th></tr><tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr><tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td></tr></table>

  31. Vertical Headers <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table>

  32. Tables <table border="2"> <caption>Fruit Juice Drinks</caption> <tr> <th></th> <th> Apple </th> <th> Orange </th> </tr> <tr> <th> Breakfast </th> <td> 0 </td> <td> 1 </td> </tr> <tr> <th> Lunch </th> <td> 1 </td> <td> 2 </td> </tr> </table>

  33. HTML List Tags HTML Styles - Background Color <html> <body style="background-color:yellow"> <h2 style="background-color:red">This is a heading</h2> <p style="background-color:green">This is a paragraph.</p> </body></html> Ahmed Youssef:: SWE444: Internet and Web Application Development

  34. HTML Style Font, Color and Size <h1 style="font-family:verdana">A heading</h1> <p style="font-family:arial;color:red;font- size:20;"> A paragraph.</p> Ahmed Youssef:: SWE444: Internet and Web Application Development

  35. HTML Style - Text Alignment <h1 style="text-align:center">This is a heading</h1> <p>The heading above is aligned to the center </p> Ahmed Youssef:: SWE444: Internet and Web Application Development

  36. HTML Forms HTML forms are used to pass data to a server. A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.

  37. HTML Form Tags

  38. HTML Forms The <form> tag is used to create an HTML form: <form> .input elements . </form>

  39. HTML Forms - The Input Element • The input element is used to select user information. • An input element can be of type • text field, • checkbox, • password, • radio button, • submit button, • and more. type = text|password|checkbox|radio|submit| reset|button

  40. Text Field <form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /></form>

  41. Password Field <form> Password: <input type="password" name="pwd" /></form>

  42. Radio Buttons <input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: <form><input type="radio" name=“Gender" value="male" /> Male<br /><input type="radio" name=" Gender " value="female" /> Female</form>

  43. Submit Button A submit button is used to send form data to a server.  <form> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form>

  44. Checkboxes User can select ONE or MORE options <form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car </form>

  45. Drop-Down List <form > <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form>

  46. Text-area To create a multi-line text input control. User can write an unlimited number of characters. <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea>

  47. Create a button <form > <input type="button" value="Hello world!"> </form> Ahmed Youssef:: SWE444: Internet and Web Application Development

  48. Last Lecture • List • Table • Styles • Forms Ahmed Youssef:: SWE444: Internet and Web Application Development

  49. HTML Forms - The Input Element used to select user information. type = text | password | checkbox | radio | submit | reset | button

  50. Text-area To create a multi-line text input control. User can write an unlimited number of characters. <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea>