Aula_1 2

•

UEPA

0

Cibele Silva

20/05/2021

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Programação I

56.193 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

PROGRAMAÇÃO PARA WEB 
Unidade I –Introdução HTML 
Ms. Thiago Nicolau Conte 
thiagonconte@uepa.br 
Programação para Web 
• HTML 
• Uma linguagem de programação para web mais simples 
desenvolvida até hoje. 
 
• A maior limitação do HTML é o fato de ser uma linguagem 
estática, ou seja, a única interatividade que ela oferece sem 
auxilio de outras linguagens são os links entre páginas 
 
• Totalmente compatível com inúmeras linguagens que fazem o 
trabalho pesado pra ela 
 
 
Programação para Web 
• Podemos dividir as linguagens para web em dois 
tipos: 
• As que rodam no servidor( server side) 
• As que rodam no cliente (client side) 
• Server Side 
• Vantagens: é a segurança, acesso a base de dados e 
execução em um ambiente conhecido. 
• Desvantagem: é que ela vai precisa de pelo menos mais 
uma linguagem(HTML, por exemplo) para apresentar os 
resultados 
Programação para Web 
• Client Side 
• Vantagens: é a praticidade de não precisar ir até o servidor 
para poder trabalhar, sendo executada instantaneamente 
• Desvantagem: É que o browser pode não reconhecê-la ou 
não suportá-la, apresentando erros que só o seu cliente verá. 
Programação para Web 
• Outras linguagens 
 
• JavaScript: certamente é uma linguagem cliente side mais 
utilizada atualmente. Sua grande características é trabalhar 
com tags de formulário HTML como se fosse objetos e com 
os eventos gerados pelo browser com um clique do mouse ou 
a pressão de um a tecla. 
 
• Action Script: está ganhando muito mercado atualmente. 
Ele funciona exclusivamente dentro do Macromedia Flash e é 
utilizado de forma parecida como o JavaScript no html. 
 
 
Programação para Web 
• ASP(Active Server Pages): É uma técnica desenvolvida 
pela Microsoft para utilizar os recursos do server side. Você 
pode desenvolver tanto em VBScripit como em uma versão 
do JavaScript para server side. Atualmente essa linguagem 
está dando lugar à tecnologia .NET que engloba a 
programação ASP.NET 
 
• PHP: é uma linguagem muito simples e fácil de aprender 
para utilizar os recursos server side. Seu código é aberto e 
não tem restrições com relação a servidores Microsoft ou 
linux 
 
 
 
Programação para Web 
• JSP(Java Server Pages): é uma linguagem server side bem 
mais avançada, que segue os padrões do Java. O JSP tem a 
vantagem de ser pré-copilado(o ASP e o PHP são 
interpretados pelo servidor no momento em que são 
requisitados pelo cliente), o que o torna mais performática 
que suas concorrentes. 
 
• XHTML(Extensible Hypertext Markup Language): 
representa um html com tags para interpretar XML. A 
vantagem é que o XHTML(“case Sensitive”) possui pouca 
alterações nas tags já conhecidas do HTML. Basta conhecer as 
tags específicas feitas para interpretar XML. 
 
Programação para Web 
• .NET: a tecnologia .NET(dot NET) da Microsoft apresenta 
uma solução tanto pra server side quanto para client side, 
além do desenvolvedor poder escolher entre ASP, VB ou C# 
para desenvolver seis sites 
Programação para Web 
• Linguagem HTML 
• Os comandos HTML são chamados de tags 
• Toda a formatação deve ser iniciada e, na maioria das vezes, 
terminada com uma tag 
• Ex: se você inserir uma tag para alterar a cor da fonte, todo o 
texto que estiver descrito em seguida será apresentado daquela 
forma, até que seja colocado a tag de finalização do comando 
• Todas as tags são apresentadas entre os sinais de maior e menor 
―<... >‖ 
Ex: <tag>..........</tag> 
Programação para Web 
• Linguagem HTML 
 
