Intro HTML y CSS - Compressed

Tema
HTML y CSS
Semana 3
HTML
HyperText Markup Language
Semana 3
HTML
Es un lenguaje de marcado que se utiliza para crear la
estructura y el contenido de una página web.
Este consiste en una serie de elementos que se usarán para

encerrar diferentes partes del contenido para que se vean o
se comporten de una determinada manera.
Semana 3
Antes de ver el código usado para construir sitios
web es importante tener en cuenta las diferentes
formas en que las personas acceden a la web y
aclarar alguna terminología.
Browsers Web servers
Lectores de pantalla Dispositivos
Semana 3
Browsers Las personas acceden a los sitios web utilizando software llamado
navegador web. Los ejemplos populares incluyen Firefox, Internet Explorer,
Safari, Chrome y Ópera.
Web servers Cuando le pides a tu navegador una página web, se envía la solicitud a
través de Internet a un lugar especial computadora conocida como web
servidor que aloja el sitio web.
Dispositivos Los usuarios hoy en día están accediendo a sitios web en una gama cada vez
mayor de dispositivos incluyendo computadoras de escritorio, portátiles,
tabletas y teléfonos móviles. Es importante recuerda que varios dispositivos
tienen diferentes tamaños de pantalla y algunos tienen conexiones más rápidas a
la web que otros.
Lectores
Los lectores de pantalla son programas que lee el contenido de una pantalla
de la computadora a un usuario. Ellos son comúnmente utilizados por
de pantalla personas con deficiencias visuales.
Semana 3
Estructura
La mayor parte del texto estructurado está
compuesto por encabezados y párrafos,
independientemente de si lees una historia, un
periódico, un libro de texto, una revista, etc.
Semana 3
Estructura Las etiquetas (tags) actúan como contenedores.
Te indican sobre la información que se encuentra
entre sus etiquetas de apertura y cierre.
Código Descripción
<html>
La etiqueta de apertura <html> indica que cualquier cosa entre ella y

una etiqueta de cierre </html> es código HTML.
<body>
La etiqueta <body> indica que cualquier cosa entre ella y la etiqueta </
body> de cierre debe mostrarse dentro de la ventana principal del
navegador.
<h1>Título principal</h1>
<p>Lorem ipsum dolor sit amet, Las palabras entre <h1> y </h1> son un encabezado principal.
consectetur adipiscing elit, sed do

eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
Debe aparecer un párrafo de texto entre estas etiquetas <p> y </p>.
La etiqueta de cierre </body> indica el final de lo que debería aparecer

</body>
en la ventana principal del navegador
</html> La etiqueta de cierre </html> indica que es el final del código HTML.
Semana 3
Etiquetas
<p> </p>
Atributo/ elemento Atributo/ elemento
Bracket izquierdo Bracket derecho Bracket izquierdo Bracket derecho
Etiqueta de apertura Etiqueta de cierre
Semana 3
Estructura básica
Código
<! DOCTYPE html>
<html>
<head> (Información técnica para el navegador)
<meta charset="utf-8">
<title>Mi página web</title>
<link/>
</head>
<body> (Contenido que aparecerá en la página web)
<h1>Título</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</body>
</html>
Semana 3
+ Etiquetas y elementos
Títulos
<h1>, <h2>, <h3>, Permite agregar un <a href=””>
<h4>, <h5>, <h6>
vínculo o enlace
Párrafo
«ancla url»
<p>
Negritas, cursiva y <b>, <i>, <u>
Botón
<button>
subrayado
Negritas, cursiva
<strong>, <em>
Image url <img src=””>
Enter
<br>
<hr>
Línea
Lista (bullets)
<ul> <li>
Lista (enumerada) <ol> <li>
Semana 3
Ejercicio en clase
Semana 3
CSS
De las siglas en inglés Cascading Style
Sheets (Hojas de Estilo en Cascada)
Es el código que usas para dar

estilo a tu página web.
Permite aplicar estilos de manera

selectiva a elementos en
documentos HTML.
Semana 3
CSS funciona asociando reglas con elementos HTML. Estas
reglas rigen cómo se debe mostrar el contenido de los
elementos especificados. Una regla CSS es que contiene dos
partes: un selector y una declaración.
Selector Indica a que elemento
p {
la regla debe aplicarse.
font-family: Arial;
} Declaración Indica cómo de ser el
estilo.
Semana 3
Las declaraciones css se encuentran entre corchetes y cada
una se compone de dos partes: una propiedad y un valor,
separados por dos puntos. Puede especificar varias
propiedades en una declaración, cada una separada por un
punto y coma.
Propiedad:
Indica el aspecto del
h1 {
elemento
font-family: Arial;
color: #fff000;
} Valores: Especifique la
Propiedad Valor configuración que desea
utilizar para las propiedades
elegidas
Semana 3
Propiedades
color
Color para texto
padding
Relleno que se crea
padding-top
alrededor del contenido
font-size
Tamaño del texto
padding-bottom
padding-left
font-family
Familia tipográfica
padding-right
background-color
Color de fondo
margins
Los márgenes se utilizan
margin-top
para crear espacio
border
Bordes
margin-bottom
alrededor de los
elementos, fuera de los
margin-left
bordes definidos.
width Ancho margin-right
https://www.w3schools.com/css/default.asp
Semana 3
Semana 3
Ejercicio en clase
Semana 3

Intro HTML y CSS - Compressed

Cargado por

Copyright:

Formatos disponibles

Intro HTML y CSS - Compressed

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

Intro HTML y CSS - Compressed

Cargado por

Copyright:

Formatos disponibles

Tema

Este consiste en una serie de elementos que se usarán para

Browsers Web servers

Lectores de pantalla Dispositivos

La etiqueta de apertura <html> indica que cualquier cosa entre ella y

consectetur adipiscing elit, sed do

Debe aparecer un párrafo de texto entre estas etiquetas <p> y </p>.

La etiqueta de cierre </body> indica el final de lo que debería aparecer

en la ventana principal del navegador

Bracket izquierdo Bracket derecho Bracket izquierdo Bracket derecho

Etiqueta de apertura Etiqueta de cierre

<! DOCTYPE html>

<head> (Información técnica para el navegador)

<title>Mi página web</title>

<body> (Contenido que aparecerá en la página web)

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

<h1>, <h2>, <h3>, Permite agregar un <a href=””>

<h4>, <h5>, <h6>

Negritas, cursiva y <b>, <i>, <u>

Image url <img src=””>

Lista (enumerada) <ol> <li>

Es el código que usas para dar

Permite aplicar estilos de manera

Selector Indica a que elemento

} Declaración Indica cómo de ser el

Indica el aspecto del

Color para texto

Tamaño del texto

También podría gustarte