Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1
QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome e de sua família (pais, irmãos) O que você gosta de fazer O que você não gosta de fazer Música, filme ou comida favoritos 2
Revisão: Aula de Hoje Conceito de Tags(marcações); Estrutura básica de um documento HTML (body, head, title e body); Como salvar arquivo.html ou.htm Negrito, itálico, sublinhado, riscado; Parágrafos; 3
Aula de Hoje DOCTYPE Linha Horizontal Listas Listas ordenadas; Listas não ordenadas; Listas de definição. Imagens Sintaxe; Atributos obrigatórios; Mapa de imagens. Links Conceito, sintaxe e tipos. 4
RELEMBRANDO CONCEITOS HTML: HyperText Markup Language Tradução: Linguagem de Marcação de Hipertexto Usado para produzir páginas na Web Tag: uma marcação, um comando de formatação Escrito usando <> Fechamento </> 5
Estrutura básica de um documento HTML <html> <head> <title> Meu primeiro exemplo </title> </head> <body> Olá! Este é um <b>exemplo de código HTML.</b> </body> </html> 6
TAGS FUNDAMENTAIS <!DOCTYPE> O DOCTYPE(abreviação de Document Type Definition Definição de tipo de documento) serve para definir de que forma os navegadores vão se comportar ao ler seu código. Essa declaração deve aparecer sempre no início de cada documento que você criar (antes mesmo da tag <html>). Exemplo da declaração: <!DOCTYPE html> 7
<html> e </html> Usadas em toda página WEB, a primeira e a última TAGs a serem inseridas num documento HTML. Entre elas fica escrita toda a página. <head> e </head> TAGS FUNDAMENTAIS head (cabeça) é uma TAG de cabeçalho. Nela são inseridas as primeiras configurações da página a serem utilizadas durante a interpretação feita pelo navegador. Algumas dessas configurações são as folhas de estilo, CSS (Cascading Style Sheets), o título da página e scripts de execução; <title> e </title> title (título) é a TAG que define o título da página e fica inserida dentro de head. 6
<body> e </body> TAGS FUNDAMENTAIS body (corpo) é a TAG onde ficam escritos todos os elementos visíveis da página: textos, links, imagens, formulários e etc. Principais atributos de <body> bgcolor conjunto de cores: {blue, red, yellow, green,...}; utilizado para definir a cor de fundo; as cores também podem ser representadas com codificação hexadecimal; o número de cores distintas disponíveis utilizando o sistema RGB (Reb-Green-Blue) de cores (sistema mais simples) supera 16mi. background seleciona uma imagem para plano de fundo; deve ser inserido o endereço da imagem. 7
Como salvar arquivo.html ou.htm Criando um documento HTML Menu Iniciar > Programas > Acessórios > Bloco de notas; No Bloco de notas: Arquivo > Salvar como...; Alterar o tipo de arquivo para: Todos os arquivos; Salvar o arquivo com extensão.html ou.htm; 2
FORMATAÇÃO DE TEXTOS Formatações gerais <b> e </b> <i> e </i> <u> e </u> <s> e </s> <font> e </font> negrito; itálico; sublinhado; riscado; define propriedades da fonte como, tamanho, cor, fundo. <center> e </center> -> Centraliza um bloco de texto; 16
FORMATAÇÃO DE TEXTOS Principais atributos de <font> size color conjunto de tamanhos: {1,..., 7}, sendo 1 o menor tamanho; utilizado para definir o tamanho do texto; mesmo conjunto de cores do atributo bgcolor; utilizado para definir a cor da letra. face contém o nome do tipo de letra <font face="verdana" >Exemplo 1 ensinado na sala de aula </font> 16
FORMATAÇÃO DE TEXTOS Quebra de linha e parágrafo <br> quebra de linha; <p> e </p> parágrafo. Principal atributo de <p> align conjunto de valores: {center, left, right, justify}; utilizado para alinhar um texto; caso não seja definido, o valor padrão é left. 10
Exemplo 2 - página 12
LINHA HORIZONTAL <hr> insere uma linha horizontal, como a apresentada abaixo: essa linha tem diversos atributos, oferecendo resultados diversos. <hr size=7> insere uma linha de largura 7 (pixels): <hrwidth= 50%> insere uma linha que ocupa 50% do espaço horizontal disponível: <hrwidth=30% align=rightnoshade> insere uma linha de comprimento 30% (do espaço horizontal disponível), alinhada à direita. 15
LISTAS Listas Não Ordenadas Uma lista não ordenada é uma lista de itens. As listas de itens são marcadas com bullets (tipicamente pequenos círculos pretos). Uma lista não ordenada começa com a tag <ul>. Cada item da lista começa com a tag <li>. EXEMPLO: <ul> <li>café</li> <li>leite</li> </ul> Aqui está como aparece em um navegador: Café Leite 16
Listas ordenadas Uma lista ordenada é também uma lista de itens. As listas de itens são marcadas com números. Uma lista ordenada começa com a tag <ol>. Cada item da lista começa com a tag <li>. <ol> <li>café</li> <li>leite</li> </ol> Aqui está como aparece em um navagador: 1. Café 2. Leite 17
Lista de Definições Uma lista de definiçõesnãoé uma lista de itens. Esta é uma lista de termos e explicações dos termos. Uma lista de definições começa com a tag <dl>. Cada termo da lista de definições começa com a tag<dt>. Cada definição da lista de definições começa com a tag <dd>. <dl> <dt>café</dt> <dd>bebida quente preta</dd> <dt>leite</dt> <dd>bebida fria branca</dd> </dl> 18
Aqui está como aparece em um navegador: Café Bebida quente preta Leite Bebida fria branca 19
RESUMINDO... 20
IMAGENS Atag<img>é utilizada para adicionar imagens ao documento HTML. Ela não possui tag de fechamento. Um dos principais atributos datag <img>, no que diz respeito à acessibilidade, é o atributoalt, para otexto alternativo. Seu conteúdo deve refletir o que está apresentado na imagem ou na ação associada à imagem, ou seja, ser um texto equivalente ao conteúdo da imagem. Exemplo: <img src="livros.gif" width="15" height="10" alt="livros"> 21
HIPERLINK OU LINK O hiperlinkou, simplesmente, link: toda vez que se clica em um link aparece outra informação na tela Linkar é uma palavra inglesa que quer dizer literalmente, elo, ligação. Criar um linkem um texto significaestabelecer uma ligação com outra página, outro texto, que o leitor pode abrir clicando numa palavra, grupo de palavras ou em uma imagem. Exemplos: <a href="http://www.starmedia.com">clique aqui </a> <a href="pagina.html">este é um link para uma página no seu site </a> 22
EXERCÍCIO PRÁTICO 23