Anotações F Desenvolvimento Software

AULA 4 - HTML
HTML (aula 4>Comandos HTML)
Dá pra fazer em qualquer editor de texto
Visual Studio Code: editor de texto planejado para o desenvolvimento de códigos, que tem uma série de
facilidades.
Instalar duas coisas: (instalar extensões que a própria Microsoft cria ou outros desenvolvedores) como a Live
Server (lança na página do navegador com as mudanças em tempo real) e em Manage>Settings marcar o Auto
save>afterDelay (para salvamento automático de mudanças depois de um intervalo)
File>Open Folder
Criar uma pasta “meuSite”
Seleciona ela
Clica em “new File” e dá um nome pro arquivo usando sempre .html pra identificar que se trata de um arquivo
html
O arquivo abrirá no navegador quando clicar duas vezes nele
Começar sempre com <!DOCTYPE html> que indica as regras de qual versão do html que está usando (se não
colocar nº, indica que é a última versão
Depois coloca a tag (marcação) <html>
</html> que indica onde efetivamente o documento começa e termina
O html é dividido em duas partes, cabeçalho (head) e corpo (body) que vão entre a tag <html> inicial e a final)
Dentro da head tem o título da página e alguns conteúdos que dizem respeito à página como um todo.
<title></title> é o título do site, na aba do navegador
Depois vem o body, que contém os h (títulos e subtítulos) e p (parágrafos)
<h1> </h1> Título da página, dentro do documento: em inglês: heading
<h2></h2> para subtítulo ( vai até h6)
Parágrafo: tag <p> </p> (início e fim do parágrafo)
Se não colocar o texto nos parágrafos, ele vai colocar todas as frases juntas sem formatação nenhuma.
Quebra de linha: <br> (quebra de linha – line break)
Comentário: <!- -na sequencia vem o trecho da imagem- -> (comentário, que não vai aparecer na página, é apenas
para quem está vendo os códigos)
!DOCTYPE html>
<html>
<head>
<title>Titulo do meu site</title>
</head>
<body>
<h1>Título da página</h1>
<h2>TÍTULO</h2>
<H3>TÍTULO</H3>
<H4>TÍTULO</H4>
<H5>TÍTULO</H5>
<H6>TÍTULO</H6>
<P>PARÁGRAFO COM TEXTO 1</P>
<p>PARÁGRAFO COM TEXTO 2</p>
<BR></BR>
<P>PARÁGRAFO COM TEXTO 3</P>
<BR></BR>
<p> Lorem ipsum
Pra criar um texto de teste, é só escrever <p>Lorem</p> que ele já insere automaticamente um parágrafo de texto
que não tem sentido. Se quiser mais palavras no parágrafo, coloca um nº depois de Lorem, por exemplo Lorem200
Arquivo de imagem: não precisa colocar fim, só <img src=”logo.jpg” alt=”logo da Uninter” width=”128”
(src é source=origem; é a propriedade da imagem) alt é a descrição da imagem; width é o tamanho da imagem
Elemento vazio
Nem todos os elementos possuem conteúdo, e esses que não possuem são chamados de elementos vazios.
Um exemplo importante é o elemento <img>, que é utilizado para colocar uma imagem na página
Exercício prático da aula 4:
Abre o Visual studio code (VSC)

