Advanced IT (ADIT) - HTML, Web Technologies & IT Fundamentals

January 15, 2024

Advanced Information Technology (ADIT)

Course Overview

Advanced Information Technology (ADIT) is a foundational course that introduces students to modern web technologies and IT concepts. This course covers HTML basics, web development fundamentals, internet protocols, and practical application development.

Introduction
HTML Fundamentals
Web Technologies
Practical Applications
Assignments & Resources

Introduction

What is Information Technology?

Information Technology (IT) encompasses the use of computers and software to manage, store, and transmit information. In today's digital world, IT skills are essential for almost every industry.

Key IT Areas:

Web Development: Building websites and web applications
Software Development: Creating applications and systems
Database Management: Organizing and managing data
Networking: Connecting computers and systems
Cybersecurity: Protecting systems from threats
Cloud Computing: Using remote servers for computing resources

Course Objectives

By the end of this ADIT course, students will understand:

How the Internet and World Wide Web work
HTML structure and semantic markup
Web forms and user interaction
Best practices in web development
Basic IT infrastructure and networking concepts
How to create accessible, standards-compliant web pages

HTML Fundamentals

What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It provides the structure and content of websites.

Key Points:

Markup Language: Uses tags to describe content structure
Not a Programming Language: HTML doesn't have logic like Python or Java
Client-side: Processed by web browsers
Standards-based: Follows W3C (World Wide Web Consortium) standards

HTML Document Structure

Every HTML document has a standard structure:

<!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>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Explanation:

<!DOCTYPE html>: Declares this is HTML5
<html>: Root element containing all content
<head>: Contains metadata, title, and links
<meta charset="UTF-8">: Character encoding
<meta viewport>: Makes page responsive on mobile
<title>: Browser tab and search result title
<body>: Contains visible page content

HTML Tags and Attributes

What are Tags?

Tags are code snippets that tell browsers how to display content. They use angle brackets < >.

Basic Tag Structure:

<tagname>content</tagname>

Self-closing Tags (no content):

<img src="image.jpg" alt="Description">
<br>
<hr>

Most Important HTML Tags

Headings and Text:

<h1>Largest Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
...
<h6>Smallest Heading</h6>

<p>This is a paragraph of text.</p>
<strong>Bold text for emphasis</strong>
<em>Italic text for emphasis</em>
<code>code_example()</code>

Lists:

<!-- Unordered list (bullets) -->
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

<!-- Ordered list (numbers) -->
<ol>
  <li>First step</li>
  <li>Second step</li>
</ol>

Links and Images:

<!-- Hyperlinks -->
<a href="https://example.com">Click here</a>
<a href="/page.html">Internal link</a>

<!-- Images -->
<img src="photo.jpg" alt="Description of image" width="300" height="200">

Semantic Elements (HTML5):

<header>Page header with logo/navigation</header>
<nav>Navigation links</nav>
<main>Main content area</main>
<article>Blog post or article</article>
<section>Thematic grouping of content</section>
<aside>Sidebar content</aside>
<footer>Page footer</footer>

What are Attributes?

Attributes provide additional information about HTML elements. They modify how elements behave or appear.

Common Attributes:

<!-- id: unique identifier within page -->
<div id="header">Page header</div>

<!-- class: reusable CSS classification -->
<p class="highlight">Important text</p>

<!-- style: inline CSS styling -->
<h1 style="color: blue; font-size: 2em;">Title</h1>

<!-- data-*: custom data attributes -->
<div data-product-id="12345">Product</div>

<!-- href: hyperlink target -->
<a href="/contact">Contact Us</a>

<!-- src: image/script source -->
<img src="logo.png">

<!-- alt: alternative text for images -->
<img src="photo.jpg" alt="Family photo from 2024">

<!-- disabled: disable form elements -->
<button disabled>Cannot click</button>

<!-- required: mark form field as mandatory -->
<input type="email" required>

<!-- placeholder: hint text in input -->
<input type="text" placeholder="Enter your name">

<!-- title: tooltip text -->
<button title="Click to save">Save</button>

Attribute Syntax Rules:

Always use lowercase attribute names
Always quote attribute values: href="page.html" (not href=page.html)
Multiple attributes separated by spaces

HTML Forms

Form Basics

HTML forms collect user input and send it to servers for processing.

Form Structure:

<form method="POST" action="/submit-form">
  <!-- Form fields here -->
  <button type="submit">Submit</button>
</form>

Key Attributes:

method="GET": Data visible in URL (use for search)
method="POST": Data hidden in request body (use for sensitive data)
action="/path": Server endpoint to process form

