Jump to content

How to add Text/fonts, links, images in HTML


Recommended Posts

TEXT/FONTS, LINKS, IMAGES - ADDING CONTENT TO YOUR HTML PAGES

A Webpage is created in order to deliver some specific content; in this respect, you will need to understand what kind of content you are able to publish on a webpage and what are the methods to use.

TEXT/FONTS, LINKS, IMAGES - DIFFERENT KINDS OF CONTENT

A webpage can contain text, links (also called URLs), images, videos ... each kind of content will be inserted in a different way (using different tags) in order to be recognized by the web browsers. Below, we will deal with the main categories of web content.

TEXT/FONTS, LINKS, IMAGES - ADDING SOME TEXT TO YOUR HTML PAGE

You can insert text anywhere within the body of your HTML page, at the location where you expect it to be displayed. There is no particular syntax to insert text; however, you must pay special attention to certain special or reserved characters, which will require a particular treatment.

For instance, if you want to type the arithmetic sign "greather than", you must not use the '>' key; instead, you must type the code &gt;. Using the '>' key directly might work for a while, but because this symbol plays a role in the declaration of HTML elements (such as <head>), it will surely generate a lot of errors as the complexity of your file increases.

TEXT/FONTS, LINKS, IMAGES - ADDING LINKS TO YOUR HTML PAGE

Links (also called "URLs", for "Uniform Resource Locators") can be added in order to redirect your visitors from one page to another page (or resource). Upon clicking a link, the destination resource can appear in a new window or can be displayed in the current one (that from where the link has been clicked). Let's now have a look at the syntax using the example from the previous HTML tutorials.

Learn the HTML code:

Posted Image

NB: the code <br> is used to move the cursor to the next line.

Display the HTML file in your browser:

Posted Image

Absolute links vs relative links

One can distinguish between two methods of linking:

Absolute linking: the full name of the destination URL is specified by the attribute href.

Relative linking: the destination path is given relatively to the position of the HTML file where the link was put. For instance, assuming you want to establish a link from the file http://example.com/file1.html to the file http://www.example.com/folder/file2.html, it will be enough to establish a link pointing to folder/file2.html as follows:

<a href="folder/file2.html">Caption of the link</a>

Whenever possible, you should prefer relative linking because:

If someday you move the pages of your website to another domain name, you won't have to re-code all the links from all the pages (which can be a very strenuous work if your website contains a lot of pages).

TEXT/FONTS, LINKS, IMAGES - INSERTING IMAGES AND VIDEOS INTO YOUR HTML PAGE

How to insert images

The procedure to insert images in your HTML pages is very easy; all you need is to use the following code:

<img src="URL" alt="Title">

where URL must be replaced with the URL to the image and Title must be replaced with a caption for that picture. In fact, the alt attribute is optional, and you could very well use the simpler syntax:

<img src="URL">.

However, I will explain to you a few lines below why from a strategic standpoint it is preferrable to use the alt attribute.

Extension of your image (file type)

When you insert images into your HTML pages, do keep in mind that your visitors must consume bandwidth in order to display them; nonetheless, not everybody enjoys a high-speed DSL connection and a visitor with a slow Internet connection might navigate away from your website if the HTML pages are to slow to load. This is the reason why you shall prefer to save an image with the *.JPG extension (instead of the *.BMP extension which gives you huge files taking ages to load). You might also want to save your images as *.PNG files (the difference between PNG and JPEG files is that PNG compression preserves all the information while JPEG compression induces information loss, thus yielding even smaller files most of the time)

Hotlinking

Hotlinking means displaying on your webpage a picture which is hosted on another website. For instance, assume that you are the owner of http://www.domain1.com/ and that on the HTML page http://www.domain1.com/page1.html you insert the link:

<img src="http://www.domain2.com/image.jpg" alt="Title">

The image which is being displayed does not come from your website but from another one (called domain2). As a result, whenever a visitor to your website visits page1.htlm, it will automatically trigger the download and display of image.jpg from the website domain2. Therefore, this means that you will be using (stealing) the owner of domain2's bandwidth, which is a very immoral practice (imagine what happens if domain1 receives a lot of traffic, something like 1 million pageviews per month ...) .

