L
LLLOS.ai
Learn
L

Chapter 7 — HTML - An Introduction

Class 6 · Computer Studies

Overview

This unit introduces HTML as the basic language used to create web pages. Students will learn what HTML is and why it matters, how an HTML document is organised, and how to write simple pages using common tags. The unit covers headings, paragraphs, lists, images, links, tables, simple forms and basic text formatting. You will also learn how to save your work, open it in a browser, and find and fix common mistakes. Practical activities include writing small HTML files, inserting images, creating links between pages, and a final project to build a short personal web page. Learning HTML helps students present information clearly, build digital projects for class, and prepare for more advanced web topics later. It strengthens logical thinking, careful typing, and planning before writing — useful habits across subjects. By the end of the unit, pupils will be able to create and test simple web pages, organise content with headings and lists, and use images and tables to make information easier to understand.

Learning Objectives

  • Define what HTML is and explain its role in creating web pages.
  • Identify and write the basic structure of an HTML document using standard tags.
  • Create headings, paragraphs and line breaks to organise text on a web page.
  • Apply text formatting and colours appropriately to make content readable.
  • Use ordered and unordered lists to present information clearly.
  • Insert images with proper file paths and alt text and explain why alt text matters.
  • Create links to other pages and to sections within the same page.
  • Build simple tables to show data in rows and columns.
  • Save HTML files, open them in a browser and debug common errors.

Topics in this chapter

12 topics · tap a topic title to jump straight to it.

💻1

What is HTML?

What is HTML?
HTML means HyperText Markup Language. It is a way of telling a web browser how to place text, images and other content on a web page. HTML is not like a mathematics formula or a programming language for calculations; instead it uses tags to mark parts of the page. Tags are words placed inside angle brackets like <tag> which tell the browser: “This part is a heading”, “This part is a paragraph”, or “This part is a link”.

When you open a web page, the browser reads the HTML file and shows the content according to the tags and structure. An HTML file is plain text, so you can write it in a simple editor. You save it with the .html extension. Later, opening that file in a browser displays the page just as anyone would see it on the internet. Learning HTML gives you the power to make your own pages for school projects, class notices, or to present information in a clear and attractive way.

HTML teaches a structured way of thinking: break information into titles, paragraphs, lists and tables. This makes your pages easier to read and to change later. Tags often come in pairs—an opening tag and a closing tag—with the content between them. Some tags do not need a closing tag. Browsers try to handle mistakes but it is best to write neat and correct HTML. Over the course of this unit you will see small examples, practise typing tags, and make simple pages to test in a browser. The focus is on understanding the purpose of tags and learning how to put pieces together to form a complete page.

📌 Examples
  • Type a single paragraph element: <p>This is my first web page.</p>
  • Add a main heading: <h1>Welcome to Our Class</h1>
🧮 Formulas
  1. Tag pair example: <tag>content</tag>
  2. Self-closing example: <img src="file.jpg" alt="desc">
📊 Visual ideas
Draw a labelled browser window showing where HTML content appears and where the address bar is.
💻2

Basic HTML Document Structure

Basic HTML Document Structure
An HTML document follows a simple structure so browsers can read it in the right order. The document starts with a declaration telling the browser the file is HTML. Next comes the root <html> tag which contains two main parts: the <head> and the <body>. The <head> holds information about the page, such as its title and other settings that do not appear directly in the main page area. The <body> contains the content that users can see: headings, paragraphs, lists, images and tables.

A complete small page will look like this in sequence: first the line to declare HTML, then <html>, inside it <head> followed by <title>Your Title</title> and </head>, then <body> where you write heading and paragraph tags, and finally close with </body> and </html>. Writing the tags in the correct order helps browsers and other tools understand your page. Every opening tag should have a matching closing tag (except for some self-closing tags) and nesting must be correct: close inner tags before outer tags.

While browsers do not require specific spacing or indentation, organising the file with indentations and line breaks makes it easier for people to read and edit. Save your file with a name like index.html in a folder that also contains any images you will use. Later lessons will add more elements inside the head and body, such as meta information and links to style sheets, but at this stage practise writing the basic structure many times until it becomes familiar. A well-formed document structure is the foundation for all web pages you will build, and learning it now will make later topics easier to understand and apply.

