Formas de aplicar CSS

CSS Directas

Las CSS directas se usan para poder aplicar un estilo a una parte del texto concreta.

“X” sería la etiqueta html a la que se le ha aplicado el estilo, mediante el parámetro “style”. “X” puede ser un párrafo (

), una capa con salto de línea (

), una capa sin efecto (), etc.

El estilo está definido por unos atributos con un valor (“atributo1:valor1”), separados entre ellos por punto y coma.

CSS indirectas fuera del documento

Otra forma de aplicar CSS es a través de unos estilos que se encuentran fuera del documento, pero al que se aplicarán esos estilos. Esta forma de aplicar CSS es útil si queremos aplicar los mismos estilos a diferentes documentos html.

Deberemos crear por tanto un documento de extensión .css donde estarán determinados los diferentes estilos. Y desde cada hoja en la que queramos aplicarlos, habrá que indicar que debe buscar los estilos en ese documento.

Expliquemos a continuación los diferentes atributos de la etiqueta <link>:

El atributo "rel" debe ir con el valor "stylesheet" ya que está definiendo que “link” se está usando para insertar una hoja de estilo. El atributo "type" con valor "text/css" indica que el tipo de sintaxis que usa la hoja de estilo es CSS. Por último, el atributo "href" especificará la ubicación y el nombre de la hoja de estilo.

Cristian

Examen Zaira

El examen me ha parecido muy fácil, pero creo que debería de haber puesto también contenidos de los temas 1, 2 y 3 ya que los hemos dado y hemos hecho muchos ejercicios. Creo que no debería de haber puesto las CSS ya que solo las hemos visto ayer y a la gente no le ha dado tiempo a familiarizarse con el código.
También creo que vamos muy deprisa ya que el HTML tiene muchas etiquetas y atributos y a la gente le cuesta un poco y si no se cogen bien los conceptos básicos van a ir de culo el resto del curso.
También creo que se deberían de corregir los ejercicios en clase porque si alguien tiene alguna duda pues se le puede quitar.
Tambien creo que hemos tenido poco tiempo para hacer el examen, porque no todo el mundo tiene el mismo ritmo de trabajo.
La nota que me pongo es un 8,75.

cajas de texto y passwords

Text, que sirve para introducir una caja de texto simple, y admite los parámetros:
name=" nombre", que asigna de forma unívoca un nombre identificador a la variable que se introduzca en la caja de texto.
maxlenght=" n ", que fija el número máximo de caracteres que se pueden itroducir en la caja de texto.
size=" n ", que establece el tamaño de la caja de texto en pantalla.
value=" texto ", que establece el valor por defecto del texto que aparecerá en inicialmente en la caja de texto.
disabled, que desactiva la caja de texto, por lo que el usuario no podrá escribir nada en ella.
accept = " lista de content-type", Indica el tipo de contenido que aceptará el servidor.Sus posibles valores son:
text/html
application/msexcel
application/msword
application/pdf
image/jpg
image/gifetc.
readonly, que establece que el texto no puede ser modificado por el usuario.
tabindex = " n ", que especifica el orden de tabulador que tendrá el campo respecto todos los elementos que incluye el formulario.
alt= " texto ", que asigna una pequeña descripción al elemento.

<form action="" method="post" enctype="text/plain" name="miform"> introduce tu nombre:

Password, que define una caja de texto para contener una clave o password, por lo que el texto que introduzca el usuario aparecerá como asteriscos, por motivos de seguridad. Sus parámetros opcionales son los mismos que los del tipo text.
Ejemplo.<-form action="mailto:yo@miservidor.com" method="post" enctype="text/plain" name="miform">

Elena

Listas de Selección

Los códigos [select][/select]encierran los valores que podemos elegir en un formulario.
El atributo [name=""] indica el nombre dle campo de selección.

El atributo [size=""] indica el número de opciones de selección visibles, si pones más de 1, se asignará una barra de desplazamiento.

El atributo [multiple] permite seleccionar más de 1 valor a la vez.

Las opciones a elegir se pondrán mediante el atributo [option] y en algunos casos le acompañará [selected]para indicar la opción que aparecerá por defecto.


