INFO 153A/253A: Front End Web Architecture
Kay Ashaolu
<h1>
, <p>
, <a>
)class
, id
, href
)<header>
, <nav>
, <section>
)<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>
#id
, .class
)color: blue;
, )@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
<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:
Example: Toggle Button Text
Basic Process:
www.example.com
)Key Concepts:
HTML Definition:
Basic Structure:
<html>
, <head>
, and <body>
.class
, id
).Headings and Text:
<h1>
to <h6>
): Define content hierarchy. <h1>
is the most important, <h6>
is the least.<p>
): Used for text content blocks.Lists and Links:
<ol>
): Numbered lists.<ul>
): Bulleted lists.<a href="URL">
): Create clickable links to other web pages or resources.HTML File Setup:
index.html
for the homepage.Sandbox Environment:
forms.html
or tables.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 and Attributes:
<p>text</p>
), except for self-closing ones like <img>
.src
for images and href
for links.Document Structure:
<!DOCTYPE html>
indicates the document is HTML5.<html>
, <head>
, <body>
: Form the essential structure of an HTML document.<header>
, <footer>
, and <article>
for accessibility and SEO, which helps browsers and screen readers understand content better.<!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>
<form>
wraps input elements.action
: The URL where the form data is sent (e.g., /submit
).method
: Defines how data is sent, either GET
or POST
.<input type="text">
for simple text.<input type="email">
for email with validation.<textarea></textarea>
for multi-line input.<select><option>Option</option></select>
for a list of choices.<input type="email">
.<input type="number">
.<input type="date">
.<input type="radio">
.<input type="checkbox">
.<label>
: Used to associate text labels with form elements.id
of the input to improve accessibility.<label for="email">Email:</label><input type="email" id="email">
<div>
, <form>
, <p>
).<input>
, <span>
).<input type="submit" value="Submit">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
, clears all form input fields.
): Adds white space between elements.©
>
<
5 > 3
renders as "5 > 3"<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>