📌 Examples
  • Create index.html containing: <!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <h1>Hi</h1> <p>Hello</p> </body> </html>
  • Try changing the title and refresh the browser to see the new text on the browser tab.
🧮 Formulas
  1. <!DOCTYPE html>
  2. <html> ... </html>
  3. <head> ... </head>
  4. <body> ... </body>
📊 Visual ideas
Draw the document tree: a root html box with two child boxes head and body; under head place title, under body place headings and paragraphs.
🧫3

Tags and Elements

Tags and Elements
Tags are the words inside angle brackets that instruct the browser how to display content. When a tag surrounds content it becomes an element. For example, <p>This is text.</p> is a paragraph element where <p> and </p> are opening and closing tags and the text between them is the element's content. Most elements have two tags—an opening and a closing tag—but a few are self-closing, such as <img> which displays an image and does not need a separate closing tag.

Elements can contain other elements; this is called nesting. For example, a paragraph element can include a link element inside it. When nesting, always close the most recently opened tag first before closing the outer tag. Wrong nesting can confuse the browser and lead to unexpected display. Tags can also have attributes, which are extra details written inside the opening tag. An attribute has a name and a value inside quotes, for example src="picture.jpg" tells the browser where to find an image file.

Use element names that match their meaning: headings for titles, paragraphs for text blocks, lists for related items, and tables for tabular data. Do not rely on tags for styling; their main job is to show structure and meaning. Clear structure makes your pages easier to read and maintain. Practice reading simple HTML files and identify which parts are tags, attributes and content so you can write correct elements in your own pages. Over time, recognising common elements helps you assemble pages faster and spot mistakes earlier when they occur.

📌 Examples
  • <p>This is a <a href="about.html">link</a> inside a paragraph.</p>
  • <strong>Warning:</strong> Use strong to show important text.
🧮 Formulas
  1. Attribute format: name="value"
  2. Nesting rule: <outer><inner>content</inner></outer>
📊 Visual ideas
Draw nested boxes showing outer paragraph with an inner link element and text around it.
📈4

Headings and Paragraphs

Headings and Paragraphs
Headings and paragraphs are the main blocks for organising written content. Headings mark titles and section names using the tags <h1> to <h6>, where <h1> is the largest heading and <h6> the smallest. Use headings in a sensible order: a page should usually have one <h1> for the main title, followed by <h2> for major sections and <h3> for subsections. This hierarchy helps readers and tools such as screen readers or search features understand the structure of the page.

Paragraphs are created with the <p> tag and are used for blocks of text. Each paragraph should contain a single main idea or a short set of related sentences. Browsers automatically add space between paragraphs which makes the page easier to read. If you need a single line break within a paragraph, use the <br> tag; but avoid using <br> to separate whole paragraphs—use separate <p> tags instead. Clear paragraphs improve reading flow and make your page look tidy.

When preparing content for your page, think about the reader: break long text into smaller paragraphs and give each section a clear heading. Headings should be short and descriptive. Mixing headings and paragraphs helps people scan the page quickly and find the information they need. Practice by writing a title, then two short paragraphs under two different subheadings to see how the structure helps the reader follow the ideas step by step. Doing this repeatedly will make it easier to choose the right heading levels and to organise information logically on every page you create.

📌 Examples
  • <h1>Welcome to Our Class</h1><p>We are learning computer studies this year.</p>
  • <h2>Activities</h2><p>We will do projects, slides and small web pages.</p>
🧮 Formulas
  1. Headings: <h1> ... </h1> to <h6> ... </h6>
  2. Paragraph: <p> ... </p>
  3. Line break: <br>
📊 Visual ideas
Draw a page layout with a large top heading (h1), two smaller section headings (h2) and paragraphs under each heading.
💻5

Text Formatting and Colours

Text Formatting and Colours
Formatting helps emphasise important words and makes text easier to scan. Basic formatting tags include <strong> for strong importance (usually bold), <em> for emphasis (usually italic), <u> for underline and <code> to show computer code. Use these tags to give meaning: for example, use <strong> when a warning must be noticed. Avoid using formatting only for decoration; meaning helps people who use screen readers and also helps when you later learn styling with CSS.

