Desarollohtml5 CSS

SENA REGIONAL CAUCA Evaluación
CENTRO DE TELEINFORMATICA Y PRODUCCION Proyecto

INDUSTRIAL
Total
ANALIZAR LOS REQUISITOS DEL CLIENTE PARA CONSTRUIR
EL SISTEMA DE INFORMACION
ACTIVIDAD DE CONOCIMIENTO
2. Aplicación y uso de las etiquetas HTML5 – CSS3

1. Comprueba tus conocimientos en cuanto al manejo del etiquetado Html5 – CSS3
Responde las siguientes preguntas (las preguntas que incluyen desarrollo realizarlo en sublime para
comprobar su funcionamiento luego depositar (pegar) el código dentro de actividad.
a. ¿Por qué es conveniente incluir la declaración de DOCTYPE en la página HTML?
El doctype es la declaración de tipo de documento. En otras palabras, el doctype nos sirve

para indicar que nuestro documento está escrito siguiendo la estructura determinada por un
DTD concreto.
Por un lado tenemos el doctype que es la forma de declarar el tipo de documento, en el que
hemos puesto la URL para acceder al DTD, o sea, al fichero en el cual se define la
estructura del tipo de documento.
Es muy habitual en los lenguajes de marcado. Cualquiera puede crear un DTD, aunque
cuando trabajamos con tecnologías públicas y muy extendidas como es el caso del HTML,
XHTML, XML, etc. existen agrupaciones que se dedican a definir los estándares de los
lenguajes. Es por eso que existe la W3C y sus diferentes DTD publicados, que utilizamos a
modo de estándar tanto los programadores como los encargados de crear los navegadores.
b. Construya una tabla con 4 columnas y 3 filas utilizando las etiquetas de tabla
c.¿Para qué sirve el atributo 'class'?
Los atributos class es una lista de las clases del elemento separada por espacios. Las
clases permiten a CSS y Javascript seleccionar y acceder a elementos específicos a
través de los selectores de clase o funciones como el método. Supongamos que tenemos
dos etiquetas iguales de tipo <button>, correspondientes a objetos html de tipo botón. Le
añadimos una clase a uno de los botones para diferenciarlo de un botón normal. A partir de ese
momento el botón que tiene el atributo class informado pasa a ser un objeto de esa clase. Puede
haber cualquier número de elementos de una clase, incluso elementos diferentes que queramos
que compartan las propiedades de esa clase.
c. ¿Cuál es la diferencia al utilizar un etiqueta div y una etiqueta span?
La etiqueta <div> viene de división, prácticamente funciona de contenedor de bloque,

es decir puede contener uno o varios elementos HTML dentro de ella, es bastante
utilizada para agrupar varios elementos que luego serán apuntados con CSS con la
finalidad de dar un estilo adecuado a dicho grupo, o también puede servir para organizar
mejor nuestra página web
.
La etiqueta <spam> también funciona como un contenedor pero en este caso será un
contenedor en línea. Por ejemplo para destacar una palabra o expresión dentro de un
párrafo utilizaremos la etiqueta <span> para encerrar esa palabra o expresión y luego
ponerle un estilo mediante un atributo. O también podemos ponerle un identificador, ya
sea id o class para luego apuntarlo y maquetarlo con CSS.
La principal diferencia entre las etiquetas <div> y <span> es que en el primer caso se

define como un elemento en bloque y en la segunda como un elemento en línea. A
continuación veamos con ejemplos de código HTML cómo se comportan.
Permite ordenar y agrupar el contenido.
d. Si incluimos una etiqueta de este tipo en nuestra página HTML, ¿qué queremos que haga el
navegador?: <img src="../icono.gif" />
Al incluir esta etiqueta nos permite colocar imágenes con la descripción y ubicación. Para incluir
imágenes en el contenido de una página utilizaremos la etiqueta <img>, que es una etiqueta
muy sencilla, que dispone de varios atributos para modificar (los atributos src y alt son siempre
obligatorios):
e. Construya una lista ordena de 5 lenguajes de programación utilizando las etiquetas

f. ¿Cómo se incluye un comentario nuestro en una página HTML para que no se interprete por el
navegador?
Un comentario en una página HTM se incluye con la
<--comentario-->
/*comentario*/
g. Realice un ejemplo para los tipo de selector CSS: Selector de tipo, selector ID, selector de clase
h. Inserte un video, un audio utilizando archivos locales y luego utilizando el url
i. Se puede argumentar que las etiquetas section y article realizan la misma función de estructura
dentro de una página web?
La etiqueta section define las secciones de un documento, como capítulos encabezados, pies de
páginas o cualquier otra seccion del documento.
La etiqueta article específica contenido independiente o autónomo.

Un articulo debe tener sentido por sí mismo y debería ser posible distribuirlo independientemente
del resto del sitio
Aplicando las etiquetas HTML 5, elementos para texto, tipos de enlaces, CSS
A partir del siguiente documento construye la página principal home page (index.html)
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Cursos gratis</title>
<link rel="stylesheet" type="text/css" href="" />
</head>
<body>
<h1>Curso de diseño Web</h1>
<p>La primera web en español sobre cursos de informática gratis on-line</p>
<h2>Cursos disponibles 2020</h2>
<p>Diseño web HTML5 y CSS3</p>
<h2>Diseño web con Adobe </h2>
<p>Diseño web con breakers </p>
<hr>
<p><b>Construcción de prototipos</b></p>
</body>
</html>
A .Ubicar dentro del documento al menos 4 etiquetas estructurales de acuerdo a HTML5(nav – article, etc),
ubicar dentro otras etiquetas de encabezado, párrafo, énfasis de texto (rellenar utilizando párrafos y Lorem
ipsum)
a. Utilizando los estilos CSS aplicar un color utilizando la notación hexadecimal a las etiquetas de
encabezado h1, h2, utilizando la asignación de colores por keyword
b. Crear una página web nueva (con la temática de JavaScript guardarla con el nombre
javascript.html)con los elementos estructurales básicos del HTML que tenga al menos 3
encabezados (h1,h2.. acerca de JavaScript), texto (rellenar utilizando párrafos y Lorem ipsum)
c. Crear los enlaces respectivos de javascript.html a index.html y viceversa, crear enlaces a una
pagina web externa, dentro de la misma página, a un correo y a un documento .
d. Insertar una lista desordenada de 4 frameworks que se hayan realizado con JavaScript, ubicarle
haciendo uso de color a través de keywords el color gray a la lista.
e. Utilizando los selectores CSS de tipo asignar color, fuente, tamaño, interlineado a los párrafos de
las páginas web.
f. Insertar en la página index.html imágenes(2), video(1), audio(1)

g. Utilizando el elemento background ubicar un color a uno(s) párrafos de la pagina
2. Utilizando los siguientes enlaces de codepen.io realizar los ejercicios propuestos tomar un pantallazo
de la ejecución de la actividad final
a. https://codepen.io/devcodela/pen/mymPrb utilizando el selector universal crear una directiva para
las etiquetas h1,p utilizando el color #2D402F para h1 y el color #5B805E para párrafo
b. https://codepen.io/devcodela/pen/vEmGWY cambiar el color a las pseudoclases link y visited

utilizando la notación de color RGB
c. https://codepen.io/devcodela/pen/zxwqZL Crear un selector por ID que involucre las propiedades
para párrafo #354A78, Times New Roman, 16
d. https://codepen.io/devcodela/pen/RNgPRO Cambiar las propiedades pulgadas a: height: 30px;

font-family: Arial; font-size: 20px; overflow: visible;
Centímetros height: 20px; font-family: Comics San MS; font-size: 16px; overflow: visible;
3. Ingresa a la siguiente dirección: https://es.educaplay.com/recursos-educativos/2184160-
examen_html5_y_css3.html Resuelve el Test planteado en educaplay; recuerda al final del test hay
una retroalimentación del mismo. Compartir pantallazo de tu primer Test.
Sonia montero

Desarollohtml5 CSS

Cargado por

Copyright:

Formatos disponibles

Desarollohtml5 CSS

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

Desarollohtml5 CSS

Cargado por

Copyright:

Formatos disponibles

SENA REGIONAL CAUCA Evaluación

CENTRO DE TELEINFORMATICA Y PRODUCCION Proyecto

2. Aplicación y uso de las etiquetas HTML5 – CSS3

a. ¿Por qué es conveniente incluir la declaración de DOCTYPE en la página HTML?

El doctype es la declaración de tipo de documento. En otras palabras, el doctype nos sirve

c. ¿Cuál es la diferencia al utilizar un etiqueta div y una etiqueta span?

La etiqueta <div> viene de división, prácticamente funciona de contenedor de bloque,

La principal diferencia entre las etiquetas <div> y <span> es que en el primer caso se

e. Construya una lista ordena de 5 lenguajes de programación utilizando las etiquetas

h. Inserte un video, un audio utilizando archivos locales y luego utilizando el url

La etiqueta article específica contenido independiente o autónomo.

<meta charset="utf-8" />

<link rel="stylesheet" type="text/css" href="" />

<h1>Curso de diseño Web</h1>

<p>La primera web en español sobre cursos de informática gratis on-line</p>

<h2>Cursos disponibles 2020</h2>

<p>Diseño web HTML5 y CSS3</p>

<h2>Diseño web con Adobe </h2>

<p>Diseño web con breakers </p>

f. Insertar en la página index.html imágenes(2), video(1), audio(1)

b. https://codepen.io/devcodela/pen/vEmGWY cambiar el color a las pseudoclases link y visited

d. https://codepen.io/devcodela/pen/RNgPRO Cambiar las propiedades pulgadas a: height: 30px;

También podría gustarte