Taller Paginas Web

Actividad de página web
Maria Alejandra Flórez soto
Institución educativa san José

Sena
Técnico en sistemas
Grado 11°1jm
Curumani cesar
2020
Te has preguntado ¿qué es una página Web?, ¿sabes que
existe un organismo que vela por el desarrollo de las web?
¿Quieres saber que significa HTML, css
y JavaScript?
Usamos las páginas web todo el tiempo, estas se distinguen al ser
contenedoras de información de cualquier tipo; sinceramente no
tenía conocimiento de que existe un organismo de control que vela
por el desarrollo de la Web, sin embargó, una vez al tener
conocimiento de esa información lo considero necesario para que
así tener una información veraz y cooperativa con nuestras
búsquedas. Por supuesto quiero saber acerca de y aprender
muchas cosas, no soy la mejor con respecto a la tecnología e
informática pero quiero aprender de ella, por ende me esfuerzo.
{HTML}
Realizar un cuadro donde se haga una pequeña
descripción de las etiquetas más utilizadas en HTML
ETIQUETAS Descripción
(HTML)
(Abrimos el head) En la cabecera o «head» se inserta
<head> todo lo referente al title, styles vinculados, scripts, etc.
Representa el contenido principal de un documento
<body> HTML. Solo hay un elemento <body> en un documento.
Representa un contenedor genérico sin ningún
<div> significado especial.
Representa un hiperenlace, enlazando a otro recurso.
<a>
Define el título del documento, el cual se muestra en la
<Title> barra de título del navegador o en las pestañas de
página. Solamente puede contener texto y cualquier
otra etiqueta contenida no será interpretada.
Sirve para mostrar imágenes dentro del contenido.
<IMG>
Define una lista ordenada de artículos.
<OL>, <UL> <ul> Define una lista de artículos sin orden.
Sirve para agrupar texto dentro de un parágrafo. El
<P> contenido es fácil de leer y organizado.
El navegador sabe que viene un salto de línea. Nos
<br> sirve para hacer el texto más leíble.
Define los metadatos que no pueden ser definidos
<meta> usando otro elemento HTML.
Provee información general (metadatos) acerca del
<head> documento, incluyendo su título y enlaces a scripts y
hojas de estilos.
Crea una caja en bloque con el contenido centrado.
<center>
Esta tiene el encabezado más grande en cual se puede
<h1> escribir más texto.
Representa un quiebre temático entre párrafos de una
<hr> sección o articulo o cualquier contenido.
Indica el tamaño, color, o fuente del texto que contiene
<font>
Se usa para insertar contenido de audio en un
<audio> documento HTML
Se utiliza para incrustar vídeos en un documento HTML
<video>
Define una sección en un documento.
<section>
Representa una composición auto-contenida en un
<article> documento, página, una aplicación o en el sitio, que se
destina a distribuir de forma independiente o
reutilizable
Define la cabecera de una página o sección. Usualmente
<header> contiene un logotipo, el título del sitio Web y una tabla
de navegación de contenidos.
Representa la raíz de un documento HTML o XHTML.
<html> Todos los demás elementos deben ser descendientes
de este elemento.
Realizar un cuadro comparativo entre HTML y XHTML.
HTML XHTML
 Tiene un lenguaje  Es una variante de
similar. HTML.
 Sus páginas, diseños e  Ambos lenguaje son
incluso sus documentos descendientes de SGML.
son muy similares.
La sintaxis HTML está La sintaxis XHTML está
inspirada en la norma SGML. basada en la recomendación
 se considera más XML.
flexible ya que esta  Esta se considera más
trata de mostrar la estricta. Al fijarse más
página así se considere es los pequeños
como inválida o con detalles, impone más
errores. restricciones a la hora
 no es necesario que los de agregar valores o
