Apostila de HTML para iniciantes
WelingtonCarvalho3
278 views
8 slides
Jun 21, 2017
Slide 1 of 8
1
2
3
4
5
6
7
8
About This Presentation
Por Welington Carvalho
Slide Content
APOSTILA DE HTML para INICIANTES
http://welingtonsc.blogspot.com/
[email protected]
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
http://welingtonsc.blogspot.com/
[email protected]
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
APOSTILA DE HTML para INICIANTES
http://welingtonsc.blogspot.com/
[email protected]
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:[email protected]>. 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:
http://welingtonsc.blogspot.com/
[email protected]
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:[email protected]>. 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:
APOSTILA DE HTML para INICIANTES
http://welingtonsc.blogspot.com/
[email protected]
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)
http://welingtonsc.blogspot.com/
[email protected]
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)
APOSTILA DE HTML para INICIANTES
http://welingtonsc.blogspot.com/
[email protected]
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:
http://welingtonsc.blogspot.com/
[email protected]
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:
APOSTILA DE HTML para INICIANTES
http://welingtonsc.blogspot.com/
[email protected]
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:
http://welingtonsc.blogspot.com/
[email protected]
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:
APOSTILA DE HTML para INICIANTES
http://welingtonsc.blogspot.com/
[email protected]
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>
http://welingtonsc.blogspot.com/
[email protected]
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>
APOSTILA DE HTML para INICIANTES
http://welingtonsc.blogspot.com/
[email protected]
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.
http://welingtonsc.blogspot.com/
[email protected]
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.
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 278
- Slides 8
- Favorites 3
- Age 3106 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
45 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
47 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
43 views
14
Fertility awareness methods for women in the society
Isaiah47
41 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
42 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
41 views