Introduccion A HTML

Programación en Hypertext
Markup Language (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 (en
nuestro caso emplearemos este sitio para aprender pero luego puede
descargarse un editar a su computadora para almacenar las páginas en forma
local, alguno de dichos editores puede ser el Notepad++ o el Visual Studio Code)
La estructura básica de una página
HTML es:
<!DOCTYPE html>Informa al navegador que el contenido siguiente se trata de

un archivo HTML
<html> Abrimos con la etiqueta <html> y finaliza con la marca:</html>

<head>
<title>Título de la página</title>
<meta charset="UTF-8"> definición de caracteres
</head>
<body>
Cuerpo de la página. Todo el texto que dispongamos dentro del
<body> aparece dentro del navegador tal cual lo hayamos
escrito.
</body>
</html>
 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).
Ejemplo: Crear una página que muestre los
nombres de 5 lenguajes de programación
separados por un guion.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
PHP - Java - JavaScript - C - C++
</body>
</html>
Ejercicio :Cree una página con las marcas mínimas
que debe tener la página HTML con el titulo de: “Mi
Nombre” y en el cuerpo de la misma disponga su
nombre y apellidos.
<!DOCTYPE html>
<html>
<head>
<title>Mi Nombre</title>
</head>
<body>
L.I.A Adrian Angel Rodriguez Hernandez
</body>
</html>
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:
Ejemplo: Crear una página HTML que muestre
distintos lenguajes de programación,
mostrarlos uno por línea.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
PHP <br>
Java <br>
JavaScript <br>
C <br>
C++
</body>
</html>
Ejercicio: Crear una página HTML que muestre su nombre y apellido y en las
siguientes líneas nombre de su escuela, plantel, licenciatura y cuatrimestre que
cursa con el titulo “ datos personales”
Párrafo <p>
<p> viene de la palabra paragraph
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>.
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.
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>
Ejercicio: Cree una pagina con
sus datos personales en el primer
párrafo seguido de tres saltos de
línea y después otro párrafo con
una breve narrativa de su
experiencia en la universidad UAL,
asignar un titulo relacionado a su
narrativa.
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
<html>
<head>
<meta charsef="UTF-8">
</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 d
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>
Marquesina <marquee> </marquee>
AtributosSection
behavior
Establece cómo se desplazará el texto en la etiqueta marquee. Los valores posibles son scroll, slide, y alternate. Si no hay un valor
especificado, el valor por defecto establecido es scroll.
Scroll: Hara que lo que este en la marquesina se mueva de derecha a izquierda, de manera ininterrumpida.
Slide: Una vez que completa el recorrido de derecha a izquierda(por defecto) se detiene.
Alternate: Se movera de una esquina a la otra, dando el efecto de rebote.
bgcolor
Establece el color de fondo, puede utilizarse el nombre, o su valor hexadecimal.
direction
Establece la dirección en la que el texto contenido se desplazará. Los valores posibles son left (para moverse hacia la izquierda), right
(para moverse a la derecha), up (hacia arriba) y down (hacia abajo). Si no se especifica un valor, por defecto será left.
height
Establece la altura de la etiqueta en pixeles, o en un valor porcentual.
hspace
Establece el margen horizontal.
loop
Establece el número de veces que la marquesina realizará el desplazamiento. Sino se especifica esta propiedad, por defecto es -1, lo
que quiere decir que la marquesina se desplazará continuamente.
scrollamount
Establece el valor de movimiento para cada intervalo en pixeles. Por defecto su valor es 6.
scrolldelay
Establece el intervalo entre cada desplazamiento, en milisegundos. El valor por defecto es 85. Nota: Cualquier valor inferior a 60 será
ignorado, (puesto que el valor minimo es 60) y se establecerá 60 en su lugar. Salvo que se especifique truespeed.
truespeed
Por defecto, si los valores de scrolldelay son inferiores a 60 serán ignorados. Pero si truespeed está presente, esos
valores inferiores a 60 serán aceptados.
vspace
Establece el margen vertical en pixeles o en un valor porcentual.
width
Establece el ancho de la etiqueta en pixeles o un valor porcentual.
ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Lenguajes de Programación</title>
</head>
<body>
<MARQUEE BGCOLOR=#7070ff WIDTH=30%
HEIGHT=60> ancho y alto
</MARQUEE>
</body>
</html>
ejercicio
<!DOCTYPE html>
<html>
<head>
<title>Lenguajes de Programación</title>
</head>
<body>
<marquee direction="right">Este texto se mueve de izquierda a derecha
</marquee>
<marquee direction="left">Este texto se mueve de derecha a izquierda

