Basic html

10,204 views

Published on

This slide is following the W3school HTML lesson.

Published in: Education, Technology
5 Comments
34 Likes
Statistics
Notes
  • Are you looking for IT Training with job placements? Search more than 5000 IT #Certified Consultants here Most of our registered companies will offer jobs with H1B Visa sponsorship, Work Permit and Job Placements. Register IT Courses at http://www.todaycourses.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • For Javascript training register at http://www.todaycourses.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great Introduction..It would be very nice if it allows us to download and share offline.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Fantastic and a great introduction to HTML website design . I am teaching Stage 4 students basic HTML website design, would it be possible to download a copy of powerpoint.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • nice slide
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
10,204
On SlideShare
0
From Embeds
0
Number of Embeds
83
Actions
Shares
0
Downloads
0
Comments
5
Likes
34
Embeds 0
No embeds

No notes for slide

Basic html

  1. 1. Basic <HTML> from w3school lessons by Niciuzza, nicha.in.th
  2. 2. Hyper Text Markup Language = HTML BASIC HTML for Web Designer by Niciuzza, nicha.in.th
  3. 3. <!DOCTYPE html> <head> </head> <body> <div class="wrapper"> <header id="logocompany"> <h1 id="wegetlogo"><a href="" title=" WeGetHosting.com"><img src="img/logo.png" alt=" WeGetHosting.com"></a></h1> </header> ..... </div> </body> </html> HTML is a markup language BASIC HTML for Web Designer by Niciuzza, nicha.in.th
  4. 4. HTML is a markup language BASIC HTML for Web Designer by Niciuzza, nicha.in.th
  5. 5. HTML have many many BASIC HTML for Web Designer by Niciuzza, nicha.in.th TAGS
  6. 6. <tagname>content</tagname> BASIC HTML for Web Designer by Niciuzza, nicha.in.th TAGs are usually place inside <Angle Brackets>
  7. 7. a TAG means a type of content BASIC HTML for Web Designer by Niciuzza, nicha.in.th <p> = Paragraph <a> = Anchor Link <h1> = Header 1
  8. 8. HTML documents contain TAGs & TEXTs BASIC HTML for Web Designer by Niciuzza, nicha.in.th
  9. 9. HTML documents is Web Page BASIC HTML for Web Designer by Niciuzza, nicha.in.th
  10. 10. BASIC HTML for Web Designer by Niciuzza, nicha.in.th <!DOCTYPE html> <head> </head> <body> <div class="wrapper"> <header id=" logocompany"> <h1 id="logo"><a href="" title="P&THosting.com" ><img src="img/logo.png" alt=" WeGetHosting.com"></a></h1> </header> ..... </div> </body> </html>
  11. 11. HTML page structure BASIC HTML for Web Designer by Niciuzza, nicha.in.th <html> </html> <body> </body> <h1>This a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p>
  12. 12. HTML HTML Versions BASIC HTML for Web Designer by Niciuzza, nicha.in.th 1991 1993 1995 1997 1999 2000 2012 2013
  13. 13. <!DOCTYPE> BASIC HTML for Web Designer by Niciuzza, nicha.in.th <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> XHTML 1.0 <!DOCTYPE html> HTML5
  14. 14. HTML Tags You Must Know BASIC HTML for Web Designer by Niciuzza, nicha.in.th ● Headings ● Paragraphs ● Link ● Image <h1>This is Heading</h1> <p>This is Paragraph</p> <a href="http://nicha.in.th">This is a link</a> <img src="w3schools.jpg" width="104" height="142">
  15. 15. <p>Hello World</p> BASIC HTML for Web Designer by Niciuzza, nicha.in.th open TAG Content close TAG HTML Elements
  16. 16. HTML Element Syntax BASIC HTML for Web Designer by Niciuzza, nicha.in.th <a href="default.htm">This is a link</a> <img src="w3schools.jpg" width="104" height="142" />
  17. 17. HTML Element Nested BASIC HTML for Web Designer by Niciuzza, nicha.in.th <html> </html> <body> </body> <h1>This a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p>
  18. 18. HTML Attributes BASIC HTML for Web Designer by Niciuzza, nicha.in.th <a href="nicha.in.th">This is a link</a> href = a attribute of <a> Attributes Value should be inside "Double Quote" or 'Single Quote'. But Double Quote is Recommended.
  19. 19. HTML Attributes BASIC HTML for Web Designer by Niciuzza, nicha.in.th <img src="pic.jpg" width="104" height="142"> One Tag may have many attributes
  20. 20. HTML Attributes that can use in any tags BASIC HTML for Web Designer by Niciuzza, nicha.in.th class: Specifies one or more classnames for an element id: Specifies a unique id for an element style: Specifies an inline CSS style for an element title: Specifies extra information about an element (displayed as a tool tip)
  21. 21. <h1>HTMl H1 Heading</h1> <h2>HTML H2 Heading</h2> <h3>HTML H3 Heading</h3> <h4>HTML H4 Heading</h4> <h5>HTML H5 Heading</h5> <h6>HTML H6 Heading</h6> HTML Heading BASIC HTML for Web Designer by Niciuzza, nicha.in.th HTMl H1 Heading HTML H2 Heading HTML H3 Heading HTML H4 Heading HTML H5 Heading HTML H6 Heading ● Don't use Heading for Bold or Big text. ● Use them as a hierarchy.
  22. 22. <!-- This is a comment --> HTML Comments BASIC HTML for Web Designer by Niciuzza, nicha.in.th ● Comments make code more readable and understandable. ● Comments are ignored by the browser and are not displayed.
  23. 23. <p>This is a paragraph. Tincidunt pellentesque ridiculus, dignissim nec! Tincidunt et proin porttitor? Augue ac cras! Integer augue sit turpis magna et dolor cras.</p> HTML Paragraphs BASIC HTML for Web Designer by Niciuzza, nicha.in.th Line Break. <br> This is a paragraph. Tincidunt pellentesque ridiculus, dignissim nec! Tincidunt et proin porttitor? Augue ac cras! Integer augue sit turpis magna et dolor cras. <p>This is a paragraph.<br> Tincidunt pellentesque ridiculus, dignissim nec!<br> Tincidunt et proin porttitor? <br> Augue ac cras! Integer augue sit turpis magna et dolor cras.</p> This is a paragraph. Tincidunt pellentesque ridiculus, dignissim nec! Tincidunt et proin porttitor? Augue ac cras! Integer augue sit turpis magna et dolor cras.
  24. 24. <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><em>This text is emphasized</em></p> HTML Text Formatting BASIC HTML for Web Designer by Niciuzza, nicha.in.th This text is bold This text is strong This text is italic This text is emphasized
  25. 25. <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><em>This text is emphasized</em></p> HTML Text Formatting BASIC HTML for Web Designer by Niciuzza, nicha.in.th ● Many Browsers Often renders <strong> as <b>, and <em> as <i>. ● <strong>, <em> mean "Important". ● <b>, <i> defines bold or italic text only. Ref: http://www.w3schools.com/html/html_formatting.asp
  26. 26. <a href="url">Link text</a> HTML Links BASIC HTML for Web Designer by Niciuzza, nicha.in.th ● <a> defines a hyperlink. ● Hyperlink is a word, group of words, or image that you can click on to jump to another document. Link text
  27. 27. <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> HTML <head>&<title> BASIC HTML for Web Designer by Niciuzza, nicha.in.th ● <head> instruct the browser where to find style sheets, provide meta information, and more. ● <title> defines the title of the document.
  28. 28. <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> HTML <link>,<style> BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_head.asp ● <link> instruct the browser where to find style sheets or script. ● <style> is used to define style information for an HTML document <head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
  29. 29. <img src="picture_url" alt="some_text"> HTML Images BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_images.asp <img> is empty, it contains attributes only and no closing tag. <img> Attributes ● src = source (of image) ● alt = alternate text for an image, This text will show when image doesn't display. ● width = width of image ● height = height of image
  30. 30. <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> HTML Table BASIC HTML for Web Designer by Niciuzza, nicha.in.th ● A table is divided into rows with <tr> ("table row"). ● each row is divided into data cells with <td> ("table data") and contain the data of the table which can be text, links, images, lists, forms, other tables, etc.
  31. 31. <table border="1" cellpadding="10" > <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> HTML Table Attribute BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_tables.asp ● border = border of the table ● cellspacing = space between each cells ● cellpadding = space inside each cells <table border="1" cellspacing="10" > <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
  32. 32. HTML Order Lists BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_lists.asp ● <ol> is defined as order list. ● <li> is under <ol>, defined as each list item. <ol> <li>The first list item </li> <li>The second list item </li> <li>The third list item </li> </ol>
  33. 33. HTML Unorder Lists BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_lists.asp ● <ul> is defined as Unorder List. ● <li> is under <ul>, defined as each list item. <ul> <li>The first list item </li> <li>The second list item </li> <li>The third list item </li> </ul>
  34. 34. HTML Description Lists BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_lists.asp ● <dl> is defined as Description List. ● <dt> is under <dl>, defined as terms/names. ● <dd> is defined as description of each term/name. <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
  35. 35. HTML Nested Lists BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_lists.asp <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul>
  36. 36. HTML Block Element BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_blocks.asp ● Block level elements normally start (and end) with a new line. ● Examples: <h1>, <p>, <ul>, <table>, etc.
  37. 37. HTML Inline Element BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_blocks.asp ● Inline elements are normally displayed without starting a new line. ● Examples: <b>, <td>, <a>, <img>
  38. 38. HTML <div> BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_blocks.asp ● <div> is Block Elements. ● <div> is used as a container for grouping other HTML elements. ● <div> is used for creating layout of web instead of using <table>
  39. 39. HTML <span> BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_blocks.asp ● <span> is Inline Elements. ● <span> is used as a container for text.
  40. 40. HTML Table layouts BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_layout.asp <!DOCTYPE html> <html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>Main Title of Web Page</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px;"> <b>Menu</b><br>HTML<br>CSS<br>JavaScript </td> <td style="background-color:#EEEEEE;height:200px;width:400px;"> Content goes here</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> Copyright © W3Schools.com</td> </tr> </table> </body> </html>
  41. 41. HTML Table layouts BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_layout.asp
  42. 42. HTML Table layouts BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_layout.asp ● Table layout is the old way to create layout of web ● Tables were designed for presenting tabular data - NOT as a layout tool!
  43. 43. HTML Layouts with <div> BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_layout.asp <!DOCTYPE html> <html> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1> </div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>Menu</b><br>HTML<br>CSS<br>JavaScript </div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float: left;">Content goes here</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> Copyright © W3Schools.com</div> </div> </body> </html>
  44. 44. HTML Layouts with <div> BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_layout.asp
  45. 45. HTML Forms and Inputs BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_forms.asp ● <form> are used to pass data to a server. ● <input> is used to select user information. <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>
  46. 46. HTML Forms and Inputs BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_forms.asp ● Text Field : <input type="text"> defines a one-line input field that a user can enter text into. name: <input type="text" name="name" > ● Password : <input type="password"> defines a password field Password: <input type="password" name="pwd">
  47. 47. HTML Forms and Inputs BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_forms.asp ● Radio Button : <input type="radio"> that let a user select ONLY ONE of a limited number of choices. <input type="radio" name="sex" value="male" >Male<br> <input type="radio" name="sex" value=" female">Female ● Checkbox : <input type="password"> that let a user select ZERO or MORE options of a limited number of choices. <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car
  48. 48. HTML Forms and Inputs BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_forms.asp ● Submit : <input type="submit"> is used to send form data to a server. <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
  49. 49. HTML Color Values BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_colors.asp ● HTML using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB).
  50. 50. HTML Color Values BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_colornames.asp ● 141 color names are defined in the HTML and CSS color specification (17 standard colors plus 124 more) ● The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.
  51. 51. HTML Entities BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/tags/ref_entities.asp
  52. 52. HTML Quick List BASIC HTML for Web Designer by Niciuzza, nicha.in.th Ref: http://www.w3schools.com/html/html_quick.asp
  53. 53. Enjoy and May HTML be with You. BASIC HTML for Web Designer by Niciuzza, nicha.in.th

×