Scribd
Upload
12 views9 pages

Notes - WEBDEV1

HTML (Hypertext Markup Language) is the standard language for creating web documents, providing structure and accessibility for web pages. It works in conjunction with CSS for styling and JavaScript for interactivity, forming the foundation of web development. The document outlines the basic structure of an HTML document, common tags, and best practices for writing clean and semantic HTML code.

Uploaded by

Fils Brobo
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
12 views9 pages

Notes - WEBDEV1

HTML (Hypertext Markup Language) is the standard language for creating web documents, providing structure and accessibility for web pages. It works in conjunction with CSS for styling and JavaScript for interactivity, forming the foundation of web development. The document outlines the basic structure of an HTML document, common tags, and best practices for writing clean and semantic HTML code.

Uploaded by

Fils Brobo
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/ 9

Introduction to HTML

What is HTML?

 HTML (Hypertext Markup Language) is the standard language


used to create and design documents on the World Wide Web.

 It provides the basic structure of web pages, which browsers then


render and display.

The Role of HTML in Web Development

 Structure: HTML defines the layout and structure of a web page using
elements such as headings, paragraphs, links, images, and more.

 Foundation: It serves as the foundation upon which CSS and


JavaScript build, providing style and interactivity.

 Accessibility: Proper HTML ensures web content is accessible to all


users, including those with disabilities, by providing semantic elements
and alt texts for screen readers.

How HTML Works with CSS and JavaScript

 CSS (Cascading Style Sheets): CSS is used to control the


appearance and layout of HTML elements. It separates content from
design, allowing developers to style multiple pages consistently.

 JavaScript: This scripting language adds interactivity and dynamic


content to web pages. JavaScript can manipulate HTML elements,
validate forms, create animations, and more.

Basic Structure of an HTML Document

The Basic Tags

An HTML document consists of a series of nested tags that define its


structure and content.

1. <!DOCTYPE html>

o Declares the document type and version of HTML being used. It


ensures that the browser interprets the document as an HTML5
document.
2. <html>

o The root element that wraps all other elements of an HTML


document.

o Contains the <head> and <body> sections.

3. <head>

o Contains meta-information about the document, such as the title,


character set, linked stylesheets, and scripts.

4. <title>

o Specifies the title of the document, which appears in the


browser's title bar or tab.

5. <body>

o Contains the actual content of the web page, such as text,


images, links, and other media.

Significance of Each Tag

 <!DOCTYPE html>: Ensures the document adheres to HTML5


standards.

 <html>: Acts as the container for all HTML content.

 <head>: Stores metadata and links to external resources.

 <title>: Provides the page title, crucial for SEO and usability.

 <body>: Displays content directly to the user.

Creating Your First HTML Page

Creating a Basic Webpage

1. Open a text editor (e.g., Notepad, Visual Studio Code).


2. Write the basic HTML structure

3. Save the file with a .html extension (e.g., index.html).

.html Extension

 Files saved with the .html extension are recognized by web


browsers as HTML documents.
 This extension is crucial for browsers to properly render and
display the content as a web page.

Exploring HTML Tags

Common HTML Tags

1. Headings (<h1> to <h6>)

o Define the headings of a page, with <h1> being the most


important and <h6> the least.

o Example: <h1>Main Title</h1>

2. Paragraphs (<p>)

o Define blocks of text.

o Example: <p>This is a paragraph.</p>

3. Anchors (<a>)

o Create hyperlinks to other pages or locations within a page.


o Example: <a href="https://example.com">Visit Example</a>

4. Images (<img>)

o Embed images into a webpage.

o Example: <img src="image.jpg" alt="Description of image">

5. Unordered Lists (<ul>)

o Create bulleted lists.

6. Ordered Lists (<ol>)

o Create numbered lists.

7. List Items (<li>)

o Define individual list items within <ul> or <ol>.

o Example: <li>List Item</li>

8. Divisions (<div>)

o Define sections or containers for grouping content.

o Example: <div class="container">Content goes here</div>

9. Spans (<span>)

o Inline container for text and other inline elements.

o Example: <span style="color: red;">Red Text</span>

The Use of Attributes in HTML Tags

Attributes provide additional information about HTML elements, often used


