HTML 1

PROGRAMACION IMPERATIVA
Profesor: Ariel Tasca Curso;: 4º 1º Parte: 1
1 - ¿Qué es HTML?
HTML es el lenguaje que se emplea para el desarrollo de páginas de internet.

Este lenguaje está constituido de elementos que el navegador interpreta y las despliega en la
pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imágenes y
videos sobre una página, hipervínculos que nos permiten dirigirnos a otra página, listas,
tablas para tabular datos etc.
Para poder crear una página HTML se requiere un simple editor de texto. Luego para probar
las páginas que desarrolla debe emplear un navegador de internet (Chrome, IExplorer,
FireFox, Safari, Microsoft Edge etc.), utilizaremos el navegador que en este preciso momento
está utilizando.
Lo más importante es que en cada concepto desarrolle los ejercicios propuestos y modifique
los que se presentan ya resueltos.
2 - Estructura interna de una página HTML.
Las instrucciones HTML están encerradas entre los caracteres: < y >.
Muchos elementos HTML requieren una marca de comienzo y otra de finalización. Todo
aquello que está fuera de las marcas del lenguaje se imprime en la pantalla (dentro del
navegador).
La estructura básica de una página HTML es:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
</head>
<body>
Cuerpo de la página.
</body>
</html>
Una página HTML es un archivo que generalmente tiene como extensión los caracteres html.
Por ejemplo podemos llamar a nuestra primer página con el nombre: pagina1.html
Lo primero es el DOCTYPE que informa al navegador que el contenido siguiente se trata de
un archivo HTML (todos los navegadores modernos analizan la presencia del DOCTYPE)
Luego continúa con la marca:<html> y finaliza con la marca:</html> al final del archivo.
Los fines de marcas tienen el mismo nombre que el comienzo de marca, más el caracter /
Una página HTML tiene dos secciones muy bien definidas que son la cabecera:
<head>
</head>
Y el cuerpo de la página:
<body>
Cuerpo de la página.
</body>
En la cabecera es común inicializar el título de la página dentro de las marcas <title></title>
(normalmente aparece en la barra superior de nuestro navegador y es utilizado por los
motores de búsqueda como Google para indexar la página) El título debe hacer referencia al
contenido en sí de la página.
Dentro de la cabecera disponemos la etiqueta meta donde definimos la propiedad charset
con el valor UTF-8 que es un formato de caracteres ampliamente empleado en internet (si no
disponemos este formato no podemos disponer caracteres acentuados por ejemplo, más
adelante veremos en profundidad la etiqueta meta):
Todo el texto que dispongamos dentro del <body> aparece dentro del navegador tal cual lo
hayamos escrito.
Todas las páginas tiene como mínimo esta estructura: cabecera y cuerpo.
Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y minúsculas, es
decir podemos escribirlo como más nos guste, además no requiere que dispongamos cada
marca en una línea (¡podríamos inclusive escribir toda la página en una sola línea! cosa que
no conviene ya que somos nosotros quienes tendremos que modificarla en algún momento).
3 - Salto de línea <br>
Todo el texto que disponemos en el cuerpo de la página aparece en la misma línea, no

