Fall'23
Fall'23
Tags Description
<h1> Heading
<p> Paragraph
<br> Break
Links HTML links are defined with the <a> tag.
<h1> defines the most important heading. <h6> defines the least
HTML Headings
important heading.
Each HTML heading has a default size. However, you can specify the
Bigger Headings
size for any heading with the style attribute, using the CSS font-
size property.
<h1 style="font-size:60px;">Heading 1</h1>
<body style="background-color:powderblue;">
Background Color
The CSS font-family property defines the font to be used for an HTML
Fonts
element.
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
The CSS font-size property defines the text size for an HTML element.
Text Size
<h1 style="font-size:300%;">This is a heading</h1>
The CSS text-align property defines the horizontal text alignment for an
Text Alignment
HTML element.
<h1 style="text-align:center;">Centered Heading</h1>
<b> - Bold text
HTML <strong> - Important text
Formatting <i> - Italic text
Elements <em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
<p style="background-image: url('img_girl.jpg');">
HTML Backgroun
d Images
HTML Tables
HTML tables allow web developers to arrange data into rows and
columns.
<table>
<tr>
<th>Company</th>
<th>Contact</th> ‘header of group’
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td> ‘table data cell element’
</tr>
<tr> ‘<tr>: The Table Row element’
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
A navigation bar needs standard HTML as a base. A navigation bar is
CSS Navigation
basically a list of links, so using the <ul> and <li> elements makes
Bar
perfect sense.
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
JavaScript Can
One of many JavaScript HTML methods is getElementById().
Change HTML
Content
The example below "finds" an HTML element (with id="demo"), and
changes the element content (innerHTML) to "Hello JavaScript".
document.getElementById("demo").innerHTML = "Hello JavaScript";
<script> Tag
In HTML, JavaScript code is inserted
between <script> and </script> tags.
<script>
document.getElementById("demo").innerHTML = "My First
JavaScript";
</script>
JavaScript
JavaScript can "display" data in different ways:
Display
Possibilities
Writing into an HTML element, using innerHTML.
Writing into the HTML output using document.write().
Writing into an alert box, using window.alert().
1. String
JavaScript Data
2. Number
Types
3. Bigint
4. Boolean
5. Undefined
6. Null
7. Symbol
8. Object
JavaScript Functio A JavaScript function is a block of code designed to perform a particular
ns task.