Introduction & HTML Basics
INFO 153A/253A: Front End Web Architecture
Kay Ashaolu
Introduction
Introduction to Front-End Web Architecture
-
What is Front-End Web Architecture?
- The client side of web applications
- Defines the structure, style, and behavior of web pages
-
Key Components:
- HTML: Structure and content of web pages
- CSS: Visual styling and layout
- JavaScript: Interactivity and dynamic behavior
-
Why is Web Architecture Important?
- Ensures scalability and maintainability
- Improves user experience and performance
- Adapts to various devices (desktop, mobile, tablet)z
HTML: The Structure of the Web
-
What is HTML?
- Hypertext Markup Language (HTML)
- Defines the structure of web pages
- Elements, Tags, and Attributes
-
Key Concepts:
-
Elements: Basic building blocks of HTML (e.g.,
<h1>
,<p>
,<a>
) -
Attributes: Provide additional information (e.g.,
class
,id
,href
)
-
Elements: Basic building blocks of HTML (e.g.,
HTML: The Structure of the Web
-
Semantic HTML:
- Use of meaningful tags (
<header>
,<nav>
,<section>
) - Improves accessibility and SEO
- Use of meaningful tags (
<html>
<head>
<title>Example Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example of a simple HTML structure.</p>
</body>
</html>
CSS – Styling and Responsive Design
-
What is CSS?
- Cascading Style Sheets (CSS)
- Controls the look and feel of a web page
-
Core Concepts:
-
Selectors: Targeting HTML elements (e.g.,
#id
,.class
) -
Properties and Values: Define the style (e.g.,
color: blue;
, ) - Box Model: Content, padding, border, margin
-
Selectors: Targeting HTML elements (e.g.,
CSS – Styling and Responsive Design
- Responsive Design:
- Fluid Grids: Flexible layouts using percentages
- Media Queries: Adapt layout to different screen sizes
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
JavaScript – Adding Interactivity
-
What is JavaScript?
- A programming language that adds interactivity to web pages
-
Key Features:
- DOM Manipulation: Change HTML content and styles dynamically
- Event Handling: Respond to user actions (e.g., clicks, form submissions)
JavaScript – Adding Interactivity
<button onclick="toggleText()">Click me</button>
<p id="demo">Hello World</p>
<script>
function toggleText() {
var x = document.getElementById("demo");
if (x.innerHTML === "Hello World") {
x.innerHTML = "You clicked!";
} else {
x.innerHTML = "Hello World";
}
}
</script>
Uses of JavaScript:
- Validating forms
- Animating elements
- Creating dynamic user interfaces
Example: Toggle Button Text
The Web Request-Response Cycle
Basic Process:
-
Step 1: User enters a URL (e.g.,
www.example.com
) - Step 2: Browser sends a DNS request to resolve the domain to an IP address
- Step 3: Browser sends an HTTP/HTTPS request to the server
- Step 4: Server responds with HTML, CSS, JavaScript, and other assets
- Step 5: Browser renders the webpage
The Web Request-Response Cycle
Key Concepts:
- DNS (Domain Name System): Resolves domain names to IP addresses
- HTTP/HTTPS: Protocols for web communication (HTTPS is secure)
- Web Server: Hosts and serves web content (e.g., Apache, Nginx)
HTML Basics
HTML Fundamentals & Structure
HTML Definition:
- HTML is the standard language used to create web pages.
- HTML5 is the latest version, introducing new features and APIs for enhanced functionality.
Basic Structure:
-
Tags: Core HTML tags like
<html>
,<head>
, and<body>
. -
Attributes: Add properties to elements (e.g.,
class
,id
). - Purpose: Provides structure to web content, organizing headers, paragraphs, images, and links for accessibility and clarity.
Essential HTML Elements
Headings and Text:
-
Headings (
<h1>
to<h6>
): Define content hierarchy.<h1>
is the most important,<h6>
is the least. -
Paragraphs (
<p>
): Used for text content blocks.
Lists and Links:
-
Ordered Lists (
<ol>
): Numbered lists. -
Unordered Lists (
<ul>
): Bulleted lists. -
Links (
<a href="URL">
): Create clickable links to other web pages or resources.
Creating and Viewing HTML Pages
HTML File Setup:
- Use
index.html
for the homepage. - Organize files in a structured way for easier management.
Sandbox Environment:
- Test HTML elements in separate files, such as
forms.html
ortables.html
.
Opening Files in Browsers:
Use browsers like Chrome or Firefox to view HTML files. Understand the difference between local file paths (file:///
) and URLs (http://
).
Tags, Attributes, and Document Structure
Tags and Attributes:
-
Opening and Closing Tags: Most tags require opening and closing (e.g.,
<p>text</p>
), except for self-closing ones like<img>
. -
Attributes: Provide additional details, e.g.,
src
for images andhref
for links.
Document Structure:
-
Doctype:
<!DOCTYPE html>
indicates the document is HTML5. -
<html>
,<head>
,<body>
: Form the essential structure of an HTML document.
Setting Up Development Enviornment
- Text Editors: Use VSCode for efficient HTML development, with extensions like Live Server for real-time updates.
- Emmet: A tool for speeding up HTML writing.
Semantic HTML
- Use semantic tags like
<header>
,<footer>
, and<article>
for accessibility and SEO, which helps browsers and screen readers understand content better.
Sample HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>This is a sample paragraph about me.</p>
</section>
<footer>
<p>© 2024 My Web Page</p>
</footer>
</body>
</html>
HTML Forms
HTML Forms
-
Purpose of Forms:
- Forms allow users to interact with web applications by submitting data.
- HTML & CSS handle the visual layout; server-side languages (PHP, Python, etc.) handle form processing.
-
Form Submission Workflow:
- Client-Side: Form structure and display with HTML & CSS.
- Server-Side: Data processing using backend logic.
Form Structure and Key Elements
-
Basic Form Structure:
-
<form>
wraps input elements. -
action
: The URL where the form data is sent (e.g.,/submit
). -
method
: Defines how data is sent, eitherGET
orPOST
.
-
Form Structure and Key Elements
-
Common Input Types:
-
Text Input:
<input type="text">
for simple text. -
Email Input:
<input type="email">
for email with validation. -
Textarea:
<textarea></textarea>
for multi-line input. -
Select Dropdown:
<select><option>Option</option></select>
for a list of choices.
-
Text Input:
Input Validation & Advanced Input Types
-
HTML5 Built-In Validation:
-
Email: Ensures the format is correct with
<input type="email">
. -
Number: Only allows numerical input via
<input type="number">
. -
Date Picker: Enables date selection using
<input type="date">
.
-
Email: Ensures the format is correct with
-
Radio Buttons and Checkboxes:
-
Radio Buttons: Choose one option from a group with
<input type="radio">
. -
Checkboxes: Select multiple options using
<input type="checkbox">
.
-
Radio Buttons: Choose one option from a group with
Accessibility
-
Using Labels for Accessibility
-
<label>
: Used to associate text labels with form elements. -
For Attribute: Matches the
id
of the input to improve accessibility. -
Example:
<label for="email">Email:</label><input type="email" id="email">
- Clicking the label focuses the corresponding input field.
-
Form Styling
- Structuring Forms with Block and Inline Elements
-
Block-Level Elements span the full width (e.g.,
<div>
,<form>
,<p>
). -
Inline-Level Elements take only the necessary width (e.g.,
<input>
,<span>
). - Divs and Spans: Used for layout structure, divs for block-level elements, spans for inline.
Form Buttons (Submit and Reset)
- Creating Submit and Reset Buttons
-
Submit Button:
<input type="submit" value="Submit">
<button type="submit">Submit</button>
-
Reset Button:
-
<button type="reset">Reset</button>
, clears all form input fields.
-
Using HTML Entities in Forms
- Using HTML Entities in Forms
-
Non-breaking space (
): Adds white space between elements. -
Special Symbols:
- Copyright symbol:
©
- Greater than:
>
- Less than:
<
-
Example:
5 > 3
renders as "5 > 3"
- Copyright symbol:
Sample Code Example
<form action="/submit" method="POST">
<!-- Name Field -->
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
</div>
<!-- Email Field -->
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
</div>
<!-- Message Field (Textarea) -->
<div>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="40" placeholder="Your message here" required></textarea>
</div>
<!-- Radio Buttons for Membership -->
<div>
<label>Membership Type:</label>
<input type="radio" id="basic" name="membership" value="basic" checked>
<label for="basic">Basic</label>
<input type="radio" id="premium" name="membership" value="premium">
<label for="premium">Premium</label>
</div>
<!-- Submit and Reset Buttons -->
<div>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</div>
</form>
Questions?
Week 2 - Introduction and HTML Basics
By kayashaolu
Week 2 - Introduction and HTML Basics
Course Website: https://www.ischool.berkeley.edu/courses/info/253a
- 44