SlideShare uma empresa Scribd logo
Introdução ao HTML
e CSS
Prof. Sérgio Souza Costa

Obs: Alguns slides foram elaborados pela professora Vanesssa
O que o servidor faz ....
O que o cliente (navegador web) faz ....
O HTML, nada mais que texto
O navegador renderiza o HTML
HTML Timeline

vs.

1990

1995

1996 1997

1998

1999

2000

2001

XHTML
2.0
Begins…

HTML
1.0

RFC
1866

2002

Logo
oficial do
Html5

201
0
HTML Timeline

vs.

1990

1995

1996 1997

1998

1999

2000

2001

XHTML
2.0
Begins…

HTML
1.0

RFC
1866

2002

Logo
oficial do
Html5

201
0
HTML - Template

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
HTML 4.01 - Template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:
//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title></title>
</head>
<body>
<p>Ola mundo</p>
</body>
</html>
HTML 5 - Template
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
XHTML - Template
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html lang=”EN” dir=”ltr” xmlns=”http://www.w3.
org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/xml;
charset=utf-8” />
<title></title>
</head>
<body>
</body>
</html>
HTML vs XHTML
HTML: dont worry !! escreva algo que o
navegador fará o seu melhor para renderizar.

XHTML: se não é para fazer direito, melhor
nem começar. Como vais querer que o
JavaScript, CSS, AJAX funcione ?
● rigidez do XML
HTML
● HyperText Markup Language (HTML) ou Linguagem de
Marcação de Hipertexto é a linguagem usada pelos
navegadores para mostrar as páginas web ao usuário.
● Ela permite combinar textos, imagens e áudios, além
introduzir referências a outras páginas por meio dos
links hipertextos.
Tags, elementos e atributos
● A sintaxe da HTML baseia-se em um elemento chamado
tag (etiqueta).
● Tags são rótulos usados para informar ao navegador
como o conteúdo deve ser apresentado.
Tags, elementos e atributos
● A tag tem a seguinte forma geral:
<tag> ..... </tag>
● Tudo que estiver contido entre uma tag de abertura <> e
uma tag de fechamento </> será processado segundo o
comando contido na tag.
● Algumas tags, chamadas tags de comandos isolados,
não necessitam de um conteúdo para serem
processados.
<BR>
● Tag para pular linha
E quanto aos atributos ?
E quanto aos atributos ?
Atributos modificam as tags, dizendo algo
sobre os elementos
< html >
< head >
< title > Popular Websites: Google < /title >
< /head >
< body >
< h1 > About Google < /h1 >
< p > Google is best known for its search engine, although Google now offers a
number of other services. < /p >
< p > Google’s mission is to organize the world’s information and make it
universally accessible and useful. < /p >
< p > Its founders Larry Page and Sergey Brin started Google at Stanford
University. < /p >
< p > < a href=”http://www.Google.com/” > Click here to visit Google’s Web site. < /a > < /p >
< /body >
< /html >
Tags, elementos e atributos
Com a evolução da web, novos padrões,
crescimento na complexidade dos grandes
sistemas ...
Algumas tags perderam o uso para outros
padrões. Então temos :
● Bad tags, conheça para não usar :)
● Good tags
Bad Tags
Tag

Explanation

b

Presentational. Use strong instead.

basefont

Deprecated.

big

Presentational. Use CSS instead.

center

Deprecated.

dir

Deprecated.

font

Deprecated.

hr

Presentational. Use CSS instead.

i

Presentational. Use em instead.

u

Deprecated.
Bad Tags
Tag

Explanation

isindex

Deprecated.

menu

Deprecated.

s

Deprecated.

small

Presentational. Use CSS instead.

strike

Deprecated. Use del instead.

tt

Presentational. Use CSS instead.
Good tags: tags que tem semântica
relacionada
<p> , <body>, <strong>, <em>, <a>, <ul>, <li> ...
O que pode ter no HTML ?
O que pode ter no HTML ?

Elementos estruturantes
Elementos estruturantes
HTML – Seção HEAD
● O elemento HEAD (Cabeçalho) define uma seção que
contém informações sobre o documento HTML.
● A seção pode incluir scripts, instruções para o browser
encontrar os estilos, metadados, entre outros.
● As tags que podem estar na seção HEAD são:
● <title>
● <base>
● <link>
● <meta>
● <script>
● <style>
HTML – Seção HEAD
Elemento TITLE
● Define o título do documento
● O elemento título é obrigatório em todos os documentos
HTML/XHTML.
● Esse título é referenciado em buscas pela rede, dando
uma identidade ao documento.
● Ao adicionar uma página aos seus Favoritos
(Bookmarks), o título da página se torna a âncora de
atalho para ela.
HTML – Seção HEAD
Elemento TITLE

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Home Page do Sérgio Costa</title>
</head>
<body>
</body>
</html>
HTML – Seção HEAD
Elemento BASE
● Define uma url padrão para os links do
documento.
● <base href =http://meusite.com.br />

● Define um target padrão para os links do
documento.
● <base target =“_blank” />
HTML – Seção HEAD
Elemento LINK
● Define ligações do documento HTML com outros
arquivos como CSS, scripts, etc.
● Tem como atributos as tags rel, type e href
● Onde rel define o tipo de relacionamento
● Type fornece informações aos navegadores sobre o
conteúdo do elemento que o contém (dado, estilo,
script...)
● HREF informa a URL que o link aponta
● A tag <link> é mais usada para ligar o documento HTML
com o style sheets:
<link rel = “stylesheet” type = “text/css” href=“estilo.css”/>
HTML – Seção HEAD
Elemento META
● O propósito do elemento meta é prover meta-informação
sobre o documento.
● Metadados – dados sobre dados
● Usado tipicamente para especificar descrição da página,
palavras-chave, autor do documento, última modificação e
outros metadados.
● Muito frequentemente esse elemento é usado para prover
informação que é relevante para os navegadores ou para as
ferramentas de busca como a descrição do conteúdo do seu
documento.
<meta name = “ ” content = “ ” />
HTML – Seção HEAD
Elemento META
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
<meta charset="UTF-8">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html>
HTML – Seção HEAD
Elemento META
● Um dos elementos do meta é o HTTP-EQUIV.
● Uma das funcionalidades é dizer ao navegador o tipo de
dado que ele encontrará no documento.
HTML – Seção HEAD
Elemento META
● Um exemplo de uso comum do atributo HTTP-EQUIV é
promover a mudança automática de páginas, atribuindolhe o valor Refresh.
view-source:http://www.dpi.inpe.br/~scosta/
<meta http-equiv="refresh" content="3; URL=http://sites.google.com/site/skosta/">
HTML – Seção HEAD
Elemento SCRIPT
Usado para definir um script do lado do cliente, como um
código do javascript.
Torna as páginas mais dinâmicas e iterativas.
Utiliza o atributo type para especificar a linguagem
utilizada.
<script type = “text/javascript>
// código javascript
</script>
HTML – Seção HEAD
Elemento SCRIPT
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display an alert box.
</p>
<button onclick="myFunction()">Try
it</button>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</body>
</html>
HTML – Seção HEAD
Elemento STYLE (CSS)
Incorpora ao documento HTML, a folha de estilos
<style type = “text/css>
grupo{nome_atributo: valor;}
grupo{nome_atributo: valor;}
grupo{nome_atributo: valor;}
</style>

