Curso de html

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


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>


</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>


</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>


</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>


</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">


<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">


<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


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


<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


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


<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


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


<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


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


<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)

Curso de html

Education

Transcript of Curso de html