Codigos de html mitzi inf 1

22
CODIGOS DE HTML MITZI MELINA GARCIA H. PROF. AZUCENA CERVANTES COLEGIO BUCERIAS 1B 07-05-15

Transcript of Codigos de html mitzi inf 1

Page 1: Codigos de html mitzi inf 1

CODIGOS DE HTML

MITZI MELINA GARCIA H.PROF. AZUCENA CERVANTESCOLEGIO BUCERIAS 1B07-05-15

Page 2: Codigos de html mitzi inf 1

Que es una fuente en código HTML?

A la hora de crear páginas webs a veces nos encontramos limitados por las tipografías o fuentes tipográficas que podemos utilizar en ellas, dado que no todos los navegadores y sistemas operativos incluyen el mismo número de fuentes, y las tipografías de los sistemas operativos no serán las mismas. El uso adecuado del código fuente permite que los lectores de Roleropedia tengan acceso a artículos que respeten el mayor número posible de efectos tipográficos y ortográficos propios de la lengua española (como por ejemplo la letra cursiva o la letra negrita) y también permite la creación de enlaces a otras páginas, la inserción de imágenes o la posibilidad de redactar una leyenda al pie de las mismas. Pero el código fuente también sirve para otras cosas, como puede verse en las diferentes secciones de esta página.

Page 3: Codigos de html mitzi inf 1

Tipografía html

Page 4: Codigos de html mitzi inf 1

2) por medio de la etiqueta <font> con el atributo size <font size="3">

(tamaño en inglés) seguido por un número, el cual indica el tamaño entre 1 y 7. Tenemos que tener en cuenta que el valor por defecto es 3. Esta notación no provoca un salto de párrafo después de cada cambio.

Etiquetas para manipular el tamaño de

letra

NNN NNN NNN

Ejemplo: <font size="3">N</font> <font size="4">N</font>

<font size="5">N</font> <font size="6">N</font>

<font size="7">N</font> <font size="6">N</font>

<font size="5">N</font> <font size="4">N</font>

<font size="3">N</font>

El resultado será:

Page 5: Codigos de html mitzi inf 1

Etiquetas para generar los encabezados

<h1> Texto de prueba h1 </h1> <h2> Texto de prueba h2 </h2> <h3> Texto de prueba h3 </h3> <h4> Texto de prueba h4 </h4> <h5> Texto de prueba h5 </h5> <h6> Texto de prueba h6 </h6>

se verá:

1º) Usamos el elemento <hx>....</hx>: donde x es un número que puede variar entre 1 y 6, siendo 1 el tamaño mayor. Esto se utiliza solamente para los titulares de páginasEjemplo podría ser el siguiente:

Page 6: Codigos de html mitzi inf 1

• Para indicarle al navegador que queremos poner un texto en un párrafo, debemos escribirlo entre las etiquetas <p> y su cierre </p>, quedando el texto separado por un margen en blanco por encima y por abajo.

Un atributo muy usado en el pasado (hoy deprecated) fue align, que servía para establecer la alineación del texto dentro del párrafo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Ejemplo del uso de párrafos - aprenderaprogramar.com</title></head><body><p style="text-align: center;">Este texto se alineará al centro</p><p style="text-align: right;">Este texto se alineará a la derecha</p><p style="text-align: left;">Este texto se alineará a la izquierda</p></body></html>

Page 7: Codigos de html mitzi inf 1

La etiqueta <pre> se denomina de “texto pre formateado” y sirve para que el navegador interprete el texto escrito tal y como está, respetando los saltos de línea, espacios, etc. indicados.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Ejemplo del uso de etiqueta <pre> - aprenderaprogramar.com</title></head><body>Escribo esta línea así Dejo dos líneas de separación y escribo tres más.</body></html>

Sin poner etiqueta el navegador respondería así.

Page 8: Codigos de html mitzi inf 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Ejemplo del uso de etiqueta <pre> - aprenderaprogramar.com</title></head><body><pre>Escribo esta línea así Dejo dos líneas de separación y escribo tres más.</pre></body></html>

Si colocamos la etiqueta <pre>:

Page 9: Codigos de html mitzi inf 1

Que es la etiqueta <font>

La etiqueta <font> está desaprobada.Esta etiqueta especifica el tamaño, color y tipo de fuente para un texto.EJEMPLO:

Page 10: Codigos de html mitzi inf 1
Page 11: Codigos de html mitzi inf 1

Estos atributos son soportados por todos los navegadoresInternet Explorer Firefox Google Chrome Opera Safari

Page 12: Codigos de html mitzi inf 1

Etiqueta font face.La marca FONT se emplea para formatear el tipo y tamaño del texto en algunos puntos del documento específicos. En realidad, si la marca FONT abriera y cerrara el documento, todo el texto comprendido dentro quedaría formateado tal y como estuviera indicado. Sin embargo, conceptualmente la marca FONT ha sido concebida para definir partes limitadas de texto. Por otro lado, mientras TEXT determina tan sólo en color del texto, la marca FONT puede definir el tipo utilizado, así como su tamaño y color.

Page 13: Codigos de html mitzi inf 1

El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un número hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribución del rojo, verde y azul al color en cuestión.Podéis entender cómo funciona esta numeración y cuáles son los colores que resultan más compatibles a partir de este artículo: Los colores y HTML.

Por otra parte, es posible definir de una manera inmediata algunos de los colores más frecuentemente usados para los que se ha creado un nombre más memotécnico:

Etiqueta que nos permite manipular el color de la

fuente.

