How to learn HTML in 10 Days


Published on

Learn HTML and CSS in few steps . Practice an hour daily for good results in 10 days.
Here I am mentioning basic elements , attributes and tags of HTML with styling them

Published in: Design, Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

How to learn HTML in 10 Days

  1. 1. WHY HTML To publish information for global distribution, one needs a universally understood language, a kind of publishing mother tongue that all computers may potentially understand. The publishing language used by the World Wide Web is HTML (from HyperText Markup Language).
  2. 2. WHAT IS THE WWW?  A distributed document delivery system  Uses a client-server model  Main presentation language is HTML  URL – Uniform Resource Locator.  Browser – A software program which is used to show web pages.  Pages end with “.htm” or “.html”
  3. 3. HTML WORK ON CLIENT-SERVER MODEL Two processes (possibly networked):  The client  Sends requests to the server  Blocks until reply is received  The server  Processes requests from clients  Never blocks  Can reply to several clients simultaneously
  4. 4. WHAT IS HTML?  HTML stands for Hyper Text Markup Language  HTML is a markup language  HTML is used to create web documents including text, images, formatting, and hyperlinks to other documents.  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. 5. USES OF HTML  Publish online documents with headings, texts, tables, lists, photos, etc.  Retrieve online information via hypertexts links.  Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.  Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
  6. 6. HTML VERSIONS  HTML 1991  HTML+ 1993  HTML 2.0 1995  HTML 3.2 1997  HTML 4.01 1999  HTML5 2012  XHTML5 2013
  7. 7. MARKUP LANGUAGES  Markup:  Embedded codes in documents  Codes are called `tags‟  Codes  Describe the structure documents  Include instructions for processing  Markup language:  Computer language for describing syntax of tags  May be used with other tools to specify rendering
  8. 8. HTML (HYPER TEXT MARKUP LANGUAGE)  HTML is used to create web documents including text, images, formatting, and hyperlinks to other documents.  HTML documents consists of text and „markup‟ tags which are used to define the structure, appearance, and function of the information.  There are two types of markup tags:  Container tags – Define a section of text using a start tag and an end tag. For example, text placed inside of these tags would appear in bold: <B>Hello</B>  Empty tags – represent a single occurrence of an instruction. For example, the <BR> or break tag is used to indicate that you want to include a single space following the text.
  9. 9. EXAMPLE OF AN HTML DOCUMENT <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
  10. 10. WHAT EXAMPLE TELLS  The DOCTYPE declaration defines the document type  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
  11. 11. STRUCTURE OF AN HTML DOCUMENT  An HTML document is divided into two main sections:  Heading - The HEADing contains information describing the document, such as its title. The heading section is indicated by the <HEAD> and </HEAD> tags.  Body - The BODY section is where the Web document text, graphics, and other elements are placed. The body section is indicated by the <BODY> and </BODY> tags.
  12. 12. TEXT AUTHORING TOOLS HTML Editor – A word processor that has been specialized to make the writing of HTML documents more effortless. The most commonly used text editors are:  Notepad (Windows)  WordPad (Windows)  Simpletext (Macintosh)  Adobe Dreamweaver (All)
  13. 13. HTML TAGS HTML markup tags are usually called HTML tags  HTML tags are keywords (tag names) 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  The end tag is written like the start tag, with a forward slash before the tag name  Start and end tags are also called opening tags and closing tags
  14. 14. HTML ELEMENT SYNTAX  An HTML element starts with a start tag / opening tag  An HTML element ends with an end tag / closing tag  The element content is everything between the start and the end tag  Some HTML elements have empty content  Empty elements are closed in the start tag  Most HTML elements can have attributes
  15. 15. 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" Example HTML links are defined with the <a> tag. The link address is specified in the href attribute: <a href="">This is a link</a>
  16. 16. THE HTML <HEAD> ELEMENT The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.  The <title> tag defines the title of the document.  The <title> element is required in all HTML/XHTML documents.  The <title> element:  defines a title in the browser toolbar  provides a title for the page when it is added to favorites  displays a title for the page in search-engine results
  17. 17. HTML ATTRIBUTES  class Specifies one or more class names for an element (refers to a class in a style sheet)  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)
  18. 18. HTML HEADINGS  Headings are defined with the <h1> to <h6> tags.  <h1> defines the most important heading. <h6> defines the least important heading. Exmaple <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
  19. 19. HEADINGS ARE IMPORTANT  Use HTML headings for headings only. Don't use headings to make text BIG or bold.  Search engines use your headings to index the structure and content of your web pages.  Since users may skim your pages by its headings, it is important to use headings to show the document structure.  H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.
  20. 20. HTML LINES  The <hr>tag creates a horizontal line in an HTML page.  The hr element can be used to separate content: Example  <p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p>
  21. 21. 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 -->
  22. 22. HTML PARAGRAPHS & LINE BREAKS Paragraphs are defined with the <p> tag. Example <p>This is a paragraph</p> <p>This is another paragraph</p> Use the <br> tag if you want a line break (a new line) without starting a new paragraph: <p>This is<br>a para<br>graph with line breaks</p>
  23. 23. HTML TEXT FORMATTING <b> Defines bold text <em> Defines emphasized text <i> Defines a part of text in an alternate voice or mood <small> Defines smaller text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text <ins> Defines inserted text <del> Defines deleted text <mark> Defines marked/highlighted text
  24. 24. HTML COLORS Colors are displayed combining RED, GREEN, and BLUE light. The combination of Red, Green, and Blue values from 0 to 255, gives more than 16 million different colors (256 x 256 x 256).  HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB).  The lowest value that can be given to one of the light sources is 0 (in HEX: 00). The highest value is 255 (in HEX: FF).  HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign.
  25. 25. HTML COLORS
  26. 26. HTML HYPERLINKS (LINKS) 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. The most important attribute of the <a> element is the href attribute, which indicates the link‟s destination. By default, links will appear as follows in all browsers:  An unvisited link is underlined and blue  A visited link is underlined and purple  An active link is underlined and red  <a href="url">Link text</a>
  27. 27. HTML LINKS The target Attribute  The target attribute specifies where to open the linked document.  The example below will open the linked document in a new browser window or a new tab: <a href="" target="_blank">abc!</a>
  28. 28. HTML LINKS The id Attribute  The id attribute can be used to create a bookmark inside an HTML document.  Tip: Bookmarks are not displayed in any special way. They are invisible to the reader. <a id="tips">Useful Tips Section</a> <a href="#tips">Visit the Useful Tips Section</a> <a href="
  29. 29. HTML IMAGES - THE <IMG> TAG AND THE SRC ATTRIBUTE  In HTML, images are defined with the <img> tag.  The <img> tag is empty, which means that it contains attributes only, and has no closing 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.  <img src="url" alt="some_text">
  30. 30. HTML IMAGES - SET HEIGHT AND WIDTH OF AN IMAGE  The height and width attributes are used to specify the height and width of an image.  The attribute values are specified in pixels by default:  The alt attribute provides alternative information for an image <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228
  31. 31. WHAT IS CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added to HTML 4.0 to solve a problem  External Style Sheets can save a lot of work  External Style Sheets are stored in CSS files
  32. 32. STYLING HTML WITH CSS  CSS was introduced together with HTML 4, to provide a better way to style HTML elements.  CSS can be added to HTML in the following ways:  Inline - using the style attribute in HTML elements  Internal - using the <style> element in the <head> section  External - using an external CSS file  The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files.
  33. 33. CSS SYNTAX
  34. 34. CSS SYNTAX  A CSS rule has two main parts: a selector, and one or more declarations:  The selector is normally the HTML element you want to style.  Each declaration consists of a property and a value.  The property is the style attribute you want to change. Each property has a value. p {color:red;text-align:center;}
  35. 35. INLINE STYLES  An inline style can be used if a unique style is to be applied to one single occurrence of an element.  To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph:  <p style="color:blue;margin-left:20px;">This is a paragraph.</p>
  36. 36. INTERNAL STYLE SHEET An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this: <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>
  37. 37. EXTERNAL STYLE SHEET An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
  38. 38. CSS EXAMPLE body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:"Times New Roman"; font-size:20px; }
  39. 39. CSS ID AND CLASS The id Selector  The id selector is used to specify a style for a single, unique element.  The id selector uses the id attribute of the HTML element, and is defined with a "#".  The style rule below will be applied to the element with id="para1": Example #para1 { text-align:center; color:red; }
  40. 40. THE CLASS SELECTOR  The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.  This allows you to set a particular style for many HTML elements with the same class.  The class selector uses the HTML class attribute, and is defined with a ".“ Example .center {text-align:center;}
  41. 41. CSS BACKGROUND  CSS background properties are used to define the background effects of an element.  CSS properties used for background effects: background-color background-image background-repeat background-attachment background-position body {background-color:#b0c4de;}
  42. 42. CSS TEXT PROPERTIES color Sets the color of text direction Specifies the text direction/writing direction letter-spacing Increases or decreases the space between characters in a text line-height Sets the line height text-align Specifies the horizontal alignment of text text-decoration Specifies the decoration added to text text-indent Specifies the indentation of the first line in a text-block text-shadow Specifies the shadow effect added to text text-transform Controls the capitalization of text unicode-bidi vertical-align Sets the vertical alignment of an element white-space Specifies how white-space inside an element is handled word-spacing Increases or decreases the space between words in a text
  43. 43. CSS TEXT EXAMPLES  h1 {color:#00ff00;}  h1 {text-align:center;}  a {text-decoration:none;}  p.uppercase {text-transform:uppercase;}  p {text-indent:50px;}  P {tex-shadow:0px 0px 5px inset; }  P {tex-shadow:0px 0px 5px ; }
  44. 44. CSS FONT PROPERTIES font Sets all the font properties in one declaration font-family Specifies the font family for text font-size Specifies the font size of text font-style Specifies the font style for text font-variant Specifies whether or not a text should be displayed in a small-caps font font-weight Specifies the weight of a font
  45. 45. CSS FONT EXAMPLE  p{font-family:"Times New Roman", Times, serif;}  p.italic {font-style:italic;}  h1 {font-size:40px;}  h1 {font-size:2.5em;}  h1 {font-weight:bold;}  h1 {font-variant:small-caps;}
  46. 46. CSS LINKS  The four links states are:  a:link - a normal, unvisited link  a:visited - a link the user has visited  a:hover - a link when the user mouses over it  a:active - a link the moment it is clicked  All links comes in sequence a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */
  47. 47. CSS BOX MODEL  All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.  The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.  The box model allows us to place a border around elements and space elements in relation to other elements.
  48. 48. CSS BOX MODEL
  49. 49. CSS BOX MODEL CONT.. Explanation of the different parts:  Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent  Border - A border that goes around the padding and content. The border is affected by the background color of the box  Padding - Clears an area around the content. The padding is affected by the background color of the box  Content - The content of the box, where text and images appear
  50. 50. WIDTH AND HEIGHT OF AN ELEMENT The total width of the element in the example below is 300px:  .Element {width:250px; padding:10px; border:5px solid gray; margin:10px; }  Let's do the math: 250px (width) + 20px (left + right padding) + 10px (left + right border) + 20px (left + right margin) = 300px
  51. 51. CSS BORDER border Sets all the border properties in one declaration border-bottom Sets all the bottom border properties in one declaration border-bottom-color Sets the color of the bottom border border-bottom-style Sets the style of the bottom border border-bottom-width Sets the width of the bottom border border-color Sets the color of the four borders border-left Sets all the left border properties in one declaration border-left-color Sets the color of the left border border-left-style Sets the style of the left border border-left-width Sets the width of the left border border-right Sets all the right border properties in one
  52. 52. CSS BORDER CONT…. border-right-color Sets the color of the right border border-right-style Sets the style of the right border border-right-width Sets the width of the right border border-style Sets the style of the four borders border-top Sets all the top border properties in one declaration border-top-color Sets the color of the top border border-top-style Sets the style of the top border border-top-width Sets the width of the top border border-width Sets the width of the four borders
  53. 53. CSS BORDER CONT… border-style values: {none,dotted,dashed,solid,double,groove,ri gid} border-style values: Color , width so Example border:5px solid red; Border-bottom:5px dashed blue;
  54. 54. CSS OUTLINES  outline Sets all the outline properties in one declaration  outline-color Sets the color of an outline  outline-style Sets the style of an outline none  outline-width Sets the width of an outline thin
  55. 55. CSS MARGIN margin A shorthand property for setting the margin properties in one declaration margin-bottom Sets the bottom margin of an element margin-left Sets the left margin of an element margin-right Sets the right margin of an element margin-top Sets the top margin of an
  56. 56. CSS MARGIN CONT…. Margin - Individual sides margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; Margin - Shorthand property margin:100px(T) 50px® 20PX(B) 10PX(L);
  57. 57. CSS PADDING Padding A shorthand property for setting all the padding properties in one declaration padding-bottom Sets the bottom padding of an element padding-left Sets the left padding of an element padding-right Sets the right padding of an element padding-top Sets the top padding of an
  58. 58. CSS PADDING CONT…. Padding - Individual sides padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; Padding - Shorthand property padding:25px(t) 50px® 40px(b) 60px(L);
  59. 59. CSS DISPLAY AND VISIBILITY  Hiding an Element - display:none or visibility:hidden  Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results: h1.hidden {visibility:hidden;} h1.hidden {display:none;}
  60. 60. CSS POSITIONING  The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.  Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method
  61. 61. CSS POSITIONING PROPERTIES bottom Sets the bottom margin edge for a positioned box clip Clips an absolutely positioned element cursor Specifies the type of cursor to be displayed left Sets the left margin edge for a positioned box overflow Specifies what happens if content overflows an element's box
  62. 62. CSS POSITIONING PROPERTIES  position Specifies the type of positioning for an element (absolute,fixed,relative,static,inherit)  right Sets the right margin edge for a positioned box  top Sets the top margin edge for a positioned box  z-index Sets the stack order of an element
  63. 63. CSS FLOAT  Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.  A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.  The elements after the floating element will flow around it.  The elements before the floating element will not be affected.  If an image is floated to the right, a following text flows around it, to the left:
  64. 64. HTML TABLES  Tables are defined with the <table> tag.  A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
  65. 65. TABLE 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>
  66. 66. THE HTML <DIV> ELEMENT  The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements.  The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it.  When used together with CSS, the <div> element can be used to set style attributes to large blocks of content.  Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using <table> elements for layout is not the correct use of <table>. The purpose of the <table> element is to display tabular data.  <div>content</div>
  67. 67. THE HTML <SPAN> ELEMENT  The HTML <span> element is an inline element that can be used as a container for text.  The <span> element has no special meaning.  When used together with CSS, the <span> element can be used to set style attributes to parts of the text.  <div> Defines a section in a document (block- level)  <span> Defines a section in a document (inline)
  68. 68. HTML FORMS  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 more. A form can also contain select lists, textarea, fieldset, legend, and label elements.  The Input Element  <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>
  69. 69. FORMS CONT… Password Field Password: <input type="password" name="pwd"> Radio Buttons <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female Checkboxes <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car Submit Button <input type="submit" value="Submit">
  70. 70. HTML LISTS  HTML Unordered Lists  An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.  The list items are marked with bullets (typically small black circles). <ul> <li>Coffee</li> <li>Milk</li> </ul>
  71. 71. LIST CONT…  HTML Ordered Lists  An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.  The list items are marked with numbers. <ol> <li>Coffee</li> <li>Milk</li> </ol>
  72. 72. LISTS CONT…  A description list is a list of terms/names, with a description of each term/name.  The <dl> tag defines a description list.  The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name): <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>