Bos días/Boas tardes/Boas noites a tod@s:
Hoxe ensinareivos e explicareivos como fixen un punto do traballo de TICs.
Póñovos en situación, este trimestre estivemos traballando na clase como facer unha páxina Web en código HTML(que é un código informático utilizado no desenvolvemento de páxinas en Internet.)
O traballo consistia en crear unha Web con varias características obrigatorías que debía cumprir PEEERO...
Un apartado do exercicio era añadirlle ti cousas a maiores, no meu caso fixen o seguinte:
↬Personalicei os botóns totalmente, utilizando esta páxina.
↬Creei unha táboa.
↬Puxen unha táboa completamente distinta xa que se lle pasas o cursor por riba dos cuadrados estes cambian a cor por uns segundos, de tal xeito que podes dibuxar nela.
Empezamos por como añadir unha tabla: Eu aprendín grazas a esta páxina.
Solo tes que copiar o código e modificalo ao teu gusto, eu xa cho deixo aquí;
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr>
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
NOTA: Cabe destacar que esta función vai dentro da etiqueta <body>.
E así quedaría esta táboa;
Seguimos cos botóns, para esto entramos na páxina anteriormente mencionada, alí podemos modificalo, así:
Como vemos según imos facendo cambios o código vai cambiandoe cando teñamos o botón definitivo temolo que copialo e pegalo no noso documento chamado estilos.css
Eu, persoalmente cambiarialle o nombre de .btn por button.
Por último explicareivos como facer a táboa na que se pode dibuxar;
Primeiro creamos unha táboa ao noso gusto.
Deseguido, imos ao documento estilos.css(xa que é unha función) e este é o código que utilicei, pero, como en todo podemos cambiar as coras, os tamaños...
Que por certo unha forma para ter moita variación de cores é utilizar o código html que se non queremos perder tempo podemos utilizar páxinas como esta.
O traballo consistia en crear unha Web con varias características obrigatorías que debía cumprir PEEERO...
Un apartado do exercicio era añadirlle ti cousas a maiores, no meu caso fixen o seguinte:
↬Personalicei os botóns totalmente, utilizando esta páxina.
↬Creei unha táboa.
↬Puxen unha táboa completamente distinta xa que se lle pasas o cursor por riba dos cuadrados estes cambian a cor por uns segundos, de tal xeito que podes dibuxar nela.
Empezamos por como añadir unha tabla: Eu aprendín grazas a esta páxina.
Solo tes que copiar o código e modificalo ao teu gusto, eu xa cho deixo aquí;
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr>
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
NOTA: Cabe destacar que esta función vai dentro da etiqueta <body>.
E así quedaría esta táboa;
Seguimos cos botóns, para esto entramos na páxina anteriormente mencionada, alí podemos modificalo, así:
Eu, persoalmente cambiarialle o nombre de .btn por button.
Por último explicareivos como facer a táboa na que se pode dibuxar;
Primeiro creamos unha táboa ao noso gusto.
Deseguido, imos ao documento estilos.css(xa que é unha función) e este é o código que utilicei, pero, como en todo podemos cambiar as coras, os tamaños...
Que por certo unha forma para ter moita variación de cores é utilizar o código html que se non queremos perder tempo podemos utilizar páxinas como esta.
table{
border: 2px solid
}
td{
border: 2px solid black;
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-webkit-transition: all 3s ease-in;
transition: all 3s ease-in;
background: #ffccff;
padding:20px;
}
td:hover{
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
-webkit-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
background: black;
padding:20px;
}s
MOITAS GRAZAS POLA VOSA ATENCIÓN.
Estupendo, Eva!
ResponderEliminarAlgún apunte:
Non é preciso que saúdes en todas as formas :)
O texto én verde pequeno é un chisco raro.
Empregar unha fonte monoespaciada para o código axuda a diferencialo e é unha convención.
Tenta que o código que pos sexa significativo, se cadra podiamos eliminar algunha parte do código da táboa e facer o artigo máis amigable.
Moi ben as capturas de pantalla para os botóns e táboa.
Segue así!