HTML Básico
Apresentação
wander.silva@gmail.com
Youtube.com/w3ae
@w3ae
+wanderlei silva do carmo
https://github.com/w3aewander
Wandelei Silva do carmo
Analista e Desenvolvedor de Sistemas
Linguagens: PHP, JAVA, C++, C# e Python
Objetivo
Apresentar um tutorial com os conceitos básicos da linguagem de marcação
HTML para iniciantes.
Se você já é expert no assunto, este tutorial não é pra você!
Definição
Estrutura Básica
Requisitos para criar páginas HTML
Requisitos para criar páginas HTML
Um editor de texto. Pode ser até bloco de notas do Windows.
Outros como o VI, gedit, kate, geanie, Quanta, Bluefish,..., (no mundo Linux), uma
infinidade!
Mas, para uma melhor experiência e aproveitar recursos de detecção de sintaxe da
linguagem com colorização de palavras-chave e outros comandos, e também ajuda
durante a digitação do código, sugiro o uso de um editor mais poderoso.
Gosto muito de usar o Sublime Text, que é multiplataforma e para quem usa o Windows,
tem também o Notepad++, que é editor muito leve e gratuito. No caso, o Sublime Text de
vez enquanto ele pede para que você compre, mas não bloqueia o uso.
Segue os links para o download de sua preferência...
http://www.sublimetext.com/3
http://notepad-plus-plus.org/
Quando estiver mais prático 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 conteúdo de uma determinada página em blocos.
Por padrão um DIV ocupa um espaço horizontal em uma página enquanto que
SPAN ocupa apenas a largura necessária para exibir o conteúdo.
<h1>Saudação</h2>
<div >
Minha saudação é: <span>Seja bem vindo</span>
</div>
Alterando a aparência de uma página com CSS
A aparência de uma página pode ser alterada para torná-la mais elegante e com
uma apresentação 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 aparência, o JAVASCRIPT cuida do
dinamismo da página. Ele dá vida e permite que programemos comportamentos em
uma página 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
A primeira linha é uma diretiva, informando para o navegador que a página está
escrita na versão 5 do html...
Antes você deveria usar mais informações aqui.. mas no nosso caso, vamos
começar aprendendo com HTML5.
<!DOCTYPE html>
Explicando cada parte
Estas diretivas define o idioma utilizado na página.
Desta forma, todos os caracteres acentuados serão exibidos corretamente:
Antes, se quiséssemos escrever um texto com caracteres acentuados e garantir
que fosse escrito da forma pretendida teríamos que fazer algo como:
â- &acirc;
Â- &Acirc;
á- &aaccute;
ã- &atilde;
..
E assim por diante..
<html lang=”pt-br”>
...
<meta charset=”utf-8”>
Explicando cada parte
Esta diretiva nos permite adicionar informações relevantes à pagina em questão:
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 página..." />
<meta name="keywords" content="..palavras-chave do documento" />
<meta ...>
Explicando cada parte
Aqui podemos importar recursos de outros documentos HTML ou adicionar
funcionalidades em javascript, uma linguagem de programação muito legal que dá
dinamismo ao nosso aplicativo html e também podemos incluir aquivos CSS que
curidarão da aparencia da página.
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”>
Conteúdo script..
</script>
<head.> … </head>
Inserindo conteúdo
Vamos colocar algum conteúdo na página:
O conteúdo de uma página HTML é inserido entre as TAG's
<BODY> </BODY>
Exemplo:
<body>
Olá, mundo!
</body>
A TAG </HTML> informa o fim da página 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 são utilizadas para acrescentar títulos de conteúdos com tamanhos
que variam de acordo com a tag usada, onde a tag H! é a maior delas.
P – Adiciona parágrafo na página.
<p>
Este é um parágrafo
</p>
BR – Força uma quebra de linha
Meu nome é: <br /> Wanderlei... Mostrará:
Meu nome é:
Wanderlei.
TAG's HTML
Âncoras:
Âncoras são usadas para navegação em partes da página ou fazer com que o
navegador abra um página externa. São os famosos links...
Link para uma seção dentro da mesma página. Útil apenas quando a página tem
um conteúdo extenso...
Para conseguir navegar na página, nomeie seus parágrafos com a tag <a
name=”nome_ancora”>Titulo da Ancora</a>.
<a name=”ancora1”>Ancora 1</a>
<p>
Conteúdo 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 página:
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”>Página do órgão que padroniza a WEB</a>
</p>
<H1>Bolo segura marido – foto </H1>
<a href=”imagens/bolo_segura_marido.jpg”>Bolo segura marido</a>
LISTA NÃO ORDENADA
<UL>Minha lista não 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 não ordenada
● Item 1
● Item 2
● Item 3
● Item 4
● Item 5
● Item 6
LISTA ORDENADA
<OL>Minha lista não 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 não ordenada
● 1 - Item 1
● 2- Item 2
● 3 - Item 3
● 4 - Item 4
● 5 - Item 5
● 6 - Item 6
Lista de definição
<DL><DT><DD>
Saída da lista de definição
Marcação <PRE>
Marcação <PRE>
Caracteres especiais
Inserindo imagens
Atributos
Marcação <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 página ela
deve ocupar.
Atributos
Atributos
Formulários <FORM></FORM>
Formulários são utilizados para envio de informações pela em um navegador.
Para usar um formulário HTML devemos dispor também de alguns controles visuais.
<LABEL>
<INPUT>
<BUTTON>
<TEXTAREA>
<INPUT TYPE=”RADIO”>
<INPUT TYPE=”CHECKBOX”>
<SELECT>
…
...
Há dois métodos para envio de informações via formulário:
GET e POST
Marcação <TEXTAREA>
Marcação <SELECT>
Marcação <SELECT> com SIZE
Marcação <SELECT> com SIZE
Marcação <SELECT> com SIZE
Marcação <INPUT CHECKBOX>
Marcação <INPUT RADIO>
Marcação <INPUT RADIO>
Marcação <INPUT SUBMIT>
Marcação <INPUT SUBMIT>
Referências
https://developer.mozilla.org/pt-PT/docs/utilizando_meta_tags
http://www.w3c.br/Home/WebHome
http://pt.wikipedia.org/wiki/HTML

