Kyperlan

|/   _  _  _| _  _ 
|\\/|_)(/_| |(_|| |
  / |

Learn HTML [Without tracking]

Lastest update [2021/08/14]
QR Code
Content
License
+
[RU] Русский

"HTML pre-alpha knowledge"

Search engines use the HTML headings to index the structure and content of a website.
You can use this HTML, CSS, Javascript Editor to modify/try HTML code [Can be used offline] [Without tracking].
Try to not use other HTML editors, most of them include "6oogle Analytics Cancer" tracking scripts.
Try to use less Javascript, this may affect the loading speed of a website with low bandwidth.

Firefox Browser Tips

Search for text on a website
- Press [CTRL] + [F]

View the source code of a website
- Press [Right-click] > Press [V]

Edit/Delete/View the source code of a website
- Press [CTRL] + [SHIFT] + [C] > "Pick an element"

Save the modified source code in a ".html" file
- Press [F12] > "Pick the <html> tag in the top of the editor" > Press [Right-click] > Select Copy > Select Outter HTML > Open a HTML/text editor of your trust > Press [Right-click] > Select Paste > "Save as "website.html""

Content

HTML Basic

HTML CSS

HTML head Elements

HTML Scripts
- Insert a script
- Use of the <noscript> tag

HTML Media

HTML Basic

HTML document

<!DOCTYPE html>
<html>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

HTML headings

<!DOCTYPE html>
<html>
  <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
  </body>
</html>

HTML paragraphs

<!DOCTYPE html>
<html>
  <body>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </body>
</html>

HTML links

<!DOCTYPE html>
<html>
  <body>
    <h2>HTML Links</h2>
    <p>HTML links are defined with the a tag:</p>
    <a href="https://kyperlan.neocities.org">This is a link</a>
  </body>
</html>

HTML images

<!DOCTYPE html>
<html>
  <style>
    #px {
      image-rendering: -moz-crisp-edges;
      image-rendering: -o-crisp-edges;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: pixelated;
      image-rendering: -o-pixelated;
    }
  </style>
  <body>
    <h2>HTML Images</h2>
    <p>HTML images are defined with the img tag:</p>
    <p>For pixel art and others like the image below: If you delete "id=px" inside the img tag or "#px" inside the style tag, "the image will die"</p>
    <img id="px" src="https://kyperlan.neocities.org/neocitiespx.png" alt="kyperlan.neocities.org_favicon" width="256" height="256">
  </body>
</html>

HTML buttons

<!DOCTYPE html>
<html>
  <body>
    <h2>HTML Buttons</h2>
    <p>HTML buttons are defined with the button tag:</p>
    <button>Click me</button>
  </body>
</html>

HTML lists

<!DOCTYPE html>
<html>
  <body>
    <h2>An Unordered HTML List</h2>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>  
    <h2>An Ordered HTML List</h2>
    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol> 
</body>
</html>

HTML CSS

HTML with inline CSS

<!DOCTYPE html>
<html>
  <body>
    <h1 style="color:blue;">A Blue Heading</h1>
    <p style="color:red;">A red paragraph.</p>
  </body>
</html>

HTML with internal CSS

<!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>

HTML with external CSS

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

HTML with CSS fonts

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: blue;
        font-family: verdana;
        font-size: 300%;
      }
      p  {
        color: red;
        font-family: courier;
        font-size: 160%;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

HTML with CSS using the id attribute

<!DOCTYPE html>
<html>
  <head>
    <style>
      #p01 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p id="p01">I am different.</p>
  </body>
</html>

HTML with CSS using the class attribute

<!DOCTYPE html>
<html>
  <head>
    <style>
      p.error {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p class="error">I am different.</p>
    <p>This is a paragraph.</p>
    <p class="error">I am different too.</p>
  </body>
</html>

HTML and CSS borders

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border: 2px solid powderblue;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
</body>
</html>

HTML and CSS padding

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border: 2px solid powderblue;
        padding: 30px;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
  </body>
</html>

HTML and CSS margin

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border: 2px solid powderblue;
        margin: 50px;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
  </body>
</html>

HTML and CSS full demo

<!DOCTYPE html>
<html>
  <body>
    <div style="position:relative;">
      <div style="opacity:0.5;position:absolute;left:50px;top:-30px;width:300px;height:150px;background-color:#40B3DF"></div>
      <div style="opacity:0.3;position:absolute;left:120px;top:20px;width:100px;height:170px;background-color:#73AD21"></div>
      <div style="margin-top:30px;width:360px;height:130px;padding:20px;border-radius:10px;border:10px solid #EE872A;font-size:120%;">
        <h1>CSS = Styles and Colors</h1>
        <div style="letter-spacing:12px;font-size:15px;position:relative;left:25px;top:25px;">Manipulate Text</div>
        <div style="color:#40B3DF;letter-spacing:12px;font-size:15px;position:relative;left:25px;top:30px;">Colors,
          <span style="background-color:#B4009E;color:#ffffff;"> Boxes</span></div>
      </div>
    </div>
  </body>
</html>

HTML head Elements

A valid HTML document with no <html>, <body> and <head>

<!DOCTYPE html>
<title>Page Title</title>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

A valid HTML document with no <head> element

<!DOCTYPE html>
<html>
  <title>Page Title</title>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

The <title> element defines the document title

<!DOCTYPE html>
<html>
<head>
  <title>A Meaningful Page Title</title>
  </head>
  <body>
    <p>The content of the body element is displayed in the browser window.</p>
    <p>The content of the title element is displayed in the browser tab, in favorites and in search-engine results.</p>
  </body>
</html>

The <style> element contains style information

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <style>
      body {background-color: powderblue;}
      h1 {color: red;}
      p {color: blue;}
    </style>
  </head>  
  <body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

The <link> element defines a relationship to an external resource

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <link rel="stylesheet" href="mystyle.css">
  </head>
  <body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

The <meta> element defines special meta information

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="John Doe">
  </head>
  <body>
    <p>All meta information goes inside the head section.</p>
  </body>
</html>

The <script> element defines client-side JavaScripts

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
      }
    </script>
  </head>
  <body>
    <h1>My Web Page</h1>
    <p id="demo">A Paragraph</p>
    <button type="button" onclick="myFunction()">Try it</button>
  </body>
</html>

The <base> element defines the base URL for all URLs

<!DOCTYPE html>
<html>
  <head>
    <base href="https://kyperlan.neocities.org" target="_blank">
  </head>
  <body>
    <h1>The base element</h1>
    <p><img src="/neocitiespx.png" width="128" height="128" alt="kyperlan.neocities.org_favicon"> - Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "https://kyperlan.neocities.org/neocitiespx.png".</p>
  </body>
</html>

HTML Scripts

Insert a script

<!DOCTYPE html>
<html>
  <body>
    <h2>Use JavaScript to Change Text</h2>
    <p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script> 
  </body>
</html>

Use of the <noscript> tag

<!DOCTYPE html>
<html>
  <body>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script>
    <noscript>Sorry, your browser does not support JavaScript!</noscript>
    <p>A browser without support for JavaScript will show the text written inside the noscript element.</p>
  </body>
</html>

HTML Media

Play a video file

<!DOCTYPE html> 
<html> 
  <body> 
    <video width="400" controls>
      <source src="https://raw.githubusercontent.com/wearefractal/recorder/master/examples/mov_bbb.mp4" type="video/mp4">
      <source src="https://raw.githubusercontent.com/wearefractal/recorder/master/examples/mov_bbb.ogg" type="video/ogg">
      Your browser does not support HTML video.
    </video>
    <p>
      Video courtesy of 
      <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
    </p>
  </body> 
</html>

Play an audio file in HTML

<!DOCTYPE html>
<html>
  <body>
    <audio controls>
      <source src="https://raw.githubusercontent.com/wearefractal/recorder/master/examples/mov_bbb.ogg" type="audio/ogg">
      Your browser does not support the audio element.
    </audio>
  </body>
</html>

Play a Invidious/YouTube video in HTML

<!DOCTYPE html>
<html>
  <body>    
    <iframe width="420" height="345" src="https://ytprivate.com/embed/tgbNymZ7vqY">
    </iframe>    
  </body>
</html>

QR Code

Scan/Save/Print the following QR Code to open this web site

License

[Ripped, Modified - qx46cHCINIFYQ8XH] Content section - "W35chools"
[Modified - IqK7q7kZfmuSeAQL] HTML, CSS, Javascript Editor - Rio Astamal - MIT
[Modified - IqK7q7kZfmuSeAQL] QR Code Generator - Joohansson - GPLv3
This web site is licensed under a Creative Commons Attribution 4.0 International License
By IqK7q7kZfmuSeAQL

+

This web site tools [Can be used offline]
- HTML Editor
- QR Code Generator
Resources