elementos con cualquier clase de
etiqueta de apertura, atributos.
tengan una de cierre.  los atributos deben
tener un valor.
Consultar los tipos de editores de texto que hay en el
mercado, teniendo claras las características de cada uno,
Instale 3 de ellos, realice pruebas y responda ¿Para usted
cual es el que mejor se presta para diseñar páginas web con
HTML5 y CSS3?
Los editores que probé fueron Notepad ++, Atom y Sublime Text.
Sinceramente los que más me gustaron fueron Notepad ++ y Atom,
este en particular es más creativo; sin embargo escogería Notepad
++ ya que es muy fácil de trabajar y completo por ende es muy
cómodo, y la estructura de los textos es muy buena en todo
aspectos.
¿Por qué es importante HTML como lenguaje de marcado a
la creación de estructura y contenido de las páginas web en
la “Web 3.0” o también llamada web semántica?
Es fundamental ya que así se obtendrán mejores resultados a las
búsquedas, es claro que la web semántica que le aporta formalidad
a las páginas, lo que causa menos posibilidades de tener errores,
los usuarios a medida que pase el tiempo, gracias a este lenguaje
de marcado, podrán encontrar exactamente lo que buscan, de una
manera rápida y sencilla.
¿Para usted que tanto ha cambiado la web con el uso de

HTML5 y CSS3?, justificar la respuesta.
El HTML5 y CSS3 ha sido un gran cambio hacia la evolución, siendo
así el presente de la web, ya que la web ha sido transformada, nos
han brindado diversos diseños increíbles e innovadores de páginas
web; que trajeron un sin fin de sitios web creativos y modernos
que consigo ha llegado a que las generaciones interactúen a través
de ellos; en contexto el html5 y css3 llegaron para innovar y dejar
atrás lo obsoleto, no obstante con el paso de los años se encontrar
mejores versiones.
{CSS}
Consultar las propiedades de cada elemento en CSS y dar
un ejemplo de cada uno de ellos.
Font-family: Define la familia tipográfica. Es conveniente poner
una lista de dos o tres tipografías separadas por coma, porque
si el usuario no tiene instalada la tipografía que nosotros
elegimos, el navegador opta por mostrar la siguiente que
debería ser una similar, si tampoco la tiene instalada, mostrará
la tipografía por defecto.
Font-family: “comic Sans MS”, cursive;

Font-size: Define el tamaño de la fuente y el valor se puede
escribir en pixeles o en ems. En este momento se recomienda
usar ems. Los dos son valores relativos, el pixel es un valor
relativo a la resolución de la pantalla, pero el ems es relativo al
tamaño de la fuente definida por el usuario. Si el usuario no
cambió la configuración, el valor por defecto de los textos en
todos los navegadores es de 16px. Entonces 1em = 16px.
font-size: xx-small
Color: Define el color de la tipografía. Los colores se pueden

escribir de 3 formas distintas: con sistema hexadecimal.
Color: #FF0000
Width: Define el ancho de un elemento, el valor se puede escribir

en pixel, ems o porcentaje.
{ width: 180px; }
Max-width o min-width: Definen el ancho máximo o mínimo de un

elemento. Muy importante en sitios adaptables.
{min-width: 75%;}
Height: Define el alto de un elemento, el valor se puede escribir

en pixels, ems o porcentaje.
{ height: 100px; }
Max-height o min-height: Definen el alto máximo o mínimo de un

elemento. Muy importante en sitios adaptables.
(min-height: 150px)
Padding: Es la distancia desde el borde de un elemento hasta su

contenido.
padding-left : 0.
Margin: Es la distancia entre un elemento y otro (desde el borde

de un elemento hacia afuera).
margin: auto;
Border: Define el borde de un elemento, su color, su estilo y

grosor.
border: 1px solid #000;
Background:Define los fondos de un objeto. El fondo puede ser

una imagen o un color. El color puede ser pleno o degradado. La
imagen se puede repetir formando una trama (es lo que ocurre
por defecto) o se puede especificar que no repita y que se
coloque en determinada posición.
background-color: #CCC;
Consultar acerca de los tipos de selectores (selectores de

etiqueta, selectores de clase, selectores de ID, selectores
contextualizados o pseudo-clases, pseudoelemento, selector
universal y selectores de atributo).
 selectores de etiqueta: Este selecciona todos los elementos
de la página cuya etiqueta HTML coincide con el valor del
selector. Para utilizar algunos selectores, solamente es
necesario indicar el nombre de una etiqueta HTML (sin los
caracteres < y >) correspondiente a los elementos que se quieren
seleccionar.
 selectores de clase: Sirve para dar estilo sólo a determinados
