TECNOLOGIAS PARA WEB

•

ESTÁCIO

0

Isis Melo

28/04/2018

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Tecnologias Web

6.045 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

TECNOLOGIAS PARA WEB 
(MARCIO NOGUEIRA 81.9.9725.1355) 
 
LINGUAGEM DE MARCAÇÃO 
1. Linguagem de programação x linguagem de marcação 
 
If(A= “entendo”) então 
 Faca acao1; 
 Faca acao2; 
Senao 
 Faca sair; 
Fim 
 
 
Logica de Preposições 
 
Eu, <nome> “Nome”</nome> 
Sou, o <titulo> “Titulo”</titulo> da 
Disciplina <address> “Disciplina”<address>. 
 
Hipertexto 
 
2. Historico e evolução das linguagens de marcação 
 
 Html5 
 Html3.2 xHtml Html4 xHtml2 Ajax Html5 
Html Mosaic Html2 Html3 Css/java 
Script 
Flash W3c Css2 What 
work 
group 
 
1980 1990 1993 1995 1996 1997 1997 1998 2001 2004 2005 2006 2009 
 
 
 Hipertextos: Documentos têxteis com recursos de marcação para texto dinâmico. Ex: 
livros de RPG (... escolha ir estudar agora indo para a pág. 100 ou estudar depois indo 
para pag.13.) 
 Documentos hipertextos computacionais: Documentos com recursos de marcação de 
vários tipos de mídias diferentes (hipermídias), como imagens, vídeo, outro arquivo, 
outra página... 
 
Html – Linguagem de marcação em hipertextos 
 
 Adota “tags” para marcar e operacionalizar os documentos. 
o Exemplos de tags mais comuns: 
 <htlm lang=”pt-br”></html> 
 <head></head> 
 <body></body> 
 <h1> a <h6> 
 <a href= “test.html”> 
 <a name= “rodade”></a> 
 <img src= “logo.gif”> 
 <p> 
 <table> 
 <tr> 
o <td> coluna1 </td> 
 </tr> 
 </table> 
 <form action= “enviar.php” method=get> 
 Ex: http://test.com/processa?nome=joao&idade=328sexo=m 
 <input> 
 Tipos: button, checkbox, file, hidden, image, password, radio, 
reset, submit. 
 <textarea> 
 <selection> 
 <option> 
 <button> 
 <label> 
 <div> e <spam> (Divisão de uma página) 
 <hr> (Linha horizontal) 
 <Strong> 
 <ol> (linha ordenada) 
 <li> 
 <iframe> 
 <link> 
 <script> 
 <meta> 
 <pre> 
 <style> 
 <!—comentário -- > 
 <!doctype html> 
 
 
EXERCICIO 
 
PREPARAÇÃO: 
1 Executar o netbeans 8.0.2 IDE. 
2 Verificar se o browser está definido como “Chrome with netbean conection”, em: 
run>set Project browser. 
3 Verificar se o plugin html5 esta instalado em: tools>plugin>installed. 
 
ATIVIDADE 1 (ARQUIVO SIMPLES DE HTML): 
 
1 Abra um novo arquivo html: file>new file>html5>html file. 
2 Especifique: NOME=<seu nome>, LOCAL=< escolha a pasta da disciplina tecweb 
em seu pendrive). 
3 Na aba “arquivo.html”, na tag de comentários, insira: seu nome, disciplina, 
professor e data. 
4 Na tag de titulo, altere o nome da pagina para “ minha primeira pagina html”. 
5 Na tag do corpo “<body>”, insira as tags: 
a. <h1> oi mundo </h1> 
b. <h2> oi mundo </h2> 
c. <h3> oi mundo </h3> 
d. <h4> oi mundo </h4> 
e. <h5> oi mundo </h5> 
f. <h6> oi mundo </h6> 
Obs: para executar: shift + f6 
 
ATIVIDADE 2 (ENDERECOS EXTERNOS): 
1 Crie um arquivo .html que contenha os links para os sites: facebook, google e 
linkdin 
a. Ex: <a href=www.site.com> Site 1</a> 
 
ATIVIDADE 3 (ENDEREÇOS INTERNOS): 
 
