html bas
DESCRIPTION
Elementos básicos de creación de Páginas Web. Web 1.0TRANSCRIPT
![Page 1: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/1.jpg)
Adaptado de varias PPTs enhttp://www.slideshare.net/metalles/curso-de-html
Escuela Técnica de Rivera Escuela Técnica de Rivera
20092009
HTML BásicoHTML Básico
![Page 2: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/2.jpg)
WWW (World Wide Web)
Es el servicio más utilizado en la actualidad por los Usuarios de internet. Permite conectar con un computador remoto y acceder a la información que proporciona, ya seatexto, imágenes, sonido o programas.
El invento del Web llegó de las manos de Tim Berners-Lee de la empresa Norteamericana CERN.PROTOCOLO HTTP (HiperText Transfer Protocol)
Es la forma o el modo que se emplea para comunicarsedeterminados elementos entre sí. Es el lenguaje que empleanlos servidores Web.NAVEGADOR o Browsers
Para acceder al WWW es necesario emplear un programacliente de este servicio. Son visualizadores de documentos escritos en lenguaje HTML.
![Page 3: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/3.jpg)
BUSCADOREs una página de internet en donde se puede buscar todo tipo de información.
Nombres por dominioNombre_computador: nombre del computador donde seencuentra la página.Subdominio: Es una localización lógica, la cual puedecontener otros subdominio.Dominio_principal: Significa una organización o país (edu, org, com)
HTML : (“Hiper Text Mark Up Language”)Lenguaje para formatear texto con el fin de distribuir documentos en Internet. Basta un editor de texto básico, como el worpad, notepad de windows para escribir el código fuente, interpretado por un navegador como MS-Internet Explorer, Mozzilla, Chrome, etc.
![Page 4: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/4.jpg)
ELEMENTOS DEL LENGUAJE HTML
1. Elementos Llenos
2. Elementos Vacios
3. Elementos con Argumentos
![Page 5: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/5.jpg)
Los Elementos llenos se forman mediante una marca de inicio y final.
En Html las marcas se delimitan con los signos < (menor que) y > (mayor que).
La marca de fin es idéntica a la inicial sólo se diferencia con la barra inclinada antes de nombre.
Ej.Texto normal <marca> texto afectado por la marca </marca>resto del texto
Los Elementos vacíos no requieren de la marca final, ya que no producen un efecto sobre el texto en sí. Ej. <marca atributo1=numérico atributo2=“alfanumerico”>
Los Elementos con argumentos se refiere a que posee atributos. Cada uno de estos atributos podrá tener un valor el cual irá entre comillas, si es alfanúmerico.
Ej. <marca atributo 1 atributo 2numérico atributo 3 = “alfanumérico”>
Nota: < = < >=>
![Page 6: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/6.jpg)
Estructura de un documento HTMLUn documento HTML empieza con una marca <html> y Finaliza con la marca </html>, no diferenciando las mayúsculas de las minúsculas.Está estructurado en dos partes:cabecera: <HEAD> </HEAD>cuerpo: <BODY> </BODY>En la cabecera se incluye
<TITLE></TITLE> Descripción que identifica el documento.<META> Contiene palabras claves, nombre del autor, forzar a que la página activa se carga cada cierto tiempo. Esta información no se ve en el navegador.En el cuerpo se encontrará todo aquello que no pertenezca a lacabecera y todo lo que se vea en el navegador.
Los comentarios se definen entre las marcas <!-- y - ->
![Page 7: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/7.jpg)
<!DOCTYPE HTML PUBLIC="-//IETF//DTD HTML 4.0//EN"><html><head> <title> MI PRIMERA PAGINA </title><META name="keywords" content="HTML,realización páginas
web,portada,buscadores,precios módicos"><META name="descripcion" content="Mi primera portada con la guía
de MLpoint"><META name="GENERATOR" content="BOC DE NOTAS Win95"><META name="author" content="Nombre Apellidos"><META HTTP-EQUIV="Refresh" content="5";url=pippo.htm></head><body>TODO ESTO ES EL CUERPO DE LA PAGINA < HTML ><!-- comentarios --></body></html>
Ejemplo de Estructura del documento
![Page 8: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/8.jpg)
<!DOCTYPE HTML PUBLIC="-//IETF//DTD HTML 4.0//EN">
DOCTYPE: Proporciona información al servidor de web anfitrión de la página entregando los datos necesarios
para la Comunicación entre el navegador y el servidor. (no es Obligatorio) Su forma estándar es la siguiente:
HTML PUBLIC: El documento es público.IETF: El tipo de HTML público está gestionado por la
InternetEngineering Task Force.DTD HTML 4.0: La versión de HTML soportada es la 4.0.EN: El idioma del documento es el inglés.
![Page 9: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/9.jpg)
META: Son cadenas de códigos que son las primeras que leen
Los buscadores.KEYWORDS: Las palabras clave son los términos que, demanera resumida describen el contenido de una página
web.AUTHOR: Autor de la página.DESCRIPCION: Título que aparecerá tras la búsqueda.GENERATOR: Nombre del editor que se ha generado elDocumento.NOINDEX: Es cuando se desea que una página NO sea Indicizada en los motores de búsqueda.REFRESH: Refrescar la página cada cierto tiempo.
![Page 10: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/10.jpg)
ATRIBUTOSLos atributos de las marcas permiten asignar un color o ciertos elementos al documento. Constan de 2 partes y se usan dentro de las marcas.
-Ej. bgcolor= “#FFFFFF”
ATRIBUTOS PARA EL CUERPO (<BODY>)BGCOLOR (color de fondo)BACKGROUND (imagen o papel tapiz usado como fondo)LINK (color de los vínculos del documento)VLINK (color de un vínculo ya visitados)ALINK (color de un vínculo al momento de hacer click)
Nombre
Valor
![Page 11: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/11.jpg)
FORMATO Y APARIENCIA BÁSICASe puede obtener casi todas las posibilidades de formato para darle cierta apariencia al texto de un documento HTML. Algunos de ellos son: (su visualización depende del navegador).
<ADRESS> Dirección
<ANCHOR> Ancho
<CITE> Cita
<CODE> Código
<DFN> Definición
<EM> Émfasis
![Page 12: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/12.jpg)
<KBD> Formato de teclado
<STRONG> Texto Destacado
<TT> Formato de máquina
<VAR> Variable
<H1>...<H6> Tamaño de cabecera
<XMP> Ejemplo
<B> Negrita
<I> Cursiva
<U> Subrayado
<SUB> Subíndice
<SUP> Supíndice (elevado)
<HR> Línea
<STRIKE> Tachado
<BLINK> Parpadeo
<BIG> Texto Grande
<SMALL> Texto Pequeño
![Page 13: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/13.jpg)
SEPARADORES DE BLOQUES<P> (Separador de párrafos, sus atributos son left, right, center).<BR> (Salto de línea).<BLOCKQUOTE> (Párrafos Tabulados).<HR> (Línea Horizontal, atributos: noshade, width, size, align).<PRE> (Texto preformateado).<CENTER> (Centrado de bloques)
FUENTES (tamaño, color y tipo de letra)<FONT atributo = valor atributo>
SIZE (tamaño de los caracteres, por defecto es 3 )COLOR (color de los caracteres)FACE (tipo de letra)
Nota: Si se utiliza un tamaño para la letra se debe sumar orestar al número 3. <Basefont size = N> Permite cambiar el tamaño por defecto de la letra para todo el Texto.
![Page 14: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/14.jpg)
FACELa fuente debe estar disponible en el navegador que está viendo el documento HTML. En caso contrario, se debe usar una alternativa. Arial = HelveticaCourrier New = CourrierTimes New Roman = Times
<Font Face=“Arial,Helvetica”>Fuente Arial</Font>
COLOR Los colores se identifican mediante el nombre del color en
Inglés o mediante un código del tipo #RRGGBB (Rojo, Verde,Azul). Son valores Hexadecimal comprendido entre 00 y FF.Ej.
<Font Color=“green”> Color Verde</Font>
Nota: el atributo color se puede utilizar en la etiqueta <Font>(color a la fuente),<Body>(color al entorno bgcolor), controlarel color de los enlaces del <Body> (link,alink,vlink).
![Page 15: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/15.jpg)
LISTAS: Una lista permite organizar la totalidad o parte de un
documento HTML. Existen varios tipos de Listas:
1. Listas Sin Orden (sin enumeración) <UL>, <LI>2. Listas Ordenadas (con enumeración) <OL>,<LI>3. Listas de Directorios <DIR>, <LI>4. Listas de Menú <MENU>, <LI>5. Listas de Definición <DL>, <DT>, <DD>
Ejemplo:<marca de comienzo>
<LI> Primer elemento de la lista </LI><LI> Segundo elemento de la lista </LI><LI> ........... </LI>
<marca de cierre>
![Page 16: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/16.jpg)
LISTA NO ORDENADAS (Incluye una viñeta)<H3> Ejemplo de lista no ordenadas </H3><UL>
<LI> Fichero HTML</LI><LI> Fichero de Imagen</LI> <LI> Fichero de Sonido</LI> <LI> Fichero de Vídeo</LI> <LI> Fichero de Ejemplo</LI>
</UL>
Nota: Las viñetas se puede modificar. Por defecto es un círculo relleno.
<UL TYPE = DISC> (círculo relleno)<UL TYPE = CIRCLE> (círculo sin relleno)<UL TYPE = SQUARE> (cuadrado sin relleno)
![Page 17: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/17.jpg)
LISTAS ORDENADAS ( Numeradas )
<H3> Ejemplo de lista ordenadas </H3><OL>
<LI> Fichero HTML</LI><LI> Fichero de Imagen</LI> <LI> Fichero de Sonido</LI> <LI> Fichero de Vídeo</LI> <LI> Fichero de Ejemplo</LI>
</OL>Nota: Las listas se pueden ordenar utilizando números,Letras, números romanos, tanto en mayúsculas comominúsculas.
<OL TYPE = A> para letras mayúsculas<OL TYPE = a > para letras minúsculas<OL TYPE = I > numeración romana en mayúsculas<OL TYPE = i > numeración romana en mayúsculas
![Page 18: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/18.jpg)
START : Atributo que pertenece a la lista. Permite empezar con el número o letra que dice el atributo start.Ej.
<OL TYPE = A START = 5>Nota: Debe siempre ser un número para una letra o un
númeroLISTAS DE DIRECTORIO Y LISTAS DE MENU
Las Listas de Directorio y las Listas de Menú, son similaresa las Listas sin Orden, sólo cambia la etiqueta.Ej.
<DIR> ó <MENU><LI> Fichero de HTML</LI><LI> Fichero de Imagen </LI></DIR> ó </MENU>
![Page 19: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/19.jpg)
LISTAS DE DEFINICIONSe da una descripción de cada uno de sus elementos.
utiliza las siguientes marcas.
<DL></DL> Abre y cierra una Lista Descriptiva<DT> Caracterizar el elemento<DD> Definir el elementoEj.:<H3> Ejemplo de Listas de tipo Definición </H3><DL><DT>ASCII
<DD>Juego de Caracteres que asigna valores ....<DT>EPS
<DD>Formato de Descripcion de ficheros<DT>FUENTE
<DD>Conjunto de Estilos que posee.....
![Page 20: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/20.jpg)
LISTAS ANIDADASCorresponden a una combinación de listas.
Combinación Listas sin orden a) Combinación Listas con ordenb) Combinación Listas sin orden y con orden<H3> Ejemplo de lista combinadas </H3><OL>
<LI> Uruguay</LI><UL>
<LI> Montevideo</LI> <LI> Rivera</LI> </UL> <LI> Brasil</LI> <UL>
<LI> Brasilia</LI> <LI> Porto Alegre</LI> </UL>
</OL>
![Page 21: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/21.jpg)
VINCULOSEs uno de los elementos más importante de HTML, ya que realmente nos permite “navegar” por uno o varios documentos que pueden estar en cualquier parte de la Web.
La zona activada puede ser un grupo de caracteres, una imagen o bien una porción de una imagen.
<A> ....</A>
ATRIBUTOS DE LOS ENLACES
NAME: Define el punto de llegada en el documento destino asignándole un nombre.
HREF: Define un ancla de partida hacia un enlace externo o interno del documento.
TARGET: Permite indicar donde se abrirá el documento enlazado.
![Page 22: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/22.jpg)
El atributo Name (vínculo Interno):
<A NAME =“#abajo”>Sesión abajo</A>
El atributo HREF:<A HREF=“capitulo.html”>Mi capitulo</A><A HREF=“http://jmc.utfsm.cl”</A><A HREF=“mailto:[email protected]”</A><A HREF=“#abajo”</A>
SERVICIOS DE INTERNET:
HTTP: Se utiliza para indicar documentos residentes en servidores web. http://nombre_del servidor/directorio/subdirectorio/ fichero.html
FTP: Ofrece servicios para la transferencia de archivos.
ftp://nombre_del_servidor/directorio/subdirectorio
NEWS: Corresponden a foros de discusión en ámbito de interésNews://nombre_del_grupo_de_news
![Page 23: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/23.jpg)
IMÁGENES
Existen tres tipos de formato de imágenes, más comunes, que se pueden Insertar en un documento HTML:
JPEG GIF PNG
Para insertar una imagen se usa la etiqueta:Ej.:
< IMG SRC = “mi_imagen.gif” >
![Page 24: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/24.jpg)
ATRIBUTOS DE LAS IMÁGENES
BORDER: (Tamaño del borde alrededor de una imagen)<IMG SRC=“mi_imagen.gif” border=0>
WIDTH: (Ancho en pixeles de la imagen)<IMG SRC=“mi_imagen.gif” width=100>
HEIGHT: (Altura en pixeles de la imagen)<IMG SRC=“mi_imagen.gif” height=0>
NAME: (Darle un nombre a la imagen)<IMG SRC=“mi_imagen.gif” name=“img1”>
ALIGN: (Alinear la imagen con respecto al texto de un documento). Tenemos left, right, top, abscenter, middle, center, bottom, texttop, textbottom.
<IMG SRC=“mi_imagen.gif” align=left>
![Page 25: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/25.jpg)
El atributo “ALIGN”
Align=top
Align=center
Align=bottom
Align=textop
Align=middle
Align=textbottom
![Page 26: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/26.jpg)
ATRIBUTOS DE LAS IMÁGENES
HSPACE: (Espacio a la derecha e izquierda de una imagen).
<IMG SRC=“mi_imagen.gif” hspace=“10”>
RSPACE: (Espacio arriba y abajo de una imagen)<IMG SRC=“mi_imagen.gif” vspace=“15”>
ALT: (Sirve para dar una descripción a la imagen)<IMG SRC=“mi_imagen.gif” alt=“Mi imagen”>
LONGDESC: (Es un vínculo hacia un documento queexplica detalladamente la imagen)
<IMG SRC=“mi_imagen.gif” longdesc=“mi_imagen.html”>
![Page 27: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/27.jpg)
IMÁGENES FLOTANTE:La imagen puede quedar a la izquierda o a la derecha de un párrafo: texto. (align = left)
texto. (align = rigth) Este es un ejemplo para mostrar
la imagen a la Izquierda del texto
Este es un ejemplo para mostrar la imagen a la derecha del texto
![Page 28: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/28.jpg)
Convirtiendo Imágenes en Hipervínculos
Para utilizar una imagen como hipervínculos se debe usar las siguientes sentencias.
Ej.:
<A Href = “página.html”> <Img Src=“mi_imagen.gif”
Border = 0 height=86 width = 56 alt=“mi imagen”> </A>
![Page 29: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/29.jpg)
MAPAS DE IMÁGENESEn HTML un mapa es una imagen que está dividida
en varias regiones y cada región contiene un hipervínculo.<MAP NAME =“mimapa”>
Definición de las regiones del mapa.......</MAP>
El Name “mimapa” corresponderá al nombre que se debe colocar en el atributo USEMAP, el cual se coloca en la marca <IMG>, precidida con un gato.(#).
Ej.:<MAP NAME =“mapa1”> <AREA SHAPE =“RECTANGLE” coords=“1,1,75,46” Href=“indice.html”> </MAP>
<IMG SRC =“mi_imagen.gif” USEMAP=“#mapa1”>
![Page 30: Html Bas](https://reader034.vdocuments.pub/reader034/viewer/2022051323/5479a50c5806b562048b471c/html5/thumbnails/30.jpg)
Atributos del AREA, la cual permite definir las regiones deun mapa.<Area Shape=“rectangle” href=“home.html” coords = “0,0,118,28”.>SHAPE: (tenemos formas como rectangle, poly, circle)HREF: (Documento o sitio vinculado)COORDS: (Coordenadas de acuerdo a la figura)
Coords = “left-x, top-y, right-x, bottom-y”
Coords=“centro-x, centro-y, radio”
Coords=“x1,y1, x2,y2, x3,y3, xn,yn”