Scribd
Cargar
38 vistas4 páginas

HTML

El documento proporciona notas sobre HTML y CSS. En HTML, explica las etiquetas y elementos básicos como <html>, <head>, <body>, <h1>-<h6>, <p>, <img>, <a> y cómo crear listas, formularios y otros componentes. En CSS, cubre selectores, propiedades de fuente, color, borde, fondo, padding, margin y más detalles sobre cómo estilizar el contenido HTML.

Cargado por

Maiki Junior
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 DOCX, PDF, TXT o lee en línea desde Scribd
38 vistas4 páginas

HTML

El documento proporciona notas sobre HTML y CSS. En HTML, explica las etiquetas y elementos básicos como <html>, <head>, <body>, <h1>-<h6>, <p>, <img>, <a> y cómo crear listas, formularios y otros componentes. En CSS, cubre selectores, propiedades de fuente, color, borde, fondo, padding, margin y más detalles sobre cómo estilizar el contenido HTML.

Cargado por

Maiki Junior
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 DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 4

NOTAS HTML & CSS

 General:
 <!DOCTYPE html> //es una declaración que informa al navegador la versión de
HTML que se usa
 Tag apertura <html>
 Tag cierra </html>
 Self closing tags : tags que se cierran solos (<image>)
 Html : elemento raíz
 Ctrl [
 Ctrl ] : INDENTACION
 Htm > head > body
 < h1> </h1> NUMERO REPRESENTA LA IMPORTANCIA DEL
ENCABEZADO (h1-h6)
 <p> </p> Crear un párrafo
 Alt + Z :el código se adapta a la dimensión de la pantalla
 Dns web html: información sobre HTML
 Ctrl + / : la línea de código seleccionada pasa a ser un comentario
 <main></main> forma parte del <body> como código principal a mostrarse
 Imagen:
 Al imprimir una imagen en html se debe poner al final, “alt” lo cual permite
mostrar al usuario en texto que ahí hay una imagen, en el caso que haya un
problema con el enlace de la imagen.
 Imagen desde internet: dirección de imagen + alt “ ”
 Imagen desde mis archivos: nombre de la foto (misma carpeta) o ruta (otra
carpeta) + alt
 Enlace en el texto o imagen:
 < a href = ” ”> </a> aplicar un enlace a una parte de un texto
 < a href = ” ” target = ” _blank ” > </a> aplicar enlace y abrir en una nueva
ventana con tarjet
 < a href = ” ” tarjet = ” _blank ” rel = “ noopener noreferrer ” > </a> aplicar un
enlace en una nueva ventana y con seguridad del peligro llamado Tabnaving
 Para crear palabras-enlace que envíen a una parte de la misma página, se usar ID
= “ “ como conector y llamarlo en el índice con un “#... “ al principio
 Listas:
 <ul> </ul> unordened list -> lista desordenada
 <li> </li> list item -> elemento de la lista
 <ol> </ol> unordened list -> lista desordenada
 <li> </li> list item -> elemento de la lista

 Detalles de texto:
 <strong> indica que el texto es importante y en negrita
 <em> indica el texto en cursiva
 <s> strikethrough : tachar
 <hr> horizontal rule : línea horizontal y se puede usar para división de párrafos
 Formulario:
 <form></form> crear un formulario
 <input type = “ text” > ingresa datos del usuario
 <input type = “ text” placeholder = “ “ > muestra un mensaje guía
 <input type = “ text” placeholder = “ “ required > obliga a digitar algo
 <button type = “submit” > Enviar </button> crea un botón llamado Enviar
 <input type = “ radio” > nom -> crear un botón opción multiple
 <label for = “nom” > < input id = “nom” type = “ radio” name = “nom - nom1”
> nom </label> valida tener solo una opción y no dos
 <label for = “nom” > < input id = “nom” type = “ radio” name = “nom - nom1”
checked > nom </label> selecciona a esa opción por defecto
 <label for = “nom” > < input id = “nom” type = “ radio” name = “nom - nom1”
checked value = “ nom ” > nom </label> le especifica al programa que esa es
la opción elegida por el usuario
 <br> break: romper y genera un salto de línea
 <input type = “checkbox” > genera opción multiple con un visto
 General:
 <div> IMPORTANTE engloba una sección del programa para dar estilos
 <footer> pie de pagina
 <small> hacer una parte del texto pequeño
 <title> va en el tag HEAD y brinda un titulo web a la pagina

