Tutorial HTML Css Js v4

Curso complementario: Diseño de sitios WEB
Instructor: Jorge E. Andrade C.
Correo: jandradec@sena.edu.co
SENA Centro Agropecuario La Granja
Test de conocimientos previos
1. La siguiente es una etiqueta HTML

a. ¡html!
b. “html”
c. <html>
d. (html)
2. Actualmente la versión HTML es la:
a. 8
b. 5
c. 3
d. 2
3. En HTML un input es:
a. Una función que abre una ventana para insertar datos.
b. Una caja de texto para insertar datos.
c. Una ventana para mostrar datos.
d. Ninguna de las anteriores.
4. Una página web se divide en cabeza y cuerpo, esto es:
a. Verdadero.
b. Falso.
5. La extensión del archivo donde se crea una página web es la siguiente:
a. .css
b. .jpeg
c. .js
d. Ninguno de los anteriores.
6. El tag <a> permite:
a. Mostrar una imagen.
b. Aumentar el tamaño de la letra.
c. Crear un enlace a otra página.
d. Mostrar un formulario.
7. En HTML la palabra form quiere decir:
a. Formula.
b. Formulario.
c. Información.
d. Ninguna de las anteriores.
8. Para aplicar estilos a una etiqueta se utiliza la propiedad:
a. Style
b. Css
c. Cute
d. Colors
¿Qué es HTML?
El HTML es el lenguaje de marcación principal para la creación de documentos para Internet. Al
conjunto de característica de cada etiqueta y sus diferentes funcionalidades que han evolucionado
en el tiempo se le llama HTML, que a fecha de hoy ya va en la versión 5 y es regulado por el consorcio
internacional W3C.
El Consorcio WWW, en inglés: World Wide Web Consortium (W3C) es un consorcio

internacional que genera recomendaciones y estándares que aseguran el crecimiento de
la World Wide Web a largo plazo.
El lenguaje de marcación para hipertextos o HTML utiliza un conjunto de etiquetas o “tags” para
describir la estructura que tendrán las páginas web. Además del HTML existen otros lenguajes de
marcación entre ellos el XML o eXtensible Markup Language.
Los archivos .html son planos, es decir, pueden ser leídos por un editor de texto. Una vez creado un
archivo html válido este puede ser interpretado por un analizador sintáctico o “parser” que está
incluido en los browsers o navegadores.
¿Qué es una etiqueta o tag HTML?

Representan el conjunto de funcionalidades que se puede implementar en una página web y
cuentan con una sintaxis de escritura; es decir, una forma correcta en que se debe escribir y que
debe cumplir con unos atributos y una interdependencia entre ellas. Es por esto que existen algunas
etiquetas que para su funcionamiento dependen de otras, lo que se conoce como etiquetas padres.
Veamos un ejemplo mostrando lo relacionado con las etiquetas padres mínimas:
Las etiquetas padre mínimas con las que debe cumplir un archivo .HTML son las siguientes:
<html> Indica el inicio del documento y que el documento está escrito en el lenguaje HTML.
<head> Es el encabezado de la página y esta información va orientada al browser.
</head> Indica el fin de la etiqueta head.
<body> Representa el cuerpo del contenido de la información que va a visualizar el usuario.
</body> Indica el fin del cuerpo.
</html> Indica el final del documento HTML.

¿Cómo funciona?
Pasos para crear una página web:
Una página WEB se puede crear con algo sencillo como el Bloc de notas o con algo más
especializado como un IDE (Entorno de desarrollo integrado). En este curso se trabajará con
el IDE Visual Studio Code.
1. Crear una carpeta en el disco duro (cursoWEB).
2. Abrir una nueva ventana en VSCode.
3. Abrir la carpeta con el IDE.
4. Crear un archivo y guardarlo con la extensión .html (uno.html)
Estructura HTML5
Digitar el siguiente código en la página uno.html
Para ver la página en el navegador se abre el archivo desde la carpeta (Doble clic o clic
derecho y Abrir):
Así se ve en el navegador:
Editar la página con el siguiente código (Recuerde leer los comentarios):

En el navegador se ve así:
nav, ul y li
Enlaces o anclas <a>:
Tablas <table>:
Ejercicios de práctica:
• Crear libremente dos páginas para que los enlaces funcionen.
• Copiar y pegar en las páginas nuevas el menú de navegación.
Formularios <forms>:
En la página tres.html crear el siguiente formulario:
¿Qué es CSS3?
Las hojas de estilo en cascada o CSS es un lenguaje para describir la forma como los
documentos estructurados (HTML o XML) serán dibujados en un pantalla, escritos en papel
o leídos en voz alta, etc. (W3C, 2016).
El lenguaje CSS es un componente fundamental en el diseño web cuyo principal objetivo
es describir la presentación que tendrán los elementos estructurales que conforman una
página HTML. Por medio de las reglas definidas en el lenguaje CSS se pueden insertar
bordes, asignar colores al texto, asignar colores al fondo, entre muchos otros.
Reglas o comandos CSS:

CSS suministra un conjunto de reglas que son interpretadas por los navegadores al
momento de dibujar las páginas en la pantalla.
Una regla básica CSS tiene la siguiente estructura:
a) Regla CSS: conjunto compuesto por un selector con una declaración.

b) Selector: indica el elemento HTML sobre el cual operará la regla.
c) Declaraciones: par o conjunto de pares con la estructura propiedad, valor.
d) Propiedad: característica del elemento HTML que se quiere intervenir o afectar.
e) Valor: valor a aplicar a la propiedad.
Ejemplo de estilos en una etiqueta:
Resultado:
Ejemplo de estilos desde la cabecera de la página <head>:

Caja <div>
Según developer.mozilla.org div viende de "division" -división . Sirve para crear
secciones o agrupar contenidos.
Sus etiquetas son: <div> y </div> (ambas obligatorias).
Está definido como: Elemento en bloque.
Crea una caja: En bloque.
Puede contener: Texto, y/o cero o más elementos en bloque o en línea.
Encerrar el fieldset del formulario en una caja <div id=”contenedor”>
En esta ocasión el estilo se aplica al identificador (id) llamado contenedor.

El resultado:
También se pueden aplicar estilos a las clases, pero antes de eso, se definirá una estructura
de cajas a los grupos código, nombre, descripción, genero, fecha y correo. La estructura es
la siguiente:
<div>
<div class=”form-grupo”>
<!—Aquí va el label -->
</div>
<div>
<!—Aquí va el input con class=”control” -->
</div>
</div>
Fíjese que son tres (3) divisores (div). Uno que abarca a los otros dos. A continuación, se
muestra el código solo para los grupos código de producto y nombre de producto, sin
embargo, usted debe completar la estructura de cajas para los grupos descripción, genero,
fecha y correo.
En los estilos quedaría así:

El resultado es el siguiente:
También se pueden modificar elementos que están dentro de otros teniendo en cuenta la
jerarquía. Por ejemplo, dar estilos a todos los label que están seguidos de la clase form-
grupo, se nombra primero la clase .form-grupo, se deja un espacio y después se nombra la
etiqueta label.
Estilos:
Resultado: Fíjese que no se ven afectados los label de los fieldset:

CSS desde un archivo externo
En la carpeta del proyecto, crear una carpeta que se llame css, y en ella crear un archivo
que se llame estilos.css
En ese archivo copiar y pegar todos los estilos que se definieron anteriormente (no es
necesario incluir las etiquetas <style></style>).
En la página tres.html es necesario incluir ese archivo de estilos desde la cabecera de la
página, se logar con la etiqueta <link>.
MAQUETACIÓN
Sin CSS:
Con CSS:
Código de la página:
Código del archivo CSS
EVENTOS EN CSS
:hover
Cuando se pasa el mouse sobre un elemento, se le pueden cambiar los estilos:
:focus
El foco indica el elemento que esta seleccionado en la página (Se recomienda investigar
sobre el DOM):
Menú desplegable:
En el archivo .html modificar la barra de navegación de la siguiente manera:
Estilos para organizar el submenú:

Ocultar y mostrar submenú cuando el mouse pasa sobre los <li> del menú principal:
Menú desplegable (Otro nivel):
En el archivo .html modificar la barra de navegación de la siguiente manera:
Estilos para organizar el subMenuDos:
Resultado:
Ejercicios de práctica:
Maquetar un sitio web con mínimo dos (2) páginas, el tema es libre, debe incluir imágenes,
tablas, listas, un formulario y debe aplicar estilos.
Referencias bibliográficas
https://www.w3schools.com/css/default.asp

Tutorial HTML Css Js v4

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

Tutorial HTML Css Js v4

Cargado por

Copyright:

Formatos disponibles

Curso complementario: Diseño de sitios WEB

Instructor: Jorge E. Andrade C.

SENA Centro Agropecuario La Granja

Test de conocimientos previos

1. La siguiente es una etiqueta HTML

El Consorcio WWW, en inglés: World Wide Web Consortium (W3C) es un consorcio

¿Qué es una etiqueta o tag HTML?

<head> Es el encabezado de la página y esta información va orientada al browser.

</head> Indica el fin de la etiqueta head.

<body> Representa el cuerpo del contenido de la información que va a visualizar el usuario.

</body> Indica el fin del cuerpo.

</html> Indica el final del documento HTML.

Editar la página con el siguiente código (Recuerde leer los comentarios):

Reglas o comandos CSS:

a) Regla CSS: conjunto compuesto por un selector con una declaración.

Ejemplo de estilos desde la cabecera de la página <head>:

Sus etiquetas son: <div> y </div> (ambas obligatorias).

Está definido como: Elemento en bloque.

Crea una caja: En bloque.

Puede contener: Texto, y/o cero o más elementos en bloque o en línea.

Encerrar el fieldset del formulario en una caja <div id=”contenedor”>

En esta ocasión el estilo se aplica al identificador (id) llamado contenedor.

En los estilos quedaría así:

Resultado: Fíjese que no se ven afectados los label de los fieldset:

Estilos para organizar el submenú:

Estilos para organizar el subMenuDos:

También podría gustarte