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
