Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Roteiro 01 - Criando minha primeira página em 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
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
DES. WEB – (HTML5, CSS, JS E) - ARA0062-1001 Roteiro 01 - Criando minha primeira página em HTML Introdução à Programação AULA 01: Introdução à Lógica de ProgramaçãoDesv. WEB ( HTML, CSS e JS) Proposta • Implementar uma página HTML com estrutura simples. • Utilizar o editor SUBLIME TEXT 3 Introdução à Programação AULA 01: Introdução à Lógica de ProgramaçãoDesv. WEB ( HTML, CSS e JS) Interface inicial do Editor Área de trabalho ou codificação Introdução à Programação AULA 01: Introdução à Lógica de ProgramaçãoDesv. WEB ( HTML, CSS e JS) Passo 1– Criando um Arquivo Html Introdução à Programação AULA 01: Introdução à Lógica de ProgramaçãoDesv. WEB ( HTML, CSS e JS) Passo 2– Salvando o arquivo com extensão Html SALVE O ARQUIVO EM UM DIRETÓRIO COM O NOME INDEX.HTML Introdução à Programação AULA 01: Introdução à Lógica de ProgramaçãoDesv. WEB ( HTML, CSS e JS) Passo 3– digite a tag <html> e pressione ENTER A FUNÇÃO AUTOCOMPLETA DO EDITOR INCLUI A ESTRUTURA BÁSICA QUE A PÁGINA IRÁ PRECISAR! Introdução à Programação AULA 01: Introdução à Lógica de ProgramaçãoDesv. WEB ( HTML, CSS e JS) Passo 4– Definindo o titulo da minha página na barra superior do Navegador DIGITE “MINHA PRIMEIRA PÁGINA ” ENTRE AS TAGs <TITLE>! Introdução à Programação AULA 01: Introdução à Lógica de ProgramaçãoDesv. WEB ( HTML, CSS e JS) Passo 5– Executando minha página HTML Resultado da página com o titulo atribuído no código! Introdução à Programação AULA 01: Introdução à Lógica de ProgramaçãoDesv. WEB ( HTML, CSS e JS) Passo 6– Colocando a acentuação do texto Acrescente ao código as Linhas 3 e 5. Feito isso salve o arquivo e volte a executar no Navegador. Introdução à Programação AULA 01: Introdução à Lógica de ProgramaçãoDesv. WEB ( HTML, CSS e JS) Passo 7– adicionando um titulo para a página Acrescente um conteúdo a página WEB com a tag <h1>. Feito isso salve o arquivo e volte a executar no Navegador. Introdução à Programação AULA 01: Introdução à Lógica de ProgramaçãoDesv. WEB ( HTML, CSS e JS) Passo 8– Adicionando uma imagem na página Acrescente uma tag <img com o nome da imagem e as propriedades de largura e altura. Feito isso executar novamente no Navegador. Introdução à Programação AULA 01: Introdução à Lógica de ProgramaçãoDesv. WEB ( HTML, CSS e JS) Passo 9– Adicionando conteúdo de texto na página Acrescente uma tag <p></p> de parágrafo, entre as duas tags adicione o texto. Feito isso salve e executar novamente no Navegador. Introdução à Programação AULA 01: Introdução à Lógica de ProgramaçãoDesv. WEB ( HTML, CSS e JS) Passo 10– Adicionando na página o titulo do texto Acrescente uma tag <h1></h1> entre as duas tags adicione o titulo do texto. Feito isso salve e executar novamente no Navegador. Introdução à Programação AULA 01: Introdução à Lógica de ProgramaçãoDesv. WEB ( HTML, CSS e JS) Passo 11– Centralizando um texto na página Para centralizar um texto na página, você deverá trabalhar com as tags <style> e div para realizar a centralização. Veja o código a seguir. Introdução à Programação AULA 01: Introdução à Lógica de ProgramaçãoDesv. WEB ( HTML, CSS e JS) Passo 12– Centralizando o titulo da página Podemos repetir a mesma estrutura utilizada o slide anterior para centralizar o titulo da página. Introdução à Programação AULA 01: Introdução à Lógica de ProgramaçãoDesv. WEB ( HTML, CSS e JS) Passo 13– Centralizando a imagem da página Podemos acrescentar na mesma estrutura o código referente a figura. Salve o código e execute novamente no Navegador. Introdução à Programação AULA 01: Introdução à Lógica de ProgramaçãoDesv. WEB ( HTML, CSS e JS) Passo 14– Outra forma de Centralizar o texto na página Podemos também centralizar um texto utilizando a tag <center> Introdução à Programação AULA 01: Introdução à Lógica de ProgramaçãoDesv. WEB ( HTML, CSS e JS) Passo 15– Acrescente um nota de rotapé para a sua página (Todos os direitos autorais reservados) Passo 15– Acrescente um nota de rotapé Introdução à Programação AULA 01: Introdução à Lógica de ProgramaçãoDesv. WEB ( HTML, CSS e JS) Resultado final da página Introdução à Programação AULA 01: Introdução à Lógica de Programação Bibliografia Básica DESV. WEB - HTML5, CSS, JS E DEITEL, Paul J.; DEITEL, Harvey M. Ajax, Rich Internet Applications e desenvolvimento Web para programadores. São Paulo: Pearson, 2008. Disponível em: https://plataforma.bvirtual.com.br/Leitor/Publicacao/426/pdf PLOTZE, Rodrigo. Tecnologias WEB. Rio de Janeiro: SESES, 2015. Disponível em: http://repositorio.novatech.net.br/site/index.html#/objeto/detalhes/BF917AFA- 2335- 4BB8-A269-85491F228012 TERUEL, Evandro C. HTML 5 Guia Prático. 2ª Ed. São Paulo: Érica, 2014. Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788536519296/ Introdução à Programação AULA 01: Introdução à Lógica de Programação Bibliografia Complementar DESV. WEB - HTML5, CSS, JS E FLANAGAN, David. JavaScript: O Guia Definitivo. 6ª Ed. Porto Alegre: Bookman, 2014. Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788565837484/ FONSECA, Cleber C. Programação para Internet Rica. Rio de Janeiro: SESES, 2016. Disponível em: http://repositorio.novatech.net.br/site/index.html#/objeto/detalhes/846BB14A-57D1- 236- B334-17A19E0A77D6 HAROLD, Elliotte R. Refatorando HTML - Como Melhorar o Projeto de Aplicações Web Existentes. Porto Alegre: Bookman, 2010. Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788577806706/ MILETTO, Evandro M.; BERTAGNOLLI, Silvia C. Desenvolvimento de Software II: Introdução ao Desenvolvimento Web com HTML, CSS, JavaScript e PHP. Porto Alegre: Bookman, 2014. Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788582601969/ SOARES, Walace. PHP 5 - Conceitos, Programação e Integração com Banco de Dados. 7ª Ed. São Paulo: Érica, 2013. Disponível em: https://integrada.minhabiblioteca.com.br/#/books/9788536505633 http://repositorio.novatech.net.br/site/index.html#/objeto/detalhes/846BB14A-57D1-
Continue navegando
Perguntas relacionadas
Compartilhar