Scribd
Cargar
21 vistas43 páginas

Equipo3 HTML

El documento indica que el entrenamiento se ha realizado con datos hasta octubre de 2023. Esto sugiere que la información posterior a esa fecha no está incluida en el modelo. Por lo tanto, cualquier desarrollo o cambio relevante después de esa fecha no será reflejado en las respuestas generadas.

Cargado por

KukinGames 530
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
21 vistas43 páginas

Equipo3 HTML

El documento indica que el entrenamiento se ha realizado con datos hasta octubre de 2023. Esto sugiere que la información posterior a esa fecha no está incluida en el modelo. Por lo tanto, cualquier desarrollo o cambio relevante después de esa fecha no será reflejado en las respuestas generadas.

Cargado por

KukinGames 530
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 43

UNIVERSIDAD AUTÓNOMA DE NUEVO LEÓN

FACULTAD DE INGENIERÍA MECÁNICA Y ELÉCTRICA


Materia: Programación Web
Docente: Lilia Lizeth Santos Lopez
HTML y CSS

Daniela Maldonado Trejo 2127918 ITS

Braulio Vega Gomez 2177886 ITS

Joel Guerrero Romero 2097206 ITS

Galia Mejia Hernandez 2008015 IAS

Alfonso Uriel Rodriguez Ruiz 2177756 ITS

Joaquin Soto Rodriguez 2041081 ITS


Programación Web Buscar

HTML
Equipo 3
Cuál es la
HTML en español se traduce como
historia de Lenguaje Marcado de Texto,
Además, permite, por medio de las
HTML? etiquetas, establecer ciertas
relaciones, hipervínculos y otras
modificaciones.
Los orígenes de este código se remontan al año

la historia de 1980 en la Organización Europea para la


Investigación Nuclear (CERN), donde el físico
Tim Berners-Lee propuso un sistema de

de HTML “hipertexto” con el cual compartir documentos


más fácilmente. En el año de 1991 se publicaría
el primer documento formal sobre el HTML
llamado “HTML Tags”. Desde entonces se
crearon nuevas versiones que se adaptaran al
constante cambio del internet, la última de
ellas llegó en el año de 2014 con su versión 5.0.
Este lenguaje ha sido fundamental en la
programación web y en el desarrollo web de
sitios modernos.
En 1991 se publica formalmente, bajo el
nombre de “HTML Tags”, el primer
documento con la descripción de HTML.
HTML 1 En 1993 se propone oficialmente que
HTML sea un estándar. Esta propuesta la
lleva a cabo el IETF (Internet Engineering
Task Force). Ninguna de las dos primeras
versiones (HTML y HTML+) consiguió ser el
estándar oficial, pero los avances
logrados por estas fueron muy
significativos.
HTML 3
HTML 2

A finales de 1993 se empieza a A partir de 1996, los estándares de


trabajar en la segunda versión de HTML los publica el organismo W3C.
HTML, la llamada HTML+. En un HTML 3.0 apareció, en forma de
principio la idea era diseñar un borrador, en marzo de 1995. Esta
superconjunto de HTML que versión contenía nuevas
evolucionase poco a poco desde la capacidades, como facilidades para
primera versión. La primera propuesta hacer tablas, funciones para que el
oficial de HTML+ recibió la texto fluyese alrededor de las
nomenclatura de versión 2 para figuras o mostrar elementos
distinguirla de otras propuestas matemáticos complejos.
anteriores no oficiales.
HTML 4 HTML 5

