Mes: Outubro 2022
Recursos HTML e CSS
Imos ir xuntando aquí se vos parece sitios web para ter a man:
- A páxina dos coloríns para escoller a vosa cor favorita.
- Páxinas oficiais (Try it) A de html e tamén a de CSS.
- Emoticonos para meter nas vosas páxinas.🍩 🍦🍪💃
- Para traer iconos chulos (que tal a ambulancia?)
- Para validar o noso código online. E son eu tiquismiquis???
- Engadir fontes tipográficas
- Para facerse unha idea de como se ve o noso sitio web nun móbil.
- Para xenerar táboas e copiar e pegar o código
- Estupendo libro online de CSS
Sitio web de turismo
Subide ao voso repositorio o sitio web co que traballamos este trimestre. Todo o que vimos persoalizado en CSS:.
- Un par de tipografías.
- Uso variado das medidas en CSS.
- O indicado no post Propiedades en CSS.
- Comentarios por todas partes.
- Uso de clases para persoalizar CSS.
- Etiquetas de bloques con propiedades tipo display, float e clear
- Etiquetas semánticas.
que vén sendo o que dixemos en Contratados para o turismo ampliado co novo que aprendemos estes días.
Lembra subilo ao repositorio que indicaches no teu blog de wordpress.
Colocando elementos na páxina web
Imos colocar imaxes, texto e calquera elemento que teñamos nos nosos .html para que o resultado sexa aínda mellor que o que temos 🙂 Abordaremos hoxe tres propiedades moi útiles en CSS: float, clear e display. Como xa sabemos, imos fabricar clases novas para usalas.
O teu traballo:
- Engade no teu .css a seguinte clase que está moi ben explicado aquí. :
.flotar { float: left; padding: 5%}
- Agora engade a clase seguinte:
.colocar { clear: left; }
- Analizamos o seguinte anaco de HTML onde as usamos:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <img src="logo.png" class="flotar"> | |
| <p class="colocar"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mauris nunc, pharetra sed dapibus at, condimentum id est. Vivamus in nisl tincidunt, congue urna ut, porttitor turpis. Curabitur varius laoreet lectus, vel gravida dolor commodo non. Aliquam nec eros quis nulla tincidunt malesuada id quis lorem. Duis egestas, tortor ac iaculis mollis, sem ante tristique turpis, eget sollicitudin dui ante at diam. | |
| </p> | |
| </body> |
- Lembrade que para traballar con
cleartemos que ter un elemento colocado e modificar a súa posición como contan aquí. Para aprender moitísimo consultade esta páxina. - Cambia os valores de float e clear. Úsaas nas túas páxinas web. Se cadra precisas modificar os recheos arredor das imaxes. Fai as túas probas ata que quede chulo.
- Proba as posibilidades da propiedade de CSS chamada
displayEngade no teu ficheiro .css esta propiedade, por exemplo onde teñas unha lista pondisplay: inline;Fíxate ben o que acontece cos elementos da lista.
Tunear os formularios
Para que os formularios queden moito máis chulos teremos que dicir cal é o type= ao que nos referimos. Indicarémolo entre corchetes.
O teu traballo:
Seguro que tes un formulario no teu proxecto. Coa axuda deste exemplo intenta que o teu quede o máis parecido ao que está aquí.
irocho.wordpress.com 