🖥️

Fundamentals of HTML and CSS

Aug 25, 2024

View transcript

Introduction to HTML and CSS

  • HTML (Hypertext Markup Language)

    • Used to structure content on web pages.
    • Uses tags to convey how content should be displayed.
    • Tags typically come in pairs: e.g., <header> and </header>, <p> for paragraphs, <a> for hyperlinks.
    • Adds foundational structure to web pages, like the skeleton of a house.

  • CSS (Cascading Style Sheets)

    • Used to style web pages: colors, decorations, and design.
    • Comparable to the interior design and decor of a house.

Getting Started with HTML and CSS

  • Tools Needed:
    • Modern web browser: Chrome, Firefox, Edge, Safari.
    • Text editor: VS Code (free).
  • Steps to Setup VS Code:
    1. Download from code.visualstudio.com for your OS.
    2. Install and create a desktop icon.
    3. Launch Visual Studio Code and set up a new project folder.

Basic HTML Structure

  • Document Declaration:
    • Start with <!DOCTYPE html> to declare HTML5.
  • Basic Tags:
    • <html>: The root element.
    • <head>: Contains metadata and the title of the webpage.
    • <body>: Contains visible content.
  • Creating Files:
    • Create index.html as the homepage.
    • Use <title> to set the webpage title, e.g., "My First Website".

Using Live Server

  • Live Server Extension:
    • Installs and allows for auto-update of HTML files in a browser.
    • Open HTML with Live Server to see automatic changes.

HTML Tags and Elements

  • Header Tags:
    • <h1> to <h6> for headings, with <h1> being the largest.
  • Paragraph Tags:
    • <p> for text paragraphs.
  • Break and Horizontal Rules:
    • <br> for line breaks.
    • <hr> for horizontal lines.
  • Pre-formatted Text:
    • <pre> retains spaces and line breaks.
  • Comments:
    • Use <!-- comment --> for adding notes in HTML.

Exercises

  • Create new HTML files (e.g., lyrics.html) to practice structuring and styling content.
    • Use doc type, head, body, and tags such as <h1>, <p>, <hr>.

Hyperlinks in HTML

  • Anchor Tags <a>:
    • Use for creating hyperlinks with href attribute.
    • target="_blank" to open links in a new tab.
    • title attribute for tooltips.
  • Types of URLs:
    • Absolute URLs link to external sites.
    • Relative URLs link to files within the same project._

Images in HTML

  • Image Tags <img>:
    • Use src for the image path.
    • alt for alternative text.
    • Attributes to control size: width, height.
  • Making Images Hyperlinks:
    • Wrap <img> with <a> to make clickable.
  • GIFs and Image Organization:
    • Store images in a separate folder for organization.

Audio and Video in HTML

  • Audio <audio> and Video <video> Tags:
    • Use controls, autoplay, loop, muted attributes.
    • Source files to be specified within <source> tags.

Text Formatting and Lists

  • Text Formatting Tags:
    • <b>, <i>, <u> for bold, italic, underline.
    • <del>, <big>, <small>, <sup>, <sub>.
  • Lists:
    • Ordered Lists <ol>: Numbered items.
    • Unordered Lists <ul>: Bullets.
    • Description Lists <dl>: Term and definition pairs.

Creating Tables

  • Table Structure:
    • <table>, <tr> for rows, <th> for headers, <td> for data.
    • Use borders and alignments for styling.

Buttons and Forms

  • Buttons <button>:
    • Use styles for appearance.
    • Can link to other pages or trigger scripts.
  • Forms:
    • Elements like <input>, <label>, <textarea>, <select> for interaction.
    • Attributes like type, placeholder, required.

Semantic HTML Elements

  • Headers <header> and Footers <footer>:
    • Organize page content.
    • Useful for introductory and concluding content.

Introduction to CSS

  • Applying CSS:
    • Inline, internal, or external stylesheets.
    • External stylesheets are reusable across multiple pages.
  • CSS Colors:
    • Methods include color names, RGB, Hex, HSL.

Fonts and Google Fonts

  • Font Styling:
    • font-family, font-size, font-weight.
    • Use Google Fonts for a wider variety.

CSS Borders, Shadows, Margins

  • Borders:
    • border-style, border-width, border-color.
  • Shadows:
    • text-shadow for text, box-shadow for block elements.
  • Margins:
    • Space around elements, can be set for individual sides.

Flexbox and Layout

  • Flexbox Layout:
    • display: flex; for flexible layouts.
    • Properties like justify-content, align-items, flex-wrap.
  • Responsive Design:
    • Media queries for different screens.

Animations and Transformations

  • CSS Animations:
    • Keyframes for defining animations.
    • Properties like animation-name, animation-duration.
  • Transformations:
    • Rotate, scale, skew elements with transform property.

Advanced HTML/CSS Topics

  • Pseudo-classes and Pseudo-elements:
    • Use for styling elements in specific states.
  • Combinators and Selectors:
    • Explaining relationships between elements.

Conclusion

This lecture covered the foundational knowledge and practical exercises to start working with HTML and CSS, setting up the environment, creating basic structures, styling elements, and managing layouts and animations.

Full transcript