REPASANDO LENGUAJE HTML
- Cada página web está escrita en un lenguaje llamado HTML.
- HTML es como un esqueleto que le da estructura a cada página web.
- HTML. Como cualquier otro lenguaje, tiene su propia sintaxis (reglas para la comunicación) especial.
- La función de un navegador es transformar el código que está en el archivo en html, por ejemplo: mipagina.html en una página web reconocible. El navegador sabe cómo distribuir la página siguiendo la sintaxis HTML.
- HTML significa Hyper Text Markup Language (Lenguaje de marcado de hipertexto). Hipertexto quiere decir "texto que contiene enlaces". Cada vez que hacés clic en una palabra que te lleva a otra página web, estás haciendo clic en un hipertexto.
- Un lenguaje de marcado es un lenguaje de programación usado para que el texto haga algo más que aparecer en una página: puede convertir texto en imágenes, enlaces, cuadros, listas, y mucho más.
- Lo primero que debemos hacer es configurar la estructura de la página.
- HTML tiene un encabezado y un cuerpo.
- El encabezado es donde se ingresa la información sobre tu archivo HTML, como, por ejemplo, el título.
- El cuerpo es donde ingresas el contenido, como textos, imágenes y enlaces. El contenido del cuerpo es lo que se verá en la página real.
Para repasar, ingresemos al programa Dreamweaver.
Daremos un breve recorrido por sus opciones básica.
Ejemplo:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Primera Página en HTML</title>
</head>
<body>Esta es mi primera página
en grado 9º en la clase de informática</body>
</html>
Otras etiquetas
- <h1>
- <ul> - <li>-</ul>
- <ol> - <li>-</ol>
- <a href="http://www.nasa.gov/">Texto</a>
- <img src="imagen.jpg" alt="MENSAJE"><p>
- á: á
- é: é
- <p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a www.aulaclic.com</font></p>
- <body bgcolor="#0000FF">
- <body background="fondo.gif">
- <!-- y //-->.
- <br>
- <pre>Hola, BIENVENIDOS
esta ES MI PÁGINA WEB
y esto un texto preformateado</pre>
y esto un texto preformateado</pre>
- <hr>
¿Qué es lo que hace
que una página web sea linda?
Las CSS – Cascading Style Sheets – (Hojas de estilo en cascada). Imaginate
que es la piel y el maquillaje que cubre la estructura del HTML.
ESTILOS EN CASCADA CSS
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto
o presentación de los documentos electrónicos definidos con HTML y XHTML.
CSS es la mejor forma de separar los contenidos y su presentación y es
imprescindible para crear páginas web complejas.
Sintaxis
CSS - Estructura Básica
CSS define una serie de términos que permiten describir cada una de las
partes que componen los estilos CSS. El siguiente esquema muestra las partes
que forman un estilo CSS muy básico:
Figura 1.1 Componentes de un estilo CSS básico
Los diferentes términos se definen a continuación:
·
Regla: cada uno de los estilos que componen una hoja de estilos CSS.
·
Cada regla está compuesta de una parte de "selectores",
un símbolo de "llave de apertura" ({), otra parte denominada"declaración" y
por último, un símbolo de "llave de cierre" (}).
·
Selector: indica el elemento o elementos HTML a los que se aplica la
regla CSS.
·
Declaración: especifica los estilos que se aplican a los elementos. Está
compuesta por una o más propiedades CSS.
·
Propiedad: característica que se modifica en el elemento seleccionado,
como por ejemplo su tamaño de letra, su color de fondo, etc.
·
Valor: establece el nuevo valor de la característica modificada en el
elemento.
Los estilos se definen en una zona específica del propio documento HTML.
Se emplea la etiqueta<style> de HTML y solamente se pueden incluir en la cabecera del documento
(sólo dentro de la sección <head>).
---------------------------------------------------------------------------------------------------------------------
Ejemplo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos CSS en el propio documento</title>
<style type="text/css">
p { color: black; font-family: Verdana; }
</style>
</head>
<body>
<p>Esta es mi primera página con estilos.</p>
</body>
</html>
/* Este es un comentario en CSS */
Los comentarios pueden ocupar tantas líneas como sea necesario, pero no se puede incluir un comentario dentro de otro comentario:
/* Este es un
comentario CSS de varias
lineas */
Selector de tipo o etiqueta
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos CSS en el propio documento</title>
<style type="text/css">
p { color: black; font-family: Verdana; }
</style>
</head>
<body>
<p>Esta es mi primera página con estilos.</p>
</body>
</html>
---------------------------------------------------------------------------------------
Este método se emplea cuando se define un número pequeño de estilos o
cuando se quieren incluir estilos específicos en una determinada página HTML
que completen los estilos que se incluyen por defecto en todas las páginas del
sitio web.
COMENTARIOS
El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica mediante */, tal y como se muestra en el siguiente ejemplo:/* Este es un comentario en CSS */
Los comentarios pueden ocupar tantas líneas como sea necesario, pero no se puede incluir un comentario dentro de otro comentario:
/* Este es un
comentario CSS de varias
lineas */
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:
p {
...
}
Ejemplos:
Encabezados:
h1 {color: red;}
h2 {color: blue;}
p { color: black; font-family: Verdana; }
h1 {color: red;}
p {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
{ font-size: 1.2em;
}
Selector descendente
Selecciona los
elementos que se encuentran dentro de otros elementos. Un elemento es
descendiente de otro cuando se encuentra entre las etiquetas de apertura y de
cierre del otro elemento.
El selector del siguiente ejemplo
selecciona todos los elementos
<span> de la página que se encuentren dentro
de un elemento <p>:
p span { color:
red; }
Si el
código HTML de la página es el siguiente:
<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
Selector de clase
La regla CSS que se debe aplicar:
<body>
<p class="destacado">Lorem
ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing
accumsan...</p>
<p>Class aptent taciti sociosqu ad
litora...</p>
</body>
A continuación, se crea en el archivo CSS una nueva regla llamada
destacado con todos los estilos que se van a aplicar al elemento. Para que el
navegador no confunda este selector con los otros tipos de selectores, se
prefija el valor del atributo class con un punto (.) tal y como muestra el
siguiente ejemplo:
.destacado { color: red; }
El selector .destacado se interpreta como "cualquier elemento de la
página cuyo atributo class sea igual a destacado", por lo que solamente el
primer párrafo cumple esa condición.
Este tipo de selectores se llaman selectores de clase y son los más
utilizados junto con los selectores de ID.
A continuación se muestra otro ejemplo de selectores de clase:
.aviso {
padding: 0.5em;
border: 1px solid #98be10;
background: #f6feda;
}
.error {
color: #930;
font-weight: bold;
}
<span
class="error">...</span>
<div
class="aviso">...</div>
El elemento <span> tiene un atributo class="error", por
lo que se le aplican las reglas CSS indicadas por el selector .error. Por su
parte, el elemento <div> tiene un atributo class="aviso", por
lo que su estilo es el que definen las reglas CSS del selector .aviso.
Selectores de ID
En ocasiones, es necesario aplicar estilos CSS a un único elemento de la
página. Aunque puede utilizarse un selector de clase para aplicar estilos a un
único elemento, existe otro selector más eficiente en este caso.
El selector de ID permite seleccionar un elemento de la página a través
del valor de su atributo id. Este tipo de selectores sólo seleccionan un
elemento de la página porque el valor del atributo id no se puede repetir en
dos elementos diferentes de una misma página.
La sintaxis de los selectores de ID es muy parecida a la de los
selectores de clase, salvo que se utiliza el símbolo de la almohadilla (#) en
vez del punto (.) como prefijo del nombre de la regla CSS:
#destacado { color: red; }
<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>
En el ejemplo anterior, el selector #destacado solamente selecciona el
segundo párrafo (cuyo atributo id es igual a destacado).
La principal diferencia entre este tipo de selector y el selector de
clase tiene que ver con HTML y no con CSS. Como se sabe, en una misma página,
el valor del atributo id debe ser único, de forma que dos elementos diferentes
no pueden tener el mismo valor de id. Sin embargo, el atributo class no es
obligatorio que sea único, de forma que muchos elementos HTML diferentes pueden
compartir el mismo valor para su atributo class.
De esta forma, la recomendación general es la de utilizar el selector de
ID cuando se quiere aplicar un estilo a un solo elemento específico de la
página y utilizar el selector de clase cuando se quiere aplicar un estilo a
varios elementos diferentes de la página HTML.
No hay comentarios:
Publicar un comentario