Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
HTML - Parte 1: Introdução e Estrutura Básica
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
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
HTML - Parte 1 DCC 121 - Laborato´rio de Programac¸a˜o Web Prof. Luiz Maur´ılio da Silva Maciel Departamento de Cieˆncia da Computac¸a˜o Instituto de Cieˆncias Exatas Universidade Federal de Juiz de Fora 25 de agosto de 2014 Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 1 / 28 Roteiro 1 Introduc¸a˜o 2 Tags HTML 3 Estrutura ba´sica de um documento 4 Primeiras tags 5 Tags de formatac¸a˜o de texto 6 Listas 7 Exerc´ıcios Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 2 / 28 Introduc¸a˜o O que e´ HTML? E´ a linguagem utilizada pelas pa´ginas web Acroˆnimo de HyperText Markup Language (Linguagem de Marcac¸a˜o de Hipertexto) Navegador e´ um interpretador de HTML Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 3 / 28 Introduc¸a˜o Editores HTML Os documentos em HTML podem ser editados em TextEdit, bloco de notas, WordPad, ou qualquer editor de texto simples Recomendado: Linux: Gedit (ja´ vem instalado) Windows: Notepad++ (http://notepad-plus-plus.org/) Os documentos devem ser salvos com a extensao .htm ou .html Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 4 / 28 Tags HTML Tags HTML Tags sa˜o ro´tulos usados para informar ao navegador como deve ser apresentada a pa´gina web Todas as tags teˆm o mesmo formato: comec¸am com um sinal de menor ”<”e terminam com um sinal de maior ”>” Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 5 / 28 Tags HTML Tipos de tags Existem dois tipos de tags HTML Tags de abertura: <comando> Tags de fechamento: </comando> A diferenc¸a entre elas e´ que na tag de fechamento existe uma barra ”/” Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 6 / 28 Tags HTML Tipos de tags Todo o texto que estiver contido entre uma tag de abertura e a respectiva tag de fechamento sera´ interpretado pelo navegador segundo o comando contido na tag Existem excec¸o˜es: tags em que a abertura e o fechamento se da´ na mesma tag Conte´m comandos que na˜o precisam de conteu´do para serem processados Exemplo: <br/> Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 7 / 28 Tags HTML Case sensitive? Para os navegadores de internet e´ indiferente se voceˆ usa letras maiu´sculas, minu´sculas ou mesmo uma mistura delas Dessa forma <COMANDO>, <comando> ou <COmaNdO> sa˜o interpretados da mesma maneira No entanto, recomenda-se o uso de letras minu´sculas Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 8 / 28 Estrutura ba´sica de um documento Estrutura ba´sica de um documento Todo documento HTML e´ composto por uma estrutura definida pelas seguintes tags: <html> delimita o texto em linguagem html <head> delimita as informac¸o˜es sobre o documento (cabec¸alho) <body> delimita o conteu´do do texto propriamente dito Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 9 / 28 Estrutura ba´sica de um documento Estrutura ba´sica de um documento <html> <head> </ head> <body> </ body> </ html> Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 10 / 28 Estrutura ba´sica de um documento A declarac¸a˜o <!DOCTYPE> Especifica a versa˜o do HTML que esta´ sendo usada A declarac¸a˜o <!DOCTYPE> deve ser a primeira coisa do documento HTML Na˜o e´ uma tag HTML Em HTML5 tem a seguinte forma <!DOCTYPE html> Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 11 / 28 Estrutura ba´sica de um documento Atribuindo t´ıtulo a` pa´gina Para atribuir t´ıtulo a nossa pa´gina usamos a tag <title> O texto entre as tags <title> e </title> sera´ o t´ıtulo exibido na aba e na barra do navegador A tag <title> deve ser colocada entre as tags <head> e </head> Exemplo: <title> Nossa primeira pa´gina Web </title> Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 12 / 28 Estrutura ba´sica de um documento Atributos de tag Atributos sa˜o informac¸o˜es adicionais que acrescentamos a`s tags que modificam a maneira como o navegador as interpreta Atributos sa˜o escritos dentro da tag, seguidos por um sinal de igual e depois entre aspas sa˜o declaradas as informac¸o˜es do atributo: <comando atributo1=“valor1” atributo2=“valor2”> Como exemplo temos o atributo lang que especifica o idioma do conteu´do do elemento Exemplo: <html lang=“pt-br”> (especifica que a pa´gina foi escrita em portugueˆs do Brasil) Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 13 / 28 Estrutura ba´sica de um documento A tag <meta> A tag <meta> insere informac¸o˜es sobre o pro´prio documento html Deve ser colocada entre as tags <head> e </head> Na˜o sa˜o exibidos pela pa´gina mas sa˜o interpretados pelo navegador Sa˜o tipicamente utilizados para especificar descric¸a˜o da pa´gina, palavras-chave, autor etc Normalmente conte´m os atributos name e content Exemplo: <meta name=“author” content=“Luiz Maur´ılio”> Uma exemplo importante que utilizaremos e´ a tag <meta> com o atributo charset que define a codificac¸a˜o de carateres utilizada <meta charset=“UTF-8”> E´ importante salvarmos o arquivo .html na codificac¸a˜o especificada nessa tag para evitarmos problemas de acentuac¸a˜o Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 14 / 28 Estrutura ba´sica de um documento Comenta´rios em HTML Comenta´rios sa˜o trechos que escrevemos e que na˜o sera˜o interpretados pelo navegador Por exemplo, podem ser usados para passar informac¸o˜es para quem for ler o co´digo da pa´gina Os comenta´rios em HTML sa˜o feitos atrave´s da tag <!−− −−> Exemplo: <!−− Esse trecho e´ um comenta´rio −−> Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 15 / 28 Primeiras tags Cabec¸alhos No HTML existem seis n´ıveis de cabec¸alhos. <h1> e´ o mais importante, <h2> e´ um pouco menos importante, e assim por diante ate´ o <h6> Exemplo: <h1> Aprendendo HTML </h1> <h2> Testando nossas primeiras tags </h2> Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 16 / 28 Primeiras tags Definindo para´grafos A tag <p> e´ utilizada para separar para´grafos em HTML Exemplo: <p> Nosso primeiro para´grafo. </p> <p> Aqui outro para´grafo. </p> Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 17 / 28 Primeiras tags Quebrando linhas e separando conteu´do A tag <br/> e´ utilizada para quebrarmos uma linha no texto O navegador automaticamente quebra linhas no texto ao chegar ao final. A tag <br/> e´ usada para quebrar uma linha em um local espec´ıfico A tag <hr/> e´ utilizada para separar conteu´do dentro da pa´gina (por uma linha horizontal) Exemplo: <p> Estamos escrevendo nosso para´grafo normalmente. De repente, <br/> resolvemos quebrar uma linha. </p> <hr/> Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 18 / 28 Tags de formatac¸a˜o de texto Tags de formatac¸a˜o de texto A tag <i> coloca o texto em ita´lico A tag <b> e a tag <strong> deixam o texto em negrito Exemplo: <i>Escrevendo em ita´lico.</i> <br/> <b>Escrevendo em negrito.</b> <br/> <i><b>Agora em negrito e ita´lico.</b></i> Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 19 / 28 Tags de formatac¸a˜o de texto Tags de formatac¸a˜o de texto A tag <sub> e´ utilizada para escrever texto em subscrito A tag <sup> e´ utilizada para escrever texto em sobrescrito Exemplo: Podemos escrever a fo´rmula da a´gua: H<sub>2</sub>O <br/> Ou poteˆncias: 2<sup>3</sup>=8 Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de2014 20 / 28 Tags de formatac¸a˜o de texto Tags de formatac¸a˜o de texto A tag <u> e´ utilizada para sublinhar o texto A tag <s> e´ utilizada para riscar o texto Exemplo: Podemos ainda <u>sublinhar</u> ou <s>riscar</s> nosso texto. Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 21 / 28 Listas Lista na˜o ordenada A tag <ul> e´ utilizada para criar uma lista na˜o ordenada Cada elemento da lista e´ iniciado com uma tag <li> Exemplo: Esta e´ uma lista na˜o ordenada: <ul> <li> Um item </li> <li> Outro item </li> <li> Mais um item </li> </ul> Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 22 / 28 Listas Lista ordenada A tag <ol> e´ utilizada para criar uma lista ordenada Cada elemento da lista e´ iniciado com uma tag <li> Exemplo: Esta e´ uma lista ordenada: <ol> <li> Primeiro item </li> <li> Segundo item </li> <li> Terceiro item </li> </ol> Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 23 / 28 Listas Atributos de lista ordenada O atributo type e´ utilizado para especificar o tipo de marcador da lista. Pode ter um dos seguintes valores: “1”: numerac¸a˜o ara´bica “I”: numerac¸a˜o romana “i”: numerac¸a˜o romana com letras minu´sculas “A”: ordenac¸a˜o com letras maiu´sculas “a”: ordenac¸a˜o com letras minu´sculas O atributo start especifica o valor inicial da ordem dos elementos Exemplo: <ol type=“i” start=“3”> <li> Primeiro item </li> <li> Segundo item </li> </ol> Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 24 / 28 Listas Lista de descric¸a˜o A tag <dl> e´ utilizada para criar uma lista de descric¸a˜o Cada termo a ser descrito e´ iniciado pela tag <dt> A descric¸a˜o de cada termo e´ iniciada pela tag <dd> Exemplo: Esta e´ uma lista de descric¸a˜o: <dl> <dt> Um termo </dt> <dd> descric¸a˜o do termo </dd> <dt> Outro termo </dt> <dd> descric¸a˜o do termo </dd> </dl> Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 25 / 28 Exerc´ıcios Exerc´ıcio 1 Reproduza a seguinte pa´gina Web: Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 26 / 28 Exerc´ıcios Exerc´ıcio 2 Escolha um tema do seu interesse e elabore uma pa´gina Web simples utilizando o ma´ximo poss´ıvel (de prefereˆncia todas) das tags HTML vistas na aula de hoje Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 27 / 28 Exerc´ıcios Instruc¸o˜es para o envio dos exerc´ıcios Crie um arquivo compactado (.zip, .rar ou .7z) contendo todos os arquivos dos exerc´ıcios Nomeie seu arquivo da seguinte forma: DCC121 Tarefa1 NumeroDeMatricula NomeSobrenome.zip Exemplo: DCC121 Tarefa1 200822017 LuizMaciel.zip Envie para o email do professor (luiz.maurilio@ice.ufjf.br) com o seguinte assunto: DCC121 Tarefa 1 Prazo para envio: ate´ as 23:59 de 31/08/2014 (domingo) Luiz Maur´ılio Maciel (DCC-ICE-UFJF) HTML - Parte 1 25 de agosto de 2014 28 / 28 Introdução Tags HTML Estrutura básica de um documento Primeiras tags Tags de formatação de texto Listas Exercícios
Continue navegando
Materiais relacionados
5 pág.
3 pág.
Perguntas relacionadas
Compartilhar