elementos marcados con el atributo class y la clase definida, un
consejo para aplicar este selector, es que el nombre debe ser
descriptivo del clase es decir que acción o que es lo que hará
esa clase en específico, es recomendable que solo vaya una sola
acción. Y también para mayor facilidad de búsqueda se puede
agrupar las clases que sean del mismo tipo.
 selectores de ID: Los lenguajes del documento pueden

contener atributos que se declaran como del tipo ID. Lo que hace
especial a un atributo del tipo ID es que dos de tales atributos
no pueden tener el mismo valor; cualquiera sea el lenguaje del
documento, un atributo ID puede ser usado para identificar a su
elemento de manera excluyente. En HTML todos los atributos ID
son denominados "id"; las aplicaciones XML pueden nombrar de
manera diferente a los atributos ID, pero se aplica la misma
restricción.
El atributo ID de un lenguaje de documento le permite a los
autores asignar un identificador a una instancia del elemento
dentro de la estructura del documento. Los selectores ID de CSS
equivalen a una instancia del elemento basado en su
identificador. Un selector ID de CSS contiene un "#" seguido
inmediatamente por el valor de ID.
 selectores contextualizados o pseudo-clases: Son
determinadas palabras clave que se añaden a los electores para
especificar diferentes estados. Si los elementos a los que se
aplican dichos selectores cumplen con estas condiciones o
estados, se aplican los estilos.
 pseudo elemento: Los pseudo elementos se añaden a los
electores, pero, a diferencia de las pseudo clases, los pseudo
elementos no describen un estado sino que permiten añadir
estilos a una parte concreta del documento. Por ejemplo, el
pseudoelemento: first-line selecciona solo la primera línea del
elemento especificado por el selector.
 selector universal: escrito "*", se corresponde con el nombre

de cualquier tipo de elemento. Es equivalente con cualquier
elemento en la estructura del documento. Si el selector universal
no es el único componente de un selector simple, el "*" puede
omitirse.
 selectores de atributo: Estos permiten seleccionar elementos

HTML en función de sus atributos y/o valores de esos atributos.
{W3C}
¿Cuál es la finalidad de la W3C?
El objetivo del W3C es guiar la Web hacia su máximo potencial a
través del desarrollo de protocolos y pautas que aseguren el
crecimiento futuro de la Web. Debajo tratamos importantes
aspectos de este objetivo, los cuales promueven la visión del
W3C de Web Única.
¿Cuál es la pila tecnológica del W3C?
El W3C está transformando la arquitectura de la Web inicial
(especialmente HTML, URI y HTTP) en la arquitectura de la Web
del mañana, una aplicación construida sobre Internet.
Con la imagen anterior podemos ver una visión de la

infraestructura de la Web, el eje sobre el que se desarrolla la
mayoría del trabajo en el W3C. La fundación de los URI, HTTP, XML
y RDF es el soporte del avance en cinco áreas. Los temas de
accesibilidad, internacionalización, independencia de dispositivo,
acceso móvil, y control de calidad están presentes en las
tecnologías del W3C.

Taller Paginas Web

Cargado por

Información del documento

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

Taller Paginas Web

Cargado por

Copyright:

Formatos disponibles

Actividad de página web

Maria Alejandra Flórez soto

Institución educativa san José

Realizar un cuadro comparativo entre HTML y XHTML.

¿Para usted que tanto ha cambiado la web con el uso de

Font-family: “comic Sans MS”, cursive;

Color: Define el color de la tipografía. Los colores se pueden

Width: Define el ancho de un elemento, el valor se puede escribir

Max-width o min-width: Definen el ancho máximo o mínimo de un

Height: Define el alto de un elemento, el valor se puede escribir

Max-height o min-height: Definen el alto máximo o mínimo de un

Padding: Es la distancia desde el borde de un elemento hasta su

Margin: Es la distancia entre un elemento y otro (desde el borde

Border: Define el borde de un elemento, su color, su estilo y

Background:Define los fondos de un objeto. El fondo puede ser

Consultar acerca de los tipos de selectores (selectores de

 selectores de ID: Los lenguajes del documento pueden

 selector universal: escrito "*", se corresponde con el nombre

 selectores de atributo: Estos permiten seleccionar elementos

Con la imagen anterior podemos ver una visión de la

También podría gustarte