You are on page 1of 6

Desarrollo de sitios web para E-C Curso de HTML.

HTML BÁSICO
INTRODUCCIÓN

Profa. Ruth Elsa Cabrera Fernández Academia Informática

HTML, estas siglas corresponden a la definición "Lenguaje para marcado de hipertexto". Se trata de un lenguaje para estructurar documentos a partir de texto en World Wide Web. Este lenguaje se basa en etiquetas (instrucciones que le dicen al texto como deben mostrarse) y atributos (parámetros que dan valor a las etiquetas). Navegador, es el programa que nos ofrece acceso a Internet. Debe ser capaz de comunicarse con un servidor y comprender e interpretar el lenguaje de todas las herramientas que manejan la información de Web, no tiene compilador por lo cual interpreta el código como está escrito de arriba hacia abajo y de izquierda a derecha, no indica los errores de sintaxis de HTML; los más populares son Netscape, Internet Explorer y Mozilla Firefox. Servidor, Se encarga de proporcionar al navegador los documentos y medios que este solicita. Utiliza un protocolo HTTP para atender las solicitudes de archivos por parte de un navegador. HTTP, es el protocolo de transferencia de hipertexto, o sea, el protocolo que los servidores de World Wide Web utilizan para mandar documentos HTML a través de Internet. URL, es el Localizador Uniforme de Recursos, es decir, es la dirección que localiza una información dentro de Internet. ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML <HTML> Limitan el documento e indica que se encuentra escrito en este lenguaje. <HEAD> Especifica el prólogo del resto del archivo. Hay pocas etiquetas que van dentro de ella. <TITLE> Se utiliza para poner el titulo en la barra de visor e identificará el contenido de la página. Sólo puede haber un título por documento, preferiblemente corto aunque significativo. </TITLE> Cierre de la etiqueta, las etiquetas de cierre se escriben igual pero precedidas de una “/”. No todas las etiquetas tienen principio y, final pero está sí. </HEAD> Cierre de la etiqueta. <BODY> Encierra el contenido del documento. Cuerpo del documento </BODY> Cierre de la etiqueta. </HTML> Cierre de la etiqueta. Ejemplo: <HTML> <HEAD> <TITLE>PRÁTICA I</TITLE> </HEAD> <BODY> DESARROLLO DE SITIOS WEB </BODY> </HTML> ATRIBUTOS, éstos pueden proporcionar ciertas características a una etiqueta (por ejemplo, altura, ancho, color, etc.), que finalmente definirán cómo debe ser interpretada la etiqueta. Los atributos se escriben dentro de la etiqueta según corresponda. Ejemplo: <BODY bgcolor=”red”>. Nota: en clase y apuntes yo escribo las etiquetas con mayúsculas y atributos con minúsculas para que ustedes los diferencien.

