Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (18)
Semelhante a Html and its tags
Semelhante a Html and its tags (20)
Mais de Afrasiyab Haider
Mais de Afrasiyab Haider (20)
Último
Último (20)
Html and its tags
- 4. HTML: •Hyper Text Markup Language • HTML is a Language, as it has code-words and syntax like any other language. • Hyper-Text is the method by which you move around on the web — by clicking on special text called hyperlinks • Markup is what HTML tags do to the text inside them. They mark it as a certain type of text
- 5. INTRO TO HTML BASICS: • HTML is a plain-text file that can be created using a text editor like Notepad. • When creating HTML files for the web, make sure you save them as .html – or they won’t work.
- 6. SOFTWARE USE TO CREATE WEB-PAGE IN HTML •Notepad •Notepad++
- 7. HOW TO WRITE CODE • Select Language • Start Writing Code
- 8. TAGS OF HTML Opening Tag <> Closing Tag </> Basic Tags used in HTML are 1. <!DOCTYPE HTML> 2. <HTML> Start Coding </HTML> 3. <head> Header </head> 4. <title> Title of Web-Page </title> 5. <body> Body of Web-Page </body> 6. <h1> Heading </h1> (after h6 the font size will be small)
- 9. TAGS OF HTML 1. <p> Paragraph </p> 2. <br> Break row </br> 3. <strong>Makes text Bold</strong> 4. <b> Bold </b> 5. <i> Italic </i> 6. <mark> Highlighter </mark> 7. <img> Inserting Image </img> 8. <a href=“ ”> Insrting Hyper Link </a> 9. <div>To insert a section e.g. Insert text-box </div>
- 10. FIRST HTML PAGE <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> Opening tag Closing tag An HTML element consists of an opening tag, a closing tag and the content inside.
- 11. FIRST HTML PAGE <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html>
- 12. FIRST HTML PAGE <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> <p>This is some text...</p> </body> </html> HTML body
- 14. TAGS • Hyperlink Tags • Image Tags • Text formatting tags <a href="http://www.facebook.com/" title=“Facebook">Link to Facebook</a> <img src=“fb.jpg" alt="logo“> </img> This text is <i>emphasized.</i> <br>new line</br> This one is <strong>more emphasized.</strong>
- 15. EXAMPLE
- 16. SIMPLE TAGS DEMO <!DOCTYPE HTML> <html> <head> <title>Simple Tags Demo</title> </head> <body> <a href="http://www.facebook.com/" title= “FB">This is a link of FB </a> <br> </br> <img src="C:UsersAfrasiyab HaiderDesktopfb.jpg" alt=“fb"> </img> </body> </html>
- 17. EXAMPLE
- 18. HEADING & PARAGRAPH TAG Heading Tags (h1 – h6) Paragraph Tags <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> <p>This is my first paragraph</p> <p>This is my second paragraph</p>
- 19. EXAMPLE
- 20. HEADING & PARAGRAPH TAG Heading Tags (h1 – h6) with Mark: Paragraph Tags with Mark: <h1><mark> Heading 1 </mark></h1> <h2>Sub heading 2</h2> <h3>Sub <mark> heading 3 </mark></h3> <p>This is my <mark> first paragraph </mark></p> <p><mark>This is my second paragraph</mark></p>
- 21. EXAMPLE
- 22. EXAMPLE OF DIV <!DOCTYPE HTML> <html> <head><title>Headings and paragraphs</title></head> <body> <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> <p>This is my first paragraph</p> <p>This is my second paragraph</p> <div style="background:skyblue"> This is a div</div> </body> </html>
- 23. EXAMPLE
- 24. DO YOU HAVE ANY QUESTIONS (RELEVANT ONLY)