Please enable JavaScript.

Coggle requires JavaScript to display documents.

Unit 21 - Coggle Diagram

- - - - this highlights text
    - - this deletes/removes text
    - - The HTML <ins> element defines inserted/added text.
  - - - Complex structure using <div>
        
        <div style="background-color:black;color:white;padding:20px;">
        
        <h2>London</h2>
        
        <p>London is the capital city of England. It is the most populous
        city in the United Kingdom,
        with a metropolitan area of over 13 million inhabitants.</p>
        
        </div>
  - - - <h1>My <span style="color:red">Important</span> Heading</h1>
  - - - Structure
        
        <!DOCTYPE html>
        
        <html>
        
        <head>
        
        <style>
        
        span.note {
        font-size: 120%;
        color: red;
        }
        </style>
        </head><body><h1>My <span class="note">Important</span> Heading</h1><p>This is some <span class="note">important</span> text.</p>
        </body>
        </html>
      - Select Elements With a Specific Class
        
        <style>
        .city {
        background-color: tomato;
        color: white;
        padding: 10px;
        }
        
        </style><h2 class="city">London</h2><p>London is the capital of England.</p>
        <h2 class="city">Paris</h2>
        <p>Paris is the capital of France.</p>
        <h2 class="city">Tokyo</h2>
        <p>Tokyo is the capital of Japan.</p>
- - - - 
      - <p>This is a paragraph.</p>
      - 
  - - - NOTE (2px) is for the thickness of the coloured border line
  - - - <style>
      - a:link {
        
        color: green;
        
        background-color: transparent;
        
        text-decoration: none;
        }
      - a:visited {
        
        color: pink;
        
        background-color: transparent;
        
        text-decoration: none;
        }
      - a:hover {
        
        color: red;
        
        background-color: transparent;
        
        text-decoration: underline;
        }
      - a:active {
        
        color: yellow;
        
        background-color: transparent;
        
        text-decoration: underline;
        }
      - </style>
  - - - <style>
      - </style>
      - a:link, a:visited {
        background-color: #f44336;
        color: white;
        padding: 15px 25px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        }
      - a:hover, a:active {
        background-color: red;
        }
  - - - <h2 id="C4">Chapter 4</h2>
    - - <a href="#C4">Jump to Chapter 4</a>
    - - <a href="html_demo.html#C4">Jump to Chapter 4</a>
  - - - <iframe src="demo_iframe.htm" style="border:none;"></iframe>
    - - <iframe src="demo_iframe.htm" style="border:2px solid red;"></iframe>
    - - <iframe src="demo_iframe.htm" name="iframe_a"></iframe><p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
  - - - <img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
    - - <img src="/images/picture.jpg" alt="Mountain">
- - - - table, th, td {
      - border: 1px solid black;
        }
    - - table, th, td {
      - border: 1px solid black;
      - border-collapse: collapse;
        }
- - - - <style>
      - body {
      - </style>
      - background-image: url('img_girl.jpg');
        }
  - - - Format Support
        
        Some browsers or devices may not support all image formats. By using the <picture> element, you can add images of all formats, and the browser will use the first format it recognizes and ignore any of the following.
      - bandwidth
        
        If you have a small screen or device, it is not necessary to load a large image file. The browser will use the first <source> element with matching attribute values, and ignore any of the following elements.
- - - - NOT NESTED
        
        <li>Coffee</li>
        
        <li>Tea</li>
        
        <li>Milk</li>
      - </ul>
      - <ul>
    - - <ul style="list-style-type:disc;">
      - <ul style="list-style-type:circle;">
      - <ul style="list-style-type:square;">
      - <ul style="list-style-type:none;">
    - - <ul>
      - <li>Coffee</li>
      - </ul>
      - <li>Tea
      - </li>
      - <ul>
      - <li>Milk</li>
      - <li>Black tea</li>
      - </ul>
      - <li>Green tea</li>
  - - - <ol>
      - <li>Coffee</li>
        <li>Milk</li>
        <li>Tea</li>
      - </ol>
    - - <ol type="1">
      - <ol type="A">
      - <ol type="a">
      - <ol type="I">
      - <ol type="i">
    - - <ol start="50">
    - - <ol>
      - <li>Coffee</li><li>Tea<ol>
        <li>Black tea</li>
        <li>Green tea</li>
        </ol>
        </li>
        <li>Milk</li>
        </ol>
- - - - uses the style attribute of an HTML element.
        
        <h1 style="color:blue;">A Blue Heading</h1>
    - - is defined in the <head> section of an HTML page, within a <style> element.
        
        <!DOCTYPE html><html>
        <head>
        <style>
        body {background-color: powderblue;}
        h1 {color: blue;}
        p {color: red;}
        </style>
        </head>
        <body>
        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>
        </body>
        </html>
    - - To use an external style sheet, add a link to it in the <head> section of each HTML page:
        
        <head>
        <link rel="stylesheet" href="styles.css">
        </head>
      - Make a code in notepad and save it as .css for the style attached in the html so that it can open in a browser
        
        body {
        background-color: powderblue;
        }
        h1 {
        color: blue;
        }
        p {
        color: red;
        }
  - - - full URL
        
        <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
      - links to a style sheet located in the html folder on the current web site
        
        <link rel="stylesheet" href="/html/styles.css">
      - links to a style sheet located in the same folder as the current page
        
        <link rel="stylesheet" href="styles.css">
- - - - <html lang="en-US">