SlideShare una empresa de Scribd logo
1
Curso HTML. Introducción
HTML significa Hypertext Markup Languaje, o lenguaje de marcas de hipertexto. Los ficheros
htm (paginas web) son ficheros de texto, y la forma en que este texto aparece en pantalla viene
definida por un conjunto de marcas o tags
La especificación de estos tags la decide un organismo internacional, aunque algunos
fabricantes como Netscape y Microsoft implementan nuevas capacidades a sus navegadores
que no son compatibles con el resto.
El Navegador distingue a los tags del resto del texto porque van dentro de los simbolos <..>.
Por ejemplo la secuencia <i>hola<i> produce en pantalla hola: El tag <i> indica que el texto
debe inclinarse, y para cerrar el tag escribimos </i>
Existen muchos tags, pero solo vamos a ver los básicos
Para crear las paginas html solo hace falta un procesador de textos. Es posible hacer
documentos htm desde programas como Word o Excel, sin embargo, en este curso solo
usaremos el Bloq de Notas de Windows, así tendremos un control total sobre el código
generado.
Estructura de un documento html
Un documento html esta dividido en cabecera (HEAD) y cuerpo (BODY). La cabecera tiene
información sobre el documento, como el titulo, y el cuerpo es donde va el contenido.
Lo vemos en una página sencilla:
<html>
<head>
<TITLE>Nuestra primera pagina</TITLE>
</head>
<body>
<H1>Nuestra primera pagina</H1>
<P>Este es el primer parrafo </P>
<P>Este es el segundo parrafo.</P>
</body>
</html>
Vamos linea a linea:
<html>: indica el comienzo del documento html
<head>: indica el comienzo de la cabecera
<TITLE>Nuestra primera pagina</TITLE>: Comienzo del título, el titulo, y final de titulo
</head>: Final de la cabecera
<body>: comienzo del cuerpo del documento
<H1>Nuestra primera pagina</H1>: El tag <H1> indica al navegador que el texto debe
estar en negrita y con tamaño de letra grande, y ademas introduce un retorno de carro
<P>Este es el primer parrafo </P>: El tag <P> indica principio de parrafo
</body>: fin de cuerpo del documento
</html>: fin de documento html
Para ver el resultado que produce el código, debemos copiarlo en el Bloq de Notas, guardarlo
con la extensión .htm, y cargarlo en el navegador. EJERCICIO 1.htm
2
Un par de tag muy usados
Vamos a hacer crear otro documento de la siguiente manera:
<html>
<head>
<TITLE>Nuestra segunda pagina</TITLE>
</head>
<body>
<center>
<H1>Nuestra segunda pagina</H1>
<hr width=200>
</center>
<P>Este es el primer parrafo </P>
<P>Este es el segundo parrafo.</P>
</body>
</html>
Hemos añadido dos tags nuevos:
<center>: Por defecto el texto se alinea siempre a la izquierda. Con este tag le decimos
al navegador que todos los elementos entre <center> y </center> deben estar
centrados en la pantalla.
<hr>: sirve para dibujar una linea, y ademas hace un retorno de carro
Vemos que este tag tiene un modificador o parametro, width=200, que indica que la
línea debe tener una longitud de 200 pixels.
Casi todos los tags tienen varios parámetros que alteran la forma en que el navegador
dibuja la página.
Para ver el resultado que produce el código, debemos copiarlo en el Bloq de Notas, guardarlo
con la extensión .htm, y cargarlo en el navegador. EJERCICIO 2.htm
Formateo de textos
En esta página vamos a ver los tag más usados para dar forma al texto:
<b>: Sirve para poner en negrita. Hay que cerrar con </b>.
<i>: Para inclinar el texto. Se cierra con </i>.
<br>: Hace un retorno de carro. Hay que diferenciarlo del tag <p>.
<p>: Tag de párrafo: Hace un retorno de carro y además añade una linea en blanco.
Admite parámetros:
o align="": alineamiento del texto dentro del parrafo: Por defecto se alinea a la
izquierda, y los valores admitidos(dentro de las comillas) son : center, right, left
y justify.
3
<font>: Cada navegador usa por defecto un tipo y tamaño de letra determinado.
Netscape y Explorer usan Times New Roman, aunque pueden variar en Apple o Unix.
Si queremos usar otros tipos de letra usaremos este tag, que admite varios parámetros:
o face="": tipo de letra: podemos usar cualquiera que tengamos instalada, pero
hay que tener en cuenta que no todo el mundo tiene instalados los mismos
tipos de letra que nosotros. Algunos tipos muy usados son: Arial, Courier,
Verdana.
o color="": color: Los navegadores reconocen algunos colores predefinidos,
como:black, red, white, etc... Para más exactitud hay que usar la notación
exagesimal. Por ejemplo <font color="black"> es lo mismo que <font
color="#000000"> .
o size="": Tamaño: Por defecto suele ser 2. Podemos fijar un tamaño en terminos
absolutos, p.ej. <font size="3">, o respecto al tamaño por defecto, p.ej. <font
size="+1">.
Nota: Hay algunas diferencias entre navegadores y plataformas, y no es
posible controlar que el texto aparezca siempre igual en todos.
<blockquote>: Parrafos indentados: Es necesario cerrarlo con </blockquote>
En este texto tenemos ejemplos de todos los tags:
<html>
<head>
<TITLE>Formateo de texto</TITLE>
</head>
<body>
<center>
<font face="arial" size="+2">Formateo de texto</font>
<hr width=200>
</center>
<P align="center">Este es el primer párrafo. Está centrado y escrito en la letra por defecto del
navegador. Algunas palabras estan en <B>negrita</B>, y otras en <I>cursiva.</I></P>
<P><font face="Arial" size="2">En el segundo párrafo toda la letra es Arial y tamaño 2. Esta
alineado a la izquierda(por defecto) y tiene un retorno de carro aqui.<br> Para acabar el parrafo
usamos un <font color="red">color diferente</font></font>.</P>
<blockquote><font face="Arial" size="3">Tercer párrafo. Para finalizar, tenemos un párrafo
indentado, con letra Arial y tamaño 3(un poco más grande).</font>.</blockquote>
</body>
</html>
Para ver el resultado que produce el código, debemos copiarlo en el Bloq de Notas, guardarlo
con la extensión .htm, y cargarlo en el navegador. EJERCICIO 3.htm
4
Fondos de página
Como hemos visto hasta ahora, el navegador dibuja la página con un triste fondo gris. Por
suerte, es posible fijar el fondo con otro color, o usar una imagen de fondo.
Fondo de color:
Usamos el parámetro bgcolor, p.ej <body bgcolor="red">
Si queremos usar otros colores de fondo, hay que asegurarse de que los textos se leen
sin dificultad.
<html>
<head>
<TITLE>Fondos</TITLE>
</head>
<body bgcolor="red">
<center>
<font face="arial" size="+2">Fondos</font>
<hr width=200>
</center>
<P align="center">Este es el primer párrafo. Está centrado y escrito en la letra por
defecto del navegador. Algunas palabras estan en <B>negrita</B>, y otras en
<I>cursiva.</I></P>
</body>
</html>
EJERCICIO 4.1.htm
Imagen de fondo:
Usamos el parámetro background="fondo.gif", p.ej <body background="fondo.gif">
Usar imágenes de fondo es un tema complicado. Es muy dificil acertar con una imagen
adecuada, y sobre todo hay que huir de los colores chillones.
Si la imagen es más pequeña que la pantalla, se repetirá hasta llenarla completamente.
Un buen truco es usar una imagen de altura 5 pixels(o menos), con el consiguiente
ahorro de espacio.
Por ejemplo: vamos a usar de fondo la imagen: fondo.gif
<html>
<head>
<TITLE>Fondos 2</TITLE>
</head>
<body background="fondo.gif">
<center>
<font face="arial" size="+2">Fondos</font>
<hr width=200>
</center>
<P align="center">Este es el primer párrafo. Está centrado y escrito en la letra por
defecto del navegador. Algunas palabras estan en <B>negrita</B>, y otras en
<I>cursiva.</I></P>
</body>
</html>
EJERCICIO 4.2.htm
Nota: En este caso la imagen debe estar en el mismo directorio que el fichero .htm,
para que el navegador pueda encontrarla. Si la imagen está en otro directorio debemos
escribir la ruta correcta.
5
Listas
Con el HTML que sabemos hasta ahora ya sabríamos hacer una lista numerada, p.ej.
<P><blockquote>1.Elemento numero 1</blockquote>
<blockquote>2.Elemento numero 2</blockquote>
Este código quedaría en pantalla:
1.Elemento numero 1
2.Elemento numero 2
Sin embargo, nos podemos ahorrar todo este código porque existen unos tags específicos para
listas.
Tenemos tres tipos de listas: desordenadas, ordenadas y listas de definición.
Listas desordenadas:
<UL>
<LI> primer elemento
<LI> segundo elemento
</UL>
Toda la lista va entre los tag <UL>(unordered list) y </UL>, y cada elemento se señala también
con el tag <LI>(list item).
El resultado es:
primer elemento
segundo elemento
Listas ordenadas:
<OL>
<LI> primer elemento
<LI> segundo elemento
</OL>
Toda la lista va entre los tag <OL>(ordered list) y </OL>, y cada elemento se señala también
con el tag <LI>(list item).
El resultado es:
1. primer elemento
2. segundo elemento
6
Por último, podemos insertar listas dentro de otras listas:
<OL>
<LI> primer elemento lista 1
<UL>
<LI> primer elemento lista 2
<LI> segundo elemento lista 2
</UL>
<LI> segundo elemento lista 1
</OL>
El resultado es:
1. primer elemento lista 1
o primer elemento lista 2
o segundo elemento lista 2
2. segundo elemento lista 1
Crea un documento htm con título ‘LISTAS’ con todos los 3 tipos de listas anteriores:
EJERCICIO 5.htm
Enlaces
Los enlaces o links son textos o imágenes que al ser pulsados, hacen que el navegador cargue
otra página. Normalmente son están subrayados y de un color diferente (normalmente azul) al
texto normal.
El tag de los enlaces es <a>, con la síntaxis:
<A HREF="destino"> titulo </A>
El título es el texto que aparece subrayado, y el destino es la dirección del documento al que
apunta el enlace. Este destino puede ser una dirección completa, p.ej.
href="http://www.RedAragon.com/index.htm", o un documento en el mismo directorio
href="hola.htm"
Crear un documento con dos enlaces uno cuyo texto sea ‘Google’ con referencia a
www.google.es y un segundo enlace a con texto ‘Practica5’ con referencia al documento
EJERCICIO 5.htm. EJERCICIO 6.
7
Imágenes
Gracias a las imágenes la web se ha hecho tan popular, tanto que hoy no se entiende una
página web sin ellas. En nuestro directorio de trabajo tenemos un pequeño gif llamado
"obras.gif", que vamos a usar en los siguientes ejemplos
El tag básico que nos permite incluir imágenes es <IMG SRC="obras.gif"> , Este tag admite
muchos parámetros útiles:
width, height: con estos parámetros le decimos al navegador las dimensiones del
grafico. Es conveniente incluirlos porque asi la página aparece en pantalla antes de
que lleguen los gráficos (que suelen venir después del texto).
En nuestro caso, <IMG SRC="obras.gif" width=60 height=53>, produce en pantalla:
También podemos poner dimensiones 'falsas', y el navegador alterará las dimensiones
de la imagen.
Por ejemplo, <IMG SRC="obras.gif" width=200 height=53>, produce en pantalla:
border: Este parámetro hace que aparezca un borde rodeando la imagen.
Por ejemplo, <IMG SRC="obras.gif" width=60 height=53 border=2>, produce en
pantalla:
align: Alinea la imagen respecto del texto y puede valer: left, right, top, bottom y middle.
Por ejemplo, <IMG SRC="obras.gif" alt="Pagina en construcción" width=60 height=53
border=2 align=middle> texto de ejemplo, produce en pantalla:
texto de ejemplo
hspace, vspace: Separa la imagen horizontal y verticalmente(en pixels y por ambos
lados).
Por ejemplo, <IMG SRC="obras.gif" alt="Pagina en construcción" width=60 height=53
border=2 vspace=10 align=middle hspace=10> texto de ejemplo, produce en pantalla:
texto de ejemplo
Las imágenes pueden servir como enlaces, p.ej el código <a
href="www.google.es"><IMG SRC="obras.gif"></a> produce en pantalla:
Vemos que el icono del ratón cambia al pasar por la imagen, y aparece un borde de
color azul rodeándola. Casi siempre que usemos imágenes como enlaces añadiremos
border=0 para evitarlo.
Crear un documento que contenga los siete casos anteriores EJERCICIO 7.htm
8
Tablas
Las tablas son los elementos más importantes del HTML. Entender cómo construirlas es la
clave para dominar el lenguaje. Vamos a trabajar con una tabla de 2x2 celdas que iremos
modificando sobre la marcha.
El codigo para construirla es:
<TABLE border=1>
<TR>
<TD>fila1/celda1</TD>
<TD>fila1/celda2</TD>
</TR>
<TR>
<TD><img src="obras.gif" width=60 height=53 border=0></TD>
<TD>fila2/celda2</TD>
</TR>
</TABLE>
Y el resultado en pantalla:
fila1/celda1 fila1/celda2
fila2/celda2
Tenemos tres tags principales, <TABLE></TABLE>( (inicio y final de tabla),<TR></TR>( (inicio
y final de fila),<TD></TD> (inicio y final de celda).
Cada uno de los tags admite varios parámetros, vamos a ver los básicos:
<TABLE>
border: Borde de la tabla, se suele poner a cero.
width: Anchura de la tabla. Esta página esta toda dentro de una tabla de anchura 600
pixels centrada en la página.
cellpadding: Separación entre el contenido de las celdas y el borde de la celda
cellspacing: Separación entre las celdas.
bgcolor: Color de fondo
<TD>
width, height: Altura y anchura de la celda. Vamos a dimensionar la celda superior
izquierda.
<TABLE border=1>
<TR>
<TD width=100 height=100>fila1/celda1</TD>
<TD>fila1/celda2</TD>
</TR>
<TR>
<TD><img src="obras.gif" width=60 height=53
border=0></TD>
<TD>fila2/celda2</TD>
</TR>
</TABLE>
fila1/celda1 fila1/celda2
fila2/celda2
9
lign, valign: Alineamiento horizontal y vertical del contenido de la celda. Vamos a seguir
modificando la celda superior izquierda.
<TABLE border=1>
<TR>
<TD width=100 align=right valign=top
height=100>fila1/celda1</TD>
<TD>fila1/celda2</TD>
</TR>
<TR>
<TD><img src="obras.gif" width=60
height=53 border=0></TD>
<TD>fila2/celda2</TD>
</TR>
</TABLE>
fila1/celda1
fila1/celda2
fila2/celda2
bgcolor: Color de la celda
rowspan: Con este tag le decimos al navegador que esa celda es tan alta como varias
de las otras columnas, es decir, que la celda ocupa varias filas.
<TABLE border=1>
<TR>
<TD rowspan=2>fila1/celda1</TD>
<TD>fila1/celda2</TD>
</TR>
<TR>
<TD>fila2/celda2</TD>
</TR>
</TABLE>
fila1/celda1
fila1/celda2
fila2/celda2
colspan: Con este tag le decimos al navegador que esa celda es tan ancha como
varias de las otras filas, es decir, que la celda ocupa varias columnas.
<TABLE border=1>
<TR>
<TD colspan=2>fila1/celda1</TD>
</TR>
<TR>
<TD><img src="obras.gif" width=60 height=53
border=0></TD>
<TD>fila2/celda2</TD>
</TR>
</TABLE>
fila1/celda1
fila2/celda2
Crear un documento que contenga los 5 casos anteriores EJERCICIO 8.htm

Más contenido relacionado

La actualidad más candente

Manual+de+corel+12.0+v2
Manual+de+corel+12.0+v2Manual+de+corel+12.0+v2
Manual+de+corel+12.0+v2
Jenny Lourdes Inchuña Cusacani
 
Manual excel basico y practicas
Manual excel basico y practicasManual excel basico y practicas
Manual excel basico y practicas
AliciaDominguezGutie
 
Excel: Freezing Panes
Excel: Freezing PanesExcel: Freezing Panes
Excel: Freezing Panes
maclark14
 
Excel guía de ejercicios completa
Excel   guía de ejercicios completaExcel   guía de ejercicios completa
Excel guía de ejercicios completa
Upeinfo1
 
Ejercicios de word guia
Ejercicios de word guiaEjercicios de word guia
Ejercicios de word guia
humbertocano034
 
Google Drive y Google Documentos (2022)
Google Drive y Google Documentos (2022)Google Drive y Google Documentos (2022)
Google Drive y Google Documentos (2022)
Agneta Gallardo
 
Manual de word 2013
Manual de word 2013Manual de word 2013
Manual de word 2013
Bayron Robles
 
Presentación de m word
Presentación de m wordPresentación de m word
Presentación de m word
elpoderpibe
 
Access lesson 04 Creating and Modifying Forms
Access lesson 04 Creating and Modifying FormsAccess lesson 04 Creating and Modifying Forms
Access lesson 04 Creating and Modifying Forms
Aram SE
 
Ejercicios word
Ejercicios wordEjercicios word
Ejercicios word
CaAsVe
 
Entorno de excel
Entorno de excelEntorno de excel
Entorno de excel
Suly Zambrano
 
001.general
001.general001.general
001.general
Học Huỳnh Bá
 
Guia 3 tablas en Word
Guia 3 tablas en WordGuia 3 tablas en Word
Guia 3 tablas en Word
hgm2007
 
Cuestionario de microsoft word
Cuestionario de microsoft wordCuestionario de microsoft word
Cuestionario de microsoft word
Oswaldo Gomez
 
Taller el teclado y sus partes
Taller el teclado y sus partesTaller el teclado y sus partes
Taller el teclado y sus partes
Helver Gilberto Parra Gonzalez
 
Concepto de gmail.
Concepto de gmail.Concepto de gmail.
Excel - Fichas de Aprendizaje 2014
Excel - Fichas de Aprendizaje 2014Excel - Fichas de Aprendizaje 2014
Excel - Fichas de Aprendizaje 2014
jorgequiat
 
Ejercicios de-access-esae
Ejercicios de-access-esaeEjercicios de-access-esae
Ejercicios de-access-esae
CPC Vladimir Villegas Miguel
 
Tablas html
Tablas htmlTablas html
Tablas html
KarySandovalP
 
Graficos en Word 2010
Graficos en Word 2010Graficos en Word 2010
Graficos en Word 2010
IST Unitek Arequipa
 

La actualidad más candente (20)

Manual+de+corel+12.0+v2
Manual+de+corel+12.0+v2Manual+de+corel+12.0+v2
Manual+de+corel+12.0+v2
 
Manual excel basico y practicas
Manual excel basico y practicasManual excel basico y practicas
Manual excel basico y practicas
 
Excel: Freezing Panes
Excel: Freezing PanesExcel: Freezing Panes
Excel: Freezing Panes
 
Excel guía de ejercicios completa
Excel   guía de ejercicios completaExcel   guía de ejercicios completa
Excel guía de ejercicios completa
 
Ejercicios de word guia
Ejercicios de word guiaEjercicios de word guia
Ejercicios de word guia
 
Google Drive y Google Documentos (2022)
Google Drive y Google Documentos (2022)Google Drive y Google Documentos (2022)
Google Drive y Google Documentos (2022)
 
Manual de word 2013
Manual de word 2013Manual de word 2013
Manual de word 2013
 
Presentación de m word
Presentación de m wordPresentación de m word
Presentación de m word
 
Access lesson 04 Creating and Modifying Forms
Access lesson 04 Creating and Modifying FormsAccess lesson 04 Creating and Modifying Forms
Access lesson 04 Creating and Modifying Forms
 
Ejercicios word
Ejercicios wordEjercicios word
Ejercicios word
 
Entorno de excel
Entorno de excelEntorno de excel
Entorno de excel
 
001.general
001.general001.general
001.general
 
Guia 3 tablas en Word
Guia 3 tablas en WordGuia 3 tablas en Word
Guia 3 tablas en Word
 
Cuestionario de microsoft word
Cuestionario de microsoft wordCuestionario de microsoft word
Cuestionario de microsoft word
 
Taller el teclado y sus partes
Taller el teclado y sus partesTaller el teclado y sus partes
Taller el teclado y sus partes
 
Concepto de gmail.
Concepto de gmail.Concepto de gmail.
Concepto de gmail.
 
Excel - Fichas de Aprendizaje 2014
Excel - Fichas de Aprendizaje 2014Excel - Fichas de Aprendizaje 2014
Excel - Fichas de Aprendizaje 2014
 
Ejercicios de-access-esae
Ejercicios de-access-esaeEjercicios de-access-esae
Ejercicios de-access-esae
 
Tablas html
Tablas htmlTablas html
Tablas html
 
Graficos en Word 2010
Graficos en Word 2010Graficos en Word 2010
Graficos en Word 2010
 

Similar a Practicas html

HTML
HTMLHTML
HTML
HTMLHTML
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
David Alejandro González González
 
Clase 1
Clase 1Clase 1
Clase 1
sinaibucio
 
Manual html
Manual htmlManual html
Manual html
Marcos Rozze
 
Tpd 02
Tpd 02Tpd 02
Html
HtmlHtml
Html
HtmlHtml
Guia html 1
Guia html 1Guia html 1
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
marcos0209
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
Margarita T.
 
Informatica
InformaticaInformatica
Informatica
juani9
 
Informatica
InformaticaInformatica
Informatica
juani9
 
Informatica
InformaticaInformatica
Informatica
juani9
 
Informatica
InformaticaInformatica
Informatica
juani9
 
Manual html
Manual htmlManual html
Manual html
drunkpl4y3r
 
Descripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje htmlDescripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje html
joraloca
 
Html actividades 1
Html actividades  1Html actividades  1
Html actividades 1
Lobo Solitario Mistico
 
10 etiquetas basicas de html
10 etiquetas basicas de html10 etiquetas basicas de html
10 etiquetas basicas de html
Lety Bernal
 
Html
HtmlHtml
Html
UEB
 

Similar a Practicas html (20)

HTML
HTMLHTML
HTML
 
HTML
HTMLHTML
HTML
 
Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02Presentacinhtml 091121100213-phpapp02
Presentacinhtml 091121100213-phpapp02
 
Clase 1
Clase 1Clase 1
Clase 1
 
Manual html
Manual htmlManual html
Manual html
 
Tpd 02
Tpd 02Tpd 02
Tpd 02
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Guia html 1
Guia html 1Guia html 1
Guia html 1
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
 
Informatica
InformaticaInformatica
Informatica
 
Informatica
InformaticaInformatica
Informatica
 
Informatica
InformaticaInformatica
Informatica
 
Informatica
InformaticaInformatica
Informatica
 
Manual html
Manual htmlManual html
Manual html
 
Descripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje htmlDescripción de la sintaxis con la que se trabaja en el lenguaje html
Descripción de la sintaxis con la que se trabaja en el lenguaje html
 
Html actividades 1
Html actividades  1Html actividades  1
Html actividades 1
 
10 etiquetas basicas de html
10 etiquetas basicas de html10 etiquetas basicas de html
10 etiquetas basicas de html
 
Html
HtmlHtml
Html
 

Último

Caso real de la NASA, en donde se presenta una experiencia ocurrida el 27 de ...
Caso real de la NASA, en donde se presenta una experiencia ocurrida el 27 de ...Caso real de la NASA, en donde se presenta una experiencia ocurrida el 27 de ...
Caso real de la NASA, en donde se presenta una experiencia ocurrida el 27 de ...
jazmingodoy529
 
E4-FINAL-TASK-PART 1 (Writing) Gina_FIQKBN.pptx
E4-FINAL-TASK-PART 1 (Writing) Gina_FIQKBN.pptxE4-FINAL-TASK-PART 1 (Writing) Gina_FIQKBN.pptx
E4-FINAL-TASK-PART 1 (Writing) Gina_FIQKBN.pptx
JeffreyAlbino
 
GUZMANSORIANO_JIMENA_M1S3AI6.pptx LAS TIC EN LA VIDA COTIDIANA
GUZMANSORIANO_JIMENA_M1S3AI6.pptx LAS TIC EN LA VIDA COTIDIANAGUZMANSORIANO_JIMENA_M1S3AI6.pptx LAS TIC EN LA VIDA COTIDIANA
GUZMANSORIANO_JIMENA_M1S3AI6.pptx LAS TIC EN LA VIDA COTIDIANA
241577809
 
¿Necesito contratar a una agencia SEO o consultor?
¿Necesito contratar a una agencia SEO o consultor?¿Necesito contratar a una agencia SEO o consultor?
¿Necesito contratar a una agencia SEO o consultor?
Antonio Garrido Salvatierra
 
inteligencia artificial y su concepto(IA)
inteligencia artificial y su concepto(IA)inteligencia artificial y su concepto(IA)
inteligencia artificial y su concepto(IA)
ciaraguadalupe248
 
#1 - Laurelin Paige - Sierra Simone - Porn Star.pdf
#1 - Laurelin Paige - Sierra Simone - Porn Star.pdf#1 - Laurelin Paige - Sierra Simone - Porn Star.pdf
#1 - Laurelin Paige - Sierra Simone - Porn Star.pdf
valentina664684
 
La biografia de la vida de Mark Zuckerberg.pptx
La biografia de la vida de Mark Zuckerberg.pptxLa biografia de la vida de Mark Zuckerberg.pptx
La biografia de la vida de Mark Zuckerberg.pptx
AndrsDavidRiosJaen
 
Gestores de referencia Bibliografica: ZOTERO, MENDELAY
Gestores de referencia Bibliografica: ZOTERO, MENDELAYGestores de referencia Bibliografica: ZOTERO, MENDELAY
Gestores de referencia Bibliografica: ZOTERO, MENDELAY
EmilDiaz14
 
MAT 12.07.pptxvdcs vcxv vcxxv vxcv cxzx vcxv
MAT 12.07.pptxvdcs vcxv vcxxv vxcv cxzx vcxvMAT 12.07.pptxvdcs vcxv vcxxv vxcv cxzx vcxv
MAT 12.07.pptxvdcs vcxv vcxxv vxcv cxzx vcxv
fernandacabello4
 
La computadora breve información y descripción
La computadora breve información y descripciónLa computadora breve información y descripción
La computadora breve información y descripción
istlfnaventasimone
 
Recueerdos para exposiciones de las regiones
Recueerdos para exposiciones de las regionesRecueerdos para exposiciones de las regiones
Recueerdos para exposiciones de las regiones
hellenvasquezflores2
 

Último (11)

Caso real de la NASA, en donde se presenta una experiencia ocurrida el 27 de ...
Caso real de la NASA, en donde se presenta una experiencia ocurrida el 27 de ...Caso real de la NASA, en donde se presenta una experiencia ocurrida el 27 de ...
Caso real de la NASA, en donde se presenta una experiencia ocurrida el 27 de ...
 
E4-FINAL-TASK-PART 1 (Writing) Gina_FIQKBN.pptx
E4-FINAL-TASK-PART 1 (Writing) Gina_FIQKBN.pptxE4-FINAL-TASK-PART 1 (Writing) Gina_FIQKBN.pptx
E4-FINAL-TASK-PART 1 (Writing) Gina_FIQKBN.pptx
 
GUZMANSORIANO_JIMENA_M1S3AI6.pptx LAS TIC EN LA VIDA COTIDIANA
GUZMANSORIANO_JIMENA_M1S3AI6.pptx LAS TIC EN LA VIDA COTIDIANAGUZMANSORIANO_JIMENA_M1S3AI6.pptx LAS TIC EN LA VIDA COTIDIANA
GUZMANSORIANO_JIMENA_M1S3AI6.pptx LAS TIC EN LA VIDA COTIDIANA
 
¿Necesito contratar a una agencia SEO o consultor?
¿Necesito contratar a una agencia SEO o consultor?¿Necesito contratar a una agencia SEO o consultor?
¿Necesito contratar a una agencia SEO o consultor?
 
inteligencia artificial y su concepto(IA)
inteligencia artificial y su concepto(IA)inteligencia artificial y su concepto(IA)
inteligencia artificial y su concepto(IA)
 
#1 - Laurelin Paige - Sierra Simone - Porn Star.pdf
#1 - Laurelin Paige - Sierra Simone - Porn Star.pdf#1 - Laurelin Paige - Sierra Simone - Porn Star.pdf
#1 - Laurelin Paige - Sierra Simone - Porn Star.pdf
 
La biografia de la vida de Mark Zuckerberg.pptx
La biografia de la vida de Mark Zuckerberg.pptxLa biografia de la vida de Mark Zuckerberg.pptx
La biografia de la vida de Mark Zuckerberg.pptx
 
Gestores de referencia Bibliografica: ZOTERO, MENDELAY
Gestores de referencia Bibliografica: ZOTERO, MENDELAYGestores de referencia Bibliografica: ZOTERO, MENDELAY
Gestores de referencia Bibliografica: ZOTERO, MENDELAY
 
MAT 12.07.pptxvdcs vcxv vcxxv vxcv cxzx vcxv
MAT 12.07.pptxvdcs vcxv vcxxv vxcv cxzx vcxvMAT 12.07.pptxvdcs vcxv vcxxv vxcv cxzx vcxv
MAT 12.07.pptxvdcs vcxv vcxxv vxcv cxzx vcxv
 
La computadora breve información y descripción
La computadora breve información y descripciónLa computadora breve información y descripción
La computadora breve información y descripción
 
Recueerdos para exposiciones de las regiones
Recueerdos para exposiciones de las regionesRecueerdos para exposiciones de las regiones
Recueerdos para exposiciones de las regiones
 

Practicas html

  • 1. 1 Curso HTML. Introducción HTML significa Hypertext Markup Languaje, o lenguaje de marcas de hipertexto. Los ficheros htm (paginas web) son ficheros de texto, y la forma en que este texto aparece en pantalla viene definida por un conjunto de marcas o tags La especificación de estos tags la decide un organismo internacional, aunque algunos fabricantes como Netscape y Microsoft implementan nuevas capacidades a sus navegadores que no son compatibles con el resto. El Navegador distingue a los tags del resto del texto porque van dentro de los simbolos <..>. Por ejemplo la secuencia <i>hola<i> produce en pantalla hola: El tag <i> indica que el texto debe inclinarse, y para cerrar el tag escribimos </i> Existen muchos tags, pero solo vamos a ver los básicos Para crear las paginas html solo hace falta un procesador de textos. Es posible hacer documentos htm desde programas como Word o Excel, sin embargo, en este curso solo usaremos el Bloq de Notas de Windows, así tendremos un control total sobre el código generado. Estructura de un documento html Un documento html esta dividido en cabecera (HEAD) y cuerpo (BODY). La cabecera tiene información sobre el documento, como el titulo, y el cuerpo es donde va el contenido. Lo vemos en una página sencilla: <html> <head> <TITLE>Nuestra primera pagina</TITLE> </head> <body> <H1>Nuestra primera pagina</H1> <P>Este es el primer parrafo </P> <P>Este es el segundo parrafo.</P> </body> </html> Vamos linea a linea: <html>: indica el comienzo del documento html <head>: indica el comienzo de la cabecera <TITLE>Nuestra primera pagina</TITLE>: Comienzo del título, el titulo, y final de titulo </head>: Final de la cabecera <body>: comienzo del cuerpo del documento <H1>Nuestra primera pagina</H1>: El tag <H1> indica al navegador que el texto debe estar en negrita y con tamaño de letra grande, y ademas introduce un retorno de carro <P>Este es el primer parrafo </P>: El tag <P> indica principio de parrafo </body>: fin de cuerpo del documento </html>: fin de documento html Para ver el resultado que produce el código, debemos copiarlo en el Bloq de Notas, guardarlo con la extensión .htm, y cargarlo en el navegador. EJERCICIO 1.htm
  • 2. 2 Un par de tag muy usados Vamos a hacer crear otro documento de la siguiente manera: <html> <head> <TITLE>Nuestra segunda pagina</TITLE> </head> <body> <center> <H1>Nuestra segunda pagina</H1> <hr width=200> </center> <P>Este es el primer parrafo </P> <P>Este es el segundo parrafo.</P> </body> </html> Hemos añadido dos tags nuevos: <center>: Por defecto el texto se alinea siempre a la izquierda. Con este tag le decimos al navegador que todos los elementos entre <center> y </center> deben estar centrados en la pantalla. <hr>: sirve para dibujar una linea, y ademas hace un retorno de carro Vemos que este tag tiene un modificador o parametro, width=200, que indica que la línea debe tener una longitud de 200 pixels. Casi todos los tags tienen varios parámetros que alteran la forma en que el navegador dibuja la página. Para ver el resultado que produce el código, debemos copiarlo en el Bloq de Notas, guardarlo con la extensión .htm, y cargarlo en el navegador. EJERCICIO 2.htm Formateo de textos En esta página vamos a ver los tag más usados para dar forma al texto: <b>: Sirve para poner en negrita. Hay que cerrar con </b>. <i>: Para inclinar el texto. Se cierra con </i>. <br>: Hace un retorno de carro. Hay que diferenciarlo del tag <p>. <p>: Tag de párrafo: Hace un retorno de carro y además añade una linea en blanco. Admite parámetros: o align="": alineamiento del texto dentro del parrafo: Por defecto se alinea a la izquierda, y los valores admitidos(dentro de las comillas) son : center, right, left y justify.
  • 3. 3 <font>: Cada navegador usa por defecto un tipo y tamaño de letra determinado. Netscape y Explorer usan Times New Roman, aunque pueden variar en Apple o Unix. Si queremos usar otros tipos de letra usaremos este tag, que admite varios parámetros: o face="": tipo de letra: podemos usar cualquiera que tengamos instalada, pero hay que tener en cuenta que no todo el mundo tiene instalados los mismos tipos de letra que nosotros. Algunos tipos muy usados son: Arial, Courier, Verdana. o color="": color: Los navegadores reconocen algunos colores predefinidos, como:black, red, white, etc... Para más exactitud hay que usar la notación exagesimal. Por ejemplo <font color="black"> es lo mismo que <font color="#000000"> . o size="": Tamaño: Por defecto suele ser 2. Podemos fijar un tamaño en terminos absolutos, p.ej. <font size="3">, o respecto al tamaño por defecto, p.ej. <font size="+1">. Nota: Hay algunas diferencias entre navegadores y plataformas, y no es posible controlar que el texto aparezca siempre igual en todos. <blockquote>: Parrafos indentados: Es necesario cerrarlo con </blockquote> En este texto tenemos ejemplos de todos los tags: <html> <head> <TITLE>Formateo de texto</TITLE> </head> <body> <center> <font face="arial" size="+2">Formateo de texto</font> <hr width=200> </center> <P align="center">Este es el primer párrafo. Está centrado y escrito en la letra por defecto del navegador. Algunas palabras estan en <B>negrita</B>, y otras en <I>cursiva.</I></P> <P><font face="Arial" size="2">En el segundo párrafo toda la letra es Arial y tamaño 2. Esta alineado a la izquierda(por defecto) y tiene un retorno de carro aqui.<br> Para acabar el parrafo usamos un <font color="red">color diferente</font></font>.</P> <blockquote><font face="Arial" size="3">Tercer párrafo. Para finalizar, tenemos un párrafo indentado, con letra Arial y tamaño 3(un poco más grande).</font>.</blockquote> </body> </html> Para ver el resultado que produce el código, debemos copiarlo en el Bloq de Notas, guardarlo con la extensión .htm, y cargarlo en el navegador. EJERCICIO 3.htm
  • 4. 4 Fondos de página Como hemos visto hasta ahora, el navegador dibuja la página con un triste fondo gris. Por suerte, es posible fijar el fondo con otro color, o usar una imagen de fondo. Fondo de color: Usamos el parámetro bgcolor, p.ej <body bgcolor="red"> Si queremos usar otros colores de fondo, hay que asegurarse de que los textos se leen sin dificultad. <html> <head> <TITLE>Fondos</TITLE> </head> <body bgcolor="red"> <center> <font face="arial" size="+2">Fondos</font> <hr width=200> </center> <P align="center">Este es el primer párrafo. Está centrado y escrito en la letra por defecto del navegador. Algunas palabras estan en <B>negrita</B>, y otras en <I>cursiva.</I></P> </body> </html> EJERCICIO 4.1.htm Imagen de fondo: Usamos el parámetro background="fondo.gif", p.ej <body background="fondo.gif"> Usar imágenes de fondo es un tema complicado. Es muy dificil acertar con una imagen adecuada, y sobre todo hay que huir de los colores chillones. Si la imagen es más pequeña que la pantalla, se repetirá hasta llenarla completamente. Un buen truco es usar una imagen de altura 5 pixels(o menos), con el consiguiente ahorro de espacio. Por ejemplo: vamos a usar de fondo la imagen: fondo.gif <html> <head> <TITLE>Fondos 2</TITLE> </head> <body background="fondo.gif"> <center> <font face="arial" size="+2">Fondos</font> <hr width=200> </center> <P align="center">Este es el primer párrafo. Está centrado y escrito en la letra por defecto del navegador. Algunas palabras estan en <B>negrita</B>, y otras en <I>cursiva.</I></P> </body> </html> EJERCICIO 4.2.htm Nota: En este caso la imagen debe estar en el mismo directorio que el fichero .htm, para que el navegador pueda encontrarla. Si la imagen está en otro directorio debemos escribir la ruta correcta.
  • 5. 5 Listas Con el HTML que sabemos hasta ahora ya sabríamos hacer una lista numerada, p.ej. <P><blockquote>1.Elemento numero 1</blockquote> <blockquote>2.Elemento numero 2</blockquote> Este código quedaría en pantalla: 1.Elemento numero 1 2.Elemento numero 2 Sin embargo, nos podemos ahorrar todo este código porque existen unos tags específicos para listas. Tenemos tres tipos de listas: desordenadas, ordenadas y listas de definición. Listas desordenadas: <UL> <LI> primer elemento <LI> segundo elemento </UL> Toda la lista va entre los tag <UL>(unordered list) y </UL>, y cada elemento se señala también con el tag <LI>(list item). El resultado es: primer elemento segundo elemento Listas ordenadas: <OL> <LI> primer elemento <LI> segundo elemento </OL> Toda la lista va entre los tag <OL>(ordered list) y </OL>, y cada elemento se señala también con el tag <LI>(list item). El resultado es: 1. primer elemento 2. segundo elemento
  • 6. 6 Por último, podemos insertar listas dentro de otras listas: <OL> <LI> primer elemento lista 1 <UL> <LI> primer elemento lista 2 <LI> segundo elemento lista 2 </UL> <LI> segundo elemento lista 1 </OL> El resultado es: 1. primer elemento lista 1 o primer elemento lista 2 o segundo elemento lista 2 2. segundo elemento lista 1 Crea un documento htm con título ‘LISTAS’ con todos los 3 tipos de listas anteriores: EJERCICIO 5.htm Enlaces Los enlaces o links son textos o imágenes que al ser pulsados, hacen que el navegador cargue otra página. Normalmente son están subrayados y de un color diferente (normalmente azul) al texto normal. El tag de los enlaces es <a>, con la síntaxis: <A HREF="destino"> titulo </A> El título es el texto que aparece subrayado, y el destino es la dirección del documento al que apunta el enlace. Este destino puede ser una dirección completa, p.ej. href="http://www.RedAragon.com/index.htm", o un documento en el mismo directorio href="hola.htm" Crear un documento con dos enlaces uno cuyo texto sea ‘Google’ con referencia a www.google.es y un segundo enlace a con texto ‘Practica5’ con referencia al documento EJERCICIO 5.htm. EJERCICIO 6.
  • 7. 7 Imágenes Gracias a las imágenes la web se ha hecho tan popular, tanto que hoy no se entiende una página web sin ellas. En nuestro directorio de trabajo tenemos un pequeño gif llamado "obras.gif", que vamos a usar en los siguientes ejemplos El tag básico que nos permite incluir imágenes es <IMG SRC="obras.gif"> , Este tag admite muchos parámetros útiles: width, height: con estos parámetros le decimos al navegador las dimensiones del grafico. Es conveniente incluirlos porque asi la página aparece en pantalla antes de que lleguen los gráficos (que suelen venir después del texto). En nuestro caso, <IMG SRC="obras.gif" width=60 height=53>, produce en pantalla: También podemos poner dimensiones 'falsas', y el navegador alterará las dimensiones de la imagen. Por ejemplo, <IMG SRC="obras.gif" width=200 height=53>, produce en pantalla: border: Este parámetro hace que aparezca un borde rodeando la imagen. Por ejemplo, <IMG SRC="obras.gif" width=60 height=53 border=2>, produce en pantalla: align: Alinea la imagen respecto del texto y puede valer: left, right, top, bottom y middle. Por ejemplo, <IMG SRC="obras.gif" alt="Pagina en construcción" width=60 height=53 border=2 align=middle> texto de ejemplo, produce en pantalla: texto de ejemplo hspace, vspace: Separa la imagen horizontal y verticalmente(en pixels y por ambos lados). Por ejemplo, <IMG SRC="obras.gif" alt="Pagina en construcción" width=60 height=53 border=2 vspace=10 align=middle hspace=10> texto de ejemplo, produce en pantalla: texto de ejemplo Las imágenes pueden servir como enlaces, p.ej el código <a href="www.google.es"><IMG SRC="obras.gif"></a> produce en pantalla: Vemos que el icono del ratón cambia al pasar por la imagen, y aparece un borde de color azul rodeándola. Casi siempre que usemos imágenes como enlaces añadiremos border=0 para evitarlo. Crear un documento que contenga los siete casos anteriores EJERCICIO 7.htm
  • 8. 8 Tablas Las tablas son los elementos más importantes del HTML. Entender cómo construirlas es la clave para dominar el lenguaje. Vamos a trabajar con una tabla de 2x2 celdas que iremos modificando sobre la marcha. El codigo para construirla es: <TABLE border=1> <TR> <TD>fila1/celda1</TD> <TD>fila1/celda2</TD> </TR> <TR> <TD><img src="obras.gif" width=60 height=53 border=0></TD> <TD>fila2/celda2</TD> </TR> </TABLE> Y el resultado en pantalla: fila1/celda1 fila1/celda2 fila2/celda2 Tenemos tres tags principales, <TABLE></TABLE>( (inicio y final de tabla),<TR></TR>( (inicio y final de fila),<TD></TD> (inicio y final de celda). Cada uno de los tags admite varios parámetros, vamos a ver los básicos: <TABLE> border: Borde de la tabla, se suele poner a cero. width: Anchura de la tabla. Esta página esta toda dentro de una tabla de anchura 600 pixels centrada en la página. cellpadding: Separación entre el contenido de las celdas y el borde de la celda cellspacing: Separación entre las celdas. bgcolor: Color de fondo <TD> width, height: Altura y anchura de la celda. Vamos a dimensionar la celda superior izquierda. <TABLE border=1> <TR> <TD width=100 height=100>fila1/celda1</TD> <TD>fila1/celda2</TD> </TR> <TR> <TD><img src="obras.gif" width=60 height=53 border=0></TD> <TD>fila2/celda2</TD> </TR> </TABLE> fila1/celda1 fila1/celda2 fila2/celda2
  • 9. 9 lign, valign: Alineamiento horizontal y vertical del contenido de la celda. Vamos a seguir modificando la celda superior izquierda. <TABLE border=1> <TR> <TD width=100 align=right valign=top height=100>fila1/celda1</TD> <TD>fila1/celda2</TD> </TR> <TR> <TD><img src="obras.gif" width=60 height=53 border=0></TD> <TD>fila2/celda2</TD> </TR> </TABLE> fila1/celda1 fila1/celda2 fila2/celda2 bgcolor: Color de la celda rowspan: Con este tag le decimos al navegador que esa celda es tan alta como varias de las otras columnas, es decir, que la celda ocupa varias filas. <TABLE border=1> <TR> <TD rowspan=2>fila1/celda1</TD> <TD>fila1/celda2</TD> </TR> <TR> <TD>fila2/celda2</TD> </TR> </TABLE> fila1/celda1 fila1/celda2 fila2/celda2 colspan: Con este tag le decimos al navegador que esa celda es tan ancha como varias de las otras filas, es decir, que la celda ocupa varias columnas. <TABLE border=1> <TR> <TD colspan=2>fila1/celda1</TD> </TR> <TR> <TD><img src="obras.gif" width=60 height=53 border=0></TD> <TD>fila2/celda2</TD> </TR> </TABLE> fila1/celda1 fila2/celda2 Crear un documento que contenga los 5 casos anteriores EJERCICIO 8.htm