Scribd
Upload
16 views7 pages

Gim 1

Uploaded by

Namatovu Najah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
16 views7 pages

Gim 1

Uploaded by

Namatovu Najah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML (Hyper Text Markup Language)

HTML is a standard markup language for describing web


pages.
• A markup language is a set of markup tags.
• It structures the content on the web using a system of tags,
which define elements like text, images, links, and more.
• HTML documents typically consist of two main parts which
are the head and the body.
HTML is mainly used to;
• Structure web pages using elements such as headings, paragraphs, and
links.
• Embed multimedia content like images, audio, and video.
• Define the layout of web content with tables, forms, and interactive
elements.
• Link web pages together with hyperlinks.
HTML

• HTML documents are described by HTML tags.


• Each HTML tag is a keyword (tag names) surrounded by angle
brackets that describes different document content.
• HTML tags normally come in pairs e.g. <p> content here </p>
Commonly used HTML tags
• <!DOCTYPE html>: Defines the document type and version of HTML.
• <html>: The root element of an HTML document.
• <head>: Contains meta-information about the HTML document (e.g., title, character set,
CSS links).
• <body>: Contains the visible content of the HTML page.
• <h1> to <h6>: Heading tags.
• <p>: Paragraph tag.
• <a>: Anchor tag for hyperlinks.
• <img>: Tag to insert images.
• <div>: Block element for grouping content.
• <span>: Inline element for styling parts of the text.
• <form>: For creating interactive forms for user input.
• <button>: A clickable button.
Page structure
Sample
1. <!DOCTYPE html> webpage 18.
19.
nav {
margin: 20px 0;
2. <html lang="en">
3. <head> 20. }
4. <meta charset="UTF-8"> 21. nav a {
5. <meta name="viewport" 22. margin: 0 15px;
content="width=device-width, 23. text-decoration: none;
initial-scale=1.0"> 24. color: #333;
6. <title>My Simple 25. }
Webpage</title> 26. .container {
7. <style> 27. max-width: 800px;
8. body { 28. margin: auto;
9. font-family: Arial, sans-serif; 29. }
30. </section>
10. margin: 20px; 31. <section id="contact">
11. line-height: 1.6; 32. <h2>Contact Me</h2>
12. } 33. <p>Feel free to reach out via
13. background: #f4f4f4; email: <a
href="mailto:[email protected]
14. padding header { ">[email protected]</a></p>
15. : 10px 0; 34. </section>
16. text-align: center; 35. </div>
17. }
Cont’n
1. <footer> 55. <a href="#contact">Contact</a>
2. <p>&copy; 2023 My Simple 56. </nav>
Webpage</p>
57. </header>
3. </footer>
4. </body> 58. <section id="about">
5. </html> 59. <h2>About Me</h2>
6. footer {
60. <p>Hello! I am a web developer with a
7. text-align: center; passion for creating interactive web applications. I
8. margin-top: 20px; enjoy coding and learning about new
9. font-size: 0.9em; technologies.</p>
10. color: #777; 61. <img src="https://via.placeholder.com/400"
11. } alt="Placeholder Image" style="max-width:
12. </style> 100%;">
13. </head> 62. </section>
14. <body> 63. <section id="services">
15. <header>
64. <h2>Services</h2> <a
16. <h1>Welcome to My
href="#services">Services</a>
Webpage</h1>
17. <nav> 65. <ul>
18. <a 66. <li>Web Development</li>
href="#about">About</a>
67. <li>Responsive Design</li>
19. <div class="container">
68. <li>SEO Optimization</li>

You might also like