Basic HTML Document Structure PDF

2.1. Basic HTML document structure HTML document structure An HTML document contains the text of the page itself and HTML tags, which define the structure and appearance of the document. It also contains hyperlinks to other pages or to include multimedia elements such as audio, video, animations etc...

2.1. Basic HTML document structure HTML document structure An HTML document contains the text of the page itself and HTML tags, which define the structure and appearance of the document. It also contains hyperlinks to other pages or to include multimedia elements such as audio, video, animations etc. Entire HTML document is bound within a pair of and tags. HTML tags are generally have an opening and closing tag surrounding the text they affect. It is written between < > brackets and HTML elements consist of several parts, including the opening and closing tags, the content, and the attributes. HTML depicts each element as shown below Table 2-2: Example 1:Basic HTML structure Table 2-2: Description of The basic HTML structure No HTML element Description 1 This declaration specifies the version of HTML that the document is written in. It is usually the first line of an HTML file No HTML element Description 2 element: This is the root element of the document and encloses all other elements 3 element This element contains metadata about the document, such as the title, author, and character set. It does not contain any visible content on the page 4 element: This element is HTML elements that provide information about a webpage to search engines and website visitors. It is are used to provide metadata about a webpage, such as its title, description, and keywords, which can improve its visibility in search engine results 5 element: This element is nested within the head element and specifies the title of the web page, which appears in the browser's title bar 6 element This element contains all visible content on the page, such as text, images, links, and other HTML elements. HTML Hierarchy HTML elements are hierarchical, which means that they can be nested inside each other to create a tree-like structure of the content on the web page.This hierarchical structure is called the DOM (Document Object Model), and it is used by the web browser to render the web page.  Figure 2.1: Document Object Model Every web document has two sections. Heading Section and Body Section. The heading section is used to show the title of a webpage in the title bar or tab heading in the browser. The head section should begins with tag and end with tag. The tag is used to specify the title of the webpage. The body section is used to display the main content on the browser window. The body section should defined within and tags. Whatever the text you specify between these tags will display on the browser window. Example:- Comprehensive of HTML documents Code Description: HTML code to create the first file My First Web Page This is my First Web Page  Output Description: Basic HTML output will describe each elements 2.1.1. Create a HTML file An HTML file is simply a text file saved with an.html or.htm extension. A file that contains Hyper Text Markup Language is called an HTML file. This file is stored in a standard text format with the.html extension and contains tags that define a web page layout and content like text, tables, images, videos, and hyperlinks..html is the extension of an HTML file. Like any other file that is on your device, HTML files also have an extension (we'll know more about it later in the article), and that is.html at the end of the HTML file name, for example: index.html In the late 90s, when HTML was introduced,.htm was used as the extension of an HTML file. However, nowadays,.html is preferred and used commonly. We will discuss this in detail later in this article. Dear learners! Well, let's get started with creating your first HTML page. Let come that named myfirstpage.html.Are you familiar to create page or not?How to create ,save and open your first HTML document? 2.1.2. Saving and opening html documents In this lesson you will learn how easy it is to create an HTML document or a web page. To begin coding HTML you need only two things: a simple-text editor(NOTEPAD) and a web browser.Let's walk through the following steps. At the end of this practical lesson, you will have made an HTML file that displays a "Hello world" message in your web browser. Operation Sheet : 2-3 Title: Save and open html documents Objective: This operation sheet provides step-by-step instructions on how to save and open properly. Instructions:Demonstrate how to save and open using HTML document. Task 1: Save HTML file The following are the steps to create and save an HTML file with the help of the Notepad text editor. Step 1: Open Notepad Windows7 : Start → All Programs →Accessories → Notepad or Windows10 :On the start menu, search for Notepad in Windows, Click on the Notepad editor to open. Step 2. Type The below HTML Code My First Web Page This is my First Web Page Step 3. Save the HTML page Now save the file on your desktop as "myfirstpage.html ". you can click on File nemu and then Save or directly press Ctrl + S.  Grade 11 Web Design and Development Student Module Click File → Save (or) Press Ctrl + S Save as dialog box appears as shown in the Figure 10.3 In “File Name” text box, type a file name with.htm or.html extension. Select “All Files” from “Save as type” list box. Write the name of the file followed by the.html extension and save the file encoding as UTF-8 Click “Save” button. Task 2: View your HTML file /Webpage in a Browser The following are the steps to open HTML on browser 1. Open a Browser (Internet Explorer / Mozilla Firefox or any) 2. Click File → Open File (or) Press Ctrl + O 3. From the “Open” dialog box, browse the folder in which the HTML document is saved. Choose the File name and click “Open” button. Task3: View Source file Source file is an HTML document, what you actually type in text editor (Notepad or getit). You can view your original source file in the browser. The following steps are to be followed to view a source file. 1. Right click on the browser 2. Select View Page Source (Firefox and Chrome) / View Source (Internet Explorer) or Press Ctrl + U (all browser) 3. Source file will be displayed. 4. In Internet Explorer, View → Source is also used to open-source file. Task 4: Edit the source HTML file Source file can be edit only through the text editor. So, to edit the source file, open the source file with a text editor. When you edit a source file, no need to close browser in which displaying the HTML document. The following steps are to be followed to open a source file. 1. Go to the folder in which your source files are located. 2. Right click on the source file that you want to edit 3. From the pop-up menu, select Open With → Notepad 4. Source file will be opened in text editor Ministry of Education 6  Grade 11 Web Design and Development Student Module 5. Make the changes and save the file using File → Save or Ctrl + S. Task 5: Reload / Refresh to see the effect that changed HTML code The following are the steps to refresh HTML on browser 1. After modify and save the source file, minimize your source file. 2. Go to the browser. 3. Click Refresh (Internet Explorer) / Reload Current Page (Firefox) / Reload this page (Chrome) icons on the address bar. 4. Press Ctrl + R or F5 will be used to refresh / reload the modifications. If not, please try to write some code on the above HTML file (myfirstpage.html) and see the effect on browser window by make refreshing. It is important that the extension.html is specified — some text editors, such as Notepad, will automatically save it as.txt otherwise. 2.1.3. Metadata and its importance in SEO Dear learners! Let us commence by presenting significant question. What is metadata and how can it be used in HTML for SEO purposes? The far ahead elucidation offers a comprehensive insight into metadata and its application in HTML for the purpose of SEO What is HTML metadata? Metadata is data (information) about data. tags always go inside the element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings. Metadata will not be displayed on the page, but is machine parsable. Ministry of Education 7  Grade 11 Web Design and Development Student Module Metadata is data that provides information about other data. In the context of an HTML page, metadata is information about the content of the page that is not visible to the user, but that can be used by web browsers, search engines, and other systems to understand and interpret the content of the page. Metadata in an HTML page is typically contained in the head section of the page and is made up of tags and attributes that provide information about the page. Some examples of metadata that can be included in an HTML page are: The page's title: This appears in the title bar of the browser and is used to identify the page and to generate search results. Keywords: These are words or phrases that describe the content of the page and can be used by search engines to index the page. Description: This is a short summary of the page's content that can be used by search engines to provide context for the page in search results. Author: This is the name of the person or organization that created the page. Copyright information: This is used to protect the intellectual property rights of the page's creator. Metadata is used in an HTML page to provide additional context and information about the page's content. This can be helpful for search engines, which use metadata to understand the content of a page and to rank it in search results, and for users, who can use metadata to get a better sense of what a page is about before deciding whether or not to visit it. Metadata can also be used by web browsers and other systems to understand and interpret the content of a page and to display it correctly. What are HTML tags in SEO? HTML tags are short pieces of code on the web page that provide technical information about its content. The purpose of these tags is to tell search engines how to “interact” with the page, how it should be displayed in Google Search as well as to visually adjust the page’s content in web browsers (for better user experience). Why are HTML tags important in SEO? HTML and meta tags (+ their attributes) indicate to Google what the page is about, how the Ministry of Education 8  Grade 11 Web Design and Development Student Module web crawler should interact with its content, and whether or not (or how) it should be displayed in Google Search. Whenever a crawler like Googlebot visits a page, it scans its content along with the provided tags to get a better understanding of the page and decides: Whether or not (or how) the page should be crawled and indexed. How relevant (and optimized) the page is for certain search queries. How it should be displayed in Google SERPs Self-check 2-2: 1. What file extension do HTML files usually have? 2. What are some elements usually present in the basic structure of an HTML document? 3. What is the purpose of metadata in an HTML document? 4. What type of information do HTML tags provide about web page content? 5. What is the purpose of HTML metadata? 6. What are the different types of HTML metadata? 7. How can HTML metadata be used to improve SEO? 8. What are some common mistakes that people make when writing HTML metadata? 9. How can I add HTML metadata to my website? Unit Summary An integrated development environment (IDE) is a crucial tool for web development, offering a comprehensive platform for creating HTML code. It includes text editors like Notepad, Visual Studio Code (optional), and web browsers. Using an IDE reduces the risk of breaking a live website and makes the development process more efficient and productive. To install VS Code, follow the requirements of a 1.6 GHz or faster processor, 1 GB of RAM, and Windows 10 and 11 (64-bit). An HTML document consists of a declaration, root element, metadata, and element specifying the version of HTML, enclosing all other elements, and providing information about the webpage to search engines and visitors. To create an HTML document, use a simple-text editor (NOTEPAD) and a web browser. Save Ministry of Education 9  Grade 11 Web Design and Development Student Module the HTML file as an.html or.htm extension and open it in a web browser. Metadata is essential for SEO purposes, providing information about the content of an HTML page, such as title, keywords, description, author, and viewport settings, typically found in the head section. Unit Review Questions Instruction: Take the necessary time to carefully read the questions and choose the most suitable answer from the multiple choices provided. 1. Which of the following is an important first step in web development? A. Publishing the website B. Setting up a development environment C. Creating the website's content D. Deploying the code to a production server E. Designing the website's logo 2. What does an Integrated Development Environment (IDE) typically offer? A. Robust code editors with syntax highlighting, autocompletion, and error checking B. A platform for video editing C. A text-editor with limited functionality D. An application for making spreadsheets E. A tool for browsing the Internet 3. An HTML editor differs from a normal text editor because it: A. Does not allow code to be written from scratch B. Offers features like hassle-free coding C. Is required to test HTML code D. Can only edit HTML code E. Is a mandatory tool for web development 4. Which of the following is NOT a reason for setting up a development environment for HTML? A. To provide a platform for creating and testing HTML code B. To allow developers to work in a controlled environment C. To make changes to live websites directly and frequently D. To experiment without the risk of breaking a live website Ministry of Education 10  Grade 11 Web Design and Development Student Module E. To minimize errors and bugs by testing code locally before deployment 5. A good code editor is essential because it: A. Reduces manual tasks and enhances developer productivity B. Allows users to browse the internet more safely C. Makes it easier to design website graphics D. Offers advanced video editing features E. Provides entertainment with built-in games 6. Which of the following code editors is known for having a WYSIWYG feature? A. Adobe Dreamweaver B. VS Code C. Notepad++ D. Atom E. Sublime Text 7. Which statement about WYSIWYG editors is incorrect? A. They are text-based editors with no preview feature B. They do not require extensive knowledge of HTML for basic usage C. "What you see is what you get" is the full form of WYSIWYG D. They enable non-technical users to develop websites more easily E. They allow users to drag and drop elements into a web page 8. What is the primary function of a web browser in web development? A. To provide a platform for video conferencing B. To write and run server-side code C. To play online games D. To view web pages and test HTML code E. To create graphics and logos for websites 9. What does the `` declaration signify in an HTML document? A. It specifies the encoding of the document's characters. B. It links a CSS stylesheet to the HTML document. C. It is the opening tag of the HTML document. D. It specifies the version of HTML that the document is written in. E. It is a comment for developers to read. Ministry of Education 11  Grade 11 Web Design and Development Student Module 10. Which HTML element serves as the root of the document? A. D. B. E. C. 11. Where in an HTML document should metadata typically be included? A. Inside the element B. Inside the element C. In the section D. At the end of the section E. Inside the element 12. What is the main purpose of the `` element in an HTML document? A. To specify the author of the content B. To create a visible heading C. To specify the title of the web page, which appears in the browser's title bar D. To display body content prominently E. To style the webpage 13. What is the correct sequence of elements for the basic structure of an HTML document? A. , , , , B. , , , , C. , , , , D. , , , , E. , , , , Answer key for Self-check questions Self-check 2-1: Answer Key 1. You should use an HTML editor in the following situations: Learning HTML: Helps beginners with syntax highlighting and error checking. Creating and Updating Web Pages: Facilitates efficient coding and maintenance. Ministry of Education 12  Grade 11 Web Design and Development Student Module Ensuring Code Quality: Provides validation and linting for standards compliance. Improving Productivity: Features like autocomplete and snippets speed up coding. 2. Difference Between Text HTML Editors and WYSIWYG HTML Editors A. Text HTML Editors Advantages: Greater control over the code. Ideal for learning and understanding HTML. Typically supports multiple languages beyond HTML. Disadvantages: Steeper learning curve for beginners. Requires knowledge of HTML syntax. B. WYSIWYG HTML Editors Advantages: Easier for beginners and non-coders. Faster to create basic web pages. Provides a visual representation of the final product. Disadvantages: Less control over the generated code. May produce bloated or less optimized code. Can obscure the understanding of HTML. 3. Common Features of an HTML Editor: Regardless of whether it's a text HTML editor or a WYSIWYG HTML editor, common features include: Syntax Highlighting: Differentiates various elements of the code with colors, making it easier to read and debug. Autocomplete: Suggests and completes code as you type, increasing efficiency. Code Folding: Allows you to collapse and expand sections of code, making navigation easier. Error Checking and Validation: Identifies syntax errors and validates code against web standards. Ministry of Education 13  Grade 11 Web Design and Development Student Module Search and Replace: Enables quick search and replacement of text or code across the document or entire project. Multiple Language Support: Supports not just HTML, but also CSS, JavaScript, and other web technologies. Self-check 2-2: Answer Key 1. HTML files usually have the file extension ".html" or ".htm". 2. Some elements usually present in the basic structure of an HTML document include the doctype declaration, HTML opening and closing tags, head and body sections, and title tags. 3. The purpose of metadata in an HTML document is to provide additional information about the document, such as the document's title, author, description, and keywords. Metadata helps search engines and other applications understand and categorize the content of the document 4. HTML tags provide information about the structure and formatting of web page content. They define elements such as headings, paragraphs, links, images, lists, tables, and more. 5. The purpose of HTML metadata is to provide information about a web page that is not displayed directly to the user. This information is used by search engines, social media platforms, and other applications to understand and categorize the content of the page. 6. The different types of HTML metadata include the title tag, which specifies the title of the web page, meta tags, which provide additional information such as description and keywords, and link tags, which define relationships between the current document and external resources. 7. HTML metadata can be used to improve SEO by including relevant keywords in the meta tags, writing compelling and accurate descriptions, and ensuring that the title tag accurately reflects the content of the page. This helps search engines understand the content and relevance of the web page, potentially improving its visibility in search results. Ministry of Education 14  Grade 11 Web Design and Development Student Module 8. Some common mistakes when writing HTML metadata include using duplicate or irrelevant keywords, writing vague or misleading descriptions, and neglecting to update the metadata when the content of the page changes. It's important to ensure that the metadata accurately reflects the content of the web page. 9. To add HTML metadata to your website, you can include relevant tags within the head section of your HTML document. Ministry of Education 15  Grade 11 Web Design and Development Student Module UNIT 3 CREATE WEB CONTENT USING HTML Unit Coverage This unit is designed to provide you the necessary information and practice regarding the following content coverage: 3.1 HTML Elements 3.2 HTML Text formatting elements 3.3 HTML links 3.4 HTML lists 3.5 HTML table 3.6 HTML frame 3.7 HTML form 3.8 HTML multimedia Unit Learning Outcomes This unit will also assist you to attain the following learning outcomes. Specifically, upon completion of this unit, you will be able to: Create web pages Insert contents using HTML Key Terms: Tags, Element, attribute, paragraph, heading, anchor, link, hyperlink, list, table, form and multimedia Unit Overview The emphasis of this unit was on HTML elements, which include forms, frames, lists, tables, links, text formatting elements, and multimedia elements. Links enable users to move between sites, and text formatting components style and format content. Lists classify and present data; tables show tabular information; frames divide pages into sections; and forms gather user input via text fields, checkboxes, radio buttons, and submit buttons. The user experience is improved with multimedia features that incorporate photos, movies, and audio files. In general, HTML elements are essential for building dynamic, aesthetically pleasing webpages. Ministry of Education 16  Grade 11 Web Design and Development Student Module 3.1 HTML Elements HTML uses predefined tags and elements which tell the browser how to properly display the content. HTML Tags and Elements are sometimes perceived as the same. However, they are not. There is a subtle difference between HTML elements and tags that many people aren't aware of. Dear learners! Before delving into the HTML element, it is essential to familiarize ourselves with the tag and attribute, as this will provide us with a thorough comprehension. What are tags and attributes of HTML element? The key elements of an HTML element are its tag, content, and attribute, which work together to define its An HTML element is defined by a start tag, some content, and an end tag. The Element can be articulated in the following form or syntax. Syntax: content Figure 3.1: HTML element First, we acquire knowledge about the tag and attribute adjacent to the next HTML element in order to gain a comprehensive understanding. 3.1.1 HTML Tags HTML Tags are special words wrapped in angle brackets (< >) which are used to define different types of content on a webpage. Every tag in HTML performs different tasks. If you have used an open tag , then you must use a close tag. Ministry of Education 17  Grade 11 Web Design and Development Student Module There are two types of most common tags: Paired Tags: These tags come in pairs. That is they have both opening(< >) and closing() tags Example 1: content content Empty/ unpaired / Self-Closing:These tags do not require to be closed Example 2: Dear learners! Let’s Sort the HTML5 general tags into different categories for more detail to understand and utilize easily.what are the different b/n Paired, unpaired and Utility-Based Tags? For a more detailed analysis, it is recommended to sort HTML tags into distinct categories based on Utility, function and purpose. Now, tags can be categorized into three distinct types: Paired tags, unpaired tags, and Utility-Based tags. Utility-Based Tags The HTML tags can be widely differentiated on the basis of their utility, that is, on the basis of the purpose they serve. We can divide them basically into three categories as discussed below: 1. Formatting Tags The HTML tags that help us in the formatting of the texts like the size of the text, font styles, making a text bold, etc. This is done using tags like , , , etc. Tables, divisions, and span tags are also those tags that help format a web page or document and set the layout of the page. Ministry of Education 18  Grade 11 Web Design and Development Student Module 2. Structure Tags The HTML tags that help in structuring the HTML document are called Structure Tags. Description, head, html, title, body, etc., form the group of the page structure tags. The structure tags only assist in creating or forming the basic html page from the root; that is, they do not affect or has any hand in the formatting of texts. 3. Control Tags Another category of tags that can be created is ‘Control Tags’. The Script tags, radio buttons or checkboxes, the Form tags, etc., forms the control tags. These are the tags that are used in managing content or managing scripts or libraries that are external. All the form tags, drop- down lists, input text boxes, etc., are used in interacting with the visitor or the user. The above distinction of the HTML tags is based on the type of tags and their utility. The HTML tags can also be simply divided based on basic categories like : Figure 3.2: Categories of basic HTML tags categories Table 3-2: HTML tags and Groups HTML Groups Tags HTML Meta Tags DOCTYPE, title, link, meta and style Basic Root Tags html, head, and body HTML Text formatting , , , , , , , , , , Tags , , , , , , , Ministry of Education 19  Grade 11 Web Design and Development Student Module HTML Groups Tags , , , , , , and HTML Link Tags and HTML Image and Object , , , and Tags HTML List Tags , , , , and HTML Table Tags table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption HTML Form Tags form, input, textarea, select, option, optgroup, button, label, fieldset and legend HTML media Tags Audio, Video, SVG (Scalable Vector Graphics),and Canvas Tags HTML script or Canvas, Script and nonscript programming tags Characteristics of HTML Elements:- The HTML element is everything from the start tag to the end tag: HTML Elements are components that are used in HTML Page. HTML Elements contain a starting tag, content, and an ending tag. If there is no content in an HTML Element, it is called an Empty HTML Element. HTML Elements can be nested. There can be an HTML element with another HTML Element as its content. 3.1.2 Types of HTML element There are two types of elements. Inline and block level elements. 1. Inline elements As the name is describing, it does not start on a new line and takes the space as small as possible. It means it takes the least space. 2. Block elements Block elements are those elements that occupy their own space and always start on a new line. They make big structures. Ministry of Education 20  Grade 11 Web Design and Development Student Module All elements don't require the end tag or closing tag to be present. These are referred as empty elements, self- HTML Comments are used to insert comments in the HTML code. It is a good practice of coding so that the coder and the reader can get help to understand the code. It is a simple piece of code that is wiped off (ignored) by web browsers i.e., not displayed by the browser. Types of Comment There are three types of comments in HTML which are: Single-line Comment Multi-line Comment The single-line comment is given inside the ( ) tag. Syntax: Example 3: : Single-line Comment This is a paragraph. Multi-line Comment To create a multi-line comment , you can enclose your comments between Syntax: Example 4: Multi-line Comment 3.1.3 HTML attributes In HTML, attributes are used to modify the behavior or appearance of an element or to provide additional information about an HTML element that cannot be conveyed through the element's content alone. Attributes are specified within the opening tag of an element and take the form of name/value pairs, separated by an equals sign. In HTML, global attributes are attributes that can be used with all HTML elements. These attributes provide common functionality and can be applied universally. they can be used on all elements, though they may have no effect on some elements. Global attributes specified on both standard and non-standard elements. Let’s explore some common of these global attributes: class: Refers to one or more class names for an element, allowing CSS and JavaScript to select and access specific elements via class selectors or DOM methods like document.getElementsByClassName data-*: Used to store custom data private to the page or application. dir: Specifies the text direction for the content within an element. hidden: Marks an element as not yet relevant or no longer relevant. id: Assigns a unique identifier to an element. lang: Specifies the language of the element’s content. spellcheck: Controls whether the element’s spelling and grammar should be checked. style: Allows inline CSS styling for an element. tabindex: Defines the tabbing order of an element. title: Provides extra information about an element. translate: Determines whether the content of an element should be translated or not. Let's take a look at the characteristics of HTML attributes: Each element or tag can have attributes, which defines the behaviour of that element. Attributes should always be applied with start tag. The Attribute should always be applied with its name and value pair. Ministry of Education 22  Grade 11 Web Design and Development Student Module The Attributes name and values are case sensitive, and it is recommended by W3C that it should be written in Lowercase only. You can add multiple attributes in one HTML element, but need to give space between two attributes. All HTML elements can have attributes Attributes provide additional information about elements Attributes are always specified in the start tag Attributes usually come in name/value pairs like: name="value" Syntax: contents Figure 3.3: Attribute of HTML element 3.1.4 Attributes for HTML document structure Tags Let’s explore the attributes related to HTML document structure tags. These attributes play a crucial role in shaping the structure and behavior of your web page. Here are some fundamental HTML structural tags for documents, including HTML, Head, and Body tags, along with their attributes I. Attributes of < html > tag The tag has two common attributes, such as dir and lang.The dir attribute in HTML plays a crucial role in specifying the text direction of an element’s content. Ministry of Education 23  Grade 11 Web Design and Development Student Module Dear learners! How do HTML tag attributes and values work together to define the behavior and appearance of elements on a web page? Here you will see the details of the HTML tag attribute and its value. For Example:Attributes of HTML tag Every attributes has name and value. We define like name="value".dir is name, rtl is value Table 3-3: Attributes of html tag Name of Values Description Attribute dir " ltr" (align left-to-right) dir="ltr": This is the default value. It indicates left-to-right text direction, suitable for languages written from left to right (like English). " rtl" (algin right-to-left) dir="rtl": This value signifies right-to-left text direction, commonly used for languages written from right to left (such as Arabic) " Atuo" dir="auto": When set to “auto,” the browser dynamically determines the text direction based on the content. This option is recommended when the text direction is unknown lang " en" for English, The lang attribute indicates the language of the element’s "es" for Spanish, content.The value of the lang attribute is an ISO language "fr" for French, and so code. Typically, this is a two-letter code (e.g., "en" for on English), but it can also be an extended code (e.g., "en-gb" for British English) Ministry of Education 24  Grade 11 Web Design and Development Student Module II. Attributes of tag The tag defines the document’s body. The contents of an HTML page reside within the tag. tag contains several attributes.There are many attributes in the tag that are depreciated from HTML5 are listed below: Table 3-4: Attributes of body tag Attribute Value Description name background image It contains the URL of the background image. It is used to set the background image. bgcolor color It is used to specify the background color of an image. All modern browsers support the following 140 color names alink color It is used to specify the color of the active link. link color It is used to specify the color of visited links. text color It specifies the color of the text in a document. vlink color It specifies the color of visited links. The tag defines the document’s body. The contents of an HTML page reside within the tag. tag contains several attributes. A. Background Colour: bgcolor = color By default all the browsers display the text on white background. However, the background color of the browser can be changed by using bgcolor tag. Attribute Values of bgcolor: HTML colors are specified with predefined color names, hex and RGB (Red, Green, Blue) values. Color name: It sets the text color by using the color name. It specify the name of the color for the text in the Document For example “red”. hex_number: It sets the text color by using the color hex code. It specify the hex code of the color of the Text in the Document For example “#0000ff”. rgb_number: It sets the text color by using the rgb code. It specify the rgb value of the Text in the Document For example: “RGB(0, 153, 0)”. Ministry of Education 25  Grade 11 Web Design and Development Student Module Table 3-5: Some Basic colors HTML / CSS Hex Code Decimal Code No Color Name #RRGGBB (R,G,B) 1 Black #000000 (0,0,0) 2 White #FFFFFF (255,255,255) 3 Red #FF0000 (255,0,0) 4 Lime #00FF00 (0,255,0) 5 Blue #0000FF (0,0,255) 6 Yellow #FFFF00 (255,255,0) 7 Cyan / Aqua #00FFFF (0,255,255) Example 5: To change body background color B. Body text Color: text = color The default text color of the body section is “black”, it is often called as automatic color. Example 6: To change body text color C. Background image: background=image An image or picture can be applied as background to a webpage. When you insert an image as background, the text will be displayed on top of the image. Background images can be a texture or bitmap or even a photo.When you insert a small image, the browser takes the image and repeats it across and down to fill the browser window. Inserting animated images (GIF images) creates more interest. Example 7: To Insert images as background