|
|
||
|---|---|---|
| .. | ||
| html_css_parte1 | ||
| html_css_parte2 | ||
| html_css_parte3 | ||
| html_css_parte4 | ||
| README.md | ||
Formación programación
Primeros pasos
04 Crea tus primeras paginas HTML5 y CSS
Parte 1 - Primera página web
Diferencias entre html y css.
- Descarga archivo texto-base.txt
(archivo en formato
dos).
en NeoVim
set ff=unix
Formas de aplicar estilo CSS:
-
style inline.
<h1 style="text-align: center;">Sobre la Barbería Alura</h1> -
style block con tag
<style>.<style> p { text-align: center; } </style> -
style file.
Sistema hexadecimal
Sistema número que consta de las 6 primeras letras del alfabeto y los números del 0 al 9.
0 1 2 3 4 5 6 7 8 9 A B C D E F
La combinación de estos 16 elementos permiten la representación de mas valores, en menos caracteres, que por ejemplo, en un sistema binario. Es por esto que es ampliamente utilizado en el mundo imformático.
La representación de los colores en 6 posiciones
0 0 0 0 0 0 <--- Mínimo
F F F F F F <--- Máximo
# _ _ _ _ _ _
r r g g b b
Negro -> #000000
Blanco -> #FFFFFF
0 = Mínimo
255 = Máximo
Negro -> rgb(0,0,0)
Blanco -> rgb(255,255,255)
Equipo de Front End
- Programador Front End
- Responsable por UX (user experiencie)
- Responsable por UI (user interface)
- Copywriter (Generador de Contenido)
- SEO (Search Engine Optimization)
Final curso HTML5 y CSS parte 1 - Página barbería - estilo.css.
Parte 2 - Posicionamiento, listas y navegación
- Base de un archivo HTML.
- Lista html no ordenada.
- Posicionamiento listas y 'menu' de navegación.
- Posicionamiento encabezado de página.
CSS - La propiedad display.
css
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
html
<body>
<h1>The display Property</h1>
<h2>display: inline</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.
<span class="a">Aliquam</span> <span class="a">venenatis</span> gravida
nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
</div>
<h2>display: inline-block</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.
<span class="b">Aliquam</span> <span class="b">venenatis</span>
gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
</div>
<h2>display: block</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
consequat scelerisque elit sit amet consequat.Aliquam erat volutpat.
<span class="c">Aliquam</span> <span class="c">venenatis</span>
gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
</div>
</body>
En la página productos se utiliza la
propiedad display con el valor inline-block para poder ajustar su contenido
en productos.css.
Se utiliza una imagen como fondo con la propiedad css background
background: url(./imagenes/bg.jpg) para la etiqueta <footer>.
Final curso HTML5 y CSS parte 2
Parte 3 - Formularios y Tablas
- Nueva página, contacto.html.
- Se renombraron los estilos css: productos.css como style.css, y style.css como style_home.
- Creación de formulario HTML, tags
<form>',<input>(text y submit) para entradas de usuario. Tag<label>como etiqueta. - Conexión del input () con su label.
- Uso de
idpara elinputasociado al atributofordellabel.
Jerarquía en css, ejemplo.
- Peso gráfico:
___________________________
| | ___________________
| inline | | | _____________
| | | ID | | | ________
| | | | | class | |etiqueta|
| 1000 | | 100 | | 10 | |____1___|
| | | | |_____________|
| | |___________________|
|___________________________|
- Peso valores:
form p = 1+1 = 2
p = 1
.test = 10
p.test = 1+10 = 11
#test = 100
html
...
<form>
...
<div>
<p class="test" id="test">Como prefieres que te contactemos?</p>
<label for="radio-email"><input type="radio" name="contacto"
value="email" id="radio-email"> Email</label>
<label for="radio-telefono"><input type="radio" name="contacto"
value="telefono" id="radio-telefono"> Teléfono</label>
<label for="radio-whatsap"><input type="radio" name="contacto"
value="whatsap" id="radio-whatsap"> Whatsapp</label>
</div>
...
</form>
...
css
...
form p { color: blue; }
p { color: red; }
.test { color: yellow; }
p.test { color: magenta; }
#test { color: cyan; }
/* la configuración de estilo inline sobrescribe todo */
HTML input types
tipos
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
- Etiqueta
<fieldset>como agrupador y<legend>como parrafo. - Descripción de imagenes
alt="Descripción de imagen". - Clase css enviar para input submit "Enviar Formulario" contacto.
- Propiedades: cursor (pointer), transition, transform (scale, rotate).
- Tablas y estilo.
Final curso HTML5 y CSS parte 3
Parte 4 - Avanzando en CSS
-
Reestructurando los estilos de index.html para utilizar style.css.
-
Utilización de fuentes externas como google fonts.
-
Algunas fuentes de google