Scribd
Upload
10 views11 pages

Week 11

Uploaded by

Jangili Ajay
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
10 views11 pages

Week 11

Uploaded by

Jangili Ajay
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/ 11

WEEK 11 : Web Development Fundamentals HTML

What is Web Development?


Web development is the process of creating websites and web applications that are
accessible over the internet. It encompasses a variety of tasks and technologies, including:
 Client-Side Development: This refers to everything that users see and interact with in
their web browsers. It includes layout, design, and the functionality of a website.
 Server-Side Development: This involves the backend of a website, which includes
server configuration, database management, and application logic. Server-side
programming languages include PHP, Python, Ruby, and Node.js.
 Full-Stack Development: A full-stack developer is skilled in both client-side
and server-side development, allowing them to build complete web applications.
Importance of HTML
HTML (Hypertext Markup Language) is the standard markup language for creating web
pages. It provides the basic structure for web content and is essential for displaying text,
images, links, and other elements in a browser.
Key Features of HTML:
1. Markup Language: Unlike programming languages that use logic and algorithms,
HTML uses tags to define elements within a document. This makes it easier to
structure content.
2. Browser Compatibility: HTML is universally supported by all web browsers,
making it accessible across different platforms.
3. SEO Friendly: Proper use of HTML tags can improve search engine
optimization (SEO), helping websites rank better in search results.
4. Responsive Design: HTML can be combined with CSS (Cascading Style Sheets) to
create responsive designs that adapt to various screen sizes.

HTML Document Structure and Syntax


An HTML document has a specific structure that must be followed for it to be valid.
Understanding this structure is crucial for creating functional web pages.
Basic Structure of an HTML Document
1. DOCTYPE Declaration: This declaration defines the version of HTML being used.
For example:
xml
<!DOCTYPE html>
This tells the browser that the document is written in HTML5.
2. HTML Element: The root element that contains all other elements:
xml
<html lang="en">
3. Head Section: Contains metadata about the document, such as its title and links to
stylesheets or scripts:
xml
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
4. Body Section: Contains all the content that will be displayed on the webpage:
xml
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text.</p>
</body>
Example of a Complete HTML Document
Here’s an example of a simple HTML document:
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first web page created with HTML.</p>
</body>
</html>
Explanation of Each Component
 <!DOCTYPE html>: Declares that this document is an HTML5 document.
 <html lang="en">: The root element that specifies the language of the document as
English.
 <head> Section:
 <meta charset="UTF-8">: Ensures proper character encoding.
 <meta name="viewport" content="width=device-width, initial-scale=1.0">:
Makes the website responsive on different devices.
 <title>: Sets the title of the webpage that appears in the browser tab.
 <body> Section: Contains visible content like headings and paragraphs.

Essential HTML Tags and Elements


HTML consists of various tags and elements that define different types of content. Below are
some essential tags every web developer should know:
1. Headings
Headings are defined using <h1> to <h6> tags. They are used to create a hierarchy within
your content.
xml
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
Explanation:
 <h1> represents the most important heading (usually reserved for the title).
 <h2> is used for subheadings.
 <h3> through <h6> are used for further subdivisions.
2. Paragraphs
Paragraphs are created using the <p> tag:
xml
<p>This is a paragraph.</p>
Explanation:
The <p> tag automatically adds space before and after itself, making it ideal for
separating blocks of text.
3. Links
Links are created using the <a> tag with the href attribute specifying the destination URL:
xml
<a href="https://www.example.com">Visit Example.com</a>
Explanation:
 The href attribute specifies where the link points.
 The text between <a> tags is what users will click on.
4. Images
Images are included using the <img> tag with src (source) and alt (alternative text) attributes:
xml
<img src="image.jpg" alt="Description of image">
Explanation:
 src: Specifies the path to the image file.
 alt: Provides alternative text for screen readers or if the image fails to load.
5. Lists
HTML supports ordered (<ol>) and unordered lists (<ul>):
xml
<ul>
<li>First item</li>
<li>Second item</li>
</ul>

<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Explanation:
 <ul> creates an unordered list (bulleted).
 <ol> creates an ordered list (numbered).
 Each list item is defined with <li> tags.
6. Divisions
The <div> tag is used as a container for other elements. It helps in grouping content together:
xml
<div class="container">
<h2>Title Inside Div</h2>
<p>This paragraph is inside a div.</p>
</div>
Explanation:
The <div> element does not inherently represent anything; it simply groups elements
for styling or scripting purposes.
7. Spans
The <span> tag is used for inline grouping of text or other elements:
xml
<p>This is a <span style="color:red;">red text</span>.</p>
Explanation:
The <span> element can be styled without breaking the flow of text.

HTML Forms and Input Types


Forms are essential for collecting user input on websites. They are created
using the <form> tag, which can contain various input elements.
Example of a Basic Form
xml
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<input type="submit" value="Submit">


</form>
Explanation of Form Elements:
 <form action="/submit" method="post">: Specifies where to send form data
when submitted.
 <label for="">: Associates labels with input fields for better accessibility.
 Input Types:
 text: For single-line text input.
 email: For email addresses; validates format automatically.
 password: Masks input for sensitive information.
 <input type="submit">: Creates a button that submits the form.