Rojo
Verde
Azul



Cristian

Formularios. Radio Button

En los formularios, las casillas redondas en las que solo se puede elegir una opción:

se hacen de la siguiente forma:
utilizando ( br ) para que no salga el la misma linea. También se puede poner la opción de que una de las casillas salga seleccionada .
Laura

Botones de enviar y borrar en HTML

Para introducir un boton de enviar se introduce el siguiente codigo:

(input type="submit" value="Enviar")

type="submit" es el tipo de boton que quieres crear, en este caso es un boton de enviar

informacion y en value="nombre" entre comillas el nombre que le quieras dar.. enviar,enviar

formulario... etc

Para introducir un boton de borrar se introduce el siguiente codigo:

(input type="reset" value="Borrar" )

type="reset" es el tipo de boton que quieres crear, en este caso es un boton de borrar,

donde informacion escrita en el formulario se elmina para volver a introducir tus datos

y en value="nombre" entre comillas el nombre que le quieras dar.. borrar,borrar formulario... etc






ERIK

Checkbox

Es un elemento de la interfaz gráfica de usuario (widget) que permite al usuario hacer selecciones múltiples de un conjunto de opciones. Normalmente, las checkboxes son mostradas en la pantalla como una caja cuadrada que puede contener un espacio en blanco (para deseleccionar) o una marca de chequeo o una X (para seleccionar) una opción independientemente de las otras. Junto a la checkbox se normalmente muestra un texto descriptivo del significado de la opción. Invertir el estado de una checkbox es hecho haciendo clic con el ratón sobre la caja o su texto asociado, o usando un atajo de teclado.

El cogido para poner un checkbox es < input type="checkbox" >

con los siguientes atributos:

name: Es el nombre que identifica a un checkbox.

value: Es un valor asociado a cada checkbox.

disabled: bloquea el checkbox.

checked: marca o comprueba si está marcado un checkbox.

Zaira

Formato y Enlaces HTML

HTML cuenta con unas etiquetas especiales destinadas al formato y estructuración del texto, ya que los navegadores no entienden el lenguaje que hablan los editores de texto.

Espaciado y Estructura.-

• <> < /p >: define un bloque de texto introduciendo un doble salto de línea.
• <> : introduce un salto de línea pero no crea un bloque de texto.
• <>< /pre>: reproduce el texto tal y como éste se ha introducido en el documento.
• <>: introduce una regla o línea en el texto.
• color="(red,blue,black..)": define el color de la regla.
  
• align="(left,center,right"): alinea la regla según el valor dado.
• noshade: elimina el efecto tridemensional de la regla.
• width= "10,11,12..%": cambia la anchura de la regla respecto a la ventana del navegador
• size="10,11,12.."%: cambia el grosor de la regla.

Títulos de cabeceras.- se pueden definir diferentes jerarquías de títulos, los de categoría 1 <>< /h1 >,los de categoria 2 como<>< /h 2 > en total hay 6 niveles.El tipo <> se presenta en negrita y de tamaño grande y que los efectos y tamaños vayan variando conforme se reduzca el numero de orden de la cabecera hasta llegar a <>.

Formato de las fuentes.-

• < face="tipo de fuente">< /font >.- determina el tipo de fuente con el que se representara un texto.
• < color="(Black,blue.red...)">.- determina el color del texto.
• < size ="1,2,3..">.- indica el tamaño de la fuente en una escala del 1(menor) al 7(mayor).
• <>< /b >.- negrita
  
• <>< /i >.- cursiva
  
• <>< /u >.- subrayada
• <>< /strong >.- enfatizada

Caracteres especiales.-

• ¡.- &iexcl ;
  
• ¿.-&iquest ;
• ".-&quot ;
• >.-&gt ;
• <.- &lt ;
• ñ.- &ntilde ;
• Ñ.- &Ntilde ;
• á.- &aacute ;
• Á.-&Aacute ;
• é.-&eacute ;
• É.-&Eacute ;

Enlaces.- son elementos de la pagina que permiten al usuario ir de una pagina a otra de una parte de un documento a otra parte,sin necesidad de introducir una nueva URL en la barra de direcciones del navegador.

