Basic Coding With HTML
Before proceeding you will need to make a folder called webpages, website, or something similar on your computer. Make sure you save all your web pages here.
Open Notepad by clicking the Start menu and searching for it, or open it by going to All Apps.
Copy the code below and paste it into Notepad.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
After you paste the code go to File > Save as.
Name your file index.html
Change Save as type to All files
Encoding should be UTF-8
Click Save and save it in your website folder.
Test your webpage by going to the folder you saved it in and double-clicking it. It should automatically open in your web browser.
Now using the samples of code below and the Important Tips webpage add the following elements to your web page:
A link to another website of your choice.
At least one image.
A background color.
A centered alignment for every page element.
At least one line of text with a different color.
IMPORTANT TIPS ---> Click Here
<html>: Marks the beginning and end of an HTML document
<head>: Contains information about the document's header, such as SEO, CSS links, scripts, and meta tags
<title>: Specifies the page's title
<body>: Contains the main content
<h1> to <h6>: Defines headings of different sizes
<p>: Defines a paragraph of text
<a href= "add link here">: Creates a hyperlink
<b>: Makes text bold
<strong>: Makes text bold with emphasis
<br>: Creates a break
<div>: A division or part of an HTML document
<i>: Makes text italic
<img>: Contains images in a document
<iframe>: embed another HTML document within your web page.
<audio> and <video>: embed audio and video content on your web page.
<canvas>: create a canvas element that can be used to draw graphics and animations.
<svg>: create scalable vector graphics that can be manipulated using CSS and JavaScript.
<datalist>: provide a list of options for an input field.
<meter> and <progress>: display a meter or progress bar on your web page.
<details> and <summary>: create an expandable section on your web page.
<figure> and <figcaption>: associate a caption with an image or other media.
<dialog>: create a modal dialog box that can be used for displaying messages.
<template>: define a block of HTML that can be cloned and inserted into the web page.