1 / 80

Learning HTML w3schools

Learning HTML http://www.w3schools.com. SWE 444 . Internet and Web Application Development. Dr. Ahmed Youssef. Introduction. HTML is a language for describing web pages. HTML stands for  H yper  T ext  M arkup  L anguage HTML is not a programming language, it is a  markup language

bell
Download Presentation

Learning HTML w3schools

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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>

More Related