View
240
Download
4
Category
Preview:
Citation preview
Introdução ao HTML
https://www.facebook.com/alvarofpinheiroaulas/br.linkedin.com/in/alvarofpinheiro/
http://www.alvarofpinheiro.eti.br
http://www.alvarofpinheiro.eti.br
World Wide Web (WWW)
A World Wide Web (WWW) é mais frequentemente chamada de a Web (Teia) e é a denominação dada a uma rede de computadores ao redor do mundo. Todos os computadores na Web podem comunicar-se uns com os outros. Todos os computadores usam um padrão de comunicação chamado HTTP. A informação na Web é armazenada em documentos chamados páginas Web. As páginas Web são arquivos armazenados em computadores chamados servidores Web. Os computadores que interpretam as páginas Web são chamados clientes Web. Os Clientes Web carregam as páginas com um programa chamado navegador Web.
http://www.alvarofpinheiro.eti.br
Hyper Text Markup Language (HTML)
HTML significa Linguagem de Marcação de Hipertexto. Um arquivo HTML é um arquivo de texto contendo pequenas etiquetas de marcação (markup tags). As marcações dizem para o navegador Web como mostrar a página. Um arquivo HTML deve ter uma extensão de arquivo htm ou html. Um arquivo HTML pode ser criado usando um simples editor de textos.
http://www.alvarofpinheiro.eti.br
Document Type Definition (DTD)
Um documento HTML é validado em relação a uma DTD, isto é, Definição de Tipo de Documento. Antes que um arquivo HTML possa ser apropriadamente validado, uma DTD correto deve ser adicionado como primeira linha do arquivo.
<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EM " "http://www.w3.org/TR/html4/strict.dtd">
http://www.alvarofpinheiro.eti.br
Tags - Cabeçalho<!DOCTYPE> Define o tipo do documento<html> Tag de início<head> Define informação sobre o documento<title> Define o título do documento<base> Define o URL base para todos os vínculos numa página<link> Define a referência do recurso<meta> Define meta informação
<html> <head> <title>Título da página</title> </head> <body> Esta é minha primeira página. <b>Este texto está em negrito</b> </body></html>
http://www.alvarofpinheiro.eti.br
Tags - Página
<html> Define um documento HTML<body> Define o corpo do documento<h1> a <h6> Define título 1 a título 6<p> Define um parágrafo<br> Insere uma única quebra de linha<hr> Define uma linha horizontal<!--> Define um comentário
http://www.alvarofpinheiro.eti.br
Tags - Tabela
<table> Define uma tabela<th> Define um cabeçalho de tabela<tr> Define uma linha de tabela<td> Define uma célula de tabela<caption> Define um título de tabela<colgroup> Define um grupo de colunas de tabela<col> Define os valores de atributo para colunas em uma tabela<thead> Define um cabeçalho de tabela<tbody> Define o corpo de uma tabela<tfoot> Defines o rodapé (footer) de uma tabela
http://www.alvarofpinheiro.eti.br
Tags - Tabela<table> <tr> <td> linha 1, célula 1 </td> <td> linha 1, célula 2 </td> </tr> <tr> <td> linha 2, célula 1 </td> <td> linha 2, célula 2 </td> </tr></table>
http://www.alvarofpinheiro.eti.br
Tags - Estilo
<style> Define uma definição de estilo<div> Define uma seção num documento<span> Define uma seção num documento
http://www.alvarofpinheiro.eti.br
Tags - Vínculo
<a href> Víncula um arquivo
File Acessa um arquivo no seu PC localftp Acessa um arquivo num servidor FTPhttp Acessa um arquivo num Servidor Webnews Acessa um grupo de notícias Usenettelnet Acessa uma conexão Telnetmailto Acessa um e-mail
<a href="ftp://www.w3schools.com/ftp/winzip.exe">Download WinZip</a><a href="mailto:someone@w3schools.com">someone@w3schools.com</a>
<a href="news:alt.html">Grupo de Notícias de HTML</a>
http://www.alvarofpinheiro.eti.br
Tags -Âncora
<a href="http://www.w3schools.com/">Visite as W3Schools!</a><a href="http://www.w3schools.com/" target="_blank">Visite as W3Schools!</a>
<a href="http://www.w3schools.com/html_links.asp">Dicas Úteis</a>
http://www.alvarofpinheiro.eti.br
Tags - Script
<script> Define a script<noscript> Texto alternativo se o script não for executado<object> Define um objeto (embedded)<param> Define configurações run-time para um objeto
<html> <head> </head> <body> <script type="text/javascript"> document.write("Oi Mundo!") </script> </body></html>
http://www.alvarofpinheiro.eti.br
Tags - Texto
<h1>Este é um título</h1><h2>Este é um título</h2><h3>Este é um título</h3><h4>Este é um título</h4><h5>Este é um título</h5><h6>Este é um título</h6><p>Este é um parágrafo</p><p>Este é outro parágrafo</p><p>Este <br> é um pará<br>grafo com quebras de linha</p><!-- Este é um comentário -->
http://www.alvarofpinheiro.eti.br
Tags - Formatação
<b> Define texto em negrito<big> Define texto grande<em> Define texto enfatizado;<i> Define texto em itálico<small> Define texto pequeno<strong> Define texto forte<sub> Define texto subescrito<sup> Define texto superescrito
http://www.alvarofpinheiro.eti.br
Tags - Entrada
<form> Primeiro nome: <input type="text" name="firstname"> <br> Último nome: <input type="text" name="lastname"></form>
http://www.alvarofpinheiro.eti.br
Tags - Saída
<code> Define texto de código de computador<kbd> Define texto de teclado<samp> Define amostra de código de computador<tt> Define texto de teletipo<var> Define uma variável<pre> Define texto pré-formatado
http://www.alvarofpinheiro.eti.br
Tags - Controle<form> Define um formulário para entradas do usuário<input> Define um campo de entrada<textarea> Define controle de entrada de texto multi-linhas<label> Define um rótulo para um controle<fieldset> Define um conjunto de campos<legend> Define um título para um conjunto de campos<select> Define uma lista selecionável (uma caixa drop-down)<optgroup> Define um grupo de opção<option> Define uma opção em uma caixa drop-down<button> Define um botão para pressionar
http://www.alvarofpinheiro.eti.br
Tags - BotõesBotões Radiais:<form> <input type="radio" name="sex" value="male"> Masculino <br> <input type="radio" name="sex" value="female"> Feminino</form>
Caixas de Seleção:<form> <input type="checkbox" name="bike"> Eu tenho uma bicicleta <br> <input type="checkbox" name="car"> Eu tenho um carro</form>
http://www.alvarofpinheiro.eti.br
Tags - Listas
Listas Não Ordenadas: Uma lista não ordenada é uma lista de itens. As listas de itens são marcadas com bullets.<ul><li>Café</li><li>Leite</li></ul>
Listas ordenadas: Uma lista ordenada é também uma lista de itens. As listas de itens são marcadas com números.<ol><li>Café</li><li>Leite</li></ol>
http://www.alvarofpinheiro.eti.br
Tags - Imagem
<img> Define uma imagem<map> Define um mapa de imagem<area> Define uma área dentro de um mapa de imagem
<img src="url">
O atributo alt é usado para definir um "texto alternativo" para uma imagem. O valor do atributo alt é um texto definido pelo autor:
<img src="boat.gif" alt="Big Boat">
http://www.alvarofpinheiro.eti.br
Tags - Background
<body bgcolor="#000000"><body bgcolor="rgb(0,0,0)"><body bgcolor="black">
http://www.alvarofpinheiro.eti.br
Tags – EstiloFolha de Estilo Externa<head> <link rel="stylesheet" type="text/css" href="meuestilo.css"></head>
Folha de Estilo Interna<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style></head>
Estilos Local (inline)<p style="color: red; margin-left: 20px"> Este é um parágrafo</p>
http://www.alvarofpinheiro.eti.br
Tags – HTML5
<embed> inserir conteúdo externo<video> inserir vídeos<audio> inserir audio stream<source> inserir vídeo ou audio
Recommended