Design your first website using HTML

5,060 views

Published on

Design your first website using HTML

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

  • Be the first to like this

No Downloads
Views
Total views
5,060
On SlideShare
0
From Embeds
0
Number of Embeds
2,117
Actions
Shares
0
Downloads
98
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design your first website using HTML

  1. 1. Design your first Website HTML & CSSBunty Jain, IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  2. 2. Website Designing An Overview Bunty Jain IT Training, SAP, seekbuntyjain@g mail.com Delhi India.
  3. 3. Web Components Clientsand Servers Internet Service Providers Web Site Hosting Services Domains Names Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  4. 4. With HTML you can create your own Web site HTML is easy to learn - You will enjoy it. Bunty Jain IT Training, SAP, seekbuntyjain@g mail.com Delhi India.
  5. 5. HTML TagsHTML is a language for describing web pages.HTML stands for Hyper Text Markup LanguageA markup language is a set of markup tagsHTML uses markup tags to describe web pages Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  6. 6. HTML TagsHTML markup tags are usually called HTML tagsHTML tags are keywords surrounded by anglebrackets like <html>HTML tags normally come in pairs like <b> and</b>The first tag in a pair is the start tag, the secondtag is the end tag Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  7. 7. HTML Format<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body></html> Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  8. 8. Editing HTML HTML can be written and edited usingmany different editors like Dreamweaver and Visual Studio. However, in this tutorial we use a plain text editor (like Notepad) to edit HTML. Bunty Jain IT Training, SAP, seekbuntyjain@g mail.com Delhi India.
  9. 9. .HTM or .HTML File Extension? When you save an HTML file, youcan use either the .htm or the .html file extension. There is no difference, it is entirely up to you. Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  10. 10. HTML HeadingsHTML headings are defined with the <h1> to <h6> tags. Example <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  11. 11. HTML ParagraphsParagraphs are defined with the <p> tag. Example <p>This is a paragraph</p> <p>This is another paragraph</p> Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  12. 12. HTML LinksHTML links are defined with the <a> tag. Example <ahref="http://www.subjectelement.com"> This is a link</a> Bunty Jain IT Training, SAP, seekbuntyjain@g mail.com Delhi India.
  13. 13. HTML ImagesHTML images are defined with the <img> tag. Example <img src=“subjectelement.jpg" width="104" height="142" /> Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  14. 14. Nested HTML Elements <html> <body> <p>This is my first paragraph.</p> </body> </html> Bunty Jain IT Training, SAP, seekbuntyjain@g mail.com Delhi India.
  15. 15. The <body> element <body> <p>This is my first paragraph.</p> </body>The <body> element defines the body of the HTML document. Bunty Jain IT Training, SAP, seekbuntyjain@g mail.com Delhi India.
  16. 16. The <html> element: <html> <body> <p>This is my first paragraph.</p> </body> </html>The <html> element defines the whole HTML document. Bunty Jain IT Training, SAP, seekbuntyjain@g mail.com Delhi India.
  17. 17. Dont Forget the End TagSome HTML elements might display correctly even if you forget the end tag: <p>This is a paragraphThe example above works in most browsers, because the closing tag is considered optional. Never rely on this. Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  18. 18. HTML Tip: Use Lowercase TagsHTML tags are not case sensitive: <P> means the same as <p> Bunty Jain IT Training, SAP, seekbuntyjain@g mail.com Delhi India.
  19. 19. HTML Attributes Attributes provide additional information about an elementAttributes come in name/value pairs like: name="value“ Example <a href="http://www.subjectselement.com">This is a link</a> Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  20. 20. HTML Horizontal LinesThe <hr /> tag creates a horizontal line in an HTML page. <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  21. 21. HTML CommentsComments can be inserted into the HTML codeto make it more readable and understandable. Comments are written like this: <!-- This is a comment --> Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  22. 22. HTML Tip - How to View HTML Source Have you ever seen a Web page and wondered "Hey! How did they do that?" To find out, right-click in the page and select "View Source" (IE) Bunty Jain IT Training, SAP, seekbuntyjain@g mail.com Delhi India.
  23. 23. HTML Line BreaksUse the <br /> tag if you want a line break (a new line) without starting a new paragraph: Example<p>This is<br />a para<br />graph with line breaks</p> Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  24. 24. HTML Text Formatting This text is bold This text is big This text is italic Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  25. 25. HTML Formatting Tags HTML uses tags like <b> and <i> forformatting output, like bold or italic text. Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  26. 26. The HTML <font> Tag <p> <font size="5" face="arial" color="red">This paragraph is in Arial, size 5, and in red text color. </font> </p> <p> <font size="3" face="verdana" color="blue">This paragraph is in Arial, size 5, and in red text color. </font> </p> Bunty Jain IT Training, SAP, seekbuntyjain@g mail.com Delhi India.
  27. 27. HTML Tables <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> Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  28. 28. HTML Table Headers <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <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> Bunty Jain IT Training, SAP, seekbuntyjain@g mail.com Delhi India.
  29. 29. HTML Lists <ul><li>Coffee</li> <li>Milk</li> </ul> <ol><li>Coffee</li> <li>Milk</li> </ol> Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  30. 30. HTML Layouts - Using TablesThe simplest way of creating layouts is by using the HTML <table> tag. Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
  31. 31. The HTML head ElementThe following tags can be added to the head section <title>, <base>, <link>, <meta>, <script>, and <style> Bunty Jain IT Training, SAP, seekbuntyjain@g mail.com Delhi India.
  32. 32. We can move to learn CSS Thanks Q&A Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.

×