ITclub

العودة إلى Web Development
محاضرة 2

HTML5 Elements and Fundamental CSS Styling

عناصر HTML5 الجديدة (Semantic Tags, Audio, Video)، الخصائص الأساسية (Links, Images)، ومقدمة لـ CSS.

ملخص المحاضرة

Lecture 2: HTML5 Elements and Fundamental CSS Styling

Building on the basic HTML structure, this lecture introduces key HTML5 features, essential attributes for media and linking, and the three core methods for applying CSS styles, culminating in an introduction to different types of CSS selectors.

1. HTML5 Improvements and Media Support

HTML5 represents a significant upgrade, introducing new semantic elements for better document structure and native support for media:

  • Semantic Layout Tags: Elements that define clear sections of a document:
    • <header>, <nav>, <section>, <article>, <aside>, <footer>.
  • Media Elements:
    • <audio>: Used to embed an audio file (e.g., "speech.mp3"). The controls attribute adds built-in play, pause, and volume controls.
    • <video>: Used to embed a video clip. Attributes like controls, autoplay, and muted manipulate video playback.

2. Core HTML Attributes

Attributes provide extra information about an element:

  • Hyperlinks (<a>): Defines a hyperlink.
    • href: Specifies the destination URL. The link can be an external URL (absolute) or an internal path (relative, e.g., to a profile.html file).
    • Using the <a> tag around an <img> tag makes the image a clickable link.
  • Images (<img>): Embeds an image.
    • src: Specifies the source (file path) of the image.
    • alt: Provides alternative text for accessibility (a requirement for well-formed HTML).
    • width and height: Specify the dimensions in pixels.
  • Favicon: Adding a small icon next to the page title is done using a <link> tag in the <head> with rel="icon".

3. Introduction to CSS and Syntax

CSS (Cascading Style Sheets) is the language used to control the presentation and layout of HTML documents (colors, fonts, positioning, spacing).

  • CSS Rule Syntax: A CSS rule consists of a Selector and a Declaration Block.
    • Selector: Identifies the HTML element(s) to style (e.g., h1, .center, #main).
    • Declaration Block: Contained in curly braces { }, it holds one or more declarations.
    • Declaration: A property-value pair (e.g., color: red;) ending with a semicolon.

4. Methods for Applying CSS

CSS can be linked to an HTML document in three ways:

  1. Inline CSS: Styles applied directly to a single element using the style attribute (e.g., <div style="color: blue;">). Used for single, specific changes.
  2. Internal CSS: Styles defined in the <style> element within the HTML document's <head> section. Applies styles to the entire document.
  3. External CSS: Styles defined in a separate .css file and linked using the <link> element in the <head>. This is the best practice for larger projects.

5. Basic CSS Selectors

Selectors are crucial for targeting specific HTML elements:

  • Element Selector (Simple): Targets all instances of an HTML element (e.g., p { ... } styles all paragraphs).
  • ID Selector: Targets a single unique element using its ID attribute (e.g., #main { ... } targets <div id="main">).
  • Class Selector: Targets all elements that have a specific class attribute (e.g., .center { ... } targets <p class="center">).
  • Grouping Selector: Applies the same declaration to multiple selectors by separating them with commas (e.g., h1, p, .notice { ... }).

محتويات المحاضرة

اختبر فهمك للمحاضرة

تصحيح فوري بالذكاء الاصطناعي