Course Content
Introduction
HTML, or HyperText Markup Language, is the foundational language for creating web pages and defining their structure. It is not a programming language but a markup language that uses elements and tags to describe content. Key Concepts: Elements and Tags: HTML documents are built using elements, which represent different parts of a web page (e.g., headings, paragraphs, images). Elements are defined using tags, which are keywords enclosed in angle brackets (e.g., <h1>, <p>, <img>). Most elements have an opening tag and a closing tag (e.g., <h1> and </h1>), with the content placed in between. The closing tag includes a forward slash before the element name. Some elements are self-closing and do not require a separate closing tag (e.g., <br> for a line break, <img> for an image). Basic Document Structure: Every HTML page begins with a declaration, which defines the document type. The entire HTML content is enclosed within the and tags. The section contains metadata about the page (e.g., title, character set, links to stylesheets), which is not directly visible on the page. The section contains all the visible content of the web page. Example of a basic HTML structure: Code <title>My First Web Page</title> <h1>Welcome to my page!</h1> <p>This is a paragraph of text.</p> Common Elements: Headings: <h1> to <h6> (for different levels of headings). Paragraphs: <p> (for blocks of text). Links: <a> (for creating hyperlinks to other pages or resources). Images: <img> (for embedding images). Lists: <ul> (unordered list), <ol> (ordered list), and <li> (list item). How to get started: Create a new text file and save it with a .html extension (e.g., index.html). Write your HTML code in the file using a text editor (like VS Code, Notepad++, or Sublime Text). Open the .html file in a web browser to view your web page.
0/10
HTML Editors
01:27
HTML Links
03:26
HTML – Attributes
00:00
HTML Images
03:42
HTML – id
02:27
HTML – Colors
03:05
HTML – Styles
01:45
HTML – CSS
02:14
HTML – Forms
02:38
HTML – Table
02:29
HTML Coding
HTML colors, more accurately referred to as web colors or CSS colors in modern web development, are the methods used to specify and display colors on web pages. While originally defined within HTML specifications, the primary method for defining colors on the web now resides in the CSS Color Module.
These colors can be specified in several ways:
  • Color Names: A set of predefined color names are recognized by browsers, such as red, blue, green, black, white, purple, aqua, etc. There are over 140 such predefined names.
Code
 
    <p style="color: blue;">This text is blue.</p>
  • Hexadecimal (Hex) Values: This is a very common method, representing colors as a six-digit hexadecimal number prefixed with a #. Each pair of digits represents the intensity of Red, Green, and Blue, respectively (e.g., #RRGGBB). Values range from 00 (no intensity) to FF (full intensity). For example, pure red is #FF0000, and white is #FFFFFF.
Code
 
    <div style="background-color: #FF0000;">This div has a red background.</div>
  • RGB (Red, Green, Blue) Values: Colors are defined by specifying the intensity of red, green, and blue light components using a numerical value from 0 to 255 for each. The format is rgb(red, green, blue).
Code
 
    <span style="color: rgb(0, 128, 0);">This text is green.</span>
  • RGBA (Red, Green, Blue, Alpha) Values: An extension of RGB, RGBA includes an “alpha” channel for specifying opacity. The alpha value ranges from 0 (completely transparent) to 1 (completely opaque).
Code
 
    <p style="background-color: rgba(255, 0, 0, 0.5);">This background is semi-transparent red.</p>
  • HSL (Hue, Saturation, Lightness) Values: This method describes colors based on their hue (a degree on the color wheel from 0 to 360), saturation (percentage of color intensity), and lightness (percentage of brightness).
Code
 
    <div style="background-color: hsl(120, 100%, 50%);">This div has a vibrant green background.</div>
  • HSLA (Hue, Saturation, Lightness, Alpha) Values: Similar to RGBA, HSLA adds an alpha channel for opacity to HSL values.
Code
 
    <span style="color: hsla(240, 100%, 50%, 0.7);">This text is semi-transparent blue.</span>
These various methods provide flexibility in defining a vast spectrum of colors for web page elements like text, backgrounds, borders, and more.
Previous
Next