O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
APOSTILA DE HTML para INICIANTES
http://welingtonsc.blogspot.com/
welingtonsilvacarvalho@hotmail.com
APOSTILA DE HTML para INICIANTES
http://welingtonsc.blogspot.com/
welingtonsilvacarvalho@hotmail.com
HTML significa Hyper ...
APOSTILA DE HTML para INICIANTES
http://welingtonsc.blogspot.com/
welingtonsilvacarvalho@hotmail.com
TAG FORM, para inicia...
APOSTILA DE HTML para INICIANTES
http://welingtonsc.blogspot.com/
welingtonsilvacarvalho@hotmail.com
Figura 1
Figura 2
Vam...
APOSTILA DE HTML para INICIANTES
http://welingtonsc.blogspot.com/
welingtonsilvacarvalho@hotmail.com
Veja como ficou sua p...
APOSTILA DE HTML para INICIANTES
http://welingtonsc.blogspot.com/
welingtonsilvacarvalho@hotmail.com
Figura 4
Agora vamos ...
APOSTILA DE HTML para INICIANTES
http://welingtonsc.blogspot.com/
welingtonsilvacarvalho@hotmail.com
Figura 5
Agora vamos ...
APOSTILA DE HTML para INICIANTES
http://welingtonsc.blogspot.com/
welingtonsilvacarvalho@hotmail.com
Salve como pagina05.h...
Próximos SlideShares
Carregando em…5
×

Apostila de HTML para iniciantes

Por Welington Carvalho

Livros relacionados

Gratuito durante 30 dias do Scribd

Ver tudo
  • Seja o primeiro a comentar