HTML Básico

  • 1.
  • 2.
    Apresentação wander.silva@gmail.com Youtube.com/w3ae @w3ae +wanderlei silva docarmo https://github.com/w3aewander Wandelei Silva do carmo Analista e Desenvolvedor de Sistemas Linguagens: PHP, JAVA, C++, C# e Python
  • 3.
    Objetivo Apresentar um tutorialcom os conceitos básicos da linguagem de marcação HTML para iniciantes. Se você já é expert no assunto, este tutorial não é pra você!
  • 4.
  • 5.
  • 6.
    Requisitos para criarpáginas HTML Requisitos para criar páginas HTML Um editor de texto. Pode ser até bloco de notas do Windows. Outros como o VI, gedit, kate, geanie, Quanta, Bluefish,..., (no mundo Linux), uma infinidade! Mas, para uma melhor experiência e aproveitar recursos de detecção de sintaxe da linguagem com colorização de palavras-chave e outros comandos, e também ajuda durante a digitação do código, sugiro o uso de um editor mais poderoso. Gosto muito de usar o Sublime Text, que é multiplataforma e para quem usa o Windows, tem também o Notepad++, que é editor muito leve e gratuito. No caso, o Sublime Text de vez enquanto ele pede para que você compre, mas não bloqueia o uso. Segue os links para o download de sua preferência... http://www.sublimetext.com/3 http://notepad-plus-plus.org/ Quando estiver mais prático 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).
  • 7.
    <DIV> e <SPAN> Servepara organizar o conteúdo de uma determinada página em blocos. Por padrão um DIV ocupa um espaço horizontal em uma página enquanto que SPAN ocupa apenas a largura necessária para exibir o conteúdo. <h1>Saudação</h2> <div > Minha saudação é: <span>Seja bem vindo</span> </div>
  • 8.
    Alterando a aparênciade uma página com CSS A aparência de uma página pode ser alterada para torná-la mais elegante e com uma apresentação 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>
  • 9.
    Adicionando dinamismo comJavascript Da mesma forma que o CSS cuida da aparência, o JAVASCRIPT cuida do dinamismo da página. Ele dá vida e permite que programemos comportamentos em uma página 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>
  • 10.
    Explicando cada parte Aprimeira linha é uma diretiva, informando para o navegador que a página está escrita na versão 5 do html... Antes você deveria usar mais informações aqui.. mas no nosso caso, vamos começar aprendendo com HTML5. <!DOCTYPE html>
  • 11.
    Explicando cada parte Estasdiretivas define o idioma utilizado na página. Desta forma, todos os caracteres acentuados serão exibidos corretamente: Antes, se quiséssemos escrever um texto com caracteres acentuados e garantir que fosse escrito da forma pretendida teríamos que fazer algo como: â- &acirc; Â- &Acirc; á- &aaccute; ã- &atilde; .. E assim por diante.. <html lang=”pt-br”> ... <meta charset=”utf-8”>
  • 12.
    Explicando cada parte Estadiretiva nos permite adicionar informações relevantes à pagina em questão: 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 página..." /> <meta name="keywords" content="..palavras-chave do documento" /> <meta ...>
  • 13.
    Explicando cada parte Aquipodemos importar recursos de outros documentos HTML ou adicionar funcionalidades em javascript, uma linguagem de programação muito legal que dá dinamismo ao nosso aplicativo html e também podemos incluir aquivos CSS que curidarão da aparencia da página. 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”> Conteúdo script.. </script> <head.> … </head>
  • 14.
    Inserindo conteúdo Vamos colocaralgum conteúdo na página: O conteúdo de uma página HTML é inserido entre as TAG's <BODY> </BODY> Exemplo: <body> Olá, mundo! </body> A TAG </HTML> informa o fim da página HTML. Salvo casos especiais, toda TAG deve ser finalizada com seu nome inicido por uma “/” - <HEAD></HEAD>, <BODY></BODY>, <HTML></HTML>
  • 15.
    TAG's HTML Principais tag'sHTML: H1, H2, H3, H4, H5, H6 Estas tags são utilizadas para acrescentar títulos de conteúdos com tamanhos que variam de acordo com a tag usada, onde a tag H! é a maior delas. P – Adiciona parágrafo na página. <p> Este é um parágrafo </p> BR – Força uma quebra de linha Meu nome é: <br /> Wanderlei... Mostrará: Meu nome é: Wanderlei.
  • 16.
    TAG's HTML Âncoras: Âncoras sãousadas para navegação em partes da página ou fazer com que o navegador abra um página externa. São os famosos links... Link para uma seção dentro da mesma página. Útil apenas quando a página tem um conteúdo extenso... Para conseguir navegar na página, nomeie seus parágrafos com a tag <a name=”nome_ancora”>Titulo da Ancora</a>. <a name=”ancora1”>Ancora 1</a> <p> Conteúdo 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>
  • 17.
    TAG's HTML Link paraoutra página: 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”>Página do órgão que padroniza a WEB</a> </p> <H1>Bolo segura marido – foto </H1> <a href=”imagens/bolo_segura_marido.jpg”>Bolo segura marido</a>
  • 18.
    LISTA NÃO ORDENADA <UL>Minhalista não 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 não ordenada ● Item 1 ● Item 2 ● Item 3 ● Item 4 ● Item 5 ● Item 6
  • 19.
    LISTA ORDENADA <OL>Minha listanão 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 não ordenada ● 1 - Item 1 ● 2- Item 2 ● 3 - Item 3 ● 4 - Item 4 ● 5 - Item 5 ● 6 - Item 6
  • 20.
  • 21.
    Saída da listade definição
  • 22.
  • 23.
  • 24.
  • 26.
  • 28.
  • 31.
    Marcação <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 página ela deve ocupar.
  • 32.
  • 34.
  • 44.
    Formulários <FORM></FORM> Formulários sãoutilizados para envio de informações pela em um navegador. Para usar um formulário HTML devemos dispor também de alguns controles visuais. <LABEL> <INPUT> <BUTTON> <TEXTAREA> <INPUT TYPE=”RADIO”> <INPUT TYPE=”CHECKBOX”> <SELECT> … ... Há dois métodos para envio de informações via formulário: GET e POST
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.