internet i - aula 03 - o maravilhoso mundo do html
TRANSCRIPT
Internet IO 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...
Títulos - Exemplos
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”;
Alguém não tem dúvidas?
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;