html css js

September 12, 2023

an example

A HTML file can be supported by CSS and JS.

html

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
- https://dudung.github.io/hello-website/html-css-js/00.html .
Use CTRL+U to view the source.

html + CSS (int)

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
- https://dudung.github.io/hello-website/html-css-js/01.html .
Use CTRL+U to view the source.

html + CSS (ext)

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
- https://dudung.github.io/hello-website/html-css-js/02.html ,
- https://dudung.github.io/hello-website/html-css-js/02.css .
Use CTRL+U to view the source.

html + JS (int)

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
- https://dudung.github.io/hello-website/html-css-js/03.html .
Use CTRL+U to view the source.

html + JS (ext)

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
- https://dudung.github.io/hello-website/html-css-js/04.html ,
- https://dudung.github.io/hello-website/html-css-js/04.js .
Use CTRL+U to view the source.

html + CSS (ext) + JS (ext)

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

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

Session 1045-1200.
Zoom 83135105424 .
Google Form rmk4T5UN3yAWJnSK9 .