Bloques en HTML e CSS

Un exercicio interesante para ver a influencia dun .css nas nosas páxinas está en w3schools. Xogade cambiando a pinta que ten e mirade o código para ir collendo ideas para o voso proxecto. O truco é que cando queremos definir unha parte da páxina web en bloques temos que usar <div> ou <span>.

O teu traballo:

• • Busca información aquí de como usalas en html e como definir as súas propiedades en css usando padding
  • Investiga  a diferencia entre <div> e <span>. Pon no teu proxecto barras laterais como as do exemplo.
  • Unha das propiedades útiles de CSS pode ser display: úsaa onde a etiqueta <li>

 

Coloríns en hexadecimal

Érase unha vez hai moitos anos cando íamos á tenda mercar pinturas había que pedir “Siena tostada”, “Amarelo limón”. Co paso dos anos inventouse o sistema Pantone e perdeuse toda a poesía. Un dos usos do hexadecimal é precisamente fabricar cores nunha páxina web. Noutro post velliño falábamos desto.

As cores para internet organízanse en tres números que indican canto de vermello R verde G ou azul B botas na paleta de pintor para obter o tono que desexas. O chiste é que a cantidade de cada non sempre se indica de 0 a 10; indícase en hexadecimal. Se tes unha cantidade de azul de valor 09 e queres un chisco máis azulado tes que poñer 0A non vaia ser que poñendo 10 xa te pases. Imos xogar con todo esto.

Baixando por esta páxina fai clic nun tono rosa, nun amarelo e nun marrón. Copia o hexadecimal correspondente e emprégao nos teus .css

CSS follas de estilo

Xa temos o contido das nosas páxinas web usando HTML. Agora queremos  poñelas chulas e mellorar o seu estilazo: cores, marxes, ..

É o momento de aprender CSS. Imos meter nun ficheiro na nosa carpeta web onde describamos a pinta que vai ter o que vai en cada etiqueta de HTML. Hai tres xeitos de facelo. Nós imos aprender o máis complexo 😉

O teu traballo:

• Crea na carpeta do sitio web un ficheiro que se chame estilazo.css
• Engade na cabeceira de todos os teus .html  a etiqueta:

<link  rel="stylesheet"  href="estilazo.css">

• Colle ideas deste ficheiro para o teu .css e actualiza a páxina no navegador.

Un ficheiro algo máis complexo aquí.:

	body {
	font-family: "Times New Roman", serif;
	background-color: #d8da3d; }
	h1 {
	text-align: center;
	font-family: sans-serif; }
	h2 {
	text-align: right;}
	p {
	margin-left: 80px;
	font-size: 14pt;
	color: green;}
	a:link {
	color: blue; }
	a:visited {
	color: purple; }

view raw

css_sinxelo.css

hosted with ❤ by GitHub

Seguimos coas páxinas oficiais   para ir de vagar. Fai unha lista de propiedades de CSS que podes engadir na túa folla de estilos. Complétaa con algúns dos valores desas propiedades que te parezan máis interesantes. Hai miles!!

Markdown: HTML para lacazáns?

Temos no noso repositorio en GitHub un ficheiro que se chama README.md que imos poñer ó noso gusto. Cómpre escribilo en Markdown que é unha especie de HTML rápido e sinxelo.

O teu traballo:

1. Edita  o ficheiro README.md do teu repositorio. Aprende a sintaxe de Markdown aquí, da páxina do inventor, ou nesta outra. Emprega todos os elementos que desexes para que quede interesante a páxina de presentación do teu repositorio. Mostra unha captura
2. Vai á lapela Wiki do repositorio (ver debuxo) e explica os teus cambios no proxecto das tarxetas. Engade dúas ligazóns no teu caderno: unha para ver o teu README.md e otra que nos leve directamente ó teu wiki.
3. Como activamos a posibilidade de usar Markdown nos nosos wordpress.com?
4. Existen editores de Markdown online que convirten o ficheiro.md nun ficheiro.html. Proba por exemplo este. Mostar o teu traballo. Nalgúns casos podes exportar a .pdf

Contratados para o turismo

O noso proxecto é montar un sitio web de promoción turística  publicalo no estupendo github.io

O teu traballo:

1. Tecleamos ficheiros .html con alomenos un ficheiro index.html
   
2. Ten que ter imaxes, todas do mesmo tamaño.
3. Un pequeno logo en todas as páxinas feito con <svg>
4. Un vídeo e un audio descargado na túa carpeta que se visualice nunha das páxinas web.
5. Unha barra de navegación cunha táboa na parte inferior para visitar todos os .html
6. Un formulario para indicar o noso destino e as datas de ida e volta no index.html
7. Iconos e emoticonos variados.
8. Busca de Google.
9. Algún elemento da web semántica.
10. Valida o código e móstrao nunha captura de pantalla.
11. Publica a URL en github.io do teu sitio.