Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML

No description
by

Jonatas Vieira

on 22 April 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML

HTML Básico
Objetivo
Um pouco da história do HTML;
Primeiros passos:
Estrutura básica do HTML;
TAGs básicas do HTML.
Tabelas e Tableless;
Prática: Desenvolvimento de um website básico.
H T M L
H..
yper
T..
ext
M.
arkup
L..
anguage
Primeiros passos...
<!DOCTYPE HTML>

<html>

<head>
<title>
Título da página
</title>
</head>

<body>
<h1>
Olá mundo!
</h1>
<p>
Meu primeiro parágrafo na web!
</p>
</body>

</html>
Hello world!
Jônatas Filipe Vieira
E-Mail:
jonatas.vieira@bomjesus.br
Website:
http://jnts.org
About me...
Formado em WebDesign pela Faculdade OPET;
Aproximadamente 3 anos e meio de experiência com
HTML, CSS, JavaScript e SEO;

2 anos e meio trabalhando em agência web;
10 meses trabalhando no setor
WEB
da AFESBJ (
Bom Jesus, FAE e USF
).
História
1980
- Criado por
Tim Berners-Lee
para uso pessoal;

1989
- Tim e seus colaboradores do CERN (Conselho Europeu de Pesquisas Nucleares) em Geneva na Suíça, publicaram e começaram a difundir a linguagem;

O fato da Internet ser inventada no início do ano de 1990 não foi uma coincidência, desenvolvedores da área de tecnologia e comunicação já diziam que a Web estava predestinada a surgir, logo, os hypertextos tomaram conta dos computadores.

W 3 C
Fundado por Tim Berners-Lee;

Objetivo:
Potencializar o uso do HTML;
Criar um padrão acessível para tudo e para todos.

WWW Organizada
A eterna guerra entre os navegadores gera mais trabalho para nós desenvolvedores e insatisfação aos usuários.
Tableless
<head>
<body>
Padrões WWW
http:/w3.org/
http://w3c.br/







http://schema.org/
<html>
<HEAD> ou
Cabeçalho
Área onde é feita a maior parte "pensante" do site. É onde definimos:

Caráter;
Nacionalidade;
Estilo;
Postura.
<BODY> ou Corpo
Aqui desenvolvemos a parte física do site, ou seja, a estrutura que será visível para os usuários.
Estrutura básica
Estrutura básica
<html> e </html>
Início e fim da documentação HTML.

<head> e </head>
Área reservada para o cabeçalho da página, onde são inseridas as tags e algorítmos que fazem o site funcionar. Simplesmente a parte pensante da página.

<title> e </title>
Titulo da página, esta tag deve ser obrigatoriamente inserida na tag
<head>
e é o titulo inserido nesta tag que irá aparecer nos resultados de busca e na barra de título da janela do seu navegador.

<meta>
Tag utilizada para definir as características e atributos da página. Esta tag é de uso exclusivo da tag
<head>
, somente lá esta tag irá funcionar.

<body> e </body>
Corpo do documento, onde será inserido o conteúdo, seja ele texto, imagem, som ou vídeo da página.




< Tags >
Tags pré-definidas para cabeçalhos
<h1>
Padrão de título 1
</h1>
<h2>
Padrão de título 2
</h2>
...
<h6>
Padrão de título 6
</h6>

<p> e </p>
É dentro desta tag que cada parágrafo é inserido e formatado.

<strong> Negrito </strong>
ou
<b> Negrito </b>
Deixa uma frase ou palavra com traços mais fortes, destacando o conteúdo.

<em>
Sublinhado
</em>
ou
<u>
Sublinhado
</u>
Insere um traço que sublinha a frase ou palavra contidos na tag.

<i>
itálico
</i>
Inclina a frase ou palavra contidos na tag.

<br />
Quebra de linha.
BR
EAK!




< Tags >
Título da página!
Nulla nunc turpis, porta eget nunc vitae, malesuada cursus nisl. Mauris sollicitudin magna vel mauris porttitor, a venenatis nunc tempus. Nullam non varius tortor. Maecenas tempor sagittis lacus. Duis hendrerit nisi ac justo mattis elementum. Quisque eget justo elementum, eleifend turpis vehicula, lacinia massa. Nullam eu dui elementum, euismod nisl ut, malesuada dolor.
Nulla nunc turpis, porta eget nunc vitae, malesuada cursus nisl. Mauris sollicitudin magna vel mauris porttitor, a venenatis nunc tempus. Nullam non varius tortor. Maecenas tempor sagittis lacus. Duis hendrerit nisi ac justo mattis elementum. Quisque eget justo elementum, eleifend turpis vehicula, lacinia massa. Nullam eu dui elementum, euismod nisl ut, malesuada dolor.
<h1>
</h1>
<p>
</p>
<p>
</p>
<body>
</body>
<html>
</html>
<head>
</head>
Título da página
http://www.meusite.com.br
<title>
</title>
Listas Ordenadas
<ol>
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
</ol>
< Tags >
TABLES
<table> e </table>
* abertura e fechamento de uma tabela
<th> e </th>
* abertura e fechamento de uma linha de cabeçalho
<tr> e </tr>
* abertura e fechamento de uma linha padrão
<td> e </td>
* abertura e fechamento de uma célula
< Tags >
Listas "Desordenadas"
<ul>
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>



Tag para Imagem
<img src="
http://
" alt="
Descrição da imagem
" />
Dois carros de fórmula 1 da Redbull
Link
<a href="
http://www.google.com.br
" title="
Buscar no Google!
">
Google
</a>
Ficaria assim:
Item 1
Item 2
Item 3
Ficaria assim:
1) Item
2) Item
3) Item
Google
Buscar
no
Google!
Exemplo:

<table>
<th>
<td>
Número
</td>
<td>
Nome
</td>
</th>
<tr>
<td>
1
</td>
<td>
Hermanoteu
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Joseph Climber
</td>
</tr>
</table>
Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página sugerido pela W3C.
Let's practice!!!
1990
HTML
1994
HTML 2
1997
HTML 4
2000
xHTML 1
2002
Tableless
2009
HTML 5
Jônatas F. Vieira
http://jnts.org
jonatasvieira@gmail.com
ou Linguagem de Marcação de HyperTexto;
NÃO é uma linguagem de programação.
Conteúdos organizados através de etiquetas ou
<tags>
.
Quem lê essa linguagem?
Navegadores ou browsers:
Google Chrome
Mozilla Firefox
Internet Explorer
Safari
Eles são habilitados a transformar o HTML em um site visível aos usuários.
Evolução...
W
orld
W
ide
W
eb
C
onsortium
Full transcript