PROGRAMMING FOR THE WEB: HTML
TASK 1 - BASIC PAGE

Open and Close Tags

HTML elements are defined by tags. Most elements have an opening tag and a closing tag.

<tagname>Content goes here...</tagname>

For example:

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

Some elements, like the image tag, are self-closing:

Head and Body

An HTML document is divided into two main sections: the <head> and the <body>.

The <head> contains meta information about the document, while the <body> contains the visible content.

VS Code HTML Template

In Visual Studio Code, you can quickly generate an HTML template by typing ! and pressing Tab in an HTML file.

Basic HTML Tags

Headings

HTML provides six levels of headings:

Paragraphs and Breaks

Paragraphs are for separating distinct blocks of text. They add space before and after the text.

Breaks just move to the next line without adding extra space. Use them for line breaks within a paragraph.

Lists

Unordered lists <ul> create bulleted lists.
Ordered lists <ol> create numbered lists.
List items are defined inside <li> tags.

Strong and Emphasis

<strong>: Indicates strong importance or urgency. The text inside is typically displayed in bold.
<em>: Represents emphasized text, often to convey stress or importance. The text inside is usually shown in italic.

Attributes

Attributes provide additional information about HTML elements: <tag attribute="value">Content</tag>

For example: <a href="https://www.example.com">Visit Example.com</a>

Links

To create a hyperlink we use the <a> tag with the href attribute:

Images

To display an image we use the img tag with the src attribute.
Optionally, you can also specifify alternate text with the alt attribute.

Task 1: Create a Basic Page

We are going to continue practising our terminal commands throughout each project. Here, you will clone the GitHub repository and create the necessary files and folders:

Instructions:

Accept the GitHub Classroom invite
Open VS Code
Create a folder 'Web Programming' using the terminal.
Hint: mkdir
Clone the GitHub repository for this assignment.
E.g. git clone https://github.com/mullumhs/project-16-html-your_username.git
Create the task1.html file using the terminal.
Hint: touch

Remember to commit and push your code when done!
Here are the terminal commands to do so:

Wep Page Requirements:

Your task is to create an HTML page that includes:

A main heading
A picture with a subheading above it
A list of links with a subheading above it

Include any new files to be commited. E.g.
git add task1.html
Commit your changes with a meaningful message:
git commit -am "Your message here"
Note: The -a flag automatically stages all modified files before committing, -m is to add a message.
Push your changes to GitHub:
git push origin main

Version control software such as GitHub is a huge part of Software Engineering and Web Development. It allows you to keep track of your progress, revert to older versions, collaborate with others, and access your code through the cloud from anywhere.

Page updated

Report abuse

PROGRAMMING FOR THE WEB: HTMLTASK 1 - BASIC PAGE