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:
<img src="image.jpg" alt="An image">
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.
In Visual Studio Code, you can quickly generate an HTML template by typing ! and pressing Tab in an HTML file.
HTML provides six levels of headings:
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.
Unordered lists <ul> create bulleted lists.
Ordered lists <ol> create numbered lists.
List items are defined inside <li> tags.
<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 provide additional information about HTML elements: <tag attribute="value">Content</tag>
For example: <a href="https://www.example.com">Visit Example.com</a>
To create a hyperlink we use the <a> tag with the href attribute:
To display an image we use the img tag with the src attribute.
Optionally, you can also specifify alternate text with the alt attribute.
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.