</marquee>
<marquee direction="up">Este texto se mueve de abajo hacia

arriba</marquee>
<marquee direction="down" width="250" height="200" behavior="alternate"

style="border:solid">
<marquee behavior="alternate">
Este texto rebotará dentro de la marquesina.
</marquee>
</marquee>
</body>
</html>
<!DOCTYPE html>
<html>
Ejemplo
<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>
Ejercicio: Diseñar el titular de un periódico con un título de
nivel 1. Luego definir dos títulos de segundo nivel con los
textos (Noticias políticas y Noticias deportivas), en cada una
de estas secciones definir dos titulares de tercer nivel con un
párrafo cada una.
Hipervínculo a otra página del
mismo sitio <a>
El elemento más importante que tiene una página de internet es el
hipervínculo, estos nos permiten cargar otra página en el navegador.
Esto es lo que hace diferente la página de un libro con la página de un
sitio en internet. Normalmente un libro lo recorremos en forma
secuencial, pero un sitio de internet podemos disponer estos enlaces
entre un conjunto de páginas y luego tener distintas alternativas de
recorrido.
El elemento de hipervínculo a otra página del mismo sitio

tiene la siguiente sintaxis:
<a href="pagina2.html">Noticias</a>
<a> viene de anchor que significa ancla.

Pagina 1 Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Título de la página 1</title>
</head>
Ejercicio: Confeccionar una
<body> página principal con dos
<h1>Página principal.</h1> <br><br> hipervínculos a las páginas
<a href="pagina2.html"><h2>Noticias</h2></a> pagina2.html y pagina3.html
</body>
</html> Luego en las dos páginas
secundarias disponer
hipervínculos a la página
Pagina 2 <!DOCTYPE html> principal.
<html>
<head>
<title>Título de la página 2</title>
</head>
<body>
<h1>Noticias Deportivas.</h1>
<a href="pagina1.html"><h3>Inicio.</h3></a>
</body>
</html>
Hipervínculo a otro sitio de internet <a>
La sintaxis para disponer un hipervínculo a otro sitio de internet es:
<a href="http://www.google.com">Buscador Google</a>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="http://www.google.com">Buscador
Google</a>
</body>
</html>
Ejercicio: Confeccionar una página que contenga un hipervínculo a la pagina

de tu Universidad (indicar sólo el nombre de dominio de la Universidad).
Disponer además un segundo hipervínculo a una página determinada de la
UAL.
Imágenes dentro de una página <img>
Para insertar una imagen dentro de una página debemos utilizar el elemento
HTML <img>, la misma no tiene una marca de finalización (similar a la etiqueta
<br>).
Generalmente, la imagen se encuentra en el mismo servidor donde se

almacenan nuestras páginas HTML. Los formatos clásicos son los archivos con
extensiones gif, jpg y png.
La sintaxis de esta etiqueta es:
<img src="foto1.jpg" alt="Pintura geométrica">
Como mínimo, debemos inicializar las propiedades src y alt de la etiqueta HTML "img".
En la propiedad src indicamos el nombre del archivo que contiene la imagen.
Otra propiedad muy recomendada es alt, donde disponemos un texto que verán los
usuarios que visiten el sitio con un navegador que sólo permite texto (o con un navegador
que tenga desactivada la opción de descarga de imágenes). El texto debe describir el
contenido de la imagen.
ejemplo
Confeccionemos una página que muestre una imagen llamada
universidad_ual.png (La imagen se encuentra almacenada en el servidor en la
misma carpeta donde se localiza esta página)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="universidad_ual.jpg" alt="Logo Mi Universidad">
</body>
</html>
Ejercicio: Desarrollar una página que muestre dos imagenes

