Scribd
Upload
27 views7 pages

c369 Notes

Uploaded by

phoenixsparkle22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
27 views7 pages

c369 Notes

Uploaded by

phoenixsparkle22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

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

<!--This is a comment. Comments are not displayed in the browser-->

<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

You might also like