Share it: 
LESSON 3
Now you will know the way the browser works or respond to the html code you implement. Some examples to show it...
<body bgcolor="#ffffff">
Whatever you like
anything!
</body>
<body bgcolor="#ffffff">
Now...
what is
the result
using
this?
</body>
The browser does not recognize the format. Unless you point it out, the browser will display letters and words in a normal way. If you want to start a new line, you have to use the respective tag.
<body bgcolor="#ffffff">
Now...<br />
what is<br />
the result<br />
using<br />
this?
</body>
<br /> tells the browser "start a new line". <p> is similar to <br />, but offers a double row and, from there, starts with the next line of text.
<body bgcolor="#ffffff">
Now...<p>
what is<p>
the result<p>
using<p>
this?
</body>
<p> is one of the few tags that does not require a closing tag, but to comply with HTML standards it is always recommended to close a tag with the respective pair. <p> is not intended to produce several blank lines, if you type <p><p><p> you won't get 3 blank lines, all you will get is only 1 line. How to get 3 blank lines? Let me show you...
<body bgcolor="#ffffff">
Whatever you like
</body>
Browsers only recognize 1 space. Silly, right? Don't complaint. This is intended to allow you to have a better control when displaying your page.
You need to use ==> to get a space like the one produced by the spacebar... try it....
<body bgcolor="#FFFFFF">
Whatever
you
like
</body>
Symbol "&" tells the browser the beginning of a special character, while ";" represents the ending point of the special character. Letters inside these symbols are a contraction of what they represent. There are six special characters that are commonly used when creating web pages (always in lower case):
(non-breaking space or blank space)
< (less than symbol "<")
> (greater than symbol ">")
& (symbol "&")
" (quotation ")
­ (hyphen -)
There is no need to use them all at the same time, but with some experience you will know when to use them. Most of "WYSIWYG" ("What You See Is What You Get") web design software allow you to create web pages without writing HTML code.
Don't worry if you fail to type them in a correct way, just remember that "fixing things is the best way to learn"
--and "Fatty" (my pc) knows what I mean after more than 9 hard disc formatting
sessions.Back to our topic... if you press the "ENTER" (RETURN) key the browser will take it as a single space. Example...
<body bgcolor="#ffffff">
Whatever
<br />you<br />like<br />
any<br />thing!
</body>
Now type in the following...
<body bgcolor="#ffffff">
<center>Whatever you like</center>
</body>
All code placed between <CENTER> tags will be centered. This tag has been "deprecated" (forced to go out of business). When you learn about CSS (Cascading Style Sheets) you will know what I mean... meanwhile lets go ahead.
Hey! Almost forgot something... to get several blank lines you have to create a blank space " " and then place the break line "<BR />"...
<body bgcolor="#ffffff">
Whatever you<br />
<br />
<br />
<br />
<br />
<br />
like
</body>
Now you will learn how to include an image in your page. We will use the one shown below (an image of an old main page of my website). You can download it to your computer to try the example or you can use anyone of yours. To download it.... right click the image and select "Save Image As..."
You specify an image with the tag <IMG /> (image).
<body bgcolor="#ffffff">
<img />
</body>
Now indicate the path and dimensions of the image.
<body bgcolor="#ffffff">
<img src="lecci3a.jpg" width="150" height="110" />
</body>
Notice that the path does not only specify the image, but also indicates where it is located. The path shown above "lecci3a.jpg" suggest the browser to look for the image named "lecci3a.jpg" in the same folder or directory where the html file is located.
A different way to specify the path is with the use of an absolute URL. Example: src="http://www.imeil.com.mx/imagenes/imeil.gif"
I bet you are wondering what is the advantage to use relative URLs (partial or short) versus absolute URLs (entire path). The answer to this question is simple... because your links will work in any web server or computer where you keep them, pages will load faster and you won't need to edit anything to change all URLs on your site every time you move them to a different server or directory.
Something important to know when dealing with images and their dimensions. Try this...
<body bgcolor="#ffffff">
<img src="lecci3a.jpg" />
</body>
As you can see, the browser automatically establish the current dimensions for the image. Then... why to worry? Without a deep explanation... because your browser load images faster when you indicate dimensions.
Do you think is not an important issue? Look...
<body bgcolor="#ffffff">
<img src="lecci3a.jpg" widht="200" height="68" />
</body>
<body bgcolor="#ffffff">
<img src="lecci3a.jpg" width="20" height="100" />
</body>
You can establish any dimensions you want. Still wondering what is the important issue? Ok, see this little red point -->
<--.
Its size is 2x2 pixels. Now look what we can do altering their dimensions...<body bgcolor="#ffffff">
<img src="punto.gif" width="510" height="1" /><p>
<img src="punto.gif" width="510" height="2" /><p>
<img src="punto.gif" width="510" height="5" /><p>
<center><img src="punto.gif" width="2" height="200" /></center>
</body>
Understood?
[Lesson 1]
[Lesson 2]
[Lesson 3]
[Lesson 4]
[Lesson 5]
[Lesson 6]
[Comments]
Reproduction of this tutorial is not allowed, please read the following links for further information:
Term of Use / Privacy Policy
Reproduction of this tutorial is not allowed, please read the following links for further information:
Term of Use / Privacy Policy