• Algumas tags descartam o uso da tag de 
finalização. 
• Ex: tag para pular linha <br> 
 
• Não é “case sensitive”, os browsers vão 
interpretá-lo da mesma forma 
Programação para Web 
• A tag HTML 
• É responsável para indicar ao browser que o documento foi escrito na 
linguagem HTML. 
• Sem essa tag o browser não é capaz de interpretar os comandos que 
você descrever, portanto ela deve ser a primeira e a ultima tag. 
• Sintaxe: Exemplo: 
 <html> <html> 
 -----documento------ Minha primeira Home Page 
 </html> </html> 
Programação para Web 
• Comentários 
• Insere um comentário não compilável pelo browser 
• Tudo que você descrever nessa tag não será lido, a menos que 
a pessoa tenha o acesso script (texto fonte) da sua página. 
• Sintaxe: Exemplo: 
• <! - - comentário- - > <html> 
 <! – treinando-- > 
 </html> 
Programação para Web 
• Cabeçalho do Browser(opcional) 
• Determina os comandos que dever ser lidos antes de 
carregar o texto HTML 
• Exemplo: métodos de abertura de página, 
 linguagens incorporadas ao texto 
 Título de página 
 
Sintaxe: <head> cabeçalho </head> 
Programação para Web 
• Exemplo: 
 
<html> 
 <head> 
 <title> Programando em HTML </title> 
 <meta name=“author” content=“Thiago Nicolau”> 
 </head> 
 
</html> 
Programação para Web 
• Título da Página 
• É responsável por identificar o título da página, colocando-o no alto da 
janela(barra de títulos) 
• Essa tag deve ser utilizada juntamente com a tag <head> 
• Sintaxe: <title> título da página </title> 
Exemplo: 
<html> 
 <head> 
 <title>exemplo de título</title> 
 </head> 
</html> 
Programação para Web 
• A Tag Meta 
• Deve ser utilizada entre as tags de HEAD 
• Servem para definir os tributos: 
• identificadores do seu site como autor da página(“author”), 
• direitos autorais(“copyright”) 
• palavras – chave (“keywords”) 
Sintaxe: 
<meta name= ―[author/copyrigth/keywords]‖ 
content=―valor do atributo‖> 
Programação para Web 
Exemplo: 
<html> 
 <head> 
 <meta name=“author” content=“thiago Nicolau”> 
 </head> 
</html> 
Programação para Web 
• Atibutos 
• name: determinar o identificar que você adicionará à sua 
página. Os valores são: 
• AUTHOR : autor da página 
• COPYRIGHT: direitos autorais, mais utilizados em sites 
com conteúdos que não podem ser copiados sem autorização 
• KEYWORDS: palavra-chave, utilizados por ferramentas de 
buscas para conhecer o conteúdo de suas páginas 
• Content: determina o conteúdo do identificador. Se o item 
possuir mais de um, separe-os com vírgula 
 
Programação para Web 
• Exemplo: 
 
<html> 
 <head> 
 <meta name=“author” content=“Thiago Nicolau”> 
 <meta name=“copyright” content=“editora erica”> 
 <meta name=“keywords” content=“primeira 
página”> 
 </head> 
</html> 
Programação para Web 
• HTTP-EQUIV=―REFRESH‖ 
• Determina um tempo, em segundos, antes que o browser 
seja redirecionado para outra página. 
Sintaxe: 
<meta http-equiv=―refresh‖ content =―[tempo de 
esperas em segundos] ; url=[destino]‖> 
 
• Exemplo: vamos criar uma página de apresentação e remeter 
o cliente para uma outra página após 5 segundos 
Programação para Web 
• Exemplo: 
<html> 
 <head> 
 <meta http-equiv=“refresh” content=“5 ; 
url=endereço da página”> 
 </head> 
