Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
html, xtml, dhtml
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
Desenvolvimento de Aplicações
Dinâmicas
Professor Thiago Souza Xavier
• Tecnologias para web: HTML, XHTML, DHTML,
DOM, CSS e Navegadores .
Objetivo
É designada habitualmente para web, é formada por
muitas redes de computadores ligadas entre si.
Comunicação: se da por meio de computadores que
estão na web e utilizam-se do protocolo padrão
HTTP (HyperText Transfer Protocol), que significa
protocolo de transferência de HiperTexto.
O que é Word Wide Web?
– Na web a informação é guardada normalmente
em documentos designados páginas web.
– Os clientes web utilizam-se de browser (ou
navegadores web) para interpretar e apresentar as
páginas graficamente.
– Os browser mais conhecidos são:
• Internet Explore
• Mozila
• Google Chrome.
Como funciona o WWW?
• Para exibir o conteúdo na tela o browser faz a
solicitação ao servidor através dos passos:
• Endereço URL é enviado utilizando o protocolo http.
• O browser lê as instruções devolvidos e usa-as para
desenhar uma representação gráfica do conteúdo da
página.
• A forma para escrever essas informações baseia-se na
linguagem html.
Browser
• Para criar uma página web precisamos de:
• Um editor de texto capaz
• Um programa para manipular imagens
• Web browser
Criação de páginas web
• Html significa HyperText Markup Language, ou
seja, é constituído por um texto ou como é
comumente chamado, hipertexto.
• O html possui tags (etiquetas) e atributos. E possui
a seguinte estrutura.
Html
<html>
<head>
<title> Esta é a primeira página html </title>
</head>
<body>
<p> Está página está na primeira linha </p>
<p><b>Segunda linha e em negrito </b> </p>
</body>
</html>
Tags Html
• <html> : define a raiz do documento, é aquele que
contém toda a definição da página. Essa etiqueta
diz ao browser para iniciar um novo documento
html, ou finalizar através da etiqueta </html>.
• <head> : define o cabeçalho do documento.
• <title> : define o título do documento
• <body>: define tudo aquilo que o browser deve
apresentar graficamente. É o corpo da página
Tags Html
• <p> define um parágrafo para o HTML;
• <b> define o texto em negrito;
• <hr /> insere uma linha na horizontal;
Tags Html
Os atributos são utilizados dentro das etiquetas para
mudar as características destas. Exemplo:
A etiqueta <body> possui o atributo bgcolor(que
significa “background color”, ou cor de fundo).
<body bgcolor=“red”>
<p> Está é minha primeira página
colorida.</p>
</body>
Atributos Html
– Vamos considerar agora a etiqueta <table>, que
define um elemento de tabela. Em seguida vamos
dizer ao browser para não desenhar os limites da
tabela. (<table border=“0”>
<table border=“0”>
<tr>
<td> coluna 1 </td>
<td> coluna 2 </td>
<tr>
<table>
Tags e Atributos Html
• Css é a abreviatura de cascading style sheets.
• É uma linguagem para estilos que define o layout
de documentos HTML. Por exemplo, CSS controla
fontes, cores, margens, linhas, alturas, larguras,
imagens de fundo, posicionamentos e muito mais
Css (folha de estilos em cascata)
• Controle do layout de vários documentos a
partir de uma simples folha de estilos;
• Maior precisão no controle do layout;
• Emprego de variadas, sofisticadas e avançadas
técnicas de desenvolvimento.
Benefícios do Css
<style type="text/css">
body {
color: purple;
background-color: #d8da3d
}
</style>
Define que tudo que será escrito dentro do body
será roxo, e a cor de fundo será amarela.
Utilização do Css
XHTML (extensible hypertext markup language) é
uma reformulação na linguagem HTML, mas é
baseada em XML, ou seja, combina etiquetas
(tags) html com regras xml.
O XHTML é uma linguagem de marcação bastante
familiar para quem conhece HTML e a
transformação de um documento existente de
HTML para XHTML é uma tarefa bem simples,
como veremos adiante.
XHTML
XHTML que em português resulta em Linguagem
Extensível para Marcação de Hipertexto, uma
aplicação XML, escrita para substituir o HTML e
nada mais é do que um HTML "puro, claro e
limpo".
Funcionalidade XHTML
• compatibilidade da linguagem XHTML com as
futuras aplicações de usuários, garantindo desde
já que as criações XHTML conservar-se-ão estáveis
por longos anos;
• Consistente que dispensa uso de "truques" e
"hacks" para com;
• O tempo de carregamento de uma
página XHTML é mais rápido, pois os browsers
tem a interpretar uma página limpa sem ter que
interpretar e decidir sobre renderização de erros
de código;
Vantagens do XHTML
• todas as tags devem ser escritas em letras minúsculas em;
Certo:
<h1>Título</h1>
Errado:
<H1>Título</H1>
• os elementos (tags) devem estar convenientemente aninhados ;
Errado:
<div><em><p>Aqui um texto negrito</em></p></div>
Certo:
<div><em><p>Aqui um texto negrito</p></em></div>
Diferenças entre XHTML E HTML
• O uso de tags de fechamento é obrigatório;
Errado:
<p>Um parágrafo.<p>Outro parágrafo.
Certo:
<p>Um parágrafo.</p><p>Outro parágrafo.</p>
• Elementos vazios devem ser fechados;
<br /> ou <hr></hr>.
• diferenças para os atributos.
Diferenças entre XHTML E HTML
• diferenças para os atributos: Assim como as tags, os atributos também são
sensíveis ao tamanhon de caixa e então deve-se escrever nomes de
atributos em minúsculas;
Errado:
<td ROWSPAN="3">
Certo:
<td rowspan="3">
Os valores de atributos devem estar entre "aspas duplas " ou 'aspas simples';
Errado:
<td rowspan=3>
Certo:
<td rowspan="3"> ou <td rowspan='3'>
Diferenças entre XHTML E HTML
• Os atributos id e name: Em XTML, os identificadores são
exclusivamente do tipo ID, e poderá existir somente um
atributo do tipo ID por elemento. Além disso um determinado
valor do identificador ID deve ser único no documento.
Errado:
<img src="imagem.gif" name="minha_imagem" />
Certo:
<img src="imagem.gif" id="minha_imagem" />
Diferenças entre XHTML E HTML
� O atributo alt para imagens: Em XHTML o uso do
atributo alt para imagens é obrigatório;
<img src="imagem.gif" alt ="minha_imagem " />
Se tratar-se de uma imagem decorativa pode-se usar o
atributo alt vazio:
<img src="imagem.gif" alt =" " />
Diferenças entre XHTML E HTML
– É obrigatório a declaração do DOCTYPE assim como a
existência dos elementos <html> <head> <title> e<body>
Exemplo de documento XHTML:
Elementos obrigatório em XHTML
A W3C disponibiliza um validador gratuito para
documentos XHTML. Ali, você digita o URL ou o caminho
para o arquivo no seu HD e um robô analisa o
documento fornecendo um relatório completo e
detalhado das não conformidades por ventura
existentes. É uma ferramenta excelente para você usar
durante a elaboração ou migração do seu documento
para XHTML. Serve como um verdadeiro revisor do
código que você cria. Abaixo o link para o validador:
http://validator.w3.org/
Validação do documento XHTML
• O DHTML (DINAMIC HYPER TEXT MARKUP
LANGUAGE) nada mais é que uma
combinação das linguagens HTML E
JAVASCRIPT que tem a função de tornar o
html dinâmico.
DHTML
• DOM ( DOCUMENT OBJECT MODEL) modelo do objeto original. O DOM é
uma especificação da W3C, e tem como função alterar e editar a estrutura
de um documento, seu conteúdo e estilo, ou seja, permite que as tags
html sofram alterações dinamicamente.
DOM
1. Como conteudo (dentro do body), deverão constar as seguintes linhas (<p>):
- Nome (em negrito) : Ariclenes da Silva
- Idade (em negrito) : 28 anos.
- Profissão (em negrito): Professor de ensino superior.
- Comida preferida (em negrito): arroz, feijão, ovo e bife. Criar em html e xhtml,bem como
incluir comentários html com a diferença
2. Qual a diferença entre as linguagem XHTML E HTML? Resposta pode ser incluída no
exercício 3.
3. Pesquisar dez propriedades css e implementá-las em uma página XHTML. Criar um novo
documento independente do exercício 1.
– Criar um menu e incluir um link para o primeiro exercícios.
– Criar um formulário para o preenchimento dos campos: nome, E-Mail, Idade,
Endereço, Telefone e Data de Nascimento.
– Criar a validação em javascript para o formulário.
Exercícios
• http://maujor.com/tutorial/xhtml.php;
Referências
• Tecnologias para web: Javascript, Javascript não-
obstrutivo, Ajax e JSON
Próxima aulaMateriais relacionados
6 pág.
Perguntas relacionadas
Compartilhar