Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
aula html
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Rodrigo Fiorin | FLCADS
Introdução ao Desenvolvimento de Sistemas Web
UNIDADE II
Fundamentos de Html
O HTML HTML (Hyper Text Markup Language) é uma linguagem de formatação hipertexto para descrever documentos web (páginas web).
É uma linguagem de marcação que usa um conjunto de tags de marcação.
Utilizando Tags Html
As tags são comandos de formatação de hipertextos específicos e distintos, colocados em um documento html para que o browser possa interpretá-lo.
São representadas pelos sinais: < >
A maioria das tags são usadas em pares e a tag que finaliza possui uma barra / após o sinal de menor que.
Exemplo: <html> </html>
A declaração DOCTYPE define o tipo de documento
O texto entre <html> e </ html> descreve o documento web
O texto entre <body> e </ body> descreve o conteúdo da página visível
O texto entre <h1> e </ h1> descreve um título
O texto entre <p> e </ p> descreve parágrafo
Headings
Cabeçalhos HTML são definidos com as tags <h1> até <h6>.
Parágrafos
Parágrafos HTML são definidos com a tag <p>.
Links
Links em HTML são definidos com a tag <a>.
Imagens
São definidas com a tag <img>.
O arquivo de origem (src), um texto alternativo (alt) e tamanho (largura e altura) são fornecidos como atributos.
Atributos de HTML
Fonte: Caderno de estudos, p. 96.
Atributos de HTML
No caderno de estudos temos uma lista de atributos, onde podemos destacar:
Atributo Descrição
alt Especifica um texto alternativo para uma imagem.
href Especifica a URL (endereço web) de um link.
src Especifica a URL (endereço web) para uma imagem.
title Especifica informação extra sobre um elemento
(exibido como uma dica de ferramenta).
value Especifica o valor (conteúdo de texto) para um
elemento de entrada.
Quebras de Linha
<br> define uma quebra de linha. Use <br> se você quiser uma quebra de linha (uma nova linha) sem iniciar um novo parágrafo.
<pre> define um bloco de texto pré-formatado, com espaços e linhas estruturadas.
Estilos
Utilizado para mudar o estilo padrão de um elemento HTML.
Estrutura: style = "propriedade : valor "
Cores de texto
A propriedade color define a cor do texto a ser usada para um elemento HTML.
Fontes de Texto
A propriedade font-family define a fonte a ser usada para um elemento HTML.
Tamanho da Fonte
A propriedade font-size define o tamanho do texto a ser usado para um elemento HTML.
text-align define o alinhamento do texto horizontal para um elemento HTML.
Elementos de Formatação
<b> define o texto em negrito.
<strong> define texto com ênfase.
<i> define o texto em itálico.
<em> define texto enfatizado, com importância semântica.
<small> define pequeno texto.
<mark> define marcado ou texto destacado.
<del> define excluída (retirada) de texto.
<ins> define sublinhado no texto inserido.
<sub> define o texto subscrito.
<sup> define o texto sobrescrito.
Comentários
Podemos inserir comentários dentro do código-fonte, o qual não resultará em nenhum comando a ser interpretado pelo browser.
<! – Escreva aqui seus comentários ->
Frames
Frames e frameset em html são utilizadas para apresentar várias páginas em uma mesma tela do browser.
A tag <frame> define uma determinada janela (frame) dentro de um <frameset>.
Tabelas
Servem para organizar textos, figuras, formulários dentro de colunas e linhas que formam as células.
As tabelas são definidas com a tag <table>.
Em linhas da tabela com a tag <tr>.
Em dados da tabela com a tag <td>.
Formulário
A tag <form> é usado para criar um formulário HTML.
Outros tipos de campos
<input type = "password"> define um campo de senha.
<input type = "radio"> define um botão de rádio.
<type = "checkbox" input> define uma caixa de seleção.
<input type = "submit"> define um botão de envio.
Listas
<ul> lista não ordenada.
<ol> lista ordenada.
<li> item da lista.
NetBeams
NetBeams
NetBeams
NetBeams
NetBeams
NetBeams
NetBeams
Configurando um Projeto de Aplicação Web
Selecione Arquivo > Novo Projeto (Ctrl-Shift-N) no menu principal. Em Categorias, selecione Java Web. Em Projetos, selecione Aplicação Web e clique em Próximo.
Na Etapa 2, indique HelloWeb na caixa de texto Nome do Projeto.
Especifique a Localização do Projeto para qualquer diretório no computador. Para fins deste tutorial, esse diretório é chamado de $PROJECTHOME .
(Opcional) Marque a caixa de seleção Utilizar Pasta Dedicada para Armazenamento de Bibliotecas e especifique o local da pasta de bibliotecas.
Clique em Próximo. O painel Servidor e Definições é aberto. Selecione a versão de Java EE que deseja usar com seu aplicação.
Selecione o servidor no qual deseja implantar a aplicação. Somente os servidores registrados com o IDE serão listados. Observe que o Caminho de Contexto (ou seja, no servidor) se torna /HelloWeb , que se baseia no nome dado ao projeto na etapa anterior.
Clique em Finalizar.
NetBeams
O IDE cria a pasta do projeto $PROJECTHOME/HelloWeb. Você pode exibir a estrutura de arquivos do projeto na janela Arquivos (Ctrl-2) e sua estrutura lógica na janela Projetos (Ctrl-1):
A pasta do projeto contém todas as fontes e metadados do projeto, como o script de construção Ant do projeto. O projeto HelloWeb é aberto no IDE. A página de boas-vindas, index.jsp , é aberta no Editor de Código-Fonte na janela principal.
Observação. Dependendo do servidor e da versão de Java EE especificada quando você criou o projeto, o IDE pode gerar index.html como a página de boas-vindas do projeto Web. Você pode executar as etapas deste tutorial e usar o arquivo index.html ou pode usar o assistente Novo Arquivo para gerar um arquivo index.jsp para usar como a página de boas-vindas, caso você delete o arquivo index.html .
NetBeams
Criando e Editando Arquivos de Origem de Aplicações Web
A criação e edição de arquivos de origem é a função mais importante do IDE. Afinal de contas, é isto o que você faz na maior parte do tempo. O IDE fornece uma ampla variedade de ferramentas que podem complementar o estilo pessoal de qualquer desenvolvedor, tanto se você preferir codificar tudo manualmente quanto se quiser que o IDE gere grandes blocos de código para você.
Criando um Pacote Java e um Arquivo de Origem Java
Na janela Projetos, expanda o nó Pacotes de Códigos-Fonte. Observe que o nó Pacotes de Código-Fonte contém somente um nó de pacote default vazio.
Clique com o botão direito do mouse no nó Pacotes de Código-Fonte e selecione Nova > Classe Java. Indique NameHandler na caixa de texto Nome da Classe e digite org.mypackage.hello na caixa de combinação Pacote. Clique em Finalizar. Observe que o novo arquivo NameHandler.java será aberto no Editor de Código-Fonte.
No Editor de Código-Fonte, declare uma variável String digitando a linha seguinte diretamente abaixo da declaração da classe.
String name;
NetBeams
Adicione o construtor a seguir à classe:
public NameHandler() { }
Adicione a linha a seguir no construtor NameHandler() :
name = null;
NetBeams
Gerando os Métodos Getter e Setter
Clique com o botão direito do mouse no campo name do Editor de Código-Fonte e selecione Refatorar > Encapsular Campos.
A caixa de diálogo Encapsular Campos será aberta, listando o campo name . Observe que a Visibilidade do Campo é definida por default como privada, e a Visibilidade dos Acessadores como pública, indicando que o modificador de acesso da declaração da variável da classe será especificado como privado, enquanto os métodos getter e setter serão gerados com os modificadores public e private , respectivamente.
NetBeams
Clique em Refatorar.
Os métodos getter e setter são gerados para o campo name . O modificador da variável de classe é definido como private enquanto os métodos getter e setter são gerados com modificadores públicos. A classe Java deverá ser semelhante a:
package org.mypackage.hello;
/** * * @author nbuser */
public class NameHandler {
private String name; /** Creates a new instanceof NameHandler */
public NameHandler() {
name = null;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
NetBeams
Editando o Arquivo JavaServer Pages Default
Focalize novamente o arquivo index.jsp , clicando em sua guia exibida na parte superior do Editor de Código-Fonte. 2. Na Paleta (Ctrl-Shift-8) localizada à direita do Editor de Código-Fonte, expanda Forms HTML e arraste um item Form para um ponto após as tags <h1> do Editor de Código-Fonte.
A caixa de diálogo Inserir Form será exibida.
Especifique os valores a seguir:
Ação: response.jsp
Método: GET
Nome: Form de Entrada de Nome
Clique em OK. Um form HTML será adicionado ao arquivo index.jsp .
NetBeams
Arraste um item Entrada de Texto para um ponto antes da tag </form> , em seguida, especifique os seguintes valores:
Nome: nome
Tipo: texto Clique em OK. Uma tag HTML <input> será adicionada entre as tags <form> . Delete o atributo value dessa tag.
Arraste um item Botão para antes da tag </form> . Especifique os valores a seguir:
Label: OK
Tipo: envio Clique em OK. Um botão HTML será adicionado entre as tags <form> .
Digite Indique seu nome: antes da primeira tag <input> , em seguida, altere o texto default Hello World! entre as tags <h1> para Entry Form .
Clique com o botão direito do mouse no Editor de Código-Fonte e selecione Formatar (Alt-Shift-F) para aprimorar o formato do seu código. Seu arquivo index.jsp agora deverá ser semelhante ao seguinte:
NetBeams
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h1>Entry Form</h1>
<form name="Name Input Form" action="response.jsp"> Enter your name:
<input type="text" name="name" />
<input type="submit" value="OK" />
</form>
</body>
</html>
NetBeams
Criando um Arquivo JavaServer Pages
Na janela Projetos, clique com o botão direito do mouse no nó do projeto HelloWeb e selecione Novo > JSP. O assistente de Novo Arquivo JSF será aberto. Chame o arquivo de response e clique em Finalizar. Observe que um nó do arquivo response.jsp será exibido na janela Projetos abaixo de index.jsp , e o novo arquivo aberto no Editor de Código-Fonte. 2. Na Paleta à direita do Editor de Código-Fonte, expanda JSP e arraste um item do Bean de Uso para baixo da tag <body> no Editor de Código-Fonte. A caixa de diálogo Inserir Bean de Uso será aberta. Especifique os valores mostrados na figura a seguir.
NetBeams
ID: mybean
*Classe: *org.mypackage.hello.NameHandler
Escopo: sessão Clique em OK. Observe que a tag <jsp:useBean> é adicionada abaixo da tag <body> .
Arraste um item Definir Propriedade do Bean da Paleta para um ponto antes da tag <h1> e clique em OK. Na tag <jsp:setProperty> que aparece, delete o atributo value vazio e edite da seguinte forma: Delete o atributo value = "" se o IDE o tiver criado! Do contrário, ele substitui o valor de name indicado em index.jsp .
<jsp:setProperty name="mybean" property="name" />
Conforme indicado na
documentação de <jsp:setProperty> , você pode definir um valor de propriedade de várias formas. Nesse caso, a entrada do usuário que vem de index.jsp se torna um par nome/valor que é passado para o objeto request . Quando você define uma propriedade usando a tag <jsp:setProperty> , pode especificar o valor de acordo com o nome de uma propriedade contida no objeto request . Portanto, definindo property como name , você pode recuperar o valor especificado pela entrada do usuário.
Altere o texto entre as tags <h1> de forma que ele tenha a seguinte aparência:
<h1>Hello, !</h1>
NetBeams
Arraste um item Propriedade Get Bean da Paleta e solte-o depois da vírgula entre as tags <h1> . Especifique os seguintes valores na caixa de diálogo Inserir Propriedade Get Bean:
*Nome do Bean: *mybean
*Nome da Propriedade: *nome
Clique em OK. Observe que a tag <jsp:getProperty> agora estará adicionada entre as tags <h1> .
Cuidado: os nomes de propriedade fazem distinção entre maiúsculas e minúsculas. A propriedade "name" deve estar com a mesma colocação de maiúsculas e minúsculas que em response.jsp e na forma de entrada em index.jsp .
Clique com o botão direito do mouse no Editor de Código-Fonte e selecione Formatar (Alt-Shift-F) para aprimorar o formato do seu código. As tags <body> do seu arquivo response.jsp agora devem ser semelhantes ao seguinte:
<body>
<jsp:useBean id="mybean" scope="session"class="org.mypackage.hello.NameHandler" /> <jsp:setProperty name="mybean" property="name" />
<h1>Hello, <jsp:getProperty name="mybean" property="name" />!</h1>
</body>
NetBeams
Executando um Projeto de Aplicação Web
O IDE utiliza um script de construção Ant para construir e executar aplicações Web. O IDE gera o script de construção com base nas opções especificadas no assistente de Novo Projeto, bem como naquelas da caixa de diálogo Propriedades do Projeto (na janela Projetos, selecione Propriedades no menu de contexto do nó do projeto).
Na janela Projetos, clique com o botão direito do mouse no nó do projeto HelloWeb e selecione Executar (F6). Quando uma aplicação Web é executado, o IDE executa as seguintes etapas:
Construção e compilação do código da aplicação (ver observação a seguir). É possível executar essa etapa isoladamente selecionando Construir ou Limpar e Construir no menu de contexto do nó do projeto.
Inicialização do servidor.
Implantação da aplicação no servidor. É possível executar essa etapa isoladamente, selecionando Implantar a partir do menu de contexto do nó do projeto.
View da aplicação em uma janela de browser.
NetBeams
Observação: Por default, o projeto foi criado com a funcionalidade Compilar ao Salvar ativado, então, não é necessário compilar o código primeiro para executar a aplicação no IDE.
O IDE abre uma janela de saída que mostra o andamento da execução da aplicação. Veja a guia HellWeb na janela de Saída. Nessa guia, é possível acompanhar todas as etapas executadas pelo IDE. Se houver um problema, o IDE mostrará as informações do erro nessa janela.
NetBeams
O IDE abre uma janela de saída mostrando a situação do servidor. Observe a guia na janela de Saída com o nome do servidor.
Importante: se a inicialização do GlassFish Server falhar, inicie-o manualmente e execute novamente o projeto. É possível iniciar o servidor manualmente a partir da janela Serviços clicando com o botão direito no nó do servidor e selecionando Iniciar.
A janela de saída do servidor oferece diversas informações sobre os problemas que ocorre ao executar aplicações Web. Os logs do servidor também podem ser úteis. Eles estão localizados no diretório de domínio relevante do servidor. Também é possível exibir o log do IDE, selecionando Exibir > Log do IDE.
NetBeams
A página index.jsp será aberta no browser default. Observe que a janela do browser poderá abrir antes que o IDE exiba a saída do servidor.
Indique seu nome na caixa de texto e clique em OK. A página response.jsp é exibida com uma simples saudação.
NetBeams
Possíveis Problemas
Construímos e executamos o projeto. Quando clico no botão OK do index.jsp , é exibida uma página de erro indicando que response.jsp não está disponível.
Você verificou a janela de Saída do IDE (Ctrl-4) na guia do projeto ou na guia do servidor? Quais mensagens de erro existem? Qual JDK seu projeto usa? Qual servidor? O JDK 7 requer o GlassFish 3.x ou o Tomcat 7.x. Clique com o botão direito do mouse no nó do projeto na janela Projetos e selecione Propriedades. O JDK está na categoria Bibliotecas, no campo Plataforma Java. A versão do servidor está na categoria Executar.
Construí e executei o projeto, mas nenhum nome é exibido, somente "Hello, !"
A sua tag <jsp:setProperty> contém um atributo value = "" ? Isso substitui o valor indicado no form index.jsp por uma string vazia. Delete o atributo value .
NetBeams
Possíveis Problemas
Construí e executei o projeto, mas recebo "Hello, null!” como resposta"
Verifique a aplicação e o servidor e,depois, o log do servidor nas janelas de saída do IDE. O servidor está em execução? A aplicação foi implantada? Se o servidor estiver em execução e a aplicação tiver sido implantada, você está recebendo org.apache.jasper.JasperException: java.lang.NullPointerException? Isso geralmente significa que um valor do seu código não foi inicializado corretamente. Neste tutorial, isso significa que provavelmente há um erro de digitação em alguma parte do nome de uma propriedade de seus arquivos JSP. Lembre-se de que os nomes de propriedade fazem distinção entre maiúsculas e minúsculas.
Referências
[1] Badalotti, G. M. Introdução ao desenvolvimento de sistemas web. Indaial : Uniasselvi, 2014.
Até o próximo encontro
“Materiais relacionados
476 pág.
176 pág.
138 pág.
85 pág.
Perguntas relacionadas
Compartilhar