llamadas foto2.jpg y foto3.jpg, las mismas se encuetran almacenadas
en el servidor en la misma carpeta donde se almacenará la página
que usted desarrollará.
Hipervínculo mediante una imagen
<a> y <img>
consiste en disponer la etiqueta <img> encerrada entre la
marca de comienzo y fin del enlace(<a>)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Presione alguna de las imagenes para conocer más sobre esa
obra.</h2>
<a href="pagina2.html"><img src="foto1.jpg" alt="Pintura
Geométrica"> </a>
<br>
<a href="imagenes.html"><img src="foto2.jpg" alt="Pintura
Geométrica"> </a>
</body>
</html> Ejercicio :Crear tres páginas con una foto cada una (foto1.jpg,
foto2.jpg y foto3.jpg) luego al ser presionada avanzar a la
siguiente página, es decir de la pagina1.html llamar a la
pagina2.html, de la pagina2.html pasar a la pagina3.html y de
ésta a la primera.
Las imágenes se encuentran en el directorio padre.
Hipervínculo a un cliente de correo <a>
<!DOCTYPE html>
<html>
<head> <title>Título de la página</title>
<meta charset="UTF-8"> </head> <body>
<h1>Reclamos</h1>
<a href="mailto:diegoestevanes@gmail.com">Enviar
mail.</a>
</body>
</html>
Anclas llamadas desde la misma
página.
Otra posibilidad que nos brinda el HTML es disponer una referencia
dentro de la página para poder posteriormente disponer un hipervínculo
a dicha marca.
Es una práctica común cuando queremos desplazarnos dentro de una

página de gran tamaño. Se disponen hipervínculos a diferentes anclas.
La sintaxis para definir un ancla es:

<a name="nombreancla"></a>
No debemos confundir un ancla con un hipervínculo, más allá que se

utiliza el mismo elemento a. Para un ancla inicializamos la propiedad
name con el nombre del ancla.
Un ancla se la define en una parte de la página que queremos que el

operador llegue a partir de un hipervínculo.
Ahora la sintaxis para ir a un ancla desde un hipervínculo es la
siguiente:
<a href="#nombreancla">Introducción</a><br>
Vemos que en la propiedad href indicamos el nombre del ancla.
Haremos un ejemplo, donde dispondremos una lista de

hipervínculos que llaman a una serie de anclas dispuestas en la
misma página:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Tutorial de MySQL</h1>
<a href="#introduccion">Introducción</a><br>
<a href="#mostrarbasedatos">show databases</a><br>
<a href="#creaciontabla">Creación de una tabla y mostrar sus campos</a><br>
<a href="#cargarregistros">Carga de registros a una tabla y su recuperación</a><br>
<a name="introduccion"></a>
<h2>Introducción</h2>
<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.<br>
Ingresando instrucciones en la linea de comandos o embebidas en un lenguaje como PHP nos
comunicamos
con el servidor. Cada sentencia debe acabar con punto y coma (;).<br>
La sensibilidad a mayúsculas y minúsculas, es decir, si hace diferencia entre ellas, depende del
sistema operativo, Windows no es sensible, pero Linux si. Por ejemplo Windows interpreta
igualmente
las siguientes sentencias:<br>
create database administracion;<br>
Create DataBase administracion;<br>
Pero Linux interpretará como un error la segunda.<br>
Se recomienda usar siempre minúsculas. Es más el sitio mysqlya.com.ar está
instalado sobre un servidor
Linux por lo que todos los ejercicios deberán respetarse mayúsculas y
minúsculas.
</p>
<a name="mostrarbasedatos"></a>
<h2>show databases</h2>
<p>
Una base de datos es un conjunto de tablas.<br>
Una base de datos tiene un nombre con el cual accederemos a ella.<br>
Vamos a trabajar en una base de datos ya creada en el sitio, llamada
"administracion".<br>
Para que el servidor nos muestre las bases de datos existentes, se lo
solicitamos enviando la instrucción:<br>
show databases;<br>
Nos mostrará los nombres de las bases de datos, debe aparecer en este sitio
"administracion".<br>
</p>
<a name="creaciontabla"></a>
<h2>Creación de una tabla y mostrar sus campos</h2>
<p>
Una base de datos almacena sus datos en tablas.<br>
Una tabla es una estructura de datos que organiza los datos en columnas y filas; cada columna
es un campo
(o atributo) y cada fila, un registro. La intersección de una columna con una fila, contiene un
dato
específico, un solo valor.<br>
Cada registro contiene un dato por cada columna de la tabla.<br>
Cada campo (columna) debe tener un nombre. El nombre del campo hace referencia a la
información que
almacenará.<br>
Cada campo (columna) también debe definir el tipo de dato que almacenará.<br>
</p>
<a name="cargarregistros"></a>
<h2>Carga de registros a una tabla y su recuperación</h2>
<p>
Usamos "insert into". Especificamos los nombres de los campos entre paréntesis y separados por
comas
y luego los valores para cada campo, también entre paréntesis y separados por comas.<br>
Es importante ingresar los valores en el mismo orden en que se nombran los campos, si ingresamos
los datos en otro orden, no aparece un mensaje de error y los datos se guardan de modo
incorrecto.<br>
Note que los datos ingresados, como corresponden a campos de cadenas de caracteres se
colocan
entre comillas simples. Las comillas simples son OBLIGATORIAS.
</p>
</body>
</html>
Lista ordenada (<ol>)
Este etiqueta HTML es útil cuando debemos numerar o listar
una serie de datos.
Veamos con un ejemplo una lista ordenada para conocer su

