ftofelipe 0 #1 Postado 9 Outubro, 2007 Bem vindo a Aula de XHTML. Primeira aula de 7 aulas que darei Neste tópico irei ensiná-los o básico de XHTML. Falarei sobre: 1.1 - Estrutura do documento 1.2 - CSS 1.2.1 - Regras 1.2.2 - Declaração e seletores 1.2.3 - Múltiplos seletores 1.2.4 - Valores 1.2.5 -Tags Especiais 1.2.6 - Classes 1.2.7 - Orientações 1.1 - Estrutura do documento Por trata-se de um documento de marcação utilizamos a denominação de tag para informar estas marcações, as quais estão os sinais de "<"e">". O documento possui um estrutura básica que é composta pelas seguintes tags: <html></html> - serve para identificar ao browser qual é o tipo de documento, esta tag deverá ser utlizada no início e fim de arquivo. <head></head> - dentro desta tags são incorporadas informações sobre o documento, tais como: títulos, palavras-chave e outras informações. <title></title> - define o título da página. <body></body> - é o local onde é desenvolvido o corpo do programa, ou seja, da página. Exemplo: <html> <head> <title> Minha Primeira Página</title> </head> <body> Esta é uma Página Web </body> </html> Segue abaixo, a foto como exemplo: 1.2 - CSS Para o novo estilo devemos trabalhar com o CSS - Cascading Style Sheet, ou simplesmente folha de estilo. O CSS possibilita aos desenvolvedores de páginas web realizar a formatação dos elementos em um página, assim como o HTML o CSS também é um linguagemde marcação, usado também na formatação de documentos XML. Os elementos de formação do CSS são incluídos diretamente na página através da tag <style> A idéia principal é realizar a formação do documento através do CSS e não utilizar mais as tags de formatação do HTML. O exemplo abaixo aplicar a cor azul ao fundo de uma página com letras brancas. <html> <head> <title> Formatando com CSS </title <style type="text/css"> <!-- body {backgorund:blue;color=white} //--> </style> </head> <body> Esta é uma Página Web </body> </html> Segue abaixo, a foto como exemplo: Desta forma, os atributos da tag <body> bgcolor e text não são mais utilizados. A notação "<!-- //-->" evita que browsers mais antigos que não suportam o CSS emitam mensagens de erro. Para usar os elementos de formatação do CSS podemos usar o estilo de forma incorporada, como o exemplo acima, ou in-line. <body style ="background-color:red"> O correto e utilizar os elementos de formatação de forma vinculado, com isso o mesmo documento de estilo poderá ser utilizado por outras páginas e poderá ser aproveitados por outros projetos. <html> <head> <title>Formatando com CSS </title> <link href="exemplo03.css" rel="stylesheet" type="text/css"> </head> <body> Esta é uma Página Web </body> </html> 1.2.1 - Regras As tags são tratadas como objetos, portanto, as tags <p>, <table>, etc são objetos e para cada objeto ou grupo de objetos podem ser atribuídos propriedades de estilos. P{color:blue;font-family:verdana} Ou H {color:blue; font-family:verdana} 1.2.2 - Declaração e seletores O conjunto de regras é composta por "{}" podendo ser aplicado a um ou mais seletores, desta forma temos a seguinte sintaxe: Seletores { declarações }, onde a declaração é composta por: {propriedade:valor} P {color:red; font-size:15} Caso exista mais de uma declaração, a mesma poderá ser separada por ponto e vírgula ";". P {color:red} P{font-size:15} As declarações novas são acrescentadas as declaraões anteriores, desde que, não sejam do mesmo tipo. 1.2.3 - Múltiplos seletores Durante a declaração podemos identificar vários seletores. P,H1,B {color:red} 1.2.4 - Valores De acordo com a propriedade de alguns seletores, podemos informar os valores de diferentes formas: por expressões, valores ou em porcentagens: B {color:red} B {color:FF0000} B {color:rgb(255,0,0)} B {color:rgb(100%,0%,0%)} 1.2.5 - Tags Especiais No CSS temos duas tags <span> e <div>, onde: <span> - pode ser usado dentro de um bloco de texto, pois não quebra a linha antes ou depois. <div> - é utilizada para definir um bloco ou seção de página 1.2.6 - Classes As classes possibilitam que ocorra variação na definição de estilos de um determinado objeto, ou seja, vários estilos para a mesma tag. Para realizar este processo precisamos utilizar a tag <class>. Exemplo <html> <head> <title>Formatando com CSS </title> <style type="text/css"> <!-- b.cor1{color:red} b.cor2{color:blue} b.cor3{color:green} //--> </style> </head> <body> <b class="cor1"> Utilizando a cor 01 </b> <b class="cor2"> Utilizando a cor 02 </b> <b class="cor3"> Utilizando a cor 03 </b> </body> </html> Caso tenha a necessidade de criar uma classe sem estar vinculada com uma tag, podemos definir um identificador, usando o atributo "ID" ´recedido do sinal de "#". <html> <head> <title>Formatando com CSS </title> <style type="text/css"> <!-- #cor1{color:red} #cor2{color:blue} #cor3{color:green} //--> </style> </head> <body> <span id="cor1"> Utilizando a cor 01 </b> <span id="cor2"> Utilizando a cor 02 </b> <span id="cor3"> Utilizando a cor 03 </b> </body> </html> 1.2.7 - Orientações 1 - Não devemos esquecer de fechar as tags, todas devem estar devidamente fechadas <html></html>, <body></body>, etc. 2 - Não devemos esquecer de encerrar as tags solitárias, em vez de utilizarmos <br>, devemos escrever <br/> 3 - Escreva todas as tags e atributos em letras minúsculas. 4 - Todos os atributos em XHTML, devem estar entre "ASPAS". -------------------------------------------------- Fim da primeira aula de XHTMl. Espero ter ajudado em algum problema, logo postarei mais uma aula com continuação. Obrigado, ~FtÓ~ Compartilhar este post Link para o post Compartilhar em outros sites
Pedroddcunha 3 #2 Postado 9 Outubro, 2007 Interessante - Aprovado - Compartilhar este post Link para o post Compartilhar em outros sites
ftofelipe 0 #3 Postado 11 Outubro, 2007 Por favor alguem fexe este tópico existe dois tópicos iguais, o correto é o que está no tutorial para web. Atenciosamente, ~FtÓ~ Compartilhar este post Link para o post Compartilhar em outros sites
Toddy 0 #4 Postado 16 Outubro, 2007 existe nao .. eu soh vi esse por aki >.<.. me passa os otros ?? Compartilhar este post Link para o post Compartilhar em outros sites
Zortan 0 #5 Postado 30 Outubro, 2007 Nunca vo entender isso o.o Compartilhar este post Link para o post Compartilhar em outros sites
Kyoras 0 #6 Postado 8 Novembro, 2007 bopmm tuto aprovadu Compartilhar este post Link para o post Compartilhar em outros sites
ftofelipe 0 #7 Postado 11 Novembro, 2007 As outras aulas estão aki. 1° Aula 2°aula 3° Aula Obrigado, ~FtÓ~ Compartilhar este post Link para o post Compartilhar em outros sites
Eratsu 37 #8 Postado 4 Dezembro, 2008 Õ loco mulek! isso mi ajudo muito, eu tava doidao aonde achar essa parada de mudar a background! Compartilhar este post Link para o post Compartilhar em outros sites
Sethz 0 #9 Postado 12 Janeiro, 2009 Bom Tuto! vlw por compartilhar =] t+ Compartilhar este post Link para o post Compartilhar em outros sites
gustavo91 0 #10 Postado 11 Fevereiro, 2009 aewww eu tava buscando algo parrecido mais tava muto complicado de axa valew aeww:w00t::loool: Compartilhar este post Link para o post Compartilhar em outros sites
