Scribd
Upload
5 views

HTML

Uploaded by

Ani Vai
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

HTML

Uploaded by

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

The basic structure of an HTML document consists of several key elements that define the

structure and content of a webpage. Here's a simple breakdown:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<!-- External CSS and JavaScript files can be linked here -->
</head>
<body>
<!-- Content of the webpage goes here -->
<h1>Welcome to My Website</h1>
<p>This is a basic HTML structure.</p>
</body>
</html>

Explanation of the parts:

1. <!DOCTYPE html>: Declares the document type and version of HTML (HTML5 in
this case).
2. <html>: The root element of the HTML document that contains all the content.
o lang="en": Specifies the language of the document (English in this case).
3. <head>: Contains meta-information about the document, such as:
o <meta charset="UTF-8">: Defines the character encoding for the document
(UTF-8 is a common encoding that supports most characters).
o <meta name="viewport" content="width=device-width, initial-
scale=1.0">: Ensures the page is responsive and scales well on different
devices.
o <title>: Specifies the title of the webpage, which appears in the browser tab.
4. <body>: Contains the visible content of the webpage. Here you can include text,
images, links, forms, and other HTML elements.

This is the bare-bones template for any HTML document. You can expand it by adding more
elements like headings (<h2>, <h3>), paragraphs (<p>), images (<img>), links (<a>), and
more, depending on the needs of your webpage.

2. In HTML, lists and tables are commonly used elements to display structured data. Here's
how you can create both:

1. Lists in HTML

There are three types of lists in HTML: unordered lists, ordered lists, and definition lists.
Unordered List (<ul>)

An unordered list is used to display a list of items without a specific order. It uses bullet
points by default.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

 <ul>: Starts the unordered list.


 <li>: Defines each list item.

Ordered List (<ol>)

An ordered list is used when the order of the items matters (e.g., steps in a process). It is
numbered by default.

<ol>
<li>Step 1: Open the browser.</li>
<li>Step 2: Go to the website.</li>
<li>Step 3: Click the "Start" button.</li>
</ol>

 <ol>: Starts the ordered list.


 <li>: Defines each ordered list item.

Definition List (<dl>)

A definition list is used for terms and their descriptions, typically seen in a glossary.

<dl>
<dt>HTML</dt>
<dd>A markup language used for creating web pages.</dd>

<dt>CSS</dt>
<dd>A language used to style HTML elements.</dd>
</dl>

 <dl>: Starts the definition list.


 <dt>: Defines a term (Definition Term).
 <dd>: Provides the description or definition of the term.

2. Tables in HTML

Tables are used to display data in a structured, grid-like format. They consist of rows and
columns.

Basic Table Structure


<table>
<caption>Student Information</caption>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>15</td>
<td>A</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>16</td>
<td>B</td>
</tr>
</tbody>
</table>

 <table>: Starts the table.


 <caption>: Provides a title or label for the table (optional).
 <thead>: Contains the header row(s) of the table.
 <tr>: Defines a table row.
 <th>: Defines a table header cell (usually bold and centered).
 <tbody>: Contains the body of the table (the actual data).
 <td>: Defines a table data cell.

Explanation:

 <thead>: This section contains the table headers (like column titles).
 <tbody>: Contains the table body, which holds the actual data.
 <th>: Defines a header cell (typically bolded and centered).
 <td>: Defines a standard data cell.

Table with Borders:

If you want to add borders around your table cells, you can use the border attribute in the
<table> tag (or use CSS for more control):

<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>15</td>
<td>A</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>16</td>
<td>B</td>
</tr>
</tbody>
</table>

Summary:

 Unordered List (<ul>): Displays a list without any specific order (bullets).
 Ordered List (<ol>): Displays a list with a specific order (numbered).
 Definition List (<dl>): Displays terms and their definitions.
 Table (<table>): Displays data in rows and columns, with optional header and footer
sections.

You can style these elements with CSS to enhance their appearance, and use JavaScript to
interact with the content dynamically.

LINK AND IMAGES IN HTML

In HTML, links and images are essential elements for navigation and displaying media
content on a webpage. Below are the basic ways to use them:

1. Links in HTML (<a> tag)

The <a> tag is used to create hyperlinks, allowing users to navigate to other pages or
resources.

Basic Link
<a href="https://www.example.com">Click here to visit Example</a>

 <a>: Defines the anchor tag (hyperlink).


 href: Specifies the destination URL of the link.
 The text between the opening <a> and closing </a> tags is what the user clicks.

Opening Link in a New Tab

To open the link in a new browser tab or window, use the target="_blank" attribute:

<a href="https://www.example.com" target="_blank">Visit Example in a new


tab</a>
Link to an Anchor within the Same Page

You can link to a specific part of the same page using an anchor link.

<a href="#section1">Go to Section 1</a>


<!-- Later in the page -->
<h2 id="section1">Section 1</h2>
<p>This is the first section of the page.</p>

 id: The element you want to link to must have an id attribute.


 href="#id": The href attribute links to the element with the corresponding id.

2. Images in HTML (<img> tag)

The <img> tag is used to embed images into a webpage. It does not have a closing tag.

Basic Image
<img src="image.jpg" alt="Description of the image">

 <img>: Defines an image element.


 src: Specifies the path to the image file. This can be a relative or absolute URL.
 alt: Provides alternative text for the image (important for accessibility and SEO). This text
will be displayed if the image cannot be loaded.

Image with Specific Width and Height

You can set the width and height of an image using the width and height attributes, or
through CSS.

<img src="image.jpg" alt="Description" width="300" height="200">

Alternatively, you can use CSS for better control:

<img src="image.jpg" alt="Description" style="width: 300px; height:


200px;">
Image as a Link

You can use an image as a clickable link by wrapping the <img> tag inside an <a> tag.

<a href="https://www.example.com">
<img src="image.jpg" alt="Click to visit Example">
</a>

This creates a clickable image that navigates to https://www.example.com.

Image from an External URL

If the image is hosted externally, use the full URL in the src attribute:

<img src="https://www.example.com/path/to/image.jpg" alt="External Image">

Additional Image Attributes


 title: Adds a tooltip that appears when the user hovers over the image.
 <img src="image.jpg" alt="Description" title="Hover over the image">

 loading="lazy": Enables lazy loading for images, meaning the image will load only
when it is about to appear on the screen (useful for performance optimization).
 <img src="image.jpg" alt="Lazy loaded image" loading="lazy">

Example of Links and Images Together


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Links and Images</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>

<!-- Image as a link -->


<p>Click the image to visit Example:</p>
<a href="https://www.example.com" target="_blank">
<img src="example-logo.jpg" alt="Example Logo" width="200"
height="100">
</a>

<!-- Regular link -->


<p>Visit <a href="https://www.example.com">Example</a> for more
information.</p>

<!-- Anchor link to another section on the same page -->


<p><a href="#about">Go to About Section</a></p>

<h2 id="about">About Section</h2>


<p>This is the About section of the page.</p>
</body>
</html>

Summary:

 Links (<a>): Use the href attribute to define the destination URL. You can also use
target="_blank" to open links in a new tab or use anchor links (#id) to link within the
same page.
 Images (<img>): Use the src attribute to define the image source and the alt attribute for
accessibility. You can control the image size with width and height attributes or CSS.

These are basic examples, but links and images are powerful tools that can be enhanced with
CSS and JavaScript for interactive and responsive web designs.

You might also like