CSS será visto
mais a frente
HTML – Seção BODY
● Tudo que estiver contido em <BODY> será apresentado
ao leitor na janela principal do browser.
● <BODY> pode conter títulos, parágrafos, listas, tabelas,
links para outros documentos, imagens, formulários,
animações, vídeos, sons e scripts embutidos.
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
O que pode ter no HTML ?

Elementos estruturantes
O que pode ter no HTML ?

Elementos estruturantes

Elementos chaves
Elementos chaves
HTML – Seção BODY
Parágrafos e Títulos

Prudência com as
tags de títulos.
HTML – Seção BODY
Tags de Formatação

<i> x <em>
<b> x <strong>
<del> x <strike>
HTML – Seção BODY
Tags de Formatação

NÃO usem tags de
formatação, apenas
"strong" e "em", que
tem uma semântica
associada.
<i> x <em>
<b> x <strong>
<del> x <strike>
O que pode ter no HTML ?

Elementos estruturantes
Elementos chaves
O que pode ter no HTML ?

Elementos estruturantes
Elementos chaves

Listas e dados
Listas e dados
HTML – Seção BODY
Listas
● Em HTML, as listas podem ser itens numerados ou não.
● As listas não numeradas usam a tag <ul> de Unordered
Lists para marcar o começo e fim da lista e a tag <li>
para cada item da lista.
● Os itens da lista são marcados com bullets
<ul>
<li> ... </li>
<li> ... </li>
</ul>
HTML – Seção BODY
Listas
● Em HTML, as listas podem ser itens numerados ou não.
● As listas numeradas usam a tag <ol> de Ordered Lists
para marcar o começo e fim da lista e a tag <li> para
cada item da lista.
● Os itens da lista são marcados com números

<ol>
<li> ... </li>
<li> ... </li>
</ol>
HTML – Seção BODY
Listas
● As listas podem ser compostas

<ul>
<li> ... </li>
<ul>
<li> ... </li>
<li> ... </li>
</ul>
</ul>

● Nivel 1
● Nivel 2
● Nível 2
● Nível 1
HTML – Seção BODY
Listas
● As listas podem usar o atributo type.
● Nas listas não ordenadas, o <type> altera o bullet usado
e pode ter os valores CIRCLE, SQUARE e DISC
(default)

<ul type = square>
<li> ... </li>
<ul type = circle>
<li> ... </li>
<li> ... </li>
</ul>
</ul>

Com CSS podemos
criar outros estilos
para as listas.
HTML – Seção BODY
Tabelas
● Tabelas são definidas pela tag <table>.
● Uma tabela tem linhas (rows) e colunas.
● Em HTML, define-se uma linha com a tag <tr>, de table
row.
● A linha é dividia em colunas, onde os dados são
inseridos através da tag <td>, de table data.
● Dentro de um table data, pode-se inserir texto, figura,
links, listas, formulários, outras tabelas, etc.
HTML – Seção BODY
Tabelas
<table border="1">
<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>
HTML – Seção BODY
Tabelas
● Linhas de cabeçalho podem ser definidas utilizando a
tag <th>, de table header, o que definirá o texto como
negrito e centralizado
<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>
HTML – Seção BODY
Tabelas
● Para inserir uma legenda à tabela, usa-se a tag
<caption>
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
O que pode ter no HTML ?

Elementos estruturantes
Elementos chaves
Listas e dados

Links e imagens
HTML – Seção BODY
Hiperlink (Anchor)
● Em HTML, um link é criado utilizando a tag <a>, de duas
maneiras:
● Para criar um link para outro documento
● Atributo HREF
● Para criar um link para o próprio documento (âncora ou bookmark),
criando um apelido para determinada parte do documento.
● Atributo NAME

● O endereço indicado pelo link pode ser carregado na mesma
janela em que o usuário se encontra, ou em outra janela.
● Essa característica é determinada pelo atributo TARGET
● _self
● _blank
<a href="http://www.w3schools.com">Visit W3Schools.com!</a>
HTML – Seção BODY
Imagens
● Para inserir imagens em um documento HTML, utiliza-se
a tag <img>.
● Os seguintes atributos devem ser configurados:
● src
● Endereço da imagem (source)
● alt
● Texto mostrado no lugar da imagem, caso a mesma,
por algum motivo não puder ser carregada
● width
● Largura da imagem
● heigh
● Altura da imagem
HTML – Seção BODY
Imagens
<!DOCTYPE html>
<html>
<body>
<img src="smiley.gif" alt="Smiley
face" width="42" height="42">
</body>
</html>
O que pode ter no HTML ?

Elementos estruturantes
Elementos chaves
Listas e dados

Formulários

Links e imagens
HTML – Seção BODY
Formulários
● Formulários são usados para enviar dados para um
servidor web.
● Os elementos de um formulário permitem o usuário
entrar com informações, como campos de texto, campos
de área de texto, menus drop-down, botões radiais,
caixas de seleção, etc.
HTML – Seção BODY
Formulários
● A tag <form> define uma área de formulário.
<form>
...
elementos de entrada
...

</form>
HTML – Seção BODY
Formulários
● A tag <input> define um elemento de entrada.
● É a tag mais utilizada em formulários.
● Um elemento de entrada pode ser um campo de texto,
um checkbox, um campo de senha, um botão de radio,
um botão de envio (submit), entre outros.
● Definido pelo atributo type
HTML – Seção BODY
Formulários
● Campo de texto
● <input type = “text” name = “nome” />
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
First name: <input type="text" name="FirstName" value="Mickey"
><br>
Last name: <input type="text" name="LastName" value="Mouse"
><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a
page on the server called "demo_form.asp".</p>
</body>
</html>
HTML – Seção BODY
Formulários - Tipos
Text

Radio

Checked
Submit
CSS
Cascading Style Sheets
O que podemos fazer com CSS ?
Texto
Texto
Tamanho
Posição
Como usamos o CSS nas nossas
paginas Web ?
Três maneiras
Inline
Embedded
External
(ordem: do mais fácil para o melhor)
Inline CSS (bad)
<body>
<h1 style = "color:red ;"> Ola Mundo </h1>
</body>
Inline CSS (bad)
<body>
<p style = "color:red ;"> Ola Mundo </p>
</body>

Mistura
apresentação
com estrutura
Inline CSS (bad)
<body>
<p style = "color:red ;"> Ola Mundo </p>
</body>
É aceito no
HTML
Mistura 4.01
strict e no
apresentação
XHTML
com estrutura
Embedded CSS (OK)
<head>
<style type="test/css">
p {color:red;}
</style>
</head>
Embedded CSS (OK)
<head>
<style type="test/css">
p {color:red;}
</style>
</head>

Rápido e fácil.
Use em
pequenas
aplicações.
External CSS: link tag (GOOD)
<head>
<link rel="stylesheet" href="meuestilo.css">
<head>
Por dentro do CSS
Três partes
1.Seletor
Três partes
1.Seletor
2.Propriedades
Três partes
1.Seletor
2.Propriedades
3.Valores
1. Primeiro selecionamos o elemento

p{}
2. Então dizemos o que queremos
mudar

p { color: }
3. Então dizemos qual o valor para
essa mudança

p { color: blue;}
Chaves

Ponto e virgula

h1 {
color: red;
font-size: 12px;
}
Dois pontos
CSS Sintaxe

1.Seleção
2.Declaração
3.Cascata
SELEÇÃO
Seleção
Tipos de seleção
a. element
b. class
c. id
d. posição no documento
1. Element

