an example Link to heading

A HTML file can be supported by CSS and JS.

html Link to heading

  • Pure HTML having following structure
    
    <html>
    
    <head>
    <title>HTML only</title>
    </head>
    
    
    <body>
    
    <h1>Introduction</h1>
    <p>..</p>
    
    
    <h2>Some information</h2>
    <p>..</p>
    
    <h3>First information</h3>
    <p>..</p>
    
    <h3>Last information</h3>
    <p>..</p>
    
    
    <h2>Closing information</h2>
    <p>..</p>
    
    </body>
    
    </html>
    
  • Example is available at
  • Use CTRL+U to view the source.

html + CSS (int) Link to heading

  • HTML with internal CSS having following structure
    
    <html>
    
    <head>
    <title>HTML only</title>
    
    <style type="text/css">
    ..
    </style>
    
    </head>
    
    
    <body>
    
    <h1>Introduction</h1>
    <p>..</p>
    
    
    <h2>Some information</h2>
    <p>..</p>
    
    <h3>First information</h3>
    <p>..</p>
    
    <h3>Last information</h3>
    <p>..</p>
    
    
    <h2>Closing information</h2>
    <p>..</p>
    
    </body>
    
    </html>
    
  • Example is available at
  • Use CTRL+U to view the source.

html + CSS (ext) Link to heading

html + JS (int) Link to heading

  • HTML with internal JS having following structure
    
    <html>
    
    <head>
    <title>HTML only</title>
    
    <script type="text/javascript">
    ..
    </script>  
    
    </head>
    
    
    <body>
    
    <h1>Introduction</h1>
    <button onclick="..;">Info</button>
    <p>..</p>
    
    
    <h2>Some information</h2>
    <p>..</p>
    
    <h3>First information</h3>
    <p>..</p>
    
    <h3>Last information</h3>
    <p>..</p>
    
    
    <h2>Closing information</h2>
    <p>..</p>
    
    </body>
    
    </html>
    
  • Example is available at
  • Use CTRL+U to view the source.

html + JS (ext) Link to heading

html + CSS (ext) + JS (ext) Link to heading

challenges Link to heading

  • Can an element be styled using only style attribute? Show how to do that in an simple example, e.g. makes words in a paragraph right justified and having green color.
  • Explain what is the benefit in using CSS instead of styling every component manually?
  • What is then the flexibilities obtained when using external CSS?
  • What would be the features JS add in styling components?
  • Compare the advantanges between the use of internal and external JS for an HTML file?
  • Give the structure of an HTML file containing support from external CSS and JS.

notes Link to heading