Colours can make headings or important parts stand out, but they must keep text readable. For class 6 we focus on the idea: a page can have different text colours and a background colour or image. Choose high contrast between text and background — dark text on light background is easiest to read. Very bright backgrounds or many colours on the same page make reading difficult. If you change colours in the editor provided at school, always check the page in the browser to confirm readability and that the colour choice looks good on different screens.

Formatting tags should be kept simple and used where their meaning is clear. For example, highlight a key term in a paragraph with <strong> or show a short piece of code inside <code>. When you need precise control of colours and sizes, that comes later with styling lessons, but the early habit of meaningful formatting and careful use of colours helps you create pages that are neat and accessible. Practice adding one formatting tag to a paragraph and testing how it appears in the browser.

📌 Examples
  • <p>This is <strong>important</strong> information and this is <em>emphasised</em>.</p>
  • Choose a plain light background and dark headings to keep text clear.
🧮 Formulas
  1. <strong> ... </strong>
  2. <em> ... </em>
  3. <u> ... </u>
  4. <code> ... </code>
📊 Visual ideas
Draw two page samples: one with good contrast (black text on white) and one with poor contrast (light yellow text on white) to compare readability.
💻6

Lists: Ordered and Unordered

Lists: Ordered and Unordered
Lists help present a series of items clearly. HTML provides ordered lists using <ol> where items are shown with numbers, and unordered lists using <ul> where items are shown with bullets. Each item of a list is placed inside an <li> tag. Use ordered lists when the order matters, such as steps in a sequence or instructions. Use unordered lists when the order does not matter, such as features, names or shopping items.

Lists can also be nested when one item needs a sub-list. For example, in an <li> you can open another <ul> or <ol> to show related sub-points. Keep nested lists short so the page remains easy to read. You can place other elements inside an <li> such as paragraphs, images, or links — this helps when each list item has more information than a single line. Browsers display numbers or bullets automatically and will update numbering if you add or remove items.

When writing lists, think about the reader: prefer short items, and if steps are long, break them into multiple numbered steps each as their own <li>. For classroom projects, use lists for timetables, project steps, equipment lists and menus. Practice by making both an ordered and unordered list and viewing them in a browser to see how they appear and how nesting changes the layout.

📌 Examples
  • <ol><li>Wash hands</li><li>Mix ingredients</li><li>Bake</li></ol>
  • <ul><li>Books</li><li>Pencils</li><li>Ruler</li></ul>
🧮 Formulas
  1. <ol> <li>item</li> ... </ol>
  2. <ul> <li>item</li> ... </ul>
📊 Visual ideas
Draw a numbered list of three steps and a bulleted list of three items side-by-side to compare their appearance.
7

Adding Images

Adding Images
Images bring life to a web page and help explain ideas. To add an image you use the <img> tag with the src attribute that points to the image file and the alt attribute that gives alternative text. Example: <img src="flower.jpg" alt="Red flower">. The browser looks for the file named in src and displays it in the page. If the image cannot be found, the alt text tells the reader what should have been there and assists people using screen readers.

Save your image file in the same folder as the HTML file or use a correct relative path. Common image formats include .jpg, .png and .gif. Keep file sizes moderate so the page opens quickly; large images slow down loading, especially on slower internet connections. If an image appears too large or too small, you can later control size with style rules, but for now try to use images of appropriate size when you insert them.

Images can also be clickable when wrapped inside a link element, or they can appear inside list items or table cells. Always check the spelling and capitalization of file names, because many systems treat 'Photo.jpg' and 'photo.jpg' as different files. Practice adding an image tag, saving both files, and opening the HTML in a browser to see the result. Also write a clear alt description to help anyone who cannot view the picture and to make your page accessible to more readers.

📌 Examples
  • <img src="school.jpg" alt="Our school building">
  • Use <a href="big.html"><img src="thumb.jpg" alt="Thumbnail"></a> to link a small image to a larger page.
🧮 Formulas
  1. <img src="path" alt="description">
  2. Common formats: .jpg .png .gif
📊 Visual ideas
Draw a webpage area and place an image box labelled with src and alt attributes; show the image file next to the HTML file in the same folder.
💻8

Creating Links

