CONTENIDOS DIGITALES | EDICIÓN NÚM.

HTML,CSS

APRENDAMOS CON HTML

TE DAMOS LA MAS AMABLE BIENVENIDA AL MUNDO DE LA

PROGRAMACION. 5TO BACO

EL ÚNICO MODO DE HACER UN GRAN TRABAJO

ES AMAR LO QUE HACES - STEVE JOBS

.
 Lenguaje de Marcado de Hipertexto (HTML)
DESIGN es el código que se utiliza para estructurar y
desplegar una página web y sus contenidos.
Por ejemplo, sus contenidos podrían ser
APRENDE CON párrafos, una lista con viñetas, o imágenes y

HTML
tablas de datos. Como lo sugiere el título,
este artículo te dará una comprensión
básica de HTML y cúal es su función.

QUE SON LOS ATRIBUTOS DE HTML

ACERCA DE LOS ELEMENTOS
CURSO BASICO CSS
Maquetación grupo No. 5 Contenidos Digitales Los atributos contienen información
adicional acerca del elemento, la cual no
quieres que aparezca en el contenido real
del elemento. Aquí class es el nombre del
atributo y editor-note el valor del atributo.
En este caso, el atributo class permite
darle al elemento un nombre
identificativo, que se puede utilizar luego
para apuntarle al elemento información
de estilo y demás cosas.

El contenido: este es el contenido del elemento,

que en este caso es sólo texto.

El elemento: la etiqueta de apertura, más la

etiqueta de cierre, más el contenido equivale al
elemento.

Las partes principales del elemento son:

HTML no es un lenguaje de La etiqueta de apertura: consiste en el
programación; es un lenguaje de nombre del elemento, encerrado por
marcado que define la estructura paréntesis angulares (< >) de apertura y
de tu contenido. HTML consiste en cierre. Establece dónde comienza o
una serie de elementos que usarás empieza a tener efecto el elemento —en
para encerrar diferentes partes del este caso, dónde es el comienzo del
contenido para que se vean o párrafo—.
comporten de una determinada
manera. Las etiquetas de encierre La etiqueta de cierre: es igual que la
pueden hacer de una palabra o una etiqueta de apertura, excepto que
imagen un hipervínculo a otro sitio, incluye una barra de cierre (/) antes del
se pueden cambiar palabras a nombre de la etiqueta. Establece dónde
cursiva, agrandar o achicar la letra, termina el elemento —en este caso
etc. dónde termina el párrafo—.
.
Photograph by Aubrey Garner KONECT MAGAZINE | 38
 ABRIL 2022 | VOL.II

ATRIBUTACIONES

Instituto profesional de tecnicas comerciales especializadas

iptce

ASPECTOS

INTERESANTES

CSS se trata de un fantástico lenguaje de

estilos que convierte a elementos de
HTML en elegantes y vistosos dentro de
una página web. ¿Estás listo para
profundizar en CSS? ¡Vamos por ello!
pues CSS se aplica sobre HTML.

Recordemos que las páginas que hicimos

con HTML poseen elementos, pero muy
escasos en cuanto a apariencia o diseño,
podemos tener textos, imágenes,
formularios, o cualquier elemento, pero
seguramente nos vendría bien saber
controlar al detalle aspectos como: los
colores, la posición, el tipo de texto, los
bordes, rellenos, márgenes, hasta
animaciones, etc. De dichos elementos
Para que entiendas, con CSS seleccionaremos el elemento HTML que
HTML. Pues para ello nos serviremos de queremos maquetar o darle estilo, luego escribiremos las instrucciones
las virtudes de CSS, el lenguaje de o declaraciones para definir las propiedades, características o estilos de
diseños por excelencia. dicho elemento, estas propiedades lo definiremos mediante un valor.
Por ejemplo, imagina que queremos dar un color de fondo verde a un
elemento de párrafo.
Para ello tenemos que hacer lo siguiente:
ASPECTOS A CONOCER
1.Seleccionamos el párrafo.
¿Qué es CSS?
CSS por sus siglas en inglés (Cascading Style 2.Definimos la propiedad, en este caso el color de fondo (background-
Sheets) “hojas de estilo en cascada” Es el color).
lenguaje que define el estilo de los elementos
3.Definimos el valor para la propiedad especificada, en este caso el
de un documento HTML, por lo tanto es el
lenguaje con la cual controlaremos el diseño, valor será el color verde (green).
la apariencia de nuestras páginas web hechas
con HTML.
El término cascada hace referencia a la
manera en la que CSS trabaja, pues aplica los
estilos sobre otro.