En 1997 aparece, por recomendación del fue oficialmente publicado como una
W3C, HTML 4.0, una versión con recomendación del W3C (World Wide
novedades importantes, como las hojas Web Consortium) en octubre de 2014.
de estilos CSS, la mejora de la Sin embargo, su desarrollo comenzó
accesibilidad de las páginas diseñadas, mucho antes, en 2004, y ha ido
tablas complejas, la posibilidad de incluir evolucionando a lo largo de los años con
pequeños programas o scripts y mejoras varias actualizaciones y mejoras..En
en los formularios. 2014 ,publicó la quinta revisión del
En 1999 aparece la última versión oficial estándar HTML que se está actualizando
de HTML: HTML 4.01, una revisión de la hasta hoy en día.
propuesta anterior en la que no se
incluyen novedades importantes.
Componentes
Un documento de HTML está
compuesto por diferentes
elementos que, en conjunto, lo
del HTML dotan de sentido global. Hablamos
de las etiquetas, también
denominadas elementos, con las
que puedes organizar la estructura
de tu documento HTML en
diferentes párrafos, secciones,
encabezados o divisiones.
Estructura
Html
Qué incluye la estructura HTML? Buscar

El HTML debe tener una estructura con la finalidad de que la


página web tenga un orden en sus elementos y conseguir la
visión establecida desde un inicio.
La estructura hace uso de etiquetas y atributos predefinidos
para indicarle al navegador cómo mostrar su contenido; es
decir, en qué formato, estilo, tamaño de fuente, imágenes o
videos se debe configurar.
La estructura HTML de una página web se compone de las
etiquetas <html>, que indica el comienzo de la página;
Salvar
<head>, que contiene información más descriptiva sobre el
sitio; y <body>, que conforma todos los elementos visibles de
la página. Cancelar
Qué incluye la estructura HTML? Buscar

Es importante recalcar que el lenguaje HTML no es un


lenguaje de programación, sino de marcado. Esto significa
que solo sirve para crear páginas web estáticas. Sin embargo,
sí es posible combinar este lenguaje con otros para
desarrollar sitios mucho más dinámicos y atractivos.

Salvar

Cancelar
Etiquetas
<head> </head> <body> </body>
<!DOCTYPE html> <html> </html>
Es la etiqueta Es la etiqueta
se utiliza para Es el elemento
principal que para desarrollar
indicar la versión raíz y es el más
incluye todo el cuerpo de
importante1 dentro
HTML 5.01(la usada metadatos; son la página web y
de la2estructura 3 5
actualmente). atributos que no engloba datos
HTML, pues es el
se muestran al desde textos
que contendrá el
usuario, solo hasta enlaces.
resto de las
describen
etiquetas de
referencias de la
atributos de la
página, por
página web.
ejemplo, título o
página CSS.
Etiquetas dentro de la etiqueta <Body>

<h1>, <h2>, <h3>, <p> <div> <span>


<h4>, <h5>, <h6> Sirve para indicar Significa Su traducción es
la apertura y «división» y «abarcar» y sirve
Representan las
cierre de un funciona para para aplicar
etiquetas
1 de 1
párrafo. crear secciones o estilo al texto o
títulos. 2 3 agrupar agrupar 5
contenidos elementos en
línea.
Etiquetas dentro de la etiqueta <Body>

<b>, <i>, <u> <a> <form> <label>


Para agregar un Permite agregar Funciona para Representa la
un vínculo o insertar un etiqueta para un
texto en negritas,
enlace. formulario. elemento en una
cursiva
1 y 1 interfaz de
subrayado, 2 3 usuario. 5
correspondientem
ente.
Etiquetas dentro de la etiqueta <Body>

<img>, <audio>, <video>, <input>


<iframe> Crea controles
Dentro de la estructura interactivos para
HTML estas etiquetas formularios, con el
1 1
sirven para insertar una
3
fin de recibir datos 5
imagen, audio, video o del usuario.
incrustar un documento
HTML

Cada etiqueta, debe tener una apertura y un cierre;


de lo contrario, el código marcará error y los
cambios no se visualizarán correctamente en la
página web.
HTML SEMANTICO

