Scribd
Upload
3 views16 pages

CSC 104 HTML, Css and Javascript Notes

The document provides an overview of HTML, CSS, and JavaScript, detailing their roles in web development. It covers the structure of HTML documents, types of HTML, CSS styling methods, and best practices for responsive design. Additionally, it includes examples of key HTML tags, CSS properties, and layout techniques like Flexbox and Grid.

Uploaded by

m22989676
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views16 pages

CSC 104 HTML, Css and Javascript Notes

The document provides an overview of HTML, CSS, and JavaScript, detailing their roles in web development. It covers the structure of HTML documents, types of HTML, CSS styling methods, and best practices for responsive design. Additionally, it includes examples of key HTML tags, CSS properties, and layout techniques like Flexbox and Grid.

Uploaded by

m22989676
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

HTML, CSS AND JAVASCRIPTS

HTML (HyperText Markup Language): is the standard language used for creating web pages and
web applications. HTML files can have either the .html or .htm file extension. The difference
between these two extensions is minimal and primarily historical.

Key Differences

1. File Extension Length: .html: This is a four-letter extension. .htm: This is a three-letter
extension.

2. Historical Context: The .htm extension was used in older operating systems like DOS,
which had a limitation of three-character file extensions^1^. This was necessary because
DOS could not handle four-letter extensions. Modern operating systems do not have this
limitation, so .html is more commonly used today

There are two main types of HTML based on how they are written and their evolution over
time:

1. Static (Standard) HTML

 Definition: Traditional HTML where the content is fixed (does not change unless
manually edited).

 Use Case: Basic websites, blogs, portfolios.

 Example:

2. Dynamic HTML (DHTML)

 Definition: Combines HTML + CSS + JavaScript to create interactive, changing content.

 Use Case: Web apps (e.g., Gmail, Facebook), real-time updates.

 Example:

<button onclick="changeText()">Click Me!</button>

<p id="demo">This text will change.</p>

<script>

function changeText() {

document.getElementById("demo").innerHTML = "New text!";

}
</script>

1. <!DOCTYPE html>

<html>

<head>

<title>My Static Page</title>

</head>

<body>

<h1>Welcome!</h1>

<p>This content doesn't change dynamically.</p>

</body>

</html>

2. Document Structure Tags

These tags define the basic structure of an HTML document.

<!DOCTYPE html>

 Purpose: Declares the document type and HTML version (HTML5).

 Must be the first line in every HTML file.

 Example

<!DOCTYPE html>

<html>

<head>...</head>

<body>...</body>
</html>

<html>

 Purpose: The root element of an HTML page.

 Always wraps all other tags (except <!DOCTYPE>).

 Common Attribute: lang="en" (defines language).

 Example:

<html lang="en">

<head>...</head>

<body>...</body>

</html>

<head>

 Purpose: Contains meta-information (title, styles, scripts).

 Not visible on the webpage.

 Common Child Tags:

o <title> (page title in browser tab)

o <meta> (SEO, character set)

o <link> (CSS files)

o <script> (JavaScript)

 Example:

<head>

<title>My Website</title>

<meta charset="UTF-8">

<link rel="stylesheet" href="style.css">

</head>

<body>
 Purpose: Contains all visible content (text, images, links).

 Example:

<body>

<h1>Welcome!</h1>

<p>This is a paragraph.</p>

</body>

3. Text & Heading Tags

Used for structuring text content.

<h1> to <h6>

 Purpose: Headings (h1 = most important, h6 = least).

 SEO Note: Use only one <h1> per page.

 Example:

<h1>Main Title</h1>

<h2>Subheading</h2>

<h3>Sub-subheading</h3>

<p>

 Purpose: Defines a paragraph.

 Automatically adds spacing before and after.

 Example:

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<br>

 Purpose: Line break (no closing tag).

 Use Case: Force text onto a new line.

 Example:

<p>First line<br>Second line</p>


<hr>

 Purpose: Horizontal rule (a divider line).

 Example:

<p>Section 1</p>

<hr>

<p>Section 2</p>

<strong> vs <b>

Tag Purpose Example

<strong> Semantic importance (screen readers emphasize) <strong>Warning!</strong>

<b> Visual bold (no semantic meaning) <b>Bold text</b>

<em> vs <i>

Tag Purpose Example

<em> Semantic emphasis (screen readers stress) <em>Important</em>

<i> Visual italic (no semantic meaning) <i>Italic text</i>

4. Link & Media Tags

For hyperlinks, images, and embedded content.

<a> (Anchor Tag)

 Purpose: Creates hyperlinks.

 Key Attributes:
o href="URL" (link destination)

o target="_blank" (opens in new tab)

Example:

<a href="https://google.com" target="_blank">Visit Google</a>

<img>

 Purpose: Embeds an image.

 Self-closing tag (no </img>).

 Key Attributes:

o src="image.jpg" (image path)

o alt="Description" (accessibility)

o width="200" (pixels)

Example:

