Html

MICROCAMP AMERICANA – WEB DEVELOPER – HTML / CSS

HTMLHTML

Aula X


Formatação de textoFormatação de texto

• Tags básicas

• Formatação de parágrafo

• Formatação de fonte


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


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>


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


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


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 .


HTMLHTML

Aula X


ImagensImagens

• Tipos de imagens

• Inserindo uma imagem na página

• Inserindo uma imagem no fundo da página


Tipos de ImagensTipos de Imagens

• JPG

• GIF

• PNG

• BMP

• ICO


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.


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”>


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


HTMLHTML

Aula x


ListasListas

• Listas ordenadas

• Listas desordenadas


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>


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>


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>


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>


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.


HTMLHTML

Aula X


TabelasTabelas

• Criando tabelas

• Mesclando linhas/colunas

• Formatação de tabelas


Criando TabelasCriando Tabelas

• Uma tabela é formada por linhas e colunas

Linha

Coluna



• 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>



• 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?


<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>



</tr><tr>

<td> 12:00 </td> <td> 13:30 </td><td> 14:00 </td><td> 16:45 </td></tr></table>


LINHAS


<table><tr>




</tr><tr>



</tr><tr>



Colunas


<table><tr>




</tr><tr>



</tr><tr>




• A tabela possui 5 linhas com 4 colunas em cada linha

Education

Html