Bookmark this on Delicious
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 >. 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:
NB: the code <br> is used to move the cursor to the next line.
Display the HTML file in your browser:
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.
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 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).
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 ... the computer forums of MyComputerForum !
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:
| Attributes | Values |
| color | blue |
| red | |
| green | |
| ... | |
| size | 1 |
| 2 | |
| ... | |
| 7 |
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):
Nom de la couleur Codage RVB Aperçu aliceblue aliceblue #F0F8FF antiquewhite antiquewhite #FAEBD7 aqua aqua #00FFFF aquamarine aquamarine #7FFFD4 azure azure #F0FFFF beige beige #F5F5DC bisque bisque #FFE4C4 black black #000000 blanchedalmond blanchedalmond #FFEBCD blue blue #0000FF blueviolet blueviolet #8A2BE2 brown brown #A52A2A burlywood burlywood #DEB887 cadetblue cadetblue #5F9EA0 chartreuse chartreuse #7FFF00 chocolate chocolate #D2691E coral coral #FF7F50 cornflowerblue cornflowerblue #6495ED cornsilk cornsilk #FFF8DC crimson crimson #DC1436 cyan cyan #00FFFF darkblue darkblue #00008B darkcyan darkcyan #008B8B darkgoldenrod darkgoldenrod #B8860B darkgray darkgray #A9A9A9 darkgreen darkgreen #006400 darkkhaki darkkhaki #BDB76B darkmagenta darkmagenta #8B008B darkolivegreen darkolivegreen #556B2F darkorange darkorange #FF8C00 darkorchid darkorchid #9932CC darkred darkred #8B0000 darksalmon darksalmon #E9967A darkseagreen darkseagreen #8FBC8F darkslateblue darkslateblue #483D8B darkslategray darkslategray #2F4F4F darkviolet darkviolet #9400D3 deeppink deeppink #FF1493 deepskyblue deepskyblue #00BFFF dimgray dimgray #696969 dodgerblue dodgerblue #1E90FF firebrick firebrick #B22222 floralwhite floralwhite #FFFAF0 forestgreen forestgreen #228B22 fuschia fuschia #FF00FF gainsboro gainsboro #DCDCDC ghostwhite ghostwhite #F8F8FF gold gold #FFD700 goldenrod goldenrod #DAA520 gray gray #808080 green green #008000 greenyellow greenyellow #ADFF2F honeydew honeydew #F0FFF0 hotpink hotpink #FF69B4 indianred indianred #CD5C5C indigo indigo #4B0082 ivory ivory #FFFFF0 khaki khaki #F0E68C lavender lavender #E6E6FA lavenderblush lavenderblush #FFF0F5 lawngreen lawngreen #7CFC00 lemonchiffon lemonchiffon #FFFACD lightblue lightblue #ADD8E6 lightcoral lightcoral #F08080 lightcyan lightcyan #E0FFFF lightgoldenrodyellow lightgoldenrodyellow #FAFAD2 lightgreen lightgreen #90EE90 lightgrey lightgrey #D3D3D3 lightpink lightpink #FFB6C1 lightsalmon lightsalmon #FFA07A lightseagreen lightseagreen #20B2AA lightskyblue lightskyblue #87CEFA lightslategray lightslategray #778899 lightsteelblue lightsteelblue #B0C4DE lightyellow lightyellow #FFFFE0 lime lime #00FF00 limegreen limegreen #32CD32 linen linen #FAF0E6 magenta magenta #FF00FF maroon maroon #800000 mediumaquamarine mediumaquamarine #66CDAA mediumblue mediumblue #0000CD mediumorchid mediumorchid #BA55D3 mediumpurple mediumpurple #9370DB mediumseagreen mediumseagreen #3CB371 mediumslateblue mediumslateblue #7B68EE mediumspringgreen mediumspringgreen #00FA9A mediumturquoise mediumturquoise #48D1CC mediumvioletred mediumvioletred #C71585 midnightblue midnightblue #191970 mintcream mintcream #F5FFFA mistyrose mistyrose #FFE4E1 moccasin moccasin #FFE4B5 navajowhite navajowhite #FFDEAD navy navy #000080 oldlace oldlace #FDF5E6 olive olive #808000 olivedrab olivedrab #6B8E23 orange orange #FFA500 orangered orangered #FF4500 orchid orchid #DA70D6 palegoldenrod palegoldenrod #EEE8AA palegreen palegreen #98FB98 paleturquoise paleturquoise #AFEEEE palevioletred palevioletred #DB7093 papayawhip papayawhip #FFEFD5 peachpuff peachpuff #FFDAB9 peru peru #CD853F pink pink #FFC0CB plum plum #DDA0DD powderblue powderblue #B0E0E6 purple purple #800080 red red #FF0000 rosybrown rosybrown #BC8F8F royalblue royalblue #4169E1 saddlebrown saddlebrown #8B4513 salmon salmon #FA8072 sandybrown sandybrown #F4A460 seagreen seagreen #2E8B57 seashell seashell #FFF5EE sienna sienna #A0522D silver silver #C0C0C0 skyblue skyblue #87CEEB slateblue slateblue #6A5ACD slategray slategray #708090 snow snow #FFFAFA springgreen springgreen #00FF7F steelblue steelblue #4682B4 tan tan #D2B48C teal teal #008080 thistle thistle #D8BFD8 tomato tomato #FF6347 turquoise turquoise #40E0D0 violet violet #EE82EE wheat wheat #F5DEB3 white white #FFFFFF whitesmoke whitesmoke #F5F5F5 yellow yellow #FFFF00 yellowgreen yellowgreen #9ACD32
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:
HTML Code Output <b>Bold</b> Bold text <i>Italic</i> Italic <i>Italic</i> Underlined <s>Crossed</s> Crossed<div align="center">Centered</div> Centered<div align="left">Left</div> Left<div align="right">Right</div> Right
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.
Next tutorial: Blocks, paragraphs, lists, tables
Previous tutorial: Structure of HTML files
Back to computer forums