🌐

HTML Basics and Web Development

Apr 21, 2025

Introduction to HTML

What is HTML?

  • HTML stands for HyperText Markup Language.
  • It uses markup to describe the structure of web pages.
  • The structure is composed of elements represented by tags.
  • Tags are used to display content differently (e.g., heading, paragraph, table).

Basic HTML Structure

  • <html>: Root element of an HTML page.
  • <head>: Contains meta-information about the document.
  • <title>: Specifies a title for the document.
  • <body>: Contains the visible page content.
  • <h1>: Defines a large heading.
  • <p>: Defines a paragraph.

Tag Syntax

  • Tags usually come in pairs: a start tag and an end tag.
  • Example: <p>Content</p> for paragraphs.
  • Some tags are empty, like <br> for line breaks.

Role of Web Browsers

  • Web browsers like Chrome, Firefox, and Safari interpret HTML to display web pages.

Creating a Web Page

Steps to Create a Basic Web Page

  1. Open a Text Editor: Use Notepad or Text Edit.
  2. Write HTML: Input or copy HTML code.
  3. Save as HTML: Save the file as "index.html" with UTF-8 encoding.
  4. View in Browser: Open the saved HTML file in a browser.

HTML Elements and Nesting

  • HTML elements consist of a start tag, content, and an end tag.
  • Elements can be nested within each other.
  • Example of nesting: <html> -> <body> -> <h1> and <p>.
  • Use end tags to avoid unexpected results.

Attributes in HTML

Purpose of Attributes

  • Provide additional information about elements.
  • Specified in the start tag in name/value pairs (e.g., href="URL").

Common Attributes

  • href: Specifies the URL of a link.
  • src: Specifies the URL of an image.
  • alt: Provides alternative text for images.
  • style: Used for CSS styling.
  • lang: Declares the language of the document.
  • title: Sets a tooltip title.

HTML Headings and Text

Importance of Headings

  • Used to create titles and subtitles.
  • Six levels of headings (<h1> to <h6>).
  • Headings important for indexing by search engines.

HTML Paragraphs

  • Defined by the <p> element.
  • Automatically adds white space before and after.

HTML Formatting

  • Formatting elements like <b>, <strong>, <i>, and <em> are used for bold, strong, italic, and emphasized text.
  • Other formatting elements: <small>, <mark>, <del>, <ins>, <sub>, and <sup>.

HTML Comments

  • Inserted using <!-- comment --> syntax.
  • Not displayed in the browser.

HTML Colors and CSS

Specifying Colors

  • Use color names, RGB values, or hex values.
  • RGB: rgb(255, 0, 0) for red.
  • Hex: #FF0000 for red.
  • RGBA: Adds alpha for opacity.

Introduction to CSS

  • CSS stands for Cascading Style Sheets.
  • Controls the layout and style of HTML elements.
  • Three ways to add CSS: inline, internal, and external.

HTML Links and Images

HTML Links

  • Links defined with <a> tag.
  • href: Specifies the destination of the link.
  • Types: absolute URL, relative URL.
  • target attribute specifies where to open the linked document.

HTML Images

  • Defined with <img> tag.
  • src: URL of the image.
  • alt: Alternative text.
  • Use width, height, and CSS for image dimensions.

HTML Tables and Lists

Creating Tables

  • <table>: Defines a table.
  • <tr>: Defines table rows.
  • <th>: Defines table headers.
  • <td>: Defines table cells.

Creating Lists

  • Ordered Lists: <ol>, items marked with numbers.
  • Unordered Lists: <ul>, items marked with bullets.

Advanced HTML: Block & Inline Elements, Classes, IDs, Iframes

Display Types

  • Block elements: Take full width (e.g., <div>, <p>).
  • Inline elements: Take only necessary space (e.g., <a>, <img>).

HTML Class Attribute

  • Used to group elements.
  • Elements can share classes for shared styles.

HTML ID Attribute

  • Uniquely identifies an element.
  • Used for styling and JavaScript interaction.

HTML Iframes

  • Used to display a webpage within a webpage.
  • Defined with <iframe> tag.

JavaScript Basics

Introduction to JavaScript

  • JavaScript enhances interactivity of web pages.
  • <script> tag used to define scripts.

Common Uses

  • Dynamic content, form validation, image manipulation.
  • document.getElementById: Selects HTML elements by ID.

HTML Head and Forms

HTML Head Element

  • Container for metadata.
  • Includes title, styles, scripts, etc.

HTML Forms

  • Used to collect user input.
  • Input elements: <input>, <textarea>, <select>.
  • Different input types: text, radio, checkbox, submit.
  • <input type="submit">: Defines a submit button.

Full transcript