HGS - Computing Science

HTML

Hyper Text Markup Language (HTML) is the foundation of web pages. It structures the content and elements displayed on a website.

Each of these technologies plays a crucial role in modern web development. HTML provides structure, CSS enhances design, and JavaScript introduces functionality.

HTML

Creates the content of the webpage

CSS

controls the visual appearance of a webpage, including layout, colors, and fonts.

Javascript

adds interactivity to web pages, enabling dynamic elements like animations, form validation, and interactive user experiences.

Main Tags and Structure

<!DOCTYPE html>

<HTML>

<head>

<title></title>

</head>

<body>

</body>

</HTML>

<!DOCTYPE html> - This lets the browser software know the version of HTML it is about to find in the file. It should come before the opening <html> tag.

HTML - Encloses all other content of the page.

HEAD - title, css, scripts and meta tags

TITLE - The title tag which goes in the head area is displayed in the browser window/tab.

BODY - The content of the page goes here

Text Tags

Paragraph Tags

The <p> tag is used to define paragraphs in HTML. Browsers automatically add spacing before and after paragraphs to improve readability.

Headings

HTML provides six levels of headings, from <h1> (largest) to <h6> (smallest). Headings create structure and improve readability.

Best Practices:

✅ Use only one <h1> per page (improves SEO).
✅ Use <h2> for major sections and <h3>–<h6> for subsections.
❌ Avoid skipping levels (e.g., jumping from <h1> to <h4>).

Lists

HTML supports two main types of lists: unordered (bulleted) and ordered (numbered).

Unordered Lists

Ordered Lists

Nested Lists

Lists can be nested inside each other for more structure.

Text Styling

HTML provides several inline elements to style text.

Line Breaks

The <br> tag forces text onto a new line without starting a new paragraph.

⚠ Note: <br> should not be overused for layout purposes—use CSS for proper spacing.

Media Tags

Image Tags

<IMG> allows you to display graphics on your webpage.

Example:

src attribute: Specifies the file path of the image.
alt attribute: Provides alternative text if the image fails to load, improving accessibility.

Audio

The <audio> tag lets you embed audio content in a webpage.

Example:

controls attribute: Displays play, pause, and volume buttons.
source element: Defines multiple formats for browser compatibility.

Video

The <video> tag allows you to embed video files into a webpage.

Example:

controls attribute: Adds built-in video player controls.
Multiple <source> elements: Helps ensure cross-browser support.

Links and Layout

Hyperlinks

Hyperlinks allow users to navigate between different webpages or external websites. The <a> tag is used to create a hyperlink.

The href attribute defines the destination of the link.

Example:

Anchor Link

Anchor links help users navigate within the same page, jumping to a specific section.

Syntax:

Create the link to the jump section:

2. Create the section to jump to (with an ID):

When the link is clicked, the page will automatically scroll to the Video Section.

DIV Tag

The <div> tag is used to group elements together for styling and layout purposes.

<h1>Using Div Tags</h1>

<div style="background:lime">

<h3>This is a heading in a div element. And all content inside it is styled the same.</h3>

<p>This heading is inside the original div</p>

</div>

<div style="background:lightblue; font-size:12px; color:red;">

<p>This is some text in a seperate div element. All content inside it is styled the same.</p>

</div>

<p>This is some text not inside a DIV.</p>

Google Sites

Report abuse