HTML & CSS
Profesor Erick Bran
HTML5
Es un lenguaje de que sirve para
definir la estructura y la
semántica de nuestra página web
1. Etiquetas
Existen más de 100 elementos que nos permitirán crear etiquetas.
Pero solo hay de dos tipos
Las que tienen una apertura y un cierre Las que se cierran en la misma etiqueta, también
conocidas como "etiquetas vacías" o "autocontenidas".
Estructura básica de una
PÁGINA WEB
<!DOCTYPE html>
Indica al navegador
que la versión HTML
será la 5 (HTML5).
<html> Indica la raiz del
documento, todo el
resto de etiquetas se
encuentra adentro.
Ademas especifica el
idioma en el cual esta
escrita.
</html> <html lang="es">
<head>
Envuelve información principalmente a:
el navegador, buscadores y otras paginas.
No se muestra en la pagina web.
</head>
Indica al navegador
<meta
que tipo de caracteres
charset="UTF-8"> contiene la pagina.
Indica el titulo de nuestra pagina.
Se muestra en la pestaña del navegador.
<title> Mi primera página web </title>
<body>
Dentro de esta etiqueta está todo el
contenido visible para el usuario.
</body>
¿Cuáles son
las etiquetas
básicas?
Etiquetas básicas
<p> </p>: párrafo.
<br>: salto de línea.
<hr>: salto de línea con una línea visual.
Etiquetas básicas
<h1></h1>: encabezado de pagina.
Tiene de 1 – 6 subniveles.
<ul></ul>: lista de elementos, no importa
el orden.
<ol></ol>: lista de elementos, si importa
el orden.
Etiquetas básicas
<li></li>: elemento de lista
siempre va con <ol> o <ul>.
<strong></strong>: importante.
<em></em>: enfatiza.
Etiquetas básicas
<!-- -->: comentario.
<footer></footer>: indica al navegador el
pie de página.
<article></article>: indica un artículo.
Etiquetas básicas
<cite></cite>: si se enfatiza en
una frase, esta sirve para indica
el autor.
Y muchas más...
CSS3
Es un lenguaje de marcado que
permite aplicar estilos a
nuestros elementos HTML.
Selectores
Selecciona todos los
elementos que contendrá
Universal la pagina.
*{
propiedad:valor;
}
Sirve para dar estilo sólo a
determinados elementos
marcados con el atributo
Clase class y la clase definida.
.nombreClase{
propiedad:valor;
}
Este se utiliza para marcar
un elemento único.
ID
#nombreID{
propiedad:valor;
}
Modificación de colores
RGB: red, green, blue.
#: hexadecimal.
RGBA: red, green, blue, alpha.
Modificación de fuente
font-size: tamaño.
font-style: estilo.
font-family: lista de fuentes.
Modificación de texto
text-align: alinear.
text-decoration: subrayado, tachado, etc.
text-height: ajuste de interlineado.
Curso:
clic sobre mí