HTML e CSS Profa. Cintia Carvalho Oliveira Doutoranda em Ciência da Computação – UFU Mestre em Ciência da Computação – UFU Bacharel em Ciência da Computação - UFJF
HTML http://www.w3schools.com/html/DEFAULT.asp
Introdução a HTML (HYPER TEXT MARKUP LANGUAGE) Linguagem para descrever páginas Web Consiste normalmente de um cabeçalho e um corpo definidos por tags Os browsers são encarregados de interpretar as tags e formatar o texto adequadamente Não é uma linguagem de programação Possui extensão htm ou html HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores.
Tags em HTML São delimitados por < e > Não são case-sensitive Forma geral: <tag> texto </tag> Outras formas: <tag atributo=“valor”> texto </tag> <tag /> <br> <hr> As tags HTML podem ser escritas com letra maiúsculas ou minúsculas. Tags que não possuem finalização (</tag> ou />) não agem sobre um texto, mas produzem um efeito na visualização da página, no lugar onde são inseridas.
Exemplo de tags <b>Texto em negrito</b> <strong> Texto em negrito </strong> <h1><b>Tags aninhadas</b><h1/> <img src="constr4.gif" width="144" height="50" /> A tag <b> define um texto em negrito, a tag <h1> define um cabeçalho do texto usando uma fonte maior, a tag <img> é usada para inserir uma figura na página html, os atributos dessa tag definem características para a imagem como altura, largura e apontador para o local do recurso. http://www.w3schools.com/tags/default.asp
Estrutura de um documento HTML <html> <head> <title>Título</title> </head> <body> <p> Conteúdo </p> </body> </html> Cabeçalho Corpo A tag <html> define o início e o fim do documento HTML. A tag <head> define o cabeçalho e a tag <body> define o corpo do documento. A tag <title> define o título que aparece no browser.
Tag de quebra de linha e parágrafo <br> e <p></p> <br> é usada para pular linha <p> é utilizado para definir um parágrafo Teste <br /> de quebra de linha <p> Este é um parágrafo </p> <p> Este é outro </p>
Tag de linha <hr> Usada para separar conteúdo – desenha uma linha <h1>HTML</h1> <p>HTML é uma linguagem de descrição web.....</p> <hr> <h1>CSS</h1> <p>CSS define como o HTML será exibido... </p>
Lista ordenada <ol> Atributos da tag type -> Define como será exibida a numeração (1, A, a, I, i) <ol> <li>Cofé</li> <li>Chá</li> <li>Leite</li> </ol>
Lista não ordenada <ul> <ul> <li>Cofé</li> <li>Chá</li> <li>Leite</li> </ul>
Tag <img> Usada para inserir uma figura no documento HTML Atributos da tag alt -> define uma descrição da imagem src -> define a url da imagem height -> define a altura da imagem em pixels width -> define a largura da imagem em pixels <img src=“logoIftm.gif" alt=“Logo do IFTM" /> A tag <img> permite inserir uma figura no documento HTML e os seus atributos permitem definir características da exibição da mesma.
Tag de link <a> Usada para criar um link para outro documento ou para apontar para um lugar específico no documento atual Atributos principais href -> define a localização do documento de destino name -> define rótulo para definir um lugar específico da página target -> define como o link será exibido _blank -> nova página _self -> mesma página <a href="http://www.iftm.edu.br">Site do IFTM!</a> <a href=“index.html#topo”>Voltar ao topo</a> <a name=“topo”>Topo da página</a> A tag <a> define um link para outro documento, o atributo mais importante é o href, que indica a url do documento.
Tabelas <table> São definidas com a tag <table> São divididas em linhas (<tr>) e as linhas são divididas em colunas (<td>) <table > <tr> <td>linha 1, célula 1</td> <td>linha 1, célula 2</td> </tr> </table> As tabelas são muito úteis para organizar os elementos em uma grade.
Atributos de tabela Border -> define o tipo de borda da tabela Colspan -> define quantas colunas uma célula ocupará Rowspan -> define quantas linhas uma célula ocupará O atributo border com valor igual a zero (border=“0”) esconde a borda da tabela,
Formulários <form> Formulários permitem que o usuário informe dados para serem processados pela aplicação Normalmente os elementos de um form são: text fields, text area, checkboxes, radio button... A tag <form> não pode ser aninhada Os formulários são fundamentais para permitir que o usuário possa submeter dados para serem processados no servidor. O atributo name identifica o form dentro da página html, o atributo method indica qual método do protocolo HTTP será usado para submeter os dados (GET ou POST), o atributo action define para qual url os dados serão submetidos
Passos na submissão de um formulário O navegador envia os dados do formulário para o servidor O servidor ativa a url especificada através do atributo action O tipo do método definido no atributo method define como os dados enviados pelo formulário serão acessados O método padrão, caso não haja especificação, é o GET É boa prática usar o método POST A submissão de um formulário é uma forma de enviar dados ao servidor, o usuário informa os dados para que uma determinada ação seja executada e uma resposta seja exibida ao usuário. Os dois métodos mais comuns passados no method são GET e POST. A diferença básica entre eles é a forma como os dados são enviados. O método GET envia os dados dentro da url e possui um tamanho limitado para os dados enviados. O método POST envia os dados dentro da mensagem HTTP, portanto não são passados dentro da url e o tamanho dos dados é ilimitado.
Formulários <body> <form action=“processaForm.jsp" > Nome: <input type="text" name="firstname"><br /> Sobrenome: <input type="text" name="lastname"><br /> Senha: <input type="password" name="senha"> <input type="submit" value="Enviar"> </form> </body> URL após clicar no botão: .../sirius/processaForm.jsp?firstname=Carlos&lastname=Bazilio&senha=abcdefg
Formulários Quando algum elemento do tipo “submit” é inserido num formulário e acionado, seus dados são enviados para um arquivo O arquivo mencionado é indicado pelo atributo “action” do elemento <form> Este arquivo deverá estar armazenado num servidor web (Apache, Tomcat, IIS, ...), e estará escrito em alguma linguagem de programação de servidores: jsp, php, asp, sevlets, ...
Elementos de um <form> Campos de texto, senha e hidden Campo de texto: Name: <input type="text" name=“login"> Campo de senha Senha: <input type=“password" name=“senha"> Campo hidden: <input type=“hidden" name=“methodToCall“ value=“1”> O campo de texto é útil para que o usuário possa digitar um texto qualquer para ser enviado na submissão do formulário, o atributo type tem que ser “text”. O campo de senha é útil para que o usuário possa digitar uma senha sem que outras pessoas vejam, basicamente é igual ao campo de texto, mas o atributo type tem que ser “password”. O campo hidden serve para enviar alguma informação ao servidor que não necessariamente foi passada pelo usuário. Um exemplo disso é definir qual método será executado na aplicação quando o formulário for submetido.
Radio buttons São usados quando é necessário que o usuário escolha uma opção dentre algumas oferecidas <input type="radio" name=“sexo" value=“masculino"> Masculino <input type="radio" name=“sexo" value="feminino"> Feminino Este elemento do form serve para definir opções mutuamente excludentes, se por exemplo, masculino for marcado, feminino é desmarcado. O atributo checked=“checked” pode ser usado para marcar uma opção por default
Checkboxes São usados quando o usuário pode escolher uma ou mais opções dentre algumas oferecidas <input type="checkbox" name="curso" value="basico"> Java basico <input type="checkbox" name="curso" value="web"> Java Web <input type="checkbox" name="curso" value="avancado"> Java avancado
Textarea É usado para que o usuário possa passar um texto com várias linhas <textarea name="informacoes" rows="2" cols="30">A carga horaria do curso de java web do citi totaliza 30 horas divididas em duas semanas. </textarea>
Button Define um botão com uma ação específica Pode conter textos e imagens Atributos onMouseOver, onClick podem especificar a ação do botão O atributo type é obrigatório com o valor “button” <button type="button“>Incluir</button> A diferença básica entre a tag button e o <input type=“submit”.... é que o button pode conter textos e figuras, a ação que ele executará pode ser especificada em algum dos seguinte atributos: onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup. Sempre é necessário usar o atributo type com o valor “button”
Drop-down list Cria uma lista com algumas opções que são exibidas quando o usuário clica <select> <option value=“1”>Sport</option> <option value=“2”>Sarna</option> <option value=“3”>Barbie</option> </select>
Formulários Tipos que podem ser utilizados com a tag <input>: button: Insere um botão checkbox: Insere um checkbox; para vários itens, basta inserirmos vários “inputs” deste tipo file: Insere botão seleção de arquivo através de uma caixa de diálogo hidden: Campo pertencente ao formulário, mas que não será exibido na página image: Insere uma imagem como um botão submit password: Insere um campo password (caracteres digitados não aparecem) radio: Insere um radiobox (análogo ao checkbox) reset: Restaura os valores iniciais do formulário submit: Encaminha os dados inseridos para algum arquivo text: Insere um campo de edição de texto
Outras tags de Formulários Descrição <form> Define um formulário para entrada do usuário <input> Define um campo de entrada <textarea> Define um campo texto com múltiplas linhas <label> Define um label para algum controle <fieldset> Desenha uma caixa em torno de um conjunto de elementos <legend> Define um título para um <fieldset> <select> Cria uma lista drop-down <optgroup> Criar uma hierarquia nas opções de uma lista drop-down <option> Uma opção na lista drop-down <button> Insere um botão. Difere de <input> por poder conter algum conteúdo, como uma imagem
Tag <div> Serve para dividir o documento em partes que apresentam características em comum Útil para adicionar CSS e alterar a visualização na tela <div id="lista1“ align="center"> <select> <option>Sport</option> <option>Sarna</option> <option>Barbie</option> </select> </div> O id da tag div pode ser usado para indicar qual estilo de fonte, cor... Que aquela região delimitada terá. No exemplo acima a lista ficará no centro da tela.
Prática 1 Implementar uma busca do google com opções de italiano e português (padrão) Deve usar: <div>, <img>, <form>, <table>, radio button
CSS
CSS Cascading Style Sheets Estilos definem como elementos html devem ser apresentados Permite a separação entre definição de conteúdo e formatação em HTML Style sheets externos são definidos através de arquivos CSS Atualmente é o padrão para inserção de estilo na construção de páginas html http://www.csszengarden.com/
seletor { propriedade: valor } CSS Formato geral: seletor { propriedade: valor } Uma definição de estilo em CSS será composta por uma sequência de definições Exemplos: body { color: black } p { font-family: “Verdana”; text-align: center; color: red } h1,h2,h3,h4,h5,h6 { color: green } p {margin-left: 20px}
seletor.classe { propriedade: valor } Classes em CSS Classes em CSS permitem que um mesmo elemento seja exibido de diferentes formas Formato usando classes: seletor.classe { propriedade: valor } Exemplos: p.direita {text-align: right} // Alinha à direita p.centro {text-align: center} // Centraliza .esquerda {text-align: left} // Aplicado a qualquer elemento html que contenha classe esquerda <p class=“direita”>Este parágrafo será alinhado à direita</p> <p class=“centro”>Este parágrafo será centralizado</p> <p class=“esquerda”>Este será à esquerda</p>
CSS em Link Externo Existem 3 maneiras se definir um CSS para um documento HTML Criando um link externo <html> <head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head> <body> Esta é minha primeira página. </body> </html> /* Conteúdo do arquivo mystyle.css */ hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}
CSS definido internamente <html> <head> <style type="text/css“> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head> <body> Esta é minha primeira página. </body> </html>
CSS inline <html> <head</head> <body style=“color: sienna; text-align: center”> Esta é minha primeira página. </body> </html>
Aplicações Com CSS podemos formatar: Background Textos Fontes Margens Bordas Listas Tabelas http://www.w3schools.com/css/css_examples.asp
Tableless Padrão que vem sendo adotado na web para uso massivo de html+css Objetiva, principalmente, melhor acessibilidade de páginas web Propõe a não utilização tabelas html para a construção do layout da página (origem do nome) Naturalmente, este uso não deveria ser evitado se o que se deseja construir é uma tabela de fato
Construindo um Layout CSS http://www.maujor.com/tutorial/layout-css-passo-a- passo.php
Diretrizes Construa em passos pequenos e teste cada passo em diferentes navegadores Desenvolva para navegadores modernos e depois adapte para os antigos Na fase de desenvolvimento e testes coloque a folha de estilos na seção HEAD da página Valide seu código HTML e CSS
1º Passo Decidir a qual nível de navegadores o layout será servido Existem os com diferentes níveis de suporte Suporte total às CSS Suporte parcial às CSS Conteúdos não estilizados
2º Passo – Escolher os containers do layout Analise o design da página e faça um esboço (pode ser em uma folha de papel)
3º Passo – Nomear os containers Nomeie de acordo com a finalidade de cada container. container header mainnav menu contents footer Se o container for único na página use Ids no lugar de Classes. Isso evita CSS conflitantes.
Nomeando containers
4º Passo – Criando as Marcações Começamos com uma declaração DOCTYPE strict que permite o uso de marcações CSS Ligamos o documento CSS ao arquivo HTML.
Criamos os blocos DIV
Referências http://www.codecademy.com/ http://www.w3c.br/pub/Cursos/CursoCSS3/css-web.pdf www.ic.uff.br/~bazilio/cursos/java/slides/HTML_CSS_Javascri pt.ppt www.cin.ufpe.br/~hsp/Modulo1e2.ppt www.maujor.com/tutorial/layout-css-passo-a-passo.php