HTML: Final Elements

 

Unordered Lists

This is a list made from bullet points. This does NOT need to be in a <p> tag.

List of the basic parts of a computer in an unordered list.

<ul>
<li>Central processing unit</li>
<li>Random access memory</li>
<li>motherboard</li>
<li>power supply</li>
</ul>

 

Ordered Lists

This is a numbered list.

What I need to make a peanut butter sandwich

<ol>
<li>Peanut Butter</li>
<li>bread</li>
<li>spreader</li>
<li>plate</li>
</ol>

Nested Lists

Lists inside of lists. Options for formatting at https://www.w3schools.com/html/html_lists.asp

<ol type=”1″>
<li>Place left hand on peanut butter jar </li>
<li>Grip left hand firmly </li>
<ol type=”A”>Repeat until jar open
<li>Place right hand on top of peanut butter jar cap </li>
<li>Grip right hand firmly on cap </li>
<li>Twist right hand counter-clockwise</li>
<li>Ungrip right hand</li>
<li>Lift right hand 2 inches</li>
<li>Turn right hand clockwise</li>
</ol>
<li>Lift peanut butter jar cap</li>
<li>Move peanut butter jar cap right 12 inches</li>
<li>Lower peanut butter jar cap until on table</li>
<li>Release peanut butter jar cap</li>
</ol>

 

Pictures from local file

There are 2 ways to attach pictures. The first is locally on your machine, the other way is to grab an image from another website.

Local images means that the image is stored on the computer you’re using.

Make sure the picture is stored in the same folder as your code (there are ways around this, but this is the easiest way to do it).

<img src=”laptop.jpg” alt=”my workspace”>

img = image, src = the file name, alt = alt text

Pictures from online

To get pictures from an online source we just need to tweak the tag. First we need the address of the online picture. For this, right click the image and select “Copy image address”. This will save on your clipboard. press ctrl-v to paste it.

Now just change the src part of the tag by pasting the address into the tag.

<img src=”http://wolf-math.com/computer-science/htmlcss” alt=”html”>

Links

Links are important too. That’s how we navigate through the web! Links are made through the a tag!

<a href=”http://wolf-math.com.>I don’t always go to wolf-math.com, but I do…</a>

The destination goes in href, and the link text foes between the tags.

Picture Links

If you want a picture link, instead of text, just put an img tag between the tags.

<a href=”wolf-math.com/”> <img src=”http://wolf-math.com/computer-science/htmlcss” alt=”html”> </a>

Now when you click the picture you’ll be sent to the link.