HTML Language Exercises for Beginners
Uploaded by
ScribdTranslationsHTML Language Exercises for Beginners
Uploaded by
ScribdTranslationsWebsite creation.
HTML languageHTML, acronym for HyperText Markup Language ("hypertext markup language"),
HTML Language Exercises (I)
Exercise 1
1.- Open Notepad and write the following text:
<HTML>
<HEAD>
<TITLE>Mi primera página</TITLE>
<HEAD>
<BODY>
<CENTER><H1>My first page</H1></CENTER>
<HR>
This is my first page
</BODY>
</HTML>
2.- Save it with the name [Link]
3.- Start the browser and open the file you just created.
Exercise 2
Edit the file [Link] and put the following body on the page.
TITLE 1
TITLE 2
H3 TITLE 3
<H4>TÍTULO 4</H4>
TITLE 5
TITLE 6
Save it with the name [Link] and then open it with the browser.
Exercise 3
1.- Edit the file [Link] and put two or three paragraphs in the body (three or four lines each paragraph).
tomados del artículo de la energía en Andalucía. Separa los párrafos sin poner etiquetas, sólo pulsandoIntro
Once or twice. Save it, and then edit it with your browser. Note that the paragraphs appear together.
2.- Continue editing the file, add <P> tags to each paragraph. Save the file and open it with the
browser.
3.- Increase the spacing between paragraphs with <BR> and <P>.
Exercise 4:
To check how texts can be aligned.
1.- Edit the file [Link] and justify all paragraphs with <DIV align=justify>. Check.
in the browser the presentation.
2.- Now center the paragraph and align the second one to the right. Check the result.
Exercise 5:
Para cambiar el aspecto de la letra
1.- Edit the file [Link] and put the appropriate tags on the sentences of the first paragraph.
to appear in bold, italic, and monospace.
2.- Use the <FONT> tag with size = 1,2, etc., to have the first words of the second paragraph in
growing size.
3. Now use the <FONT> tag with size = + 1, - 1, + 2, - 2, etc. to have the first words of the second
paragraph in increasing and decreasing size.
Exercise 6:
To check the color [Link] guide
Black Silver Gray White Maroon Red Purple Fuchsia
Green Lime Olive Yellow Navy Blue Teal Water
1.- Create a file [Link] with several lines like the following, one for each of the
colors of the previous table.
Red
Exercise 7:
1.- Create a file [Link] with the following text:
Red 100%
Red 50%
Red 25%
Green 100%
Green 50%
Green 25%
Blue 100%
Blue 50%
Blue 25%
Save it and read it in your browser.
2.- Change the previous RGB colors and observe the results.
3.- Experiment with the codes to obtain the color yellow.
Exercise 8:
To check how to create hypertext.
The most commonly used mechanisms are the following:
1.- Create a page called [Link] where you can put links to interesting sites.
example, you can start with the following text:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; char-
set=ISO-8559-1
<TITLE>Sitios de interés</TITLE>
</HEAD>
<BODY>
<CENTER>
My favorite pages
</CENTER>
<HR>
These are my favorite pages:
<P><A HREF="[Link]
IES Alfonso Romero
Barcojo
</BODY>
</HTML>
Exercise 9:
To check how lists are made.
Unordered lists:
Sorted lists:
Exercise 10:
Haz una lista desordenada con los nombres:Desayuno, almuerzo, Merienda y Cena.
Sort the previous list.
Exercise 11:
To include graphics and images in our pages, we will use the <IMG> tag in this way:
<IMG SRC="fichero_grafico"" ALT="description"
The SRC parameter specifies the name of the file that contains the graphic. The image formats must be
JPG or GIF. The ALT parameter specifies the text that will be displayed instead of the graphic in those browsers.
that they should not show it.
With the parameters HEIGHT and WIDTH, you can always specify: the height and width of the chart in pixels.
<IMG SRC="animales/[Link]" ALT="Gato" Width=100 Height=145
The name of the image file must refer to its source folder. It will not be included if this is
the same as the HTML document we are preparing.
An image can be aligned to the left or right of the page. This is achieved with the parameters
ALIGN= RIGHT (image on the right) and ALIGN=LEFT (the image is on the left).
You can also set an image as the background for the entire page. This is achieved by setting the parameter
BACKGROUND="image" in the <BODY> tag, with image being the name of the GIF or JPG graphic file.
<BODY BACKGROUND="animales/[Link]">
Based on the previous explanation, edit the file for exercise number 3 and insert a centered image behind.
of each paragraph.
Exercise 12:
Edit file number 6 and set a color palette that you capture as the background image of the page.
Internet.
Character Entity Character Entity
er HTML er HTML
á á Á Á
é & É É
í í Í Í
ó ó Ó Ó
ú ú Ú U
ü & Ü Ü
ñ ñ Ñ Ñ
¡ ¡ ¿ ¿