El HTML semántico se
refiere al uso de <header>, <nav>, <article>,
etiquetas que tienen un <section> y <footer>
significado claro sobre
el contenido que
contienen.
Formularios
Etiquetas: Validación
<input>, <textarea>,
<select>, <button> HTML5:
Atributos: required, min, max,
type, name, value, y pattern, y type
placeholder
Es una pieza de código que permite a dos aplicaciones
API comunicarse entre sí para compartir información y
funcionalidades.

Más usadas HTML5


-API de
XMLHttpRequest Geolocalización
(asincrona) -API de
History API Almacenamiento
Web
Cookies -API de Arrastrar y
Timers Soltar (Drag and
Drop)
Buenas Prácticas en HTML

-Uso Correcto de
Encabezados(h1,h2...h6)
-Optimización de Imágenes(alt)
-Minimización del Código
-Código claro
EJEMPLO
DINAMICA
¡Gracias!
Referencias Berners-Lee, T. (1991). HTML Tags. CERN.
Internet Engineering Task Force (IETF). (1993). Propuesta para estandarizar HTML.
World Wide Web Consortium (W3C). (1997). Recomendación de HTML 4.0. Recuperado de https://
www.w3.org/TR/REC-html40/
World Wide Web Consortium (W3C). (1996-2014). Publicaciones y actualizaciones del estándar HTML.
Recuperado de https://www.w3.org/standards/techs/html
Raggett, D. (1995). HTML 3.0: Introducción de nuevas capacidades. World Wide Web Consortium.
Recuperado de https://www.w3.org/TR/WD-html30-970107
World Wide Web Consortium (W3C). (2014). Recomendación de HTML 5.0. Recuperado de https://
www.w3.org/TR/html5/
World Wide Web Consortium (W3C). (n.d.). HTML: Definición y estructura. Recuperado de https://
www.w3.org/MarkUp/
World Wide Web Consortium (W3C). (n.d.). Guía sobre etiquetas y atributos en HTML. Recuperado de
https://www.w3.org/MarkUp/Guide/
World Wide Web Consortium (W3C). (n.d.). HTML Semántico: Uso y recomendaciones. Recuperado de
https://www.w3.org/TR/html5/dom.html
Qué incluye la estructura HTML? Buscar

CSS es un lenguaje de hojas de estilos creado para modificar la apariencia de los


documentos HTML y XHTML. Separa el contenido de su presentación, creando
"documentos semánticos".
Las hojas de estilo aparecieron poco después del lenguaje de etiquetas SGML,
alrededor del año 1970. Desde la creación de SGML, se vio la necesidad de crear un
formato que permitiera aplicar de forma consistente múltiples estilos a los
documentos electrónicos.
El organismo W3C propuso la creación de lenguaje de estilos especifico para el
lenguaje HTML, con nueve propuestas en total; finalmente se eligieron CHSS y SSP
como candidatos principales a tomar en cuenta. Entre finales de 1994 y 1995 Lie y
Bos crearon una propuesta juntos para definir un nuevo lenguaje que tomaba lo
mejor de ambos candidatos y lo llamaron CSS (Cascading Style Sheets).
Una de las principales características de CSS es su gran
CSS flexibilidad y las distintas opciones que ofrece para realizar
una misma tarea, contando con 3 opciones distintas para
integrarlo dentro de un documento HTML.

CSS Interno (Hojas de Estilo Incrustadas): Son


aquellas que se insertan directamente en el
documento HTML mediante la etiqueta <style>.
La declaración debe colocarse dentro de la
sección <head>. Este estilo no es muy
recomendable ya que La página tardará más
en cargarse debido a que todo está en la
misma página y no será posible utilizar el estilo
CSS en otras páginas que no sean en la que se
encuentra el código.
CSS a HTML con una hoja de estilos
externa: Con una hoja CSS externa, se
puede cambiar el aspecto de toda una
página web completa solo agregando
un archivo con extensión .css
En cada documento HTML que tenga
nuestro sitio, debe estar incluido el
archivo css dentro de la etiqueta head
esto agregara todas las reglas
definidas en la hoja de estilos.
CSS en HTML con estilos en línea (inline
styles): También se puede incluir código
CSS dentro del código de las etiquetas
HTML, estos se conocen como los estilos
inline para agregar estilos solo a una
etiqueta HTML.
Para usar estilos inline agregas un
atributo style="" a la etiqueta a la cual
deseas cambiarle el o los estilos.
Selectores
Permiten seleccionar de forma muy precisa elementos individuales o conjuntos
de elementos dentro de una página web.