</html> 
Programação para Web 
• Corpo do Texto 
• A tag BODY define o inicio e o fim do corpo do texto, ou 
seja, as informações do documento em si. 
• Também utilizada para determinar as características da 
página, como cor ou imagem de papel de parede. 
Sintaxe: 
<body bgcolor=―[cor do fundo]‖ background=―[imagem do 
fundo]‖> 
Corpo da página 
</body> 
Programação para Web 
<html> 
 <head> 
 <title>Programando em HTML</title> 
 <meta name=―author‖ content=―thiago Nicolau‖> 
 </head> 
 <body> 
 Minha primeira Home Page! 
 <! - - ainda tenho muito para aprender- - > 
 </body></html> 
 
Programação para Web 
• Dica: Salvar na unidade(C: ou D:) 
• Se a imagem estiver no mesmo diretório somente o nome da 
imagem na url. 
• Senão colocar o nome do diretório e imagem 
 
Programação para Web 
• Atributos 
• BGCOLOR: Determina a cor de fundo do browser. 
Exemplo: <body bgcolor=―#ccccff ‖> 
 <body bgcolor=―blue‖> 
 
• BACKGROUND: Determina uma imagem de fundo 
• Você não pode controlar o posicionamento da imagem de fundo 
• Se a imagem for menor que a tela do browser e o conteúdo da 
página ela será repetida até preencher todo espaço. 
• Exemplo: <body background=―img/imagem1.jpg‖> 
Programação para Web 
• Observação: não adianta definir cor de fundo e imagem de 
fundo ao mesmo tempo para uma página. 
• Controlando Quebras de Linha 
• na linguagem HTML, não são interpretados o ENTER, os 
espaços(no caso mais de um) e as tabulações(tecla TAB) 
 Exemplo: será exibido assim: 
<html> Linha 1 e linha 2 
 Linha 1 
 Linha 2 
</html> 
 
Programação para Web 
• Para que o browser saiba que você quer passar para linha de 
baixo de ve utilizar a tag <br> 
Exemplo: 
<html> 
 <body> 
 Minha primeira home page!<br> 
 Ainda tenho muito para aprender, me 
aguadem. 
 </body> 
</html> 
Programação para Web 
•Naturalmente quando um texto passa do tamanho da 
janela do navegador, o HTML quebra a linha 
automaticamente 
•Controlando essa quebra automática 
• Impedindo a quebra automática: <nobr> 
•Determinando onde a linha deve quebrar: <wbr> 
Programação para Web 
• Exemplo: 
<html> 
 <body> 
 Minha primeira home page ! Ainda tenho muito para 
aprender, me aguardem <! – quebra automática--> 
 </body> 
</html> 
 
 
Programação para Web 
• Exemplo: 
<html> 
 <body> 
 <NOBR> Minha primeira home page ! Ainda tenho 
muito para aprender, me aguardem.</NOBR> <!-- sem 
quebra-- > 
 </body> 
</html> 
 
 
Programação para Web 
• Exemplo: 
<html> 
 <body> 
 <NOBR> Minha primeira home page ! Ainda<WBR> 
tenho muito para aprender, me aguardem.</NOBR> <!—
com quebra em local determinado-- > 
 </body> 
</html> 
 
Referências Bibliográficas 
 
• DEITEL, Paul J.; DEITEL, Havey M. Ajax, Rich Internet Applications e 
Desenvlvimento Web para programadores. São Paulo: Person, 2008 
 
• MARCONDES, Christian Alfim. HTML 4.0 Fundamental: A Base da 
Programação para Web. São Paulo: Erica, 2005. 
 
• NIEDERAUER, Juliano. Desenvolvendo Websites com PHP: Aprenda a criar 
Websites dinâmicos e interativos com PHP e banco de dados. São Paulo: Novatec, 2004. 
 
• LEMAY, Laura. Aprenda criar página web com HTML e XHTML em 21 dias. 
São Paulo: Pearson, 2002. 
 
• SILVA, Maurício Samy. Html e css-contrua seu website. Disponível em: <http://pt-
br.html.net>. Acesso em: 10 maio. 2012