Scribd
Upload
3 views

HTML Reviewer

The document provides an introduction to HTML, detailing its structure, common elements, and essential tags used in web development. It covers the basics of HTML, including the doctype declaration, headings, paragraphs, links, and multimedia elements, as well as the importance of SEO. Additionally, it mentions various HTML editors that can be used for creating web pages.

Uploaded by

stortoxcbobierpb
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

HTML Reviewer

The document provides an introduction to HTML, detailing its structure, common elements, and essential tags used in web development. It covers the basics of HTML, including the doctype declaration, headings, paragraphs, links, and multimedia elements, as well as the importance of SEO. Additionally, it mentions various HTML editors that can be used for creating web pages.

Uploaded by

stortoxcbobierpb
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Introduction to HCI PRELIMS

1. Basics of HTML 4. Special Elements


HTML (HyperText Markup Language) is the foundation of web
development. Div: <div> – Groups content.
It defines the structure and meaning of web content. Span: <span> – Inline styling.
Works alongside CSS (for styling) and JavaScript (for functionality). Break: <br> – Line break.
Created by Tim Berners-Lee in 1989; the latest version is HTML5. Horizontal Line: <hr> – Creates a line separator.

2. Structure of an HTML Document 5. Formatting Tags


· Starts with <!DOCTYPE html> (defines document type). <b> – Bold text
· Basic structure: <i> – Italic text
<!DOCTYPE html> <u> – Underlined text
<html> <em> – Emphasized text
<head>
<title>Page Title</title> 6. Attributes
<meta charset="UTF-8"> href – Link destination (<a href="https://
<link rel="stylesheet" href="styles.css"> example.com">)
</head> src – Image/video source (<img
<body> src="image.jpg">)
<h1>Hello, World!</h1> alt – Image description (for accessibility)
<p>This is a paragraph.</p> id / class – Used for styling with CSS
</body> style – Inline styling (<p style="color: red;">)
</html>
·
· Main elements:
7. Hyperlinks & Multimedia
<html> – Root element Internal links: <a href="page.html">Go to Page</
<head> – Contains metadata a>
<title> – Defines page title (important for SEO) External links: <a href="https://
<link> – Links external resources (CSS, icons) example.com">Visit Site</a>
<body> – Contains visible page content Embed videos/audio: <video> and <audio> tags

8. Search Engine Optimization (SEO)


3. Common HTML Elements & Tags Title and meta description improve visibility.
Headings: <h1> to <h6> (H1 is largest, H6 is smallest). Proper use of headings (H1-H6) for structure.
Paragraphs: <p> – Defines text sections. Alt text for images improves accessibility.
Links: <a href="URL">Link Text</a> – Creates hyperlinks.
Images: <img src="image.jpg" alt="Description"> – Displays
images.

Lists:
Ordered: <ol><li>Item</li></ol> (numbered)
Unordered: <ul><li>Item</li></ul> (bulleted)
Forms: <form>, <input>, <button>, <select>, <textarea>.
Tables: <table>, <tr>, <td>, <th>. Review well
kaya yan
tiwala lang sa
katabi mo
1. What is HTML? 5. Doctype Declaration
HTML (HyperText Markup Language) is the standard <!DOCTYPE html> informs browsers about the
language for creating web pages. HTML version being used.
Defines the structure of a webpage. Appears at the top of the document (before any
Made up of elements that instruct the browser how to display HTML tags).
content. Not case-sensitive.
Example elements: headings, paragraphs, links, images, lists.
6. HTML Headings
2. HTML Elements Defined with <h1> to <h6> tags.
An HTML element consists of: <tagname> Content </ <h1> is the most important (largest), <h6> is the
tagname> least important (smallest).

Example: <h1>Main Heading</h1>


<h1>My First Heading</h1> <h2>Subheading</h2>
<p>My first paragraph.</p> <h6>Smallest Heading</h6>

3. HTML Editors 7. HTML Paragraphs


Basic Editors: Notepad (PC), TextEdit (Mac) Created using the <p> tag.
Advanced Editors: <p>This is a paragraph.</p>
Visual Studio Code (VS Code) <p>This is another paragraph.</p>
Sublime Text
Atom 8. HTML Links
Brackets Defined with the <a> tag.
Notepad++ The href attribute specifies the link destination.
<a href="https://www.facebook.com">Visit Facebook</
4. HTML Document Structure a>
All HTML documents start with a <!DOCTYPE html> declaration.

Basic structure:
<!DOCTYPE html>
<html>
Good Luck!
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome!</h1>
<p>This is a simple webpage.</p>
</body>
</html>

SA PRELIMS
With sama ng loob,
Angelica Tulagan
BLOCK MAYOR OF 12-ITE-06

You might also like