Internet I - Aula 03 - O Maravilhoso Mundo do HTML

Internet I
O Maravilhoso Mundo do HTML
Prof. Manoel Afonso

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;

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);

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;

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:

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.

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.

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>

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...

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;

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”;

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!

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;

Internet I - Aula 03 - O Maravilhoso Mundo do HTML

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Internet I - Aula 03 - O Maravilhoso Mundo do HTML

Semelhante a Internet I - Aula 03 - O Maravilhoso Mundo do HTML (20)

Mais de Manoel Afonso

Mais de Manoel Afonso (17)

Internet I - Aula 03 - O Maravilhoso Mundo do HTML