Programação III
UNIDADE 1 – HTML Básico
Prof. Toni Montenegro
HTML
• HyperText Markup Language
◦ Hyper - Hiper
◦ Text - Texto
◦ Markup - Marcação
◦ Language – Linguagem
• Cria um texto. Ao executá-lo em um
navegador transforma-se em uma
marcação de página
XHTML
• eXtensible HyperText Markup Language
• Maneira mais estruturada de escrever HTML.
• Baseada em XML
• Padronização W3C para criação de
páginas
Tags
• São comandos que a linguagem HTML utiliza
• para informar ao navegador como deve ser
• apresentado o website.
– Todas as tags têm o mesmo formato:
começam com um sinal de menor "<" e acabam com um sinal de maior ">".
• Genericamente falando, existem dois tipos de
tags - tags de abertura: <comando> e tags de
fechamento: </comando>.
Tags
• Mas, toda regra tem sua exceção.
• No HTML, a exceção é que para algumas tags,
a abertura e o fechamento se dá na mesma tag.
• Elas contêm comandos que não necessitam de um conteúdo para serem processados
• Ex.: um salto de linha é conseguido com a tag
<br />.
Exemplo - Tags
• A tag <h1> informa ao navegador que se trata de um cabeçalho (título).
• Todo o conteúdo que estiver entre <h1> e
</h1> é mostrado em tamanho maior.
• significando o nível de importância do texto.
• As tags <h1>, <h2>, <h3>, <h4>, <h5>
e <h6> informam ao navegador que se
trata de um cabeçalho ( h vem de "heading"
– cabeçalho )
Exemplo - Tags
• Sendo <h1>, o cabeçalho de
primeiro nível (maior) e <h6> o cabeçalho de sexto nível (menor).
– <h1>Este é um título</h1>
– <h2>Este é um sub título</h2>
Tags – Case Sensitive?
• As tags devem ser escritas com letras maiúsculas ou minúsculas?
• Em HTML, tanto faz. Se padroniza o uso de minúsculas.
• Em XHTML, as tags devem ser
escritas em letras minúsculas.
O que precisa para criar e visualizar um site?
• Criar
◦ Um editor de texto.
◦ Iniciar o arquivo com o tag <html>
◦ Finalizar o arquivo com o tag
</html>
• Visualizar
◦ Um navegador web.
◦ Arquivos com extensão .htm ou
.html
Estrutura de um arquivo
HTML
Formatação de documentos
• Editor de texto simples que grave os arquivos em formato texto puro
– Bloco de notas, WordPad, Notepad++, Vim,...
• As páginas web contêm marcadores (tags) especiais para determinar o papel de cada elemento dentro do texto
Ex.: <title> Programação 3</title>
Aparência
• HTML não foi criada para controlar a aparência dos documentos
• As tags apenas informam ao navegador o que são os elementos que estão na página
• O navegador é responsável pela formatação do documento.
• Cada navegador mostra a página de um modo diferente.
◦ Ex.: Firefox/Chrome X Internet Explorer
Características da Linguagem HTML
• Formatação de documentos
– Tabelas, textos, linhas, links ...
• Organização de listas
• Capacidade de incluir hipertexto em documentos web
• Capacidade de incluir imagens
Comentário em HTML
<html>
<head>
<title> Curso de HTML </title>
</head>
<body>
<!– isto é um comentário -->
</body>
</html>
Títulos
• 6 níveis de título no corpo do texto
– <h1> até <h6>
• EX:
<h1>Título 1</h1>
<h2>Título 1</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>
Parágrafos
• A tag <p> indica o início de um novo parágrafo e </p> indica o final de
parágrafo.
• Se a tag <p> for colocado antes de um título (ex. <h2>) a marca de
parágrafo é ignorada
• O próprio título se encarrega de
colocar o espaço necessário entre ele
e o próximo parágrafo
Atributos de Alinhamento
• Padrão é à esquerda
• Para mudar o alinhamento, utiliza-se o atributo ALIGN dentro dos tags que marcam os títulos e os parágrafos
• Valores: left|center|right|justify
• Ex.:
<h1 align=“center”> Título Central
</h1>
<p align=“center”> Parágrafo central
</p>
Exercício 1
» Exercicio01.html
• Usando um editor de texto crie uma página com o título do cabeçalho “ Programação 3” e o título do corpo (nível 1) “Primeiro
Exercício”
• Adicione ao corpo da página o seguinte texto:
Bem-vindo ao mundo do HTML. Este é um simples documento HTML. Este é o primeiro parágrafo.
Este é o segundo parágrafo.
Linhas
• As quebras de linhas são feitas
através da tag <br />
Listas
• O início de uma lista é indicado com
• <ul> e o final com </ul>
– Essa tag descreve listas não-ordenadas
• Os tags <ol> e </ol> descrevem listas ordenadas
• O início de cada item é indicado com
<li>
• Várias listas podem ser aninhadas
Atributos para listas
• Muda o formato do marcador da lista
• O seu valor pode ser disc, circle ou square (disco, círculo ou quadrado)
• Ex.:
<ul type="square">
<li>Elemento da lista</li>
</ul>
Exemplo
• Lista de compras a fazer:
<ul>
<li>Uma dúzia de ovos</li>
<li>Um pacote de açúcar</li>
<li>Um pacote de farinha</li>
</ul>
Exercício 2
»listas.html
• Crie um novo documento de texto e adicione um novo título (nível 2) centralizado:
Listas numeradas e não numeradas
• Crie duas listas conforme descrito abaixo:
Esta é uma lista enumerada com TODOS os estados do Brasil:
1) Amapá 2) Acre 3) Alagoas ...
Esta é uma lista não enumerada com as disciplinas do curso Técnico em Informática:
• Matemática
• Programação II
• TCC
• Artes ...
Exercício 3
• Edite o exercício anterior adicionando um elemento de lista não ordenada contendo o nome da capital de cada estado.
Ex:
1) Amapá
• Macapá
2) Acre
• Rio Branco
3) Alagoas
• Maceió
Exercício 3 (cont)
• Nas disciplinas do curso, edite a lista e adicione o nome do professor como um outro elemento de lista não-ordenado. Mude o símbolo das disciplinas para quadrado e os nomes dos professores para círculo.
Ex:
Matemática
o Pedro André
Programação II
o Toni
TCC
o Lara
Artes
o Caroline
....
Estilos de caracteres
<b> Texto em negrito </b>
<i> Texto em itálico </i>
<s> Texto riscado </s>
<u> Texto sublinhado </u>
• As tags de estilo podem ser usados
umas sobre as outras, acumulando
seus efeitos
Exercício 4
• Adicione estilos na sua página
– Coloque o nome das disciplinas em negrito
–