importa si cuando tipeamos la página disponemos cada palabra en una línea distinta (es
decir un navegador no tiene en cuenta la tecla ENTER).
Para indicarle al navegador que queremos que continúe en la próxima línea debemos hacerlo
con el elemento HTML <br>.
Cuando aparece la marca <br> el navegador continúa con el texto en la línea siguiente. Es
uno de los pocos elementos HTML que no tiene marca de cerrado como habíamos visto
hasta ahora.
Implementemos una página que muestre los nombres de distintos lenguajes de
programación uno por línea:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
PHP<br>
JavaScript<br>
Java<br>
C<br>
C++
</body>
</html>
Como vemos sólo hemos agregado la marca <br> cada vez que queremos comenzar una
línea. Tengamos en cuenta que es indistinto si disponemos la marca en la misma línea o en
la siguiente:
PHP<br>
es lo mismo:
PHP
<br>
Para recordar los nombres de los elementos HTML es bueno ver cual es la palabra completa
de la misma:
<br> viene de la palabra en inglés break
4 - Párrafo <p>
Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema. Todo lo que
encerremos entre las marcas <p> y </p> aparecerá separado por un espacio con respecto al
próximo párrafo.
Dentro de un párrafo puede haber saltos de línea <br>.
Veamos con un ejemplo como disponer dos párrafos:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es
un lenguaje
de programacion para trabajar con base de datos relacionales como
MySQL, Oracle, etc.<br>
MySQL es un interpretador de SQL, es un servidor de base de
datos.<br>
MySQL permite crear base de datos y tablas, insertar datos,
modificarlos, eliminarlos, ordenarlos,
hacer consultas y realizar muchas operaciones, etc., resumiendo:
administrar bases de datos.
</p>
<p>
Este tutorial tiene por objetivo acercar los conceptos iniciales para
introducirse
en el mundo de las bases de datos.
</p>
</body>
</html>
Tenemos en esta página HTML dos párrafos, cuando el navegador interpreta esta página,
separa los contenidos de los dos párrafos con un espacio horizontal. Además el primer
párrafo contiene varios saltos de línea. Normalmente uno agrupa en párrafos para dar más
sentido a nuestro escrito.
Cuando modificamos la ventana del navegador los párrafos se acomodan automáticamente
de acuerdo al ancho de la ventana.
Para recordar el nombre de este elemento HTML:
<p> viene de la palabra paragraph
No es correcto tratar de dar formato a un escrito utilizando solo elementos <br>, debemos
utilizar párrafos y dentro de estos si son necesarios saltos de línea.
5 - Títulos <h1><h2><h3><h4><h5><h6>
Otros elementos HTML muy utilizados son para indicar los títulos, contamos con los
elementos:
<h1><h2><h3><h4><h5><h6>
El título de mayor nivel es <h1>, es decir el que tiene normalmente una fuente de mayor
tamaño (veremos que es el navegador el responsable de definir el tamaño de la fuente, más
adelante podrá ver que uno puede modificar la fuente, tamaño, color etc. utilizando el
lenguaje CSS .
Según la importancia del título utilizaremos alguno de estos elementos HTML. Requiere la
marca de cerrado del título con la barra invertida como hemos visto.
Los buscadores que indexan contenido (Google, Bing, Yahoo etc.) hacen incapié en los
títulos para identifica los temas que tratan las páginas.
No hay que confundir el título de la página que va en la sección del head con el elemento
title.
Confeccionaremos una página que contenga un título de primer nivel <h1> y luego dos títulos
de nivel <h2>. Definiremos un párrafo para cada título de segundo nivel.
pagina1.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Tipos de datos en MySQL</h1>
<h2>varchar</h2>
<p>
se usa para almacenar cadenas de caracteres. Una cadena es una
secuencia de caracteres.
Se coloca entre comillas (simples): 'Hola'.<br>
El tipo "varchar" define una cadena de longitud variable en la cual
determinamos el máximo
de caracteres. Puede guardar hasta 255
caracteres. Para almacenar cadenas de hasta 30 caracteres, definimos
un campo de tipo varchar(30).
</p>
<h2>int</h2>
<p>
Se usa para guardar valores numéricos enteros, de -2000000000 a
2000000000 aproximadamente.<br>
Definimos campos de este tipo cuando queremos representar, por
ejemplo, cantidades.
</p>
</body>
</html>
El resultado en el navegador al cargar esta página es:
Cada título aparece siempre en una línea distinta, no importa si lo tipeamos seguido en el
archivo, es decir el resultado será igual si hacemos:
<h1>Tipos de datos en MySQL</h1>
<h2>varchar</h2>
o esto:
<h1>Tipos de datos en MySQL</h1><h2>varchar</h2>
El navegador dispone cada título en una línea nueva.
Recordemos que el HTML no tiene la responsabilidad de indicar el tamaño de las fuentes. El
navegador definirá el tamaño de fuente según el nivel de título que indiquemos. La de
tamaño más grande es la de nivel 1 <h1>.
<h1> viene de la palabra heading
heading significa título.
6 - Enfasis (<em> <strong>)
Enfatizar algo significa realzar la importancia de una cosa, por ejemplo una palabra o
conjunto de palabras.
Así como tenemos seis niveles de títulos para enfatizar un bloque contamos con dos
elementos que son (<em> <strong>)
El elemento de mayor fuerza de énfasis es "strong" y le sigue "em".
Veamos un ejemplo del empleo de estos dos elementos HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><strong>Típos de datos</strong> en MySQL</p>
<p><em>TEXTO</em>: Para almacenar texto usamos cadenas de caracteres.
Las cadenas se colocan entre comillas simples. Podemos almacenar
dígitos con los que no
se realizan operaciones matemáticas, por ejemplo, códigos de
identificación, números de
documentos, números telefónicos. Tenemos los siguientes tipos:
varchar, char y text.</p>
<p><em>NUMEROS</em>: Existe variedad de tipos numéricos para
representar
enteros, negativos, decimales. Para almacenar valores enteros, por
ejemplo, en campos que
hacen referencia a cantidades, precios, etc., usamos el tipo
integer. Para almacenar valores
con decimales utilizamos: float o decimal.</p>
<p><em>FECHAS Y HORAS</em>: para guardar fechas y horas dispone de
varios
tipos: date (fecha), datetime (fecha y hora), time (hora), year
(año) y timestamp.</p>
</body>
</html>
En el navegador tenemos como resultado:
Podemos ver que la sintaxis para el elemento strong es:

<strong>Típos de datos</strong>
La mayoría de los navegadores muestran el texto enfatizado con strong con un texto en
negrita y para el elemento "em" utilizan letra itálica (de todos modos, esto no es obligatorio,
pero seguramente mostrarán los textos enfatizados).
Otra cosa importante que podemos hacer notar es que estos elementos HTML no producen
un salto de línea como los de título (h1,h2 etc.)
Para recordar el nombre de estos elementos HTML:
<em> viene de emphasis que significa énfasis.
<strong> es ya la palabra completa de strong que significa
fuerte.
1 - Que son las hojas de estilo (CSS)?
CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en
cascada.
Las hojas de estilo es una tecnología que nos permite controlar la apariencia de una página
web. En un principio, los sitios web se concentraban más en su contenido que en su
presentación.
HTML no pone atención en la apariencia del documento, sino en la estructura. CSS describe
como los elementos dispuestos en la página son presentados al usuario. CSS es un gran
avance que complementa el HTML y la Web en general.
Con CSS podemos especificar estilos como el tamaño, fuentes, color, espaciado entre textos
y recuadros así como el lugar donde disponer texto e imágenes en la página.
El lenguaje de las Hojas de Estilo está definido en la Especificaciones CSS1, CSS2 y CSS3
del World Wide Web Consortium (W3C), es un estándar aceptado por toda la industria
relacionada con la Web, o por lo menos, gran parte de navegadores (es verdad que el
Internet Explorer de Microsoft nos dió algunos dolores de cabeza en versiones antiguos).
Podemos visitar W3C
Veremos que podemos asociar las reglas de estilo a las marcas HTML de tres maneras:
directamente a la marca, en el head de la página o agrupar las reglas de estilo en un archivo
independiente con extensión *.css
2 - Definición de estilos a nivel de elemento HTML.
Es la forma más fácil pero menos recomendada para aplicación de un estilo a un elemento
HTML. Se define en la propiedad style los estilos a definir para dicho elemento.
Es común a veces definir estilos directamente en los elementos HTML cuando estamos
probando diseños de elementos particulares de la página y posteriormente trasladar el estilo
creado a la zona de definición de estilos.
La sintaxis para definir un estilo a un elemento HTML es la siguiente:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color:#ff0000;background-color:#ffff00">
Este mensaje es de color rojo sobre fondo amarillo.
</h1>
</body>
</html>
Por defecto, todo navegador tiene un estilo definido para cada elemento HTML, lo que
hacemos con la propiedad style es redefinir el estilo por defecto. En este problema definimos
que el elemento h1 defina como color de texto el rojo y como color de fondo el amarillo:
Este mensaje es de color rojo sobre fondo amarillo.
</h1>
Veremos más adelante que hay muchas propiedades en CSS. En este primer ejemplo
inicializamos las propiedades color (define el color del texto) y background-color (define el
color de fondo del texto).
Cada vez que inicializamos una propiedad debemos separarla de la siguiente por punto y
coma.
Cuando definimos estilos directamente en el elemento HTML, tenemos que tener en cuenta
que el estilo se aplica únicamente a dicho elemento donde inicializamos la propiedad style,
es decir, si tenemos dos secciones h1, deberemos definir la propiedad style para cada
elemento:
Primer título
</h1>
Segundo título
</h1>
Como podemos observar, más allá que los dos estilos son exactamente iguales, estamos
obligados a definirlos para cada elemento HTML.
3 - Definición de estilos a nivel de página.
También podemos hacer la definición de estilos para los distintos elementos HTML de la
página en una sección especial de la cabecera que la encerramos entre las marcas HTML
(en su interior definimos los estilos para los elementos HTML que necesitemos):
<style>
</style>
El problema del concepto anterior donde debíamos crear un estilo similar para el elemento h1
se puede resolver en forma más adecuada empleando la definición de estilos a nivel de
página.
Problema: Mostrar dos títulos con texto de color rojo sobre fondo amarillo.
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<style>
h1 {color:#ff0000;background-color:#ffff00}
</style>
</head>
<body>
<h1>Primer título</h1>
<h1>Segundo título</h1>
</body>
</html>
Podemos observar que en la cabecera de la página definimos la sección:

<style>
h1 {color:#ff0000;background-color:#ffff00}
</style>
Debe estar encerrada por el elemento style. En este ejemplo indicamos al navegador que en
todos los lugares de esta página donde se utilice el elemento h1 debe aplicar como estilo de
color de texto el rojo y fondo el amarillo. Podemos observar que es mucho más eficiente que
definir los estilos directamente sobre los elementos HTML dentro del cuerpo de la página.
Podemos definir estilos para muchos elementos en la sección style:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:#ff0000}
h2 {color:#00ff00}
h3 {color:#0000ff}
</style>
</head>
<body>
<h1>rojo</h1>
<h2>verde</h2>
<h3>azul</h3>
</body>
</html>
4 - Propiedades relacionadas a fuentes.
Contamos con una serie de propiedades relacionadas a fuentes:

font-family
font-size
font-style
font-weight
font-variant
Podemos inicializar algunas o todas las propiedades relacionadas a fuentes, un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-family:times new roman;
font-size:30px;
font-style:italic;
font-weight:bold;
}
h2 {
font-family:verdana;
font-size:20px;
}
</style>
</head>
<body>
<h1>Titulo de nivel 1</h1>
<h2>Titulo de nivel 2</h2>
</body>
</html>
Como podemos observar, hemos definido dos reglas de estilos para los elementos h1 y h2,
eso significa que el navegador utilizará esas reglas de fuentes para todas las partes de la
página que se utilicen dichos elementos HTML.
La primera regla definida para el elemento h1 es:
h1 {
font-family:times new roman;
font-size:30px;
font-style:italic;
font-weight:bold;
}
Recordemos que para definir la regla de estilo debemos indicar el nombre del elemento
HTML a la que definiremos el estilo (en este caso h1) y luego, entre llaves, todas las
propiedades y sus valores separados por punto y coma.
La primera propiedad inicializada es font-family, algunas de las fuentes más comunes que
puede acceder el navegador son:
Arial
Arial Black
Arial Narrow
Courier New
Georgia
Impact
Tahoma
Times New Roman
Verdana
En caso que la fuente no esté disponible el navegador selecciona el estilo por defecto para
ese elemento HTML.
Podemos definir varias fuentes por si acaso alguna no se encuentra disponible para el
navegador, esto lo hacemos separando por coma todas las fuentes (se eligen de izquierda a
derecha):
font-family: verdana, arial, georgia;
La segunda propiedad inicializada es font-size, hay varias medidas para indicar el tamaño de
la fuente (veremos más adelante otros sistemas de medida), en nuestro caso indicamos en
píxeles:
font-size:30px;
La tercera propiedad es font-style, que puede tener los siguientes valores :
normal
italic
oblique
La última propiedad es font-weight (peso de la fuente), pudiendo tomar los siguientes valores:
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
Esta propiedad indica el peso de la fuente (mientras tenga un valor mayor los caracteres
serán más rellenos)
La segunda regla define sólo dos propiedades relacionadas a la fuente:
h2 {
font-size:20px;
}
Las propiedades que no se inicializan quedan como responsabilidad al navegador, quien
elegirá los valores correspondientes.
Existe una última propiedad no utilizada en este ejemplo que es font-variant que puede
asumir estos dos valores:
small-caps
normal
Define si la fuente se muestra en mayúsculas tipo normal o pequeñas.
5 - Agrupación de varios elementos HTML con una misma regla de estilo.
Esta característica nos permite ahorrar la escritura de reglas duplicadas para diferentes
elementos de HTML.
La sintaxis es disponer los nombres de los elementos HTML que queremos aplicar una regla
separados por comas:
h1,h2,h3 {
color:#0000ff;
}
Supongamos que queremos la misma fuente y color para los elementos h1,h2 y h3 luego
podemos implementarlo de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
<style>
h1,h2,h3 {
color:#0000ff;
}
</style>
</head>
<body>
<h1>Título de nivel 1</h1>
</body>
</html>
Es decir, separamos por coma todas los elementos a los que se aplicará la misma regla de
estilo:
h1,h2,h3 {
color:#0000ff;
}
6 - Definición de varias reglas para un mismo elemento HTML.
En algunas circunstancias, es necesario desglosar la inicialización de propiedades en

distintas reglas.
Podemos definir más de una regla para un elemento HTML, en este ejemplo el elemento h1
tiene dos reglas:
h1,h2,h3,h4,h5,h6 {
familia de fuentes: Verdana;
}
h1 {
tamaño de fuente: 40px;
}
Supongamos que queremos todas las cabeceras con la misma fuente pero un tamaño de
fuente diferente, luego podemos implementarlo de la siguiente manera:
<!DOCTYPEhtml>
<html>
<cabeza>
<título>Problema</título>
<juego de caracteres meta="UTF-8">
<estilo>
h1, h2, h3, h4, h5, h6 {
}
h1 {
}
h2 {
}
h3 {
}
h4 {
}
h5 {
}
h6 {
}
</estilo>
</cabeza>
<cuerpo>
</cuerpo>
</html>
Es decir, podemos inicializar un conjunto de elementos HTML con una serie de propiedades
de estilo comunes. Luego agregamos en forma individual las propiedades no comunes a
dichas marcas:
h1,h2,h3,h4,h5,h6 {
}
h1 {
}
Es decir, al elemento h1 realmente le hemos definido 2 propiedades: font-family y font-
size. Lo mismo para los otros elementos HTML.
7 - Propiedades relacionadas al texto (color, text-align, text-decoration)
A una de estas propiedades ya la vimos cuando comenzamos con los primeros conceptos:
color, nos permite definir el color del texto, lo podemos indicar por medio de tres valores
hexadecimales que indican la mezcla de rojo, verde y azul. Por ejemplo si queremos rojo
puro debemos indicar:
color:#ff0000;
Si queremos verde puro:
color:#00ff00
Si queremos azul puro:
color:#0000ff
Luego si queremos amarillo debemos mezclar el rojo y el verde:
color:#ffff00
Hay muchos programas que nos permiten seleccionar un color y nos descomponen dicho
valor en las proporciones de rojo, verde y azul.
Otra forma de indicar el color, si tenemos los valores en decimal, es por medio de la siguiente
sintaxis:
color:rgb(255,0,0);
Es decir, por medio de la función rgb(red,green,blue), indicamos la cantidad de rojo, verde y
azul en formato decimal.
La segunda propiedad relacionada al texto es text-align, que puede tomar alguno de estos
cuatro valores:
left
right
center
justify
Si especificamos:
text-align:center;
El texto aparecerá centrado. Si queremos justificar a derecha, emplearemos el valor right y si
queremos a la izquierda, el valor será left.
La tercera propiedad relacionada al texto que podemos emplear es text-decoration que nos
permite entre otras cosas que aparezca subrayado el texto, tachado o una línea en la parte
superior, los valores posibles de esta propiedad son:
none
underline
overline
line-through
Como ejemplo, definiremos estilos relacionados al texto para los elementos de cabecera h1,
h2 y h3:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:#ff0000;
text-align:left;
text-decoration:underline;
}
h2 {
color:#dd0000;
text-align:center;
}
h3 {
color:#aa0000;
text-align:right;
}
</style>
</head>
<body>
<h1>Título de nivel 1.<h1>
</body>
</html>
Es decir, para los títulos de nivel 1 tenemos la regla:

h1 {
color:#ff0000;
text-align:left;
}
Color de texto rojo intenso, el texto debe aparecer de izquierda a derecha y subrayado.
Luego para el elemento h2 tenemos:
h2 {
color:#dd0000;
text-align:center;
}
El color sigue siendo rojo pero un poco más oscuro, el texto debe aparecer centrado y
subrayado.
Y por último:
h3 {
color:#aa0000;
text-align:right;
}
Para los títulos de nivel tres, el texto es rojo más oscuro, alineado a derecha y subrayado.
8 - Más propiedades relacionadas al texto (letter-spacing, word-spacing,

text-indent, text-transform)
Vimos en el concepto anterior las propiedades:

color
text-align
text-decoration
Ahora veremos el objetivo de las siguientes propiedades que nos faltan:
letter-spacing
word-spacing
text-indent
text-transform
La propiedad letter-spacing y word-spacing permiten indicar el espacio que debe haber entre
los caracteres y entre las palabras.
La propiedad text-indent, indenta la primera linea de un texto. A partir de la segunda línea, el
texto aparece sin indentación. Podemos indicar un valor negativo con lo que la indentación
es hacia la izquierda.
Por último, la propiedad text-transform puede inicializarse con alguno de los siguientes
valores:
none - capitalize - lowercase - uppercase
Cada uno de estos valores transforman el texto como sigue:
 capitalize: Dispone en mayúsculas el primer caracter de cada palabra.

 lowercase: Convierte a minúsculas todas las letras del texto.
 uppercase: Convierte a mayúsculas todas las letras del texto.
 none: No provoca cambios en el texto.
El siguiente ejemplo define reglas para los elementos h1 y p:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
letter-spacing:10px;
word-spacing:30px;
text-transform:capitalize;
}
p {
text-indent:20px;
}
</style>
</head>
<body>
<h1>Este es un título de nivel 1</h1>
<p>Todo el texto siguiente se encuentra encerrado en el elemento de
párrafo
y con el objetivo de ver el efecto de la propiedad text-indent.
La propiedad text-indent podemos inicializarla con un valor positivo,
como es el caso actual o podemos inicializarla con un valor negativo
lo que
provocará que el texto de la primera línea del párrafo
comience en una columna inferior al de todo el bloque. </p>
</body>
</html>
La cabecera de nivel uno, tiene la siguiente regla:

h1 {
letter-spacing:10px;
word-spacing:30px;
text-transform:capitalize;
}
Es decir que las letras deben tener una separación de 10 pixeles, las palabras deben estar
separadas por 30 pixeles y por último deben disponerse en mayúsculas la primera letra de
cada palabra.
Para el elemento p tenemos la siguiente regla:
p {
text-indent:20px;
}
Es decir, la primera línea del párrafo deberá imprimirse 20 píxeles a la derecha donde
normalmente debería aparecer.
9 - Herencia de propiedades de estilo.
Ahora veremos que el conjunto de elementos HTML forman en sí un árbol que en su raiz
podemos identificar el elemento body del cual se desprenden otros elementos contenidas en
esta sección, como podrían ser los elementos h1,h2,h3,h4,h5,h6,p,div luego estas en su
interior contienen otros elementos HTML como podrían ser em,strong,pre etc.
Con ejemplos veamos que hay muchos estilos que se heredan (todos los vistos hasta el
momento se heredan), es decir si definimos la propiedad color para el elemento h1, luego si
dicho elemento incorpora un texto con el elemento "em" en su interior, la propiedad color del
elemento "em" tendrá el mismo valor que la propiedad h1 (es decir el elemento em hereda
las propiedades del elemento h1)
Con un ejemplo veremos el resultado de la herencia de propiedades entre los elementos
HTML:
<html>
<head>
<style>
body {
color:#0000ff;
}
</style>
</head>
<body>
<h1>Este es un título de nivel 1 y con el elemento 'em' la palabra:
<em>Hola</em></h1>
<p>Todo este párrafo debe ser de color azul ya que lo hereda del
elemento body.</p>
</body>
</html>
En este ejemplo hemos definido la siguiente regla para el elemento body:

body {
color:#0000ff;
}
Inicializamos la propiedad color con el valor de azul y la fuente de tipo verdana. Con esto
todos los elementos contenidas en el body que no redefinan estas dos propiedades recibirán
los valores aquí definidos. En este ejemplo la cabecera de primer nivel es decir h1 y el
párrafo tienen como color el azul y la fuente es de tipo verdana.
Ahora bien en muchas situaciones podemos redefinir propiedades para elementos
contenidos, veamos como podemos hacer que el texto contenido en los elementos em y p
aparezcan de color distinto:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:#0000ff;
}
em {
color:#008800;
}
p {
color:#999999;
}
</style>
</head>
<body>
</body>
<h1>Este es un título de nivel 1 y con el elemento 'em' la palabra:
<em>Hola</em></h1>
<p>Todo este párrafo debe ser de color gris ya que lo redefine la
marca p y no lo hereda de la marca body.</p>
</html>
Ahora hemos definido tres reglas, la primera igual que el problema anterior, define la
propiedad color en azul y la fuente de tipo verdana para el elemento body:
body {
color:#0000ff;
}
La segunda regla define la propiedad color en verde para el elemento em, con esto no
heredará el color azul del elemento body (que es el elemento padre):
em {
color:#008800;
}
Algo similar hacemos con el elemento p para indicar que sea de color gris:
p {
color:#999999;
}
Pero podemos ver que todas los elementos heredan la fuente verdana ya que ninguna lo
sobreescribe.
10 - Definición de un estilo en función del contexto.
Este otro recurso que provee las hojas de estilo en cascada (css) es la definición de un estilo
para un elemento HTML siempre y cuando la misma esté contenida por otro elemento
determinado. Sólo en ese caso el estilo para dicha elemento se activará.
Supongamos que queremos que cuando disponemos un texto encerrado por el elemento
strong dentro de un párrafo el color del mismo sea verde. Pero si el elemento strong está
contenida por el elemento h1 el color debe ser rojo, luego la sintaxis del problema es:
<!DOCTYPE html>
<html>
<head>
<style>
p strong{
color:#0000ff;
}
h1 strong{
color:#ff0000;
}
</style>
</head>
<body>
<h1>Acá tenemos un título de nivel uno, luego un bloque con
el elemento strong debe aparecer <strong>así</strong></h1>
<p>
Luego si escribimos un párrafo y encerramos un bloque con el elemento
strong
debe aparecer <strong>así</strong>
</p>
</body>
</html>
Es importante analizar la sintaxis para la definción de estilos en función del contexto.
Tenemos:
p strong{
color:#0000ff;
}
Estamos diciendo que todas los bloques de la página que contengan el elemento strong y
que estén contenidas por el elemento p (párrafo) se pinten de azul. Si bien hay dos bloques
en la página que están encerrados por el elemento strong, solo uno se pinta de color azul, el
otro bloque se pinta de color rojo, ya que tenemos:
h1 strong{
color:#ff0000;
}
Es decir, activar el color rojo para el contenido encerrado por el elemento strong, siempre y
cuando se encuentre contenido por el elemento h1.
No confundir con la sintaxis para definir reglas de estilo a dos elementos que se hace
separando por coma los elementos HTML:
h1,strong{
color:#ff0000;
}
Es decir que el texto contenido por los elementos h1 y strong deben aparecer de color rojo.
Se pueden definir estilos en función del contexto, con mayor precisión, como por ejemplo:
div h1 em {
color:#ff0000;
}
Con esto estamos diciendo que se debe pintar de color rojo el texto contenido por el
elemento em siempre y cuando esté contenida en un elemento h1 y esta a su vez dentro de
un div.
La página completa queda codificada de la siguiente forma:
<!DOCTYPE html>
<html>
<head>
<style>
div h1 em {
color:#ff0000;
}
</style>
</head>
<body>
<div>
<h1>Este es un titulo de nivel 1 dentro de un <em>div</em></h1>
</div>
<h1>Este es un titulo de nivel 1 fuera de un <em>div</em></h1>
</body>
</html>

HTML 1

Cargado por

Copyright:

Formatos disponibles

HTML 1

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML 1

Cargado por

Copyright:

Formatos disponibles

PROGRAMACION IMPERATIVA

Profesor: Ariel Tasca Curso;: 4º 1º Parte: 1

HTML es el lenguaje que se emplea para el desarrollo de páginas de internet.

2 - Estructura interna de una página HTML.

3 - Salto de línea <br>

Todo el texto que disponemos en el cuerpo de la página aparece en la misma línea, no

6 - Enfasis (<em> <strong>)

Podemos ver que la sintaxis para el elemento strong es:

1 - Que son las hojas de estilo (CSS)?

2 - Definición de estilos a nivel de elemento HTML.

3 - Definición de estilos a nivel de página.

Podemos observar que en la cabecera de la página definimos la sección:

4 - Propiedades relacionadas a fuentes.

Contamos con una serie de propiedades relacionadas a fuentes:

5 - Agrupación de varios elementos HTML con una misma regla de estilo.

6 - Definición de varias reglas para un mismo elemento HTML.

En algunas circunstancias, es necesario desglosar la inicialización de propiedades en

7 - Propiedades relacionadas al texto (color, text-align, text-decoration)

Es decir, para los títulos de nivel 1 tenemos la regla:

8 - Más propiedades relacionadas al texto (letter-spacing, word-spacing,

Vimos en el concepto anterior las propiedades:

 capitalize: Dispone en mayúsculas el primer caracter de cada palabra.

El siguiente ejemplo define reglas para los elementos h1 y p:

La cabecera de nivel uno, tiene la siguiente regla:

9 - Herencia de propiedades de estilo.

En este ejemplo hemos definido la siguiente regla para el elemento body:

También podría gustarte