Common Input Types
Input Type Description

text Single-line text input

email Input field for email addresses

password Input field for passwords (masked)

checkbox Allows users to select multiple options

radio Allows users to select one option from multiple choices

file Enables file uploads

date Input field for selecting dates

number Input field for numeric values

Example Using Various Input Types


xml
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="gender">Gender:</label><br/>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br/>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br/>

<label for="interests">Interests:</label><br/>
<input type="checkbox" id="coding" name="interests" value="coding">
<label for="coding">Coding</label><br/>

<input type="submit" value="Submit">


</form>
Explanation:
In this form:
 Users can enter their username.
 They can select their gender using radio buttons.
 They can choose interests using checkboxes.
This illustrates how forms can gather diverse types of data from users effectively.

HTML5 Semantic Elements


HTML5 introduced semantic elements that provide meaning to the structure of a webpage.
These elements help search engines and assistive technologies understand content better.
Key Semantic Elements
Element Description

<header> Represents introductory content or navigation links.

<footer> Defines footer content for its nearest sectioning element.

<article> Represents self-contained content that could be distributed independently (e.g., blog posts).

<section> Defines sections in a document, typically with headings.


Element Description

<nav> Contains navigation links.

<main> Represents the main content unique to the document.

Example Usage of Semantic Elements


xml
<header role="banner">
<h1>My Website Title</h1>
</header>

<nav role="navigation">
<ul aria-label="Main Navigation">
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</nav>

<main role="main">
<!-- Main Content -->
<article aria-labelledby='article-title'>
<!-- Using aria-labelledby to associate header with article -->
<header id='article-title'><h2>Article Title</h2></header>
<!-- Main Article Content -->
...
<!-- Footer -->
...
</article>
...
<!-- Additional Sections -->
...
...
</main>

<footer role='contentinfo'>
&copy; 2024 My Website
</footer>

Explanation:
In this example:
 The header contains site-wide information.
 The navigation section provides links to different parts of the site.
 The main section contains articles or primary content.
Using semantic elements improves SEO and accessibility by providing context
about different parts of your webpage.

Accessibility Basics and ARIA Roles


Accessibility in web development ensures that all users, including those with disabilities, can
access and interact with web content effectively.
Importance of Accessibility
Web accessibility involves designing websites that can be navigated and understood by
people with various disabilities (e.g., visual impairments, hearing loss). This
includes providing text alternatives for images, ensuring proper contrast ratios, and
making sure forms are usable with keyboard navigation.
Key Principles of Accessibility:
1. Perceivable: Information must be presented in ways users can perceive (e.g.,
providing alt text for images).
2. Operable: Users must be able to navigate and interact with all interface components
(e.g., keyboard navigation).
3. Understandable: Information must be clear and understandable (e.g.,
consistent navigation).
4. Robust: Content must be compatible with current and future user agents (e.g.,
browsers).

ARIA Roles
The Accessible Rich Internet Applications (ARIA) specification provides additional attributes
that can enhance accessibility by defining roles for UI components.
Common ARIA Roles
Role Description

role="navigation" Indicates navigation links within a webpage.

role="banner" Represents site-wide header information.

role="main" Identifies the main content area of a webpage.

role="contentinfo" Provides information about the parent document's footer.

Example Using ARIA Roles


xml
<header role='banner'>
&lt;!-- Header Content --&gt;
&lt;h1&gt;My Website Title&lt;/h1&gt;
</header>

<nav role='navigation'>
&lt;!-- Navigation Links --&gt;
&lt;ul aria-label='Main Navigation'&gt;
&lt;li&gt;&lt;a href='#home'&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='#services'&gt;Services&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='#contact'&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</nav>

<main role='main'>
&lt;!-- Main Content --&gt;

&lt;article aria-labelledby='article-title'&gt;
&lt;header id='article-title'&gt;&lt;h2&gt;Article Title&lt;/h2&gt;&lt;/header&gt;
&lt;p&gt;This article discusses...&lt;/p&gt;
&lt;footer&gt;Published on October 19, 2024&lt;/footer&gt;
&lt;/article&gt;

</main>

<footer role='contentinfo'>
&copy; 2024 My Website
</footer>

Explanation:
In this example:
 The header uses ARIA roles to define its purpose clearly.
 Navigation links are easily identified by screen readers due to their specified roles.
Using ARIA roles enhances accessibility by providing additional context about elements on
your page.
Conclusion
Understanding HTML is fundamental for anyone interested in web development. By
mastering its structure, essential tags, forms, semantic elements, and accessibility practices,
you can create effective and user-friendly websites.This overview has
provided foundational knowledge about HTML necessary for building modern web
applications while emphasizing best practices in accessibility to ensure inclusivity across
diverse user groups.As you continue your journey in web development:
1. Explore CSS (Cascading Style Sheets) to style your webpages effectively.
2. Learn JavaScript to add interactivity and dynamic features.
3. Consider frameworks like Bootstrap or libraries like React.js to enhance your
development skills further.
By combining these skills with your understanding of HTML, you'll be well-equipped
to create dynamic and engaging

You might also like