INF2_EXC12_SOFÍA GARCÍA ( HTML )

11
INF2_EXC12 Sofía García 7/05/2015 Preparatoria 1B Colegio Bucerias Maestra Azucena

Transcript of INF2_EXC12_SOFÍA GARCÍA ( HTML )

Page 1: INF2_EXC12_SOFÍA GARCÍA ( HTML )

INF2_EXC12

Sofía García

7/05/2015

Preparatoria 1B

Colegio Bucerias

Maestra Azucena

Page 2: INF2_EXC12_SOFÍA GARCÍA ( HTML )

Fuente en código HTML

HTML es un sistema de marcado cuya función es definir la estructura y aspecto de un documento. Debemos profundizar esta definición, que sin más aclaraciones no diría mucho, a fin de comprender mejor los conceptos de marcas lógicas y tipográficas. Una marca tipográfica tiene como función formatear visualmente un documento, es decir aplicarle negritas, cursivas, subrayarlo, etc.

Una marca lógica, por el contrario, tiene como función definir una estructura independientemente del aspecto. Es decir, independientemente del modo en que el navegador interpretará visualmente el marcado.

Page 3: INF2_EXC12_SOFÍA GARCÍA ( HTML )

<FONT>

La marca FONT se emplea para formatear el tipo y tamaño del texto en algunos puntos del documento específicos. 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.

<FONT FACE="arial" SIZE=5 COLOR=red>Tipo para formatear </FONT>

El atributo FACE="arial" indica el tipo que se visualizará; SIZE=5 el tamaño del tipo, que puede estar comprendido entre 1 y 7 (mayor dimensión cuanto más cercano al 7); COLOR=red indica el color del texto (que puede expresarse asimismo en valores hexadecimales).

Page 4: INF2_EXC12_SOFÍA GARCÍA ( HTML )

HTML <Font> 

FONT COLOR Específica el color del texto <font color="red">BLAH BLAH </font>

FONT SIZE Especifica el tamaño del text adentro del código <font size="6">This is some text!</font>font> element.FONT FACE Elige el tipo de letra

<font face="Comic Sans MS,arial,verdana">Este texto tiene otra tipografía</font>Se ponen varios tipos de letras por si el otro usuario no tenga la primera opción,se ponga el segundo.

Page 5: INF2_EXC12_SOFÍA GARCÍA ( HTML )

Encabezados en HTML

Para escribir encabezados disponemos de las etiquetas <h>.Esta etiqueta viene acompañada de un número, desde el 1 hasta el 6, predefiniendo éstos el tamaño del encabezado.

Page 6: INF2_EXC12_SOFÍA GARCÍA ( HTML )

Marquee

Sirve para dar un efecto diferente a los texto de nuestra página Web.Se consigue texto en movimiento. El movimiento, la dirección de desplazamiento, la velocidad del mismo se configura.

align:  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.

Page 7: INF2_EXC12_SOFÍA GARCÍA ( HTML )

Marquee

scrolldelay: 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: Se puede 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.

<marquee bgcolor="#FFFFFF" width="50%" scrolldelay="100" scrollamount="5" direction="left" loop="infinite">Estás viendo el ejemplo que hemos hecho nosotros.</marquee>

Page 8: INF2_EXC12_SOFÍA GARCÍA ( HTML )

<img>

Page 9: INF2_EXC12_SOFÍA GARCÍA ( HTML )

SRC

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

Page 10: INF2_EXC12_SOFÍA GARCÍA ( HTML )

ALT

El uso de texto para comentar las imágenes es una regla fundamental que debemos observar en la creación de sitios web por varias razones algunos navegadores pordrían estar impostados para no invocar

las imágenes los navegadores textuales para invidentes no conseguirían

interpretar las imágenes si carecieran de comentario;es posible evitar pies de imagen

incluyendo comentarios dentro de la imagen misma.

En todos estos casos, el uso de comentarios resuelve el problema y permite optimizar la página web. La sintaxis correcta de los comentarios es la siguiente:

<IMG SRC="immagine.gif" ALT="Obra de K. Haring">

Page 11: INF2_EXC12_SOFÍA GARCÍA ( HTML )

APA

W3school(2015)Font sizeRecuperado el 07/05/2015http://www.w3schools.com/tags/att_font_size.asphtmlpoint/(2006)Recuperado el 07/05/2015http://www.htmlpoint.com/guida/html_06.htmKIOSKEA(2015)encabezadosRecuperado el 07/05/2015http://es.kioskea.net/contents/248-encabezados-en-htmlDesarrollweb(2015)FONTRecuperado el 07/05/2015http://www.desarrolloweb.com/articulos/556.phpAPR(2015)EncabezadosRecuperado el 07/05/2015http://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

Hazuna(2015)MarqueeRecuperado el 07/05/2015http://html.hazunaweb.com/116.phpEjemplode(2015)insertar imágenes en htmlRecuperado el 07/05/2015http://www.ejemplode.com/17-html/81-ejemplo_de_como_colocar_imagenes_con_html.htmlLinea de codigo(2015)SCR width y height Ecuperado el 7/05/2015http://lineadecodigo.com/html/alto-y-ancho-de-una-imagen-con-html/Htmlpoint(2015)ALT Recuperado el 07/05/2015http://www.htmlpoint.com/guida/html_09.htm