HTML/ CSS
CEDUP – ABÍLIO PAULO:
PROFESSOR: JÉSSICA DONDÓSSOLA
Internet
⚫ 1969 - ARPANET
⚫ 1972 - 50 universidades e instituições militares
⚫ 1990 - HTML
⚫ 1993 - MOSAIC
⚫ 1994 - NETSCAPE
⚫ 1995 – OPERA/Internet Explorer
Servidores WEB
Serviço HTTP
Internet/Rede
Usuário
Servidor
O que é HTML?
⚫ HTML (HyperText Markup Language
ou Linguagem de Marcação de
Hipertexto) nada mais é que
uma linguagem de marcação utilizada
para desenvolvimento de páginas na
Web. Criado por Tim Berners-Lee um
físico britânico, cientista da
computação e professor
do MIT (Instituto de Tecnologia de
Massachusetts)
O que é HTML?
⚫ Todo documento HTML apresenta tags, estes
elementos são apresentados entre os sinais de menor
e maior, como <head>, <p>, <div> e assim por
diante, estas tags permitem informar a estrutura do
conteúdo informado.
⚫ A partir disto o conteúdo pode ser divido e
apresentado para o usuário de maneira diferenciada,
separando o título do texto, destacando parte do
texto e adicionando imagens.
Tags
⚫ HTML
Sempre que criamos um arquivo html devemos inserir a tag “html”, todo o
conteúdo inserido nesta tag será interpretado pelo navegador.
<html>
...
</html>
Tags
⚫ HEAD
A tag “head” é responsável por definir informações importantes em nosso
site, como autor, descrição, titulo, etc...
<html>
<head>
...
</head>
...
</html>
Tags
⚫ TITLE
A tag “title” permitira informar um título para o site que será exibido na
barra de título do seu navegador.
<html>
<head>
<title>Título do nosso site.</title>
</head>
...
</html>
Tags
⚫ BODY
A tag “body” contem o conteúdo de nosso site, tudo que for inserido
dentro desta tag será exibido pelo navegador.
<html>
<head>... </head>
<body>
...
</body>
</html>
Tags
⚫ H1, H2, H3, H4, H5 e H6
As tags “H*” são identificadas como tags exclusivas para títulos, quanto
menor o numero maior seu tamanho.
<html>
<head>...</head>
<body>
<h1>Titulo</h1>
</body>
</html>
Tags
⚫ P
A tag “p” é uma tag definida para informar o parágrafo de um texto.
<html>
<head>...</head>
<body>
<h1>Titulo</h1>
<p>Vamos aprender HTML</p>
</body>
</html>
Tags
⚫ STRONG e EM
A tag “strong” é uma tag definida para realizar destacar parte do texto em
negrito, enquanto a tag “em” destaca o texto em itálico.
<html>
<head>...</head>
<body>
<p>Olá <strong>Cristiano</strong>,
<em>Bem vindo.</em></p>
</body>
</html>
Tags
⚫ BR
A tag “br” é uma tag definida para realizar um quebra de linha em um
texto.
<html>
<head>...</head>
<body>
<h1>Titulo</h1>
<p>Vamos aprender HTML<br />
Agora com quebra de linha</p>
</body>
</html>
Tags
⚫ UL/OL e LI
As tags “ul” e “ol” são tags especificas para listas, para inserir itens em
uma lista usamos a tag “li”.
<html>
<head>...</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>
Tags
⚫ HR
A tag “hr” é uma tag definida para separar textos através de uma linha
horizontal.
<html>
<head>...</head>
<body>
<p>Vamos aprender HTML.</p>
<hr />
<p>Agora com textos separados.</p>
</body>
</html>
Tags
⚫ TABLE
A tag “table” é uma tag definida para criar tabelas, para definição de uma
linha usamos a tag “tr” as colunas podem ser definidas através das tags “th”
(para título) e “td” (para conteúdo).
<table>
<tr>
<th>Mês</th>
<th>Valor</th>
</tr>
<tr>
<td>Janeiro</td>
<td>R$ 100,00</td>
</tr>
</table>
Tags
⚫ SPAN
Com a tag “span” você pode adicionar estilos ao conteúdo, ou manipular o
conteúdo.
<html>
<head>...</head>
<body>
<p>Olá <span>Cristiano</span>,
Bem vindo.</p>
</body>
</html>
Tags
⚫ DIV
A tag “div” define uma divisão ou uma seção, usada para agrupar blocos
de elementos.
<html>
<head>...</head>
<body>
<div>
Vamos aprender HTML.<br />
Vamos criar uma seção.
</div>
</body>
</html>
Tags e Atributos
⚫ IMG
A tag “img” é utilizada para inserir imagens em nosso site, utilizamos o
atributo “src” para definir o caminho da imagem.
<html>
<head>...</head>
<body>
<img src=“fotos/carro.jpg” />
</body>
</html>
Tags e Atributos
⚫ A
A tag “a” é utilizada para criar um hiperlink ou seja uma rota para outro
local, utilizamos o atributo “href” para definir o local onde desejamos
acessar.
<html>
<head>...</head>
<body>
<a href=“http://www.site.com/”>
Site</a>
<a href=“mailto:[email protected]”>
E-mail</a>
</body>
</html>
Formulário
⚫ Formulários são definidos através da tag “form”, o
uso do atributo “action” permite informar para qual
caminho os dados devem seguir.
<form action=“mailto:
[email protected]”>…</form>
<form action=“cadastro.php”>…</form>
Campos de Formulário
⚫ Campo Texto:
<input type=“text” value=“” name=“texto”
maxlength=“10” />
type: Tipo de campo.
value: Valor padrão.
name: Nome do campo.
maxlenght: Máximo de caracteres.
Campos de Formulário
⚫ Campo Senha:
<input type=“password” />
⚫ Campo Oculto:
<input type=“hidden” />
⚫ Campo Arquivo:
<input type=“file” />
Campos de Formulário
⚫ Campo Checkbox:
<input type=“checkbox” checked=“checked ” />
⚫ Campo Radio Botton:
<input type="radio" name=“tipo" value=“A“
checked=“checked ” />
<input type="radio" name=“tipo" value=“B" />
checked: Campo irá iniciar o item já marcado.
Campos de Formulário
⚫ Campo Combobox e List:
<select multiple="multiple”>
<option value=“ford">Ford</option>
<option value=“gm">GM</option>
</select>
multiple: Este atributo define como uma lista
permitindo selecionar mais de 1 item.
Campos de Formulário
⚫ Campo Texto Longo:
<textarea rows="2" cols="20"></textarea>
rows: Quantidade de linhas.
cols: Quantidade de colunas.
Campos de Formulário
⚫ Botão de ação do formulário:
<input type=“submit” value=“Enviar” />
Botão para limpar o formulário:
<input type=“reset” value=“Limpar” />
Botão de ações diversas:
<input type=“button” value=“Clique” />
