Home About HTML About CSS Using HTML Using CSS History Of HTML History of CSS Web Designers Adding Java Where to Use HTML

BASIC HTML STEPS

Every HTML document must begin with !DOCTYPE html. This is to show that it is an HTML file and not anything else.


As said before, HTML uses tags. Here are some of the most commonly used structure tags:






Here are some of the most commonly used formatting tags:

Please keep in mind that all tags must have two arrows around every tag.


This is how you can create an ordered list in HTML:


As seen above, an ordered list needs to have the tags ol and li. To create an unordered list, just change the ol to ul.


You can also add multiple tags at a time! But be careful, the tags at the end of every text needs to match the order of the tags at the beginning.

In most cases, tags should be "symetrical" from beginning to end.


Adding images, videos, and links can be a little tedious or tricky at first, but after practice it gets easier!



Here are the steps to adding an image to your website:

  1. Download an image or save the link of an image you found.
  2. If you download, make sure it is saved in the same folder as your HTML file is in! Also, make sure the image is saved as .jpg or .jpeg!
  3. Type this into your HTML page: img src=”image-location.jpg” width=”#” height=”#” (don't forget the two arrows!)
  4. Replace "image location" with the name of the picture you would like to use. Replace the # with the scale you want to use.
  5. If using a link, replace the "image location" with the link
  6. Try using the simulator to see if it works!



Here are the steps to adding a video to your website:

  1. Download a video or copy the embedded link if using a YouTube video.
  2. If you download, make sure it is saved in the same folder as your HTML file is in! Also, make sure the video is saved as .mp4!
  3. Type this into your HTML page: video src=”video-location.mp4” width=”#” height=”#” controls Video not supported /video (don't forget the arrows!)
  4. Replace "video location" with the name of the video you would like to use.
  5. If using a link, do not follow step 3, and simply paste the embedded link into your HTML page.
  6. Try using the simulator to see if it works! Only add "video not supported" if you do not see your video.



Here are the steps to adding a link for another website to your website:

  1. Copy the link you want to use.
  2. Type this into your HTML page: a href=”link-location” text in blue /a (don't forget the two arrows!)
  3. Replace "link location" with the link of the website you would like to use. Replace the "text in blue" with what you want people to click on when they click on the link
  4. Try using the simulator to see if it works!



Here are the steps to adding a link to other pages of your website:

  1. Open a new Brackets file, “Save as...”, name the file and make sure the extension is always .html, and save it.
  2. Type this into your HTML page: a href=”Page2_Name.html”>LINK NAME /a (don't forget the two arrows!)
  3. Replace "Page2_Name.html" with the name of the next page of your website. Replace the "LINK NAME" with what you want people to click on when they click on the link
  4. Try using the simulator to see if it works!