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 with external CSS having following structure
<html> <head> <title>HTML only</title> <link rel="stylesheet" type="text/css" href=".." /> </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 + 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 with external JS having following structure
<html> <head> <title>HTML only</title> <script type="text/javascript" src=".."></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 + CSS (ext) + JS (ext) Link to heading
- HTML with external CSS and JS having following structure
<html> <head> <title>HTML only</title> <link rel="stylesheet" type="text/css" href=".." /> <script type="text/javascript" src=".."></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.
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
- Session 1045-1200.
- Zoom 83135105424.
- Google Form rmk4T5UN3yAWJnSK9.