Creating Links
Links, or hyperlinks, let users move between pages and sections. Use the anchor <a> tag with the href attribute to make a link. For example, <a href="https://example.com">Visit Example</a> creates a link to an external website. To link to another page you made, use the file name: <a href="about.html">About Us</a>. To link to a section within the same page, give the target element an id value and use a hash sign in the link: <h2 id="contact">Contact</h2> and <a href="#contact">Go to Contact</a>.

Link text should be clear and describe where the user will go so navigation is simple. Links can also wrap images, so clicking an image opens another page or site. When linking to files in other folders, the path must be correct. If a link points to a file that does not exist or is misspelt, the browser will show an error or a broken link. Check all links before sharing your page, and test them by clicking in the browser.

Creating links helps build multiple pages into a website and shows how information is connected. For class projects, create at least two pages and link them together: a home page and an about page. Practice linking to a page in the same folder and to a teacher-approved website. This teaches the idea of navigation and how websites are collections of connected pages rather than single documents.

📌 Examples
  • <a href="about.html">About our class</a>
  • <a href="#top">Back to top</a> to jump to the element with id="top".
🧮 Formulas
  1. <a href="url">link text</a>
  2. Internal link to id: <a href="#id">...</a>
📊 Visual ideas
Draw two page boxes labelled home.html and about.html and show an arrow from a link on home.html to about.html; also show a link within the same page to an id.
👑9

Making Tables

Making Tables
Tables allow you to present information in rows and columns so that similar items line up and are easy to compare. In HTML, the main elements used are <table> to start a table, <tr> for a table row, <th> for header cells and <td> for ordinary data cells. A caption may be added with <caption> to give the table a title that appears above or below the table. Tables are ideal for timetables, marks lists, and schedules where each row contains related fields such as name, subject and marks.

When building a table, first create the header row with <th> cells that name each column so readers understand what the data below means. After that add one <tr> for each row of data. It is important that each row contains the same number of cells so the columns line up. If you need a cell to span more than one column or row there are special attributes later to handle this, but for now keep tables simple and consistent. Also remember that table contents may include text, small images or links inside each <td> cell.

By default browsers do not show grid lines around tables. Later you will learn methods to add borders and control spacing, but in this class you can use a simple table first and check its appearance in the browser. If the table looks squashed on small screens, try shorter text or fewer columns. Use tables only for data, not for page layout. Practice by creating a small table with a caption, a header row and two or three data rows in your HTML file and view it in the browser. Check that the header is clear, columns align, and the information is easy to read. This exercise helps you become careful about tag order and consistent cell counts which are important skills when presenting data.

📌 Examples
  • <table><caption>Class Marks</caption><tr><th>Name</th><th>Subject</th><th>Marks</th></tr><tr><td>Asha</td><td>Maths</td><td>90</td></tr><tr><td>Vikram</td><td>Science</td><td>85</td></tr></table>
  • Use <th> for header cells to name each column (they appear bold by default).
🧮 Formulas
  1. <table> <tr> <th>header</th> </tr> <tr> <td>data</td> </tr> </table>
📊 Visual ideas
Sketch a 3x3 grid and label the top row as headers (Name, Subject, Marks) and fill one data row with sample names and marks.
💻10

Simple Forms (Introduction)

Simple Forms (Introduction)
Forms are the parts of a web page that let people enter information. A form is created with the <form> tag and inside it you place controls such as text input boxes, areas for longer answers, checkboxes or buttons. For Class 6 the main idea is to learn how to place labels and input fields neatly and to understand that a form is a way to ask questions to the user. We will not send data to a server now, but creating the form layout is an important step before learning how data is processed.

Labels help the user know what to type in each field. Use <label> to name the field and an <input type="text"> or <textarea> for the answer. For example: <label>Name: <input type="text" name="name"></label> puts a small text box beside the word Name. For longer messages use <textarea> which creates several lines where the student can type a paragraph. Add a button to the form such as <button>Send</button> so the user can click when finished; in later classes this button will submit the data to a server or email address when configured.

Design good forms by using clear short labels, giving simple instructions, and leaving enough space between fields. Avoid asking for sensitive personal information. Practice by making a contact form for classmates that asks for name, class and a short note. Save and open the page in a browser to see how inputs appear. Although the form will not send data yet, trying different input types and arranging labels teaches how to design user-friendly pages. This practice prepares you for future lessons where forms will be used to gather answers, save responses and help create interactive websites.

