COMPUTER EDUCATION 7
Week 1: Understanding HTML Forms
What is HTML - Hypertext Markup Language?
HTML stands for HyperText Markup Language, and it is the standard
markup language used for creating web pages. It acts as the backbone of
web development, providing the fundamental structure upon which visually
engaging and interactive websites are built. HTML enables developers to
design pages that include text, images, multimedia elements, forms, and
buttons. Its simplicity and effectiveness make it an essential tool in the field
of web development.
What is a Webpage?
A webpage is a single page of content that can be displayed in a web
browser. It is part of a larger website and serves as a unit of information that
users can access. Webpages may contain various elements such as:
Text: Used to convey written information.
Images: Enhance the visual appeal and understanding of content.
Videos: Provide interactive and engaging multimedia experiences.
Forms and Buttons: Allow users to input data and interact with the
page.
Webpages are designed to present information in an organized manner,
making it accessible and user-friendly.
What is a Website?
A website is a collection of interconnected webpages that share a common
domain name and are hosted on a web server. Websites allow users to
navigate through multiple pages to access information, entertainment,
services, or resources.
Types of Websites:
1. Static Websites:
These websites consist of "fixed code" and display the same content to
all users. Updates to static websites require manual changes to the
code. Examples include simple portfolios or informational sites.
2. Dynamic Websites:
Dynamic websites generate content in real time based on user
interactions or data retrieved from a database. These sites are more
interactive and can customize the user experience, such as social
media platforms or e-commerce websites.
What is Web Development?
Web Development involves the creation, building, and maintenance of
websites and web applications. It encompasses a wide range of tasks and
skills, including:
Web Design: Focuses on the visual and aesthetic aspects of a
website, including layout, color schemes, and overall user experience
(UX).
Unit I Page 1
Web Programming: Involves writing the code that powers the
functionality of a website, enabling dynamic behavior and interactions.
Database Management: Ensures the organization, storage, and
retrieval of data used in a website or application.
Three Types of Web Developers:
1. Front-End Developers:
They work on the user interface (UI) and design aspects of websites.
Using languages like HTML, CSS, and JavaScript, they ensure the
website is visually appealing and easy to navigate.
2. Back-End Developers:
They manage the server-side operations, including databases, APIs,
and server logic. Popular programming languages for back-end
development include Python, PHP, and Node.js.
3. Full-Stack Developers:
These developers have expertise in both front-end and back-end
development. They are capable of handling the entire web
development process from start to finish.
What is a Text Editor?
A text editor is an essential tool used by developers to write and edit code
for websites and applications. Text editors simplify the development process
by offering features such as:
Syntax Highlighting: Makes code more readable by highlighting
specific parts of the syntax.
Code Completion: Speeds up development by suggesting code
snippets or tags.
Debugging Tools: Helps identify and fix errors in the code.
Visual Studio Code (VS Code) is a popular and versatile text editor
developed by Microsoft. Known for its lightweight design and powerful
features, VS Code supports multiple programming languages and offers a
range of functionalities, including:
An integrated terminal for running commands directly within the
editor.
Syntax highlighting to improve code readability.
Extensions to add new features, such as frameworks or language
support.
Built-in debugging tools to troubleshoot and optimize code.
HTML Structure
An HTML document follows a specific structure to organize its content and
provide instructions for rendering it in a web browser. Below is an example of
the basic structure:
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
</head>
Unit I Page 2
<body>
</body>
</html>
Explanation of Elements:
<!DOCTYPE html>: Declares the document as an HTML5 file,
ensuring proper rendering in modern browsers.
<html>: The root element that contains all the other elements on the
webpage.
<head>: Includes metadata, links to stylesheets, and scripts that
define the webpage's behavior and appearance.
<body>: Contains all visible content, such as headings, paragraphs,
images, forms, and buttons.
Headings in HTML
Headings help structure and organize content on a webpage. HTML supports
six levels of headings, ranging from <h1> (most important) to <h6> (least
important). Properly using headings improves both readability and search
engine optimization (SEO).
Paragraphs in HTML
The <p> tag defines paragraphs of text, which are the building blocks of
most webpages. Paragraphs provide structure and make written content
easier to read.
Line Breaks in HTML
To add a line break within text, the <br> tag is used. It is a self-closing tag
and does not require a closing tag. Example:
html
CopyEdit
<p>This is the first line.<br>This is the second line.</p>
Styling HTML Elements with CSS
CSS (Cascading Style Sheets) is used to style HTML elements by defining
rules for how they appear on a web page.
CSS Selectors, Properties, and Values
Code:
<style>
selector{
property: value;
}
</style>
1. Selector: Specifies the HTML element(s) to style.
2. Property: Defines the specific aspect of the element to style (e.g.,
color, font size, margin).
3. Value: Provides the setting for the property (e.g., blue, 16px, auto).
Styling HTML Elements
You can apply styles to HTML elements to customize their appearance using
the <style> tag. For example:
Unit I Page 3
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 32px;
color: blue;
background-color: lightgray;
}
p{
font-size: 16px;
color: black;
background-color: lightyellow;
}
</style>
</head>
<body>
<h1>Welcome to HTML Forms</h1>
<p>Learning HTML is fun and exciting!</p>
</body>
</html>
References
W3Schools. (n.d.). HTML Tutorial.
W3Schools. (n.d.). HTML Introduction.
W3Schools. (n.d.). HTML Editors.
Reference:
W3Schools. (n.d.). HTML Tutorial. Retrieved August 7, 2024, from
https://www.w3schools.com/html/
W3Schools. (n.d.). HTML Introduction. Retrieved August 7, 2024, from
https://www.w3schools.com/html/html_intro.asp
W3Schools. (n.d.). HTML Editors. Retrieved August 7, 2024, from
https://www.w3schools.com/html/html_editors.asp
Unit I Page 4