Clica em New file para criar a nova página
Nomeia
Digita dentro dela:
html:5
e clica em TAB ou Enter (o VSC vai gerar automaticamente a página)
Vamos criar um formulário de cadastro como nome de “Pedido Pizza”:
<body>
<h1>Pedido Pizza</h1> (h1 é Título)
Criar um formulário (TAG form)
Dentro de form, tem dois parâmetros a escolher:
1. method com as opções Get (formulário de busca), Post (formulário de cadastro) e outras;
1.1)Get: como é o modo de busca, ele vai colar na barra de pesquisa TODOS os dados inseridos no
formulário, o que pode não ser interessante nem permitido a divulgação desses dados, em
determinados casos, como mostra na figura abaixo:
1.2)Post: nesse caso ele vai mandar os atributos, as informações irão para o destino, só que sem mostrar
as informações no link de acesso:
2. Action (qual o destino desses dados coletados, ou seja, a página que vai fazer o processamento desses
dados).
No caso do exercício proposto, o local, o método a ser utilizado é o “get” e a action é “teste.jsp”: a página
(fictícia) pra onde vão os dados coletados se chama teste.jsp, então vamos completar com ele:
Agora que já temos o corpo (atributos) do formulário criado, vamos criar os elementos dele:
Os elementos pedidos são: radio, select, checkbox, text, date, email, textarea, submit.
Text – é uma caixa de texto;
Radio – são opções;
Select – cria uma caixa de seleção com várias opções de escolha. O select não usa o input antes;
Checkbox- diferente da radio, a checkbox serve para que seja possível marcar um ou mais itens;
Email – é uma caixa de texto também, porém ela requer que o texto contenha @;
Data- cria uma caixa com um calendário para marcação da data;
Textarea- cria um campo de texto maior do que uma linha apenas;
Submit- inclui o botão Enviar para o campo de texto Textarea.
1. Entrada tipo texto:
Dentro do formulário, cada entrada se chama input:
<input type=”text” (entrada do tipo texto) name=”nome” (name quer dizer como vamos chamar o campo de
texto, no caso um atributo chamado “nome”)
2. Entrada tipo radio:
Como demos o mesmo name para o input Tamanho, que se chama name=“Tamanho” em todas as três opções, ele
entende que se trata do mesmo grupo.
Por padrão, quando a página é carregada no navegador, nenhuma das 3 opções vem marcada, conforme mostra
na imagem acima. Mas podemos deixar uma delas já marcada por padrão, acrescentando a palavra checked:
3. Entrada tipo Seleção:
Abre uma caixa de seleção com várias opções de escolha. O select não usa o input antes;
Por exemplo, para escolher os sabores da pizza:
4. Checkbox:
5. Email:
6. Data:
7. Textarea e submit:
Resultado final:
Exercício 2:
Antes de fazer o exercício, vamos criar uma tabela com dados para ver como é:
Abre o Visual studio code (VSC)

Nomeia, sempre lembrando de colocar .html depois do nome
Digita dentro dela:
html:5
Para criar a tabela, começa com table (tabela), e inclui uma borda, onde o nº depois da borda indica a espessura
da linha externa:
<table border=1>
Depois costuma-se colocar um Título para a tabela:
<caption>Economia mensal</caption>
A seguir, começa com a 1ª linha: <tr></tr> (table row = linha da tabela)
Depois, as colunas, que na verdade se fala elementos, com seus títulos também: <th></th> (table heads=
cabeçalho da tabela)
E por fim, incluímos os dados dentro das células:

<td></td> (table data=dados da tabela)
Agora, vamos fazer o exercício, que nos pede:

Nomeia, sempre lembrando de colocar .html depois do nome
Digita dentro dela:
html:5
Para criar a tabela, começa com table (tabela), e inclui uma borda, onde o nº depois da borda indica a espessura
da linha externa:
<table border=1>
A tabela deve ter 3 linhas:
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
A primeira linha tem uma coluna só, e espaço em branco. Para criar esse espaço em branco, utiliza-se a notação
que no html irá criar espaço (&NonBreakingSpace;)
e repete ele para aumentar o espaço.
E para que as colunas fiquem espaçadas adequadamente, temos que usar o parâmetro colspan dentro da td,
dando a ele um tamanho múltiplo de 10, que é porque o html não aceita número quebrado como o 1,5:
Exercício 3:
Baixar algumas imagens para usar no exercício; (tava com preguiça de procurar imagens então substituí por robô e
flor)
VSC: criar uma página por ex “tabelaAnimais.html (File>Newfile)
Html:5 (criando os parâmetros principais...)
Abrir a página no navegador:

Explorer>meusite> botão direito em tabelaAnimais.html > Open with live server
Links: link é a tag a, e que precisa obrigatoriamente do parâmetro href=””
Esse link vai apontar para uma página externa, página local interna ou outra
e já aparece o link na página. Clicando nele será direcionado
para a página do google
Para fazer um link que é uma imagem:
Coloca o link para a página desejada, e no lugar de escrever uma palavra ou frase pra ser o link, adiciona uma
imagem que está salva (criar uma pasta no VSC, nomear como imagens, e salvar as imagens que quer usar ali) ou
de um link na internet (nesse caso colocando o endereço dela na web).
O link pra ela fica: <img src=”imagens/nomedaimagem” width= 200
Para criar a tabela:
<table> (tabela)
<tr> (linha)
<th>Gatos</th> (título da coluna)