📌 Examples
  • <form><label>Name: <input type="text" name="name"></label><br><label>Message:<br><textarea name="msg"></textarea></label><br><button>Send</button></form>
  • Use <label> to connect text to the correct input field for clarity.
📊 Visual ideas
Draw a simple form layout with labels and boxes: Name, Class, Message and a Send button; indicate where each tag will go.
💻11

Saving, Viewing and Debugging HTML Files

Saving, Viewing and Debugging HTML Files
After writing HTML you must save the file with the .html extension so the computer and browser know it is an HTML document. Choose a clear file name like index.html and keep it in a folder with any images or other files the page needs. To view the page, open the file in a web browser by double-clicking or using the browser’s Open function. The browser then reads the HTML and displays the web page.

If the page does not look as expected, check common mistakes. Typical errors include missing closing tags, mis-typed tag names, wrong file names for images or links, and saving with a wrong extension like .txt. To find errors, read your code carefully and use small steps: make one change, save, then refresh the browser to see the result. Many editors let you see line numbers which help locate mistakes. Indenting and organising your code makes errors easier to spot.

Also keep versions of your file, for example page_v1.html and page_v2.html, so you can return to an earlier working version if needed. If an image is not showing, check that its file name and extension match exactly and that the image is in the same folder. If a link does not work, ensure the target file exists and the path is correct. Debugging is a normal part of building pages — take it step by step and test after small changes until the page appears correctly.

📌 Examples
  • Save your file as 'mypage.html' then double-click it to open in a browser; if text missing, check for unclosed tags like </p>.
  • If image.png does not show, make sure image.png is in the same folder and that the file name is exactly the same, including uppercase/lowercase letters.
📊 Visual ideas
Sketch the edit-save-refresh loop: edit file -> save file -> open/refresh browser -> check result -> repeat.
💻12

Project: Create a Simple Personal Web Page

Project: Create a Simple Personal Web Page
For the final project, combine the skills learned to make a short personal web page. The page should include a main title using <h1>, a short paragraph about yourself with <p>, a list of favourite subjects using <ul> or <ol>, an image using <img> with an alt description, and a small table showing a weekly activity or timetable. Add at least one link: either to another page you create or to a teacher-approved website. Plan the page on paper first to decide where each part will go.

Begin by writing the basic document structure: DOCTYPE, <html>, <head> with <title>, and the <body>. Add your heading, paragraphs and lists inside the body. Insert your image and make sure it is saved in the same folder as your HTML file. Create a simple table with a header row and two or three data rows. Add a link to another page or to a school website. After each small change save and refresh the browser to see how it looks and to find any mistakes early.

Test your page for readability: check headings, spacing between paragraphs, and that the image and table appear correctly. Ask a classmate to open the file on their computer to ensure file paths work. Save a copy of your final HTML file and be ready to show it to the teacher. This project brings together planning, careful typing, and testing — all important skills when making web pages.

📌 Examples
  • Create index.html with <h1>Your Name</h1>, a paragraph about hobbies, a <ul> of favourites and a <table> showing Monday to Friday activities.
  • Include <img src="me.jpg" alt="My photo"> and a link <a href="about.html">More about me</a> to connect pages.
📊 Visual ideas
Draw the planned page layout with boxes for heading, image at left, paragraph on right, a list under them and a table below to plan placement.

Key Concepts

HTML
A markup language used to describe the structure and content of web pages.
Tag
A word placed inside angle brackets that tells the browser how to display content.
Element
A complete unit in HTML consisting of an opening tag, content, and a closing tag.
Attribute
Additional information inside a tag given as name="value" to control behaviour or content.
Head
The section of an HTML document that contains metadata like the title.
Body
The part of an HTML document that contains content visible in the browser.
Heading
A tag such as h1 to h6 used to show titles and section headings.
Paragraph
A block of text marked by the p tag to separate ideas.
List
An ordered (ol) or unordered (ul) set of items each in li tags.
Image (img)
An element that displays a picture using the src attribute for the file path.
Link (a)
An anchor element that points to another page or resource using href.
Table
A structure of rows and columns using table, tr, th and td tags to show data.
Alt text
Descriptive text shown when an image cannot load and used by screen readers.
DOCTYPE
A declaration at the top of an HTML file telling the browser the HTML version.
Nesting
Putting one element inside another so the inner element is closed before the outer one.
Self-closing tag
A tag that does not need a separate closing tag, for example img.

