Web Design Lesson 010 – Links, Images and Lists

Let us cover some more elements.

Links

HTML links are hyperlinks.These links create the world wide web.

HTML links are hyperlinks.These links create the world wide web.

Links enable jumping to another web page/document/website just by a single click.

Link elements are defined with the <a> tag.

<a href="https://www.google.com">Google Search</a>

URL specifies the uniform resource locator i.e. the address of the document you are trying to access. If
on the same site, it can even be a relative path to the document. HTML provides visual cues to indicate whether
a page has already been visited and functionality to customize the visual cues.

Images

Following is the syntax to embed images into an HTML document.

<img src="https://www.google.com/logos/doodles/2018/holidays-2018-northern-hemisphere-day-2-5676669204430848-law.gif" alt="sorry this is an error please revisit later" style="width:100px;height:90px;">

src is the url/address of the image, alt is the alternate text to display in case the image is not viewable in the browser and
style allows formatting the size of the image.
Please note this is an empty HTML element. Hence, there is no end tag.

Lists

HTML supports both unordered and ordered (numbered) lists. Following is the syntax of ordered lists:

<ol>
  <li>List item1</li>
  <li>List item2</li>
  <li>List item3</li>
</ol>

To make the lists start counting from a number other than 1, which is default, use the “start” attribute. There is also a “type” attribute which can have values 1,A,a,I,i which denote numbering using numbers (default),capital letters, lower case letters, capital roman numbers, lower roman numbers respectively.

Check the following output:

<ol start="23" type="I">
  <li>List item1</li>
  <li>List item2</li>
  <li>List item3</li>
</ol>

Here is how you can use unordered lists:

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

CSS property style list-style-type is used to modify the the
list item marker, default is bullets. It can be set to disc(default, denoting bullets),circle , square or none (no marks).

Try the following:

<ul style="list-style-type:circle">
  <li>List item1</li>
  <li>List item2</li>
  <li>List item3</li>
</ul>