HTML, CSS and JavaScript Basics

• HTML Reference
• HTML Text and Headings
• HTML Links and Images
• HTML Lists and Tables
• HTML Forms
• HTML Embeds and Comments
• CSS Reference
• JavaScript Reference

HTML Reference

HTML Text and Headings

HTML provides elements for displaying text, headings and page structure.

Headings Headings are used to organise content on a webpage.

HTML provides six heading levels.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Result:

Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Paragraphs Paragraphs are used for normal text content.

This is a paragraph.

This is another paragraph.

Result:

This is a paragraph.

This is another paragraph.

Bold Text Use the strong element to make text bold.

Important information Result:

Important information

Italic Text Use the em element to emphasise text.

Important information Result:

Important information

Line Breaks Use the br element to move text onto a new line.

Line One
Line Two Result:

Line One Line Two

Horizontal Lines Use the hr element to create a horizontal divider.

---

Result:

Subscript Subscript is commonly used in science and mathematics.

H₂O Result:

H2O

Superscript Superscript is commonly used for powers and exponents.

x² Result:

x2

Combining Elements Multiple text elements can be combined.

Science Report

Water is written as H₂O.

The formula for area is x².

Result:

Complete Example

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<p>This is a paragraph.</p>

<strong>Bold text</strong>

<br><br>

<em>Italic text</em>

<hr>

H<sub>2</sub>O

<br>

x<sup>2</sup>

Quick Reference Headings

Heading 1

Heading 6

Paragraph

Paragraph text

Bold Bold text Italic Italic text Line Break
Horizontal Rule

---

Subscript _{Superscript ^{You now know how to create headings and display text content in HTML.}}

Next tutorial: HTML Links and Images

HTML Links and Images

Links allow users to navigate between pages and websites.

Images can be used to display photos, logos and graphics on a webpage.

---

Creating a Link

Use the a element to create a hyperlink.

<a href="page.html">Go to Page</a>

Result:

Go to Page

When clicked, the browser will open the specified page.

---

Linking to Another Website

Use a full web address when linking to an external website.

<a href="https://www.google.com">
    Visit Google
</a>

Result:

Visit Google

---

Opening a Link in a New Tab

Add the target="_blank" attribute.

<a href="https://www.google.com"
   target="_blank"
   rel="noopener noreferrer">

    Visit Google

</a>

Result:

Visit Google

The rel attribute improves security when opening new tabs.

---

Linking to an Email Address

Use the mailto: protocol.

<a href="mailto:teacher@school.com">
    Email Teacher
</a>

Result:

Email Teacher

When clicked, the user's email program will open.

---

Creating an Image

Use the img element.

<img src="images/dog.jpg"
     alt="Photo of a dog">

The src attribute specifies the image location.

The alt attribute provides alternative text if the image cannot be displayed.

---

Setting Image Width

Use the width attribute.

<img src="images/dog.jpg"
     width="100"
     alt="Photo of a dog">

The image will be displayed at 100 pixels wide.

Responsive Images

A responsive image automatically scales to fit different screen sizes.

<img src="images/dog.jpg"
     style="max-width:100%;"
     alt="Photo of a dog">

This is useful for:

• Phones
• Tablets
• Laptops
• Desktop computers

---

Using an Image as a Link

Images can also be used as buttons.

<a href="dogs.html">

    <img src="images/dog.jpg"
         alt="Dog">

</a>

When the image is clicked, the browser will open the specified page.

---

Displaying a Logo

A common use of images is displaying a website logo.

<img src="images/logo.png"
     width="200"
     alt="Company Logo">

---

Creating an Image Gallery

Multiple images can be displayed together.

<img src="images/dog1.jpg"
     width="200"
     alt="Dog 1">

<img src="images/dog2.jpg"
     width="200"
     alt="Dog 2">

<img src="images/dog3.jpg"
     width="200"
     alt="Dog 3">

---

Complete Example

<!DOCTYPE html>

<html>

<head>
    <title>Links and Images</title>
</head>

<body>

    <h1>Links and Images</h1>

    <a href="page.html">
        Internal Page
    </a>

    <br><br>

    <a href="https://www.google.com"
       target="_blank"
       rel="noopener noreferrer">

        Google

    </a>

    <br><br>

    <a href="mailto:teacher@school.com">
        Email Teacher
    </a>

    <br><br>

    <img src="images/dog.jpg"
         width="300"
         alt="Photo of a dog">

</body>

</html>

---

Quick Reference

Internal Link

<a href="page.html">

External Link

<a href="https://website.com">

New Tab

target="_blank"

Email Link

<a href="mailto:someone@email.com">

Image

<img src="image.jpg"
     alt="Description">

Image Width

width="300"

Responsive Image

style="max-width:100%;"

Image Link

<a href="page.html">

    <img src="image.jpg">

</a>

You now know how to create hyperlinks and display images in HTML.

Next tutorial: HTML Lists and Tables

HTML Lists and Tables

Lists and tables are used to organise and display information on a webpage.

Lists are useful for displaying related items, while tables are useful for displaying data in rows and columns.

