Introdução ao HTML - WordPress.com...HTML e linguagens de programação •HTML não possui...
Transcript of Introdução ao HTML - WordPress.com...HTML e linguagens de programação •HTML não possui...
![Page 1: Introdução ao HTML - WordPress.com...HTML e linguagens de programação •HTML não possui recursos de programacão, isto impossibilita: •O uso de repetições •Condicionais](https://reader036.fdocumentos.tips/reader036/viewer/2022071510/612f1d911ecc515869433d0b/html5/thumbnails/1.jpg)
Introdução ao HTML
Prof. Andrea Garcia
![Page 2: Introdução ao HTML - WordPress.com...HTML e linguagens de programação •HTML não possui recursos de programacão, isto impossibilita: •O uso de repetições •Condicionais](https://reader036.fdocumentos.tips/reader036/viewer/2022071510/612f1d911ecc515869433d0b/html5/thumbnails/2.jpg)
HTML
• Não é uma linguagem de programação
• É uma linguagem de marcação
• Na programação para web é usada para apresentar
elementos visuais
• Utiliza uma síntaxe similar ao XML
• Utiliza tags <>
• É guiado por uma específicação do W3C
![Page 3: Introdução ao HTML - WordPress.com...HTML e linguagens de programação •HTML não possui recursos de programacão, isto impossibilita: •O uso de repetições •Condicionais](https://reader036.fdocumentos.tips/reader036/viewer/2022071510/612f1d911ecc515869433d0b/html5/thumbnails/3.jpg)
Olá mundo!
<html>
<head>
<title>Meu primeiro aplicativo</title>
</head>
<body>
<h1>Olá mundo!</h1>
</body>
</html>
Página
![Page 4: Introdução ao HTML - WordPress.com...HTML e linguagens de programação •HTML não possui recursos de programacão, isto impossibilita: •O uso de repetições •Condicionais](https://reader036.fdocumentos.tips/reader036/viewer/2022071510/612f1d911ecc515869433d0b/html5/thumbnails/4.jpg)
HTML e linguagens de programação
• HTML não possui recursos de programacão, isto impossibilita:
• O uso de repetições
• Condicionais
• Usar variáveis de programação, etc…
• Apenas com HTML iremos produzir páginas estáticas
• Ao associar HTML com linguagens de programação
produziremos páginas dinâmicas
• É uma boa prática evitar código de programação junto ao HTML
![Page 5: Introdução ao HTML - WordPress.com...HTML e linguagens de programação •HTML não possui recursos de programacão, isto impossibilita: •O uso de repetições •Condicionais](https://reader036.fdocumentos.tips/reader036/viewer/2022071510/612f1d911ecc515869433d0b/html5/thumbnails/5.jpg)
Tags HTML
• Tudo em HTML será representado através de tags <>
• Sua sintaxe possui duas formas:
• <tag />
• <tag></tag>
• Há também o uso de propriedades nas tags para alterar seu
comportamento
• <tag height=“20px”>
• Precisamos conhecer as tags HTML para saber o que pode ser feito
com ele…
![Page 6: Introdução ao HTML - WordPress.com...HTML e linguagens de programação •HTML não possui recursos de programacão, isto impossibilita: •O uso de repetições •Condicionais](https://reader036.fdocumentos.tips/reader036/viewer/2022071510/612f1d911ecc515869433d0b/html5/thumbnails/6.jpg)
Estrutura de uma página HTML
• <html>
• <head>
• <body>
![Page 7: Introdução ao HTML - WordPress.com...HTML e linguagens de programação •HTML não possui recursos de programacão, isto impossibilita: •O uso de repetições •Condicionais](https://reader036.fdocumentos.tips/reader036/viewer/2022071510/612f1d911ecc515869433d0b/html5/thumbnails/7.jpg)
Tag <head>
• <title> - Usada para determinar o título da página e será
exibido no topo da aplicação
• <style> - Determina parâmetros de estilo CSS a serem
aplicados na página
• <script> - Scripts em javascript a serem utilizados na página
• <meta> - Informações usadas para descrever a página
![Page 8: Introdução ao HTML - WordPress.com...HTML e linguagens de programação •HTML não possui recursos de programacão, isto impossibilita: •O uso de repetições •Condicionais](https://reader036.fdocumentos.tips/reader036/viewer/2022071510/612f1d911ecc515869433d0b/html5/thumbnails/8.jpg)
Tags HTML para textos
• Podemos formatar os textos que serão exibidos ao usuário
• Pode-se:
• Aplicar negrito
• Itálico
• Subescrito
![Page 9: Introdução ao HTML - WordPress.com...HTML e linguagens de programação •HTML não possui recursos de programacão, isto impossibilita: •O uso de repetições •Condicionais](https://reader036.fdocumentos.tips/reader036/viewer/2022071510/612f1d911ecc515869433d0b/html5/thumbnails/9.jpg)
Cabeçalho
• São os textos que, em geral, aparecem no início da página
• Há diferentes tags para representar diferentes tamanhos:
• <h1>
• <h2>
• …
• <h5>
• Exemplo
• <h1>Olá mundo!</h1>
![Page 10: Introdução ao HTML - WordPress.com...HTML e linguagens de programação •HTML não possui recursos de programacão, isto impossibilita: •O uso de repetições •Condicionais](https://reader036.fdocumentos.tips/reader036/viewer/2022071510/612f1d911ecc515869433d0b/html5/thumbnails/10.jpg)
Tags HTML para estilos em textos
• <b> texto em negrito </b>
• <i> texto em itálico </i>
• Texto <sup> acima </sup>
• Texto <sub> abaixo </sub>
• Texto <small> menor </small>
![Page 11: Introdução ao HTML - WordPress.com...HTML e linguagens de programação •HTML não possui recursos de programacão, isto impossibilita: •O uso de repetições •Condicionais](https://reader036.fdocumentos.tips/reader036/viewer/2022071510/612f1d911ecc515869433d0b/html5/thumbnails/11.jpg)
Parágrafo e quebra de linha
• Utilização de parágrafo em HTML:
• <p> Texto dentro do parágrafo </p>
• Quebra de linha em textos:
• Texto em uma linha <br /> Textro em outra linha
![Page 12: Introdução ao HTML - WordPress.com...HTML e linguagens de programação •HTML não possui recursos de programacão, isto impossibilita: •O uso de repetições •Condicionais](https://reader036.fdocumentos.tips/reader036/viewer/2022071510/612f1d911ecc515869433d0b/html5/thumbnails/12.jpg)
Exemplo2.html
<head>
<title>Segundo Exemplo</title>
</head>
<body>
<h1>Exemplo mais completo</h1>
<h2>Bem-Vindo a Aula de DDW2.</h2><br>
<p>Prof. Andrea</p>
<b>Esta linha mostra o uso do negrito</b><br>
<i>Esta linha mostra o uso do itálico</i><br>
exemplo x<sup>2</sup><br>
exemplo H<sub>2</sub>O<br>
<br><br>
<p>Pulamos duas linhas</p>
</body>
</html>
![Page 13: Introdução ao HTML - WordPress.com...HTML e linguagens de programação •HTML não possui recursos de programacão, isto impossibilita: •O uso de repetições •Condicionais](https://reader036.fdocumentos.tips/reader036/viewer/2022071510/612f1d911ecc515869433d0b/html5/thumbnails/13.jpg)
Resultado
![Page 14: Introdução ao HTML - WordPress.com...HTML e linguagens de programação •HTML não possui recursos de programacão, isto impossibilita: •O uso de repetições •Condicionais](https://reader036.fdocumentos.tips/reader036/viewer/2022071510/612f1d911ecc515869433d0b/html5/thumbnails/14.jpg)
exercício