Practice Questions

  1. What does HTML stand for and why is it used? / HTML का पूरा नाम क्या है और यह किसलिए प्रयोग किया जाता है?
    Show answer

    HTML stands for HyperText Markup Language. It is used to describe the structure and content of web pages by using tags to indicate headings, paragraphs, images, links and other elements so a web browser can display them. / HTML का पूरा नाम HyperText Markup Language है। इसे वेब पृष्ठों की संरचना और सामग्री को बताने के लिए प्रयोग किया जाता है, ताकि टैग्स के माध्यम से हेडिंग, पैराग्राफ, चित्र, लिंक इत्यादि दर्शाए जा सकें और ब्राउज़र उन्हें सही ढंग से दिखा सके।

  2. Write the basic structure of an HTML document with tags. / HTML दस्तावेज़ की बुनियादी संरचना टैग्स के साथ लिखिए।
    Show answer

    A basic HTML document includes the DOCTYPE declaration, then the html tag containing head and body. Example structure: <!DOCTYPE html> <html> <head> <title>Your Title</title> </head> <body> <h1>Heading</h1> <p>Paragraph text.</p> </body> </html>. This order tells the browser the page title and what to display in the body. / एक बुनियादी HTML दस्तावेज़ में DOCTYPE घोषणा होती है, फिर html टैग जिसमें head और body होते हैं। उदाहरण संरचना: <!DOCTYPE html> <html> <head> <title>Your Title</title> </head> <body> <h1>Heading</h1> <p>Paragraph text.</p> </body> </html>. यह क्रम ब्राउज़र को पेज का शीर्षक और बॉडी में क्या दिखाना है बताता है।

  3. How do you add an image named 'photo.jpg' with alt text 'My Photo'? / 'photo.jpg' नाम की छवि को 'My Photo' alt टेक्स्ट के साथ कैसे जोड़ते हैं?
    Show answer

    Use the img tag with src and alt attributes: <img src="photo.jpg" alt="My Photo">. Place the image file photo.jpg in the same folder as the HTML file or give the correct path. The alt text helps if the image does not load and assists screen readers. / img टैग का उपयोग करें: <img src="photo.jpg" alt="My Photo">. छवि को उसी फोल्डर में रखें या सही पथ दें। Alt टेक्स्ट तब मदद करता है जब छवि लोड न हो और यह स्क्रीन रीडर उपयोगकर्ताओं के लिए सहायक होता है।

  4. Give an example of an ordered list with three items. / तीन आइटम्स वाली एक क्रमबद्ध सूची का उदाहरण दीजिए।
    Show answer

    An ordered list shows items in sequence using numbers. For example: <ol><li>Wake up at 6:00</li><li>Do morning exercises</li><li>Have breakfast</li></ol>. This HTML will display a numbered list with each step on its own line. Use ordered lists when the order of steps matters. / क्रमबद्ध सूची आइटम्स को क्रम में संख्याओं के साथ दिखाती है। उदाहरण: <ol><li>Wake up at 6:00</li><li>Do morning exercises</li><li>Have breakfast</li></ol>. यह HTML हर कदम को अपनी पंक्ति में संख्याबद्ध रूप से दिखाएगा। ऐसे सूचियों का उपयोग तब करें जब चरणों का क्रम महत्वपूर्ण हो।

  5. What is the purpose of the alt attribute for images? / छवियों के लिए alt attribute का उद्देश्य क्या है?
    Show answer

    The alt attribute provides alternative text that appears if the image cannot load and is read by screen readers to describe the image to visually impaired users. It improves accessibility and helps when images are blocked or missing. / Alt attribute वैकल्पिक पाठ प्रदान करता है जो तब दिखता है जब छवि लोड नहीं होती और यह स्क्रीन रीडर द्वारा दृष्टिहीन उपयोगकर्ताओं को छवि का वर्णन देने में मदद करता है। यह पहुँचनीयता बढ़ाता है और तब भी सहायक है जब छवियाँ उपलब्ध न हों।

  6. How do you create a link to another page called 'about.html'? / 'about.html' नाम के दूसरे पृष्ठ पर लिंक कैसे बनाते हैं?
    Show answer

    Use the anchor tag with the href attribute pointing to the file name: <a href="about.html">About</a>. This creates clickable text 'About' that opens the file about.html when clicked, assuming the file is in the same folder. Test the link in the browser to ensure it works. / anchor टैग का उपयोग करें और href में फाइल का नाम लिखें: <a href="about.html">About</a>. यह 'About' शब्द को क्लिक करने योग्य बनाएगा और यदि about.html उसी फोल्डर में है तो क्लिक करने पर वह पेज खुलेगा। ब्राउज़र में जाँच करना न भूलें।

  7. List two common mistakes beginners make in HTML and how to fix them. / HTML में शुरुआती लोग जो दो सामान्य गलतियाँ करते हैं उन्हें बताइए और उन्हें कैसे ठीक करें।
    Show answer

    Two common mistakes are: (1) Forgetting to close tags. Fix by adding the matching closing tag such as </p> or </div>, and by checking nesting order. (2) Wrong file paths or misspelled filenames for images or links. Fix by checking exact spelling, including uppercase/lowercase and file extension, and ensuring the file is in the correct folder. / दो सामान्य गलतियाँ हैं: (1) टैग बंद करना भूल जाना। इसे मिलते हुए क्लोज़िंग टैग जैसे </p> या </div> जोड़कर और नेस्टिंग क्रम की जाँच करके ठीक करें। (2) छवियों या लिंक्स के लिए गलत फाइल पाथ या गलत स्पेलिंग। इसे सही स्पेलिंग, केस-संवेदनशीलता और एक्सटेंशन जाँचकर तथा फाइल की सही फोल्डर में मौजूदगी सुनिश्चित कर के ठीक करें।

  8. Make a simple 2x2 table showing Name and Marks for two students (write the HTML). / दो विद्यार्थियों के लिए Name और Marks दिखाने वाला सरल 2x2 तालिका का HTML लिखिए।
    Show answer

    Example HTML for a small table: <table><tr><th>Name</th><th>Marks</th></tr><tr><td>Asha</td><td>90</td></tr><tr><td>Vikram</td><td>85</td></tr></table>. The first row uses <th> to name the columns and the next rows use <td> for data. When viewed in a browser this shows a table with column headers and two data rows. / छोटे तालिका के लिए HTML उदाहरण: <table><tr><th>Name</th><th>Marks</th></tr><tr><td>Asha</td><td>90</td></tr><tr><td>Vikram</td><td>85</td></tr></table>. पहली पंक्ति में <th> कॉलम के नाम बताता है और अगली पंक्तियाँ <td> का उपयोग करके डाटा दिखाती हैं। ब्राउज़र में यह कॉलम हेडर और दो डाटा पंक्तियों वाली तालिका दिखाएगा।

  9. Why is it important to save an HTML file with .html extension and refresh the browser after changes? / HTML फाइल को .html एक्सटेंशन के साथ सहेजना और परिवर्तन के बाद ब्राउज़र को रिफ्रेश करना क्यों महत्वपूर्ण है?
    Show answer

    Saving with the .html extension tells the computer and browser to treat the file as an HTML document so the browser renders it as a web page. Refreshing the browser after saving loads the newest saved version so you can see your latest changes. Without saving, the browser still shows the old version and your edits will not appear. / .html एक्सटेंशन से कंप्यूटर और ब्राउज़र को पता चल जाता है कि यह HTML डॉक्यूमेंट है और ब्राउज़र इसे वेब पेज की तरह दिखाएगा। सेव करने के बाद ब्राउज़र को रिफ्रेश करने से नवीनतम सेव्ड वर्ज़न लोड होता है और आपके हाल के बदलाव दिखाई देते हैं। बिना सेव किए ब्राउज़र पुराना वर्शन दिखायेगा और आपके बदलाव नहीं दिखेंगे।

Related Laws & Principles

Explore all

Foundational laws & principles connected to this chapter — tap to open in the Laws Explorer.

Loading related laws…
Sourced from 0 content files · LLOS Learn · browse all chapters