Pesquisar na Comunidade
Mostrando resultados para as tags ''escola de website''.
Encontrado 3 registros
-
css Aula 5 - Introdução ao CSS, como utilizar estilos
um tópico no fórum postou Lordfire Tutoriais de Websites
E aí galera, finalmente vamos começar a deixar tudo mais bonito usando CSS! Mas não esqueça de acompanhar todas as aulas! Como vocês já devem saber, o CSS é uma linguagem que serve para adicionar estilização às nossas páginas. Isso é feito por meio de uma folha de estilos, que é um conjunto de seletores, propriedades e valores. Para usar o CSS, temos três formas: em um arquivo externo, no cabeçalho e inline. Para usar um arquivo externo com css, dentro das tags <head> você deve adicionar o seguinte código: <link rel="stylesheet" href="arquivo.css" /> Lembrando de mudar "arquivo.css" para o nome do arquivo que você for usar. Eu costumo usar "style.css" ou com o mesmo nome da página, se necessário. O conteúdo desse arquivo deve ser apenas o código CSS, sem nada de HTML. Já para usar no cabeçalho dentro do head, devemos usar a tag <style> e dentro dela, o código CSS: <head> <style> p { color: blue; font-weight: bold; } </style> </head> Também podemos usar estilos "inline", isto é, no meio do código HTML para aplicar estilos a um único elemento, usando o atributo style que já usamos em aulas anteriores. Por exemplo: <p style="color: blue; font-weight: bold;">Texto azul e negrito</p> Obviamente, é possível misturar todos os três tipos. É bastante comum uma página que tem um layout padrão para todas as páginas (com arquivo externo), algumas páginas terem elementos que precisam de estilos específicos (com CSS no cabeçalho) e um ou outro elemento que tenha seu próprio estilo (usando inline). Tudo vai da necessidade e facilidade pra alterar depois. Seletores Um seletor nada mais é do que o elemento que desejamos aplicar o estilo. Existem três tipos de seletores: por tipo, por id e por class. Seletor por tipo Quando usamos um seletor por tipo, nós aplicamos um estilo a todos os elementos daquele tipo. Por exemplo: p { color: blue; font-weight: bold; } Esse código CSS fará com que todos os elementos <p> tenham o texto azul (color: blue) e negrito (font-weight: bold). Em uma página com mais de um, todos eles terão o mesmo estilo. Seletor por id Usando um seletor por id, nós aplicamos estilo a um único elemento identificado pelo atributo id específico. Para isso, devemos usar um hash (o jogo da velha: "#") na frente do id do elemento: <head> <style> p#azul { color: blue; font-weight: bold; } </style> </head> (...) <p id="azul">Texto azul e negrito</p> <p>Texto normal sem estilo</p> Também é possível omitir o tipo do elemento: #azul { color: blue; font-weight: bold; } Produzindo um texto azul e negrito. Tome cuidado: o id foi feito para identificar um elemento específico, portanto, evite usar o mesmo id para elementos diferentes. Use classes, que serão ensinadas agora: Seletor por class Um seletor por classes aplica estilo por todos os elementos identificados por um atributo "class". Um seletor para uma classe específica deve ter um ponto (".") na frente: <head> <style> p.azul { color: blue; font-weight: bold; } </style> </head> (...) <p class="azul">Texto azul e negrito</p> <p id="azul">Texto normal sem estilo</p> Note que também não é necessário usar o elemento na frente. Mas, neste caso, podem existir elementos diferentes com a mesma classe, e podemos trabalhar com isso: <head> <style> .azul { color: blue; } a.azul { background-color: black; } p.azul { font-weight: bold; } </style> </head> (...) <a class="azul" href="http://xtibia.com">XTibia!</a> <p class="azul">Texto azul e negrito</p> Limitando a classe para um elemento específico, vamos ter tanto o link quanto o parágrafo em azul, porém apenas o link terá fundo preto e apenas o parágrafo estará negrito. Você pode aplicar múltiplas classes em um mesmo elemento usando espaços: <p class="azul fundo_vermelho center">Texto azul e negrito</p> Uma classe ou id nunca deve começar por um número! Só o esquisito Internet Explorer aceita isso, hahahaha Podemos trabalhar com os 3 seletores juntos, inclusive usando inline: <style> p { color: blue; } a.azul { background-color: black; } #azul { font-weight: bold; } </style> (...) <p id="azul" class="azul" style="text-align: center;">Texto azul, com fundo preto e negrito, centralizado</p> Mas não esqueça, o CSS tem uma ordem específica para ser aplicado: Arquivos externos, de cima pra baixo Tag style, de cima pra baixo Atributo style (inline) Portanto, não importa o que o arquivo externo aplique ou as tags no cabeçalho, se houver alguma tag inline, ela vai substituir (mas nunca apagar: apenas soma). Aqui há uma lista com todas as propriedades disponíveis: http://www.w3schools.com/cssref/default.asp Para ver os valores possíveis, clique no nome da propriedade. Você pode me perguntar sobre isso, ou me esperar ensinar algumas das principais possibilidades nas próximas aulas. -
html Aula 3 - Tabelas, linhas e células, legendas
um tópico no fórum postou Lordfire Tutoriais de Websites
Confira também as duas primeiras aulas para não ficar perdido: http://www.xtibia.com/forum/topic/205838-aula-2-listas-ordenadas-listas-nao-ordenadas-listas-de-definicao/ Nesta terceira aula vou ensinar tabelas. Tabelas Tabelas são conjuntos de células, divididas em colunas e linhas, e servem para mostrar dados tabulados. Embora muitos ditos "desenvolvedores" usem tabelas pra fazer layouts dos sites, isso NÃO é recomendado e eu vou ensinar isso usando divs e CSS. Tabelas são definidas pela tag <table> e possuem vários elementos internos para organizar. Como exemplo, vamos construir uma tabelinha com os stages de um servidor. Dentro da tag table, nós usamos as tags <tr> (table row) para definir uma linha e, dentro dessa linha, <td> (table data) para definir uma célula. Também podemos usar o atributo "border" para definir a espessura da borda, em pixels, mas em breve vamos mudar isso. Assim: <table border="1"> <tr> <td>Level mínimo</td> <td>Level máximo</td> <td>Stage</td> </tr> <tr> <td>~~</td> <td>50</td> <td>100x</td> </tr> <tr> <td>100</td> <td>200</td> <td>50x</td> </tr> <tr> <td>200</td> <td>~~</td> <td>10x</td> </tr> </table> Bem básico né? Mas essa primeira linha não ficou legal... que tal se a gente dividir a tabela em uma linha de cabeçalho? Também é possível! As tabelas podem usar as tags <thead> (table head), <tfoot> (table footer) e <tbody> (table body) (NESTA ORDEM) para separar cabeçalhos, rodapés e corpo da tabela. Dentro do thead, usamos a tag <th> (table header) ao invés de tr para destacar o cabeçalho. Por exemplo: <table border="1"> <thead> <tr> <td>Level mínimo</td> <td>Level máximo</td> <td>Stage</td> </tr> </thead> <tbody> <tr> <td>~~</td> <td>50</td> <td>100x</td> </tr> <tr> <td>100</td> <td>200</td> <td>50x</td> </tr> <tr> <td>200</td> <td>~~</td> <td>10x</td> </tr> </tbody> </table> Além disso, nós também podemos usar a tag <caption> para definir a legenda/título de uma tabela! Ao invés de usar um heading fora da tabela, isso facilita nosso trabalho <table border="1"> <caption>Stages do servidor</caption> <thead> <tr> <th>Level mínimo</th> <th>Level máximo</th> <th>Stage</th> </tr> </thead> <tbody> <tr> <td>~~</td> <td>50</td> <td>100x</td> </tr> <tr> <td>100</td> <td>200</td> <td>50x</td> </tr> <tr> <td>200</td> <td>~~</td> <td>10x</td> </tr> </tbody> </table> É importante saber usar todos estes elementos na hora de fazer seu site. Embora haja pouca diferença visual, por exemplo, ao colocar o th, na prática isso é bom para ferramentas de pesquisa e é um bom costume. A tarefa da vez vai usar esta aula e a anterior: imagine um servidor fictício, e faça uma página com o título, uma lista com as skill rates e uma tabela com os stages (como nos exemplos acima). Se quiser, use imagens, links e os outros elementos da primeira aula também. -
html Aula 2 - Listas ordenadas, listas não-ordenadas, listas de definição
um tópico no fórum postou Lordfire Tutoriais de Websites
Se você não acompanhou a aula anterior, faça isso agora: http://www.xtibia.co...inks-e-imagens/ Para organizar as coisas, o HTML nos permite estruturas básicas de listas e tabelas. Vou começar pelas listas: Listas As listas são divididas em 3 tipos: temos as listas ordenadas (que são tipo 1, 2, 3 ou i, ii, iii); temos as listas não-ordenadas, que são as com pontinho na frente; e temos as listas de definição, que são listas de itens e suas descrições. Listas ordenadas A tag da lista ordenada é <ol> (ordered list), e cada um dos itens é um elemento <li> (list item). Assim: <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> O resultado é este: As listas ordenadas tem 5 tipos diferentes de ordem: por números, letras maiúsculas, letras minísculas, números romanos maiúsculos, e números romanos minúsculos. Também existem diversos outros tipos especiais, como ideogramas japoneses, números armênios, letras gregas... mas só vou tratar destes 5. Você pode me perguntar se quiser outro. Para alterar, você tem que colocar, no atributo style, o código list-style-type: <tipo>. Nos 5 tipos, na ordem: <ol style="list-style-type: decimal"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> <ol style="list-style-type: upper-latin"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> <ol style="list-style-type: lower-latin"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> <ol style="list-style-type: upper-roman"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> <ol style="list-style-type: lower-roman"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> Usar o atributo style é, essencialmente, usar CSS. Então, que isso sirva como introdução para nossas aulas futuras Listas não-ordenadas Já as listas não-ordenadas tem apenas 3 tipos: círculo, disco e quadrado. Da mesma forma que nas listas ordenadas, você usará o list-style-type, só que a tag é <ul> (unordered list): <ul style="list-style-type: circle"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ul style="list-style-type: disc"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <ul style="list-style-type: square"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> Em ambos os casos, tanto listas ordenadas quanto listas não-ordenadas, você pode definir list-style-type como none para não ter nenhuma marcação: <ul style="list-style-type: none"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> Listas de definição O terceiro tipo de lista, a lista de definição (<dl>), é diferente: você tem um item (<dt> (definition topic)), e debaixo dele adiciona a(s) descrição(ões) (<dd> (definition description)). Assim: <dl> <dt>Café</dt> <dd>Quente</dd> <dd>Preto</dd> <dt>Leite</dt> <dd>Frio</dd> <dt>Chocolate</dt> <dd>Melhor se quente</dd> <dd>Marrom</dd> </dl> Pode ter quantas descrições forem necessárias. O recuo é automático e não há configuração. Não vou definir uma tarefa pra essa aula, mas testem, mexam com as listas, insiram uma lista dentro da outra pra ver como fica, vejam os resultados, pratiquem! qualquer dúvida, responderei de prontidão.