LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON
description
Transcript of LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON
![Page 1: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/1.jpg)
LINGUAGEM DE PROGRAMAÇÃO HTML
COMPONENTES:
ROBSON
EDMILSON
![Page 2: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/2.jpg)
• O HTML (Hiper Text Mark-up Language) é uma linguagem de programação
hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos
que definem o tipo de letra, qual o tamanho , cor ,espaçamento , e vários
outros aspectos.
• Sendo uma das primeiras linguagens web criadas , não sendo porém a
única, porém ela prevalece.
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 3: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/3.jpg)
TAGS
• São rótulos usados para informar ao navegador como deve ser
apresentado o web site.
• Existem dois tipos de tags – tags de abertura : <comando> e tags de
fechamento </comando>.
• Tudo que estiver contido entre uma tag de abertura e uma tag de
fechamento será processado segundo o comando contido na tag.
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 4: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/4.jpg)
• Mas como toda regra tem sua exceção, no HTML a exceção é que em
algumas tags a abertura e fechamento se dá na mesma tag. São tags de
comandos isolados. Exemplo: um pulo de linha é conseguido com a tag
<br/>.
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 5: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/5.jpg)
EXEMPLO TAGS
• <b> informa ao navegador que todo o texto colocado entre si deve ser
mostrado em negrito</b>.(abr. bold= negrito).
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 6: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/6.jpg)
• <h1><h2><h3><h4><h5><h6> informa ao navegador que se trato de um
cabeçalho . O cabeçalho de <h1>primeiro nível é aquele apresentado com
o maior tamanho do texto, <h2> o cabeçalho de segundo nível é
apresentado com o tamanho do texto menor, O cabeçalho <h6> sexto nível
é apresentado com o menor tamanho do texto.
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 7: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/7.jpg)
Exemplo de uma HTML
• <HTML>
• <HEAD>
• <TITLE>
• </TITLE>
• </HEAD>
• <BODY>
• </BODY>
• </HTML>
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 8: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/8.jpg)
TÍTULO DA JANELA WEB
• TITLE: define um título, que é mostrado no alto da janela do navegador.
• Esse título é referenciado em buscas pela rede, dando uma
identidade ao documento.
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 9: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/9.jpg)
TAG BODY
• Tudo que estiver contido em BODY será mostrado na janela principal do
browser , sendo apresentado ao leitor.
• A seção BODY, pode conter cabeçalhos , parágrafos , listas, tabelas, links
para outros documentos, imagens, formulários entre outros.
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 10: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/10.jpg)
Através de atributos , podemos definir cores, links e para o fundo das
páginas , bem como uma imagem de fundo. Onde:
BGCOLOR: cor de fundo.
TEXT: cor dos textos (padrão : preto).
LINK: cor dos links.(padrão : azul).
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 11: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/11.jpg)
• ALINK: cor dos links , quando acionados.( padrão: vermelho).
• VLINK: cor dos links, quando visitados. (padrão: azul escuro ou roxo).
Seus valores são dados em hexadecimal , equivalentes a cores no padrão
RGB(Red, Green e Blue).
• BACKGROUND: Indica o URL da imagem a ser replicada no fundo da
página, como uma marca d’água.
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 12: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/12.jpg)
CABEÇALHO
• Há seis níveis de cabeçalho em HTML, de <H1> a <H6>.
• Os cabeçalhos têm atributos de alinhamentos :
• ALIGN=CENTER: alinhamento centralizado.
• ALIGN=RIGHT: alinhamento à direita.
• ALIGN=LEFT: alinhamento à esquerda.
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 13: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/13.jpg)
Quebra de Linhas:
Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é
necessário quando queremos uma quebra de linha em determinado ponto,
pois os browsers já quebram as linhas automaticamente para apresentar os
textos.
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 14: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/14.jpg)
Parágrafo:
P: Para separar blocos de texto, usamos o elemento <p>.
Tem atributo de alinhamento como os cabeçalhos:
<P ALIGN=CENTER> : parágrafo com alinhamento centralizado.
<P ALIGN=LEFT>: parágrafo com alinhamento à esquerda.
<P ALIGN=RIGHT>: parágrafo com alinhamento à direita.
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 15: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/15.jpg)
FORMATAÇÕES DE TEXTO
PRE: Apresenta o texto na mesma maneira em que foi digitado, mantendo
quebras de linhas de linhas e tabulações.
BLOCKQUOTE: É usado para citações longas.
ADDRESS: Usado para formatar endereços E-mail e referências a
autores de documentos.
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 16: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/16.jpg)
CITE: para títulos de livros, filmes, e citações curtas.
CODE: Para indicar trechos de códigos de programas.
DFN: Indica a definição de uma palavra.
EM: Ênfase, normalmente apresentado em itálico.
KBD: Indica uma entrada via teclado.
SAMP: Indica uma sequência de caracteres, por exemplo uma mensagem
de erro ou um resultado.
STRONG: Forte ênfase, mostrado normalmente em negrito.
VAR: Indica variáveis, ou valores que o usuário deverá escrever.
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 17: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/17.jpg)
B: Quando disponível no navegador , é mostrado em negrito.
I: Itálico, em alguns casos mostrado inclinado.
TT: Fonte de espaçamento fixo . (Igual as antigas máquinas de escrever).
U: Sublinhado.
STRIKE: Frase riscada.
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 18: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/18.jpg)
BIG: Fonte um pouco maior.
SMALL: Fonte um pouco menor.
SUB: Frase em estilo indice.
SUP: Frase em estilo expoente.
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 19: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/19.jpg)
As cores são introduzidas através do elemento FONT , usando o sistema
RGB(RED, GREEN e BLUE).
FONT COLOR: Um trecho de texto pode ter uma cor diferente , feita
através dos atributos de BODY(EX: FONT COLOR=YELLOW).
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 20: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/20.jpg)
Imagem: Elemento IMG insere imagens que são apresentadas junto com os textos. Um atributo deve estar presente.
IMG SRC= “URL_imagem”: Onde URL é o endereço onde está a sua imagem que se quer inserir, não esquecendo que todas as imagens inseridas tem que colocar suas extensões.
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 21: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/21.jpg)
CARACTERÍSTICAS
Pode ser criado em qualquer editor de texto.
Existem editores específicos para várias plataformas.
Documentos HTML são arquivos escritos em ASCII.
LINGUAGEM DE PROGRAMAÇÃO HTML
![Page 22: LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON](https://reader036.fdocument.pub/reader036/viewer/2022062423/5681447e550346895db1160f/html5/thumbnails/22.jpg)
• Bibliografia
• Infoescola - INFORMÁTICA /HTML
• Tutorial - HTML.NET
• Tutorial HTML DO ICMC- USP.
LINGUAGEM DE PROGRAMAÇÃO HTML