for styling, identification, or functionality.

Common attributes include:

 id: Unique identifier for an element.


 class: Specifies one or more class names for an element, allowing CSS
targeting.
 href: URL for a hyperlink in an <a> tag.
 src: Source URL for an image in an <img> tag.
 alt: Alternative text for images, important for accessibility and SEO.
 Example: <img src="logo.png" alt="Company Logo" class="logo">
Creating Links and Adding Images

Create Hyperlinks Using the <a> Tag

 Hyperlinks allow users to navigate between web pages or to different


sections within a page.

 Syntax:

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

 href attribute specifies the URL of the destination.

Embed Images Using the <img> Tag

 Images can enhance the visual appeal of a webpage.

 Syntax:

<img src="path/to/image.jpg" alt="Description of image">

 src attribute specifies the path to the image file.

 alt attribute provides alternative text for accessibility and SEO.

The Importance of Using Descriptive Alt Text for Images

 Accessibility: Screen readers use alt text to describe images to


visually impaired users.

 SEO: Search engines index alt text, improving search visibility.

 Fallback: If an image fails to load, the alt text provides context to the
user.

Advanced HTML Concepts and Best Practices

Structuring Content with Lists and Tables

The Difference Between Ordered and Unordered Lists

 Ordered Lists (<ol>):

o Use for sequential or ranked items.


o Example:

<ol>
<li>First Step</li>
<li>Second Step</li>
</ol>

 Unordered Lists (<ul>):

o Use for non-sequential items.

o Example:

<ul>
<li>Apple</li>
<li>Banana</li>
</ul>

The <table>, <tr>, <td>, and <th> Tags for Creating Tables

 Tables organize data into rows and columns.

 Tags:

o <table>: Container for the entire table.

o <tr>: Defines a table row.

o <td>: Defines a table cell.

o <th>: Defines a header cell.

 Example:

<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>

HTML Forms and Input Elements


Form Elements

Forms allow users to input and submit data to a server.

1. <form>

o Container for form elements.

o Attributes:

 action: URL where form data is sent.

 method: HTTP method (GET or POST) used to submit data.

o Example:

<form action="/submit" method="post">


<!-- Form elements go here -->
</form>
2. <input>

o Creates interactive controls in a form, such as text fields,


checkboxes, and buttons.

o Attributes:

 type: Specifies the type of input (e.g., text, password,


checkbox).

 name: Name of the input field for server identification.

 value: Default value of the input.

o Example:

<input type="text" name="username" placeholder="Enter your


username">

3. <label>

o Associates a label with an input element, improving accessibility.

o Example:

<label for="username">Username:</label>
<input type="text" id="username" name="username">
1. <textarea>

o Creates a multi-line text input field.

o Example:
<textarea name="comments" rows="4" cols="50">Enter
your comments here...</textarea>

2. <button>
o Creates a clickable button.
o Example:

<button type="submit">Submit</button>

The Importance of Form Validation and User Input Handling

Form Validation: Ensures that user input is complete and in the correct
format before submission.

Types of validation:

o Client-side: Performed in the browser using HTML5 attributes or


JavaScript.
o Server-side: Ensures data integrity and security on the server.

User Input Handling: Protects against malicious input (e.g., SQL injection,
XSS attacks) by sanitizing and validating data.

Validating HTML and Best Practices

Tools for Validating HTML Code

W3C Markup Validation Service: Checks HTML documents for


syntax errors and ensures they adhere to web standards.

o Accessible at validator.w3.org.

Best Practices for Writing Clean, Semantic HTML Code

 Use Semantic Tags: Use HTML5 elements like <header>,


<footer>, <article>, <section>, and <aside> to convey meaning
and improve accessibility.
 Write Readable Code: Use proper indentation and comments to
enhance code readability and maintainability.
 Optimize for Accessibility: Ensure all users, including those with
disabilities, can access and navigate your website.
 Keep Code DRY (Don't Repeat Yourself): Avoid redundancy by
reusing code components and leveraging CSS for styling.
 Minimize Inline Styles: Use external or internal CSS stylesheets
instead of inline styles for cleaner HTML.
 Validate Regularly: Use validation tools to catch errors and ensure
your code meets web standards.

You might also like