Form Elements

Text Input

<!-- Single-line text -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<!-- Email validation -->
<input type="email" id="email" name="email" required>

<!-- Password (hidden text) -->
<input type="password" id="pwd" name="password">

<!-- Number input -->
<input type="number" id="age" name="age" min="18" max="120">

<!-- Date picker -->
<input type="date" id="dob" name="date-of-birth">

Text Area

<!-- Multi-line text input -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

Selection Elements

<!-- Dropdown list -->
<label for="country">Country:</label>
<select id="country" name="country">
  <option value="">Select a country</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
</select>

<!-- Radio buttons (choose one) -->
<fieldset>
  <legend>Gender:</legend>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label>
  
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label>
</fieldset>

<!-- Checkboxes (choose multiple) -->
<fieldset>
  <legend>Interests:</legend>
  <input type="checkbox" id="sports" name="interests" value="sports">
  <label for="sports">Sports</label>
  
  <input type="checkbox" id="music" name="interests" value="music">
  <label for="music">Music</label>
</fieldset>

Complete Form Example

<form method="POST" action="/register">
  
  <fieldset>
    <legend>Personal Information</legend>
    
    <label for="fullname">Full Name:</label>
    <input type="text" id="fullname" name="fullname" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="phone">Phone Number:</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>
  
  <fieldset>
    <legend>Address</legend>
    
    <label for="street">Street:</label>
    <input type="text" id="street" name="street">
    
    <label for="city">City:</label>
    <input type="text" id="city" name="city">
    
    <label for="country">Country:</label>
    <select id="country" name="country">
      <option value="">Choose a country</option>
      <option value="in">India</option>
      <option value="us">USA</option>
    </select>
  </fieldset>
  
  <fieldset>
    <legend>Preferences</legend>
    
    <input type="checkbox" id="newsletter" name="newsletter">
    <label for="newsletter">Subscribe to newsletter</label>
    
    <input type="radio" id="news" name="contact" value="news">
    <label for="news">Contact via email</label>
    
    <input type="radio" id="phone_contact" name="contact" value="phone">
    <label for="phone_contact">Contact via phone</label>
  </fieldset>
  
  <button type="submit">Register</button>
  <button type="reset">Clear Form</button>
  
</form>

Web Technologies

HTTP Protocol

HTTP (HyperText Transfer Protocol) is the protocol used for transferring web pages.

How HTTP Works:

1. Client (browser) sends REQUEST to server
2. Server processes request and sends RESPONSE back
3. Browser renders HTML, CSS, JavaScript

HTTP Methods (Common):

GET    - Request data (used in forms, links, search)
POST   - Send data (used in forms, file uploads)
PUT    - Update entire resource
DELETE - Remove resource

HTTP Status Codes:

200 OK              - Request successful
301 Moved          - Permanent redirect
404 Not Found      - Resource doesn't exist
500 Server Error   - Server problem
503 Service        - Server temporarily unavailable

CSS Basics

CSS (Cascading Style Sheets) controls how HTML elements look.

Three Ways to Add CSS:

Inline CSS (in HTML tag):

<p style="color: red; font-size: 18px;">Styled text</p>

Internal CSS (in head section):

<head>
  <style>
    h1 { color: blue; }
    p { font-size: 14px; }
  </style>
</head>

External CSS (separate file):

<head>
  <link rel="stylesheet" href="style.css">
</head>

Common CSS Properties:

/* Text styling */
color: red;                    /* Text color */
font-size: 16px;              /* Text size */
font-family: Arial, sans-serif;/* Font type */
text-align: center;           /* Alignment */
font-weight: bold;            /* Bold */

/* Box model */
margin: 20px;                 /* Space outside */
padding: 10px;                /* Space inside */
border: 1px solid black;      /* Border */
width: 100%;                  /* Width */
height: 200px;                /* Height */

/* Background */
background-color: #f0f0f0;    /* Background color */
background-image: url('bg.jpg');

/* Display */
display: block;               /* Block element */
display: inline;              /* Inline element */
display: flex;                /* Flexible layout */

JavaScript Introduction

JavaScript adds interactivity to websites. It runs in the browser.

Basic JavaScript Example:

<button onclick="sayHello()">Click Me</button>

<script>
function sayHello() {
  alert('Hello, World!');
}
</script>

Common JavaScript Uses:

Form validation (check email format before sending)
Animations and effects
Responsive menu toggling
Real-time data updates
Game development

Semantic HTML

Semantic HTML uses meaningful element names that describe content purpose.