NombreColorAquaBlackBlueFuchsiaGrayGreenLime

Maroon NavyOlivePurpleRedSilverTealWhiteYellow

<font color="red">Este texto está en rojo</font>

Este texto está en rojo

Page 14: Codigos de html mitzi inf 1

Ejemplo:

Page 15: Codigos de html mitzi inf 1

¿Cuál es la etiqueta de marquee?

La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra página Web. Gracias a ella podemos conseguir texto en movimiento. Para aplicar este efecto a los textos, éstos deben estar dentro de la etiqueta marquee, entre su inicio "<marquee>" y su cierre "</marquee>".El movimiento, la dirección de desplazamiento, la velocidad del mismo.

todo es configurable gracias a los siguientes atributos:

Page 16: Codigos de html mitzi inf 1

align: Este atributo nos indicará si el texto dentro de la etiqueta se alineará en la zona alta del marquee ("top"), en el medio ("middle") o en la parte baja ("bottom").

bgcolor: Con este atributo definiremos el color de fondo que le queremos dar a la marquesina donde está el texto en movimiento.

height y width: El primero marca la altura que tendrá la marquesina y el segundo la anchura de la misma.

scrollamount: Este atributo define la cantidad de píxeles que queremos que se desplace el texto en cada movimiento. Por ejemplo: <marquee scrollamount="3"> </marquee> significará que el texto que vaya dentro de esa etiqueta se moverá a razón de tres píxeles por movimiento.

scrolldelay: Éste nos define la velocidad del texto que está dentro de la marquesina. A menor numeración, mayor velocidad. Es decir, un texto irá más rápido si el scrolldelay es 5, que si el scrolldelay es 20.

loop: Este atributo nos determina si el movimiento se repetirá o no. Si queremos que el movimiento sólo se repita unas veces determinadas debemos indicárselo con un número, que será el número de veces que se repita. Si queremos que se repita sólo 10 veces, su loop será el siguiente: <marquee loop="10"> </marquee>

Si queremos que se repita debemos usar "infinite" o "-1". Si no especificamos nada, se repetirá constantemente.

direction: Sirve para definir la dirección del movimiento: "left" para la izquierda, "right" para la derecha, "top" para arriba y "down" para abajo.

behavior: Gracias a este atributo podemos dar nuevos efectos a la marquesina. Si no especificamos este atributo, el texto se moverá de forma circular en el sentido que le hayamos marcado. Con behavior="scroll" conseguiremos el mismo efecto: el texto se moverá circularmente.

Page 17: Codigos de html mitzi inf 1
Page 18: Codigos de html mitzi inf 1
Page 19: Codigos de html mitzi inf 1

La etiqueta HTML que nos permite poner imágenes en nuestra página web es IMG. La línea de código que necesitaríamos sería la siguiente:<IMG src="mifoto.jpg"/>

Por defecto, el tamaño de la imagen que carga es su tamaño original.Si queremos modificar el tamaño deberemos de utilizar los atributos HTML width y height, los cuales nos permiten modificar el ancho y el alto de la imagen respectivamente. A estos atributos les tendremos que dar unos valores numéricos que indiquen el valor en pixels que queremos reflejar.Así, si queremos poner la imagen a 100x100 pixels, la línea de código quedaría de la siguiente forma:

<IMG src="mifoto.jpg" width="100" height="100"/>

¿Cómo puedes manipular el ancho y alto de una

imagen?

Page 20: Codigos de html mitzi inf 1

Que funcion tiene alt en html.

podemos poner una descripción de la imagen dentro de la misma para que la gente puede leerla al mantener el ratón encima de ella. Esta descripción podemos escribirla mediante el atributo "alt" y lo escribiríamos de la siguiente manera: alt= "x", siendo "x" la descripción que le gente leerá al pasar el ratón por encima.

Ejemplo:

Page 21: Codigos de html mitzi inf 1
Page 22: Codigos de html mitzi inf 1

ROLEROPEDIA.(2010)SINTAXIS DE FONT, RECUPERADO EL 7-05-15 EN: http://roleropedia.com/Roleropedia:Sintaxis_del_c%C3%B3digo_fuente

IMAGINANET.(2014)TIPOGRAFIA, RECUPERADO EL 7-05-15 EN: http://www.imaginanet.com/blog/como-utilizar-cualquier-fuente-tipografia-en-nuestra-pagina-web.html

PCWEB(2014)TIPO Y COLOR DE LETRA, RECUPERADO EL 7-05-15 EN: http://www.pcweb.es/manual_html/mostrar.php?opcion=tipo_y_color

APREN. A PROGRAMAR.(2010)ENCABEZADO HTML,RECUPERADO EL 7-05-15 EN: http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=489:encabezados-html-h1-a-h6-parrafos-aplicar-estilos-y-etiqueta-pre-texto-preformateado-ejemplo-cu00715b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192

VIRTUALNUTA.(2014)ETIQUETA FONT, RECUPERADO EL 7-05-15 EN: http://www.virtualnauta.com/html-etiqueta-font

HTMLPOINT.(2010)GUIDA, RECUPERADO EL 7-05-15 EN: http://www.htmlpoint.com/guida/html_06.htm

HAZUNAWEB.(2010)ALT EN HTML, RECUPERADO EL 7-05-15 EN:http://html.hazunaweb.com/116.php

LINEA DE CODIGO,(2010)ALTO Y ANCHO DE IMAGEN,RECUPERADO EL 7-05-15 EN: http://lineadecodigo.com/html/alto-y-ancho-de-una-imagen-con-html/

FORMATO APA