marginheight= ”número de pixeles” Trabaja igual que topmargin (para Netscape). básicamente. brillo o claridad) del color correspondiente a ese par (y viceversa). Estos colores primarios aditivos. marginwidth=”número de pixeles” Trabaja igual que leftmargin (para Netscape).usuarios. topmargin=”número de pixeles” Indica el número de pixeles que tendrá de margen arriba y abajo de la página. ATRIBUTOS: bgcolor=”color” Permite insertar un color de fondo a la página Web. tablas. de tres colores primarios aditivos: Red-Green-Blue (en español Rojo-Verde-Azul). Maneja seis tamaños de texto predeterminados.htmlquick. Profa. #00FF00 como resultado da el color verde.sion.Desarrollo de sitios web para E-C Curso de HTML. H1 es el más grande y H6 el más pequeño: <H1>TEXTO</H1> . Web. escribiendo el nombre del color en inglés. leftmargin=”número de pixeles” Indica el número de pixeles que tendrá de margen a los lados de la página. Partiendo de lo anterior puede hacer las combinaciones que desee.htm http://www. es decir.com/HTML/html_colornames. para insertar todo lo que contendrá la página Web como imágenes. animaciones. Otra forma de emplear los colores es. tanto mayor será también la intensidad (matiz. Estas son algunas páginas de combinaciones de colores: http://www. en HTML.com/pauluk/coloreshtml. background=”archivo. alink=”color” Da color a una liga activa. Cuanto mayor sea el valor del par. texto. #0000FF como resultado da el color azul.w3schools. HTML trabaja con la paleta de de colores RBG consta.com/es/reference/color-codes. link=”color” Da color a las ligas no visitadas. Ejemplo: <HTML> <HEAD> <TITLE>PRÁTICA I</TITLE> </HEAD> <BODY bgcolor=”#6699FF” text=”blue” leftmargin=”50” topmargin=”100”> DESARROLLO DE SITIOS WEB </BODY> </HTML> ETIQUETAS DE FORMATO DE TEXTO CABECERAS.html http://www. #FF0000 como resultado da el color rojo. Ruth Elsa Cabrera Fernández Academia Informática COLOR.asp ETIQUETA BODY La etiqueta BODY se utiliza para englobar el cuerpo del documento. vlink=”color” Da color a una liga visitada. están representados por tres pares hexadecimales del tipo 0xHH-HH-HH según el siguiente formato: #RRGGBB (= #RRVVAA) Los valores que puede adoptar cada uno de los tres pares hexadecimales van del 0x00 (0 decimal) al 0xFF (255 decimal). sirven para dividir el texto en secciones. etc.ext” Permite insertar una imagen como fondo de la página text=”color” Da color al texto que se encuentra entre de la etiqueta BODY.

<FONT> TEXTO</FONT> ATRIBUTOS size=”tamaño”. la etiqueta <BR> permite dar un salto de línea por cada etiqueta que se escriba. Izquierda=”left” Derecha=”right” Centrado=”center” Justificado=”justify” EJEMPLO: <H1 align=”center”>TEXTO</H1> se PÁRRAFOS. esta etiqueta permite tener un mayor control sobre el tamaño del texto. color=”color”. de espacio dejando una línea en blanco entre párrafos. EJEMPLO: <FONT size=”4” color=”pink” face=”goudy stout”>TEXTO</FONT> . puede poner como tantas deseen y no tiene atributos. FONT. 1 es el más pequeño y 7 es el más grande.Desarrollo de sitios web para E-C Curso de HTML. el valor de este atributo se igualará a la alineación el texto que desea tener. Ruth Elsa Cabrera Fernández Academia Informática align=”alineación”. color y tipo de letra. <H2>TEXTO</H2> <H3>TEXTO</H3> <H4>TEXTO</H4> <H5>TEXTO</H5> <H6>TEXTO</H6> ATRIBUTOS Profa. da un color al texto. EJEMPLO: <P align=”justify”>TEXTO</P> se SALTO DE LÍNEA. el valor de este atributo se igualará a la alineación el texto que desea tener. son directivas que el usuario nunca podrá visualizar y se utilizan como recordatorios en futuras revisiones del documento. face=”tipo de letra”. <!--COMENTARIO -->. este debe estar instalado en la PC para poder visualizarlo. indica el inicio de un párrafo. COMENTARIOS. permite alterar el tipo de fuente. <P>PÁRRAFO</P> ATRIBUTOS align=”alineación”. el tamaño lo maneja de 1 a 7.

