Download - Html
![Page 1: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/1.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
HTMLHTML
Aula X
![Page 2: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/2.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Formatação de textoFormatação de texto
• Tags básicas
• Formatação de parágrafo
• Formatação de fonte
![Page 3: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/3.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Tags BásicasTags Básicas
<b> Teste </b> Teste
<i> Teste </i> Teste
<s> Teste </s> Teste
<u> Teste </u> Teste
<b><i><u>Teste</u></i></b> Teste
![Page 4: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/4.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Formatação de ParágrafoFormatação de Parágrafo
• É utilizada através do conjunto de tags <hX> onde x vai de 1 até 6.
• Formata o texto com tamanhos predefinidos e com uma quebra de linha automática após a finalização da tag:
<h1> ... </h1> <h2> ... </h2>
<h3> ... </h3> <h4> ... </h4>
<h5> ... </h5> <h6> ... </h6>
![Page 5: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/5.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Formatação de fonteFormatação de fonte
• A tag para formatação de fonte é a <font>.• Ela possui parâmetros que nos permite
alterar a cor, o tamanho e o tipo da fonte. • Esses parâmetros podem ser
combinados.• <font color=“”> cor em inglês ou sua
codificação hexadecimal.• <font face=“”> nome do tipo de fonte• <font size=“”> tamanho de 1 à 7
![Page 6: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/6.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Formatação de fonteFormatação de fonte
<font size=“3” color=“red”> Teste </font> Teste
<font color=“red” face=“comic sans ms”> Teste </font> Teste
<font color=“green” face=“courier new” size=“7”> <b> Teste </b> </font> Teste
![Page 7: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/7.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
ExercíciosExercícios
Construa uma página da web onde serão desenvolvidos os exercícios abaixo
• 1) Escreva a frase “Meu Brasil brasileiro” com cada letra com um tipo e uma cor diferente.
• 2) Escreva a frase “Um país de várias culturas, raças, povos, nações, um mundo dentro de um país, um país dentro de um mundo” utilizando negrito ou sublinhado para destacar as palavras culturas / raças / povos / nações / mundo .
![Page 8: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/8.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
HTMLHTML
Aula X
![Page 9: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/9.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
ImagensImagens
• Tipos de imagens
• Inserindo uma imagem na página
• Inserindo uma imagem no fundo da página
![Page 10: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/10.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Tipos de ImagensTipos de Imagens
• JPG
• GIF
• PNG
• BMP
• ICO
![Page 11: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/11.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Inserindo uma imagem na Inserindo uma imagem na páginapágina
• Com o comando img podemos inserir uam imagem na página.
• <img src=“caminho\da\imagem”>• Existem parâmetros para:
• Alterar altura e largura: height / width , os valores devem ser em pixel(não utiliza nenhum simbolo) ou porcentagem (%)
• <img src=“foto.jpg” width=“10%”>• <img src=“foto.jpg” width=“100”>
• No primeiro exemplo a imagem será exibida com á largura de 10% de seu tamanho original, já no segundo a imagem será exibida com á largura de 100 pixels.
![Page 12: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/12.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Inserindo uma imagem na Inserindo uma imagem na páginapágina
• ALT– O parâmetro alt é utilizado para quando a
imagem não for carregada exibir um texto(no mesmo local da imagem) ALTernativo, este texto também é exibido quando o cursor estiver sobre a imagem.
<img src=“bat.jpg” alt=“Cartaz do Batman”>
![Page 13: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/13.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Inserindo uma imagem no Inserindo uma imagem no fundo da páginafundo da página
• Para inserir um imagem como fundo de nossa página web, devemos alterar a tag body acrescentando o parametro background.
<body background=“fundo.jpg”>
Cada documento deve ter apenas uma tag BODY
![Page 14: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/14.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
HTMLHTML
Aula x
![Page 15: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/15.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
ListasListas
• Listas ordenadas
• Listas desordenadas
![Page 16: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/16.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Listas OrdenadasListas Ordenadas
• Uma lista ordenada consiste em criar uma lista com numeração.
• A tag para criar uma lista ordenada é a tag ol (ordened list).
• Cada item da lista deve ter o comando li (list item):
<ol><li> Primeiro item da lista </li><li> Segundo item da lista </li>
</ol>
![Page 17: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/17.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Listas OrdenadasListas Ordenadas
• O comando ol tem os seguintes parâmetros:
• Start escolher em que posição sua lista ira iniciar
• Type escolher o tipo de numerador pra lista entre: 1 / i / I / a / A
<ol start=“3” type=“a”><li> Primeiro item da lista </li><li> Segundo item da lista </li>
</ol>
![Page 18: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/18.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Listas DesordenadasListas Desordenadas
• Uma lista desordenada consiste em criar uma lista com marcadores.
• A tag para criar uma lista ordenada é a tag ul (unordened list).
• Cada item da lista deve ter o comando li (list item):
<ul><li> Primeiro item da lista </li><li> Segundo item da lista </li>
</ul>
![Page 19: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/19.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Listas DesordenadasListas Desordenadas
• O comando ul tem os seguintes parâmetros:
• Type escolher o tipo de marcador pra lista entre: square / circle / disc
<ul type=“square”>
<li> Primeiro item da lista </li>
<li> Segundo item da lista </li>
</ul>
![Page 20: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/20.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
ExercíciosExercícios
Construa uma página da web onde serão desenvolvidos os exercícios abaixo.1) Insira uma foto de um estádio como plano de fundo.2) Insira o brasão de 5 times de futebol.3) Crie uma lista ordenada com o nome dos 4 primeiros clubes do campeonato brasileiro.4) Crie uma lista ordenada com o nome dos 4 últimos clubes do campeonato brasileiro.5) Crie uma lista desordenada com os candidatos a prefeito de Americana.
![Page 21: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/21.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
HTMLHTML
Aula X
![Page 22: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/22.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
TabelasTabelas
• Criando tabelas
• Mesclando linhas/colunas
• Formatação de tabelas
![Page 23: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/23.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Criando TabelasCriando Tabelas
• Uma tabela é formada por linhas e colunas
Linha
Coluna
![Page 24: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/24.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Criando TabelasCriando Tabelas
• Para criar a tabela anterior segue código:<table><tr>
<td> .... </td><td> .... </td><td> .... </td>
</tr><tr>
<td> .... </td><td> .... </td><td> .... </td>
</tr></table>
![Page 25: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/25.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Criando TabelasCriando Tabelas
• Analisando o código anterior temos:– Cirando a tabela: <table>– Criando a linha: <tr>– Criando coluna: <td>
Sabendo isso, quantas linhas e colunas temos no código a seguir?
![Page 26: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/26.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
<table><tr>
<td> Segunda </td> <td> Terça </td><td> Quarta </td> <td>Quinta</td></tr><tr>
<td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td></tr><tr>
<td> Dentista </td> <td> Academia </td><td> Curso </td><td>Leitura</td>
</tr><tr>
<td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td></tr><tr>
<td> Dentista </td> <td> Academia </td><td> Curso </td><td>Leitura</td>
</tr><tr>
<td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td></tr></table>
![Page 27: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/27.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
LINHAS
![Page 28: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/28.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
<table><tr>
<td> Segunda </td> <td> Terça </td><td> Quarta </td> <td>Quinta</td></tr><tr>
<td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td></tr><tr>
<td> Dentista </td> <td> Academia </td><td> Curso </td><td>Leitura</td>
</tr><tr>
<td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td></tr><tr>
<td> Dentista </td> <td> Academia </td><td> Curso </td><td>Leitura</td>
</tr><tr>
<td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td></tr></table>
![Page 29: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/29.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Colunas
![Page 30: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/30.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
<table><tr>
<td> Segunda </td> <td> Terça </td><td> Quarta </td> <td>Quinta</td></tr><tr>
<td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td></tr><tr>
<td> Dentista </td> <td> Academia </td><td> Curso </td><td>Leitura</td>
</tr><tr>
<td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td></tr><tr>
<td> Dentista </td> <td> Academia </td><td> Curso </td><td>Leitura</td>
</tr><tr>
<td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td></tr></table>
![Page 31: Html](https://reader035.vdocuments.com.br/reader035/viewer/2022062706/557db14cd8b42a11428b4a16/html5/thumbnails/31.jpg)
MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS
Criando TabelasCriando Tabelas
• A tabela possui 5 linhas com 4 colunas em cada linha