Etiqueta: html

Recursos HTML e CSS

~ i-rochiño ~ 1 Comentario

Imos ir xuntando aquí se vos parece sitios web para ter a man:

 

Sitio web de turismo

~ i-rochiño ~ Deixa un comentario.

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

~ i-rochiño ~ Deixa un comentario.

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:

.flotar { float: left; padding: 5%}

  • Agora engade a clase seguinte:

.colocar { clear: left; }


<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>

view raw

imaxes_colocadas.html

hosted with ❤ by GitHub

  •  Lembrade que para traballar con clear temos 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 display Engade no teu ficheiro .css esta propiedade, por exemplo onde teñas unha lista pon display: inline; Fíxate ben o que acontece cos elementos da lista.

Tunear os formularios

~ i-rochiño ~ Deixa un comentario.

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í.

Clases en HTML5 e en CSS

~ i-rochiño ~ Deixa un comentario.

Como facemos se queremos que algún parágrafo estea en verde e outros en rosa? Crearemos clase: un estilo propio en CSS e despois chamalo co atributo class=  en HTML. Hai varios xeitos de crealo en CSS: con *, con # e cun puntiño.

O teu traballo:

  • Cando se emprega * para definir unha clase? e cando #?
  • Pon un exemplo de clase definida nun CSS e como usas a etiqueta correspondente en HTML
  • Consultando esta páxina web  resposta a:
    1. Cal é a propiedade para poñer un parágrafo todo en maiúsculas?
    2. Como se cambia de cor unha ligazón xa visitada e as outras non?
    3. Como quito o subliñado dunha ligazón só nalgúns casos?
    4. Como poño de cores unha ringleira dunha táboa e outras non?
    5. Como fago opaca xusto  unha imaxe?
Para aprender máis