p{}
Seleciona todos elemento <p>, em todo o
documento HTML
2. Class

.menu { }
Seleciona todos os elementos da classe "menu"

. significa "esse é um nome de uma
classe"
3. id

#rodape { }
Seleciona o elemento com id "rodape"

# significa "esse é um nome de um id"
4. posição no documento
<div id ="rodape">
<p> aqui é aplicada </p>
<span>aqui nao se aplica</span>
</div>
<p>aqui nao se aplica</p>

#rodape p { color:red; }
Seleciona todos elementos "p" descendentes de
rodape.
aqui é aplicada
aqui nao se aplica
aqui nao se aplica
4. posição no documento
<div id ="rodape">
<p class ="primeiro p" > aqui é aplicada </p>
<p class ="segundo p"> aqui nao se aplica </p>
</div>
<p>aqui nao se aplica</p>

p.primeiro { color:red; }
Seleciona todos elementos "p" descendentes de
rodape.
aqui é aplicada
aqui nao se aplica
aqui nao se aplica
4. posição no documento
#header div.content form p em.required {}

O que estamos selecionando pelo
seletor acima ?
Pseudo classes

a:link {}
a:visited {}
a:hover {}
a:active {}

/* link não visitado */
/* link visitado */
/* mouseover */
/* link selecionado */
DECLARAÇÃO
Declaração
(o que está dentro das chaves)

selector {
property: value;
}
Declaração
É a combinação de propriedade e valor.
Nos declaramos o que queremos mudar
CSS define diversas coisas que
podemos declarar. Exemplo
font
color
background-color
border
(essas são as propriedades)
Cada propriedade possui um
conjunto de valores que pode de
ser aplicado.
font: 12px normal Verdana, sans-serif;
color: #123;
background-color: red;
border: 1px solid rgb(193,193,193);
Propriedades tem diferentes
granularidades
Por exemplo a propriedade "border" ...
Propriedades tem diferentes
granularidades
Por exemplo a propriedade "border" ...
border
border-color
border-bottom
border-width
border-left
border-top
border-right
....
Propriedades tem diferentes
granularidades
Por exemplo a propriedade "border" ...
border

font

border-color
border-bottom
border-width
border-left
border-top
border-right
....

font-family
font-size
font-style
font-weight
Existe uma alternativa mais
simples
shorthand
Existe uma alternativa mais
simples
shorthand
border: 1px solid #000
É equivalente a:

border-width: 1px
border-style: solid
border-color: #000
Podemos mudar especificas partes
no estilo de um elemento
p { border: 1px solid red; }
p.intro {border-color:blue;}

O que estamos fazendo aqui ?
Unidades
Absoulta vs
relativas
px em %
Unidades absolutas
Pixels (px) are unidades absolutas.
Elas são sempre do mesmo “tamanho”.
Independentemente do dispositivo
Unidades relativas
em é sempre relativa ao valor corrente do
tamanho da fonte.
width: 2em;
font-size: 2em;

% é relativo a diferentes coisas em
diferentes contextos
width: 50% ; 50% da largura disponível
font-size: 50% ; 50% do tamanho corrente da fonte
Unidades relativas
em é sempre relativa
tamanho da fonte.
width: 2em;
font-size: 2em;

HTML5
ao valor em
usaremos corrente
para fonts e
não mais px.

% é relativo a diferentes coisas em
diferentes contextos
width: 50% ; 50% da largura disponível
font-size: 50% ; 50% do tamanho corrente da fonte

do
Como é calculado ?
Como é calculado ?
body {font-size:12 px;}
h1 {font-size: 200 % ;}
h1 a {font-size: 75%;}
Como é calculado ?
body {font-size:12 px;}
h1 {font-size: 200% ;}
O texto de h1 é 24 pixels (12*2)
h1 a {font-size: 75%;}
Um link dentro de um h1 é 18 pixel
(12*2*.75)
Como é calculado ?
body {font-size:100%;}
h1 {font-size: .75em;}
Como é calculado ?
body {font-size:100%;}
h1 {font-size: .75em;}
Considerando o tamanho de 16 pixels
para o browser, temos 0.75 * 16 = 12
CASCATA
Cascata
Como e quais declaração serão
aplicadas aos elementos;
Regras para aplicação das declarações
Cascata
Como e quais declaração serão
aplicadas aos elementos;
Regras para aplicação das declarações
Especificidade
Herança
Usualmente, as declarações
são aplicadas na ordem de
definição
p {color: red;}
p {color: blue;}
A ultima declaração é a valida para todos
elementos “p”.
Usualmente, as declarações
são aplicadas na ordem de
definição
ESPECIFICIDADE.

p {color: red;}
p {color: blue;}
A ultima declaração é a valida para todos
elementos “p”.
Usualmente, as declarações
são aplicadas na ordem de
definição
p {color: red;}
p {color: blue;}
A ultima declaração é
elementos “p”.

ESPECIFICIDADE.

A última
a valida para
declaração
mais
específica.

todos
<div id =“a”>
<div id =“b”>
<h1> </h1>
</div>
</div>

#a #b h1 {color:red;}
#a h1 {color: blue;}
Qual seletor é mais específico ?
Qual será a cor de h1 dentro de #b ?
Regras para determinar a
especificade
Elemento é 1 ponto
●Uma classe é 10 pontos
●Um id é 100 pontos
●
Regras para determinar a
especificade
Elemento é 1 ponto
●Uma classe é 10 pontos
●Um id é 100 pontos
●
Regras para determinar a
especificade
○
○
○

Elemento é 1 ponto
Uma classe é 10 pontos
Um id é 100 pontos

p a {} = 2 pontos
p.intro a {} = 12 pontos
#about p.intro a {} = 112 pontos
Herança
Elemento podem herdar estilos dos
elementos ascendentes
#blog {color: red;}
<div id=“blog”>
<p>Ola</p>
</div>
O elemento “p” por ser descendente de
#blog, terá cor vermelha.
#blog {color: red;}
<div id=“blog”>
<p>Ola</p>
</div>
O elemento “p” por ser descendente de
Atenção,
nem
#blog, terá cor vermelha. todos os
estilos são
“herdáveis”.
Usualmente ...
Propriedades relativas a texto
são herdadas
Propriedades relativas a layout
não são herdáveis
.
Layout

1.Modelo caixa
2.Fluxo (“propriedade display”)
3.Posição
4.Flutuação
Modelo caixa

Content
Padding
Border
Margin
Modelo Caixa

Content
Declarando margin ou
padding
margin: 1em;
Todas as margens = 1em

margin: 1em 2em;
Superior e inferior = 1em e direita e esquerda =
2em

margin: 1em 2em 3em 4em ;
Superior = 1em, direita = 2em, inferior = 3em e
esquerda = 4em
Declarando margin ou
padding
margin: 1em;
Todas as margens = 1em

margin: 1em 2em;
Superior e inferior = 1em e direita e esquerda =
2em
Movimento
do relógio

margin: 1em 2em 3em 4em ;

Superior = 1em, direita = 2em, inferior = 3em e
esquerda = 4em
Fluxo (“propriedade display”)
Em linha (inline)
Mostra na mesma linha
Ex: <span>, <a>, <input>, <img> ..

Nível de bloco (block)
Mostra em uma linha posterior
Ex: <h1>,<p>, <ul>, <div>
Exemplo
<p> Click <a href=""> aqui </a> </p>
a { display: block; }
Click
aqui
Posição
static (padrão)
absolute
relative
fixed
Posição
static (padrão)
absolute
relative
fixed