---

Unordered Lists

An unordered list displays items using bullet points.

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Result:

• HTML
• CSS
• JavaScript

---

Ordered Lists

An ordered list displays items using numbers.

<ol>
    <li>Plan the website</li>
    <li>Create the HTML</li>
    <li>Add CSS styling</li>
</ol>

Result:

1. Plan the website
2. Create the HTML
3. Add CSS styling

---

Nested Lists

Lists can be placed inside other lists.

<ul>

    <li>Web Development

        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>

    </li>

</ul>

Result:

• Web Development
  • HTML
  • CSS
  • JavaScript

---

Definition Lists

Definition lists are useful for displaying terms and descriptions.

<dl>

    <dt>HTML</dt>
    <dd>Creates webpage content.</dd>

    <dt>CSS</dt>
    <dd>Controls appearance and styling.</dd>

</dl>

Result:

HTML

Creates webpage content.

CSS

Controls appearance and styling.

---

Creating a Table

Tables display information in rows and columns.

<table>

    <tr>
        <th>Name</th>
        <th>Score</th>
    </tr>

    <tr>
        <td>Sam</td>
        <td>90</td>
    </tr>

</table>

Result:

Name	Score
Sam	90

---

Understanding Table Elements

Tables are made up of:

Element	Purpose
<table>	Creates the table
<tr>	Creates a row
<th>	Creates a heading cell
<td>	Creates a data cell

---

Adding Multiple Rows

<table>

    <tr>
        <th>Name</th>
        <th>Score</th>
    </tr>

    <tr>
        <td>Sam</td>
        <td>90</td>
    </tr>

    <tr>
        <td>Alex</td>
        <td>85</td>
    </tr>

    <tr>
        <td>Jess</td>
        <td>95</td>
    </tr>

</table>

Result:

Name	Score
Sam	90
Alex	85
Jess	95

Screenshot Placeholder

Insert screenshot showing a table with multiple rows.

---

Adding Borders

Tables often use CSS for styling.

<table border="1">

    <tr>
        <th>Name</th>
        <th>Score</th>
    </tr>

    <tr>
        <td>Sam</td>
        <td>90</td>
    </tr>

</table>

Result:

A table with visible borders.

---

Merging Columns

Use colspan to combine columns.

<table border="1">

    <tr>
        <th colspan="2">
            Student Results
        </th>
    </tr>

    <tr>
        <td>Sam</td>
        <td>90</td>
    </tr>

</table>

Result:

---

Merging Rows

Use rowspan to combine rows.

<table border="1">

    <tr>
        <td rowspan="2">
            Year 10
        </td>

        <td>Sam</td>
    </tr>

    <tr>
        <td>Alex</td>
    </tr>

</table>

---

Complete Example

<!DOCTYPE html>

<html>

<head>
    <title>Lists and Tables</title>
</head>

<body>

    <h1>Lists and Tables</h1>

    <h2>Favourite Subjects</h2>

    <ul>
        <li>Digital Technologies</li>
        <li>Engineering</li>
        <li>Science</li>
    </ul>

    <h2>Student Results</h2>

    <table border="1">

        <tr>
            <th>Name</th>
            <th>Score</th>
        </tr>

        <tr>
            <td>Sam</td>
            <td>90</td>
        </tr>

        <tr>
            <td>Alex</td>
            <td>85</td>
        </tr>

    </table>

</body>

</html>

---

Quick Reference

Unordered List

<ul>
    <li>Item</li>
</ul>

Ordered List

<ol>
    <li>Item</li>
</ol>

Definition List

<dl>
    <dt>Term</dt>
    <dd>Description</dd>
</dl>

Table

<table>

Table Row

<tr>

Table Header

<th>

Table Data

<td>

Merge Columns

colspan="2"

Merge Rows

rowspan="2"

You now know how to create lists and tables in HTML.

Next tutorial: HTML Forms

HTML Forms

Forms allow users to enter and submit information on a webpage.

Forms are commonly used for:

• Login systems
• Registration pages
• Contact forms
• Surveys
• Search boxes

---

Creating a Form

A form is created using the form element.

<form>

</form>

All form controls are placed inside the form element.

---

Text Input

Use the input element to create a text box.

<form>

    <input type="text">

</form>

Result:

---

Adding a Label

Labels describe the purpose of an input.

<form>

    <label>
        Username:
    </label>

    <input type="text">

</form>

Result:

Username:

---

Placeholder Text

Placeholders provide hints to the user.

<input
    type="text"
    placeholder="Enter username">

Result:

---

Password Input

Password fields hide the text being entered.

<input
    type="password"
    placeholder="Enter password">

Result:

---

Email Input

Email inputs help validate email addresses.

<input
    type="email"
    placeholder="Enter email">

Result:

---

Number Input

Number inputs only accept numeric values.

<input
    type="number">

Result:

---

Text Areas

Text areas allow users to enter multiple lines of text.

<textarea>

</textarea>

Result:

---

Checkboxes

Checkboxes allow multiple selections.

<input
    type="checkbox">

HTML

