curso html
TRANSCRIPT
Agosto 2008 1
Introducción Introducción HTMLHTML
Miguel Peinado
Agosto 2008 2
CURSO HTMLCURSO HTMLTerminología Básica
- HTTP:- HTTP: “hyper text transport “hyper text transport protocol”protocol”
Es un protocolo para Es un protocolo para transmitir transmitir hipertexto.hipertexto.
- Internet:- Internet: Conjunto de redes Conjunto de redes interconectadas. interconectadas.
Tiene un Tiene un alcance mayor a alcance mayor a 101055 km. km.
- Browser:- Browser: Programa necesario para Programa necesario para navegar navegar en Internet.en Internet.
Que es una página Web?
Agosto 2008 3
Una página Web es un tipo de fichero de texto,
con una extensión .htm o html (hypertext markup
language – lenguaje de Hipertexto),
CURSO HTMLCURSO HTML
Agosto 2008 4
CURSO HTMLCURSO HTML
Agosto 2008 5
CURSO HTMLCURSO HTMLQue es el Código HTML? •HTML es un lenguaje de etiquetas para crear
documentos de hipertexto que sean portables de una
plataforma a otra.
•Es un lenguaje para estructurar documentos a partir
de texto en World Wide Web. Este lenguaje se basa
en tags (Etiquetas) (instrucciones que le dicen al
texto como deben mostrarse) y atributos
(parámetros que dan valor al tag).
Agosto 2008 6
CURSO HTMLCURSO HTMLQue son las Etiquetas?
Una etiqueta es un texto que cumple con el siguiente formato:
<nombre de la etiqueta> Apertura de una etiqueta siempre entre “< >”
texto/gráfico/etiquetas A la cual se aplica la etiqueta
</nombre de la etiqueta> Cierra de la etiqueta siempre entre “</ >”
Agosto 2008 7
CURSO HTMLCURSO HTMLInicio:
-Abrir Block de notas (o algún editor de texto)
Agosto 2008 8
CURSO HTMLCURSO HTMLCódigo Básico de una página:<html><html>
<head><head>
<title></title><title></title>
</head></head>
<body><body>
</body></body>
</html></html>
Agosto 2008 9
CURSO HTMLCURSO HTMLIngresando titulo de la página (en el
Browser:
<html><html>
<head><head>
<title><title> Mi Primera Página Mi Primera Página </title></title>
</head></head>
<body><body>
</body></body>
</html></html>
Agosto 2008 10
CURSO HTMLCURSO HTMLIngresando texto en la página:
<html><html>
<head><head>
<title> Mi Primera Página </title><title> Mi Primera Página </title>
</head></head>
<body><body>
Aquí escribo lo que deseo... Hola Mundo!!!!!Aquí escribo lo que deseo... Hola Mundo!!!!!
</body></body>
</html></html>
Agosto 2008 11
CURSO HTMLCURSO HTMLCentrando texto en la página:
<html><html>
<head><head>
<title> Mi Primera Página </title><title> Mi Primera Página </title>
</head></head>
<body><body>
<center><center> HOLA MUNDO!!!!! HOLA MUNDO!!!!! </center></center>
</body></body>
</html></html>
Agosto 2008 12
CURSO HTMLCURSO HTMLMostrar texto en negrita:
<html><html>
<head><head>
<title> Mi Primera Página </title><title> Mi Primera Página </title>
</head></head>
<body><body>
<center> <center> <strong> <strong> HOLA MUNDO!!!!!HOLA MUNDO!!!!! </strong> </strong> </center></center>
</body></body>
</html></html>
Agosto 2008 13
CURSO HTMLCURSO HTMLCambiando color de Background:<html><html>
<head><head>
<title> Mi Primera Página </title><title> Mi Primera Página </title>
</head></head>
<body <body bgcolor="#CCCCCC">bgcolor="#CCCCCC">
<div aling=“center”> <div aling=“center”> <font size="5">hola</font><font size="5">hola</font></div></div>
</body></body>
</html></html>
#000000-> NEGRO #ffffff-> BLANCO#000000-> NEGRO #ffffff-> BLANCO
Agosto 2008 14
CURSO HTMLCURSO HTMLCambiando tamaño de texto y centrando
de otra forma:<html><html>
<head><head>
<title> Mi Primera Página </title><title> Mi Primera Página </title>
</head></head>
<body><body>
<div align=“center”> <div align=“center”> <font size="5">hola</font><font size="5">hola</font></div></div>
</body></body>
</html></html>
ALIGN: right, left, center, justify.ALIGN: right, left, center, justify.
SIZE: desde 1 hasta 7 (con modificaciones de + SIZE: desde 1 hasta 7 (con modificaciones de + y -).y -).
Agosto 2008 15
CURSO HTMLCURSO HTMLIngresando Imágenes:
<body bgcolor="#CCCCCC"><body bgcolor="#CCCCCC">
<div align=“center”> <div align=“center”> <font size="5">hola</font><font size="5">hola</font></div></div>
<img src="dirección_imagen/nombre.gif" width="100" <img src="dirección_imagen/nombre.gif" width="100" height="10" border="1">height="10" border="1">
</body></body>
Agosto 2008 16
CURSO HTMLCURSO HTMLCreando Links:
<body bgcolor="#CCCCCC"><body bgcolor="#CCCCCC">
<div aling=“center”> <div aling=“center”> <font size="5">hola</font><font size="5">hola</font></div></div>
<img src="dirección imagen/nombre.gif" width="100" <img src="dirección imagen/nombre.gif" width="100" height="10" border="1">height="10" border="1">
<a href=página2.html> Pagina 2 </a><a href=página2.html> Pagina 2 </a>
</body></body>
Agosto 2008 17
CURSO HTMLCURSO HTMLModificar colores Links:
<body <body bgcolor="#CCCCCC“ link="#00FF33" bgcolor="#CCCCCC“ link="#00FF33" vlink="#FFFFFF" alink="#CC9966">vlink="#FFFFFF" alink="#CC9966">
<div align=“center”> <div align=“center”> <font size="5">hola</font><font size="5">hola</font></div></div>
<img src="dirección imagen/nombre.gif" width="100" <img src="dirección imagen/nombre.gif" width="100" height="10" border="1">height="10" border="1">
<a href=página2.html> Pagina 2 </a><a href=página2.html> Pagina 2 </a>
</body></body>
Agosto 2008 18
CURSO HTMLCURSO HTMLSalto de Línea:
<body bgcolor="#CCCCCC“><body bgcolor="#CCCCCC“>
Estoy muy entretenido Estoy muy entretenido <br><br>
Es realmente bueno el curso Es realmente bueno el curso <br><br>
jajjajajajajjajjajajajaj
</body></body>
Agosto 2008 19
CURSO HTMLCURSO HTMLGuardar como pagina1.html:
Julio 2006 20
CURSO HTMLCURSO HTML• Ir a carpeta donde guardamos el
archivo y hacer doble click en él:
Agosto 2006 21
CONSULTASCONSULTASHASTA HASTA AQUÍ….AQUÍ….
FIN PRIMERA PARTE.FIN PRIMERA PARTE.
Agosto 2008 22
CURSO HTMLCURSO HTMLRevisando algunas etiquetas?
Etiqueta <hr>La etiqueta <hr> dibuja de manera predeterminada una regla horizontal alineadaautomáticamente, con una apariencia de tercera dimensión. Esta etiqueta especial, por que nonecesita de cierre, tiene los siguientes atributos:• Align establece que la regla se alinee a la izquierda, centro o derechaLEFT,CENTER o RIGHT• NOSHADE quita el sombreado predeterminado de la regla• WIDTH permite especificar el ancho de la regla (en pixeles o porcentaje)• SIZE permite especificar el alto de la regla (en pixeles)
Agosto 2008 23
CURSO HTMLCURSO HTMLUn ejemplo
<html><head> <title>Curso de HTML</title> </head><body bgcolor="#C0D9D9" text="#000000">Bienvenidos al curso de HTML<br><hr align=center width=50%><br>Cuando la temperatura es menor a 15°c hacebastante frío.<br><hr align=left width=25% size=5><br>Este es un ejemplo de página WEB :)<br></body></html>
Agosto 2008 24
CURSO HTMLCURSO HTML
Encabezados
Las etiquetas <h1> </h1> al <h6> </h6> (acrónimos de “heading 1..6”) son encabezados delcuerpo del texto. El encabezamiento <h1> nos proporciona las letras de mayor tamaño. Notaráque si usamos una etiqueta de encabezamiento, automáticamente se incluirá un retorno de carroal final del mismo. La etiqueta tiene el siguiente atributo:• Align Permite ubicar el encabezamiento a la izquierda, centro o derecha de lapantalla (LEFT, CENTER,RIGHT)
Agosto 2008 25
CURSO HTMLCURSO HTMLUn ejemplo
<html><head> <title>Curso de HTML</title> </head><body bgcolor="#C0D9D9" text="#000000"><h1 align="center">Bienvenidos al curso de HTML</h1><br><hr align=center width=50%><br><h2>Bienvenidos</h2>Cuando la temperatura es menor a 15°c hacebastante frío.<br><hr align=left width=25% size=5><br>Este es un ejemplo de página WEB :)<br></body></html>
Agosto 2008 26
CURSO HTMLCURSO HTML
Ubicación, formato y atributos de textoEtiqueta <center> </center>Se utiliza para centrar el texto/imagen o datos que se encuentren entre la apertura y el cierre.Etiqueta <b> </b>Esta es la etiqueta que nos posibilita un texto con negrillas.Etiqueta <u> </u>Etiqueta que posibilita resaltar un texto con subrayado.Etiqueta <i> </i>Etiqueta que permite resaltar el texto con inclinación itálica.
Agosto 2008 27
CURSO HTMLCURSO HTMLUn ejemplo
<html><head> <title>Curso de HTML</title> </head><body bgcolor="#C0D9D9" text="#000000"><h1 align="center">Bienvenidos al curso de HTML</h1><br><hr align=center width=50%><br><h2>Bienvenidos</h2><hr align=left width=25% size=5><br><b>Este texto esta con negrillas</b><br><u>Este texto esta con subrayado</u><br><i>Este texto esta con inclinación itálica</i><br>Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br></body></html>
Agosto 2008 28
CURSO HTMLCURSO HTML
Etiqueta <font> </font>Esta etiqueta proporciona al autor un medio de personalizar el texto con respecto al tipo defuente, tamaño y color. Atributos:
• Color determina el color que se aplica al texto• Size determina el tamaño relativo del texto. Los tamaños válidos son del 1 al 7,siendo el predeterminado el 3 y el más grande el 1.• Face asigna una fuente o tipo de letra.
Agosto 2008 29
CURSO HTMLCURSO HTMLUn ejemplo
<html><head> <title>Curso de HTML</title> </head><body bgcolor="#C0D9D9" text="#000000"><h1 align="center">Bienvenidos al curso de HTML</h1><br><hr align=center width=50%><br><h2>Bienvenidos</h2>Cuando la temperatura es menor a 15°c hacebastante frío.<br><hr align=left width=25% size=5><br>Este <b>texto <i>cuenta <u>con un </u>combinado</i> de</b> todo.<br><font color="red"><font size=7>B</font>o</font><font color="yellow">li</font><font color="green">via</font><br></body></html>
Agosto 2008 30
CURSO HTMLCURSO HTML
Etiqueta <img>Se trata de otra etiqueta especial, pues no necesita de etiqueta de cierre. Esta etiqueta instruye alnavegador para que exhiba la imagen especificada. El formato básico para incluir un gráfico es:
<img src=”imagen.ext”>
Agosto 2008 31
CURSO HTMLCURSO HTMLUn ejemplo
<html><head> <title>Curso de HTML</title> </head><body bgcolor="#C0D9D9" text="#000000" background="fondo.gif"><center><h1>Bienvenidos al curso de HTML</h1></center><br><hr width=50%><br><h2>Información General</h2>Este curso muestra los conceptos básicos del uso deetiquetas e instrucciones en la elaboración dedocumentos <b><i><font color="#000080">HTML</font></i></b>.<br><br><center><img src="foto.jpg" border="1" alt="Foto de Miguel"></center><br></body></html>
Agosto 2008 32
CURSO HTMLCURSO HTMLGeneración de Tablas:<body bgcolor="#CCCCCC“><body bgcolor="#CCCCCC“><TABLE BORDER="1">
<TR> <TH>Cabereca 1</TH> <TH>Cabereca 2</TH> </TR> <TR> <TD>Dato 1</TD> <TD>Dato 2</TD> </TR> <TR> <TD>Dato 4</TD> <TD>Dato 5</TD> </TR> </TABLE>
</body></body>
Agosto 2008 33
CURSO HTMLCURSO HTMLGeneración de Tablas:<body bgcolor="#CCCCCC“><body bgcolor="#CCCCCC“>
<table width="23%" height="214" border="1"><table width="23%" height="214" border="1">
<tr><tr>
<td>PRINCIPAL</td><td>PRINCIPAL</td>
</tr></tr>
<tr><tr>
<td>FOTOS</td><td>FOTOS</td>
</tr></tr>
</table></table>
</body></body>
Agosto 2008 34
CURSO HTMLCURSO HTMLGeneración de links a mail:<body bgcolor="#CCCCCC“><body bgcolor="#CCCCCC“>
<table width="23%" height="214" border="1"><table width="23%" height="214" border="1">
<tr><tr>
<td><td><a href="mailto:[email protected]">ENVIAR <a href="mailto:[email protected]">ENVIAR MAIL</a>MAIL</a></td></td>
</tr></tr>
</table></table>
</body></body>
Agosto 2008 35
CURSO HTMLCURSO HTMLGeneración de Tablas:<TABLE border="1"> <CAPTION>Tazas de café consumidas </CAPTION>
<TR><TH>Nombre<TH>Tazas<TH>Tipo de Café<TH>¿Azúcar? <TR><TD> Miguel<TD>10<TD>Espresso<TD>No
<TR><TD>Juan <TD>5<TD>Descafeinado<TD>Sí <TR><TD>Carlos<TD colspan="3"><em>No disponible</em>
</TABLE>
Agosto 2008 36
CURSO HTMLCURSO HTMLGeneración de Tablas:<TABLE border="1">
<TR><TD>1 <TD rowspan="2">2 <TD>3 <TR><TD>4 <TD>6 <TR><TD>7 <TD>8 <TD>9
</TABLE>
Agosto 2008 37
CURSO HTMLCURSO HTMLGeneración de Tablas:<TABLE border="1">
<TR><TD>1 <TD>2 <TD>3 <TR><TD colspan="2">4 <TD>6 <TR><TD>7 <TD>8 <TD>9
</TABLE
Agosto 2008 38
CURSO HTMLCURSO HTMLGeneración de Listas:Lista no ordenada<UL TYPE=“bullet”>
<LI>Perros<LI>Gatos<LI>Peces<LI>Hamsters
</UL>
Agosto 2008 39
CURSO HTMLCURSO HTMLGeneración de Listas:Lista ordenada<OL TYPE=“A”>
<LI>Perros<LI>Gatos<LI>Peces<LI>Hamsters
</OL>
Agosto 2008 40
CURSO HTMLCURSO HTMLGeneración de Listas:Lista de Definicion <DL> <DT><B>Vehiculo</B>
<DD> Vehículo de 4 o más ruedas que sirve para desplazar cosas, personas o animales.
<DT><B>HTML</B> <DD> Lenguaje de Marcas de Hipertexto
</DL>
Agosto 2008 41
CURSO HTMLCURSO HTMLGeneración de Listas:Lista de Definicion <DL> <DT><B>Vehiculo</B>
<DD> Vehículo de 4 o más ruedas que sirve para desplazar cosas, personas o animales.
<DT><B>HTML</B> <DD> Lenguaje de Marcas de Hipertexto
</DL>
Agosto 2008 42
FIN… (Primera parte)FIN… (Primera parte)