1. Crie um arquivo .html e insira como texto o seu currículo profissional. Formate 
adequadamente o texto utilizando as tags <p>, <ol> e <h?> 
2. Separe as sessões do seu cv, conforme: 
a. Objetivos 
b. Cursos e qualificações 
c. Experiências profissionais 
3. Para cada sessão do cv defina uma estrutura de endereçamento interno com a 
tag<a>, exemplo: 
a. <a nome=”objetivos”>objetivos</a> 
4. Crie um index no inicio do cv de forma a apontar para cada estrutura interna do 
seu documento, exemplo: 
a. <a href =”#objetivos”>Objetivos</a> 
 
<h1>Indice</h1> 
<!—inicio do índice -- > 
<a href=”#objetivos”>objetivos</a> 
<a href=”#cursosquali”>Cursos e Qualificações </a> 
<a href=”#experienciap”>Exp. Profissional</a> 
<! -- fim do índice -- > 
<! ---------------------------------------------------------------> 
<!—Inicio do texto -- > 
<p> <a name=”objetivos”>Objetivos </a></p> 
<p> <h3>Atuar como Analista </h3> </p> 
<p> <a name=”cursosquali”> Curso e Qualificacoes </p> 
<p> <h3> <ol> <li> curso 1 </li> 
 <li> curso 2 </li> 
 <li> curso 3 </li> </ol> </h3> </p> 
 
ATIVIDADE 4 (IMAGEM): 
1. Insira no seu cv uma imagem com a tag <img>, exemplo: <img src=”c:\foto.png> 
 
ATIVIDADE 5 (TABELAS): 
1 Altere as listas ordenadas do cv por tabelas 2x3, contendo as colunas: curso, 
instituição, ano de realização. 
 
 
 
 
Ex: <table> 
 <tr> curso </tr> 
 <td> curso 1</td> 
 <td> curo 2</td> 
 <td> curso 3 </td> 
 </tr> 
 <tr> 
 <td> contato </td> 
 <td> estagio </td> 
 <td> grau oper </td> 
 </tr> 
 
FORMULÁRIOS (04/04/2016) 
 
ESTRUTURA: 
 <form opções> 
 (Variáveis de formulário) 
 </form> 
 
 Variaveis de formulários: 
o Campo de texto 
o Botões de Radio 
o Botões de Check 
o Areas para texto longo 
o Botoes de envio 
 
EXERCICICO 
 
Codifique e exiba o formulário: 
 
<!doctype html> 
<html> 
<head> 
<title>Formulario web e php</title> 
</head> 
<body> 
<form name=”cadastro” action=”processa.php” method=”post” accept-charset=”utf-8”> 
<label>nome:</label> 
<input type=”text” name=”nome” size=”30” placeholder=”digite seu nome:” autofocus 
/><br/> 
<label>sobrenome:</label> 
<input type=”text” name=”sobrenome” size=”30” placeholder=”digite seu 
sobrenome:”/><br/> 
<br/> 
<label> senha: </label> 
<input type=”password” name=”senha” size=”15” required/><br/> 
Sexo: <br/> 
<input type=”radio” name=”sexo” value=”m”> Masculino </br> 
<input type=”radio” name=”sexo” value=”f”>Feminino</br> 
<input type=”radio” name=”sexo” value=”I”> Indefinido</br> 
<br> 
Marque as opções de seu interesse:<br/> 
<input type=”checkbox” name=”linguagens[]” value=”asp”> Aspnet</br> 
<input type=”checkbox” name=”linguagens[]” value=”java”> Java</br> 
<input type=”checkbox” name=”linguagens[]” value=”php”> Php</br> 
<input type=”checkbox” name=”linguagens[]” value=”python”> Python</br> 
<br/> 
Entre com seus comentarios na caixa a seguir:</br> 
<textarea rows=”8” cols=”50” name=”comentários”></textarea> 
<br> 
Selecione as tecnologias que deseja aprender: (Segure a tecla crtl para selecionar mais de 
uma)<br> 
<select name=”tecnologias[]” multiple> 
<option value=”asp”>Aps.Net</option> 
<option value=”php”>php</option> 
<option value=”java”>Java</option> 
<option value=”python”>Python</option> 
</select><br/> 
<br/> 
Selecione um arquivo do seu computador para upload: <br/> 
<input type=”file” name=”arquivo” /><br/> 
<br/> 
 
<input type=”submit” name=”submit” value=”enviar”/><br/> 
<input type=”reset” name=”reset” value=”resetar”/> <br/> 
</form> 
</body> 
</html>