EJEMPLO <PRE>TEXTO TEXTO TEXTO TEXTO</PRE> ETIQUETAS DE ESTILO. estas son las más reconocidas: Etiqueta de estilo <ABBREV> <ACRONYM> <AU> <B> <BIG> <BLINK> <CITE> <CODE> <DEL> <DFN> <EM> <I> <S> <SAMP> <SMALL> <STRONG> <STRIKE> <SUB> <SUP> <TT> Abreviatura Acrónimo Autor Crea texto en negrilla Fuente más grande Texto que parpadea (para Netscape) Cita Instrucciones (código de programación) Muestra el texto que ha sido eliminado Definición de un término Énfasis Cursiva Tacha Ejemplo Fuente más pequeña Convierte el texto en negrilla Tacha (igual que S) Subíndice Superíndice Efecto Visual Para escribir código fuente LISTAS Sirven para enumerar. presentan información. <OL>INDICA E INICIO DE LA LISTA <LI>ELEMENTO 1</LI> <LI>ELEMENTO 2</LI> <LI>ELEMENTO 3</LI> . LISTAS NUMERDAS.Desarrollo de sitios web para E-C Curso de HTML. definir elemento y citar elementos a través de características. la etiqueta <PRE> permite que el usuario visualice el texto tal y como se escribe en el bloc de notas y no tiene atributos. con la particularidad que éstos estarán predecidos de un número o una letra para enumerarlos. Profa. no manejas atributos. estas etiquetas modifican la tipografía del texto. siempre por un orden. en diversos elementos. Ruth Elsa Cabrera Fernández Academia Informática TEXTO PREFORMATEADO.

Ruth Elsa Cabrera Fernández Academia Informática ATRIBUTOS: start=”número inicia”. cuando el cursor pasa encima de la lista. indica el tipo de viñeta. EJEMPLO: <OL start=”3” type=”A” title=”CUATRIMESTRE”> <LI>PRIMER</LI> <LI>SEGUNDO</LI> <LI> TERCERO</LI> </OL> LISTAS NO NUMERDAS. EJEMPLO: . a. Comúnmente se las denomina viñetas. type=” A. I. <UL>INDICA E INICIO DE LA LISTA <LI>ELEMENTO 1</LI> <LI>ELEMENTO 2</LI> <LI>ELEMENTO 3</LI> </UL> ATRIBUTOS: type=”disc. cuando el cursor pasa encima de la lista. indica el valor inicial de la lista. cuando el cursor pasa encima de la lista. muestra el texto que está entre comillas. circle ó square”. title=”texto”. muestra el texto que está entre comillas.Desarrollo de sitios web para E-C Curso de HTML. title=”texto”. indica el tipo de numeración. i ó 1”. este tipo de listas muestran una serie de elementos sin un orden en una jerárquico. </OL> Profa. EJEMPLO: <UL type=”square” title=”CUATRIMESTRE”> <LI>PRIMER</LI> <LI>SEGUNDO</LI> <LI> TERCERO</LI> </UL> LISTAS DE DEFINICONES. pueden tener otras aplicaciones. muestra el texto que está entre comillas. es generalmente en una serie de parejas término/definición. <DL> INDICA E INICIO DE LA LISTA <DT> SE UTILIZA PARA MOSTRAR EL TERMINO</DT> <DD> SE UTILIZA PARA MOSTRAR LA DEFINICIÓN</DD> </DL> ATRIBUTOS: title=”texto”.

center ó right). </DD> </DL> LÍNEAS.Desarrollo de sitios web para E-C Curso de HTML. </DD> <DT> URL</DT> <DD>Es el Localizador Uniforme de Recursos. es decir. Profa. . <HR> ATRIBUTOS width="% de la página ó número de pixeles". Su valor por defecto suele equivaler a 2 pixeles. indica el ancho que abarcará la línea en porcentaje o número de pixeles. align= "alineación”. indica la alineación de la línea (left. noshade. color="color". es la dirección que localiza una información dentro de Internet. presenta la línea con forma de dibujo plano. Utiliza un protocolo HTTP para atender las solicitudes de archivos por parte de un navegador. Ruth Elsa Cabrera Fernández Academia Informática <DL> <DT> Servidor</DT> <DD> Se encarga de proporcionar al navegador los documentos y medios que este solicita. sin sombras ni efectos tridimensionales. no se iguala a ningún valor. size="número". permite definir la altura o espesor de la línea horizontal. las líneas divisorias se crean con la etiqueta <HR> que no tiene etiqueta de cierre. generalmente se utiliza como separadores entre la página.