Selector Universal: Se utiliza Selector de tipo o etiqueta: Selecciona


para seleccionar todos los todos los elementos de la página cuya
elementos de una pagina, se etiqueta HTML coincide con el valor del
indica mediante un asterisco selector. Para utilizar este selector, es
(*). A pesar de su sencillez, no necesario indicar el nombre de una
se utiliza habitualmente, ya etiqueta HTML (sin los caracteres < y >)
que es difícil que un mismo que corresponde a los elementos que se
estilo se pueda aplicar a todos quieren seleccionar.
los elementos de una página.
Selectores

Selector de clase: Se prefija el valor


Selector de ID: Igual al selector de
del atributo class con un punto (.)
clase, solo que se utiliza (#) en
antes de el nombre de la clase
lugar del punto antes del id
usada en el documento HTML.
asignado en el documento HTML.
Unidades de Medida y Colores

CSS cuenta con múltiples unidades de medición que este puede emplear,
como píxeles, em, rem, y porcentaje. Estas medidas pueden ser relativas y
absolutas.

Los colores en CSS se pueden definir en múltiples formas distintas, ya sea


mediante nombres de color, valores hexadecimales, RGB o HSL,
proporcionando una base sólida para manipular la apariencia de los
elementos en términos de tamaño y color. Los colores siempre son un
aspecto importante en las paginas web, y el saber dominarlos nos permitirá
hacer que los usuarios se sientan cómodos en nuestros sitios.
Modelo de Cajas (Box Model) en CSS
El Modelo de Cajas en CSS define cómo se representan y personalizan los elementos en una
página web, tratándolos como cajas rectangulares.

Este modelo permite ajustar el tamaño, márgenes, relleno, y bordes de las cajas, así como
modificar su disposición y visibilidad en la página.

Dominar el Modelo de Cajas es esencial para un diseño web efectivo, especialmente al


trabajar con estructuras complejas y elementos anidados.
Estilización de Texto

CSS ofrece diversas propiedades para estilizar texto, como cambiar su color y
definir la fuente con font-family.

Esta propiedad permite usar nombres de fuentes específicas como "Arial" o


nombres genéricos como serif o sans-serif. Dado que las fuentes deben estar
instaladas en el dispositivo del usuario, es recomendable proporcionar alternativas
para mantener la coherencia en el diseño.
Listas en CSS
CSS permite personalizar las listas, cambiando las viñetas de listas no ordenadas y la
numeración de listas ordenadas.

La propiedad list-style-type controla el tipo de viñeta, que puede ser gráfico (círculo,
cuadrado), numérico (decimal, romano) o alfabético (latin, griego).

Además, se puede eliminar completamente la viñeta con el valor none, lo que es útil para menús
de navegación. Las listas son esenciales para organizar enlaces e índices en una página web.
Layout en CSS

Los diseños web tradicionales incluyen cabecera, menú, contenido y pie de página, que antes se organizaban
con tablas HTML.

Con CSS, es posible crear estos layouts sin tablas, ofreciendo ventajas como un mantenimiento más sencillo,
mayor accesibilidad, mejor velocidad de carga, y un código más semántico.

Mientras que las tablas son adecuadas solo para datos tabulares, CSS proporciona una estructura más limpia y
eficiente para el diseño de páginas web.
CSS es fundamental para la creación de sitios web atractivos y accesibles.

Evolución constante de CSS con nuevas características y técnicas que permiten


mayor control y creatividad en el diseño web.
EJEMPLO....

También podría gustarte