sintaxis.
Mostraremos el orden de llegada de tres corredores:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol>
<li>Rodriguez Pablo</li>
<li>Gonzalez Raul</li>
<li>Lopez Hector</li>
</ol>
</body>
</html>
La marca <ol> y su correspondiente marca de cerrado es </ol>
En su interior cada uno de los items se los dispone con el

elemento li, que también tiene la marca de comienzo <li> y la
marca de fin de item </li>
Luego se encarga el navegador de numerar cada uno de los items

contenidos en la lista, tengamos en cuenta que se numeran
porque se trata de una lista ordenada.
Para recordar el nombre de estos elementos HTML:
<ol> viene de las palabras ordered list <li> viene de las palabras
list item
Lista no ordenada (<ul>)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Lenguajes de
programación.</h2>
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>C#</li>
</ul>
</body>
</html>
Tabla (<table><tr><td>)
Para la creación de una tabla intervienen una serie de elementos:
<table> Es la marca de comienzo de la tabla. Este elemento requiere la

marca de cierre.
<tr> Es la marca de comienzo de una fila. Esta marca debe estar dentro del
elemento table. Este elemento requiere la marca de cierre.
<td> Es la marca de comienzo de una celda. Esta marca debe estar dentro
del elemento tr. Este elemento requiere la marca de cierre.
Para recordar el nombre de estos elementos HTML:
<table> <tr> viene de table row que significa fila de la tabla. <td> viene de
table data que significa dato de la tabla.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td>China</td><td>1300 millones</td>
</tr>
<tr>
<td>India</td><td>1080 millones</td>
</tr>
<tr>
<td>Estados Unidos</td><td>295 millones</td>
</tr>
</table>
</body>
</html>
Tabla con encabezado (<th>)
La primer característica que le vamos a agregar a

una tabla son las celdas de encabezado.
Normalmente la primer fila de una tabla puede

representar los títulos para cada columna.
Para indicar que se trata de una celda de

encabezado utilizamos el elemento <th> en lugar
de <td>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>Paises</th><th>Cantidad de habitantes</th>
</tr>
<tr>
<td>China</td><td>1300 millones</td>
</tr>
<tr>
<td>India</td><td>1080 millones</td>
</tr>
<tr>
<td>Estados Unidos</td><td>295 millones</td>
</tr>
</table>
</body>
</html>
Formulario - <form>
Un formulario permite que el visitante al sitio cargue datos y sean enviados al
servidor.
Es el medio ideal para registrar comentarios del visitante sobre el sitio,

solicitar productos, sacar turnos etc.
Veamos detenidamente la estructura de un formulario elemental, lo

primero la apertura de la marca form donde debemos definir dos
propiedades (action y method):
<form action="registrardatos.php" method="post">

Formulario - input type="text"/ input
type="password"
Veamos la sintaxis nueva para definir un cuadro de texto para el ingreso
de una clave:
<input type="password" name="clave" size="12">
Utilizamos el mismo elemento input pero inicializamos la propiedad type

