<html lang="en">

<title>HTML in Computing - NativeCS</title>

<link rel=“icon” href=”/images/favicon.ico” type=“image/x-icon”>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

body {

font-family: Arial, Helvetica, sans-serif;

overflow: scroll;

position: absolute;

overflow-x: hidden;

width: 100%;

.topnav {

overflow: hidden;

background-color: #483d8b;

display: flex;

justify-content: center;

.topnav a {

float: left;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

.topnav a {

float: left;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

.topnav a:hover {

background-color: #ddd;

color: black;

.topnav a.active {

background-color: #ff6600;

color: white;

.dropdown {

float: left;

overflow: hidden;

.dropdown .dropbtn {

font-size: 17px;

border: none;

outline: none;

color: white;

padding: 14px 16px;

background-color: inherit;

font-family: inherit;

margin: 0;

.navbar a:hover, .dropdown:hover .dropbtn {

background-color: #ff6600;

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 999;

.dropdown-content a {

float: none;

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

text-align: left;

.dropdown-content a:hover {

background-color: #ddd;

.dropdown:hover .dropdown-content {

display: block;

.header {

padding: 150px; /* some padding */

text-align: center; /* center the text */

background-image: url("images/banner-html.jpg");

background-position:bottom;

color: white; /* white text color */

.header h1 {

font-size: 40px;

.footer {

font-size: 12px;

position:sticky;

left: 0;

bottom: 0;

width: 100%;

background-color: black;

color: white;

text-align: center;

left: 0;

bottom: 0;

overflow: hidden;

opacity: 0.9;

a:link {

color: inherit;

background-color: transparent;

text-decoration: none;

a:hover {

color: yellow;

background-color: transparent;

font-weight: bold;

a:visited {

color: white;

div.page-content {

width: 100%;

max-width: 95%;

flex-wrap: wrap;

justify-content: center;

margin-left: auto;

margin-right: auto;

padding-top: 30px;

div.page-content {

width: 100%;

max-width: 95%;

flex-wrap: wrap;

justify-content: center;

margin-left: auto;

margin-right: auto;

padding-top: 30px;

div.page-content-1 {

width: 100%;

max-width: 95%;

flex-wrap: wrap;

justify-content: center;

margin-left: auto;

margin-right: auto;

padding-top: 30px;

.image {

display: block;

margin-left: auto;

margin-right: 30px;

margin-top: auto;

div.page-content-2 {

width: 100%;

max-width: 95%;

flex-wrap: wrap;

justify-content: center;

margin-left: auto;

margin-right: auto;

padding-top: 30px;

<div class="header">

<div class="topnav">

<a href="index.html">Home</a>

<a href="about.html">About</a>

<div class ="dropdown">

<button class="dropbtn">KS3</button>

<div class="dropdown-content">

<a href="y7.html">Year 7</a>

<a href="y8.html">Year 8</a>

<a href="y9.html">Year 9</a>

</div>

</div>

<div class ="dropdown">

<button class="dropbtn">GCSE</button>

<div class="dropdown-content">

<a href="y10.html">Year 10</a>

<a href="y11.html">Year 11</a>

</div>

</div>

<div class ="dropdown">

<button class="dropbtn">Programming</button>

<div class="dropdown-content">

<a href="python.html">Python</a>

<a href="html.html">HTML</a>

<a href="css.html">CSS</a>

<a href="js.html">JavaScript</a>

</div>

</div>

<a href="ai.html">AI</a>

<a href="resources.html">Resources</a>

<div class ="page-content">

<center><h2>HTML in Computer Science</h2></center>

<p><img src="images/html-float.png" width="300px" height="300px" style="float:left" padding-right="30" class="image">

<p>At both Key Stages 3 and 4 at secondary school level, students are introduced to the concept of web development, which comprises of basic HTML and CSS coding, and are taught the following:</p>

<strong><h3>HTML Foundations</h3></strong>

<p><strong>HTML Tags: </strong>HTML tags are the fundamental building blocks of web pages, used to define the structure and content of a document. Tags are enclosed in angle brackets and come in pairs, with an opening tag indicating the beginning of an element and a closing tag marking its end. Tags can also be standalone, known as empty elements, and are used to embed media, create links, and format text and images.</p>

<p><strong>Head and Body Tag: </strong>In HTML, the < head > and < body > tags divide the document into two main sections. The < head > section contains metadata about the document, such as the title, character encoding, and links to external resources like stylesheets and scripts. The < body > section holds the visible content of the webpage, including text, images, links, and other media.</p>

<p><strong>Headings and Paragraphs: </strong>HTML provides heading tags (< h1 > to < h6 >) to define the hierarchical structure of a document, with < h1 > representing the highest level and < h6 > the lowest. Paragraphs are created using the < p > tag and are used to group and format blocks of text, providing structure and readability to the content.</p>

<p><strong>Fonts and Customizing Fonts: </strong>HTML allows for font customization using CSS (Cascading Style Sheets) to control the appearance of text on a webpage. Through CSS, students can specify font families, sizes, styles (such as bold or italic), colours, and other text properties to achieve the desired visual presentation of text content.</p>

<p><strong>Lists and Tables: </strong>HTML offers tags for creating lists and tables to organize and present information systematically. Lists can be unordered (< ul >), ordered (< ol >), or definition lists (< dl >), while tables (< table >) enable the display of tabular data with rows (< tr >), columns (< td >), and headers (< th >). Students learn to use these elements to structure and format content in a clear and organized manner on web pages.</p>

<strong><h3>Intermediate and Advanced HTML</h3></strong>

<p><strong>div Tags and IDs: </strong>Div tags are versatile container elements in HTML used to group and organize content within a webpage. They do not inherently provide any visual styling or semantic meaning but serve as a structural element to divide the document into logical sections. Div tags are often employed in conjunction with CSS (Cascading Style Sheets) to apply formatting, layout, and styling to the enclosed content, enabling developers to create visually appealing and well-organized web pages.</p>

<p><strong>Classes and IDs: </strong>Classes and IDs are attributes used to apply styling and scripting to specific HTML elements. Classes are reusable identifiers assigned to multiple elements, allowing them to share common styling properties. IDs, on the other hand, provide unique identifiers for individual elements within a document. While classes can be applied to multiple elements, IDs should be unique within the document. Classes and IDs play a crucial role in CSS and JavaScript, enabling developers to target and manipulate specific elements, apply custom styles, and add interactive functionality to web pages.</p>

<br></br>

<center><h2>Creating Multi-page Websites in HTML</h2></center>

<p><strong>Organising Files: </strong>Students learn to organise their website files into a structured directory hierarchy, keeping related files in separate folders for efficient management and navigation.</p>

<p><strong>External Hyperlinks: </strong>HTML allows students to create external hyperlinks to other websites or web pages by specifying the URL in the href attribute of the anchor (< a >) element, enabling users to navigate to external content.</p>

<p><strong>Internal Hyperlinks: </strong>Internal hyperlinks are used to link to different sections or pages within the same website. Students can create internal links by specifying the target page's file path or using anchor tags with IDs to link to specific sections within a page.</p>

<p><strong>Controlling Hyperlinks: </strong>Students learn to control hyperlink behaviour using attributes like target="_blank" to open links in a new browser tab, rel="nofollow" to indicate that the link should not be followed by search engines, and title="..." to provide additional information about the link when hovered over by the user. These attributes help enhance user experience and optimize website functionality.</p>

<div class ="footer">

<p>&copy; 2024-5 | Joshua Levy | <a href="https://nativecs.uk" target="_blank">Native CS UK</a> | <a href="https://github.com/nativeCS" target="_blank">GitHub</a> | <a href="https://replit.com/@nativecomputinguk" target="_blank">Replit</a> | <a href="https://www.credly.com/users/joshualevy23/badges" target="_blank">Teach Computing<a> | <a href="https://dev.to/joshualevy84/" target="_blank">.DEV</a> | <a href="https://app.datacamp.com/profile/joshualevy84" target="_blank">Datacamp</a> | <a href="https://nativenglish.uk" target="_blank">Native English UK</a></p>

<a href="https://www.w3.org/WAI/WCAG2A-Conformance"

title="Explanation of WCAG 2 Level A Conformance">

<img height="32" width="88"

src="https://www.w3.org/WAI/WCAG22/wcag2.2A"

alt="Level A conformance,

W3C WAI Web Content Accessibility Guidelines 2.2">

<a href="http://www.w3.org/html/logo/">

<img src="https://www.w3.org/html/logo/badge/html5-badge-h-css3-graphics-semantics.png" width="100" height="32" alt="HTML5 Powered with CSS3 / Styling, Graphics, 3D &amp; Effects, and Semantics" title="HTML5 Powered with CSS3 / Styling, Graphics, 3D &amp; Effects, and Semantics"> <p xmlns:cc="http://creativecommons.org/ns#" >This work is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-NC-SA 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt=""></a></p>