Comandos html
FJ2312
57 views
5 slides
Dec 13, 2019
Slide 1 of 5
1
2
3
4
5
About This Presentation
HTML
Slide Content
3 - Comandos HTML.
Os comandos em html vêm sempre entre os caracteres < e >. Outra característica é que, a
maioria dos comandos são formados por pares, delimitando o início e o fim de trechos que
estão sujeitos à sua ação. O comando que indica o final possui um sinal de / antes do nome do
comando: <comando> e </comando>
A estrutura básica de um programa html é a seguinte:
<HTML>
<HEAD>
<TITLE> Primeira página </TITLE>
</HEAD>
<BODY>
Primeiro exercício.
</BODY>
</HTML>
Onde:
<HTML> </HTML>
indica o início e o fim de um programa html. É um comando
obrigatório. Nenhum texto deve preceder <HTML> e nenhum
deve vir após </HTML>.
<HEAD> </HEAD>
define a área de cabeçalho, agrupando uns poucos comandos
html. É um comando opcional.
<TITLE> </TITLE>
indica o título do documento, que será apresentado na barra
superior do browser.
<BODY> </BODY>
delimita o corpo do programa. É um comando obrigatório.
Entre estas marcas ficam a maioria dos comandos html. Mais
detalhes no fim desta página.
Exercício: Copie este trecho de comandos. Abra o Bloco de Notas. Cole. Salve o
arquivo com o nome index.htm em uma pasta (diretório) criada por você com o nome de
Exercícios. Abra o seu browser, para trabalhar off line (sem estar conectado). Em arquivo/abrir
abra o arquivo que você criou e veja o resultado. Se você digitou algo errado volte no Bloco de
Notas faça a atualização e salve. Volte para seu browser e clique no botão atualizar.
<P>
força o início de um novo parágrafo, avança uma linha em branco e inicia o
texto na segunda linha após o final do parágrafo anterior.
Podemos determinar o alinhamento do parágrafo usando um par de <P> e
</P>. Junto com o comando <P> usamos o comando ALIGN= CENTER,
RIGHT, JUSTIFY ou LEFT (que é o padrão).
<BR>
avança para a linha imediatamente após àquela em que se encontra, sem
deixar linha em branco.
<HR>
insere uma linha divisória horizontal na posição em que foi especificado.
Pode usar parâmetros que definam a sua espessura n, definida em pixel e
seu tamanho m, que pode ser especificado em números (pixel) ou em
percentual (em relação a largura da tela). <HR SIZE=n WIDTH=m%>
Os comandos em html vêm sempre entre os caracteres < e >. Outra característica é que, a
maioria dos comandos são formados por pares, delimitando o início e o fim de trechos que
estão sujeitos à sua ação. O comando que indica o final possui um sinal de / antes do nome do
comando: <comando> e </comando>
A estrutura básica de um programa html é a seguinte:
<HTML>
<HEAD>
<TITLE> Primeira página </TITLE>
</HEAD>
<BODY>
Primeiro exercício.
</BODY>
</HTML>
Onde:
<HTML> </HTML>
indica o início e o fim de um programa html. É um comando
obrigatório. Nenhum texto deve preceder <HTML> e nenhum
deve vir após </HTML>.
<HEAD> </HEAD>
define a área de cabeçalho, agrupando uns poucos comandos
html. É um comando opcional.
<TITLE> </TITLE>
indica o título do documento, que será apresentado na barra
superior do browser.
<BODY> </BODY>
delimita o corpo do programa. É um comando obrigatório.
Entre estas marcas ficam a maioria dos comandos html. Mais
detalhes no fim desta página.
Exercício: Copie este trecho de comandos. Abra o Bloco de Notas. Cole. Salve o
arquivo com o nome index.htm em uma pasta (diretório) criada por você com o nome de
Exercícios. Abra o seu browser, para trabalhar off line (sem estar conectado). Em arquivo/abrir
abra o arquivo que você criou e veja o resultado. Se você digitou algo errado volte no Bloco de
Notas faça a atualização e salve. Volte para seu browser e clique no botão atualizar.
<P>
força o início de um novo parágrafo, avança uma linha em branco e inicia o
texto na segunda linha após o final do parágrafo anterior.
Podemos determinar o alinhamento do parágrafo usando um par de <P> e
</P>. Junto com o comando <P> usamos o comando ALIGN= CENTER,
RIGHT, JUSTIFY ou LEFT (que é o padrão).
<BR>
avança para a linha imediatamente após àquela em que se encontra, sem
deixar linha em branco.
<HR>
insere uma linha divisória horizontal na posição em que foi especificado.
Pode usar parâmetros que definam a sua espessura n, definida em pixel e
seu tamanho m, que pode ser especificado em números (pixel) ou em
percentual (em relação a largura da tela). <HR SIZE=n WIDTH=m%>
<HTML>
<HEAD>
<TITLE> Primeira página </TITLE>
</HEAD>
<BODY>
Primeiro exercício.<BR>
Segunda linha.<BR>
Terceira linha.<P>
Segundo parágrafo.<BR>
Quinta linha.<HR>
Sexta linha.<BR>
Sétima linha.<HR SIZE=5 WIDTH=70%>
</BODY>
</HTML>
Exercício: Passe os comandos acima para seu arquivo no Bloco de Notas e salve.
No browser atualize. Faça alterações nos parâmetros do comando HR e veja o resultado.
<B> </B>
negrito - aplica estilo negrito ao texto escrito entre os
comandos.
<I> </I>
itálico – aplica estilo itálico ao texto escrito entre os
comandos.
<U> </U>
sublinhado - aplica sublinhado ao texto escrito entre os
comandos.
<BIG> </BIG> aumenta a fonte e aplica negrito.
<SMALL> </SMALL> reduz e altera a fonte.
<SUP> </SUP> sobrescrito – eleva o texto e diminui seu corpo.
<SUB> </SUB> subscrito – rebaixa o texto e diminui seu corpo.
<BLINK> </BLINK>
pulsante – faz com que o texto pisque. Não funciona no
Explorer
<HTML>
<HEAD>
<TITLE> Primeira página </TITLE>
</HEAD>
<BODY>
Primeiro <B>exercício.</B><BR>
<I>Segunda</I> linha.<BR>
<U>Terceira linha.</U><P>
<BIG>Segundo</BIG> parágrafo.<BR>
Quinta <SMALL>linha.</SMALL><HR>
6<SUP>a</SUP>Sexta linha.<BR>
7<SUB>a</SUB>Sétima linha.<HR SIZE=5 WIDTH=70%>
</BODY>
</HTML>
<Hn> ALIGN=... </Hn>
usado para definir cabeçalhos. Além de aumentar o
tamanho do texto, insere uma linha antes e outra
depois do texto entre os comandos. Pode variar de H1,
o maior tamanho até H6, o menor tamanho.
ALIGN = CENTER ou RIGHT - o padrão de
<HEAD>
<TITLE> Primeira página </TITLE>
</HEAD>
<BODY>
Primeiro exercício.<BR>
Segunda linha.<BR>
Terceira linha.<P>
Segundo parágrafo.<BR>
Quinta linha.<HR>
Sexta linha.<BR>
Sétima linha.<HR SIZE=5 WIDTH=70%>
</BODY>
</HTML>
Exercício: Passe os comandos acima para seu arquivo no Bloco de Notas e salve.
No browser atualize. Faça alterações nos parâmetros do comando HR e veja o resultado.
<B> </B>
negrito - aplica estilo negrito ao texto escrito entre os
comandos.
<I> </I>
itálico – aplica estilo itálico ao texto escrito entre os
comandos.
<U> </U>
sublinhado - aplica sublinhado ao texto escrito entre os
comandos.
<BIG> </BIG> aumenta a fonte e aplica negrito.
<SMALL> </SMALL> reduz e altera a fonte.
<SUP> </SUP> sobrescrito – eleva o texto e diminui seu corpo.
<SUB> </SUB> subscrito – rebaixa o texto e diminui seu corpo.
<BLINK> </BLINK>
pulsante – faz com que o texto pisque. Não funciona no
Explorer
<HTML>
<HEAD>
<TITLE> Primeira página </TITLE>
</HEAD>
<BODY>
Primeiro <B>exercício.</B><BR>
<I>Segunda</I> linha.<BR>
<U>Terceira linha.</U><P>
<BIG>Segundo</BIG> parágrafo.<BR>
Quinta <SMALL>linha.</SMALL><HR>
6<SUP>a</SUP>Sexta linha.<BR>
7<SUB>a</SUB>Sétima linha.<HR SIZE=5 WIDTH=70%>
</BODY>
</HTML>
<Hn> ALIGN=... </Hn>
usado para definir cabeçalhos. Além de aumentar o
tamanho do texto, insere uma linha antes e outra
depois do texto entre os comandos. Pode variar de H1,
o maior tamanho até H6, o menor tamanho.
ALIGN = CENTER ou RIGHT - o padrão de
alinhamento é à esquerda. Com o comando ALIGN
podemos alinhar à direita ou centralizar.
<DIV> ALIGN=... </DIV>
Envolve uma área do texto ou divisão que pode receber
parâmetros específicos de alinhamento. Alinha
cabeçalhos e parágrafos sem que seja necessário usar
um comando align para cada um deles.
ALIGN = LEFT, CENTER, RIGHT ou JUSTIFY - o
padrão de alinhamento é à esquerda.
<PRE> </PRE>
através deste comando você pode incluir um texto que
foi editado por um editor de textos e preservar sua
formação original, como marcas de tabulação, fim de
linha gerado pela tecla ENTER e outros formatos.
<CENTER> </CENTER>
este comando centraliza um texto, um parágrafo, um
cabeçalho ou uma figura dentro da largura da página.
Como padrão um texto inserido em uma página HTML
é alinhado pela esquerda.
<HTML>
<HEAD>
<TITLE> Primeira página </TITLE>
</HEAD>
<BODY>
<H1>Cabeçalho de tamanho H1.</H1>
Todos os comandos de cabeçalho incluem <BR>uma linha em branco antes e após os
mesmos.
<HR>
<CENTER><H2>Cabeçalho de tamanho H2, com barra de divisão e centralizado
</H2></CENTER>
Todos os comandos de cabeçalho incluem <BR>uma linha em branco antes e após os
mesmos.
<H3>Cabeçalho de tamanho H3</H3>
Todos os comandos de cabeçalho incluem <BR>uma linha em branco antes e após os
mesmos.
<H4>Cabeçalho de tamanho H4</H4>
Todos os comandos de cabeçalho incluem <BR>uma linha em branco antes e após os
mesmos.
<H5>Cabeçalho de tamanho H5</H5>
Todos os comandos de cabeçalho incluem <BR>uma linha em branco antes e após os
mesmos.<BR>
<PRE>Digite um texto e use ENTER para quebrar as linhas, marcas de tabulação e
outros formatos como listas no seu editor.
Inclua este texto entre os comandos PRE e /PRE, que sua
formatação original será preservada.
</PRE>
<H6>Cabeçalho de tamanho H6</H6>
Todos os comandos de cabeçalho incluem <BR>uma linha em branco antes e após os
mesmos.
</BODY>
</HTML>
Exercício: Passe os comandos acima para seu arquivo no Bloco de Notas e salve.
No browser atualize e veja o resultado.
& l t e & g t
podemos alinhar à direita ou centralizar.
<DIV> ALIGN=... </DIV>
Envolve uma área do texto ou divisão que pode receber
parâmetros específicos de alinhamento. Alinha
cabeçalhos e parágrafos sem que seja necessário usar
um comando align para cada um deles.
ALIGN = LEFT, CENTER, RIGHT ou JUSTIFY - o
padrão de alinhamento é à esquerda.
<PRE> </PRE>
através deste comando você pode incluir um texto que
foi editado por um editor de textos e preservar sua
formação original, como marcas de tabulação, fim de
linha gerado pela tecla ENTER e outros formatos.
<CENTER> </CENTER>
este comando centraliza um texto, um parágrafo, um
cabeçalho ou uma figura dentro da largura da página.
Como padrão um texto inserido em uma página HTML
é alinhado pela esquerda.
<HTML>
<HEAD>
<TITLE> Primeira página </TITLE>
</HEAD>
<BODY>
<H1>Cabeçalho de tamanho H1.</H1>
Todos os comandos de cabeçalho incluem <BR>uma linha em branco antes e após os
mesmos.
<HR>
<CENTER><H2>Cabeçalho de tamanho H2, com barra de divisão e centralizado
</H2></CENTER>
Todos os comandos de cabeçalho incluem <BR>uma linha em branco antes e após os
mesmos.
<H3>Cabeçalho de tamanho H3</H3>
Todos os comandos de cabeçalho incluem <BR>uma linha em branco antes e após os
mesmos.
<H4>Cabeçalho de tamanho H4</H4>
Todos os comandos de cabeçalho incluem <BR>uma linha em branco antes e após os
mesmos.
<H5>Cabeçalho de tamanho H5</H5>
Todos os comandos de cabeçalho incluem <BR>uma linha em branco antes e após os
mesmos.<BR>
<PRE>Digite um texto e use ENTER para quebrar as linhas, marcas de tabulação e
outros formatos como listas no seu editor.
Inclua este texto entre os comandos PRE e /PRE, que sua
formatação original será preservada.
</PRE>
<H6>Cabeçalho de tamanho H6</H6>
Todos os comandos de cabeçalho incluem <BR>uma linha em branco antes e após os
mesmos.
</BODY>
</HTML>
Exercício: Passe os comandos acima para seu arquivo no Bloco de Notas e salve.
No browser atualize e veja o resultado.
& l t e & g t
os simbolos & l t e & g t, que devem ser digitados sem espaço, representam os
caracteres < e > para que, em um texto explicativo, os comandos não sejam
executados, mas sim impressos.
Também existe um símbolo para cada acento de forma a garantir que palavras
acentuadas serão visualizadas corretamente em qualquer browser e qualquer
máquina independente da configuração de idioma.
<!-- texto de comentário -->
O texto que for escrito entre os sinais de <!-- e --> só aparecerá ao exibir o código
fonte. É usado para esclarecer detalhes ou destivar comandos durante a fase de
teste de uma página.
<FONT SIZE=n FACE="nome" COLOR="cor">
</FONT>
Usado para alterar a fonte. Os parâmetros abaixo são opcionais.
SIZE especifica o tamanho da fonte. O tamanho padrão é 3. Pode variar de 1, o
menor, até 7, o maior tamanho. Se o tamanho for precedido de um sinal + ou - o
tamanho da fonte atual será aumentado ou diminuído naquele valor.
FACE permite alterar o tipo da fonte. Podem ser especificadas várias fontes,
separadas por vírgula, de maneira que se o sistema não encontrar a primeira,
carrega a segunda, e assim por diante. Fonte padrão é Verdana e depois Arial, size
1.
COLOR especifica a cor do texto. Pode ser especificado por um nome ou por um
código em hexadecimal(# xxxxxx)
<BODY BGCOLOR="cor" BACKGROUND="arquivo" TEXT="cor" LINK="cor"
VLINK="cor" ALINK="cor">
</BODY>
Os parâmetros abaixo são opcionais.
BGCOLOR é a cor do fundo, onde o padrão é cinza ou branco.
BACKGROUND define o endereço da imagem que será usada como fundo da
página, preenchendo o fundo da tela. Deve ser um arquivo jpg ou gif, de preferência
com menos de 10KB para agilizar o tempo de carga.
TEXT é a cor do texto, sendo o padrão preto.
LINK é a cor do texto do link, sendo que o padrão é azul.
VLINK é a cor do link que já foi visitado, sendo o padrão vermelho- purpura.
ALINK é a cor do link que está ativo no momento.
Televisão trabalha com cores no padrão RGB - red/green/blue, onde cada cor pode variar de 0
a 255. O valore mínimo 000 000 000, representa a cor preta, já 255 255 255 é a cor branca.
Mas, para o trabalho interno de um computador as cores devem ser especificadas em
hexadecimal (0-9,a,b,c,d,e,f). Não se esqueça do símbolo de # antes do número. Cuidado ao
escolher cores de fundo e letras para não dificultar a leitura.
caracteres < e > para que, em um texto explicativo, os comandos não sejam
executados, mas sim impressos.
Também existe um símbolo para cada acento de forma a garantir que palavras
acentuadas serão visualizadas corretamente em qualquer browser e qualquer
máquina independente da configuração de idioma.
<!-- texto de comentário -->
O texto que for escrito entre os sinais de <!-- e --> só aparecerá ao exibir o código
fonte. É usado para esclarecer detalhes ou destivar comandos durante a fase de
teste de uma página.
<FONT SIZE=n FACE="nome" COLOR="cor">
</FONT>
Usado para alterar a fonte. Os parâmetros abaixo são opcionais.
SIZE especifica o tamanho da fonte. O tamanho padrão é 3. Pode variar de 1, o
menor, até 7, o maior tamanho. Se o tamanho for precedido de um sinal + ou - o
tamanho da fonte atual será aumentado ou diminuído naquele valor.
FACE permite alterar o tipo da fonte. Podem ser especificadas várias fontes,
separadas por vírgula, de maneira que se o sistema não encontrar a primeira,
carrega a segunda, e assim por diante. Fonte padrão é Verdana e depois Arial, size
1.
COLOR especifica a cor do texto. Pode ser especificado por um nome ou por um
código em hexadecimal(# xxxxxx)
<BODY BGCOLOR="cor" BACKGROUND="arquivo" TEXT="cor" LINK="cor"
VLINK="cor" ALINK="cor">
</BODY>
Os parâmetros abaixo são opcionais.
BGCOLOR é a cor do fundo, onde o padrão é cinza ou branco.
BACKGROUND define o endereço da imagem que será usada como fundo da
página, preenchendo o fundo da tela. Deve ser um arquivo jpg ou gif, de preferência
com menos de 10KB para agilizar o tempo de carga.
TEXT é a cor do texto, sendo o padrão preto.
LINK é a cor do texto do link, sendo que o padrão é azul.
VLINK é a cor do link que já foi visitado, sendo o padrão vermelho- purpura.
ALINK é a cor do link que está ativo no momento.
Televisão trabalha com cores no padrão RGB - red/green/blue, onde cada cor pode variar de 0
a 255. O valore mínimo 000 000 000, representa a cor preta, já 255 255 255 é a cor branca.
Mas, para o trabalho interno de um computador as cores devem ser especificadas em
hexadecimal (0-9,a,b,c,d,e,f). Não se esqueça do símbolo de # antes do número. Cuidado ao
escolher cores de fundo e letras para não dificultar a leitura.
Use o programa Palheta de Cores para escolher suas cores, vendo como elas aparecem em
vídeo. O programa oferece os valores em RGB, Hexadecimal e por nomes.
<HTML>
<HEAD>
<TITLE> Primeira página </TITLE>
</HEAD>
<BODY BACKGROUND="roda.gif" BGCOLOR="#BBE7FF" TEXT="#0000FF"
LINK="yellow" VLINK="silver">
<B><H1>FONTE E BACKGROUND.</H1> <BR>
Este texto está escrito na cor definida em TEXT e com a letra padrão.<BR>
O texto abaixo está escrito num tamanho 4 vezes maior, com fonte arial na cor
FF00B0.<BR>
<FONT SIZE=+4 FACE="ARIAL" COLOR="#FF00B0">
A imagem usada como fundo tem apenas 2KB e está na cor rosa claro. Por ser pequena
carrega bem rápido. Já a cor de fundo é azul claro.</FONT>
<P>
<FONT SIZE=2 FACE="ARIAL" COLOR="RED">
<!-- Texto de comentário que não aparece na interpretação do arquivo htm. --> <BR>
Usado para alterar a fonte. Os parâmetros são opcionais.</FONT> <BR>
Usado para alterar a fonte. <FONT SIZE=5 FACE="COMIC SANS MS"
COLOR="#00D300">Os parâmetros são opcionais.</FONT><BR>
<FONT SIZE=7 FACE="IMPACT" COLOR="NAVY">Usado para alterar a fonte.</FONT>Os
parâmetros são opcionais. <BR></B>
</BODY>
</HTML>
vídeo. O programa oferece os valores em RGB, Hexadecimal e por nomes.
<HTML>
<HEAD>
<TITLE> Primeira página </TITLE>
</HEAD>
<BODY BACKGROUND="roda.gif" BGCOLOR="#BBE7FF" TEXT="#0000FF"
LINK="yellow" VLINK="silver">
<B><H1>FONTE E BACKGROUND.</H1> <BR>
Este texto está escrito na cor definida em TEXT e com a letra padrão.<BR>
O texto abaixo está escrito num tamanho 4 vezes maior, com fonte arial na cor
FF00B0.<BR>
<FONT SIZE=+4 FACE="ARIAL" COLOR="#FF00B0">
A imagem usada como fundo tem apenas 2KB e está na cor rosa claro. Por ser pequena
carrega bem rápido. Já a cor de fundo é azul claro.</FONT>
<P>
<FONT SIZE=2 FACE="ARIAL" COLOR="RED">
<!-- Texto de comentário que não aparece na interpretação do arquivo htm. --> <BR>
Usado para alterar a fonte. Os parâmetros são opcionais.</FONT> <BR>
Usado para alterar a fonte. <FONT SIZE=5 FACE="COMIC SANS MS"
COLOR="#00D300">Os parâmetros são opcionais.</FONT><BR>
<FONT SIZE=7 FACE="IMPACT" COLOR="NAVY">Usado para alterar a fonte.</FONT>Os
parâmetros são opcionais. <BR></B>
</BODY>
</HTML>
Tags
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 57
- Slides 5
- Age 2182 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
48 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
47 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
37 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
34 views
21
Know for Certain
DaveSinNM
22 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
26 views