Desarrolladores web
Desarrolladores web
HTML
Desarrolladores web
HTML: lenguaje de marcas hipertexto ; HyperText Markup Language
<tagname>Content goes here...</tagname>
HTML Básico
HTML Básico
HTML Básico
HTML Básico
HTML Básico
HTML Básico
HTML Básico
CssBásico
CssBásico
alineamiento Tipo de letra
HTMLBásico
Aquí me quede!!
HTMLatributos
HTMLatributos
<a , href>
<img , alt>
This attribute defines an alternative text description of the image.
Note: Browsers do not always display the image referenced by the element. This is the
case for non-graphical browsers (including those used by people with visual
impairments), if the user chooses not to display images, or if the browser cannot display
the image because it is invalid or an unsupported type. In these cases, the browser may
replace the image with the text defined in this element's alt attribute. You should, for
these reasons and others, provide a useful value for alt whenever possible
HTMLatributos
HTML
<body>
<img class="fit-picture"
src="[Link]"
alt="Grapefruit slice atop a pile of other slice
s">
</body>
CSS
.fit-picture {
width: 30%;
height: 30%;
}
HTMLatributos
<html lang="fr"> <!--en-GB-->
HTMLatributos
HTMLatributos
HTML
• The meta element represents various kinds of metadata that cannot be expressed
using the title, base, link, style, and script elements.
• charset
• su atributo declara la codificación de caracteres de la página. Se anima a los autores
a utilizar UTF-8. Los autores no deben utilizar codificaciones incompatibles con ASCII
para evitar riesgos de seguridad: los navegadores que no las admitan pueden
interpretar el contenido dañino como HTML.
• <meta charset="UTF-8">
• relThis attribute names a relationship of the linked document to the current
document.
• <link rel="stylesheet" href="[Link]"> <!--Emlazar css-->
• El elemento HTML <span> es un contenedor en línea genérico para redactar
contenido, que no representa nada de forma inherente. (se pueden resaltar algunos
textos.
HTML
HTML styles
Color de texto
Tipo de letra
Tamaño de la letra
Alineación del texto
HTML formating
<p>This is <sup>superscripted</sup> text.</p> Determina superíndices de texto
Texto en negritas
Texto resaltado
Texto cursivas
Texto marcado
Texto eliminado, algunos
buscadores le colocan una línea
en medio del texto
Texto insertado, algunos
buscadores lo subrayan
Determina subíndices de texto
HTML formating
HTML qoutations
Bloque de citaciones
Citación corta
HTML qoutations
Abreviaciones
Información del autor
cita
Colocar al revés el texto
HTML color
Color de fondo de la caja de texto
Color de texto
Color de borde de la caja de texto
HTML css
Inline dentro del código HTLM; body
Internal dentro del código HTLM ; del head
HTML css
External Desde el archivo HTML,
enlazado al archivo css
HTML Image
Estilo de la imagen, altura y anchura
La imagen se mueve a la derecha del texto
HTML Image
Mapa de bits, no vacios
Área de mapa de bits, donde se va a dar el clic
Desplegar texto alternativo, en caso que no se despliegue imágenes
HTML Image
HTML Image
HTML Tablas
Celdas de la tabla, contenido de la celda
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Renglones de la tabla
HTML Tablas
Cabecera de la tabla
Subtítulos
<caption>Monthly savings</caption>
Especifica el número de columnas a dar formato
<colgroup>
Se utiliza para determinar las
<col span="1" style="background-color:red">
propiedades
de la columna
</colgroup>
HTML Tablas border
• <style>
• table, th, td { Color de borde
• border: 2px solid blue;
• }
• </style>
Tamaño de la columna; celdas(td), encabezado (th )
<colgroup>
<col span="1" style="background-color:red">
<col span="1" style="width:70%">
</colgroup>
HTML Tablas border
Encabezados
Encabezados renglones
Alineación de texto a la izquierda
Encabezados columnas
<style>
table, th, td {
border: 2px solid blue;
text-align: left;
HTML class, frames
.favorite styled{
}
<button class="favorite styled"
type="button">
Add to favorites
</button>
An HTML iframe is used to display a web page within a web page. - FRAMES
Anida una página dentro de otra
<iframe src="[Link]" height="200" width="300" title="Iframe Example"></iframe>
HTML frames
<style>
iframe {
border: 2px solid red;
}
</style>
borde
HTML Script
Nos ayuda a ejecutar código de java script
<script src="[Link]"></script>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = "Hello JavaScript!";
</script>
HTML clases
HTML clases
Dos clases: note y editorial
Una clase
.note {
font-style: italic;
font-weight: bold;
}
.editorial {
background: rgb(255, 0, 0, .25);
padding: 10px;
}
.editorial:before {
content: 'Editor: ';
}
HTML Form
HTML formulario
HTML formulario
HTML formulario
HTML formulario
Busca strings
HTML formulario
HTML formulario
HTML formulario
HTML formulario
HTML formulario
HTML formulario
HTML formulario
HTML Gráficos
<canvas width="300" height="300"> An alternative text describing what your canvas displays. </canvas>
Se despliega el texto si no se puede desplegar la imagen del canvas
dos dimensiones
Un script para dibujar un rectangulo verde
10, 5, 100, 50
HTML Gráficos
rectángulo
contorno rectanguar
Limpiar un area
HTML Gráficos
rectángulo
contorno rectanguar
Limpiar un area
HTML Gráficos
HTML Gráficos
HTML Gráficos
HTML
HTML Gráficos
HTML
CSS
HTML Gráficos
CSS
HTML Gráficos
HTML Gráficos
HTML Gráficos
HTML Gráficos
HTML Gráficos
HTML animaciones
La propiedad CSS abreviada de animación aplica una
animación entre estilos
-Un valor negativo hace que la animación comience inmediatamente, pero a mitad
de su ciclo.
HTML animaciones
HTML animaciones
1.- La propiedad CSS animation-direction establece si una animación debe reproducirse
hacia adelante, hacia atrás o alternar entre la reproducción de la secuencia hacia
adelante y hacia atrás.
La propiedad CSS animation-duration establece
el tiempo que tarda una animación en
completar un ciclo.
HTML animaciones
• La propiedad CSS animation-fill-mode establece cómo una animación CSS aplica estilos a su objetivo
antes y después de su ejecución.
La propiedad CSS animation-iteration-count establece
el número de veces que debe reproducirse una
secuencia de animación antes de detenerse.
HTML animaciones
• La propiedad CSS animation-name especifica los nombres de uno o más @keyframes
at-rules que describen la animación o animaciones a aplicar al elemento.
La propiedad CSS animation-play-state establece si una
animación se está ejecutando o está en pausa.
HTML animaciones
La propiedad CSS animation-timing-function establece cómo progresa una animación a
lo largo de la duración de cada ciclo.
HTML animaciones
La propiedad abreviada CSS overflow establece el comportamiento deseado para el
desbordamiento de un elemento -es decir, cuando el contenido de un elemento es
demasiado grande para caber en su contexto de formato de bloque- en ambas direcciones.
transform
Se aplica una transformación bidimensional a un
elemento a través de la propiedad 'transform'.
HTML animaciones
HTML animaciones
HTML animaciones
HTML animaciones
HTML animaciones
