Introducción a HTML y CSS para Web
Traducido por
ScribdTranslationsIntroducción a HTML y CSS para Web
Traducido por
ScribdTranslationsHTML y CSS
LECCIONES BÁSICAS DE DESARROLLO WEB
Content
Introducción al Html
Etiquetas HTML – IMG, Formulario, Hipervínculos, Marcos, Tablas
Ejercicio
Hojas de Estilo en Cascada - Introducción
Ventajas del CSS
Tipos de hojas de estilo
Selectores
Conceptos Clave
Ejemplo
Introducción [Continuación…]
Navegador web
Establece la conexión con el servidor web especificado, en el
URL solicitada (Localizador Uniforme de Recursos (URL)
Interpreta y da formato a la información encontrada en el servidor, y
muestra la información formateada.
Servidor Web
Una computadora que entrega/serve páginas web.
Cada servidor web tiene una dirección IP y posiblemente un nombre de dominio.
Por ejemplo: Si ingresas la URL [Link] en tu
navegador, esto envía una solicitud al servidor cuyo nombre de dominio es
[Link]. El servidor luego obtiene la página llamada [Link]
y lo envía a tu navegador.
Cada servidor web contiene documentos que están escritos en el
Lenguaje de Marcado de Hipertexto (HTML)
Se intercambian solicitudes y respuestas entre los navegadores web y
Webservers using theHypertext Transfer Protocol(HTTP)
Introducción [Contd...]
Protocolo de Transferencia de Hipertexto (HTTP)
protocolo sin estado a nivel de aplicación.
HTTP define cómo
el navegador establece conexión con el servidor
el navegador solicita información del servidor
el servidor responde a la solicitud del navegador
el servidor/navegador cierra la conexión
Funciona en arquitectura cliente-servidor
Introducción [Contd…]
Lenguaje de Marcado de Hipertexto (HTML)
un lenguaje de marcado simple utilizado para definir y describir el diseño de
una página web
Localizador Uniforme de Recursos (URL)
identificador estándar utilizado para localizar información en la Web
elementos en una URL – protocolo://nombre de dominio/nombre de archivo
protocolo de hipertexto – [Link]
protocolo de transferencia de archivos – [Link]
Conceptos básicos de URL
Un localizador uniforme de recursos, comúnmente abreviado como URL
especifica la ubicación del recurso en el
internet/intranet o una aplicación web.
Tipos de URL:
Absolute URLs
URLs relativas
URLs de fragmentos
URLs absolutas
Las URL absolutas utilizan una dirección de Internet completa para proporcionar la ubicación de
un recurso.
Ejemplos:
[Link]
[Link]
Conceptos básicos de URL
URLs relativas
Las URL relativas se utilizan para acceder a archivos cuando la Internet completa
la dirección es innecesaria.
Ejemplos:
[Link]
/[Link]
[Link]?frame=true
Fragmentos de URL
Las URL de fragmento se utilizan para acceder a una ubicación específica dentro de una URL.
Ejemplos:
[Link]
Introducción - HTMLTags
Las etiquetas HTML están encerradas en corchetes angulares, <así>
Los atributos son comandos añadidos a las etiquetas para especificar varios
opciones.
Cualquier archivo HTML debe comenzar con la etiqueta <HTML> y terminar con el
etiqueta </HTML>
El texto entre las etiquetas de inicio y fin es el contenido del elemento
Las etiquetas HTML no son sensibles a mayúsculas y minúsculas, <b> significa lo mismo que <B>
El archivo HTML se guarda con la extensión htm o html
Ese es [Link] o [Link]
Introducción - HTMLTags [Continuación...]
HTML simple por ejemplo,
<HTML>
<CABECERA>
<TITLE>My First HTML Page </TITLE>
</CABEZA>
<BODY>Este es mi primer asignación de HTML. Debo hacerlo correctamente.</BODY>
</HTML>
Introducción - HTMLTags [Continúa...]
Etiqueta con atributos
<HTML>
<CABEZAL>
<TITLE>My First HTML Page </TITLE>
</CABEZAL>
<BODY bgcolor="#cccccc" text="#660000">
Esta página HTML está diseñada para explicar los atributos de la etiqueta body.
<p>bgcolor y texto son los atributos de la etiqueta body.</p>
<p bgcolor="#cccccc">indica el color de fondo de la página html.<br>
#660000
</CUERPO>
</HTML>
Uso de hiperenlaces y anclas
Uses of Hyperlinks:
Conectando a otras páginas HTML que son parte de un sitio web o a
material relacionado de otros sitios web.
Conectando a recursos que no son HTML, incluidos documentos portátiles
como archivos PDF de Adobe Acrobat o clips de video como QuickTime
películas.
Estructura de hipervínculos:
<a href="[Link] de URL</a>
donde, [Link] es una URL y <a..> es el ancla
etiqueta.
<a href="[Link]/downloads">Descargar</a> Adobe
Adobe Acrobat Reader
Descargar Adobe Acrobat Reader
Agregar imágenes a una página web
<IMG> se utiliza para incluir una imagen en el documento web.
Ejemplo
Código: <IMG SRC="[Link]" width="105" height="97" border="0">
Output:
Creando tablas HTML
Una tabla es un sistema de columnas y filas.
Usando tablas puedes controlar precisamente cómo quieres tu
contenido dividido y donde quieres que se coloque.
Para crear un HTML usa una etiqueta <table> y sus atributos.
Cada fila de una tabla se especifica utilizando una etiqueta <tr>.
Cada celda de una tabla se especifica utilizando una etiqueta <td>.
El encabezado de la tabla se especifica utilizando una etiqueta <th>.
Tablas [Contd…]
Ej.
<tabla border=1>
<tr>
<th>Año
Año Cantidad
<th>Monto
</tr> 2002 85,000
<tr> 2001 65,000
2002
85,000
</tr>
<tr>
2001
<td>65,000
</tr>
</tabla>
Especificando rowspan y colspan
Especificando Colspan
<tabla>
<tr> <td colspan=2>Encabezado</tr> Encabezado
Uno
Uno Dos
<td> Dos
</tr>
</table>
Especificar Rowspan
<table border=1> Dos
Uno
<tr><td rowspan=2>Uno<td>Dos Tres
</tr>
Tres
</tabla>
Marcos [Contd...]
Cualquier enlace en un marco puede abrir una página en otro marco.
Logra esto utilizando el atributo name de la etiqueta <frame> y el target.
atributo de la etiqueta <a>.
El atributo de nombre le da a cada cuadro una identidad como cualquier nombre que
elige.
Haga referencia al nombre del marco en el atributo target de la etiqueta <a>
[Link]
<frameset cols="20%,80%">
<frame name="toolbar" src="[Link]">
<frame name="content" src="[Link]">
</marco>
barra_de_herramientas.html
<a href="[Link]" target="content">inicio</a>
<a href="[Link]" target="content">productos</a>
<a href="[Link]" target="content">sobre nosotros</a>
<a href="[Link]" target="content">comentarios</a>
Marcos [Continuación...]
[Link] and [Link]
Uso de formularios en HTML [Contd…]
Introducción
Los formularios HTML actúan como una interfaz entre el usuario final y el
Aplicación del lado del servidor. En el lado del cliente, el formulario se completa y los datos son
transmitido al servidor, donde los datos son interpretados y utilizados
en consecuencia.
Diferentes Elementos
Formulario
Entrada
Seleccionar y Opción
Área de texto
Otros [Botón, Etiqueta, Conjunto de campos y Leyenda]
Uso de formularios en HTML [Continuación…]
Elemento de formulario
El formulario tiene dos atributos principales, a saber: Acción y Método.
Se requiere el atributo de acción. Los métodos son 'get' que es el predeterminado y
publicación
Otros atributos definen el tipo de codificación y el evento
handlers[javascript/vbscript]
Aquí hay un ejemplo de la etiqueta Formulario
<form action=URL method=get/post enctype="multipart/form-data">
onSubmit [script – event handling] onReset[script]>
</form>
El atributo acción tiene la URL a la que deben ir los datos del formulario
Uso de formularios en HTML [Continuación...]
El método GET envía los pares nombre/valor a la URL
especificado en el atributo de acción agregando a la URL. ej urlname?
FirstName=value&SecondName=value
Esto se puede ver en la barra de direcciones del navegador
El método POST envía los datos como parte del cuerpo HTML.
El ENCTYPE se utiliza para indicar el tipo de codificación del formulario
contents. Default being ‘application/x-www-form-urlencoded’.
Hay dos atributos [onSubmit y onReset] que se utilizan
en lo que respecta al scripting.
El evento ONSUBMIT se activa cuando se pulsa un botón de enviar.
se hizo clic y desde aquí el control puede ser pasado a cualquiera
función de un guion
ej. javascript o vbscript Uso: <form ....
OnSubmit="javascript: return functionName()"> ---- </form>
Uso de formularios en HTML [Continuación...]
Básicamente, esto se puede usar siempre que queramos invocar un
javascript/vbscript function on clicking on a ‘Submit’ button
Siempre que usemos cualquier elemento de formulario en una página web, debe ser con
en <form></form> etiquetas.
Elementos de entrada
botón – Usado para invocar una función de script o para jugar
controles de elementos de formulario
checkbox - Off/on
archivo - Utilizado para seleccionar un archivo seleccionado por el usuario
oculto – para mantener elementos de formulario ocultos que no aparecen en el
página web
imagen – hacer que una imagen sea equivalente a un botón de Enviar
contraseña - para enmascarar la entrada
radio – una entrada eligiendo
Restablecer – restablecer los valores de los elementos del formulario
Uso de formularios en HTML [Continuación…]
Oculto
El valor oculto permite enviar información del formulario que es invisible para
el usuario en la página web.
Eg.<input type="hidden" name="Página"
valor="hiddenValue">
Imagen
Esto es lo mismo que un botón de 'Enviar', pero la única diferencia es que
reemplaza el brusco botón de Enviar con una imagen. De lo contrario, tiene el
misma función.
<input type="image" src="images/submit_Image">
Uso de formularios en HTML [Continuación...]
Contraseña
Este es un control de entrada donde el texto está enmascarado con un asterisco.
De lo contrario, es similar a un cuadro de texto.
<input type="password" name="userpswd">
Uso de formularios en HTML [Continuación...]
Enviar
Esto se utiliza para enviar los pares de nombre/valor del formulario activo
elementos a la URL
Especificado en la declaración del FORMULARIO
La especificación HTML permite múltiples botones de Enviar
Está declarado como<input type="submit">
Texto
Esto se puede usar para ingresar texto de una sola línea en un cuadro de texto
Eg. <input type="text" name="nombre" size="15" >
maxlength=“20”>
El atributo 'size' establece la longitud del cuadro de texto.
El atributo 'maxlength' limita [número de caracteres] al usuario para
escribiendo texto
Un atributo más es 'readonly'. Esto bloquea el cursor al enfocar en
el cuadro de texto y no permite al usuario escribir ningún texto
Uso de formularios en HTML [Contd…]
Seleccionar y Elementos de Opción
El elemento SELECT se utiliza para crear una lista de opciones ya sea como un
menú desplegable o un cuadro de lista. Cada una de las opciones en la lista es un
Elemento OPTION
<SELECCIONAR nombre="nombreControl" tamaño="anchoControl"
enCambio=script>
<option value=”Value1”>First Option</option>
<option value=”Value2” selected>Second Option</option>
<option value=”Value3”>Third Option</option>
</SELECCIONAR>
onChange es un evento para el cuadro de selección y dirige el control de flujo a
la función de script especificada.
El valor predeterminado si no se especifica explícitamente para una etiqueta de opción sería
ser su contenido.
El atributo seleccionado deja esa opción resaltada
Uso de formularios en HTML [Continuación…]
Elemento de área de texto
El elemento textarea es similar al tipo de texto del elemento INPUT.
Pero en este caso, el usuario puede escribir una sección de texto más grande de lo que ellos
puede con los cuadros de texto
Es una entrada de texto de múltiples líneas.
<TEXTAREA name="control" rows="numRows" cols="numCols">
Las dimensiones de la ventana de área de texto se especifican mediante los atributos
‘rows’ and ‘cols’
Uso de formularios en HTML [Contd…]
Ejercicio
Crea una sencilla página web de 'Formulario de Registro' que tenga los siguientes nombres de campo,
Elige el elemento de formulario apropiado para cada campo.
1 UserID
2 Contraseña
3 RetypePassword
4 First Name
5 Apellido
6 País – Lista de algunos países
7 Ciudad – Lista de algunos estados de ese país
8 Tus intereses --------- Entretenimiento, Negocios, Compras, Salud, Música, Viajes, Otros Por favor
especificar
¿Eres un recién llegado?
10 Escribe una nota sobre tus experiencias en MindTree hasta ahora
11 Sube tu foto
12 ID de correo electrónico
Proporcionar todos los botones necesarios para este formulario. El botón de enviar es una imagen.
CSS
¿Qué son las hojas de estilo?
Las hojas de estilo proporcionan un medio para que los autores especifiquen cómo desean
documentos escritos en un lenguaje de marcado como XML o HTML para
ser formateado.
CSS [Continuado...]
Por qué Hojas de Estilo
Hay dos respuestas a esto:
HTML no está diseñado para estilizar documentos - cuando escribes un HTML
documento, usted está especificando solo el contenido que el elemento
contiene. . Si quisieras expresar que deseas que tus encabezados sean
amarillo Helvetica, entonces podrías tener<H1><FONT
A
encabezado</FONT></H1>, pero esto es malo por varias razones:
Tienes que añadir ese fragmento de código a cada encabezado que quieras estilizar - esto es
que consume mucho tiempo, propenso a errores y hace que los archivos sean excesivamente pesados (una página típica
estilizado usando HTML será 1/3rd etiquetas de formato).
Si quieres cambiar esos encabezados a Arial rosa, entonces tendrás que cambiar
cada encabezado individualmente - una tarea prohibitivamente laboriosa en un sitio grande.
HTML simplemente no ofrece un control suficiente sobre el formato del documento
efectos de formato importantes como el interlineado (el espacio entre)
líneas), sombras de texto, y muchos otros efectos simplemente no se pueden hacer utilizando
HTML.
CSS [Contd…]
Why Style Sheets?
Las hojas de estilo ayudan a reducir costos, pero también la velocidad de descarga.
will increasefor viewers of your pages
CSS [Continuación…]
¿Qué razones hay para no usar una hoja de estilo?
No todos los navegadores soportan correctamente la hoja de estilos.
Ventajas de usar hojas de estilo
Las hojas de estilo tienen las siguientes ventajas:
Separa el contenido del formato.
Mantenimiento fácil
Reducen el tiempo de descarga al eliminar la información de formato.
de documentos
Proporcionan mucho más control sobre el formato que HTML - tal
características como imágenes de fondo y colores en todos los elementos - no
solo todo el documento, etc.
Aseguran una apariencia consistente en un sitio
CSS [Continuación...]
Tipos de hojas de estilo
Estilo en línea
Hoja de Estilos Embebida
Hojas de estilo vinculadas
Importando hojas de estilo
Estilo en línea
Por ejemplo, vea el siguiente fragmento
<P style="color: green"> Estilo en línea de párrafo </P>
Dentro del atributo de estilo vienen las declaraciones de estilo. En este ejemplo, el elemento P es
siendo hecho verde.
<BODY style="color: #FFFFFF; background:#000000"> Párrafo
estilo en línea </Cuerpo>
En el fragmento anterior estamos aplicando el estilo en línea a la etiqueta Body, lo que dará
el fondo negro para el cuerpo y color blanco para todo el texto que aparecerá
en la etiqueta Body.
CSS [Contd…]
Hoja de Estilo Embebida
Las hojas de estilo embebidas están encerradas en un<STYLE
tipo="text/css"> y </STYLE> etiqueta. Van en el encabezado
de una página:
Por ejemplo, mira el siguiente fragmento:
<HTML>
<CABECERA>
<STYLE type="text/css">
<!--
BODY {color: red}
-->
</ESTILO>
</CABEZAL>
<CUERPO>
El contenido principal aparecerá en la sección del cuerpo
</CUERPO>
</HTML>
CSS [Continúa...]
Tienen dos beneficios
No afectan al resto de las hojas de estilo que podrías usar.
Si un documento se guarda y se lee sin conexión, el estilo se mantendrá.
CSS [Contd...]
Hoja de estilo vinculada
Las hojas de estilo se vinculan utilizando el <LINK rel="stylesheet"
tipo="text/css" href="[Link]"> etiqueta, que debe ir en
el encabezado de una página.
rel="stylesheet" esto dice que es un enlace hacia adelante, y dice el
navegador qué esperar al otro lado, a saber, una hoja de estilo.
El atributo type, el tipo de hoja de estilo (siempre text/css)
El atributo href, la ubicación de la hoja de estilo.
CSS [Continúa...]
Vea el siguiente fragmento para la hoja de estilo enlazada
<HTML>
<CABEZAL>
<LINK rel="stylesheet" type="text/css" href="[Link]">
</CABEZAL>
<CUERPO>
El contenido principal aparecerá aquí en la sección del cuerpo.
</CUERPO>
<HTML>
Una vez que hayas vinculado la hoja de estilos a tu página, entonces tienes
para crear la hoja de estilo. Por ejemplo:
CUERPO {color: negro;
fuente-familia: Geneva, Helvetica, Arial, sin-serif;
fondo-color: blanco}
Si guardaste el ejemplo anterior como una hoja de estilo, entonces cada página
que vinculen a él tendrán los estilos especificados.
CSS [Contd…]
Ventaja de las hojas de estilo enlazadas
Ya que una hoja de estilo puede estar adjunta a cientos de
los archivos, el mantenimiento de las páginas web se vuelve mucho más fácil.
Ayuda a lograr la consistencia en los estilos a través de
saca las páginas.
Disadvantage
Si el usuario descarga la página y si se olvidó de
descargar el CSS vinculado entonces él/ella no podrá
ver la página con todos los estilos.
CSS [Continuación...]
Importando hojas de estilo
La regla @import permite así que mantengas algunas cosas iguales mientras
teniendo otros diferentes
sintaxis:@import url([Link])
Debe estar al comienzo de la hoja de estilo, antes de cualquier conjunto de reglas (un conjunto de reglas es
algo como P {color: rojo}
Alternativamente se puede especificar como
@import "[Link]";
como @import url("[Link]");
o como @import '[Link]';.
Sin embargo, Internet Explorer solo admite los formatos url(), no las comillas " y '
formatos.
CSS [Contd...]
Selectores
Para darte más libertad para seleccionar qué elementos son tu estilo.
aplicado a.
Selectores de Tipo de Elemento:
Para la declaración de estilo, consulte el siguiente fragmento.
H1 { color: red }
H1, H2, H3 { color: red }
CSS [Continuación...]
Selectores de Atributos:
Clase
ID
El atributo CLASS te permite aplicar declaraciones a un grupo de
elementos que tienen el mismo valor en el atributo CLASS
Todos los elementos dentro del BODY pueden tener un atributo CLASS
boldtxt { font-weight: bold }
Mira el siguiente fragmento para la implementación real de la Clase
atributo
CSS [Contd…]
<HTML>
<TITLE>Class Attributes</TITLE>
<ESTILO TIPO="text/css">
.boldtxt { font-weight: bold }
.nrmltxt { font-weight: normal }
</ESTILO>
<CUERPO>
<P CLASS= boldtxt >Esta es una línea de texto en negrita</P>
Esta es una línea de texto normal
<P CLASS= boldtxt >Segunda línea de texto en negrita</P>
<P CLASS= nrmltxt >Segunda línea de texto normal</P>
</CUERPO>
</HTML>
CSS [Continuación…]
ID Atributo:
El atributo ID funciona como el atributo CLASS con una importante
diferencia
El valor de un atributo ID debe ser único en todo el documento.
Un selector que incluye un atributo ID se llama selectorID
La sintaxis es: #undltxt { text-decoration: underline }
La sintaxis HTML del elemento en el que deseas usar el ID
el atributo se asemeja al de otros elementos con atributos; por ejemplo:
<P ID=undltxt>Texto subrayado</P>
CSS [Continuado...]
Style Attribute:
The STYLE attribute is actually a replacement for the whole selector
mecanismo
En lugar de tener un valor que se pueda referenciar en un selector (que es
qué ID y CLASE tienen), el valor del atributo STYLE es en realidad
una o más declaraciones CSS.
<P STYLE="text-decoration: underline">Subrayado
texto</P>
Implementación Actual del Atributo de Estilo
<HTML>
<TITLE>Class Attributes</TITLE>
<CUERPO>
<P STYLE="font-weight: bold">Este es un texto en negrita</P>
Este es un texto normal
línea</P>
</BODY>
</HTML>
CSS [Continuación...]
Clases Pseudo de Ancla
Actualmente, solo un tipo de elemento en HTML utiliza pseudo-clases: el A
(ancla) elemento
Una pseudo-clase ancla es un mecanismo por el cual un navegador indica
al usuario el estado de los hipervínculos en un documento que el usuario está visualizando.
A:enlace { color: rojo } /* enlace no visitado */
A:visitado { color: azul } /* enlace visitado */
A:activo { color: lima } /* enlace activo */
CSS [Continuado...]
Conceptos Clave
La herencia si especificas BODY {color: negro} entonces todo
dentro de BODY heredará ese color a menos que haya una declaración contraria
hecho.
Las mayúsculas y minúsculas son importantes. Todo CSS es insensible a las mayúsculas y minúsculas.
Prueba tu hoja de estilo en más de un navegador.
La modularidad de CSS permite una carga de página más rápida
CSS [Contd…]
Ejemplo - Hoja de estilo embebida
CSS [Contd...]
Aquí está el archivo fuente para el programa anterior.
CSS [Continuado...]
Example – Linked Style Sheet
CSS [Contd…]
Aquí está el archivo fuente para el programa anterior.
CSS [Continuación...]
A continuación se muestra el archivo [Link]
CSS [Continuado…]
Enlaces de referencia para CSS
[Link]
[Link]
[Link]
[Link]