Intro a la programación web – creando archivos
HTML & CSS Ricardo Vega - ricardov.cl - @ricardov_cl v2 2021 (v1 2016) | Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International
Gran aliado
www.w3schools.com
HTML & CSS – introducción Qué es Orígenes – HTML5 Características Editores HTML – Sintaxis Etiquetas – que son Estructura - HTML, Head, Body, Headings, p, image, div, links Etiquetas Semánticas Otras Etiquetas - Listas... Orden de Archivos CSS – Sintaxis Selectores Propiedades Tamaño Posición Color Tipografías Archivos externos Otros Inspeccionar – Chrome, Firefox... Librerias – Bootsrap, otras Referencias
HTML & CSS – introducción Qué es Orígenes – HTML5 Características Editores HTML – Sintaxis Etiquetas – que son Estructura - HTML, Head, Body, Headings, p, image, div, links Etiquetas Semánticas Otras Etiquetas - Listas... Orden de Archivos CSS – Sintaxis Selectores Propiedades Tamaño Posición Color Tipografías Archivos externos Otros Inspeccionar – Chrome, Firefox... Librerias – Bootsrap, otras Referencias
Qué es: HTML Lenguaje de marcado, genera estructura y jerarquía de un documento.
Qué es: origenes Tim Berners–Lee (físico inglé trabajando en el CERN) desarrolla un lenguaje para conectar contenido en base a hipervínculos: el html
Qué es: origenes Funciona en el navegador web, que e sun administrador del protocolo HTTP HTTP - Protocolo de Transferencia de Hipertexto (Hypertext Transfer Protocol). Define cómo se comunican clientes con servidores. Cliente “pide”, servidor “responde”. Navegadores (Firefox, Chrome, Opera, etc.)
Cómo: editores Requiere un editor de código. Crear un archivo y guardarlo con extensión html en una carpeta. En este archivo se escribirá lo necesario para crear la página web. El orden es relevante para los otros elementos que se se pueden usar.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p>Este es un párrafo</p> </body> </html>
Estructura de una página en HTML 5
HTML & CSS – introducción Qué es Orígenes – HTML5 Características Editores HTML – Sintaxis Etiquetas – que son Estructura - HTML, Head, Body, Headings, p, image, div, links Etiquetas Semánticas Otras Etiquetas - Listas... Orden de Archivos CSS – Sintaxis Selectores Propiedades Tamaño Posición Color Tipografías Archivos externos Otros Inspeccionar – Chrome, Firefox... Librerias – Bootsrap, otras Referencias
etiqueta que abre etiqueta que cierra con /
<H1> </H1>
declaración tipo de archivo
cabecera
cuerpo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p>Este es un párrafo</p> </body> </html>
<!DOCTYPE html> <html> etiqueta que abre contenido etiqueta que cierra
<head> <meta charset="utf-8"> </head> <body> <p>Este es un párrafo</p> </body> </html>
Etiquetas estructura:
Es una especie de separador de elementos.
Sirve para crear sistemas de navegación
Describe la cabecera
<div> </div> <nav> </nav> <header> </header>
<article> - desde HTM5, sirve para describir un artículo de nuestra página.
<article> </article>
Desde HTM5, sirve para describir una sección de nuestra página.
<section> </section>
<footer> - desde HTM5, sirve para describir el pie de nuestra página.
<footer> </footer>
Etiquetas Título (Heading): Permite definir diversos niveles de títulos, desde el h1 al h6…
<H1>Titulo1</H1> <H2>Titulo2</H2> <H3>Titulo3</H3> <H4>Titulo4</H4> <H5>Titulo5</H5> <H6>Titulo6</H6>
Etiquetas Párrafo: para definir párrafos.
<p>este sería un párrafo, puede ser bastante largo</p>
Etiquetas Elementos visuales: multimedia
Para insertar imágenes jpg, png o gif. Para crear elementos gráficos vectoriales SVG (Scalable Vector Graphics)
Para insertar elementos gráficos bitmaps.
Para insertar elementos de audio
Para insertar elementos de video
Para insertar diversos elementos como gráficos, o incluso otras webs
<img src="ruta.jpg" alt="descripción"> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" /> </svg> <canvas id="myCanvas"> Algo acá </canvas> <audio controls> <source src=“elaudio.ogg" type="audio/ogg"> </audio> <video width="320" height="240" controls> <source src="pelicula.mp4" type="video/mp4"> </video> <object data="snippet.html"></object>
Etiquetas Links:
<a href="https://www.laweb.com" target="_blank"> Hacer click acá </a> Permiten poner links y ciertos atributos. permite ir a una web indicada en el atributo href. target atributo permite decirle en qué ventana se abre el link.
Etiquetas Listas No ordenadas:
<ul> <li>Camión</li> <li>Auto</li> <li>Bicicleta</li> </ul>
Etiquetas Listas ordenadas:
<ol> <li>Camión</li> <li>Auto</li> <li>Bicicleta</li> </ol>
Etiqueta Divs (Divisor):
<div class="miDiv"> <h2>Este es un título</h2> <p>Este es un texto del párrafo</p> </div>
Orden de archivos
en una misma carpeta…
archivo html
archivo css
archivo javascript
carpetas imágenes
...
HTML & CSS – introducción Qué es Orígenes – HTML5 Características Editores HTML – Sintaxis Etiquetas – que son Estructura - HTML, Head, Body, Headings, p, image, div, links Etiquetas Semánticas Otras Etiquetas - Listas... Orden de Archivos CSS – Sintaxis Selectores Propiedades Tamaño Posición Color Tipografías Archivos externos Otros Inspeccionar – Chrome, Firefox... Librerias – Bootsrap, otras Referencias
Código CSS se puede colocar dentro o fuera del archivo HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> style declara un código diferente al html entre style, se ubica el código css
<style type="text/css"> body { background: yellow; } </style> </head> <body> <p>Este es un párrafo</p> </body> </html>
<style type="text/css"> selector body { propiedad background: yellow; } </style>
valor
Selectores: seleccionan los diferentes elementos a modificar.
selector de etiquetas todas las etiquetas de este tipo
body { background: yellow; }
selector de id solo un elemento con esa id o nombre
#nombreid { background: yellow; }
selector de clase todos los elementos con esa clase aunque sean de diferente etiqueta
.nombreclase { background: yellow; }
Selectores: seleccionan los diferentes elementos a modificar. align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size
border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside
caption-side caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float
font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight gap grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows hanging-punctuation height hyphens @import isolation justify-content @keyframes
left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position
quotes resize right row-gap scroll-behavior tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi user-select vertical-align visibility white-space width word-break word-spacing word-wrap writing-mode z-index
https://www.w3schools.com/colors/colors_names.asp