Windows: Click the Windows Start icon. Type “Notepad”. Click Notepad. Mac: Click the magnifying glass in the upper-right corner. Type “TextEdit” in the search bar and press Enter. Click New Document.

Click the Windows Start icon. Type “Notepad”. Click Notepad.

Click the magnifying glass in the upper-right corner. Type “TextEdit” in the search bar and press Enter. Click New Document.

On Mac, simply click Save.

PC: Use the drop-down menu next to “Save as type:” and select “All Files (,)”. Then manually erase the “. txt” extension at the end fo the file name and replace it with “. html”. Mac: Click the drop-down menu next to “File format” at the bottom of the save window. Then click select “Web Page (. html)” in the drop-down menu. This will add the “. html” extension at the end of the file name automatically

In HTML, everything has an opening tag and a closing tag. When you create a new HTML tag, you must always remember to add a closing tag. Otherwise, it won’t work. The “” tag should always remain at the top of the document, and the “” tag should always remain at the bottom of the document. The rest of your HTML code will go in between these two tags.

It usually contains the document title, templates, links to related pages, and special coding instructions for the web browser. It can also contain a style language known as CSS (Cascading Style Sheets).

This includes text, images, clickable buttons, links, the background color, background image, or anything else that appears on-screen when viewing your website from within a web browser. [2] X Research source

<!doctype html>Document title

There are six header tags you can use in HTML that are of different sizes. “

” is the largest header, and “

” is the smallest header.

Color: To change the color of the text, type “color:[color name];” after “style=” in the HTML tag. Type the actual name of a color, or a hexadecimal color code in place of “[color name]”. For example, to change the header color to red, you would type

as the opening tag. Font: To change the text font, type “font-family:[font name];” after “style=” in the HTML tag. For example, to change the paragraph text to Garamond, you would type

. It’s important to remember that not all fonts are accessible from any computer. Web safe fonts that you can use include; Arial, Arial Black, Roboto, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Bookman, Comic Sans MS, Candara, and Impact. [4] X Research source Text size: To change the size of the text, type “font-size:[size in percent (%) or pixels (px)];” after “style=” in the HTML tag. For example, if you want to change the header size to 50 pixels tall, you would type <h1 style=“font-size=50px;>”. Alignment: You can align your text to the left, center, or right, by typing “text-align:[alignment];” after “style=” in the HTML tag. For example, if you want your header to be centered at the top of the page, you would type

.

Color: To change the color of the text, type “color:[color name];” after “style=” in the HTML tag. Type the actual name of a color, or a hexadecimal color code in place of “[color name]”. For example, to change the header color to red, you would type

as the opening tag. Font: To change the text font, type “font-family:[font name];” after “style=” in the HTML tag. For example, to change the paragraph text to Garamond, you would type

. It’s important to remember that not all fonts are accessible from any computer. Web safe fonts that you can use include; Arial, Arial Black, Roboto, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond, Bookman, Comic Sans MS, Candara, and Impact. [4] X Research source Text size: To change the size of the text, type “font-size:[size in percent (%) or pixels (px)];” after “style=” in the HTML tag. For example, if you want to change the header size to 50 pixels tall, you would type <h1 style=“font-size=50px;>”. Alignment: You can align your text to the left, center, or right, by typing “text-align:[alignment];” after “style=” in the HTML tag. For example, if you want your header to be centered at the top of the page, you would type

.

Type “

    ” to start a numbered list, or “
      ” to start a bulleted list. Type “
    • ” to create a new listed item. Use the “

      ” tag to add text for the listed item. Type the text for the list item. Type

      to close the text portion of the listed item. Type “
      • ” to close the listed item tag. Repeat for all other list items. Type “
” or “” to close your list tag at the end of the list.

<!doctype html> <html>   <head>     <title>Peanut Butter and Jelly Sandwich</title>   </head>   <body>      <h1 style="color:red; align:center;">How to Make a Peanut Butter and Jelly Sandwich </h1> <br> <h2>Ingredients:</h2> <ul> <li>Peanut Butter</li> <li>Jelly</li> <li>Bread</li> </ul> <br> <p>Smear the peanut butter on the bread and put jelly on top.

Then place a slice of bread on top. Cut it in half

<!doctype html> <html>   <head>     <title>Peanut Butter and Jelly Sandwich</title>   </head>   <body>      <h1 style="color:red; align:center;">How to Make a Peanut Butter and Jelly Sandwich </h1> <br> <h2>Ingredients:</h2> <ul> <li>Peanut Butter</li> <li>Jelly</li> <li>Bread</li> </ul> <br> <p>Smear the peanut butter on the bread and put jelly on top.

Then place a slice of bread on top. Cut it in half

Alternatively, you can also set a background image in the Body tag. To do so, typeas the body tag. Replace “[image URL]” with the web address or location of the image you want to use.

Alternatively, you can also set a background image in the Body tag. To do so, typeas the body tag. Replace “[image URL]” with the web address or location of the image you want to use.

You can adjust the size of an image by adding “height=” and “width=” followed by the height and width of the image in pixels in the image tag. For example, “’’’ You can also center an image by typing the opening tag

before the tag, and
after the image tag.

You can adjust the size of an image by adding “height=” and “width=” followed by the height and width of the image in pixels in the image tag. For example, “’’’ You can also center an image by typing the opening tag

before the tag, and
after the image tag.

Type <a href= to start the link tag. Add the URL of the page you want to link to in quotations after “a href=”. Type > to close the opening tag of the link. Type text you want to use for your link after the opening tag. Alternatively, you can use an image tag to use an image as a clickable link. Type to close the HTML link tag. An example, the tag Click here to learn how to link renders Click here to learn how to link.

<!doctype html> <html>   <head>     <title>Document title</title>   </head>   <body style="background-color:black;">      <center>        <img src="https://www.

mywebsite. com/logo_banner. png>
<a href=“https://www. mywebsite. com/home><img src=“https://www. mywebsite. com/home_button. jpg> <a href=“https://www. mywebsite. com/page2><img src=“https://www. mywebsite. com/next_button. jpg>

About Us
<p style=‘color:white;">A little about us. . .