<th>Cachorros</th>
</tr>
<tr>
<td> (célula)
<td/>
<tr/>
</table>
Para adicionar linhas na tabela, é só repetir os mesmos comandos.
Exercício 4:
A página agrega coisas já feitas antes, como colocar título na página, inserir uma imagem, um parágrafo de texto e
links:
VSC: criar uma página por ex “Mario.html” (File>Newfile)
Html:5 (criando os parâmetros principais...)
Abrir a página no navegador:
Explorer>meusite> botão direito em Mario.html > Open with live server
O html é dividido em duas partes, cabeçalho (head) e corpo (body) que vão entre a tag <html> inicial e a final)
Dentro da head tem o título da página e alguns conteúdos que dizem respeito à página como um todo.
<title></title> é o título do site, na aba do navegador:
<title>Mario</title>
Depois vem o body, que contém os h (títulos e subtítulos)
<h1> </h1> Título da página, dentro do documento: em inglês: heading
<h1>Sobre </h1>
... e p (parágrafos):
<p><b>Mario Bros</b> é um dos personagens mais <i>queridos</i> do mundo dos games,

criado em 1980
<b>coloca algo em negrito</b>
<i> coloca algo em itálico</i>
Link:
<a href="http://www.twitter.com">Twitter</a>
E coisas novas, como uma lista de itens e subitens:
<ul>
<li><b>Nintendo</b>
<ul>
<li>Super Mario Bros</li>
<li>Super Mario Bros II</li>
</ul>
</li>
<li>Nintendo
<ul>
<li>Super Mario Bros</li>
<li>Super Mario Bros II</li>
</ul>
</li>
</ul>
<ul>cria uma lista sem numeração</ul>
<li>são os itens da lista</li>
Se quiser uma lista com itens numerados, usa :
<ol></ol>
Resultado Final:
---------------------------------------------------------------------------
AULA 5 – CSS
CSS – Cascating Style Sheets (folhas de estilo em cascata)
Pra começar a usar o CSS, dentro de uma página html, colocamos a TAG style dentro de qualquer parte dela, mas
é mais comum colocar na parte Head: <style></style>
Abrindo o VSC: aproveitando a página do Mario criada anteriormente, vamos alterar os títulos (h1) para a cor azul
e o background para roxo:
Resultado final:
Seletores CSS:
Para definir o estilo, selecionamos o elemento desejado (h1 (título), p (parágrafo), etc)
Class
Podemos trabalhar por meio das class (Classes) dando um nome pra ela (exemplo: <h1 class=”supertitulo”>Meu
título</h1>, e tudo o que se referir a essa classe vai ficar na formatação indicada na class. Pra criar a referência, é
só escrever
.supertitulo{}
dentro de style.
No exemplo abaixo, o elemento título obedece às instruções da classe supertítulo pra ficar com a cor azul e com o
tamanho 50px, instrução essa que se sobrepões à anterior, na linha acima, de que o tamanho fosse 12px: isso
acontece porque o elemento sempre vai obedecer ao que for mais específico, ou seja, no caso do exemplo, o
elemento é um h1 como talvez outros h1 dentro da mesma página, porém, ele é um h1 da classe supertítulo,
então ele vai assumir a formatação dos supertítulos, que terão precedência.
ID
ID é uma identificação ( exemplo:“id=”tituloprincipal”) e será ainda mais específica que a class.
No exemplo abaixo, os h1 seriam azuis de tamanho 12px, mas na class foi especificado um tamanho de 50; e a ID
tituloprincipal determinou que o tamanho é 90px e a cor crimson.
A precedência será sempre do mais específico.
Caso venha na mesma ordem de importância, vale o que vier depois:
No exemplo acima, a especificação de parágrafo de cor rosa veio depois da verde, fica valendo a rosa.
Pode-se colocar múltiplas especificações para seletores diferentes, através de vírgula:
No exemplo acima, tanto h1 como p serão azuis e de tamanho 12px.
Pode-se também combinar várias coisas ao mesmo tempo, por exemplo, dar a instrução para todos os h1 que
fazem parte da class supertitulo, ou seja, que também são supertitulo, usando: h1.supertitulo:
Podemos também especificar em listas, para trocar a cor dos itens da lista, por exemplo:
.minhalista li (é como se li fosse filho de minha lista) e vai obedecer a instrução dela.
Pode haver múltiplas classes e onde couber, vai alinhando as instruções. Por exemplo, h1 é da classe supertitulo e
também da central:
No exemplo acima, .central foi alinhado no centro da página, o que aconteceu com Meu Título, como se vê na
página do navegador. Assim, tudo o que fizer parte ele vai alinhando, encaixando em efeito cascata. E o que
acontecer em sobreposição, ele vai seguir a ordem de prioridade.
Ordem da cascata de estilo
Pode-se escrever os estilos css em arquivos separados:
No VSC, criar um novo file chamado estilo.css
Seleciona todo o código já escrito na página html, entre as TAGs <style> (sem incluir a tag) recorta e cola na
página #estilo.css
Pra conectar o estilo à página, cria-se um link na página html, indicando onde está o estilo a seguir, através da TAG
<link rel=”stylesheet” href=”estilo.css”> (link relacionado à folha de estilo da página “estilo.css”):
Toda página que eu quiser que tenha essa mesma formatação de estilo, é só copiar o mesmo link nela. Pode ser
criada até uma pastinha só com folhas de estilos, para utilização variada.
E se tiver um link para uma folha de estilos, e eu quiser fazer um estilo específico dentro da página, é só criar a Tag
<style> dentro da própria página, abaixo do link – pela ordem, o de baixo vai ser obedecido.
Se quiser, também pode ditar o estilo dentro da própria tag. Nesse caso, pela ordem, é obedecido o que foi dito
internamente:
Porém, o recomendado é deixar o css para essas orientações de estilo, em arquivo externo, e não junto do arquivo
html.
Principais comandos CSS
CORES
As cores no CSS são utilizadas em diversos comandos distintos e existem três formas de representá-las, conforme
a lista a seguir.
● Nome das cores em inglês: existe uma lista vasta de nomes de cores em inglês que é reconhecida pelo CSS que
internamente substitui por uma cor predefinida, é uma representação muito útil para realizar testes rápidos e
tornar o código facilmente legível. Importante notar que não é sensível a maiúsculas e minúsculas, red, Red ou
RED vão representar a cor vermelha da mesma forma.
● Valor RGB: a sigla RGB vem das palavras red, green, blue (vermelho, verde, azul) e diz respeito à combinação
dessas cores. O padrão RGB é muito famoso e utilizado em diversos outros contextos, especialmente digitais.
Quando combinadas, essas três cores-base podem gerar qualquer outra cor do espectro visível, pois a ideia é que
cada canal de cor seja representada por um entre 0 e 255 (ou seja, 1 byte para cada canal de cor), e é
representado sempre na ordem vermelho, verde e azul; então, por exemplo: RGB (255,105,0) é uma cor que
combina 100% de vermelho – por isso o 255, um pouco acima dos 40% de verde – por isso 105, e nada de azul –
por isso o valor 0 no fim, o que dá uma cor alaranjada.
● Valor hexadecimal: essa representação é igual a RGB, porém, um pouco mais compacta, em vez de utilizarmos
números decimais, utilizamos hexadecimal 2 dígitos para cada canal de cor com uma cerquilha na frente e todos
os valores juntos, por exemplo: #00ff00 é igual a RGB (0,255,0), que representa a cor verde.
5.2 Background-color
O background-color é um atributo que modifica a cor de fundo do elemento, por exemplo:
body{background-color: lightblue;}
body{background-color: rgb(173,216,230);}
body{background-color: #add8e6;}
Os exemplos anteriores são três formas distintas de colocar a cor azul clara no fundo de todo o corpo da página.
IMAGENS
5.3 Background-image
O background-image é o atributo para colocar uma imagem de fundo nos elementos selecionados. Veja no
exemplo a seguir que é necessário colocar, no entanto, o endereço relativo do arquivo contendo a imagem dentro
dos parênteses comando url(). Caso o elemento seja maior do que a imagem, ela, por padrão, irá se repetir
vertical e horizontalmente. Com a propriedade background-repeat, é possível configurar esse comportamento
para que a imagem não se repita ou seja repetida apenas em um eixo. Os valores para o atributo são: no-repeat,
repeat-x ou repeat-y. Respectivamente não repete, repete no eixo horizontal, repete no eixo vertical.
No exemplo, a imagem gatinhos.jpg, que está localizada na pasta imgs, será adicionada ao fundo do corpo da
página e, caso a página seja mais larga do que a imagem, ela será repetida horizontalmente, mas não
verticalmente.
MARGEM
5.4 margin
A margem é como chamamos o espaço que fica em volta da borda do elemento HTML, e é possível configurar
quanto de espaço vazio desejamos que exista em torno daquele elemento. Confira no exemplo a seguir os
atributos margin-top, margin-bottom, margin-right e margin-left, respectivamente a quantidade de pixels que
terá de espaço no topo, fundo, direita e esquerda:
Existem formas mais simplificadas de descrever o tamanho das margens. Caso apenas com o atributo
margin seja fornecido com um único valor, ele vale para todos os lados. Se dois valores forem dados, o primeiro
irá para as margens verticais e o segundo para as horizontais. E, caso quatro valores sejam dados, daí serão
aplicados para as margens superior, direita, inferior e esquerda, nessa ordem.
5.5 Padding
O conceito de padding, preenchimento, é semelhante ao da margem, porém, enquanto a margem é
o espaçamento externo a partir da borda, o preenchimento é o espaçamento interno a partir da borda. No
exemplo a seguir, vemos que as mesmas lógicas da margem também se aplicam.
5.6 Text align

Text-align indica como o nome sugere o alinhamento do texto. Por padrão, todo o texto é alinhado
à esquerda, mas podemos centralizar ou alinhar à direita por meio dessa configuração. Veja o exemplo a
seguir: os elementos h1, h2 e h3 estão respectivamente alinhados no centro, esquerda e direita:
5.7 Estilização de texto

Para configurar a estilização de texto, existem diversos parâmetros que podemos querer configurar, como
a família da fonte, tamanho da fonte, estilo itálico ou estilo oblíquo, negrito etc. No exemplo a seguir,
demonstramos como esses parâmetros são configurados:
No exemplo anterior, vemos o comando que o atributo font-family configura a família da fonte e seus
parâmetros. Com font-style, configuramos o estilo, que pode ser tanto itálico como oblíquo; font-size para
configurar o tamanho da fonte; font-weight, que dá a espessura das letras, no exemplo, bold quer dizer
negrito.
A tag div não possui nenhum efeito sozinha no html, ela serve para gerar divisões lógicas para situações
como essa, em que se deseja separar alguns elementos de outros e dar comportamento específico para ele
por meio de código css ou Javascript associados. A tag span possui a mesma finalidade – geralmente, div
são blocos maiores e span para blocos menores de uma única linha.
FINALIZANDO
Aqui, discutimos os principais conceitos envolvendo o CSS, suas aplicações e primeiros exemplos, bem
como, em maiores detalhes, sua sintaxe, o seletor e algumas das principais propriedades que podemos
manipular por intermédio do CSS.
Acessar o site W3SCHOOLS pra ver muitos outros comandos
Exercício 1
- Faça uma página na qual existam quadrados de cores distintas ocupando os quatro cantos da tela com um texto
dentro.
VSC: cria uma página html
Cria um div e uma classe pra ele: (aula 5 - 3.3 Seletor por classe e vídeo 5-4 seletor, no minuto 1:30)
Class=quadrado
Criar uma página de estilo (vídeo 5-5 min 2)
Criar um link pra ela
Widht (largura)
Height (altura)
Position: Absolute (fixa a imagem nessa posição)
Exercício 2
Crie uma imagem com um link que tenha comportamentos diferentes quando selecionado e quando o cursos está
sobre a imagem.
Criar a página (Aula5exercicio2.html)
Criar a folha de estilo (estilos/aula5exercicio2.css)
Criar o link entre elas: <link rel=”stylesheet” href=”estilos/ aula5exercicio2.css”
Criar o link para a imagem: <img class = "imagem" src="imagens/Mario bros.webp"

A classe sempre entra depois do elemento, no caso acima, o elemento é <img
A classe é class = “imagem”
Comportamento diferente: vamos fazer com que a imagem se mova para a cima e para baixo, quando passarmos
o mouse por cima dela:
Para isso, usamos de novo a class .imagem e acrescentamos os dois pontos e mais a ação que queremos, dentre
as opções existentes:
Hover (sobrevoar)
Vai mexer de 0 a 50 px
Aula 6 – Javascript
Assim como a folha de estilo, o javaScript também pode ficar em um local separado, e ser compartilhado.
Podemos ter diversas <script>
Tanto <head> quanto <body>
Executam na ordem em que aparecem
Uma boa prática é colocar no final do código para evitar lentidão.
Para referenciar a página onde ele está, escrever a Tag:
<script src=”script.js”></script>
Depois cria a página JavaScript e coloca o código ali, que já vai aparecer na página automaticamente.
SINTAXE
String são informações de texto, colocadas entre aspas.
Var é a variável .
Const é uma informação que não vai ser modificada.
Let é uma informação que vai ser modificada.
+ concatena duas informações.
Pode usar a crase para colocar informações também, e o sinal de $ { }
If quer dizer “se” e else “senão”

Se não quiser apagar um código, mas não quiser que ele seja executado no momento, coloca ele entre /* */ e
ele fica como se fosse um comentário.
Typeof é uma função que indica o tipo de variável (string, number, boolean = true or false)
Não pode cirar uma variável com esses nomes reservados no parêntese acima, nem começando com número
JSON
Criar listas (array):
TEMA 5 – JSON
Neste tópico, vamos discutir o JSON, JavaScript Object Notation, que, traduzido, quer dizer notação de
objetos do JavaScript. Essa notação de objetos é a forma JavaScript de descrever e organizar dados e
facilitar seu acesso, permitindo colocar as informações com que estamos trabalhando em um formato de
texto que seja facilmente compartilhável. Confira o exemplo a seguir:
let pessoa = {"nome":"Mario", "idade":31, "pais":"Italia"};
pessoa.nome; pessoa["nome"];
A notação do JSON é bastante simples. Conforme o exemplo, estamos descrevendo uma pessoa, e essa
pessoa tem três atributos associados a ela: nome, idade e país de origem. O objeto em si fica entre chaves
e cada atributo é separado por vírgula. Cada atributo é composto pela sua chave, que é o nome do atributo
e o valor desse atributo. No exemplo anterior, as chaves são: nome, idade e país, e seus respectivos
valores “Mario”, 31, ”Italia”.
Note no exemplo acima que, para acessar um atributo de um objeto, basta colocar o nome do objeto
seguido do ponto e o nome do atributo desejado, ou entre colchetes a string com o nome do atributo.
Para cada objeto, é possível criar quantos atributos se queira e o valor dos atributos pode ser tanto uma
string, um número, lista ou até mesmo um outro objeto. A seguir, um exemplo de um objeto mais
elaborado.
empresa = {
"chefe":{ "nome": "Shao", "sobrenome": "Kahn" },
"funcionarios": [
{ "nome": "Liu", "sobrenome": "Kang" },
{ "nome": "Sonya", "sobrenome":
"Blade" },
{ "nome": "Kung", "sobrenome": "Lao" }]
};
No exemplo acima, temos um objeto chamado empresa que possui dois atributos, chefe e funcionários, O
atributo chefe é um objeto em si, enquanto funcionarios é uma lista composta por três objetos. Cada um
desses objetos internos da empresa possui os atributos nome e sobrenome. Se quisermos acessar o
sobrenome do segundo funcionário da empresa, ficaria:
empresa.funcionarios[1].sobrenome
Da empresa, estamos acessando a lista funcionários na posição 1 (lembrando que os índices começam
pelo zero), e desse funcionário na posição 1 estamos acessando o sobrenome.
Exercício 1
segue no quadro de baixo:
!= diferente
‘‘ vazio
&& e
Prova Discursiva – questões pra estudar:
1. Definição de HTML?
HTML: HyperText Markup Language, é uma linguagem de marcação de hipertexto, que é utilizada na
construção de páginas da web.
2. Definição de WWW
WWW: world wide web, quer dizer rede mundial de computadores, e é um sistema que serve para
acessar informações em páginas (sites) e compartilhá-las. Para acessá-las é preciso saber o seu endereço
web.
3. Definição de internet verde:
A internet verde quer dizer uma forma mais sustentável de utilizar as tecnologias, são uma série de
iniciativas que visam diminuir resíduos eletrônicos e estimular a reutilização deles, poupar energia,
diminuir o uso de papel, etc.
4. Definir uma variável em JavaScript

Para definir uma variável em JavaScript utilizamos uma variável chamada “nome” e antes dela, as
palavras-chaves var, let ou const. Substitui-se a palavra nome pelo valor, e essa informação será impressa
no console. Quando mudamos o valor, a nova informação será impressa.
5. Criar duas Tags HTML e dizer para que servem

<title>Título</title> serve para criar um título na aba do navegador
<p>parágrafo com texto</p> serve para criar um parágrafo com texto.
6. Citar dois browsers e o que eles são:
O browser é um tipo de software aplicativo, que realiza tarefas específicas, no caso um navegador, ou seja, um
programa utilizado para navegar na internet, acessar os sites e todo o conteúdo online.
Microsoft Edge e Google Chrome estão entre os mais conhecidos.
Software de sistema (básico) / Software aplicativo

Anotações F Desenvolvimento Software

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Anotações F Desenvolvimento Software

Enviado por

Direitos autorais:

Formatos disponíveis

AULA 4 - HTML

HTML (aula 4>Comandos HTML)

Dá pra fazer em qualquer editor de texto

Criar uma pasta “meuSite”

O arquivo abrirá no navegador quando clicar duas vezes nele

Depois coloca a tag (marcação) <html>

</html> que indica onde efetivamente o documento começa e termina

<title></title> é o título do site, na aba do navegador

Depois vem o body, que contém os h (títulos e subtítulos) e p (parágrafos)

<h1> </h1> Título da página, dentro do documento: em inglês: heading

<h2></h2> para subtítulo ( vai até h6)

Parágrafo: tag <p> </p> (início e fim do parágrafo)

Quebra de linha: <br> (quebra de linha – line break)

<p> Lorem ipsum

Exercício prático da aula 4:

Abre o Visual studio code (VSC)

<h1>Pedido Pizza</h1> (h1 é Título)

Criar um formulário (TAG form)

Dentro de form, tem dois parâmetros a escolher:

Radio – são opções;

Data- cria uma caixa com um calendário para marcação da data;

Textarea- cria um campo de texto maior do que uma linha apenas;

Submit- inclui o botão Enviar para o campo de texto Textarea.

1. Entrada tipo texto:

Dentro do formulário, cada entrada se chama input:

2. Entrada tipo radio:

Abre o Visual studio code (VSC)

Depois costuma-se colocar um Título para a tabela:

A seguir, começa com a 1ª linha: <tr></tr> (table row = linha da tabela)

E por fim, incluímos os dados dentro das células:

Agora, vamos fazer o exercício, que nos pede:

Clica em New file para criar a nova página

A tabela deve ter 3 linhas:

e repete ele para aumentar o espaço.

VSC: criar uma página por ex “tabelaAnimais.html (File>Newfile)

Html:5 (criando os parâmetros principais...)

Abrir a página no navegador:

Links: link é a tag a, e que precisa obrigatoriamente do parâmetro href=””

e já aparece o link na página. Clicando nele será direcionado

para a página do google

Para fazer um link que é uma imagem:

O link pra ela fica: <img src=”imagens/nomedaimagem” width= 200

Para criar a tabela:

<th>Gatos</th> (título da coluna)

Para adicionar linhas na tabela, é só repetir os mesmos comandos.

VSC: criar uma página por ex “Mario.html” (File>Newfile)

Html:5 (criando os parâmetros principais...)

Abrir a página no navegador:

Explorer>meusite> botão direito em Mario.html > Open with live server

<title></title> é o título do site, na aba do navegador:

Depois vem o body, que contém os h (títulos e subtítulos)

<h1> </h1> Título da página, dentro do documento: em inglês: heading

<p><b>Mario Bros</b> é um dos personagens mais <i>queridos</i> do mundo dos games,

<i> coloca algo em itálico</i>

E coisas novas, como uma lista de itens e subitens:

<ul>cria uma lista sem numeração</ul>

<li>são os itens da lista</li>

Se quiser uma lista com itens numerados, usa :

A precedência será sempre do mais específico.

Caso venha na mesma ordem de importância, vale o que vier depois:

No exemplo acima, tanto h1 como p serão azuis e de tamanho 12px.

Ordem da cascata de estilo

Pode-se escrever os estilos css em arquivos separados: