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 styles refer to the methods used to define the visual presentation of HTML elements on a web page. While HTML primarily focuses on structuring content, styles (typically implemented with CSS) control how that content appears, including aspects like colors, fonts, sizes, spacing, and layout.
There are three main ways to apply styles in HTML:
  • Inline Styles: These are applied directly to individual HTML elements using the style attribute. This method allows you to set specific CSS properties and values for a single element.
Code
 
    <p style="color: blue; font-size: 16px;">This text is blue and 16px.</p>
  • Internal Styles: These are defined within a <style> tag placed in the <head> section of an HTML document. This allows you to define styles for multiple elements within that specific HTML document.
Code
 
    <head>      <style>        h1 {          color: red;          text-align: center;        }        p {          font-family: Arial, sans-serif;        }      </style>    </head>
  • External Stylesheets: This is the most recommended and common method for styling web pages. Styles are defined in a separate .css file and linked to the HTML document using the <link> tag in the <head> section. This allows for consistent styling across multiple HTML pages and easier maintenance.
Code
 
    <head>      <link rel="stylesheet" href="styles.css">    </head>
(And in styles.css file):
Code
 
    body {      background-color: powderblue;    }    h1 {      color: navy;    }
In essence, HTML styles, powered by CSS, provide the means to transform raw, structured content into visually appealing and user-friendly web pages.
Previous
Next