Sei sulla pagina 1di 61

HTML Bsico

Apresentao
Wandelei Silva do carmo
Analista e Desenvolvedor de Sistemas
Linguagens: PHP, JAVA, C++, C# e Python

wander.silva@gmail.com
Youtube.com/w3ae
@w3ae
+wanderlei silva do carmo
https://github.com/w3aewander

Objetivo
Apresentar um tutorial com os conceitos bsicos da linguagem de marcao
HTML para iniciantes.
Se voc j expert no assunto, este tutorial no pra voc!

Definio

Estrutura Bsica

Requisitos para criar pginas HTML


Requisitos para criar pginas HTML
Um editor de texto. Pode ser at mesmo o bloco de notas, no Windows ou o VI, gedit,
kate, geanie, Dreamweaver, Quanta, Bluefish,..., Uma infinidade!
Mas, para uma melhor experincia e aproveitar recursos de deteco de sintaxe da
linguagem com colorizao de palavras-chave e outros comandos, e tambm ajuda
durante a digitao do cdigo, sugiro o uso de um editor mais poderoso.
Gosto muito de usar o Sublime Text, que multiplataforma e para quem usa o Windows,
tem tambm o Notepad++, que tambm um editor muito leve e so gratuito. No caso, o
Sublime Text de vez enquanto ele pede para que voc compre, mas no bloqueia o uso.
Segue os links para o download de sua preferncia...
http://www.sublimetext.com/3
http://notepad-plus-plus.org/
Quando estiver mais prtico pode usar uma IDE ( Integrated Development Environment
Ambiente Integrado de Desenvolvimento ).
O outro requisito, muito bvio, claro, um navegador:
Chrome, Mozilla, Safari, ou o Internet Explorer (IE10 ou superior).

<DIV> e <SPAN>
Serve para organizar o contedo de uma determinada pgina em blocos.
Por padro um DIV ocupa um espao horizontal em uma pgina enquanto que
SPAN ocupa apenas a largura necessria para exibir o contedo.
<h1>Saudao</h2>
<div >
Minha saudao : <span>Seja bem vindo</span>
</div>

Alterando a aparncia de uma pgina com CSS


A aparncia de uma pgina pode ser alterada para torn-la mais elegante e com
uma apresentao mais atraente .
Um estilo CSS (folha de estilo em cascata) pode ser inserido entre as TAGs
<style></style>, Pode ser interno ou embutido, externo ou inline.
Ou seja, pode ser um arquivo externo que pode ser chamado com a TAG
<LINK REL=stylesheet TYPE=text/css HREF=CSS/estilo.css >
<STYLE>
H1 {
Color: #FA3;
Background: #CCC;
}
</STYLE>
Ou ainda:
<h1 style=color: #FA3; background: #CCC>Exemplo</h1>

Adicionando dinamismo com Javascript


Da mesma forma que o CSS cuida da aparncia, o JAVASCRIPT cuida do
dinamismo da pgina. Ele d vida e permite que programemos comportamentos em
uma pgina HTML.
Os script Javascript podem ser chamados a partir da TAG <SCRIPT></SCRIPT>
uma arquivo externo.
<SCRIPT>
alert(Ol mundo!);
</SCRIPT>
Ou
<SCRIPT SRC=js/arquivo.js></SCRIPT>

Explicando cada parte


<!DOCTYPE html>

A primeira linha uma diretiva, informando para o navegador que a pgina est
escrita na verso 5 do html...
Antes voc deveria usar mais informaes aqui.. mas no nosso caso, vamos
comear aprendendo com HTML5.

Explicando cada parte


<html lang=pt-br>
...
<meta charset=utf-8>
Estas diretivas define o idioma utilizado na pgina.
Desta forma, todos os caracteres acentuados sero exibidos corretamente:
Antes, se quisssemos escrever um texto com caracteres acentuados e garantir
que fosse escrito da forma pretendida teramos que fazer algo como:
- &acirc;
- &Acirc;
- &aaccute;
- &atilde;
..
E assim por diante..

Explicando cada parte


<meta ...>
Esta diretiva nos permite adicionar informaes relevantes pagina em questo:
Ela fica entre as TAG's <head> .... </head>
Exemplo:
<meta charset=utf-8>
<meta name=author content=Wanderlei Silva do Carmo'>
<meta name="copyright" content=" 2004 tex texin" />
<meta name="description" content="...resumo da pgina..." />
<meta name="keywords" content="..palavras-chave do documento" />

Explicando cada parte


<head.> </head>
Aqui podemos importar recursos de outros documentos HTML ou adicionar
funcionalidades em javascript, uma linguagem de programao muito legal que d
dinamismo ao nosso aplicativo html e tambm podemos incluir aquivos CSS que
curidaro da aparencia da pgina.
Falaremos melhor sobre isso mais tarde...
Exemplo:
<link rel=stylesheet type=text/css href=/css/style.css>
<style>
</style>
<script type=javascript src=js/app.js>
Contedo script..
</script>

Inserindo contedo
Vamos colocar algum contedo na pgina:
O contedo de uma pgina HTML inserido entre as TAG's
<BODY> </BODY>
Exemplo:
<body>
Ol, mundo!
</body>
A TAG </HTML> informa o fim da pgina HTML.
Salvo casos especiais, toda TAG deve ser finalizada com seu nome inicido por
uma / - <HEAD></HEAD>, <BODY></BODY>, <HTML></HTML>

TAG's HTML
Principais tag's HTML:
H1, H2, H3, H4, H5, H6
Estas tags so utilizadas para acrescentar ttulos de contedos com tamanhos
que variam de acordo com a tag usada, onde a tag H! a maior delas.
P Adiciona pargrafo na pgina.
<p>
Este um pargrafo
</p>
BR Fora uma quebra de linha
Meu nome : <br /> Wanderlei... Mostrar:
Meu nome :
Wanderlei.

TAG's HTML
ncoras:
ncoras so usadas para navegao em partes da pgina ou fazer com que o
navegador abra um pgina externa. So os famosos links...
Link para uma seo dentro da mesma pgina. til apenas quando a pgina tem
um contedo extenso...
Para conseguir navegar na pgina, nomeie seus pargrafos com a tag <a
name=nome_ancora>Titulo da Ancora</a>.
<a name=ancora1>Ancora 1</a>
<p>
Contedo desta parte do site...
</p>
<a name=ancora2>Ancora2</a>
Depois que nomear as ncoras elas podem ser acessadas assim:
<a href=#ancora1>Ancora 1</a>
<a href=#ancora1>Ancora 2</a>

TAG's HTML
Link para outra pgina:
Exemplo:
Visite meu canal no youtube:
<a href=http://www.youtube.com/w3ae>Canal do Youtube!</a>
<H1>Site do W3C Brasil</H1>
<p >
<a href=http://www.W3c.org>Pgina do rgo que padroniza a WEB</a>
</p>
<H1>Bolo segura marido foto </H1>
<a href=imagens/bolo_segura_marido.jpg>Bolo segura marido</a>

LISTA NO ORDENADA
<UL>Minha lista no ordenada
<LI>Item 1</LI>
<LI>Item 2</LI>
<LI>Item 3</LI>
<LI>Item 4</LI>
<LI>Item 5</LI>
<LI>Item 6</LI>
</UL
Resultado:
Minha lista no ordenada
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

LISTA ORDENADA
<OL>Minha lista no ordenada
<LI>Item 1</LI>
<LI>Item 2</LI>
<LI>Item 3</LI>
<LI>Item 4</LI>
<LI>Item 5</LI>
<LI>Item 6</LI>
</OL
Resultado:
Minha lista no ordenada
1 - Item 1
2- Item 2
3 - Item 3
4 - Item 4
5 - Item 5
6 - Item 6

Lista de definio
<DL><DT><DD>

Sada da lista de definio

Marcao <PRE>

Marcao <PRE>

Caracteres especiais

Inserindo imagens

Atributos

Marcao <HR />


HR desenha uma linha no
documento.
Pode usar o atributo size e
width para definir a espessura
e comprimento da linha.
No caso do atributo width ela
apenas determina quantos por
cento da largura da pgina ela
deve ocupar.

Atributos

Atributos

Formulrios <FORM></FORM>
Formulrios so utilizados para envio de informaes pela em um navegador.
Para usar um formulrio HTML devemos dispor tambm de alguns controles visuais.

<LABEL>
<INPUT>
<BUTTON>
<TEXTAREA>
<INPUT TYPE=RADIO>
<INPUT TYPE=CHECKBOX>
<SELECT>

...
H dois mtodos para envio de informaes via formulrio:
GET e POST

Marcao <TEXTAREA>

Marcao <SELECT>

Marcao <SELECT> com SIZE

Marcao <SELECT> com SIZE

Marcao <SELECT> com SIZE

Marcao <INPUT CHECKBOX>

Marcao <INPUT RADIO>

Marcao <INPUT RADIO>

Marcao <INPUT SUBMIT>

Marcao <INPUT SUBMIT>

Referncias
https://developer.mozilla.org/pt-PT/docs/utilizando_meta_tags
http://www.w3c.br/Home/WebHome
http://pt.wikipedia.org/wiki/HTML

Potrebbero piacerti anche