In order to avoid hotlinking, display only pictures which are hosted on your own servers. Additionally, there exist ways to prevent hotlinking (you can have a look at the control panel provided by your webhost for solutions against hotlinking).

Using an image as a link

In order to use an image as a link, you can simply insert your image as a caption for this link; as a result, this image will become clickable and whenever a visitor will click it, it will be sent to the target URL (just like a simple link):

<a href="URL"><img src="image_url"></a>

where URL must be replaced with the URL of the webpage you want to link to, and image_url must be replaced with the URL of the image you want to use as a link. An example is given below, with that funny logo taking you back to Homepage of GizmoLord forum !

<a href="http://forum.gizmolord.com"><img src="https://lh4.googleusercontent.com/-FHCdjFUUaEI/TmYMm9EmywI/AAAAAAAABLM/uTDmpfvaFwU/computer.jpg"></a>

Why you must give a caption to your images

We mentioned that the alt attribute (which allows you to give a caption to an image) is optional but that it is preferrable to use it whenever possible. The reason for this is that a lot of image search engines allow users to find images based on their filenames and captions (Google Image is such a service), and it has been shown that a lot of traffic can be driven to your website through those image search engines.

TEXT/FONTS, LINKS, IMAGES - HOW TO DETERMINE THE FONTS

Whenever some text is typed (under plain text or within other elements such as links), it is possible to use the element font in order to determine the characteristics of this text. In order to do this, several attributes can be attached to the font element. The most important ones are listed in the table below:

Posted Image

Remarks:

In order to define the size of text more accurately, you shall use CSS stylesheets (tutorials will be dedicated to this subject).

Similarly, you can use the hexadecimal representation of colors; for instance, <font color="red">This is red</font> can be rewritten <font color="#FF0000">This is red</font>. In this way, it is possible for you to use just any color that you want. If you want to have an overview of the "plain words" colors which are available to you, just have a look at the table below (as you can see, they are in very limited number, whence the need to use hexadecimal representations; we will explain to you how HTML handles the hexadecimal representation of colors in the following paragraph):

Hexadecimal representation of colors in HTML

HTML allows you to use an hexadecimal representation of colors, where each color is encoded over 3 bytes (which means that you have access to roughly 2^24 = 16 million colors). The encoding of a color is as follows:

The first byte (corresponding to the first 2 hexadecimal digits following the # symbol) records the quantity of red within the color; since 1 byte = 8 bits, this gives you 2^8 = 256 different possible levels of intensity, i.e. from 0 to 255. The same reasoning applies for the second byte (=green) and finally to the third byte (=blue). For instance, imagine that you want your color to be made of 80% of red, 0% of green and 45% of blue (which should give you some kind of purple). 80% of red corresponds to an intensity level of 80% x 255 = 204, which in hexadecimal writing corresponds to CC (because 204 = 16x12+1x12).

Similarly, 0% of green corresponds to 00.

40% of blue corresponds to 73 (40% x 255 = 115 = 16x7+1x3).

Now all we need to do is to attach these 3 codes together and prefix them with the # symbol in order to obtain #CC0073, which is the hexadecimal code of the color we just described. Visually, this corresponds to this color.

Other text properties

The table presented below introduces some other text properties that might prove useful:

Posted Image

Remark:

You probably noticed that the syntax used in order to align the text is a little more complicated. In fact, in HTML, the element div denotes a block of elements to which are applied a common set of attributes. In this example, the attribute align tells us about the alignment of the text (left, center or right). When you learn about CSS stylesheets, you will make extensive use of div/span blocks and you will realize how assigning an id/class to such blocks can, when combined with CSS stylesheets, make the formatting of your webpage a lot easier (and fancier).

In this tutorial, we have seen how to add some content to the body of an HTML file and how to define the properties of that content. Obviously, our list was far from exhaustive and its purpose was just to provide a short introduction and to get you familiar with the HTML environment.

Link to post
Share on other sites
  • 2 months later...
  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...