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

Html Slide Part-1
Html Slide Part-1Html Slide Part-1
Html Slide Part-1
AAKASH KUMAR
 
Page maker - working with text
Page maker - working with textPage maker - working with text
Page maker - working with text
ThamizhselviKrishnam
 
Html presentation
Html presentationHtml presentation
Html presentation
Prashanthi Mamidisetty
 
Crear una pagina web con bloc de notas
Crear una pagina web con bloc de notasCrear una pagina web con bloc de notas
Crear una pagina web con bloc de notas
Sandra Meza
 
Introduction to HTML
Introduction to HTML Introduction to HTML
Introduction to HTML
Professional Guru
 
Examen Word
Examen WordExamen Word
Examen Word
jpalencia
 
Html ppt
Html pptHtml ppt
Html ppt
Ruchi Kumari
 
Html and CSS: Chapter 02
Html and CSS: Chapter 02Html and CSS: Chapter 02
Html and CSS: Chapter 02
Steve Guinan
 
Word 2007 avanzado(recopilacion de preguntas de examenes)
Word 2007 avanzado(recopilacion de preguntas de examenes)Word 2007 avanzado(recopilacion de preguntas de examenes)
Word 2007 avanzado(recopilacion de preguntas de examenes)
Jose Dominguez
 
Html
HtmlHtml
Google Slides
Google SlidesGoogle Slides
Google Slides
erikbonfil
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
Hameda Hurmat
 
REVIEW TAB : Proofing group and Comments group
REVIEW TAB : Proofing group and Comments groupREVIEW TAB : Proofing group and Comments group
REVIEW TAB : Proofing group and Comments group
Ashish051992
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
Niharika Gupta
 
Html
HtmlHtml
Manual de practicas de dreamweaver
Manual de practicas de dreamweaverManual de practicas de dreamweaver
Manual de practicas de dreamweaver
daaaaaaaaaaa Gutiierriitos
 
Php
PhpPhp
Photoshop
PhotoshopPhotoshop
Html
HtmlHtml
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
Alfredo Torre
 

La actualidad más candente (20)

Html Slide Part-1
Html Slide Part-1Html Slide Part-1
Html Slide Part-1
 
Page maker - working with text
Page maker - working with textPage maker - working with text
Page maker - working with text
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Crear una pagina web con bloc de notas
Crear una pagina web con bloc de notasCrear una pagina web con bloc de notas
Crear una pagina web con bloc de notas
 
Introduction to HTML
Introduction to HTML Introduction to HTML
Introduction to HTML
 
Examen Word
Examen WordExamen Word
Examen Word
 
Html ppt
Html pptHtml ppt
Html ppt
 
Html and CSS: Chapter 02
Html and CSS: Chapter 02Html and CSS: Chapter 02
Html and CSS: Chapter 02
 
Word 2007 avanzado(recopilacion de preguntas de examenes)
Word 2007 avanzado(recopilacion de preguntas de examenes)Word 2007 avanzado(recopilacion de preguntas de examenes)
Word 2007 avanzado(recopilacion de preguntas de examenes)
 
Html
HtmlHtml
Html
 
Google Slides
Google SlidesGoogle Slides
Google Slides
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
REVIEW TAB : Proofing group and Comments group
REVIEW TAB : Proofing group and Comments groupREVIEW TAB : Proofing group and Comments group
REVIEW TAB : Proofing group and Comments group
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
 
Html
HtmlHtml
Html
 
Manual de practicas de dreamweaver
Manual de practicas de dreamweaverManual de practicas de dreamweaver
Manual de practicas de dreamweaver
 
Php
PhpPhp
Php
 
Photoshop
PhotoshopPhotoshop
Photoshop
 
Html
HtmlHtml
Html
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
 

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
Margarita T.
 
PresentacióN Html
PresentacióN HtmlPresentacióN Html
PresentacióN Html
marcos0209
 
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

La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
NoraRoberts5
 
SLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajasSLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajas
ruthechepurizaca
 
PRESENTACION TEMA COMPUESTO AROMATICOS Y
PRESENTACION TEMA COMPUESTO AROMATICOS YPRESENTACION TEMA COMPUESTO AROMATICOS Y
PRESENTACION TEMA COMPUESTO AROMATICOS Y
WillyBernab
 
Oración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docxOración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docx
LuisAlbertoCordovaBa
 
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNETCOMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
Kevin Aguilar Garcia
 
Diapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptxDiapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptx
erick502105
 
Análisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de ArtesAnálisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de Artes
al050121024
 
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docxFICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
EmilyEsmeraldaQuispe
 
APLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptxAPLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptx
cpadua713
 
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente CruzattSEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
vicenteariana54
 
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidadESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
jorgejhonatanaltamir1
 

Último (11)

La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
 
SLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajasSLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajas
 
PRESENTACION TEMA COMPUESTO AROMATICOS Y
PRESENTACION TEMA COMPUESTO AROMATICOS YPRESENTACION TEMA COMPUESTO AROMATICOS Y
PRESENTACION TEMA COMPUESTO AROMATICOS Y
 
Oración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docxOración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docx
 
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNETCOMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
 
Diapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptxDiapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptx
 
Análisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de ArtesAnálisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de Artes
 
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docxFICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
 
APLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptxAPLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptx
 
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente CruzattSEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
 
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidadESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
 

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