NOTAS CSS
Aquí se define el estilo que tomará el contenido HTML
 DETALLES:
 Style: “ color: blue”
 Existen 4 selectores, tipo, clase, ID, atributo y universal:
 TIPO: h1{ color : “azul”; o mas }
 CLASE: <p class : “ejemplo” > lunes </p> --> .ejemplo{ color: “verde”;
o mas } Se puede meter mas clases dando solo un espacio
 ID: <h2 id=” Titulo-documento-rapido ” > nom </h2> -> #Titulo-documento-
rapido{ } Se usa para hacer un cambio individual
 ATRIBUTOS: generan un nivel de detalle mayor al elemento, lo que esta dentro
de un selector y se usan llaves. Ej: input [ type: “ radio ” ]
 UNIVERSAL: *{ ….. } Se aplica a todo el documento
 Font-size: 15px ajusta el tamaño de la letra
 Font-weight: bold; letra en negrita
 Text-decoration: none; elimina el subrayado de las palabras con enlace
 Cuando hay distintos selectores con el mismo estilo, se mete todo en un solo
lugar separados por una coma
 { Font-family: }: tipo de fuente
 Los tipos de fuente llevan otras de respaldo o por defecto en caso de que una de
estas falle
 Fonts.google.com es una galería de fuentes para letras a usarse
 - - name => es una variable de CSS , se define una sola vez y sea usa donde se
desee, similar a una función y se la usa con var (- - name); en caso de un error de
tipeo en el nombre de la variable, se puede usar un respaldo var ( - - nam,
black);
 IMÁGENES:
 { Width: 100px } -> cambia la dimensión de la imagen y se usa funciones para
alterar una y no todas
 Border-width: 5px / border-color: blue / border-style: solid / border-radius: 5px
o 5%
 Background-color: blue
 Padding: 15px, es la distancia entre el propio borde del elemento y su contenido
(interno) (top, right, left, bottom, resumir en sentido de las agujas de reloj, o con
dos ajustes #1 arriba-abajo y #2 izquierda-derecha).
 Margin: 15px, es la distancia entre el borde del elemento y el contenedor
(externo) y es la distancia que separa elementos (top, right, left, bottom, resumir
en sentido de las agujas de reloj, o con dos ajustes #1 arriba-abajo y #2
izquierda-derecha).
 CODIGO HEXADECIMAL PARA COLORES:
 Su nomenclatura es 1-9 números normales, A-F números 10-16
 00 00 00 negro – FF FF FF blanco
 1er par (rojo) 2do par (verde) 3er par (azul)
 Existen 16M de combinaciones posibles para crear un color
 Color Piker genera códigos para el color deseado
 Para abreviar colores color: #00ff00 => color: #0f0
 RGB PARA COLORES:
 Su nomenclatura es con tres numeros (255,34,212)
 0-255 todos los valores en colores
 1er par (rojo) 2do par (verde) 3er par (azul)
 Color Piker genera códigos para el color deseado

 JERARQUIA:
 La prioridad de estilos no aplica en HTML, pero en CSS sí. Cuando usamos
clases anidadas la ultima en ser aplicada un estilo, será la que tenga prioridad. Y
entre un selector y un elemento de ese selector, gana el elemento, por lo mas
especifico gana a lo general.
 Entre ID y clase, gana el ID
 Sin importar el nivel de jerarquía, !important obliga al browser a usar use ajuste
sin importar el nivel
 UNIDADES:
 12 px: unidad absoluta porque especifica exactamente el ajuste
 12 vw (viewport) unidad relativa y depende del tamaño de la pantalla
 12 em unidad relativa y depende del tamaño de la letra
 HERENCIA:
 :root{ … } define cualquier variable como global, ya que esta vinculado con el
HTML y toda su estructura es su derivado, o lo que hereda del HTML (elemento
raíz / padre)
 Para cambiar la variable global en una zona en específico, accedemos a la zona
donde se quiere aplicar la variable y la modificamos.

 COMPATIBILIDAD PROGRMA-BROWSERS
 Se debe tener cuidado con los respaldos de las variables CSS, ya que si no se
escribe bien el nombre de la variable, se debe sacar una copia del respaldo para
que el browser pueda leerlo bien.

También podría gustarte