Escribir nuestro primer código CSS

Recordemos que HTML nos permite crear la
estructura de una página web y de alguna
manera podíamos poner estilos a nuestros
elementos HTML. Pero como hemos visto es
bastante limitado y no es muy práctico poner
estilos en un documento HTML utilizando los
atributos.
Pues bien para ello tenemos el lenguaje de
estilos CSS, este nos permitirá manejar la
apariencia de nuestros elementos HTML de
una manera muy simple.
 ABRIL 2022 | VOL.II
INFORMACION UTIL
Text & Photos by Benjamin Shah

Note la sintaxis, las llaves, los dos puntos, el punto y coma son
signos importantes ya forman parte de la sintaxis o forma de
escribir código CSS. Todo ello lo veremos con detenimiento en las RESULTADO
lecciones que continúan, este solo es un pequeño ejemplo.
Muy sencillo ¿verdad? Simplemente seleccionamos el elemento,
definimos la propiedad y finalmente su valor.
DE UNAS
Cómo controla CSS la apariencia de páginas HTML
BUENAS
Existen muchas propiedades como: color, alineación, tamaño, tipo
de letra, bordes, tipos de borde, márgenes, etc. Realmente hay ACTIVIDADES
muchísimos, para hacer de ellas lo que nuestra creatividad
alcance y lo veremos durante el curso.
También están los valores para dichas propiedades como por
‘ CSS en un documento CSS externo
ejemplo para alineación puede ser a la izquierda, al centro, a la Esta es sin duda la forma más recomendable de
derecha, para tipo de letra puede ser: Helvética, Verdana, Lato, aplicar estilos a documentos HTML, consiste en
etc. crear un documento CSS muy aparte y guardarlo
Aprender CSS básicamente consiste en comprender la sintaxis, la con la extensión. CSS, por ejemplo:

forma en la que se escriben las instrucciones y cuáles son las midocumento.css

En el documento CSS se encuentren todos los
características que podemos controlar con CSS
códigos CSS que determinarán el estilo de todos
los elementos HTML apuntados.
Desde un documento HTML llamaremos al
documento CSS para que se haga presente y
aplique los estilos que hemos escrito en dicho
documento CSS.
Para realizar la invocación, emplearemos la
etiqueta <link> dentro de la etiqueta <head> del
documento HTML y mediante el atributo rel y
href invocamos al documento CSS mediante su
nombre. Veamos la sintaxis:El atributo REL
define la relación entre el documento HTML y el
documento CSS invocado, el valor StyleSheet
indica que es un estilo preferido, mientras que
rel="Alternate Stylesheet" define un estilo .

Cómo usar CSS en HTML y ejemplos Esta forma de utilizar CSS es la más básica y
Ahora aprenderemos a utilizar CSS en muy conocida, de hecho, de alguna manera
HTML, existen varias formas de aplicar ya lo habíamos utilizado en el curso de
estilos CSS a nuestros elementos hechos HTML; básicamente consiste en indicar los
con código HTML, todo ello abordaremos estilos de un elemento HTML dentro de su
en esta lección y además estableceremos etiqueta de apertura, mediante un atributo
cuándo, por qué y dónde emplear una u HTML.
otra forma ¿Listos? ¡Pues vamos a ello! El atributo STYLE es la mejor opción para
colocar estilos, dentro de su valor irán las
propiedades y sus respectivos valores CSS.
Cómo se puede utilizar CSS
De esta manera se aplica un estilo
Existen tres formas bastante conocidas
determinado solo al elemento de la
de emplear CSS para maquetar una
etiqueta, en este caso color de letra para el
página HTML y son las siguientes:
párrafo será rojo. CSS incrustado en el
1.Aplicar CSS en línea HTML mediante documento HTML
atributos. Otra manera fantástica de usar CSS en
2.Incrustar el código CSS en una etiqueta documento HTML es incrustando el código
<style> dentro del documento HTML. CSS dentro de ella, de tal manera que los
3.Crear un documento CSS externo. estilos que deseamos aplicar afectarán no
solo a un elemento como en el caso
anterior, sino serán aplicados a toda la
página.
 GRUPO NO.5

DATOS SOBRE

CREADORES

ABRIL 2022

Kevin Argueta, clave 04

Hillary Chávez, clave 09

Steve Sosa, clave 21

Allison Zapata, clave 23