SECCION 1
<!DOCTYPE html>
<html>
<head>
<title>
titulo de la pgina>
</title>
</head>
<body>
Encabezado PRINCIPAL
<header>
<div>(para imagenes)
<img src= “ruta_img” width= “70” alt “nombre_imagen”>
Menú
<nav>
<ul>
<li> <a href = “……”>nombre categoría
contenido y contenido secundario
<section class=”wreaper”>(contenedor q contiene secciones q se quieren
agrupar a main y a aside)
<section class=“main”>(contenido principal)
<articule>(agregar articulos
<aside> (contenido segundario no importante) </aside>
pie de pagina
<footer>(información de la pagina - citacion)
SUBTITULOS
<h1,h2….h6>
subtitulos h1 mas grande hasta h6 mas pequeño
</h1,h2….h6>
PARRAFOS Y TEXTO
incluir parrafo
<p>sentences</p>
cambiar tamaño Fuente
<p style =”font-size: numeropx”>
cambiar colo
<h1 style =”color:red”>
cambiar fuente
<h2 style=”Font-family:arial”>
ubicación
<h1 style =”text-align: center”>
negrilla
<strong> sentences </strong>
cursive
<em> senteces</um>
negrilla todo el texto
font-weight:bold;
saltos de lineas
<br></br>
lineas divisorias
<hr width="80%" >
FONDO
<body style=”background-color: brown”>
IMAGENES
<img src = “ubicacion de la imagen”> </img>
FONDOS
Agregar imagen de fondo
CSS: elemento {background: url(ruta donde se localiza la imagen}
Agregar imagen de fondo y repetir su imagen en varios cuadros
CSS: body (elemento) {background: url(.. /ruta donde se localiza la imagen}
repetir imagen de fondo
CSS body (elemento) {background-repeat:no-repeat}; en horizontal
{background-repeat:repeat-x};
bajar el curso y baja fondo de pantalla
CSS body (elemento) {background-attachment:scroll;}
ENLACES E HIPERVINCULOS
<a href = “enlace o hipertexto”> </a>
no cerrar la pagina anterior_abrir en una nueva pestaña
<a target= “_blank” href = “https……”>
LISTAS ORDENADAS
con enunmeracion
<ol>
<li> sentences 1</li>
<li> sentences N+1</li>
</ol>
sin enumeración
<ul >
<li> sentences 1</li>
<li> sentences N+1</li>
</ul>
COMENTARIO
<!--Conviérteme en un comentario.-->
TABLAS
crear tabla
<table borde= “1px”>
<tr> crea una fila
<td> crea un celda
cabecera de la tabla
<thead>
<tr>
<th>crear celda de la cabecera
cuerpo de la tabla
la tabla va dentro del código
<tbody> y cierra con </tbody>
atributos de tabla
si se quiere q una celda ocupe toda la tabla del encabezado
<th colspan= “numero de columnas creadas”>
dividir tablas
<div style="width:50px; height:50px;background-color:yellow"></div>
controlar pequeñas partes de la pagina
<span> te permite controlar el estilo de partes más pequeñas de tu página,
tales como el texto
</body>
</html>
FORMULARIO
Entradas a un formulario
<form>
Cuadro de texto
<laber for = “nombre_campo_texto_label”>texto asociado al cuadro de
texto</label>
<input type= “El_Tipo_Variable”
placeholder= “valor dentro de la caja de texto”
maxlength= “#” (máximo de caracteres a usar es ese campo)
name = ”nombre”
id= “nombre_campo_texto_para_label”
Contraseña
<input type = “password”>
email
<input type = “email” name “referente al código de esta linea” id””>
check box o radio
<input type = “checkbox” name “referente al código de esta linea” id””> nombre
del campo o caja a seleccionar
botón
<input type = “button” value= “enviar”>(boton para realizer alguna acción
<input type = “submit”> (enviar datos)
lista desplegable
<select name = “” id “”>
<option value= “mexico”>mexico</option>
<option value= “colombia”>colombia</option>
Metadatos: describe a google nuestra pagina web
<head>
<meta name= “tipo de meta” content= “palabras claves”/>
(tipo de meta: descripción o keywords
ENLACES
ENLAZANDO CON CSS
Enlazar el codigo a una hoja de estilo CSS
<head>
<link type = “text/css” rel= “stylesheet” href= “stylesheet.css”/>
ENLAZAR CON JAVA SCRIPT
<body>
<script src = “nombrearchivo.js”></script>
ENALZAR IMAGEN DE APARECE EN LA PESTAÑA DE LA PAGINA WE
<link rel= “shortcut icon” type= “image/x-icon” href= “ruta de ubicacion de la imagen.ico”>
SINTAXIS
SELECTOR (Puede ser <p> <img> ..etc)
{
propiedad(Font-family;Font-size..etc): valor(blue; 12px);
}
Enfocarse en un SELECTOR especifico
div div p {propiedades:valor}
Anidación directa al ultimo SELECTOR
div >p { propiedades:valor }
SELECTOR “*” universal (aplica en toda la interfaz)
* { propiedades:valor }
a [href= “dirección web”] { propiedades:valores;}
Colores (es en hexadecimal)
color: #8a2be2;
tamaño letra (para todo tipo de tamaña)
Font-size: 12um;
tipo de letra
formula para probar si el usuario tiene ese tipo de letra, se ubican según
importancia
Font-family: Tahoma, Arial, sans-serif(esta ultima es predeterminada);
bordes de una tabla
dashed (línea punteada), solid (línea sólida)
border: 1px solid black;
border :1px dashed blue;
cambiar la forma a los hipervinculos
text-decoration: none;
sombra a botones
a{box-shadow: px px px color;}
BOTONES
Propiedades:
modificar las esquinas de los objetos de HTML
border-radius: # px;
margenes iguales a ambos lados
margin: auto;
posicion de texto
text-align: center;(en este caso es centrado)
CLASES (Generales)
<p class = “nombreClase”>titulo</p>
CSS: .nombreClase { propiedades:valor }
IDENTIFICADORES (específicos)
<p id = “nombreClase”></p>
CSS: #nombreClase { propiedades:valor }
PSUEDO-CLASES
MODIFICACION DE LINKS
CSS: 1. a.link{ propiedades:valor } : Un enlace sin visitar
2. a.visited{ propiedades:valor }: Un enlace que ha sido visitado.
3. a.hover{ propiedades:valor } : Un enlace sobre el que pasas el puntero
primer hijo
CSS. a:first-child:{
color:#CDBE70;}
Segundos hijos
a:nth-child(numero del parrafo){
color:#FFC125;
}
POSICIONAMIENTO
DISPLAY:
CSS: display:block;inline-block;
block: esto vuelve al elemento una caja de bloque. ¡No permitirá que nada sea
ubicado junto a él en la página! Ocupa el ancho completo.
inline-block: Esto vuelve a un elemento una caja de bloque, pero permitirá que
otros elementos sean ubicados junto a él en la misma línea.
inline: Esto hace que un elemento sea ubicado en la misma línea que otro
elemento, pero sin darle formato como bloque. Solamente ocupa el ancho que
requiera (pero no la línea completa).
none: ¡Esto hace que el elemento y su contenido desaparezcan por completo de la
página!
localización
1.margin<border<padding(relleno)<content
margin:auto(centra el objeto);
margin: 10px(superior) 10px(derecha) 10px(abajo) 10px(izquierda);
margin-top:-20px; (valores negativos para salir de las márgenes HTML establecidas
Ubicación de los elementos en HTML
float:right;
overflow:hidden;(para que ocultar contenido q sobrepasa el contenedor y
limpia los float)
que los elementos no se sobrepongan
elemento{clear:/*right,left, both*/;}
Posicionamineto (relative,fixed,absolute)
position:relative; (desplaza el objeto sin que se ocupe el espacio que ella
ocupaba, deja el espacio vacio)
top: 100px;
botton: · px;
right: : #px;
left: : #px;
position:absolute; (desplaza el objeto, pero los otros objetos recorren el
espacio del objeto desplazado)
top: 100px;
botton: #px;
right: #px;
left: #px;
resaltar encabezado
z-index: 1px; entre mas alto sea es mayor la visibilidad del objeto
LISTAS
CSS: Cambiar figura de lista
ul<list-style-type:circle;etc;}
TABLAS
table{
border-collapse: collapse;}
FORMULARIO
box-sizing: border-box; (para que el caudro de texto quede dentro del formulario)
input: focus {} (para que el borde del texto a escribir cambie de color)
resize://both; horozintla; (para que se pueda o no agradar el text área)
max-height: 300 px; (lo máximo que se puede expandir el text área)
input[type=”submit”]{margin-bottom=0;} (acomodar el formulario con el tamaño de
pantalla)
cursor:pointer;(cambiar la forma del cursor cuando se para por la zona o botón)
