c369 Notes

C369 NOTES
[HTML]
The HTML document itself begins with <html> and ends with </html>
The visible part of the HTML document is between <body> and </body>
<p> - paragraph

<hr> horizontal line

The <hr> tag defines a thematic break in an HTML page or a shift of topic. It is
most often displayed as a horizontal line that is used to separate content (or
define a change) in an HTML page
<br/>
The <br/> tag inserts a break
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
list of common html events:

onclick : the user clicks a html element
onmouseover : the user moves the mouse over a html element
onmouseout : the user moves the mouse away from a html element
onkeydown : the user pushes a keyboard key
onload : browser has finished loading the page
for example, <button onclick="displayDate()">

What time is it?</button>
FORMAT:
<html>
<head>
<title> Page Title </title>
</head>
<body>
<h1> This is a heading </h1>
<p> This is a paragraph </p>
<p> This is another paragraph </p>
<body>
</html>
-----------------------------------------
HYPERLINK------------------------------------------------
<a></a>
The anchor (<a>) element creates a hyperlink to another page.
The <a> tag must also contain a href attribute, which indicates the link's
e.g.
<p> Heres a <a href="https://website"> link to a website </a> </p>
There are six heading elements - <h1>, <h2>… <h6>.

h1 being the biggest size
Add images to your website by using the <img> tag and point to a specific image's
URL using the src attribute.
<img src="https://wwww.website.com/image.jpg">
All <img> elements must have an alt attribute. The text inside an alt attribute is
used for **screen readers to improve accessibility and is displayed if the image
fails to load;
<img src="https://www.website.com/image.jpg" alt="What this picture is supposed to

show">
Similar to the hyperlink <a href="…"> tag, the HTML <button> Element defines
it to be clickable.
<button> my clickable button </button>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>C369 Module – heading </h1>
<p>Lesson 8 is HTML - paragraph.</p>
</body>
</html>
-----------------------------------------------------------------------------------
-------------
ORDERED LISTS
<ol>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ol>
UNORDERED LIST
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
COLOURS
<h1 style="background-color:DodgerBlue;">Hello Class </h1>
<p style="background-color:Tomato;">How are you doing ? </p>
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="color:blue;">C369 Module heading blue </h1>
<p style="color:red;">Lesson 8 on HTML – paragraph red </p>
<p style="color:yellow;">Lesson 9 on CSS – paragraph yellow </p>
-----------------------------------------------------------------------------------
---------------
ROWS & COLUMNS

<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Headers at the top of a web page: <header>

Navigation areas: <nav>
Sections : <section>
Articles, for newspapers and blogs : <article>
Footer at the bottom of a page: <footer>
Divs, used to group content together: <div>
-----------------------------------------------------------------------------------
---------
FONT SIZE:
## Put this at the top of the codes to assign it to the h1 at the bottom ##
h1 {
font-size: 30px;
}
FONT TYPE:
h2 {
font-family: sans-serif;
}
Just like with fonts, we'll use px (pixels) to specify the image's width.
For example, if we wanted to give all HTML <img> Elements a width of 500 pixels,
we'd use:
img {
width: 500px;
}
CSS has a property called height that controls an element's height.

Just like width, we'll use both px (pixels) or % (percentage) to specify the
Element’s height:
img {
height: 500px;
}
-------------------------------------------------------------------------------
ALIGNING CODE
if we wanted all our text to be center, we would use the code below:
p {
text-align: center;
}
You can set an Element’s background colour with the background-color property:
html_element {
background-color: green;
}
---------------------------------------------------------------------------------
IMAGE BORDERS:
img {
border-color: red;
border-width: 5px;
border-style: solid;
}
BORDER RADIUS:
img {
border-radius: 50%;
}
(L10)
Arithmetic operators – addition (+), subtraction (-), multiplication (*), and
division (/).
Remainder operator – remainder operator (%) helps to get the remainder left over
when one value is divided by another value
Assignment operators – assignment operators (=) assigns a value or an expression

to a variable
Unary operators – +x Unary Plus -x Unary Minus

++x Increment Operator(Prefix) -–x Decrement Operator(Prefix)
x++ Increment Operator (Postfix) x–- Decrement Operator (Postfix)
Comparison operators –comparison operators to compare two values.

<less than >greater than <= less than or equal to
>=greater than or equal to ==equal to
!=not equal to
Logical operators – NOT (!), AND (&&), and OR (||).
Logical assignment operators – ||=, &&=, and ??=
Exponentiation operator – (**) calculates a base to the exponent power, which is

similar to Math.pow() method.
document.getElementById() = changes the element content

e.g <!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello

JavaScript!"'>Click Me!</button>
</body>
</html>
change html attribute values. for example,

<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button"
onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>
</body>
</html>
createTextNode() : creates a text node

c369 Notes

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

c369 Notes

Uploaded by

Copyright:

Available Formats

C369 NOTES

<hr> horizontal line

<b> - Bold text

<strong> - Important text

<i> - Italic text

<em> - Emphasized text

<mark> - Marked text

<small> - Smaller text

<del> - Deleted text

<ins> - Inserted text

<sub> - Subscript text

<sup> - Superscript text

list of common html events:

for example, <button onclick="displayDate()">

There are six heading elements - <h1>, <h2>… <h6>.

<img src="https://www.website.com/image.jpg" alt="What this picture is supposed to

<button> my clickable button </button>

<h1 style="background-color:rgb(255, 99, 71);">...</h1>

<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="color:blue;">C369 Module heading blue </h1>

<p style="color:red;">Lesson 8 on HTML – paragraph red </p>

<p style="color:yellow;">Lesson 9 on CSS – paragraph yellow </p>

ROWS & COLUMNS

Headers at the top of a web page: <header>

CSS has a property called height that controls an element's height.

Assignment operators – assignment operators (=) assigns a value or an expression

Unary operators – +x Unary Plus -x Unary Minus

Comparison operators –comparison operators to compare two values.

Logical operators – NOT (!), AND (&&), and OR (||).

Logical assignment operators – ||=, &&=, and ??=

Exponentiation operator – (**) calculates a base to the exponent power, which is

document.getElementById() = changes the element content

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello

change html attribute values. for example,

<p id="demo">JavaScript can change the style of an HTML element.</p>

createTextNode() : creates a text node

You might also like