Flutuação
(float)
Exercícios
css-walkthrough

Mais conteúdo relacionado

Mais procurados

Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
Rodrigo Bueno Santa Maria, BS, MBA
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
Bruno Grange
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
Tiago Luiz Ribeiro da Silva
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
Carlos Eduardo Kadu
 
CSS
CSSCSS
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
Leonardo Soares
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
Rodrigo Bueno Santa Maria, BS, MBA
 
Introdução à Programação Web com Angular
Introdução à Programação Web com AngularIntrodução à Programação Web com Angular
Introdução à Programação Web com Angular
Elmano Cavalcanti
 
Html
HtmlHtml
Aula 02
Aula 02Aula 02
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
Rodrigo Branas
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
Léo Dias
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
Centro Paula Souza
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
Jose Augusto Cintra
 
10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos
Centro Paula Souza
 
07 html formulários
07 html   formulários07 html   formulários
07 html formulários
Centro Paula Souza
 
Curso HTML e CSS Part1
Curso HTML e CSS Part1Curso HTML e CSS Part1
Curso HTML e CSS Part1
Herbet Ferreira Rodrigues
 
Node.js e Express
Node.js e ExpressNode.js e Express
Node.js e Express
Dan Vitoriano
 
JSP: Introdução Parte 1
JSP: Introdução Parte 1JSP: Introdução Parte 1
JSP: Introdução Parte 1
Elaine Cecília Gatto
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScript
Thiago Poiani
 

Mais procurados (20)

Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
CSS
CSSCSS
CSS
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
Introdução à Programação Web com Angular
Introdução à Programação Web com AngularIntrodução à Programação Web com Angular
Introdução à Programação Web com Angular
 
Html
HtmlHtml
Html
 
Aula 02
Aula 02Aula 02
Aula 02
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos
 
07 html formulários
07 html   formulários07 html   formulários
07 html formulários
 
Curso HTML e CSS Part1
Curso HTML e CSS Part1Curso HTML e CSS Part1
Curso HTML e CSS Part1
 
Node.js e Express
Node.js e ExpressNode.js e Express
Node.js e Express
 
JSP: Introdução Parte 1
JSP: Introdução Parte 1JSP: Introdução Parte 1
JSP: Introdução Parte 1
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScript
 

Destaque

Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
Tales Augusto
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
Mayza de Oliveira
 
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e ParágrafoIntrodução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Alamo Saravali
 
HTML
HTMLHTML
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
Diego Eis
 
Regras básicas na construção de um site
Regras básicas na construção de um siteRegras básicas na construção de um site
Regras básicas na construção de um site
Ana Santos
 
HTML Básico
HTML BásicoHTML Básico
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
Vinícius Roggério da Rocha
 
Html 5 e Css3
Html 5 e Css3Html 5 e Css3
Html 5 e Css3
Faculdade São Lucas
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
Kaoru Hatake
 
HTML, CSS & Style Guides
HTML, CSS & Style GuidesHTML, CSS & Style Guides
HTML, CSS & Style Guides
Bruno Trecenti
 
Tic 10º Ano - Apresentação
Tic 10º Ano - ApresentaçãoTic 10º Ano - Apresentação
Tic 10º Ano - Apresentação
João Torres
 
HTML/CSS Patterns
HTML/CSS PatternsHTML/CSS Patterns
HTML/CSS Patterns
Leonardo Quixada
 
Desenvolvimento-web-com-html-css-e-javascript
Desenvolvimento-web-com-html-css-e-javascriptDesenvolvimento-web-com-html-css-e-javascript
Desenvolvimento-web-com-html-css-e-javascript
Manuel Fernando
 
E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)
Devmedia
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Fábio Flatschart
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
PeslPinguim
 
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Renato Bongiorno Bonfanti
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
Heraldo Gonçalves Lima Junior
 
Introdução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, AjaxIntrodução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, Ajax
Gabriel Kamimura Yano
 

Destaque (20)

Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
 
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e ParágrafoIntrodução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
Introdução ao HTML - Parte 1 - O que é?, Títulos, Texto Simples e Parágrafo
 
HTML
HTMLHTML
HTML
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
 
Regras básicas na construção de um site
Regras básicas na construção de um siteRegras básicas na construção de um site
Regras básicas na construção de um site
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Html 5 e Css3
Html 5 e Css3Html 5 e Css3
Html 5 e Css3
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
HTML, CSS & Style Guides
HTML, CSS & Style GuidesHTML, CSS & Style Guides
HTML, CSS & Style Guides
 
Tic 10º Ano - Apresentação
Tic 10º Ano - ApresentaçãoTic 10º Ano - Apresentação
Tic 10º Ano - Apresentação
 
HTML/CSS Patterns
HTML/CSS PatternsHTML/CSS Patterns
HTML/CSS Patterns
 
Desenvolvimento-web-com-html-css-e-javascript
Desenvolvimento-web-com-html-css-e-javascriptDesenvolvimento-web-com-html-css-e-javascript
Desenvolvimento-web-com-html-css-e-javascript
 
E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)E-book sobre HTML 5 (Devmedia)
E-book sobre HTML 5 (Devmedia)
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
 
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Introdução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, AjaxIntrodução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, Ajax
 

Semelhante a Introdução ao HTML e CSS

HTML introdução
HTML  introduçãoHTML  introdução
HTML introdução
Sandro Lopes
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
Reinaldo Vieira dos Santos
 
HTML- conceitos. pptx
HTML- conceitos.                    pptxHTML- conceitos.                    pptx
HTML- conceitos. pptx
TomasSousa7
 
Programacao para Web I 03 HTML
Programacao para Web I 03 HTMLProgramacao para Web I 03 HTML
Programacao para Web I 03 HTML
DESIGN DIGITAL UNIARA 2012
 
00 a linguagem html
00 a linguagem html00 a linguagem html
00 a linguagem html
Vasco Ferreira
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Fabio Moura Pereira
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
Cesar Braz
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
alexinaa
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
alexinaa
 
Html5 em 15 minutos
Html5 em 15 minutosHtml5 em 15 minutos
Html5 em 15 minutos
José Willams
 
04 01 estrutura de um documento
04 01 estrutura de um documento04 01 estrutura de um documento
04 01 estrutura de um documento
Vasco Ferreira
 
Curso HTML módulo 3 - Conceitos básicos CSS
Curso HTML módulo 3 - Conceitos básicos CSSCurso HTML módulo 3 - Conceitos básicos CSS
Curso HTML módulo 3 - Conceitos básicos CSS
Michel Bernardes de Jesus
 
Html completo
Html completoHtml completo
Html completo
EMSNEWS
 
Html aula 1
Html aula 1Html aula 1
Html aula 1
Sedu
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Eduardo Bertolucci
 
Apostila html1
Apostila html1Apostila html1
Apostila html1
Mércia Regina da Silva
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
Israel Messias
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
Luis Gustavo Almeida
 
O que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seoO que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seo
introfini
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
clodiney cruz
 

Semelhante a Introdução ao HTML e CSS (20)

HTML introdução
HTML  introduçãoHTML  introdução
HTML introdução
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
HTML- conceitos. pptx
HTML- conceitos.                    pptxHTML- conceitos.                    pptx
HTML- conceitos. pptx
 
Programacao para Web I 03 HTML
Programacao para Web I 03 HTMLProgramacao para Web I 03 HTML
Programacao para Web I 03 HTML
 
00 a linguagem html
00 a linguagem html00 a linguagem html
00 a linguagem html
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 
Html5 em 15 minutos
Html5 em 15 minutosHtml5 em 15 minutos
Html5 em 15 minutos
 
04 01 estrutura de um documento
04 01 estrutura de um documento04 01 estrutura de um documento
04 01 estrutura de um documento
 
Curso HTML módulo 3 - Conceitos básicos CSS
Curso HTML módulo 3 - Conceitos básicos CSSCurso HTML módulo 3 - Conceitos básicos CSS
Curso HTML módulo 3 - Conceitos básicos CSS
 
Html completo
Html completoHtml completo
Html completo
 
Html aula 1
Html aula 1Html aula 1
Html aula 1
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
 
Apostila html1
Apostila html1Apostila html1
Apostila html1
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 
O que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seoO que todos os developers devem saber sobre seo
O que todos os developers devem saber sobre seo
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
 

Mais de Sérgio Souza Costa

Expressões aritméticas, relacionais e lógicas
Expressões aritméticas, relacionais e lógicasExpressões aritméticas, relacionais e lógicas
Expressões aritméticas, relacionais e lógicas
Sérgio Souza Costa
 
De algoritmos à programas de computador
De algoritmos à programas de computadorDe algoritmos à programas de computador
De algoritmos à programas de computador
Sérgio Souza Costa
 
Introdução ao pensamento computacional e aos algoritmos
Introdução ao pensamento computacional e aos algoritmosIntrodução ao pensamento computacional e aos algoritmos
Introdução ao pensamento computacional e aos algoritmos
Sérgio Souza Costa
 
Minicurso de introdução a banco de dados geográficos
Minicurso de introdução a banco de dados geográficosMinicurso de introdução a banco de dados geográficos
Minicurso de introdução a banco de dados geográficos
Sérgio Souza Costa
 
Modelagem de dados geográficos
Modelagem de dados geográficosModelagem de dados geográficos
Modelagem de dados geográficos
Sérgio Souza Costa
 
Banco de dados geográfico - Aula de Encerramento
Banco de dados geográfico - Aula de EncerramentoBanco de dados geográfico - Aula de Encerramento
Banco de dados geográfico - Aula de Encerramento
Sérgio Souza Costa
 
Banco de dados geográficos – Arquiteturas, banco de dados e modelagem
Banco de dados geográficos – Arquiteturas, banco de dados e modelagemBanco de dados geográficos – Arquiteturas, banco de dados e modelagem
Banco de dados geográficos – Arquiteturas, banco de dados e modelagem
Sérgio Souza Costa
 
Banco de dados geográficos - Aula de abertura
Banco de dados geográficos - Aula de aberturaBanco de dados geográficos - Aula de abertura
Banco de dados geográficos - Aula de abertura
Sérgio Souza Costa
 
Linguagem SQL e Extensões Espacias - Introdução
Linguagem SQL e Extensões Espacias - IntroduçãoLinguagem SQL e Extensões Espacias - Introdução
Linguagem SQL e Extensões Espacias - Introdução
Sérgio Souza Costa
 
Gödel’s incompleteness theorems
Gödel’s incompleteness theoremsGödel’s incompleteness theorems
Gödel’s incompleteness theorems
Sérgio Souza Costa
 
Turing e o problema da decisão
Turing e o problema da decisãoTuring e o problema da decisão
Turing e o problema da decisão
Sérgio Souza Costa
 
DBCells - an open and global multi-scale linked cells
DBCells - an open and global multi-scale linked cellsDBCells - an open and global multi-scale linked cells
DBCells - an open and global multi-scale linked cells
Sérgio Souza Costa
 
Conceitos básicos de orientação a objetos
Conceitos básicos de orientação a objetosConceitos básicos de orientação a objetos
Conceitos básicos de orientação a objetos
Sérgio Souza Costa
 
Polymorphism (Ad-hoc and Universal)
Polymorphism (Ad-hoc and Universal)Polymorphism (Ad-hoc and Universal)
Polymorphism (Ad-hoc and Universal)
Sérgio Souza Costa
 
Herança e Encapsulamento
Herança e EncapsulamentoHerança e Encapsulamento
Herança e Encapsulamento
Sérgio Souza Costa
 
Relações (composição e agregação)
Relações (composição e agregação)Relações (composição e agregação)
Relações (composição e agregação)
Sérgio Souza Costa
 
Abstract classes and interfaces
Abstract classes and interfacesAbstract classes and interfaces
Abstract classes and interfaces
Sérgio Souza Costa
 
Introdução ao Prolog
Introdução ao PrologIntrodução ao Prolog
Introdução ao Prolog
Sérgio Souza Costa
 
Heap - Python
Heap - PythonHeap - Python
Heap - Python
Sérgio Souza Costa
 
Paradigma lógico
Paradigma lógicoParadigma lógico
Paradigma lógico
Sérgio Souza Costa
 

Mais de Sérgio Souza Costa (20)

Expressões aritméticas, relacionais e lógicas
Expressões aritméticas, relacionais e lógicasExpressões aritméticas, relacionais e lógicas
Expressões aritméticas, relacionais e lógicas
 
De algoritmos à programas de computador
De algoritmos à programas de computadorDe algoritmos à programas de computador
De algoritmos à programas de computador
 
Introdução ao pensamento computacional e aos algoritmos
Introdução ao pensamento computacional e aos algoritmosIntrodução ao pensamento computacional e aos algoritmos
Introdução ao pensamento computacional e aos algoritmos
 
Minicurso de introdução a banco de dados geográficos
Minicurso de introdução a banco de dados geográficosMinicurso de introdução a banco de dados geográficos
Minicurso de introdução a banco de dados geográficos
 
Modelagem de dados geográficos
Modelagem de dados geográficosModelagem de dados geográficos
Modelagem de dados geográficos
 
Banco de dados geográfico - Aula de Encerramento
Banco de dados geográfico - Aula de EncerramentoBanco de dados geográfico - Aula de Encerramento
Banco de dados geográfico - Aula de Encerramento
 
Banco de dados geográficos – Arquiteturas, banco de dados e modelagem
Banco de dados geográficos – Arquiteturas, banco de dados e modelagemBanco de dados geográficos – Arquiteturas, banco de dados e modelagem
Banco de dados geográficos – Arquiteturas, banco de dados e modelagem
 
Banco de dados geográficos - Aula de abertura
Banco de dados geográficos - Aula de aberturaBanco de dados geográficos - Aula de abertura
Banco de dados geográficos - Aula de abertura
 
Linguagem SQL e Extensões Espacias - Introdução
Linguagem SQL e Extensões Espacias - IntroduçãoLinguagem SQL e Extensões Espacias - Introdução
Linguagem SQL e Extensões Espacias - Introdução
 
Gödel’s incompleteness theorems
Gödel’s incompleteness theoremsGödel’s incompleteness theorems
Gödel’s incompleteness theorems
 
Turing e o problema da decisão
Turing e o problema da decisãoTuring e o problema da decisão
Turing e o problema da decisão
 
DBCells - an open and global multi-scale linked cells
DBCells - an open and global multi-scale linked cellsDBCells - an open and global multi-scale linked cells
DBCells - an open and global multi-scale linked cells
 
Conceitos básicos de orientação a objetos
Conceitos básicos de orientação a objetosConceitos básicos de orientação a objetos
Conceitos básicos de orientação a objetos
 
