Lecture 2: Core HTML Concepts

1. HTML Entities

HTML entities are special codes used to display reserved characters in HTML. They start with & and end with ;.

Character	Entity Code	Output
<	<	<
>	>	>
&	&	&
“	"	“
‘	'	‘

2. What is LAMP?

LAMP is a stack of technologies used for web development:

L = Linux (Operating System)
A = Apache (Web Server)
M = MySQL (Database)
P = PHP (Scripting Language)

3. What are HTML Attributes?

Attributes provide additional information about HTML elements. They are written inside the opening tag.

<img src="image.jpg" alt="My Image" width="200">

Here, src, alt, and width are attributes.

4. What is a Pixel?

Answer: A pixel (short for picture element) is the smallest unit of a digital image or screen. One pixel displays a single dot of color on the screen.

5. What is the Maximum Width of a Web Page?

Web page width depends on screen resolution. Here are suggested widths:

800 × 600 → ~780px
1024 × 768 → ~980px to 1000px

Modern websites use responsive layouts instead of fixed widths.

6. Old HTML Example (Deprecated Tags)

<font width="200" height="100" color="green" size="2">This is my text</font>

Note: Font tag and attributes like width, height, and color are deprecated in HTML5. Use CSS instead.

7. Web 4.0 Approach (Modern HTML & CSS)

Modern HTML separates content from styling. Use CSS for design:

<p style="color: green; font-size: 14px;">This is my text</p>

8. <img> Tag Explanation

<img src="path/to/image.jpg" alt="Description of image">

src: Path to the image file
alt: Alternate text for accessibility and SEO

9. HTML Element Behavior Types

Inline Elements: Do not start on a new line and only occupy as much width as needed. Examples: <span>, <a>, <strong>, <img>

Block Elements: Start on a new line and take the full width. Examples: <div>, <p>, <h1> to <h6>

10. HTML Nesting Rules

✅ Allowed: Block inside Block
✅ Allowed: Inline inside Inline
❌ Not Allowed: Block inside Inline

<div><p>Text inside paragraph</p></div>   <!-- ✅ Valid -->
<span><a href="#">Link</a></span>             <!-- ✅ Valid -->
<span><div>Invalid</div></span>               <!-- ❌ Invalid -->

HTML Tags, Image Handling, and Entities

Brief Explanation of Common HTML Tags

<em>: Emphasizes text, usually displayed in italics.
<em>Important text</em> → Important text
<pre>: Displays preformatted text, preserving spaces and line breaks.
<pre>Line 1 Line 2</pre>
<span>: A generic inline container used to group text for styling or scripting.
<span style="color: red;">Red text</span> → Red text

<img> Tag and Its Attributes

The <img> tag is used to display images in HTML.

<img src="images/photo.jpg" alt="My Photo" title="Hover Text" width="200" height="150">

src: Path to the image file
alt: Alternative text for screen readers or if image fails to load
title: Tooltip text shown on hover
width: Width of the image in pixels
height: Height of the image in pixels

Image Path Types

Relative Path: Refers to files relative to the current HTML file’s location.
Example: images/photo.jpg
Absolute Path: Full URL used on live servers.
Example: https://example.com/images/photo.jpg

Path Best Practices

Always start paths with / from root if working on server.
Use ../ to move one level up in folder hierarchy.
Example: ../../images/bbc.jpg
On local development, always use relative paths.
On live servers, absolute paths are often used in CDN or hosted media files.

Common Image File Types

JPG/JPEG: Best for photos and smaller file size. No transparency support.
PNG: Supports transparency and better quality. Larger file size than JPG.
GIF: Supports animation and transparency, limited to 256 colors. Lightest format.
BMP: Bitmap format. Very large file size. Rarely used for web.
TIF/TIFF: High-quality format used in printing. Not suitable for web use.

Recommendation:

Use JPG for standard images without transparency.
Use PNG for images with transparent background.
Use GIF only for lightweight icons or simple animations.

Important HTML Entities

Entity	Description	Rendered Output
	Non-breaking space	[ ]
&	Ampersand	&
<	Less-than sign	<
>	Greater-than sign	>
©	Copyright symbol	©
®	Registered trademark	®
™	Trademark	™

Tip: Always use HTML entities to avoid issues with special characters in HTML code.