HTML

 HTML

4604d1f123000533847758729b23db6c?s=128

Mohamed Loey

May 27, 2015
Tweet

Transcript

  1. html html Mohamed Loey

  2. agENDa Part I: Introduction Part II: HTML Tags (Basic) Part

    III: HTML Tags Part V: HTML Forms
  3. agENDa Part I: Introduction  What is HTML?  Client

    & Server  Client & Server  HTML Versions  HTML Tags  HTML Page Structure  Web Browsers  HTML Editors
  4. what IS html? • HTML stands for Hyper Text Markup

    Language • HTML is a markup language • • A markup language is a set of markup tags • The tags describe document content • HTML documents contain HTML tags and plain text • HTML documents are also called web pages
  5. clIENt & SERVER

  6. html VERSIONS Version Year HTML 1991 HTML+ 1993 HTML 2.0

    1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2012
  7. html tagS • HTML tags are keywords (tag names) surrounded

    by angle brackets like <html> • The first tag in a pair is the start tag, the second tag is • The first tag in a pair is the start tag, the second tag is the end tag • The end tag is written like the start tag, with a slash before the tag name • Start and end tags are also called opening tags and closing tags • HTML tags normally come in pairs like <html> and </html>
  8. html pagE StRUctURE

  9. wEB BROwSERS • A browser is a software program which

    interprets the HTML documents and displays it on the user’s screen. screen. • The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages.
  10. wEB BROwSERS HTML Code Chrome Browser

  11. html EDItORS • Write HTML Using Notepad or TextEdit •

    We believe using a simple text editor (Notepad) is a good way to learn HTML. • Follow the 4 steps below to create your first web page with Notepad.
  12. StEp 1: OpEN NOtEpaD • To open Notepad in Windows

    7 or earlier: • Click Start (bottom left on your screen). • Click All Programs. Click Accessories. • Click All Programs. Click Accessories. • Click Notepad. • To open Notepad in Windows 8 or later: • Open the Start Screen (the window symbol at the bottom left on your screen). • Type Notepad.
  13. StEp 2: wRItE SOmE html • Write or copy some

    HTML into Notepad.
  14. StEp 3: SaVE thE html pagE • Save the file

    on your computer. • Select File -> Save as in the Notepad menu. • When saving an HTML file, use either the .htm or the .html file extension. There is no difference, it is entirely up to you.
  15. StEp 4: VIEw html pagE IN yOUR BROwSER • Double-click

    your saved HTML file, and the result will look much like this:
  16. pROFESSIONal html EDItORS • HTML can be edited by using

    a professional HTML editor like: • Adobe Dreamweaver • Adobe Dreamweaver • Netbeans • CoffeeCup HTML Editor • Microsoft Expression Web
  17. aDOBE DREamwEaVER

  18. agENDa Part II: HTML Tags (Basic)  HTML Head Tag

     HTML Body Tag  HTML Body Tag  HTML Basic Tags  HTML Heading Tags  HTML Paragraph Tag  HTML Formatting Tags  HTML Attributes  HTML Styles
  19. html hEaD tag • The <head> element is a container

    for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style scripts, instruct the browser where to find style sheets, provide meta information, and more. • The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>. • The <title> tag defines the title of the document.
  20. html BODy tag • The <body> tag defines the document's

    body. • The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
  21. html BODy & hEaD tag ExamplE

  22. html BODy & hEaD tag • On Chrome Browser

  23. html BaSIc tagS Tag Description <!DOCTYPE> Defines the document type

    <html> Defines an HTML document <title> Defines a title for the document <body> Defines the document's body <h1> to <h6> Defines HTML headings <p> Defines a paragraph <br /> Inserts a single line break <hr /> Defines a thematic change in the content < --... --!> Defines a comment
  24. html hEaDINg tagS • HTML headings are defined with the

    <h1> to <h6> tags. • • Example:
  25. html hEaDINg tagS • On Chrome Browser

  26. html paRagRaph tag • HTML paragraphs are defined with the

    <p> tag. • Example:
  27. html paRagRaph tag • On Chrome Browser

  28. html FORmattINg tagS Tag Description <u> Defines text that should

    be stylistically different from normal text <strong> Defines important text <strong> Defines important text <b> Defines bold text <i> Defines a part of text in an alternate voice or mood <small> Defines smaller text <big> Not supported in HTML5. Use CSS instead. Defines big text <font> Not supported in HTML5. Use CSS instead. Defines font, color, and size for text <center> Not supported in HTML5. Use CSS instead. Defines centered text
  29. html FORmattINg tagS • HTML uses tags like <b> and

    <i> for formatting output, like bold or italic text. • • Example:
  30. html FORmattINg tagS • On Chrome Browser

  31. html attRIBUtES • HTML elements can have attributes • Attributes

    provide additional information about an element • Attributes are always specified in the start tag • Attributes come in name/value pairs like: name="value"
  32. html attRIBUtES • Example:

  33. html attRIBUtES • On Chrome Browser

  34. html StylES • Example:

  35. html StylES • On Chrome Browser

  36. agENDa Part III: HTML Tags  HTML Lists Tags 

    Unordered Lists Tags  Unordered Lists Tags  Ordered Lists Tags  HTML Hyperlink Tag  HTML Image Tag  HTML Table Tags  HTML Layouts
  37. html lIStS tagS Tag Description <ul> Defines an unordered list

    <ol> Defines an ordered list <ol> Defines an ordered list <li> Defines a list item <dir> Not supported in HTML5. Use <ul> instead. Defines a directory list <dl> Defines a description list <dt> Defines a term/name in a description list <dd> Defines a description of a term/name in a description list
  38. UNORDERED lIStS tagS • An unordered list starts with the

    <ul> tag. Each list item starts with the <li> tag. • • Example:
  39. UNORDERED lIStS tagS • On Chrome Browser

  40. ORDERED lIStS tagS • An ordered list starts with the

    <ol> tag. Each list item starts with the <li> tag. • • Example:
  41. ORDERED lIStS tagS • On Chrome Browser

  42. html hypERlINK tag • The HTML <a> tag defines a

    hyperlink. • A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. • When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
  43. html hypERlINK tag • Example:

  44. html hypERlINK tag • On Chrome Browser

  45. html ImagE tag • In HTML, images are defined with

    the <img> tag. • To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
  46. html ImagE tag • Example:

  47. html ImagE tag • On Chrome Browser

  48. html taBlE tagS Tag Description <table> Defines a table <caption>

    Defines a table caption <caption> Defines a table caption <th> Defines a header cell in a table <tr> Defines a row in a table <td> Defines a cell in a table <thead> Groups the header content in a table <tbody> Groups the body content in a table <tfoot> Groups the footer content in a table
  49. html taBlE tagS • Tables are defined with the <table>

    tag. • A table is divided into rows with the <tr> tag. (tr stands for table row) • A row is divided into data cells with the <td> tag. (td stands for table data)
  50. html taBlE tagS • Examlpe:

  51. html taBlE tagS • On Chrome Browser

  52. html layOUtS • Most websites have put their content in

    multiple columns (formatted like a magazine or newspaper). • Multiple columns are created by using <div> or • Multiple columns are created by using <div> or <table> elements. • The div element is a block level element used for grouping HTML elements. • A simple way of creating layouts is by using the HTML <table> tag.
  53. html layOUtS • <div> example:

  54. html layOUtS • On Chrome Browser

  55. html layOUtS • <Table> Tag Example

  56. html layOUtS • On Chrome Browser

  57. agENDa Part V: HTML Forms  HTML Forms and Input

    Tags  HTML Form Tag  Text Fields  Password Field  Radio Buttons  Checkboxes  Submit Button
  58. html FORmS aND INpUt tagS Tag Description <form> Defines an

    HTML form for user input <input> Defines an input control <input> Defines an input control <textarea> Defines a multiline input control (text area) <button> Defines a clickable button <select> Defines a drop-down list <optgroup> Defines a group of related options in a drop-down list <option> Defines an option in a drop-down list <label> Defines a label for an <input> element
  59. html FORm tag • HTML forms are used to pass

    data to a server. • An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. • The <form> tag is used to create an HTML form • The most important form element is the <input> element.
  60. tExt FIElDS • On Chrome Browser

  61. tExt FIElDS • Example:

  62. paSSwORD FIElD • On Chrome Browser

  63. paSSwORD FIElD • Example:

  64. RaDIO BUttONS • On Chrome Browser

  65. RaDIO BUttONS • Example:

  66. chEcKBOxES • On Chrome Browser

  67. chEcKBOxES • Example:

  68. SUBmIt BUttON • A submit button is used to send

    form data to a server. The data is sent to the page specified in the form's action attribute. form's action attribute. • On Chrome Browser
  69. SUBmIt BUttON • Example:

  70. thaNK U thaNK U