HTML presentation
Download as PPTX, PDF0 likes118 views
This document provides an introduction to basic HTML tags and structure. It explains that HTML stands for Hypertext Markup Language and uses tags to identify content. It also outlines the key elements needed in an HTML file, including the <html>, <head>, <title>, and <body> tags. Within the <body> tag, it describes how to add paragraphs using <p> tags, headings using <h1-h3> tags, and images using the <img> tag. It encourages learners to create their own basic HTML file using these elements as an activity.
HTML presentation
- 2. Learning objectives of the lesson • Learners must know what is HTML • Learners must know how to open and close tags • Learners must know how to add head tag and the body tag • Learners must know how to add paragraphs and headings inside the body
- 3. HTML • HTML stands for HyperTextMarkupLanguage • A markup language uses tags to identify content • Example of a HTML tag <p> this is a paragraph </p>
- 4. Basic tags • HTML has both opening and closing tags • We open tags using symbols which is “<>“ • Example <html> • We close tags using symbols which is “</>” • Example </HTML>
- 5. The head tag • Immediately following the open tag, you'll find the head of the document, which is identified by opening and closing head tags • The head of the HTML file contains all of the non-visual elements that help make the page work. The head has a title which also has the opening and the closing text • Example start by open tag <html> <head> <title> First page</title> </head> finish by closing tag </html>
- 6. The body tag • The body tag follows the head tag . All visual-structural elements are contained within the body tag. Within the body there's elements, which can be headings, paragraphs, lists images and link. But today we only focusing on headings, paragraphs and images. • The body tag also has the opening and the closing tag. • Example start by open tag <html> <head> <title> first page</title> </head> <body> </body> finish by closing tag </html>
- 7. Adding the paragraphs in the body tag • The HTML <p> element represents a paragraph of text. Paragraphs are usually represented in visual media as blocks of text that are separated from adjacent blocks by vertical blank space and/or first-line indentation. Paragraphs are block-level eleme • Example Example start by open tag <html> <head> <title> first page</title> </head> <body> <p> first paragraph</p> </body> finish by closing tag </html>
- 8. Adding headings in the body tag • Headings Are Important • Search engines use the headings to index the structure and content of your web pages. • Users skim your pages by its headings. It is important to use headings to show the document structure. • <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on. • Example Example Example start by open tag <html> <head> <title> first page</title> </head> <body> <h1> first heading</h1> </body> finish by closing tag </html>
- 9. Adding images in the body tag • HTML Images Syntax • In HTML, images are defined with the <img> tag. • The <img> tag is empty, it contains attributes only, and does not have a closing tag. • The src attribute specifies the URL (web address) of the image: • Example start by open tag <html> <head> <title> first page</title> </head> <body> <h1> first heading</h1> <img src=“Picturescomputers” alt=“computers" style="width:304px;height:228px;"> </body> finish by closing tag</html>
- 10. The HTML File • HTML files are text files, so you can use any text editor to create your first webpage . There are some very nice html editors available; you can choose the one that works for you. For now lets write our examples in the Notepad.
- 11. Activity 1 • Open the Notepad following the examples I gave, make your own html file. Do not forget to use the file extension .html