con el valor "password", con esto logramos que cuando el visitante
ingrese la clave se visualicen asteriscos en lugar de los caracteres que
tipeamos.
Luego para definir un botón que permita borrar todos los datos
ingresados hasta el momento lo hacemos mediante:
<input type="reset" value="borrar">

<!DOCTYPE html>
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
Ingrese su clave:
<input type="password" name="clave" size="12">
<br>
<input type="submit" value="enviar">
<input type="reset" value="borrar">
</form>
</body>
</html>
Formulario - textarea
La sintaxis para definir un área de texto para el ingreso de múltiples
líneas es:
<textarea name="comentarios" rows="5" cols="60"></textarea>
Es un elemento que requiere una marca de comienzo y una de

finalización.
Además de tener la propiedad name similar a los otros elementos

relacionados a formularios tiene dos propiedades llamadas rows y cols.
Estas dos propiedades indican la cantidad de filas y columnas que
visualiza el área de texto.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Ingrese su mail:
<input type="text" name="mail" size="50"><br>
Comentarios:<br>
<textarea name="comentarios" rows="5" cols="60"></textarea>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Formulario - input type="radio"
Veamos como se definen los controles de tipo radio:
<input type="radio" name="estudios" value="1">Sin estudios<br>

<input type="radio" name="estudios" value="2">Primario<br>
<input type="radio" name="estudios" value="3">Secundario<br>
<input type="radio" name="estudios" value="4">Universitario<br>
Como podemos observar todos tienen el mismo valor en la propiedad name,

con esto se logra que cuando seleccionamos uno se deseleccione el actual.
El valor que se rescata en el servidor es el dato almacenado en la propiedad

value.
Si queremos disponer varios grupos de controles de tipo radio debemos

definirles a cada grupo la propiedad name nombres distintos.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione el máximo nivel de estudios que tiene:
<br>
<input type="radio" name="estudios" value="1">Sin
estudios<br>
<input type="radio" name="estudios" value="2">Primario<br>
<input type="radio" name="estudios" value="3">Secundario<br>
<input type="radio" name="estudios" value="4">Universitario<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
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.
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:
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:
<h1 style="color:#ff0000;background-color:#ffff00"> Este mensaje es de color rojo sobre

