Scribd
Carregar
11 visualizações32 páginas

Aula4 - (HTML)

Enviado por

Rodrigo Leite
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
11 visualizações32 páginas

Aula4 - (HTML)

Enviado por

Rodrigo Leite
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 32

HTML

Paulo Victor Silva Ouriques


Agenda
● Introdução
● Formatação
● Imagens
● Links
● Listas
● Formulários
● Tabelas
Introdução
● Hyper Text Markup Language
○ Tim Berners-Lee (físico britânico) criou o HTML
original
○ Baseada na Standard Generalized Markup
Language (SGML)
○ Não é uma linguagem de programação
○ Usa tags para descrever páginas web
Introdução
● Documento HTML
○ Formato de texto simples
○ Extensão .htm ou .html
○ Visualizado nos navegadores (firefox, chrome, etc);
Introdução
● Editor HTML
○ Na Web
■ http://www.w3schools.com
○ Editores
■ Sublime, Notepad, Ultraedit, Notepad++, etc
○ Editores Avançados
■ Eclipse EE, Dreamweaver, etc
Introdução
● Sintaxe HTML
○ Tag:
■ <tag> … </tag>
■ <tag />
○ Tag com atributos:
■ <tag atributo1=”...” atributo2=”...”> … </tag>
■ <tag atributo1=”...” atributo2=”...” />
Introdução
● Estrutura de um Documento HTML
Introdução
● Tag <body>
○ A tag refere-se ao corpo da página web
■ Possui os seguintes atributos
● bgcolor: cor de fundo
● text: cor do texto
● link: cor dos links
● alink: cor do link ativo
● vlink: cor dos links visitados
Introdução
● Cores
○ Por nome em inglês
■ red, green, blue, orange, black;

○ Por valor em hexadecimal no formato RGB


■ #FF0000 refere-se a cor vermelha;
■ #AA0000 refere-se a cor vermelha com um tom mais escuro;
■ #8F8F8F quando os três componentes são iguais, a cor
resultante é cinza;
Formatação
● Negrito
○ <b> Texto em negrito </b>
● Itálico
○ <i> Texto em itálico </i>
● Fonte
○ <font face=”arial” size=”12” color=”red”> Texto </b>
● Cores
○ ???
Formatação
● Texto
○ Cabeçalho
■ <h1> Cabeçalho principal </h1>
■ <h2> Cabeçalho secundário </h2>
○ Parágrafo
■ <p> Parágrafo </p>
○ Linha de separação de texto
■ <hr/>
○ Quebra de linha de texto
■ <br/>
Imagens
● Imagens
○ Imagens hospedadas em algum servidor
○ Imagens hospedadas no nosso servidor
○ Exemplos
■ <img src="pic_mountain.jpg">
■ <img src="http://goo.gl/s9qadf">
■ <img src="pic_mountain.jpg" alt="Mountain View" style="width:
304px; height:228px">
■ <img src="http://goo.gl/s9qadf" alt="Mountain View" style="width:
304px; height:228px">
Links
● Sintaxe
○ <a href=“http://link.com/page.html”> clique aqui </a>
Listas
● Sintaxe
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

● Resultado
● Coffee
● Milk
Listas
● Sintaxe
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

● Resultado
1. Coffee
2. Milk
Tag <div>
● Define uma seção em uma página HTML
○ Delimita região que nenhum, um ou vários elementos

● Extremamente utilizado no web development


○ Vamos utilizar quando estudarmos CSS

● Atributos:
○ id: identificador único no documento HTML
○ class: especifica um conjunto de classes CSS
○ style: especifica um conjunto de atributos CSS
Tag <div>

<div id=“frases1”>
<b>Estou em negrito.</b>
<i>Estou em itálico.</i>
</div>
<div id=“frases2”>
<i><b>Estou em negrito e em itálico.</b></i>
</div>
Tag <span>
● Similar à tag <div>, exceto que:
○ <div> quebra a linha, ou seja, dois elementos <div>
aparecem um em baixo do outro
○ <span> não quebra a linha, ou seja, dois elementos
<span> aparecem um no lado do outro
Tag <span>

<div>em cima</div>
<div>em baixo</div>
<span>esquerda</span>
<span>direita</span>

● Como vai ficar?


Formulários
● Um formulário é definido pela tag <form>
○ Atributo action define a página que será solicitada;
○ Atributo method define o método {POST, GET} que
será usado para enviar os dados do formulário;
○ <input> define um controle de entrada de dados;
<form name="meuForm" action="cadastrar.jsp" method="get">
<input name="form" type="text" />
</form>
Formulários
● Controle Botão é definido por

<input type=“button” value=“...” />

● Para submeter os dados de um formulário:

<input type=“submit” value=“...” />

● Para limpar os dados de um formulário:

<input type=“reset” value=“...” />


Formulários
● Controle Linha de Texto é definido por
<input type=“text” name=“...” />

● Rótulo do controle é definido por


<label for=“...”>rótulo</label>

● Exemplo:
<form name="meuForm" action="" method="get">
<label for="cpf">CPF:</label>
<input type="text" name="cpf" />
<input type="submit" value="Submeter" />
</form>
Formulários
● Controle Senha é definido por:

<input type=“password” name=“...” />

● Exemplo:
<form name="login" action="" method="get">
<label for="cpf">CPF:</label>
<input type="text" name="cpf" />
<label for="senha">Senha:</label>
<input type="password" name="senha" />
<input type="submit" value="Entrar" />
</form>
Formulários
● Controle checkbox (múltipla única) é definido por:

<input type=“checkbox” name=“...” />

● Exemplo:
<form name="cadastro" action="" method="get">
<input type="checkbox" name="celular"/> Celular
<input type="checkbox" name="fixo"/> Fixo
<input type="submit" value="Escolher" />
</form>
Formulários
● Controle Seleção (Combo Box) é definido por:

<option value=“”> inicia uma opção </option>

● Exemplo:
<select name="carro">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Formulários
● Controle Texto é definido pela tag <textarea>
○ Atributo rows e cols definem o número de linhas e colunas,

respectivamente

● Exemplo:
<textarea name="observacao" rows="10" cols="30">
Estou testando o campo de texto.
</textarea>
Tabelas
● Uma tabela é definida com a tag <table> que tem os
seguintes atributos:
○ border: espessura da borda
○ cellpadding: espaçamento entre o texto e a borda
da célula
○ cellspacing: espaçamento entre duas células
○ width e height: pode ser em número de pontos ou
em porcentagem
Tabelas
● Partes de uma tabela:
○ <tr> inicia uma linha
○ <dr> inicia uma coluna
○ <th> inicia um cabeçalho
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Tabelas
● Atributos de TR, TD e TH
○ width e height
■ Pode ser em pontos ou em porcentagem
■ Exemplo: <td width=“50%”></td> significa que a célula terá
50% da largura total da tabela;
○ align
■ Alinhamento do texto na horizontal
■ left, right, center
○ valign
■ Alinhamento do texto na vertical;
■ top, middle, bottom;
○ bgcolor
■ Cor de fundo
Tabelas
● Atributos de TD
○ colspan=”número”
■ indica o número de colunas que a célula será unida

○ rowspan=”número”
■ indica o número de linhas que a célula será unida;
Dúvidas?
HTML
Paulo Victor Silva Ouriques

Você também pode gostar