Internet I - Aula 03 - O Maravilhoso Mundo do HTML
-
Upload
manoel-afonso -
Category
Internet
-
view
171 -
download
4
Transcript of Internet I - Aula 03 - O Maravilhoso Mundo do HTML
![Page 1: Internet I - Aula 03 - O Maravilhoso Mundo do HTML](https://reader031.fdocumentos.com/reader031/viewer/2022020721/55abe7261a28abba678b45e1/html5/thumbnails/1.jpg)
Internet IO Maravilhoso Mundo do HTML
Prof. Manoel Afonso
![Page 2: Internet I - Aula 03 - O Maravilhoso Mundo do HTML](https://reader031.fdocumentos.com/reader031/viewer/2022020721/55abe7261a28abba678b45e1/html5/thumbnails/2.jpg)
O que é HTML? É de Comer?
Linguagem de desenvolvimento de páginas Web;
HTML é uma Linguagem de Marcação, não é uma
Linguagem de Programação, ou seja, você só pode
“desenhar” coisas, não pode “programa-las”;
Jamais diga que você programa em HTML;
![Page 3: Internet I - Aula 03 - O Maravilhoso Mundo do HTML](https://reader031.fdocumentos.com/reader031/viewer/2022020721/55abe7261a28abba678b45e1/html5/thumbnails/3.jpg)
Como usar essa coisa?
Há diversos editores (IDEs) que trabalham com documentos HTML:
Aptana Studio;
Bloco de Notas;
Notepad++;
IDEs são importantes pois auxiliam em varias coisas:
Pré-visualização;
Autofechamento de Tags;
IntelliSense (autocomplemento);
![Page 4: Internet I - Aula 03 - O Maravilhoso Mundo do HTML](https://reader031.fdocumentos.com/reader031/viewer/2022020721/55abe7261a28abba678b45e1/html5/thumbnails/4.jpg)
E vamos usar o...
Notepad++
Pode ser baixado no seguinte link: http://notepad-plus-plus.org/download/
Pode ser usado para muitas linguagens diferentes;
Possui IntelliSense;
É fácil de usar;
![Page 5: Internet I - Aula 03 - O Maravilhoso Mundo do HTML](https://reader031.fdocumentos.com/reader031/viewer/2022020721/55abe7261a28abba678b45e1/html5/thumbnails/5.jpg)
Como funciona o HTML?
O HTML funciona na base de tags que são colocadas no código e que
representam algum tipo de marcação diferente. Ex:
![Page 6: Internet I - Aula 03 - O Maravilhoso Mundo do HTML](https://reader031.fdocumentos.com/reader031/viewer/2022020721/55abe7261a28abba678b45e1/html5/thumbnails/6.jpg)
Identação
É extremamente importante que o espaçamento
(identação) seja trabalhado sempre, todo o
código deve estar identado da forma correta e
que seja de fácil manutenção futura;
Quanto melhor identado o código, mais fácil para
você e para os outros entenderem ele.
![Page 7: Internet I - Aula 03 - O Maravilhoso Mundo do HTML](https://reader031.fdocumentos.com/reader031/viewer/2022020721/55abe7261a28abba678b45e1/html5/thumbnails/7.jpg)
Seções
Páginas HTML são compostas por seções diferentes, cada seção é
focada em um tipo de conteúdo diferente;
<head>
Cabeçalho: tudo que vai aqui são elementos que fornecem informações
sobre a página, como o titulo da página;
<body>
Corpo: aqui é colocado tudo que vai aparecer na página, como textos,
imagens, tabelas, etc.
![Page 8: Internet I - Aula 03 - O Maravilhoso Mundo do HTML](https://reader031.fdocumentos.com/reader031/viewer/2022020721/55abe7261a28abba678b45e1/html5/thumbnails/8.jpg)
Tags <meta>
Sites de busca como o Google e o Bing usam as tags
<meta> para priorizar as buscas nos sites;
Para aprimorar sua visibilidade basta colocar “metas” na
sua página, sempre na seção <head>
![Page 9: Internet I - Aula 03 - O Maravilhoso Mundo do HTML](https://reader031.fdocumentos.com/reader031/viewer/2022020721/55abe7261a28abba678b45e1/html5/thumbnails/9.jpg)
Títulos - Descrição
Os títulos dentro de páginas HTML são marcados com tags
que diferenciam o tamanho da fonte a ser aplicada;
As tags títulos são: <h1> <h2> <h3> <h4> <h5> <h6>
Os títulos devem ser priorizados por ordem de
importância, como no exemplo dá próxima página...
![Page 10: Internet I - Aula 03 - O Maravilhoso Mundo do HTML](https://reader031.fdocumentos.com/reader031/viewer/2022020721/55abe7261a28abba678b45e1/html5/thumbnails/10.jpg)
Títulos - Exemplos
![Page 11: Internet I - Aula 03 - O Maravilhoso Mundo do HTML](https://reader031.fdocumentos.com/reader031/viewer/2022020721/55abe7261a28abba678b45e1/html5/thumbnails/11.jpg)
Textos
Textos podem ser escritos usando a tag <p> que significa páragrafo;
Pode-se adicionar quebra de linha usando a tag <br>
Também é possível usar a tag <hr> para adicionar uma linha na página;
![Page 12: Internet I - Aula 03 - O Maravilhoso Mundo do HTML](https://reader031.fdocumentos.com/reader031/viewer/2022020721/55abe7261a28abba678b45e1/html5/thumbnails/12.jpg)
Imagens
É possível adicionar imagens na página HTML, podemos fazer isso usando a tag
<img>, também podemos adicionar informações a essa imagem usando
atributos como “src” e “alt”;
Também é possível mudar o tamanho da imagem
usando os atributos “width” e “height”;
![Page 13: Internet I - Aula 03 - O Maravilhoso Mundo do HTML](https://reader031.fdocumentos.com/reader031/viewer/2022020721/55abe7261a28abba678b45e1/html5/thumbnails/13.jpg)
Alguém não tem dúvidas?
![Page 14: Internet I - Aula 03 - O Maravilhoso Mundo do HTML](https://reader031.fdocumentos.com/reader031/viewer/2022020721/55abe7261a28abba678b45e1/html5/thumbnails/14.jpg)
Exercícios
1) Construa uma página HTML utilizando tudo que foi
mostrado em aula para cada item a seguir:
Banda favorita;
Uma série de tv;
Uma página pessoal;
PS: Sim, é para HOJE!
![Page 15: Internet I - Aula 03 - O Maravilhoso Mundo do HTML](https://reader031.fdocumentos.com/reader031/viewer/2022020721/55abe7261a28abba678b45e1/html5/thumbnails/15.jpg)
Lista de Tags HTML:
<head> - cabeçalho, com todas as informações da página;
<meta> - mostra informações sobre a página;
<title> - contem o título da página;
<body> - corpo, com todo conteúdo da página;
<h1> - define tamanhos de 1 a 5 para títulos;
<p> - define paragrafo na página;
<br> - quebra de linha;
<hr> - insere uma linha na página;
<img> - tag para imagens com os seguintes atributos:
src – alt – width – height;