Module 5 - PowerPoint PPT Presentation

reed
module 5 n.
Skip this Video
Loading SlideShow in 5 Seconds..
Module 5 PowerPoint Presentation
play fullscreen
1 / 45
Download Presentation
Module 5
109 Views
Download Presentation

Module 5

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

  1. Module 5 HTML: An Introduction

  2. What is HTML? • A language to describe and create web pages. • Stands for: Hyper Text Markup Language

  3. What Do You Need? Just two very basic things and you can start creating your own web pages! 1) A Browser: Google Chrome, Internet Explorer, Mozilla Firefox etc. 2) Text Editor: Notepad, Pico, TextEdit

  4. Elements and Tags Elements:HTML document contains several elements which give it structure. Major Elements: <html>...</html> <head>...</head>; <body>...</body> Tags: Labels used to mark the start and end of an element. Opening Tag: <head> Closing Tag: </head>

  5. Example <p align=”left”> HTML is really easy!! </p> Opening Tag Element Attribute C Content Closing Tag

  6. First Web page! <html> <head> <title> My First Page </title> </head> <body> Hi! I hope this works…. </body> </html>

  7. Heading Tags There are 6 possible headings: <h1 > This is Heading one </h1> <h2 align=”left”> This is Heading two </h2> <h3 align=”center”> This is Heading three </h3> <h4 align=”right”> This is Heading four </h4> <h5 align=”justify”> This is Heading five </h5> <h6> This is Heading six </h6>

  8. Paragraph And Font Tags Paragraph Tag:<p>....</p> <p align=”left”> This is a paragraph </p> <p align=”center”> Another paragraph </p> <p align=”right”> One more paragraph </p> Font Tag:<font>...</font> <font face=”Monotype Corsiva” size=14 color=”red”> This is a random line. </font>

  9. Formatting Tags Bold & Strong: This is <b> bold </b> and <strong> strong </strong> Italics & Emphasis: This is<i>italics</i> and <em>emphasized</em> Underline: This is <u>underlined</u> Superscript and Subscript: This is in <sup>superscript</sup> and this is in <sub>subscript</sub>

  10. URLs URL is the address of a web page. Composed of words(http://www.google.com)or numbers(IP address)(192.68.20.50) Stands for: Uniform Resource Locator

  11. URL Syntax https://www.youtube.com/watch?v=5gkJ_8Fow64 To break it down: scheme://host.domain:port/path/filename Scheme: Defines type of internet service.(http/https/ftp) Host: Domain host (default for http is www) Domain: Internet domain name (youtube.com) Port: Port number at the host (default for http is 80)

  12. https://www.youtube.com/watch?v=5gkJ_8Fow64 scheme://host.domain:port/path/filename Path: Path at the server Filename: name of document/resource [1] [1] http://www.w3schools.com/html/html_urlencode.asp

  13. URL Schemes HTTP (Hyper Text Transfer Protocol): Not encrypted HTTPS (Secure HyperText Transfer Protocol): Web pages are secure and information exchange is encrypted. FTP (File Transfer Protocol): For downloading and uploading files to a website. File: A file on your computer [1] [1] http://www.w3schools.com/html/html_urlencode.asp

  14. Hyperlinks Use the <a>...</a> tag External Hyperlinks: Click <a href=”http://www.google.com/” target=”_blank”> here </a> to go to Google’s homepage.

  15. Internal Hyperlinks: Helps in creating internal bookmarks. Use id attribute and “#” <a href=”#tips”> Visit Useful Tips Section </a> <a id=”tips”> Useful Tips </a>

  16. Image Tag Just use <img>(Open Tag) <img src=”image.gif” width=”40%” height=”350” border=”5” alt=”This is a cartoon”> * can set height and width in pixels or percentage of screen size

  17. Lists There are three types of lists: Ordered Lists:<ol>...</ol>, <li>...</li> Unordered Lists:<ul>...</ul>, <li>...</li> Description Lists:<dl>...</dl>, <dt>...</dt>, <dd>...</dd>

  18. Ordered Lists Fruits <ol type=”A”> <li>Apples</li> <li>Oranges</li> </ol> *Other types: a, A, 1, i, I

  19. Unordered Lists Drinks <ul type=”square”> <li> Tea </li> <li> Coffee </li> <li> Coke </li> </ul> *Other types: disc, square, circle

  20. Description Lists <dl> <dt>Pizzas </dt> <dd>Cheese, Pepperoni and Veggie </dd> <dt>Soft Drinks </dt> <dd> Sprite, Ginger Ale and Pepsi </dd> </dl>

  21. Tables GO FROM LEFT TO RIGHT!!! Tags Used: <table>...</table> <tr>.........</tr> <th>........</th> <td>........</td>

  22. <table border=2 align=center bgcolor=”#F5DEB3” cellpadding=2 width=75% height=50%> <tr align=”left”valign=”top”> <th> Firstname </th> <th> Lastname </th> <th> Age </th> </tr> <tr align=”center”valign=”middle”> <td> John </td> <td> Doe </td> <td> 20 </td> </tr>

  23. <tr align=”right” valign=”bottom”> <td> Will </td> <td> Smith </td> <td> 16 </td> </tr> </table>

  24. Forms Used to pass data to server. Tags used:<form>...</form> <input>...</input> <textarea>...</textarea> <select>...</select> <option>...</option>

  25. Text boxes <form> Username <input type=”text”name=”uname”> Password <input type=”password”name=”pwd”> </form> *default width=20 characters Multiple lines: <textarea rows=”10” cols=”30”> This box is for longer text like addresses. </textarea>

  26. Buttons Radio button: <input type=”radio”name=”gender” value=”male”>Male <input type=”radio” name=”gender” value=”female”>Female Check Boxes: <input type=”checkbox”name=”drink” value=”tea”>I will have tea <br> <input type=”checkbox”name=”drink” value=”coffee”>I will have coffee

  27. Drop Down List <form> <selectname=”Transport”> <optionvalue=”Car” selected> Car </option> <option value=”Bicycle”> Bicycle </option> <option value=”Skateboard”> Skateboard </option> <option value=”Transit”> Public Transit </option> </select> </form>

  28. Fieldset and Submit <form name=”info” action=”demo_form_action” > <fieldset> <legend>Personal information:</legend> Name: <input type="text" size="30"><br> Date of birth: <input type="text" size="10"> <input type=”submit”value=”Submit”> </fieldset> </form>

  29. CSS: An Intro CSS (Cascading Style Sheets) is used for styling and giving structure to your webpages. Can be added in 3 ways: Inline: Use style attribute in HTML elements Internal: Use <style> element in <head> section External: Use external CSS file

  30. CSS Styling Using style attribute: <h2 style=”background-color: red; font-family:Comic Sans MS; color: yellow;font-size: 40px; text-align: center;”> This is a heading </h2>

  31. CSS Styling Using <style> element: <head> <title> CSS </title> <style type=”text/css”> h1 {font-size: 25px; font-family: Comic Sans MS;} p { font-size: 15px; font-family: Impact;} </style> </head> <body> <h1> This is a heading </h1> <p> This is a paragraph </p> </body>

  32. More with CSS 1) <p style=”padding:30px; border: 2px solid blue;”>I understand CSS...maybe! </p> 2) <img src=”css1.png” style=”float:right;”> <p>This is another cartoon!</p> 3) <img src=”css1.png” style=”position:absolute;top:200px;right:125px;”>