# HTML, CSS and JavaScript Basics # 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. H2O Result: H2O Superscript Superscript is commonly used for powers and exponents. x2 Result: x2 Combining Elements Multiple text elements can be combined.

Science Report

Water is written as H2O.

The formula for area is x2.

Result: Complete Example Text Example

Heading 1

Heading 2

This is a paragraph.

Bold text

Italic text
H2O
x2 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. ```html Go to Page ``` 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. ```html Visit Google ``` Result: Visit Google --- ## Opening a Link in a New Tab Add the `target="_blank"` attribute. ```html Visit Google ``` Result: Visit Google The `rel` attribute improves security when opening new tabs. --- ## Linking to an Email Address Use the `mailto:` protocol. ```html Email Teacher ``` Result: Email Teacher When clicked, the user's email program will open. --- ## Creating an Image Use the `img` element. ```html Photo of a dog ``` The `src` attribute specifies the image location. The `alt` attribute provides alternative text if the image cannot be displayed. ![Photo of a Dog](https://mr.napper.au/uploads/images/gallery/2026-06/dog.jpg) --- ## Setting Image Width Use the `width` attribute. ```html Photo of a dog ``` The image will be displayed at 100 pixels wide. Photo of a Dog ## Responsive Images A responsive image automatically scales to fit different screen sizes. ```html 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. ```html Dog ``` When the image is clicked, the browser will open the specified page. Dog --- ## Displaying a Logo A common use of images is displaying a website logo. ```html Company Logo ``` --- ## Creating an Image Gallery Multiple images can be displayed together. ```html Dog 1 Dog 2 Dog 3 ``` --- ## Complete Example ```html Links and Images

Links and Images

Internal Page

Google

Email Teacher

Photo of a dog ``` --- ## Quick Reference ### Internal Link ```html ``` ### External Link ```html ``` ### New Tab ```html target="_blank" ``` ### Email Link ```html ``` ### Image ```html Description ``` ### Image Width ```html width="300" ``` ### Responsive Image ```html style="max-width:100%;" ``` ### Image Link ```html ``` 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. ```html ``` Result: - HTML - CSS - JavaScript --- ## Ordered Lists An ordered list displays items using numbers. ```html
  1. Plan the website
  2. Create the HTML
  3. Add CSS styling
``` Result: 1. Plan the website 2. Create the HTML 3. Add CSS styling --- ## Nested Lists Lists can be placed inside other lists. ```html ``` Result: - Web Development - HTML - CSS - JavaScript --- ## Definition Lists Definition lists are useful for displaying terms and descriptions. ```html
HTML
Creates webpage content.
CSS
Controls appearance and styling.
``` Result: [![](https://mr.napper.au/uploads/images/gallery/2026-06/scaled-1680-/image-1781436252459.png)](https://mr.napper.au/uploads/images/gallery/2026-06/image-1781436252459.png)
HTML
Creates webpage content.
CSS
Controls appearance and styling.
--- ## Creating a Table Tables display information in rows and columns. ```html
Name Score
Sam 90
``` Result: | Name | Score | |--------|--------| | Sam | 90 | --- ## Understanding Table Elements Tables are made up of: | Element | Purpose | |----------|----------| | `` | Creates the table | | `` | Creates a row | | `
` | Creates a heading cell | | `` | Creates a data cell | --- ## Adding Multiple Rows ```html
Name Score
Sam 90
Alex 85
Jess 95
``` 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. ```html
Name Score
Sam 90
``` Result: A table with visible borders. [![](https://mr.napper.au/uploads/images/gallery/2026-06/scaled-1680-/image-1781436313967.png)](https://mr.napper.au/uploads/images/gallery/2026-06/image-1781436313967.png) --- ## Merging Columns Use `colspan` to combine columns. ```html
Student Results
Sam 90
``` Result: [![](https://mr.napper.au/uploads/images/gallery/2026-06/scaled-1680-/image-1781436364355.png)](https://mr.napper.au/uploads/images/gallery/2026-06/image-1781436364355.png) --- ## Merging Rows Use `rowspan` to combine rows. ```html
Year 10 Sam
Alex
``` [![](https://mr.napper.au/uploads/images/gallery/2026-06/scaled-1680-/image-1781436405953.png)](https://mr.napper.au/uploads/images/gallery/2026-06/image-1781436405953.png) --- ## Complete Example ```html Lists and Tables

Lists and Tables

Favourite Subjects

  • Digital Technologies
  • Engineering
  • Science

Student Results

Name Score
Sam 90
Alex 85
``` --- ## Quick Reference ### Unordered List ```html
  • Item
``` ### Ordered List ```html
  1. Item
``` ### Definition List ```html
Term
Description
``` ### Table ```html ``` ### Table Row ```html ``` ### Table Header ```html
``` ### Table Data ```html ``` ### Merge Columns ```html colspan="2" ``` ### Merge Rows ```html 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. ```html
``` All form controls are placed inside the form element. --- ## Text Input Use the `input` element to create a text box. ```html
``` Result: --- ## Adding a Label Labels describe the purpose of an input. ```html
``` Result: --- ## Placeholder Text Placeholders provide hints to the user. ```html ``` Result: --- ## Password Input Password fields hide the text being entered. ```html ``` Result: --- ## Email Input Email inputs help validate email addresses. ```html ``` Result: --- ## Number Input Number inputs only accept numeric values. ```html ``` Result: --- ## Text Areas Text areas allow users to enter multiple lines of text. ```html ``` Result: --- ## Checkboxes Checkboxes allow multiple selections. ```html HTML ``` Result: HTML --- ## Radio Buttons Radio buttons allow a single selection from a group. ```html Year 10
Year 11 ``` Result: Year 10
Year 11 --- ## Dropdown Lists Use the `select` element to create a dropdown menu. ```html ``` Result: --- ## Submit Button Buttons are used to submit forms. ```html ``` Result: [![](https://mr.napper.au/uploads/images/gallery/2026-06/scaled-1680-/image-1781436573670.png)](https://mr.napper.au/uploads/images/gallery/2026-06/image-1781436573670.png) --- ## Complete Login Form ```html






``` > **Screenshot Placeholder** > > Insert screenshot showing the login form. --- ## Form Submission Forms can send data to another page. ```html
``` ### action Specifies where the data will be sent. ```html action="process.php" ``` ### method Specifies how the data will be sent. ```html method="post" ``` or ```html method="get" ``` Most login and registration systems use: ```html method="post" ``` --- ## Complete Example ```html Forms Example

Student Registration










``` --- ## Quick Reference ### Form ```html
``` ### Text Input ```html ``` ### Password Input ```html ``` ### Email Input ```html ``` ### Number Input ```html ``` ### Text Area ```html