A maior rede de estudos do Brasil

Grátis
22 pág.
Roteiro_01_-_Criando_minha_primeira_pagina_em_HTML

Pré-visualização | Página 1 de 1

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-