Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
O que é HTML ?
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
1 PROFESSORA MERRIS MOZER Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias TÓPICOS EM DESENVOLVIMENTO DE SISTEMAS Aula 1 HTML INTRODUÇÃO O que é HTML ? INTRODUÇÃO HTML ou Hypertext Markup Language Linguagem de formatação de textos Pode ser escrito em qualquer editor de texto. É uma linguagem de marcação de hipertexto e é usada para criar sites, e pode conter além de textos, imagens, animações vídeos e sons. TAG Como mencionado anteriormente a base de um documento HTML é um TAG. “<“ “>” Exemplo: 2 TAG ‐ HTML O TAG principal do documento HTML é: <HTML> Abrindo TAG: <HTML> Fechando TAG: </HTML> TAG – HEAD e BODY Existem mais dois TAGs importantes que são: TAG <head> para cria o cabeçalho TAG <body> para criar o corpo do documento. COMO CRIAR UM DOC HTML? Será utilizado o Bloco de Notas (NotePad), encontrado no Windows, para começarmos este estudo sobre HTML, assim possibilitará de uma forma bem simples o entendimento dos comandos básicos. COMO CRIAR UM DOC HTML? ESTRUTURA BÁSICA DE UM DOCUMENTO HTML <HTML> <head> </head> <body> </body> </HTML> RELEMBRANDO 3 CRIANDO UM DOCUMENTO HTML CABEÇALHO O TAG usado é denominado como <h1> conhecido como header1. Pode‐se utilizar h1, h2, h3, h4, h5, h6. A numeração que acompanha a letra "h" indica o tamanho das fontes, a medida que o número cresce o tamanho das letras diminuem. Estes TAGs ficam definidos da seguinte forma: <h1></h1> PARÁGRAFO Para que o documento tenha quebra de linha ao final do parágrafo, ou seja, que sejam separados utiliza‐se o TAG <p></p>. QUEBRA DE LINHA Quando necessitar somente de uma quebra de linha sem dar espaço entre as linhas, utilizar o TAG <br>, por exemplo para demonstrar tópicos. O TAG <br> não requer seu fechamento como as demais. ATIVIDADE EM SALA CRIE O DOCUMENTO ABAIXO MELHORANDO A APARÊNCIA DO DOC Para colocar a palavra em negrito "bold" usamos o TAG <b></b> desta forma tudo que estiver entre o TAG <b></b> ficará em negrito. Quando desejar destacar um determinado texto e formatá‐lo para itálico, utiliza‐se o TAG <i></i>. Exemplo: 4 MELHORANDO A APARÊNCIA DO DOC <b> negrito </b> <i> itálico </i> <u> sublinhado </u> <sup> sobrescrito </sup> <sub> subscrito </sub> <big> grande </big> <small> pequeno </small> <blink> piscar </blink> ‐ piscar (firefox) <tt> ... </tt> ‐ letras com o mesmo espaço (largura) ATIVIDADE EM SALA! CRIE O DOCUMENTO ABAIXO Fonte: Disponível em: <http://www.unoparead.com.br/ noticias/palestra‐empreendedorismo‐com‐ricardo‐bellino> ALINHAMENTO Todo cabeçalho/parágrafo poderá ser alinhado à: Esquerda Direita ou Centralizado Exemplo DE: <p>.................................</p> PARA:<p align="center">.........</p> <p align="right">……….</p> <p align="left“>…………</p> ATIVIDADE EM SALA!!! ALINHAR CENTRALIZADO O CABEÇALHO DEFININDO CORES Trabalhar com cores é uma tarefa muito fácil com HTML. Pode ser utilizado o nome das cores ou sua forma hexadecimal. Definindo cores para: plano de fundo fontes COR ‐ PLANO DE FUNDO Para alterar a cor de fundo do documento será configurado o parâmetro background no TAG "body“ Exemplo: DE: <body>............................</body> PARA: <body bgcolor=“red”>.........</body> 5 TAG BODY ‐ COR DA FONTE Para alterar a cor da fonte de todo o TAG body utiliza‐se o parâmetro “text” Exemplo: text = “white” <body bgcolor="silver“ text="white" COR DA FONTE TAG para alterar a cor das letras do texto é a “<font></font>”. Esta TAG é uma das mais importantes para a construção do documento HTML, pois com ela é possível formatar em uma única estrutura o tamanho da letra, o tipo da letra e a cor que se deseja atribuir para a fonte ESTRUTURA DA TAG FONT <font> Size = n Face = nome da fonte Color = cor </font> IMAGEM Comando básico para inclusão de imagens: <p><img src="imagens/logo.jpg"></p> Alinhando a imagem: <p align="center"><img src="imagens/logo.jpg"></p> <p align=“right" ><img src="imagens/logo.jpg"></p> ABSOLUTO OU RELATIVO? Valor ABSOLUTO: <HTML> <head> <title>Tabelas</title> </head> <body> <img src="imagens/ead1.jpg" width="200"> </body> </HTML> 6 ABSOLUTO OU RELATIVO? Valor RELATIVO: <HTML> <head> <title>Tabelas</title> </head> <body> <img src="imagens/ead1.jpg" width="20%"> </body> </HTML> © 2014 – Todos os direitos reservados. Uso exclusivo no Sistema de Ensino Presencial Conectado.
Materiais relacionados
5 pág.
5 pág.
Perguntas relacionadas
Compartilhar