<img src="cat.jpg" alt="A cute cat" width="200">

video> & <audio>

Tag Purpose Example

Embeds a
<video> <video src="movie.mp4" controls></video>
video

<audio> Embeds sound <audio src="song.mp3" controls></audio>

Key Attributes:

 controls (shows play/pause buttons)

 autoplay (starts automatically)

 loop (repeats)
5. List Tags

For ordered and unordered lists.

<ul> (Unordered List)

 Displays bullet points.

 Example:

<ul>

<li>Coffee</li>

<li>Tea</li>

</ul>

<ol> (Ordered List)

 Displays numbers (1, 2, 3...).

 Example:

<ol>

<li>First step</li>

<li>Second step</li>

</ol>

6. Form Tags

For user input (login, search, surveys).

<form>

 Wraps all input elements.

 Key Attributes:

o action="/submit" (where data is sent)

o method="POST" (HTTP method)

 Example:

<form action="/submit" method="POST">


<input type="text" name="username">

<button type="submit">Send</button>

</form>

<input>

 Purpose: Collects user data.

 Common Types:

o text (default)

o password (hidden text)

o email (validates email format)

o checkbox (multiple selections)

o radio (single selection)

Example:

<input type="text" placeholder="Enter name">

<input type="password" placeholder="Password">

7. Semantic Tags (HTML5)

Improve accessibility & SEO.

Tag Purpose Example

<header> Top section (logo, nav) <header><h1>Logo</h1></header>

<nav> Navigation links <nav><a href="/">Home</a></nav>

<section> Thematic grouping <section><h2>About</h2></section>

<footer> Bottom section <footer>© 2024</footer>

7. Table Tags

For displaying data in rows and columns.


Basic Table Structure

Example:

<table border="1">

<tr>

<th>Name</th>

<th>Age</th>

</tr>

<tr>

<td>Alice</td>

<td>25</td>

</tr>

</table>

Tag Purpose

<table> Wraps the entire table

<tr> Table row

<th> Table header (bold)

<td> Table data cell

Visual illustration Common Tags:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>
</head>

<body>

<header>

<h1>Website Header</h1>

<nav>

<a href="/">Home</a>

</nav>

</header>

<section>

<h2>Section Title</h2>

<p>Paragraph text.</p>

<img src="image.jpg" alt="Description">

</section>

<footer>© 2024</footer>

</body>

</html>

Summary Cheat Sheet

Category Key Tags

Structure <!DOCTYPE>, <html>, <head>, <body>

Text <h1>-<h6>, <p>, <strong>, <em>

Media <a>, <img>, <video>, <audio>

Lists <ul>, <ol>, <li>


Category Key Tags

Forms <form>, <input>, <button>

Semantic <header>, <nav>, <footer>

Tables <table>, <tr>, <td>, <th>

CSS (Cascading Style Sheets)


CSS is used to style and layout web pages—colors, fonts, spacing, animations, and responsive
designs.
CSS Rules: A selector targets HTML elements, and declarations define styles.
selector {
property: value;
property: value;
}
Example:
h1 {
color: blue;
font-size: 24px;
}

2. Ways to Add CSS

Method Example Use Case

Inline CSS (inside <p style="color:red;">Text</p> Quick fixes (avoid overuse).


Method Example Use Case

HTML)

Internal CSS (in <style>)

<style>
p { color: red; }
</style>
``` | Small projects. |
| **External CSS** (`.css` file) |
```html
<link rel="stylesheet" href="styles.css">
``` | Best for large projects. |

Visualization:
Margin (10px)
Border (2px)
Padding (20px)
Content (200px width)

5. CSS Layouts
Flexbox (1D Layout)
 Arranges items in rows or columns.
 Key Properties:
.container {
display: flex;
justify-content: center; /* Horizontal alignment */
align-items: center; /* Vertical alignment */
gap: 10px; /* Space between items */
}

CSS Grid (2D Layout)


 Creates grid-based layouts.
 Example:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
grid-gap: 20px;
}

6. Responsive Design (Media Queries)


Adjusts styles based on screen size.
@media (max-width: 600px) {
body {
background: lightblue;
}
.menu { display: none; } /* Hide menu on small screens */
}

7. CSS Animations & Transitions


Transitions
Smoothly change property values.
button {
transition: background-color 0.3s ease;
}
button:hover {
background-color: red;
}

Animations
Custom keyframe animations.
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.box {
animation: slide 2s infinite;
}

8. Common CSS Properties

Category Properties

font-family, font-size, color, text-


Text
align

Background background-color, background-image

Spacing margin, padding, width, height

Border border, border-radius, box-shadow

Display display, visibility, opacity


Category Properties

9. CSS Best Practices


1. Use External CSS (avoid inline styles).
2. Organize Code (group related styles).
3. Use Variables (for reusable values):
:root {
--primary-color: blue;
}
button {
background: var(--primary-color);
}
Mobile-First Design (start styling for small screens first).

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy