target="" tells the browser where to open the page:
HTML NOTES
o _self Opens link in the same tab/window (Default)
What Is HTML o _blank Opens link in a new tab/window
HTML (HyperText Markup Language) is the standard language used to create and structure content on o _parent Opens link in the parent frame
the web.
o _top Opens link in the full window (breaks out of all frames)
It's the skeleton or structure of a webpage.
title attribute adds a tooltip on hover.
It defines elements like headings, paragraphs, images, links, forms, buttons, and more.
Links can go to external URLs, local files, or mailto: email addresses.
It is NOT a programming language — it’s a markup language that tells the browser what to
display. Adding Images
Basic HTML Document Structure The <img> element, a self-closing tag, uses src to specify the image file.
<!DOCTYPE html> Images can be stored within an organized folder structure (images/).
<html lang="en">
Attributes for resizing: width and height.
<head>
<meta charset="UTF-8"> Accessibility practice: always include alt attribute for screen readers.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Adding title adds a hover tooltip.
<title>My Basic HTML Page</title>
</head> Images can themselves be wrapped in <a> tags to become clickable links.
<body>
<h1>Welcome to My Page</h1> Audio and Video
<p>This is a paragraph of content on my basic HTML page.</p>
Use the <audio> tag with a nested <source> element for audio files.
</body>
</html> Common audio attributes: controls, autoplay, muted, loop.
The <head> contains metadata; the <body> contains the visible content. Multiple source tags for fallback formats (e.g., mp3 and wav).
Tags typically come in pairs (opening and closing), except for self-closing ones <video> tag shares similar usage and attributes
like <br> and <hr>. (src, width, controls, autoplay, muted, loop).
Text Elements Adding fallback content/text for browsers not supporting these tags.
Headers range from <h1> (largest) to <h6> (smallest). Text Formatting Tags
Paragraphs use <p>, with default spacing added by browsers. Inline formatting tags include:
<br> for line breaks and <hr> for section dividers. <b> for bold.
Comments <!-- comment --> are notes not displayed on the webpage. <i> for italic.
Hyperlinks <big>, <small> for size adjustments.
<sub>, <sup> for subscript and superscript.
<a> tags create hyperlinks.
<ins> underlined text.
href attribute contains the link URL.
<del> strikethrough text.
<mark> highlighted text.
Lists Tables
Three types: Table structure:
Unordered list: <ul> with <li> items (bulleted). <table> container.
Ordered list: <ol> with <li> items (numbered by default, can customize numbering <tr> for table rows.
style).
<th> for header cells (bold by default).
Description list: <dl> containing <dt> (term) and <dd> (definition) pairs.
<td> for data cells.
Lists can be nested, for example adding a sublist inside a list item.
Sample use: Store’s weekly hours table.
Basic List Structure
Attributes include:
<!-- Unordered List (Bullets) -->
bgcolor for background color of rows/cells.
<ul>
align to center content.
<li>Apple</li>
<li>Banana</li> width to control size.
<li>Orange</li>
Basic Table Structure
</ul>
<table border="1" style="border-collapse: collapse; width: 100%;">
<!-- Ordered List (Numbers) -->
<tr style="background: #f2f2f2;">
<ol>
<th style="padding: 8px;">ID</th>
<li>Wake up</li>
<th style="padding: 8px;">Name</th>
<li>Brush teeth</li>
<li>Eat breakfast</li> <th style="padding: 8px;">Age</th>
</ol> </tr>
<!-- Description List --> <tr>
<dl> <td style="padding: 8px;">101</td>
<dt>HTML</dt> <td style="padding: 8px;">John</td>
<dd>HyperText Markup Language</dd>
<td style="padding: 8px;">25</td>
<dt>CSS</dt>
</tr>
<dd>Cascading Style Sheets</dd>
</table>
</dl>
Boolean attributes: disabled to disable the button.
Inline CSS styles applied using style attribute (background color, text color, border-
Adding Color
radius).
Inline styles use the style attribute within HTML elements.
JavaScript interaction via onclick attribute calling JS functions.
CSS properties like background-color and color modify background and text colors.
A simple JS example: changes text on button click.
Colors can be specified via names, RGB values (rgb(r, g, b)), or hexadecimal (#rrggbb).
Forms
Multiple CSS properties separated by semicolons in the style attribute.
Using <form> element to collect user input.
Span and Div
Input fields of various types:
<span> is an inline element for styling a portion of text.
text, password, email, tel, date, number, radio, checkbox.
<div> is a block-level element used to group multiple elements for styling or layout.
Labels associated with inputs via for and id for accessibility.
Both can have styles applied via the style attribute.
Placeholder attribute to provide example input text inside fields.
Meta Tags Form buttons: reset (clears form), submit (sends data).
Placed inside <head>, meta tags provide metadata about the webpage. Form attributes:
Common meta tags include: action specifies where to send form data.
description (brief text about page content). method defines HTTP method (GET or POST).
keywords (SEO keywords). Input validations: required, maxlength, range (min and max).
author. Radio buttons grouped by matching name attribute.
viewport (for responsive design on mobile devices). Dropdown menus created using <select> and <option>.
charset (character encoding, UTF-8 recommended). Basic Form Structure
http-equiv="refresh" for automatic page refresh after set seconds. <form>
Iframes <label>Name: <input type="text" name="name"></label><br>
<iframe> embeds another web page or document inside the current page. <label>Email: <input type="email" name="email"></label><br>
Commonly used for ads but can be misused in phishing; many sites block iframe embedding. <label>Password: <input type="password" name="pass"></label><br>
Gender:<br>
Attributes include src, width, height, and style (border removal).
<label><input type="radio" name="gender" value="m"> Male</label>
Example: embedding Bing’s homepage or a local advertisement page.
<label><input type="radio" name="gender" value="f"> Female</label><br>
Buttons
Skills:<br>
Created with <button> tags containing label text.
<label><input type="checkbox" name="html"> HTML</label>
Buttons can be wrapped in <a> tags to act as hyperlinks.
<label><input type="checkbox" name="css"> CSS</label><br>
Country:<br>
<label>
<select name="country">
<option value="us">USA</option>
<option value="uk">UK</option>
</select>
</label><br>
<label>Bio: <textarea name="bio"></textarea></label><br>
<label>File: <input type="file"></label><br>
<label>Age: <input type="number"></label><br>
<button>Submit</button>
<button type="reset">Clear</button>
</form>
Keywords
HTML, Hypertext Markup Language, Web development
VS Code, Live Server, Text editor
Tags: <html>, <head>, <body>, <title>, <p>, <a>, <img>, <audio>, <video>,
<form>, <input>, <table>, <ul>, <ol>, <dl>, <iframe>, <button>, <div>,
<span>
Attributes: href, src, alt, title, controls, autoplay, muted, loop, style,
bgcolor, align, width, height, name, id, for, placeholder, required, method,
action, onclick
CSS: inline styling, colors (name, RGB, hex), border-radius
JavaScript basics: functions, onclick, DOM manipulation
Meta tags, SEO, accessibility, responsive design
