Images in HTML
Using HTML, we can display images in our web pages. However, before we can display images, we must first upload it to our web server or have the image uploaded somewhere on the web. You cannot display an image from your local computer until you upload it to the internet.
The syntax for an HTML image is:
The “src” attribute for the image tag defines the location of our image. Once again, make sure the image is uploaded to the web. As a rule of thumb, if the path to an image begins with “http://” then it is uploaded to the web.
We can also resize our image and enlarge or shrink it by using the “width” and “height” attributes. Here’s an example:
<image src="path/to/your/image" width="10" height="100">
The “width” and “height” properties can also be expressed as a percentage:
<image src="path/to/your/image" width="50%" height="50%">
Hyperlinks in HTML
Hyperlinks (or “links” for short) gives the user something to click that will automatically browse them to a different web page. It allows us to tie documents together and create navigation to help the user browse around our website. Links can point to both internal pages on your website or to an external page on another website.
The syntax for a link is:
<a href="/path/to/a/web/page">Link Text</a>
The “a” stands for “anchor.” The “href” attribute defines which web page or URL the user will be directed to. The “Link Text” in the above example enclosed in the <a> tags is the text for the link that your users will actually see. They will not see a URL, but when they click on the link text, they will be pointed to the URL stated in the “href” attribute.
If you want to make your link open in a new window, simply add the “target” attribute as shown below:
<a href="/path/to/a/web/page" target="newWindow">Link Text</a>
At times, we may want to “center” text or elements in our documents. We can do this using the <center> tag:
<center>This text is centered.</center>
This will output:
This text is centered.
It’s important to note the <center> tag can be used to center anything including images
In our First HTML Page Chapter, we discussed the body tag very briefly. However, what we did not tell you was that the body tag actually contains special attributes you can define to make your document more appealing.
Among these attributes include the “background” and “bgcolor” attributes. These attributes are used for your page background. The “background” attribute is to define your background image. If you do not wish to use an image but a solid color instead, you can use the “bgcolor” attribute to define the color or hex code of your background.
Here’s the “bgcolor” property in action:
The “#0000ff” hex code is for the color blue. Thus, the above code will create a solid blue background for our web page.
Body tag attributes can also be used to define text and link colors. For example, the “link” tag is used to set the colors of your links. By default, browsers usually set the link color to blue. The “vlink” attribute defines the color of a link the user has already visited. The “text” property sets the text color of the text in the document.
Here’s an example of all the above attributes in action:
<body link="#0000ff" vlink="#ff0000" text="#00ff00">
This code will set all default link colors to blue, the visited links to red, and the text of the page to green.
In HTML, there are two types of lists: ordered and unordered.
An ordered list numbers each list item numerically. The code for an ordered list is as follows:
The above code will produce:
- 1. Red
- 2. Blue
- 3. Green
The <ol> tag creates an “ordered list.” The <li> tag is used to create a list item.
To create an unordered list, we can use the following code:
The above code will produce a bulleted list.
The code for an un-ordered list is nearly the same as the order list’s syntax. However, you may notice we used the <ul> tag instead of the <ol> tag.