Polymorphism (Ad-hoc and Universal)
Polymorphism (Ad-hoc and Universal)Polymorphism (Ad-hoc and Universal)
Polymorphism (Ad-hoc and Universal)
 
Herança e Encapsulamento
Herança e EncapsulamentoHerança e Encapsulamento
Herança e Encapsulamento
 
Relações (composição e agregação)
Relações (composição e agregação)Relações (composição e agregação)
Relações (composição e agregação)
 
Abstract classes and interfaces
Abstract classes and interfacesAbstract classes and interfaces
Abstract classes and interfaces
 
Introdução ao Prolog
Introdução ao PrologIntrodução ao Prolog
Introdução ao Prolog
 
Heap - Python
Heap - PythonHeap - Python
Heap - Python
 
Paradigma lógico
Paradigma lógicoParadigma lógico
Paradigma lógico
 

Introdução ao HTML e CSS

  • 1. Introdução ao HTML e CSS Prof. Sérgio Souza Costa Obs: Alguns slides foram elaborados pela professora Vanesssa
  • 2. O que o servidor faz ....
  • 3. O que o cliente (navegador web) faz ....
  • 4. O HTML, nada mais que texto
  • 9. HTML 4.01 - Template <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http: //www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body> <p>Ola mundo</p> </body> </html>
  • 10. HTML 5 - Template <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>
  • 11. XHTML - Template <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html lang=”EN” dir=”ltr” xmlns=”http://www.w3. org/1999/xhtml”> <head> <meta http-equiv=”content-type” content=”text/xml; charset=utf-8” /> <title></title> </head> <body> </body> </html>
  • 12. HTML vs XHTML HTML: dont worry !! escreva algo que o navegador fará o seu melhor para renderizar. XHTML: se não é para fazer direito, melhor nem começar. Como vais querer que o JavaScript, CSS, AJAX funcione ? ● rigidez do XML
  • 13. HTML ● HyperText Markup Language (HTML) ou Linguagem de Marcação de Hipertexto é a linguagem usada pelos navegadores para mostrar as páginas web ao usuário. ● Ela permite combinar textos, imagens e áudios, além introduzir referências a outras páginas por meio dos links hipertextos.
  • 14. Tags, elementos e atributos ● A sintaxe da HTML baseia-se em um elemento chamado tag (etiqueta). ● Tags são rótulos usados para informar ao navegador como o conteúdo deve ser apresentado.
  • 15. Tags, elementos e atributos ● A tag tem a seguinte forma geral: <tag> ..... </tag> ● Tudo que estiver contido entre uma tag de abertura <> e uma tag de fechamento </> será processado segundo o comando contido na tag. ● Algumas tags, chamadas tags de comandos isolados, não necessitam de um conteúdo para serem processados. <BR> ● Tag para pular linha
  • 16. E quanto aos atributos ?
  • 17. E quanto aos atributos ? Atributos modificam as tags, dizendo algo sobre os elementos < html > < head > < title > Popular Websites: Google < /title > < /head > < body > < h1 > About Google < /h1 > < p > Google is best known for its search engine, although Google now offers a number of other services. < /p > < p > Google’s mission is to organize the world’s information and make it universally accessible and useful. < /p > < p > Its founders Larry Page and Sergey Brin started Google at Stanford University. < /p > < p > < a href=”http://www.Google.com/” > Click here to visit Google’s Web site. < /a > < /p > < /body > < /html >
  • 18. Tags, elementos e atributos Com a evolução da web, novos padrões, crescimento na complexidade dos grandes sistemas ... Algumas tags perderam o uso para outros padrões. Então temos : ● Bad tags, conheça para não usar :) ● Good tags
  • 19. Bad Tags Tag Explanation b Presentational. Use strong instead. basefont Deprecated. big Presentational. Use CSS instead. center Deprecated. dir Deprecated. font Deprecated. hr Presentational. Use CSS instead. i Presentational. Use em instead. u Deprecated.
  • 20. Bad Tags Tag Explanation isindex Deprecated. menu Deprecated. s Deprecated. small Presentational. Use CSS instead. strike Deprecated. Use del instead. tt Presentational. Use CSS instead.
  • 21. Good tags: tags que tem semântica relacionada <p> , <body>, <strong>, <em>, <a>, <ul>, <li> ...
  • 22. O que pode ter no HTML ?
  • 23. O que pode ter no HTML ? Elementos estruturantes
  • 25. HTML – Seção HEAD ● O elemento HEAD (Cabeçalho) define uma seção que contém informações sobre o documento HTML. ● A seção pode incluir scripts, instruções para o browser encontrar os estilos, metadados, entre outros. ● As tags que podem estar na seção HEAD são: ● <title> ● <base> ● <link> ● <meta> ● <script> ● <style>
  • 26. HTML – Seção HEAD Elemento TITLE ● Define o título do documento ● O elemento título é obrigatório em todos os documentos HTML/XHTML. ● Esse título é referenciado em buscas pela rede, dando uma identidade ao documento. ● Ao adicionar uma página aos seus Favoritos (Bookmarks), o título da página se torna a âncora de atalho para ela.
  • 27. HTML – Seção HEAD Elemento TITLE <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Home Page do Sérgio Costa</title> </head> <body> </body> </html>
  • 28. HTML – Seção HEAD Elemento BASE ● Define uma url padrão para os links do documento. ● <base href =http://meusite.com.br /> ● Define um target padrão para os links do documento. ● <base target =“_blank” />
  • 29. HTML – Seção HEAD Elemento LINK ● Define ligações do documento HTML com outros arquivos como CSS, scripts, etc. ● Tem como atributos as tags rel, type e href ● Onde rel define o tipo de relacionamento ● Type fornece informações aos navegadores sobre o conteúdo do elemento que o contém (dado, estilo, script...) ● HREF informa a URL que o link aponta ● A tag <link> é mais usada para ligar o documento HTML com o style sheets: <link rel = “stylesheet” type = “text/css” href=“estilo.css”/>
  • 30. HTML – Seção HEAD Elemento META ● O propósito do elemento meta é prover meta-informação sobre o documento. ● Metadados – dados sobre dados ● Usado tipicamente para especificar descrição da página, palavras-chave, autor do documento, última modificação e outros metadados. ● Muito frequentemente esse elemento é usado para prover informação que é relevante para os navegadores ou para as ferramentas de busca como a descrição do conteúdo do seu documento. <meta name = “ ” content = “ ” />
  • 31. HTML – Seção HEAD Elemento META <!DOCTYPE html> <html> <head> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="Hege Refsnes"> <meta charset="UTF-8"> </head> <body> <p>All meta information goes in the head section...</p> </body> </html>
  • 32. HTML – Seção HEAD Elemento META ● Um dos elementos do meta é o HTTP-EQUIV. ● Uma das funcionalidades é dizer ao navegador o tipo de dado que ele encontrará no documento.
  • 33. HTML – Seção HEAD Elemento META ● Um exemplo de uso comum do atributo HTTP-EQUIV é promover a mudança automática de páginas, atribuindolhe o valor Refresh. view-source:http://www.dpi.inpe.br/~scosta/ <meta http-equiv="refresh" content="3; URL=http://sites.google.com/site/skosta/">
  • 34. HTML – Seção HEAD Elemento SCRIPT Usado para definir um script do lado do cliente, como um código do javascript. Torna as páginas mais dinâmicas e iterativas. Utiliza o atributo type para especificar a linguagem utilizada. <script type = “text/javascript> // código javascript </script>
  • 35. HTML – Seção HEAD Elemento SCRIPT <!DOCTYPE html> <html> <body> <p>Click the button to display an alert box. </p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { alert("I am an alert box!"); } </script> </body> </html>
  • 36. HTML – Seção HEAD Elemento STYLE (CSS) Incorpora ao documento HTML, a folha de estilos <style type = “text/css> grupo{nome_atributo: valor;} grupo{nome_atributo: valor;} grupo{nome_atributo: valor;} </style> CSS será visto mais a frente
  • 37. HTML – Seção BODY ● Tudo que estiver contido em <BODY> será apresentado ao leitor na janela principal do browser. ● <BODY> pode conter títulos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos. <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
  • 38. O que pode ter no HTML ? Elementos estruturantes
  • 39. O que pode ter no HTML ? Elementos estruturantes Elementos chaves
  • 41. HTML – Seção BODY Parágrafos e Títulos Prudência com as tags de títulos.
  • 42. HTML – Seção BODY Tags de Formatação <i> x <em> <b> x <strong> <del> x <strike>
  • 43. HTML – Seção BODY Tags de Formatação NÃO usem tags de formatação, apenas "strong" e "em", que tem uma semântica associada. <i> x <em> <b> x <strong> <del> x <strike>
  • 44. O que pode ter no HTML ? Elementos estruturantes Elementos chaves
  • 45. O que pode ter no HTML ? Elementos estruturantes Elementos chaves Listas e dados
  • 47. HTML – Seção BODY Listas ● Em HTML, as listas podem ser itens numerados ou não. ● As listas não numeradas usam a tag <ul> de Unordered Lists para marcar o começo e fim da lista e a tag <li> para cada item da lista. ● Os itens da lista são marcados com bullets <ul> <li> ... </li> <li> ... </li> </ul>
  • 48. HTML – Seção BODY Listas ● Em HTML, as listas podem ser itens numerados ou não. ● As listas numeradas usam a tag <ol> de Ordered Lists para marcar o começo e fim da lista e a tag <li> para cada item da lista. ● Os itens da lista são marcados com números <ol> <li> ... </li> <li> ... </li> </ol>
  • 49. HTML – Seção BODY Listas ● As listas podem ser compostas <ul> <li> ... </li> <ul> <li> ... </li> <li> ... </li> </ul> </ul> ● Nivel 1 ● Nivel 2 ● Nível 2 ● Nível 1
  • 50. HTML – Seção BODY Listas ● As listas podem usar o atributo type. ● Nas listas não ordenadas, o <type> altera o bullet usado e pode ter os valores CIRCLE, SQUARE e DISC (default) <ul type = square> <li> ... </li> <ul type = circle> <li> ... </li> <li> ... </li> </ul> </ul> Com CSS podemos criar outros estilos para as listas.
  • 51. HTML – Seção BODY Tabelas ● Tabelas são definidas pela tag <table>. ● Uma tabela tem linhas (rows) e colunas. ● Em HTML, define-se uma linha com a tag <tr>, de table row. ● A linha é dividia em colunas, onde os dados são inseridos através da tag <td>, de table data. ● Dentro de um table data, pode-se inserir texto, figura, links, listas, formulários, outras tabelas, etc.
  • 52. HTML – Seção BODY Tabelas <table border="1"> <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>
  • 53. HTML – Seção BODY Tabelas ● Linhas de cabeçalho podem ser definidas utilizando a tag <th>, de table header, o que definirá o texto como negrito e centralizado <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>
  • 54. HTML – Seção BODY Tabelas ● Para inserir uma legenda à tabela, usa-se a tag <caption> <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table>
  • 55. O que pode ter no HTML ? Elementos estruturantes Elementos chaves Listas e dados Links e imagens
  • 56. HTML – Seção BODY Hiperlink (Anchor) ● Em HTML, um link é criado utilizando a tag <a>, de duas maneiras: ● Para criar um link para outro documento ● Atributo HREF ● Para criar um link para o próprio documento (âncora ou bookmark), criando um apelido para determinada parte do documento. ● Atributo NAME ● O endereço indicado pelo link pode ser carregado na mesma janela em que o usuário se encontra, ou em outra janela. ● Essa característica é determinada pelo atributo TARGET ● _self ● _blank <a href="http://www.w3schools.com">Visit W3Schools.com!</a>
  • 57. HTML – Seção BODY Imagens ● Para inserir imagens em um documento HTML, utiliza-se a tag <img>. ● Os seguintes atributos devem ser configurados: ● src ● Endereço da imagem (source) ● alt ● Texto mostrado no lugar da imagem, caso a mesma, por algum motivo não puder ser carregada ● width ● Largura da imagem ● heigh ● Altura da imagem
  • 58. HTML – Seção BODY Imagens <!DOCTYPE html> <html> <body> <img src="smiley.gif" alt="Smiley face" width="42" height="42"> </body> </html>
  • 59. O que pode ter no HTML ? Elementos estruturantes Elementos chaves Listas e dados Formulários Links e imagens
  • 60. HTML – Seção BODY Formulários ● Formulários são usados para enviar dados para um servidor web. ● Os elementos de um formulário permitem o usuário entrar com informações, como campos de texto, campos de área de texto, menus drop-down, botões radiais, caixas de seleção, etc.
  • 61. HTML – Seção BODY Formulários ● A tag <form> define uma área de formulário. <form> ... elementos de entrada ... </form>
  • 62. HTML – Seção BODY Formulários ● A tag <input> define um elemento de entrada. ● É a tag mais utilizada em formulários. ● Um elemento de entrada pode ser um campo de texto, um checkbox, um campo de senha, um botão de radio, um botão de envio (submit), entre outros. ● Definido pelo atributo type
  • 63. HTML – Seção BODY Formulários ● Campo de texto ● <input type = “text” name = “nome” /> <!DOCTYPE html> <html> <body> <form action="demo_form.asp"> First name: <input type="text" name="FirstName" value="Mickey" ><br> Last name: <input type="text" name="LastName" value="Mouse" ><br> <input type="submit" value="Submit"> </form> <p>Click the "Submit" button and the form-data will be sent to a page on the server called "demo_form.asp".</p> </body> </html>
  • 64. HTML – Seção BODY Formulários - Tipos Text Radio Checked Submit
  • 66. O que podemos fazer com CSS ?
  • 67. Texto
  • 68. Texto
  • 71. Como usamos o CSS nas nossas paginas Web ?
  • 73. Inline CSS (bad) <body> <h1 style = "color:red ;"> Ola Mundo </h1> </body>
  • 74. Inline CSS (bad) <body> <p style = "color:red ;"> Ola Mundo </p> </body> Mistura apresentação com estrutura
  • 75. Inline CSS (bad) <body> <p style = "color:red ;"> Ola Mundo </p> </body> É aceito no HTML Mistura 4.01 strict e no apresentação XHTML com estrutura
  • 76. Embedded CSS (OK) <head> <style type="test/css"> p {color:red;} </style> </head>
  • 77. Embedded CSS (OK) <head> <style type="test/css"> p {color:red;} </style> </head> Rápido e fácil. Use em pequenas aplicações.
  • 78. External CSS: link tag (GOOD) <head> <link rel="stylesheet" href="meuestilo.css"> <head>
  • 83. 1. Primeiro selecionamos o elemento p{}
  • 84. 2. Então dizemos o que queremos mudar p { color: }
  • 85. 3. Então dizemos qual o valor para essa mudança p { color: blue;}
  • 86. Chaves Ponto e virgula h1 { color: red; font-size: 12px; } Dois pontos
  • 89. Seleção Tipos de seleção a. element b. class c. id d. posição no documento
  • 90. 1. Element p{} Seleciona todos elemento <p>, em todo o documento HTML
  • 91. 2. Class .menu { } Seleciona todos os elementos da classe "menu" . significa "esse é um nome de uma classe"
  • 92. 3. id #rodape { } Seleciona o elemento com id "rodape" # significa "esse é um nome de um id"
  • 93. 4. posição no documento <div id ="rodape"> <p> aqui é aplicada </p> <span>aqui nao se aplica</span> </div> <p>aqui nao se aplica</p> #rodape p { color:red; } Seleciona todos elementos "p" descendentes de rodape. aqui é aplicada aqui nao se aplica aqui nao se aplica
  • 94. 4. posição no documento <div id ="rodape"> <p class ="primeiro p" > aqui é aplicada </p> <p class ="segundo p"> aqui nao se aplica </p> </div> <p>aqui nao se aplica</p> p.primeiro { color:red; } Seleciona todos elementos "p" descendentes de rodape. aqui é aplicada aqui nao se aplica aqui nao se aplica
  • 95. 4. posição no documento #header div.content form p em.required {} O que estamos selecionando pelo seletor acima ?
  • 96. Pseudo classes a:link {} a:visited {} a:hover {} a:active {} /* link não visitado */ /* link visitado */ /* mouseover */ /* link selecionado */
  • 98. Declaração (o que está dentro das chaves) selector { property: value; }
  • 99. Declaração É a combinação de propriedade e valor. Nos declaramos o que queremos mudar
  • 100. CSS define diversas coisas que podemos declarar. Exemplo font color background-color border (essas são as propriedades)
  • 101. Cada propriedade possui um conjunto de valores que pode de ser aplicado. font: 12px normal Verdana, sans-serif; color: #123; background-color: red; border: 1px solid rgb(193,193,193);
  • 102. Propriedades tem diferentes granularidades Por exemplo a propriedade "border" ...
  • 103. Propriedades tem diferentes granularidades Por exemplo a propriedade "border" ... border border-color border-bottom border-width border-left border-top border-right ....
  • 104. Propriedades tem diferentes granularidades Por exemplo a propriedade "border" ... border font border-color border-bottom border-width border-left border-top border-right .... font-family font-size font-style font-weight
  • 105. Existe uma alternativa mais simples shorthand
  • 106. Existe uma alternativa mais simples shorthand border: 1px solid #000 É equivalente a: border-width: 1px border-style: solid border-color: #000
  • 107. Podemos mudar especificas partes no estilo de um elemento p { border: 1px solid red; } p.intro {border-color:blue;} O que estamos fazendo aqui ?
  • 109. Unidades absolutas Pixels (px) are unidades absolutas. Elas são sempre do mesmo “tamanho”. Independentemente do dispositivo
  • 110. Unidades relativas em é sempre relativa ao valor corrente do tamanho da fonte. width: 2em; font-size: 2em; % é relativo a diferentes coisas em diferentes contextos width: 50% ; 50% da largura disponível font-size: 50% ; 50% do tamanho corrente da fonte
  • 111. Unidades relativas em é sempre relativa tamanho da fonte. width: 2em; font-size: 2em; HTML5 ao valor em usaremos corrente para fonts e não mais px. % é relativo a diferentes coisas em diferentes contextos width: 50% ; 50% da largura disponível font-size: 50% ; 50% do tamanho corrente da fonte do
  • 113. Como é calculado ? body {font-size:12 px;} h1 {font-size: 200 % ;} h1 a {font-size: 75%;}
  • 114. Como é calculado ? body {font-size:12 px;} h1 {font-size: 200% ;} O texto de h1 é 24 pixels (12*2) h1 a {font-size: 75%;} Um link dentro de um h1 é 18 pixel (12*2*.75)
  • 115. Como é calculado ? body {font-size:100%;} h1 {font-size: .75em;}
  • 116. Como é calculado ? body {font-size:100%;} h1 {font-size: .75em;} Considerando o tamanho de 16 pixels para o browser, temos 0.75 * 16 = 12
  • 118. Cascata Como e quais declaração serão aplicadas aos elementos; Regras para aplicação das declarações
  • 119. Cascata Como e quais declaração serão aplicadas aos elementos; Regras para aplicação das declarações Especificidade Herança
  • 120. Usualmente, as declarações são aplicadas na ordem de definição p {color: red;} p {color: blue;} A ultima declaração é a valida para todos elementos “p”.
  • 121. Usualmente, as declarações são aplicadas na ordem de definição ESPECIFICIDADE. p {color: red;} p {color: blue;} A ultima declaração é a valida para todos elementos “p”.
  • 122. Usualmente, as declarações são aplicadas na ordem de definição p {color: red;} p {color: blue;} A ultima declaração é elementos “p”. ESPECIFICIDADE. A última a valida para declaração mais específica. todos
  • 123. <div id =“a”> <div id =“b”> <h1> </h1> </div> </div> #a #b h1 {color:red;} #a h1 {color: blue;} Qual seletor é mais específico ? Qual será a cor de h1 dentro de #b ?
  • 124. Regras para determinar a especificade Elemento é 1 ponto ●Uma classe é 10 pontos ●Um id é 100 pontos ●
  • 125. Regras para determinar a especificade Elemento é 1 ponto ●Uma classe é 10 pontos ●Um id é 100 pontos ●
  • 126. Regras para determinar a especificade ○ ○ ○ Elemento é 1 ponto Uma classe é 10 pontos Um id é 100 pontos p a {} = 2 pontos p.intro a {} = 12 pontos #about p.intro a {} = 112 pontos
  • 127. Herança Elemento podem herdar estilos dos elementos ascendentes
  • 128. #blog {color: red;} <div id=“blog”> <p>Ola</p> </div> O elemento “p” por ser descendente de #blog, terá cor vermelha.
  • 129. #blog {color: red;} <div id=“blog”> <p>Ola</p> </div> O elemento “p” por ser descendente de Atenção, nem #blog, terá cor vermelha. todos os estilos são “herdáveis”.
  • 130. Usualmente ... Propriedades relativas a texto são herdadas Propriedades relativas a layout não são herdáveis
  • 131. .
  • 132. Layout 1.Modelo caixa 2.Fluxo (“propriedade display”) 3.Posição 4.Flutuação
  • 135. Declarando margin ou padding margin: 1em; Todas as margens = 1em margin: 1em 2em; Superior e inferior = 1em e direita e esquerda = 2em margin: 1em 2em 3em 4em ; Superior = 1em, direita = 2em, inferior = 3em e esquerda = 4em
  • 136. Declarando margin ou padding margin: 1em; Todas as margens = 1em margin: 1em 2em; Superior e inferior = 1em e direita e esquerda = 2em Movimento do relógio margin: 1em 2em 3em 4em ; Superior = 1em, direita = 2em, inferior = 3em e esquerda = 4em
  • 137. Fluxo (“propriedade display”) Em linha (inline) Mostra na mesma linha Ex: <span>, <a>, <input>, <img> .. Nível de bloco (block) Mostra em uma linha posterior Ex: <h1>,<p>, <ul>, <div>
  • 138. Exemplo <p> Click <a href=""> aqui </a> </p> a { display: block; } Click aqui