Recomendados
Más contenido relacionado
La actualidad más candente
Similar a Lenguaje HTML ETIQUETAS
Similar a Lenguaje HTML ETIQUETAS (20)
Último
Último (20)
Lenguaje HTML ETIQUETAS
- 1. Copyright TUTOS_AES TUTOS_AES SISTEMAS INFORMATICOS LENGUAJE HTML y etiquetas Copyright SISTEMAS_INFORMATICOS
- 2. Copyright TUTOS_AES HTML El lenguaje HTML “HyperText Markup Language” es el lenguaje con el que se escriben las páginas web y que entienden los navegadores, de modo que quede determinada la forma en que mostrar la información (qué tipos, tamaños y colores de las letras, dónde colocar las imágenes, cómo enlazar a otras páginas, ...). ¿CÓMO CREAR UNA PÁGINA WEB EN HTML? En el fondo, crear una página web en HTML, no es muy diferente a crear cualquier otro documento con un editor de texto. Consiste en crear un fichero con extensión .html o .htm y editarlo. En este fichero, se creará el contenido en sí (el texto de los títulos, párrafos, crear formularios HTML, etc.), así como las etiquetas (o “tags”) HTML (luego veremos que son) necesarias para definir la estructura del documento HTML. Esto se puede hacer de una manera más purista en modo texto trabajado directamente con el código HTML, o bien, de una manera más visual y amigable con un editor HTML especializado, muy parecido a cómo se trabaja también en un editor como Microsoft Word, por ejemplo.
- 3. Copyright TUTOS_AES A partir de aquí, el proceso (que iré desglosando y será lo que aprenderás a lo largo del post) sería: Aprender el principio fundamental de HTML: crear documentos estructurados con etiquetas. Elegir el mejor editor para tu caso concreto. Crear la estructura básica de tu página HTML: la cabecera y el cuerpo. Crear el contenido y aplicarle formato con las etiquetas HTML: títulos, párrafos de texto, enlaces, imágenes, tablas, audio y vídeo embebido, etc. Si los necesitas, integrar también los elementos interactivos (formularios). Implementar, en su caso, en el servidor la lógica para responder a los formularios. Publicar (hacer visible) la página en Internet o en local. Un ejemplo minimalista de página, vista como código HTML, no como el resultado final que ser ve en el navegador, sería éste: Ejemplo de página HTML con un conjunto mínimo de elementos
- 4. Copyright TUTOS_AES Y aquí puedes ver el resultado de este código en un navegador web: Ejemplo de una página web trivial y en la que no se ha realizado aún la parte de diseño con CSS
- 5. Copyright TUTOS_AES ESTRUCTURA DE UNA PÁGINA WEB Estructura Basica del codigo HTML ETIQUETAS HTML <HTML> … </HTML> Delimita y engloba toda la página web, que consta de cabecera y cuerpo. <HEAD> … </HEAD> Delimita y engloba la cabecera de una página, que contiene un conjunto de informaciones que no se muestran en la ventana, entre ellas el título de la página, pero que pueden ayudar a los navegadores y a los buscadores para interpretar o a encontrar correctamente la página <TITLE> … </TITLE> Dentro de la cabecera (HEAD), lo que se incluye aquí se muestra en la barra del título de la ventana del navegador.
- 6. Copyright TUTOS_AES Metadatos La cabecera admite otras muchas etiquetas. <BODY> … </BODY> Delimita y engloba el cuerpo de la página, que son el conjunto de informaciones (texto e imágenes) que se muestran en la página, así como las indicaciones de cómo deben mostrarse. Admite atributos. FORMATOS DE PÁRRAFO El texto de la página se puede estructurar en encabezamientos de los diferentes apartados de la página, que pueden tener distintos niveles de 1 a 6 (siendo 1 el más importante) y párrafos normales. <H1> ... </H1> o <H2> ... </H2> (hasta 6) Párrafos que son encabezamientos (con distintos niveles). <P>... </P> Párrafos normales. <P align="center">... </P> El atributo align permite alinear el texto del párrafo. Se puede aplicar igual a las etiquetas <H1>, <H2>, etc ... <BR> Permite partir un párrafo empezando una línea nueva pero sin dejar espacio. <HR> Pone una línea horizontal de separación. (admite atributos) <BLOCKQUOTE>…</BLOCKQUOTE> Sangra el párrafo.
- 7. Copyright TUTOS_AES Etiqueta Utilidad Resultado <P> Sirve para delimitar un párrafo. Inserta una línea en blanco antes del texto. Soy un párrafo <CENTER> ... </CENTER> Permite centrar todo el texto del párrafo. Yo soy normal Yo estoy centrado <PRE WIDTH=x> ... </PRE> Representa el texto encerrado en élla con un tipo de letra de paso fijo. Muy útil a la hora de representar código fuente. El parámetro WIDTH especifica el número máximo de caracteres en una línea. Estoy en paso fijo <DIV ALIGN=x> ... </DIV> Permite justificar el texto del párrafo a la izquierda (LEFT) derecha (RIGHT), al centro (CENTER)o a ambos márgenes (JUSTIFY) Yo estoy a la izquierda Yo al centro Y yo a la derecha (recuerda al PP) Para justificar la aparición en muchos sitios. <ADDRESS>... </ADDRESS> Para escribir direcciones (donde vive la gente). Marisol Soto, Calle Desengaño 5 1º <BLOCKQUOTE>... </BLOCKQUOTE> Para citar un texto ajeno. Se suele implementar dejando márgenes tanto a izquierda como a derecha, razón por la que se usa habitualmente. Los productos Microsoft son fuente de graves problemas. LAS 6 CABECERAS HTML ofrece seis etiquetas distintas para mostrar cabeceras. Son éstas: Etiqueta Resultado <H1>... </H1> Cabecera de nivel 1 <H2>... </H2> Cabecera de nivel 2 <H3> ... </H3> Cabecera de nivel 3 <H4>... </H4> Cabecera de nivel 4
- 8. Copyright TUTOS_AES <H5>... </H5> Cabecera de nivel 5 <H6>... </H6> Cabecera de nivel 6 Estas etiquetas se pueden definir como de formato de párrafo pero por su importancia no resulta recomendable utilizarlas para aumentar o disminuir el tamaño del tipo de letra, ya que cada navegador los muestra de manera diferente. Se usan para dividir correctamente en secciones la página que estamos diseñando, tal y como se hace en un documento de texto normal. CAMBIANDO EL TIPO DE LETRA Todas estas etiquetas nos permiten cambiar de una manera u otra el aspecto del tipo de letra que estemos utilizando y se pueden utilizar con tiras de caracteres dentro de un párrafo Etiqueta Utilidad Resultado <B>... </B> Pone el texto en negrita. Soy un texto negro como el tizón <I>... </I> Representa el texto en cursiva. Estoy ladeado <U>... </U> Para subrayar. Soy importante, estoy subrayado <S>... </S> Para tachar. A mí, en cambio, nadie me quiere <TT>... </TT> Permite representar el texto en un tipo de letra de paso fijo. No soy variable <SUP>... </SUP> Letra superíndice. E=mc2 <SUB>... </SUB> Letra subíndice. ai,j=bi,j+1 <BIG>... </BIG> Incrementa el tamaño del tipo de letra. Soy GRANDE <SMALL>... </SMALL> Disminuye el tamaño del tipo de letra. Creí ver un lindo gatito <BLINK>... </BLINK> Hace parpadear el texto. Resulta molesto. ¿Molesto?
- 9. Copyright TUTOS_AES FORMATO DE FRASE En estos elementos indicas el tipo de información que encierran las etiquetas, pero no como se representan: Etiqueta Utilidad Resultado <CITE>... </CITE> Para citar un texto ajeno. Esta frase no es mía <CODE>... </CODE> Para escribir código fuente. <STRONG>... </STRONG> La cosa es importante. Hay cosas importantes. <EM>... </EM> Para dar énfasis. Hay que poner énfasis en algunas cosas. <KBD>... </KBD> Texto tecleado por el usuario. El usuario debe teclear Multivac es el mejor. <VAR>... </VAR> Representar variables de un código. La variable x, definida anteriormente... <SAMP>... </SAMP> Para representar una serie de caracteres literalmente. Estoy en un literal> <ABBR>... </ABBR> Abreviaturas. WWW usa el protocolo http CARACTERES EXTENDIDOS EN HTML La manera de incluir los caracteres extendidos (cuyo número está más allá del 127) consiste en encerrar el código entre los caracteres &#y ;. Así pues, lo siguiente: ½ nos debería dar un medio (½). También existe una serie de sinónimos para poder recordar con más facilidad estos caracteres. Así, por ejemplo, ½ también se puede escribir como ½. Vamos a ver algunos de estos códigos, los más útiles a la hora de escribir en español:
- 10. Copyright TUTOS_AES Código Resultado á,Á, é, É,... á, á, é, É, í, í, ó, Ó,ú y Ú Ñ y ñ Ñ y ñ ¿ ¿ ¡ ¡ º º ª ª ™ o ™ ™ o ™ © © ® ® (espacio en blanco que no puede ser usado para saltar de línea) Copyright TUTOS_AES