Scribd
Upload
28 views15 pages

Webdev

hehe

Uploaded by

Maasma Zari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views15 pages

Webdev

hehe

Uploaded by

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

Task 1

26-July-24
WebDev
Maasma Zari
HTML Basics
Web Development Basics
HTML (HyperText Markup Language)
HTML is the fundamental language used to structure and format web
pages. It defines the layout and content of a webpage through elements
known as tags.

HTML Tags
HTML tags are the building blocks of web pages, defining the structure
and content.Tags are containers used to enclose content or other tags.

DOCTYPE: Specifies the HTML version (HTML5 in this case).


<!DOCTYPE html>

HTML Element: The root element that contains all other elements.

Head Element: Contains metadata, such as the page title.


<title>My Website</title>

Body Element: Contains the main content that is displayed on the page.
<body> <!-- Visible content goes here --> </body>

Self-Closing Tags: Some tags are self-closing, e.g., <br> for line breaks.

Comments: Written as <!-- Comment --> and are not displayed on the
page.

Case Sensitivity: HTML is not case-sensitive.


Attributes provide additional information about HTML elements.

Heading Tags: <h1> to <h6>, with <h1> being the most important.

REPORT TITLE 2
Heading tags in HTML (<h1> to <h6>) are used to define headings and
subheadings on a web page. They create a hierarchy of importance and
structure for content:

<h1>My Self </h1>


<h2>About Us</h2>
<h3>Our History</h3>
<h4>Founding Years</h4>
<h5>Early Challenges</h5>
<h6>First Major Project</h6>

Paragraph Tag: <p>This is a sample paragraph</p>.


The <p> tag in HTML is used to define a paragraph. It wraps text and
other inline elements to create a block of text with appropriate spacing
before and after. It helps structure and format text content within a web
page.
Anchor Tag: <a href="https://google.com">Google</a> for links.

 HTML Anchor Tag and target Attribute


The anchor tag <a> in HTML is used to create hyperlinks, which
allow users to navigate to other web pages, documents, or specific parts of
the same document. The target attribute of the <a> tag specifies where to
open the linked document.

Basic Structure
<a href="URL" target="value">Link Text</a>

target Attribute Values


1. _self (Default)
o Description: Opens the linked document in the same frame or

window as the link.


o Example:

REPORT TITLE 3
<a href="URL of any page " target="_self">Visit Example (Self)</a>
oUse Case: Useful for navigating within the same context or
page.
2. _parent
o Description: Opens the linked document in the parent frame, if

the current frame is nested inside another.


o Example:

<a href=" URL of any page " target="_parent">Visit Example


(Parent)</a>
o Use Case: Useful when you have an iframe within another
iframe and want to open the link in the parent frame.
3. _top
o Description: Opens the linked document in the full browser
window, breaking out of all frames.
o Example:
<a href=" URL of any page " target="_top">Visit Example
(Top)</a>
o Use Case: Useful to ensure the link opens in the full browser
window, especially if nested within multiple frames.
 Image Tag in HTML (<img>)
<img src="/image.png" alt="Random Image">.
The <img> tag is used to embed images in an HTML document. It is a
self-closing tag, meaning it does not require a closing tag. Key attributes
include src and alt.
Attributes:
 src (Source): Specifies the path to the image file. Can be a relative
path or an absolute URL.

REPORT TITLE 4
 alt (Alternative Text): Provides a textual description of the image
for accessibility and SEO. Displayed if the image cannot load.
Example Usage:
<img src="/path/to/image.jpg" alt="Description of the image">
Additional Attributes:
 width and height: Define the dimensions of the image in pixels.
 title: Provides additional information, displayed as a tooltip on hover.

Line Break Tag: <br>.


Text Formatting Tags:

Bold: <b>Bold</b>.
Italic: <i>Italic</i>.
Underline: <u>Underline</u>.
Big & Small Text: <big>Big</big>, <small>Small</small>.

Page Layout Techniques


Use semantic tags for better structure and accessibility.
 <header> Tag

Defines the introductory content or navigational links at the top of a page


or section.
Usage:
<header>
<h1>Site Title</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
</header>

REPORT TITLE 5
 <main> Tag
Encapsulates the main content of the document, excluding headers,
footers, and sidebars.
Usage:
<main>
<h2>Main Content</h2>
<p>This is the primary content area of the page.</p>
</main>

 <footer> Tag
Defines the footer for a page or section, typically containing contact
information, copyright, or additional links.
Usage:
<footer>
<p>&copy; 2024 My Website. All rights reserved.</p>
<a href="#contact">Contact Us</a>
</footer>

 <section> Tag: Grouping Content


The <section> tag is used to group related content into a thematic section.
It helps in organizing the document into distinct areas, typically with a
heading.
Key Points:
 Purpose: To define a section of content, often with a heading.
 Usage: Ideal for grouping content that shares a common theme or
topic.

REPORT TITLE 6
Example Usage:
<section>
<h2>Section Title</h2>
<p>Content related to the section.</p>
</section>
 <article> Tag: Standalone Content

The <article> tag represents a self-contained piece of content that can be


distributed or reused independently. It is suitable for blog posts, news
articles, or similar standalone content.
Key Points:
 Purpose: To encapsulate content that makes sense on its own, even
when extracted from the rest of the document.
 Usage: Best for content like news articles, blog posts, and forum
posts.
Example Usage:
<article>
<h1>Article Title</h1>
<p>Article content goes here.</p>
</article>
 <aside> Tag: Related Content

The <aside> tag is used for content that is tangentially related to the main
content, such as sidebars, pull quotes, or advertisements. It often provides
supplementary information.
Key Points:
 Purpose: To include content aside from the main content, often used