• < href="URL">Texto ejemplo< /a >.- indica la URL de la página que se cargará.
• < name="Nombre ">< /a > .- establece el nombre del ancla al que llevará el enlace.
• < target="(_blank,_selft,_top,_parent)">< /a >.- indica al navegador donde debe abrir la nueva pagina: en una ventana nueva (_blank), en la misma ventana(_self), en el marco primario(_parent) o en toda la ventana (_top).

ERIK

Tablas

Una tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Las tablas, así como toda estructura en documentos HTML, son definidas usando tags. Una tabla simple puede ser insertada en un documento HTML usando tres tags: el tag HTML table (principal contenedor), el tag HTML tr (fila contenedora) y el tag HTML td (celda simple). Veamos un ejemplo:

htmlquick

Laura

Imagenes en HTML

Para poner imágenes en html, es necesário poner una "especie de códigos" con el cuidado de no equivocarte.

Al pricipio de todo, el comando "IMG" dentro de este comando podremos poner atributos como:

src- Este atributo es obligatorio e indica el nombre del archivo (que lo pondremos entre comillas) en este campo se debe poner el URL que nos llevará a la imagen u fotografía.

align- Permite controlar la alineación de una fotografía con respecto al texto o a otras imágenes en esa línea, para llevar a cabo esta tarea necesitamos los campos bottom (abajo), middle (en medio), top (arriba), left (izquierda), right (derecha).

alt- Entre comillas se podrá poner un texto que si da error o no mientras que se carga podrán leer.

width- Este atributo es opcional pero yo os lo recomiendo ya que ayudáis al navegador, en este campo ponéis el ancho de la imagen u fotografía.

height-Esta es la hermana de width, dijimos que en width indicábamos el ancho de la imagen en esta indicamos el alto de la imagen y claro, pues también se recomienda.

border- Esta es la prima de height y de width, en este campo se debe poner el ancho del borde de la imagen (si es que lleva claro).


Cristian

HTML (siglas) y Formato básico de una página

HTML, siglas de HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje de marcado predominante para la construcción de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.

<html >
<head>
<title>Ejemplo</title>
</head>
<body>
<p>ejemplo</p>
</body>
</html>

Luego tenemos para dar formato al texto como p y /p, para hacer parragos; br, para los saltos de linea.
Luego tenemos i cierre /i para cursiva, b cierre /b para negrita, u cierre /u para subrayado.

Elena

Listas en HTML

Una forma de presentar un texto es mediante las llamadas listas. Las listas, como su propio nombre indica, se basan en la presentación del texto de forma enumerada, que puede ser de diferentes formas y estilos, como vamos a ver a continuación.

<ol>
<li>Primero
<li>Segundo
<li>Tercero
</li></ol>

1. Primero
2. Segundo
3. Tercero

La etiqueta <ol>y </ol>sirve para definir este tipo de listas, ordenadas (ol son las iniciales de ordered list), y cada uno de los elementos de la lista vienen encabezados por la etiqueta <li>(que no necesita cerrarse).

Hemos utilizado la etiqueta <ul> y </ul>(unordered list) que sirve para definir listas desordenadas, sin numerar. Tambien las hemos anidado.

<ul>
<li> Primero
<ol>
<li> a
<li> b
</ol>
<li> Segundo
<li> Tercero
</ul>

• Primero
  1. a
  2. b
• Segundo
• Tercero

Luego tenemos diferentes atributos:
Para ul tenemos type con los siguientes valores circle (circulo), square (cuadrado), disc (disco).
Para ol tenemos type con valores: 1 para numeros, a y A para alfabetica, i e I para romanos; y tambien tenemos star para especificar desde que valor queremos empezar.

Existe un tipo de listas "especiales" llamadas listas de definición, en las que cada elemento de la lista no viene precedido de nada, ni de números, ni de símbolos, ni de nada. Veamos un ejemplo:

<dl>
<dt> Los peces
<dd> Siempre están en el agua
<dt> Las aves
<dd> Generalmente saben volar (las gallinas no)
</dl>

Los peces

Siempre están en el agua

Las aves

Generalmente saben volar (las gallinas no)

Zaira