Result:

HTML

---

Radio Buttons

Radio buttons allow a single selection from a group.

<input
    type="radio"
    name="year">

Year 10

<br>

<input
    type="radio"
    name="year">

Year 11

Result:

Year 10

Year 11

---

Dropdown Lists

Use the select element to create a dropdown menu.

<select>

    <option>
        HTML
    </option>

    <option>
        CSS
    </option>

    <option>
        JavaScript
    </option>

</select>

Result:

---

Submit Button

Buttons are used to submit forms.

<button>

    Submit

</button>

Result:

---

Complete Login Form

<form>

    <label>
        Username
    </label>

    <br>

    <input
        type="text"
        placeholder="Username">

    <br><br>

    <label>
        Password
    </label>

    <br>

    <input
        type="password"
        placeholder="Password">

    <br><br>

    <button>

        Login

    </button>

</form>

Screenshot Placeholder

Insert screenshot showing the login form.

---

Form Submission

Forms can send data to another page.

<form
    action="process.php"
    method="post">

</form>

action

Specifies where the data will be sent.

action="process.php"

method

Specifies how the data will be sent.

method="post"

or

method="get"

Most login and registration systems use:

method="post"

---

Complete Example

<!DOCTYPE html>

<html>

<head>
    <title>Forms Example</title>
</head>

<body>

    <h1>Student Registration</h1>

    <form
        action="process.php"
        method="post">

        <label>
            Name
        </label>

        <br>

        <input
            type="text"
            name="name">

        <br><br>

        <label>
            Email
        </label>

        <br>

        <input
            type="email"
            name="email">

        <br><br>

        <label>
            Year Level
        </label>

        <br>

        <select name="year">

            <option>
                Year 10
            </option>

            <option>
                Year 11
            </option>

            <option>
                Year 12
            </option>

        </select>

        <br><br>

        <button>

            Submit

        </button>

    </form>

</body>

</html>

---

Quick Reference

Form

<form>

Text Input

<input type="text">

Password Input

<input type="password">

Email Input

<input type="email">

Number Input

<input type="number">

Text Area

<textarea>

Checkbox

<input type="checkbox">

Radio Button

<input type="radio">

Dropdown

<select>

Button

<button>

Form Action

action="process.php"

Form Method

method="post"

You now know how to collect user input using HTML forms.

Next tutorial: HTML Embeds and Comments

HTML Embeds and Comments

HTML can be used to embed videos, maps and other content into a webpage.

Comments can also be added to help explain code without displaying anything on the page.

---

HTML Comments

Comments are ignored by the browser.

They are useful for explaining code and leaving notes for yourself or other developers.

<!-- This is a comment -->

Example:

<!-- Navigation Menu -->

<nav>

</nav>

Comments are not visible on the webpage.

---

Embedding a YouTube Video

YouTube provides embed code for videos.

Example:

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/W-Q7RMpINVo"
    allowfullscreen>

</iframe>

Result:

A YouTube video displayed on the page.

---

Responsive YouTube Videos

To help videos work on phones and tablets:

<iframe
    width="100%"
    height="315"
    src="https://www.youtube.com/embed/W-Q7RMpINVo"
    allowfullscreen>

</iframe>

The video will automatically adjust to the available width.

---

Embedding a Google Map

Google Maps can also be embedded.

Example:

<iframe
    src="https://www.google.com/maps/embed..."
    width="600"
    height="450">

</iframe>

Result:

An interactive map displayed on the page.

---

Displaying a Video File

Videos stored in your project can be displayed using the video element.

<video
    width="600"
    controls>

    <source
        src="videos/demo.mp4"
        type="video/mp4">

</video>

Result:

A video player with play and pause controls.

---

Displaying Audio Files

Audio can be embedded using the audio element.

<audio controls>

    <source
        src="audio/music.mp3"
        type="audio/mpeg">

</audio>

Result:

An audio player with playback controls.

---

Displaying PDF Files

PDF documents can be embedded directly into a webpage.

<iframe
    src="files/document.pdf"
    width="100%"
    height="600">

</iframe>

Result:

The PDF document is displayed inside the webpage.

---

Common Uses for Embeds

Embeds are commonly used for:

• YouTube videos
• Google Maps
• PDF documents
• Audio players
• Demonstration videos
• Interactive content

---

Complete Example

<!DOCTYPE html>

<html>

<head>
    <title>Embeds Example</title>
</head>

<body>

    <h1>Media Examples</h1>

    <!-- YouTube Video -->

    <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/W-Q7RMpINVo"
        allowfullscreen>

    </iframe>

    <br><br>

    <!-- Audio Player -->

    <audio controls>

        <source
            src="audio/music.mp3"
            type="audio/mpeg">

    </audio>

</body>

</html>

---

Quick Reference

Comment

<!-- Comment -->

YouTube Video

<iframe>

Google Map

<iframe>

Video File

<video>

Audio File

<audio>

PDF

<iframe src="document.pdf">

You now know how to embed media and add comments in HTML.

Next chapter: CSS Reference

CSS Reference

JavaScript Reference