Apostila de HTML para iniciantes

  1. 1. APOSTILA DE HTML para INICIANTES http://welingtonsc.blogspot.com/ welingtonsilvacarvalho@hotmail.com
  2. 2. APOSTILA DE HTML para INICIANTES http://welingtonsc.blogspot.com/ welingtonsilvacarvalho@hotmail.com HTML significa Hyper Text Markup Language (Linguagem de Marcação de Hiper Texto), onde trabalhamos com TAGS, dentro dos sinais <>. Podemos usar um aplicativo simples como o BLOCO DE NOTAS (Notepad) para desenvolver um website por completo (tabelas, cores em hexadecimais, imagens, frames). Podemos abrir o BLOCO DE NOTAS de forma rápida (se tiver usando Windows 8 ou Windows 10, clique com o botão direito do mouse no ícone do Windows, menu iniciar, depois executar, depois digite NOTEPAD, ou então INICIAR / ACESSÓRIOS / BLOCO DE NOTAS. Vamos lembrar algumas TAGS: Todo o código é trabalhado com as TAGS <HTML> - <HEAD> <TITLE> <HTML> - Representa o início da página <HEAD> - Cabeça da página <TITLE> - Título da página, onde irá aparecer o título da página no navegador (o navegador ou browser pode ser o SAFARI, IE, MOZILLA, CHROME, OPERA e assim por diante). <BODY> - Corpo da Página – daqui por diante inserimos os códigos para tabelas, imagens, som, vídeo. Dentro dessa TAG podemos também inserir outras informações, como BGCOLOR, BACKGROUND, BGSOUND, TOPMARGIN, LEFTMARGIN, RIGHTMARGIN. Observe que é tudo em inglês! BGCOLOR = Cor de fundo, BACKGROUND = imagem de fundo, BGSOUND = Música de fundo (usado muito em páginas mais antigas), TOPMARGIN = espaço da margem no topo, LEFTMARGIN = espaço da margem esquerda, RIGHTMARGIN = espaço da margem direita. <TABLE> - Inicia uma tabela <CELLPADDING> - Espaço por dentro de cada célula (o que é célula? – encontro da linha vertical com a linha horizontal, formando assim cada quadrinho). <CELLSPACING> - Espaço entre as células. <BORDER> - Borda da Tabela (geralmente não colocamos bordas nas tabelas na página, a não ser se for um menu interativo, para ficar mais elegante) <STYLE> - Aqui podemos adicionar estilos, essa TAG funciona com várias informações dentro como “FONT-COLOR”, “BACKGROUND-COLOR”. <LI> - Com essa TAG, podemos iniciar uma listagem (assim como os marcadores no WORD) <IMG> - Com essa TAG, podemos inserir imagem na página. <INPUT> - Com essa TAG, iniciamos uma caixa de texto, ou um botão (funciona para formulários de cadastro de clientes ou cadastro de filmes, aqui deve-se trabalhar com Aa
  3. 3. APOSTILA DE HTML para INICIANTES http://welingtonsc.blogspot.com/ welingtonsilvacarvalho@hotmail.com TAG FORM, para iniciar um formulário e é preciso de uma linguagem VBScript, JAVAScript ou ASP.NET para que leia e retorne uma mensagem assim que pressionado o botão do formulário). <HR> - Inicia uma linha horizontal <H1> até <H5> - Deixa o texto em tamanho maior até o menor. <FONT> - Com essa TAG, definimos a fonte (tipo de letra) que queremos aplicar à página (ARIAL, TIMES NEW ROMAN, VERDANA, HELVETICA), etc. </FONT> - Quando colocamos essa barra, significa que estamos fechando uma área do código. Por exemplo, se eu iniciar uma linha e adicionar uma fonte e não fechar essa TAG, a página toda fica com a mesma fonte. <BR> - Para pular para a linha debaixo (isso na página, não no código) <A HREF> - Para colocarmos links na página (fazer com que vai para outra página, dentro do próprio site ou não). <META> - Aqui colocamos as KEYWORDS (Palavas-Chave) para que o site com mecanismos de buscas encontre seu site rapidamente. As cores nas TAGS podemos usar em inglês ou HEXADECIMAIS (#000000) “OBS: Assim que digitamos o código, temos que salvar com a extensão .HTML para que o navegador leia e interprete como página e não como texto comum. ” Criando minha primeira página Vamos abrir o bloco de notas e vamos digitar o seguinte código: <HTML> <HEAD> <TITLE>Minha primeira página HTML</TITLE> </HEAD> <BODY> <H1>Veja que bacana, estou treinando e tentando desenvolver minha primeira página</H1> <BR> <A HREF=http://welingtonsc.blogspot.com>. Esse blog contém diversos conteúdos</A> <BR> <A HREF=mailto:meuemail@servidor.com>. Clique aqui e entre em contato com a gente</A> </BODY> </HTML> Salve esse arquivo como pagina01.html dentro de uma pasta (crie uma pasta especial para você ir salvando) – A figura 1 e 2 mostram como:
  4. 4. APOSTILA DE HTML para INICIANTES http://welingtonsc.blogspot.com/ welingtonsilvacarvalho@hotmail.com Figura 1 Figura 2 Vamos ver no navegador como ficou? Depois de salvo, clique duas vezes nele e abriremos o arquivo HTML no Navegador: (pode ser no IE, Edge, Chrome, Mozilla)
  5. 5. APOSTILA DE HTML para INICIANTES http://welingtonsc.blogspot.com/ welingtonsilvacarvalho@hotmail.com Veja como ficou sua página. Ao passar o cursor por cima dos links, na barra de status mostra o endereço (e é aí que você deve ter cuidado ao clicar, sempre bom verificar a barra de status antes de clicar em um link): Figura 3 Vamos agora trabalhar com FONTE e CORES. Crie um novo documento no BLOCO DE NOTAS e vamos digitar o seguinte código: <HTML> <HEAD> <TITLE>Trabalhando com fonte e cores</TITLE> </HEAD> <BODY BGCOLOR=yellow> <FONT FACE=Arial SIZE=”14 COLOR=blue>Texto na cor azul e com fonte ARIAL</FONT><BR> <FONT FACE=Verdana SIZE=14 COLOR=red>Texto na cor vermelha e com fonte VERDANA</FONT> <FONT FACE=HELVETICA SIZE=14 COLOR=green>Texto na cor verde e com fonte HELVETICA</FONT> </BODY> </HTML> Salve o documento como pagina02.html e vamos abrir no navegador e ver o resultado, como mostra figura 4:
  6. 6. APOSTILA DE HTML para INICIANTES http://welingtonsc.blogspot.com/ welingtonsilvacarvalho@hotmail.com Figura 4 Agora vamos trabalhar um pouco com tabelas. Digite o código abaixo: <HTML> <HEAD> <TITLE>Trabalhando um pouco com tabelas</TITLE> </HEAD> <BODY> <TABLE BORDER=”1” CELLSPACING=”5” CELLPADDING=”2”> <TR> <TD>Inicio aqui uma célula</TD> <TD>Inicio aqui outra célula</TD> </TR> <TR> <TD>Essa tabela ficará incrível</TD> <TD>Posso colocar imagens aqui</TD> </TR> </TABLE> </BODY> </HTML> Salve como página03.html e vamos testar. Lembre-se de testar em diversos navegadores, pois vai haver diferença entre eles:
  7. 7. APOSTILA DE HTML para INICIANTES http://welingtonsc.blogspot.com/ welingtonsilvacarvalho@hotmail.com Figura 5 Agora vamos trabalhar com imagens. Para inserir a imagem, ela precisa estar no mesmo diretório. Quando você for criar um website, você precisa manter todos os arquivos em um só diretório. Estamos finalizando um processo de criação de páginas (aqui é somente uma base). Para registrar, você precisa escolher um servidor de hospedagem e domínio. Mas o que é isso? (Hospedar seus arquivos e ter o seu domínio www.meusite.com). Um dos melhores atualmente é o UOL Host. Voltando às imagens, vamos exemplificar: <IMG SRC=”imagem/foto.jpeg”> (Sendo que IMAGEM é a pasta onde fica as imagens e o JPEG é o formato da imagem, extensão, pode ser BMP (Bitmap), PNG, GIF, TIFF, entre outros. Digite o código abaixo e vamos testar: <HTML> <HEAD> <TITLE>Trabalhando com tabelas e imagens</TITLE> <HEAD> <BODY> <TABLE BORDER=0> <TR> <TD>IMG SRC=”imagem/welington.jpg”></TD> <TD>Meu nome é Welington e estou aqui instruindo algumas informações sobre HTML, informações básicas para alunos que gostam e se interessam em aprender de forma rápida sem complicação. Crianças, Jovens e Adultos! </TD> </TR> </TABLE> </BODY> </HTML>
  8. 8. APOSTILA DE HTML para INICIANTES http://welingtonsc.blogspot.com/ welingtonsilvacarvalho@hotmail.com Salve como pagina05.html e vamos ver o resultado: Figura 6 O código HTML 5 e CSS3 pode ser muito explorado, principalmente criar imagens com o próprio código. O CSS é o estilo que nós podemos adicionar em uma página em código separado, por exemplo: “.MENU {FONT-COLOR:blue;FONT-SIZE:12;FONT-FACE:ARIAL}” Você coloca entre chaves o código e salva com o FORMATO “.CSS”. Depois, no código da página você coloca <link href=" teste.css" rel="stylesheet" type="text/css"> O HTML é uma linguagem simples de se usar, e depois dele você pode usar o PHP tranquilamente (que são códigos para formulários, avançados). Em 8 páginas, de forma rápida, faça os testes e aprimore, buscando evoluir nessas linguagens.

×