Introduction to HTML for my Special Class
- 2. EXPECTATIONS At the end of this module you will understand the following: 1. understand html; 2. familiarize different basic tags and elements of html5; and 3. familiarize html structure.
- 3. PRETEST • Directions: Select the letter that corresponds to the correct answer. 1. What does HTML stands for? A. Hyper Text Markup Language B. Hyper Text Markdown Language C. Hyper Technology Markup Language D. Hyper Technology Markdown Language 2. Which of the following tags defines that document is an hTML5 document? A. <html> B. <title> C. <body> D. <!DOCTYPE html> 3. The first version of HTML was published in what year? A. 1990 B. 1991 C. 1992 D. 1993 4. HTML 5 was published in what year? A. 2013 B. 2014 C. 2015 D. 2016 5. It is a HTML root element. A. <html> B. <title> C. <body> D. <!DOCTYPE html>
- 4. History of HTML HTML was created by Tim Berners-Lee also known as the father of the web. The first version of HTML was HTML 1.0 published in 1991 and latest version was HTML 5 which was published in 2014. HTML 1.0 it consists of 18 HTML tags and each new version came with new tags and to the markup.
- 6. What is HTML? HTML stands for Hyper Text Markup Language HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content
- 7. •Notepad, notepad++, sublime or TextEdit are all application can be use in writing your HTML documents. •HTML documents are files that end with a .html or .htm extension.
- 8. HTML basic elements and tags • An element is a set of opening and closing tags therefore tags are element names that surrounded by angle brackets. • Tags usually come in pairs the start tag or also known as beginning tag and the end tag also called as closing tag. • The end tag is written like the start tag, but with a forward slash inserted before the tag name. Example: <tag> …………… </tag>
- 9. HTML structure •HTML (HyperText Markup Language) structure refers to the way HTML elements are organized to create a web page. It includes the basic components and tags that define the layout, content, and structure of the page.
- 10. Example declaration defines that this document is an HTML5 document element is the root element of an HTML page element contains meta information about the HTML page element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. element defines a large heading •element defines a paragraph
- 11. Web Browsers The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.
- 13. A simple text editor is all you need to learn HTML. • Learn HTML Using Notepad or TextEdit • Step 1: Open Notepad (PC)
- 14. Step 2: Write Some HTML
- 15. Step 3: Save the HTML Page • Save the file on your computer. Select File > Save as in the Notepad menu. • Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).
- 16. Step 4: View the HTML Page in Your Browser • The result will look much like this:
- 18. Importance of HTML in Web Development 1. Foundation of Web Pages-HTML serves as the fundamental building block for web pages.
- 19. Importance of HTML in Web Development 2. Universal Language- HTML is a standardized language recognized and supported by all web browsers.
- 20. Importance of HTML in Web Development 3.Semantics and Accessibility -HTML provides semantic elements (e.g., headings, lists) that convey the meaning of content.
- 21. Importance of HTML in Web Development 4. Integration with Other Technologies- HTML seamlessly integrates with CSS (Cascading Style Sheets) for styling and JavaScript for interactivity.
- 22. Importance of HTML in Web Development 5. Responsive Web Design HTML5 introduces features like media queries and flexible layouts, enabling responsive web design.
- 23. Importance of HTML in Web Development 7. Structured Data and SEO HTML allows the inclusion of structured data through microformats and schema.org.
- 24. Importance of HTML in Web Development 8. Constant Evolution HTML continues to evolve with new standards and features (e.g., HTML5).
Editor's Notes
- #6: HTML is the standard markup language for creating Web pages.
- #8: An element is a set of opening and closing tags therefor tags are element names that surrounded by angle brackets. Tags tags usually come in pairs the start tag or also known as beginning tag and the end tag also called as closing tag. The end tag is written like the start tag, but with a forward slash inserted before the tag name.
- #10: The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly. It must only appear once, at the top of the page or before any HTML tags. The <!DOCTYPE> declaration is not case sensitive. <head> Element Contains meta-information about the document, such as the title, character encoding, and linked stylesheets or scripts. Contains the visible content of the web page, such as text, images, and interactive elements. All HTML documents must start with a document type declaration. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>. The title of the document appears in tab bar of the browser. Bellow is the following steps in creating, saving and browsing html documents.
- #11: A browser does not display the HTML tags, but uses them to determine how to display the document:
- #12: Below is a visualization of an HTML page structure: Note: The content inside the <body> section will be displayed in a browser. The content inside the <title> element will be shown in the browser's title bar or in the page's tab.
- #13: Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac). We believe that using a simple text editor is a good way to learn HTML. Follow the steps below to create your first web page with Notepad or TextEdit.
- #16: Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with"). The result will look much like this:
- #17: Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!
- #18: It defines the structure and layout of content on the web.
- #19: It ensures cross-browser compatibility, allowing websites to reach a wide audience.
- #20: This enhances accessibility for users with disabilities and improves SEO.
- #21: This trio (HTML, CSS, and JavaScript) forms the core of modern web development.
- #22: This ensures that websites adapt to various screen sizes and devices.
- #23: This helps search engines understand and index website content effectively.
- #24: This helps search engines understand and index website content effectively In summary, HTML is the cornerstone of web development, providing the structure and semantic meaning needed to create accessible, responsive, and interactive websites. Its importance lies in its universality, integration capabilities, and adaptability to evolving web technologies. . Developers can harness these advancements to create innovative web experiences.