Html

779 views

Published on

Html

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
779
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html

  1. 1. Raheescv raheescv1992@gmail.com www.facebook.com/raheescv twitter.com/raheescv in.linkedin.com/in/raheescv 09633155669 HTML Basics
  2. 2. Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring Partner Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
  3. 3. HTML • Hyper Text Markup Language – The Language of Web Pages on the World Wide Web. • Text formatting language. • A simple markup languages. – Markup:  Embedded codes in documents  Codes are called `tags’  Codes Describe the structure documents Include instructions for processing
  4. 4. Structure of HTML • All HTML documents start with <HTML> and end with </HTML> • Every HTML webpage has 2 sections which are denoted by HTML tags – <Head> – <Body> • The Head section will always open & close before the Body section opens
  5. 5. HTML Tag section • HTML markup tags are usually called HTML tags • Tags are written within angle brackets( < > )that describe the way you want content to appear on a page <Tagname>Content</Tagname> • The browser does not display the HTML tags • Tags are not case sensitive • Tags order matters • <em><strong>hallow Baabta</strong></em>
  6. 6. HTML page • <!DOCTYPE HTML> • <html> • <head> • <h1> <title>Baabtra World</title></h1> • </head> • <body> • <p>hallow baabtra</p> • </body> • </html> show
  7. 7. • <!DOCTYPE HTML> • <html> • <head> • <h1> <title>Baabtra World</title></h1> • </head> • <body> • <p>hallow baabtra</p> • </body> • </html> HTML header
  8. 8. • <!DOCTYPE HTML> • <html> • <head> • <h1> <title>Baabtra World</title></h1> • </head> • <body> • <p>hallow baabtra</p> • </body> • </html> HTML body
  9. 9. HTML Head section • This section always begins with <head> and ends with </head> • This section will not be visible in the body of the web browser • The name of the webpage that appears in the title bar is placed in this section • Example: <title>My First Page</title>
  10. 10. HTML body section • Information displayed in this section will be displayed in the body of the web browser • The closing body tag will always proceed the closing HTML tag.
  11. 11. HTML heading tags • Inside the BODY element, heading elements H1 through H6 are generally used for major divisions of the document • H1: should be used as the highest level of heading • H2 as the next highest,….. • H6 is the smallest heading… • example
  12. 12. HTML Paragraph tags • HTML paragraphs are defined with the <p> tag. • example
  13. 13. Character formating • Change the color and size of your text • Align your text • some examples are  <B> Bold </B>  <I> Italic </I>  <U> Underline </U>
  14. 14. <b></b> bold <i></i> italicized <u></u> underlined <sup></sup> Samplesuperscript <sub></sub> Samplesubscript <strong></strong> strong <em></em> emphasized <pre></pre> Preformatted text <blockquote></blockquote> Quoted text block <del></del> Deleted text – strike through
  15. 15. HTML Hyperlink Tags • HTML links are defined with the <a> tag. • which is used to link from one page to another • 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="http://www.google.com">Google</A>
  16. 16. HTML Elements An HTML element starts with a start tag / opening tag and 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 . Eg.line break Empty elements are closed in the start tag Most HTML elements can have attributes
  17. 17. HTML Attributes Attributes provide additional information about the element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value"
  18. 18. HTML Lists • There is an easy way in HTML to have numbered, unnumbered, and definition lists •Unnumbered lists •Unnumbered lists are started with the <ul> tag, followed by the actual list items, which are marked with the <li> tag. The list is ended with the ending tag </ul>. –<ul> •<li> list item 1 •<li> list item 2 •<li> list item 3 –</ul>
  19. 19. • Numbered lists: • Here is the same list using a numbered list format: – <ol> • <li> list item 1 • <li> list item 2 • <li> list item 3 – </ol> Here is how that list would display: – 1. list item 1 – 2. list item 2 – 3. list item 3 Example
  20. 20. List Elements TYPE Numbering Styles 1(default) Arabic numbers 1,2,3, …… a Lower alpha a, b, c, …… A Upper alpha A, B, C, …… i Lower roman i, ii, iii, …… I Upper roman I, II, III, ……
  21. 21. HTML Tables • Tables are defined with the <table> tag • A table is divided into rows (with <tr> tag), andeach row is divided into data cells (with <td> tag) – where td stands for "table data," which is the content of a data cell. – Headings in a table are defined with the <th> tag • example
  22. 22. HTML Images • Add images to your pages • <IMG>This element defines a graphic image on the page.  Width (WIDTH): is the width of the image in pixels.  Height (HEIGHT): is the height of the image in pixels.  Border (BORDER): is for a border around the image, specified in pixels  Alternate Text (ALT): This is a text field that describes an image or acts as a label. It is displayed when they position the cursor over a graphic image.  Alignment (ALIGN): This allows you to align the image on your page. Example
  23. 23. HTML Forms • A form is an area that can contain form elements that allow the user to enter information (like text fields, textarea fields,radio buttons, checkboxes) in a form • A form is defined with the <form> tag. • example
  24. 24. HTML Special Characters £&pound;British Pound €€Euro "&quot;Quotation Mark ¥&yen;Japanese Yen —&mdash;Em Dash &nbsp;Non-breaking Space &&amp;Ampersand >&gt;Greater Than <&lt;Less Than ™&trade;Trademark Sign ®&reg;Registered Trademark Sign ©&copy;Copyright Sign SymbolHTML EntitySymbol Name
  25. 25. Want to learn more about programming or Looking to become a good programmer? Are you wasting time on searching so many contents online? Do you want to learn things quickly? Tired of spending huge amount of money to become a Software professional? Do an online course @ baabtra.com We put industry standards to practice. Our structured, activity based courses are so designed to make a quick, good software professional out of anybody who holds a passion for coding.
  26. 26. Follow us @ twitter.com/baabtra Like us @ facebook.com/baabtra Subscribe to us @ youtube.com/baabtra Become a follower @ slideshare.net/BaabtraMentoringPartner Connect to us @ in.linkedin.com/in/baabtra Give a feedback @ massbaab.com/baabtra Thanks in advance www.baabtra.com | www.massbaab.com |www.baabte.com
  27. 27. Emarald Mall (Big Bazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Cafit Square, Hilite Business Park, Near Pantheerankavu, Kozhikode Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com Contact Us

×