1 / 45

Introduction to HTML: Create Your First Web Page

This module provides a comprehensive introduction to HTML (HyperText Markup Language), the fundamental language for creating and describing web pages. Learn the essentials needed to start coding, including how to use browsers and text editors. Explore key HTML elements such as <html>, <head>, and <body>, along with important tags, formatting options, and attributes. Gain insight into creating paragraphs, headings, lists, hyperlinks, images, and tables. By the end, you'll be equipped to create your very own simple web page.

reed
Télécharger la présentation

Introduction to HTML: Create Your First Web Page

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. 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;”>

More Related