Comprehensive HTML and CSS Guide

Sep 28, 2024

HTML & CSS Course Notes

Introduction to HTML

  • HTML = Hypertext Markup Language
  • Used to create and manage web pages.
  • Tags (markup) used to structure content.
  • Example Tags:
    • <h1> for headers
    • <p> for paragraphs
    • <a> for hyperlinks

Why Learn HTML?

  • Essential for managing online presence.
  • Beneficial for job applications, even outside web development.

Setting Up the Environment

  • Required tools:
    • Modern web browser (Chrome, Firefox, etc.)
    • Text editor (e.g., VS Code)
  • Install VS Code: code.visualstudio.com.

Creating Your First HTML File

  • Create index.html as the homepage.
  • Install Live Server extension for automatic updates.

Basic HTML Structure

  1. Declaration: <!DOCTYPE html>
  2. Root element: <html>
  3. Head section: <head>
    • Title: <title>My First Website</title>
  4. Body section: <body>
    • Content goes here.

Header Tags and Paragraphs

  • Use <h1> to <h6> for headers.
  • Create paragraphs with <p>.
    • Use <br> for line breaks and <hr> for horizontal lines.

HTML Comments

  • Use <!-- comment here --> for notes.

Exercise: Song Lyrics Page

  • Create lyrics.html with song details.

Creating Hyperlinks

  • Use <a href="URL">Link Text</a> for hyperlinks.
  • Attributes:
    • target="_blank" for new tabs.
    • title for tooltips.

Example of Email Link

  • Use mailto: in href for email links.

Adding Images

  • Use <img src="image.png" alt="description">
  • Attributes:
    • Set height and width for dimensions.
    • Use alt for accessibility.

Audio and Video Elements

  • Audio: <audio controls><source src="audio.mp3" type="audio/mpeg"></audio>
  • Video: <video controls><source src="video.mp4" type="video/mp4"></video>

Creating a Favicon

  • Use <link rel="icon" href="favicon.ico" type="image/x-icon"> in the head.

Text Formatting in HTML

  • Use:
    • <b> for bold
    • <i> for italic
    • <u> for underline
    • <mark> for highlighted text.

Using <span> and <div> Tags

  • <span> = inline elements.
  • <div> = block-level elements.

Lists in HTML

  • Unordered: <ul><li>Item</li></ul>
  • Ordered: <ol><li>Item</li></ol>
  • Description: <dl><dt>Term</dt><dd>Description</dd></dl>

Creating Tables

  • Structure with <table>, <tr>, <th>, and <td>.

Buttons in HTML

  • <button>Click Me</button>
  • Can be linked to other HTML pages or JavaScript functions.

Forms in HTML

  • Basic structure:
    • <form action="url" method="post">
    • Include text boxes, labels, submit buttons, checkboxes, etc.

Semantic Elements in HTML

  • Use <header>, <nav>, <main>, <footer>, <section>, <article>, and <aside> for structure.

Introduction to CSS

  • CSS = Cascading Style Sheets
  • Three Ways to Apply CSS:
    1. Inline styles in HTML elements.
    2. Internal styles within <style> tags in the head.
    3. External stylesheets.

CSS Basics

  • Selectors: Select elements to style.
  • Properties: Attributes of styling (e.g., color, background-color, margin).

Box Model

  • Elements consist of margins, borders, padding, and content.
  • Adjust widths/heights with box-sizing: border-box.

Flexbox

  • Create responsive layouts with the display: flex property.
  • Properties:
    • flex-direction
    • justify-content
    • align-items

Animations

  • Keyframes define the states of the animation.
  • Use @keyframes to handle transitions and effects.

Final Thoughts

  • Practice building HTML/CSS projects.
  • Use resources like MDN and W3Schools for further learning.