fondo amarillo. </h1>
<!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>
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>
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>
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 { font-family:verdana; 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>
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 { font-family:Verdana; }
h1 { font-size:40px; }
Supongamos que queremos todas las cabeceras con la misma

fuente pero tamaños de fuente distinta, luego podemos
implementarlo de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
<style>
h1,h2,h3,h4,h5,h6 {
font-family:Verdana;
}
h1 {
font-size:40px;
}
h2 {
font-size:30px;
}
h3 {
font-size:25px;
}
h4 {
font-size:20px;
}
h5 {
font-size:15px;
}
h6 {
font-size:10px;
}
</style>
</head>
<body>
</body>
</html>
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>
Definición de hojas de estilo en un
archivo externo.
Hasta ahora hemos visto la definición de estilos a nivel de elemento HTML y la
definición de estilos a nivel de página. Dijimos que la primera forma es muy poco
recomendada y la segunda es utilizada cuando queremos definir estilos que serán
empleados sólo por esa página.
Ahora veremos que la metodología más empleada es la definición de una hoja de estilo
en un archivo separado que deberá tener la extensión css.
Este archivo contendrá las reglas de estilo (igual como las hemos visto hasta ahora)
pero estarán separadas del archivo HTML.
La ventaja fundamental es que con esto podemos aplicar las mismas reglas de estilo a
parte o a todas las páginas del sitio web. Veremos que esto será muy provechoso
cuando necesitemos hacer cambios de estilo (cambiando las reglas de estilo de este
archivo estaremos cambiando la apariencia de múltiples páginas del sitio).
También tiene como ventaja que al programador le resulta más ordenado tener lo
referente a HTML en un archivo y las reglas de estilo en un archivo aparte.
para indicar el archivo de estilos externo, debemos agregar en la cabecera (head) del
archivo HTML la siguiente marca:
<link rel="StyleSheet" href="estilos.css" type="text/css">

<!DOCTYPE html>
<html>
<head>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>Definición de hojas de estilo en un archivo externo.</h1>
<p>
Hasta ahora hemos visto la definición de estilos a nivel de elemento
HTML
y la definición de estilos a nivel de página. Dijimos que la primera
forma es muy poco recomendada y la segunda es utilizada cuando
queremos definir
estilos que serán empleados solo por esa página.
Ahora veremos que la metodología más empleada es la definición
de una hoja de estilo en un archivo separado que deberá tener la
extensión
css.
</p>
</body>
</html>
body {
background-color:#eafadd;
}
h1 {
color:#0000cc;
font-family:times new roman;
font-size:25px;
text-align:center;
}
p{
color:#555555;
text-align:justify;
}

Introduccion A HTML

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Introduccion A HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Programación en Hypertext

Markup Language (HTML).

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

Este lenguaje está constituido de elementos que el navegador interpreta y

<!DOCTYPE html>Informa al navegador que el contenido siguiente se trata de

<html> Abrimos con la etiqueta <html> y finaliza con la marca:</html>

 Otra cosa importante es que el lenguaje HTML

Todo el texto que disponemos en el cuerpo de la página aparece

Para indicarle al navegador que queremos que continúe en la

Implementemos una página que muestre los nombres de distintos

Dentro de un párrafo puede haber saltos de línea <br>.

No es correcto tratar de dar formato a un escrito utilizando

Veamos con un ejemplo como disponer dos párrafos:

Otros elementos HTML muy utilizados son para indicar los

El título de mayor nivel es <h1>, es decir el que tiene

<marquee direction="left">Este texto se mueve de derecha a izquierda

<marquee direction="up">Este texto se mueve de abajo hacia

<marquee direction="down" width="250" height="200" behavior="alternate"

El elemento de hipervínculo a otra página del mismo sitio

<a> viene de anchor que significa ancla.

<a href="http://www.google.com">Buscador Google</a>

Ejercicio: Confeccionar una página que contenga un hipervínculo a la pagina

Generalmente, la imagen se encuentra en el mismo servidor donde se

La sintaxis de esta etiqueta es:

<img src="foto1.jpg" alt="Pintura geométrica">

En la propiedad src indicamos el nombre del archivo que contiene la imagen.

Ejercicio: Desarrollar una página que muestre dos imagenes

Es una práctica común cuando queremos desplazarnos dentro de una

La sintaxis para definir un ancla es:

No debemos confundir un ancla con un hipervínculo, más allá que se

Un ancla se la define en una parte de la página que queremos que el

Vemos que en la propiedad href indicamos el nombre del ancla.

Haremos un ejemplo, donde dispondremos una lista de

Veamos con un ejemplo una lista ordenada para conocer su

Mostraremos el orden de llegada de tres corredores:

En su interior cada uno de los items se los dispone con el

Luego se encarga el navegador de numerar cada uno de los items

Para recordar el nombre de estos elementos HTML:

Para la creación de una tabla intervienen una serie de elementos:

<table> Es la marca de comienzo de la tabla. Este elemento requiere la

Para recordar el nombre de estos elementos HTML:

La primer característica que le vamos a agregar a

Normalmente la primer fila de una tabla puede

Para indicar que se trata de una celda de

Es el medio ideal para registrar comentarios del visitante sobre el sitio,

Veamos detenidamente la estructura de un formulario elemental, lo

<form action="registrardatos.php" method="post">

<input type="password" name="clave" size="12">

Utilizamos el mismo elemento input pero inicializamos la propiedad type

<input type="reset" value="borrar">

<textarea name="comentarios" rows="5" cols="60"></textarea>

Es un elemento que requiere una marca de comienzo y una de

Además de tener la propiedad name similar a los otros elementos

Veamos como se definen los controles de tipo radio:

<input type="radio" name="estudios" value="1">Sin estudios<br>

Como podemos observar todos tienen el mismo valor en la propiedad name,

El valor que se rescata en el servidor es el dato almacenado en la propiedad

Si queremos disponer varios grupos de controles de tipo radio debemos

 CSS son las siglas de Cascade Style Sheet que traducido

 Es común a veces definir estilos directamente en los elementos HTML cuando

<h1 style="color:#ff0000;background-color:#ffff00"> Este mensaje es de color rojo sobre

También podemos hacer la definición de estilos para los distintos