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