Design your first website using HTML
Download as PPTX, PDF5 likes6,341 views
The document provides an introduction to designing a first website using HTML and CSS. It explains some key concepts like HTML tags, formatting text, adding images and links, and creating tables. The document is presented as a tutorial with examples of HTML code for headings, paragraphs, links, and other common elements.
Design your first website using HTML
- 1. Design your first Website HTML & CSS Bunty Jain, IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
- 2. Website Designing An Overview Bunty Jain IT Training, SAP, seekbuntyjain@g mail.com Delhi India.
- 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. 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. HTML Tags HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language A markup language is a set of markup tags HTML uses markup tags to describe web pages Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
- 6. HTML Tags HTML markup tags are usually called HTML tags HTML tags are keywords 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 Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
- 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. Editing HTML HTML can be written and edited using many 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. .HTM or .HTML File Extension? When you save an HTML file, you can 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. HTML Headings HTML 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. HTML Paragraphs Paragraphs 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. HTML Links HTML links are defined with the <a> tag. Example <a href="http://www.subjectelement.com"> This is a link</a> Bunty Jain IT Training, SAP, seekbuntyjain@g mail.com Delhi India.
- 13. HTML Images HTML 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. 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. 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. 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. Don't Forget the End Tag Some HTML elements might display correctly even if you forget the end tag: <p>This is a paragraph The 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. HTML Tip: Use Lowercase Tags HTML tags are not case sensitive: <P> means the same as <p> Bunty Jain IT Training, SAP, seekbuntyjain@g mail.com Delhi India.
- 19. HTML Attributes Attributes provide additional information about an element Attributes 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. HTML Horizontal Lines The <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. HTML Comments Comments can be inserted into the HTML code to 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. 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. HTML Line Breaks Use 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. 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. HTML Formatting Tags HTML uses tags like <b> and <i> for formatting output, like bold or italic text. Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
- 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. 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. 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. 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. HTML Layouts - Using Tables The simplest way of creating layouts is by using the HTML <table> tag. Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.
- 31. The HTML head Element The 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. We can move to learn CSS Thanks Q&A Bunty Jain IT Training, SAP, seekbuntyjain@gmail.com Delhi India.