To a um tempinho sem postar nada pra vocês né?!
Hoje eu vou ensinar pra vocês um tutorial mega fácil de como fazer uma apresentação, mais conhecido como sobre mim, muito linda.
Vamos aprender?!
1° passo:
P: Mas pq Super?
R: Nesse site você vai poder ver como está ficando sua apresentação.
2° passo:
Depois de abrir esse site apague o que está escrito na parte azul, automaticamente o que está na parte branca será apagado.
P: Mas pq tem que apagar?
R: Será na parte azul que você vai colar os códigos HTML e na parte branca que vai aparecer como está ficando.
3° passo:
P: Qual a diferença diferença entre os dois?
R: O primeiro é bem mais completo, mas eu costumo usar o segundo.
4° passo:
Agora que você já abriu todos os sites necessários escolha uma dessas bordas para sua apresentação. Claro que se você não quiser não precisa colocar.
<p style="background-color: #CC0099; height:50px; width: 100px; border: 10px solid #CC6699; text-align:center; font-size: 20px;"><font color="#FF99FF" face="courier new">Seu texto</font></p>
Pontilhado
<p style="background-color: #CC0099;height:50px; width: 100px; border:10px dotted #CC6699; text-align:center; font-size: 20px;"><font color="#ff99ff" face="courier new">Seu texto</font></p><p
Tracejada
<p style="background-color: #CC0099;height: 100px; width: 100px; border: 8px dashed #FF1493; text-align:center; font-size: 20px;"><font color="#ff99ff" face="courier new">Seu texto</font></p><p
Borda dupla
<p style="background-color: #CC0099;height:50px; width: 100px; border: 10px double #9932CC; text-align:center; font-size: 20px;">dede<font color="#ff99ff" face="courier new">Seutexto</font></p><p
Borda dupla junta
<p style="background-color: #CC0099;height:50px; width: 100px; border: 10px groove #9932CC; text-align:center; font-size: 20px;"><font color="#ff99ff" face="courier new">Seu texto</font></p><p
Caixa de texto
<p style="background-color: #cc0099;height: 100px; width: 400px;overflow: auto; text-align: center;font-size: 80px";">Vc pode escrever qualquer coisa<br>
<span style="color:#cc0099; font-family: Georgia; font-size: 14px; text-shadow: 0px 0px 3px blue">Escreva alguma coisa aqui<br>
Agora que eu já passei o código para vocês, vocês podem modificar o tamanho, cor da letra, cor do fundo e cor da borda, querem aprender? Então Vem comigo!
Antes de começar a modificar peguem o código que vocês escolheram copiem e passem para aquele site que eu passei lá no começo (WWW)
Na parte onde está escrito background-color:#cc0099 é a cor do fundo, você pode trocar por várias cores. O código da cor é o que vem depois do # então para modificar você deve entrar naquele site que eu passei lá no início (WWW) escolher uma cor, copiar o código e colar, mas somente no local onde tá o #cc0099
Na parte onde tá escrito height: 100px; width: 400px são a altura e largura, vá alternado até você achar que está bom.
Onde está escrito center;font-size: 80px center significa centro, ou seja, o que você escrever ficará alinhado no centro. a parte font-size: 80px significa o tamanho da letra, você também pode modificar até achar que está bom.
Na parte <span style="color:#cc0099; é onde você pode alterar a cor da letra, mas lembre-se só troque o código #cc0099 , ou seja, só troque o código depois do # e antes do ponto vírgula.
Se quiser colocar sombra do lado de fora da borda copie esse código e cole antes de Font-size
Código da sombra
box-shadow: #191970 1px 0px 5px, #473C8B 7px 3px 1px; color: #f5f5dc;
Para trocar a cor da sombra é do mesmo jeito que troca a cor da letra. (bláh, bláh, bláh) Eu já expliquei mas vou falar de novo.
O código da cor é o que vem depois do # então para modificar você deve entrar naquele site que eu passei lá no início (WWW) escolher uma cor, copiar o código e colar, mas somente no local onde tá o #cc0099. Agora vamos falar sobre a largura da sombra, para você mudar a altura da sombra e tal, é só mudar os números que vem antes de px , vou falar a ordem das sombras (qual é a pra chegar pra esquerda e tal)
O primeiro px é para a borda chegar pra direita ou esquera, para a direita é só você colocar o número que quiser, se você quiser que ela vá para a esquerda coloque um - antes do número (Ex: -10px).
O segundo px é para a sombra ir para baixo ou para cima, para baixo é só você colocar qualquer número até você achar que fique bom, para cima é só você colocar um - antes do número (so mesmo jeito que o primeiro px).
O terceiro px é para você decidir o quão desfocada ficará a sombra, para desfocar é só fazer do mesmo jeito que os outros px (aumentar o número, o mesmo se aplicará se você colocar o - antes do número).
Eu preparei uma apresentação pra vocês, mas é sempre bom a gente personalizá-la do nosso jeitinho né?! o código vai estar na caixa de texto abaixo
Ahh já estava esquecendo, para salvar a apresentação no stardoll, copie todo o código HTML cole no stardoll e salve, logo após isso você vai perceber que não ficou direito, então, clique em editar e salve de novo, feito isso sua apresentação estará salva.
na apresentação que eu fiz para vocês não está com o nome de vocês é claro, então é melhor vocês alterarem as informações depois de salvar duas vezes, pois se vocês apagarem alguma coisa que não deve irá tudo por água abaixo, e outra coisa, para pular linha não adianta apertar
enter.
bjoss :)