Why Semantics Matter:

Accessibility: Screen readers understand content structure
SEO: Search engines better understand page content
Maintainability: Easier to read and modify code
Mobile: Better rendering on different devices

Semantic Elements:

<header>
  <h1>Site Title</h1>
</header>

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

<main>
  <article>
    <h2>Blog Post Title</h2>
    <p>Publication date: 2024-01-15</p>
    <p>Article content here...</p>
  </article>
  
  <aside>
    <h3>Related Links</h3>
    <ul>
      <li><a href="/post1">Related Post 1</a></li>
      <li><a href="/post2">Related Post 2</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>&copy; 2024 My Website. All rights reserved.</p>
</footer>

Practical Applications

Real-World Web Page Structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn web development with our comprehensive guides">
    <meta name="keywords" content="HTML, CSS, JavaScript, Web Development">
    <title>Web Development Tutorial</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>My Educational Website</h1>
      <p>Learn web development from basics to advanced</p>
    </header>
    
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/courses">Courses</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
    
    <main>
      <section class="intro">
        <h2>Getting Started with Web Development</h2>
        <p>Web development involves HTML, CSS, and JavaScript working together...</p>
      </section>
      
      <section class="courses">
        <h2>Featured Courses</h2>
        <article class="course">
          <h3>HTML Basics</h3>
          <p>Learn fundamental HTML concepts</p>
          <a href="/html-basics">Start Course</a>
        </article>
      </section>
    </main>
    
    <footer>
      <p>&copy; 2024. All rights reserved.</p>
      <p><a href="/privacy">Privacy Policy</a> | <a href="/terms">Terms of Service</a></p>
    </footer>
    
    <script src="script.js"></script>
  </body>
</html>

Accessibility Best Practices

Use Semantic HTML: Helps assistive technologies understand structure
Add Alt Text to Images: <img alt="Descriptive text">
Use ARIA Labels: For complex components
Keyboard Navigation: All features accessible via keyboard
Color Contrast: Text readable against background
Focus Indicators: Show which element is selected

Key Concepts Summary

HTML Elements:

Block: Take full width (paragraphs, headings, divs)
Inline: Take only needed width (links, spans)
Inline-Block: Can set width but flow inline

Form Data:

GET requests expose data in URL (password)
POST requests hide data in request body (secure)
Always validate data on server side

Web Standards:

Follow W3C recommendations
Test across browsers
Build accessible websites (WCAG guidelines)
Optimize for mobile (responsive design)

Common Mistakes to Avoid

Forgetting to close tags: <p>Text should be <p>Text</p>
Not using alt text on images: Breaks accessibility
Relying only on color: Not accessible for color-blind users
Hardcoding measurements: Use relative units (%, em) for flexibility
Not validating forms: Apply validation both client and server-side
Excessive nesting: Keep HTML structure simple
Using deprecated tags: Use modern semantic HTML

Assignments & Resources

Study Materials

Download PDF of Unit 1 - Introduction to IT and HTML Basics

Download PDF of Unit 2 - Web Forms and Applications

Download Assignment 3 - Create Your First Web Page

Practice Assignments

Assignment 1: Your First HTML Page Create an HTML document with:

Proper document structure (DOCTYPE, html, head, body)
A header with site title
Navigation menu
Main content section with 3 paragraphs
Footer with copyright

Assignment 2: Create a Contact Form Build a form with:

Text fields (name, email, phone)
Dropdown (subject: Sales, Support, General)
Text area (message)
Checkboxes (subscribe to newsletter, contact me)
Submit and Reset buttons

Assignment 3: Semantic HTML Redesign Take an existing website and rewrite it using semantic HTML elements (header, nav, main, article, aside, footer)

Glossary

Attribute: Additional information about an HTML element CSS: Cascading Style Sheets - controls styling DOM: Document Object Model - tree structure of HTML HTML: HyperText Markup Language - structure language HTTP: Protocol for web communication JavaScript: Programming language for client-side interactivity Tag: HTML code that structures content Validation: Checking form data is correct and complete Web Browser: Application that displays web pages (Chrome, Firefox, Safari) Web Server: Computer that hosts and serves web pages

About This Content

This comprehensive ADIT guide combines theoretical concepts with practical examples to make web technology accessible to beginners. Whether you're starting your IT career or enhancing existing skills, this content provides the foundation for modern web development.

Content includes:

Complete HTML reference with code examples
Form handling and validation techniques
Best practices for semantic and accessible HTML
Real-world practical applications
Common mistakes and how to avoid them

Last Updated: January 2024