for secondary information.
 Usage: Ideal for sidebars, additional information, or ads.

REPORT TITLE 7
Example Usage:
<aside>
<h2>Related Information</h2>
<p>Additional content like advertisements or related links.</p>
</aside>
 Anchor Tag with Images

The <a> (anchor) tag can be used with the <img> tag to make images
clickable, linking to other pages or resources.
Key Points:
 Purpose: To create clickable images that function as hyperlinks.
 Usage: Wrap the <img> tag with an <a> tag to turn the image into a
clickable link.
Example Usage:
<a href="https://example.com">
<img src="/path/to/image.jpg" alt="Clickable Image">
</a>
Attributes:
 href: Specifies the URL to navigate to when the image is clicked.
 alt: Provides alternative text for the image.

 <div> Tag: Block-Level Container


The <div> tag is a block-level container used to group other HTML
elements. It is commonly used for layout purposes and to apply CSS styles
or JavaScript functions to a section of the page.
Key Points:
 Block-Level Element: Takes up the full width available and starts on
a new line.

REPORT TITLE 8
 Usage: Typically used for grouping content and applying styles or
scripts.
Example Usage:
<div class="container">
<h2>Section Title</h2>
<p>Content goes here.</p>
</div>
Best Practices:
 Use <div> for logical grouping of content and layout sections.
 Combine with CSS classes or IDs to style or target specific sections.

 <span> Tag: Inline Container


The <span> tag is an inline container used to group text or other inline
elements. It does not affect the flow of content and is often used for
styling or applying scripts to a portion of text.
Key Points:
 Inline Element: Does not start on a new line and only takes up as
much width as necessary.
 Usage: Ideal for styling small sections of text or inline elements.
Example Usage:
<p>This is <span class="highlight">highlighted text</span> in a
paragraph.</p>
Best Practices:
 Use <span> for inline grouping and styling within block-level
elements.
 Combine with CSS classes or IDs for styling or scripting purposes.

REPORT TITLE 9
 Unordered List (<ul>)
The <ul> tag creates an unordered (bulleted) list. It is used to group items
that do not require a specific order.
Structure:
 <ul>: The container for the list.
 <li>: List item, used within the <ul> container.
Example Usage:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Best Practices:
 Use <ul> for lists where the order of items is not important.
 Ensure each item is enclosed in an <li> tag for proper formatting.

 <caption> Tag: Table Caption


The <caption> tag provides a title or description for a table, helping users
understand the purpose or content of the table. It is placed immediately
after the <table> tag and before any other table elements.
Key Points:
 Purpose: Describes the table's content.
 Placement: Directly after the <table> tag.
Example Usage:
<table>
<caption>Monthly Sales Report</caption>
<!-- Table content here -->
REPORT TITLE 10
</table>
Best Practices:
 Use <caption> to provide a clear and concise description of the
table’s content.
 Ensure the caption is brief and informative.

 <thead> and <tbody> Tags: Table Structure


The <thead> and <tbody> tags are used to organize and structure tables
into header and body sections, respectively. They improve readability and
help with styling and scripting.
<thead> Tag: Table Header
 Purpose: Contains the header row(s) of the table, which typically
include column names or labels.
 Placement: Before the <tbody> section.
Example Usage:
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<!-- Table body here -->
</table>
Best Practices:
 Use <thead> to define the header part of the table for consistency in
column headings.
 Helps with table styling and sorting scripts.

REPORT TITLE 11
<tbody> Tag: Table Body
 Purpose: Contains the main content of the table, consisting of data
rows.
 Placement: Follows the <thead> and precedes the <tfoot> (if
present).
Example Usage:
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
Best Practices:
 Use <tbody> to group the main data rows of the table.
 Ensures separation of headers, body, and footers for better table
organization and styling.

REPORT TITLE 12
 Forms in HTML
Forms are used to collect user input and submit data to a server. They are a
fundamental part of interactive web applications.
Basic Structure:
The <form> tag defines the start and end of a form. It contains various
input elements and attributes to specify how data is submitted.
<form action="/submit" method="post">
<!-- Form elements here -->
</form>
 action: Specifies the URL where the form data will be sent.
 method: Specifies the HTTP method (e.g., post, get) to use when
sending form data.
Input Elements:
The <input> tag is used for various types of user inputs. The type attribute
determines the kind of input field.
<input type="text" placeholder="Enter Name">
 type="text": Creates a single-line text input field.
 placeholder: Provides a hint to the user about what to enter.
Labels:
The <label> tag is used to define labels for form elements, improving
accessibility and usability.
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter Name">
 for: Associates the label with a specific form element by id.

REPORT TITLE 13
Checkboxes:
The <input> tag with type="checkbox" creates a checkbox input.
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>
 type="checkbox": Creates a checkbox.
 name: Identifies the checkbox in form submission.
Textareas:
The <textarea> tag is used for multi-line text input.
<textarea rows="4" cols="50" placeholder="Enter your
message"></textarea>
 rows: Specifies the number of visible text lines.
 cols: Specifies the width of the text area.

 Multimedia Elements
Multimedia elements include embedded videos and other media types,
enhancing the content on web pages.
Iframe:
The <iframe> tag embeds another HTML page within the current page.
<iframe src="https://example.com" width="600" height="400"></iframe>
 src: Specifies the URL of the page to embed.
 width and height: Define the dimensions of the iframe.
Video:
The <video> tag is used to embed video content on a webpage.
REPORT TITLE 14
<video src=" https://archive.org/details/Sample-Video-Mp4" controls>My
Video</video>
 src: Specifies the path to the video file.
 controls: Adds video controls like play, pause, and volume.
 Fallback Content: Text inside the <video> tag is displayed if the
browser does not support the video element.

REPORT TITLE 15

You might also like