HTML Lists & Links

In this section, we will cover HTML lists.

HTML Lists

• There are three types of lists:

• Unordered lists

• Represented by bullets (• ,•, •)

• Ordered lists

• Represented by numbers (1, 2, 3)

• Description lists (previously called definition lists, but renamed in HTML5)

HTML Unordered Lists

• Unordered lists are defined by <ul></ul> tags.

• Within the <ul></ul> tags, <li></li> tags are used to define the individual items under the list.

• Refer to the code below:

HTML Ordered Lists

• Ordered lists are defined by <ol></ol> tags.

• Within the <ol></ol> tags, <li></li> tags are used to define the individual items under the list.

• Refer to the code below:

HTML Links

• On your web page, you can make clickable links that take you to other websites.

• The "HT" in HTML stand for HyperText, which means a system of linked text.

• HTML links can link to any web page online, whether it is a website, a location on Google Maps, or a video on YouTube.

• It can also link to another HTML file.

HTML Links Syntax

• The anchor tag <a></a> is used to define a link.

• The destination of the link is defined in the href attribute.

Anatomy of an HTML Link for Webpages

Adding Pages

• To add linked pages to your initial web page:

1. Create a new HTML file.

2. Connect it to your CSS file.

3. Save the new HTML file in the same folder as your other HTML and CSS files.

4. Create a link in your initial web page that connects to your new HTML file (syntax below).

• The link is not a web link, but a filename.

Anatomy of an HTML Link for Files

Inserting Images in HTML

• Web pages are not just about text, it is a multimedia. You can also design it using images.

• The img tag is used to put an image in an HTML document.

• To implement images to your web page you must either:

• Copy the image address link or

• Save the picture to your computer, and copy the file name.

Images From a Web Link

• When inserting an image with a web link ...

• Inside the img tag...

• You add the src attribute, which will contain the image address link.

• In case the image does not display, you also include the alt attribute, which replaces the image with a title.

• Refer to the code below:

Images From Your Computer

• When inserting an image from a computer…

• Inside the img tag...

• You add the src attribute, which will contain the filename. For example: ”imagename.jpg”.

• In case the image does not display, you also include the alt attribute, which replaces the image with a title.

• Refer to the code below: