Desenvolvimento Web: HTML e CSS

Prévia do material em texto

Ambiente para 
Desenvolvimento Web 
Unidade 2
HTML e CSS
Diretor Executivo 
DAVID LIRA STEPHEN BARROS
Gerente Editorial 
CRISTIANE SILVEIRA CESAR DE OLIVEIRA
Projeto Gráfico 
TIAGO DA ROCHA
Autoria 
HENRIQUE SENA 
LEANDRO C. CARDOSO
AUTORIA
Henrique Sena 
Sou formado em Desenvolvimento de Software e em Sistemas para 
internet. Iniciei minha carreira profissional utilizando e desenvolvendo 
aplicações em plataformas open-source voltadas para educação a 
distância. Não demorou muito para ter minhas primeiras experiências 
como professor em cursos presenciais, atividade na qual fiquei muito 
satisfeito com os resultados obtidos. Sou analista de websites e consultor 
de EAD, com mais de 12 anos de carreira, administro sistemas educacionais 
para ensino a distância e sou professor de cursos técnicos presenciais. 
Passei por empresas como a UNINASSAU, Faculdade Joaquim Nabuco, 
Porto Digital, Ogilvy & Mather, Lunes Comunicação e Ricardo Alexandre 
Cursos On-line. Sou apaixonado pelo que faço e adoro transmitir minha 
experiência de vida àqueles que estão iniciando em suas profissões. 
Por isso fui convidado pela Editora Telesapiens a integrar seu elenco de 
autores independentes. Conte comigo!
Leandro C. Cardoso 
Possuo graduação em Comunicação Social com habilitação em 
Design Digital e mestrado em Tecnologias da Inteligência e Design Digital 
pela PUC-SP, com experiência em direção de arte e criação na área com 
mais de 20 anos. Passei por empresas como a Laureate International 
Universities – FMU, FIAM-FAAM, Universidade Anhembi Morumbi e o 
Centro Paula Souza (FATEC-ETEC). Na Laureate EAD atuei como analista 
de Desenvolvimento Pedagógico Sênior e como coordenador de Curso 
Técnico de Comunicação Visual no Centro Paula Souza. Fui revisor técnico 
e validador de Curso EAD para Clientes Laureate International Universities, 
DeVry Brasil, UNEF, FAESF, Faculdade Positivo, Uninter, Platos Soluções 
Educacionais S.A. (Kroton – Universidade Anhaguera). Sou autor de mais 
de 10 livros didáticos e um dos organizadores da Maratona de Criação 
e Design do Curso de Comunicação Visual da ETEC Albert Einstein. Sou 
apaixonado pelo que faço e adoro transmitir minha experiência de vida 
àqueles que estão iniciando em suas profissões. Por isso fui convidado 
pela Editora Telesapiens a integrar seu elenco de autores independentes. 
Estou muito feliz em poder ajudar você nesta fase de muito estudo e 
trabalho. Conte comigo!
ICONOGRÁFICOS
Olá. Esses ícones irão aparecer em sua trilha de aprendizagem toda vez 
que:
OBJETIVO:
para o início do 
desenvolvimento de 
uma nova compe-
tência;
DEFINIÇÃO:
houver necessidade 
de se apresentar um 
novo conceito;
NOTA:
quando forem 
necessários obser-
vações ou comple-
mentações para o 
seu conhecimento;
IMPORTANTE:
as observações 
escritas tiveram que 
ser priorizadas para 
você;
EXPLICANDO 
MELHOR: 
algo precisa ser 
melhor explicado ou 
detalhado;
VOCÊ SABIA?
curiosidades e 
indagações lúdicas 
sobre o tema em 
estudo, se forem 
necessárias;
SAIBA MAIS: 
textos, referências 
bibliográficas e links 
para aprofundamen-
to do seu conheci-
mento;
REFLITA:
se houver a neces-
sidade de chamar a 
atenção sobre algo 
a ser refletido ou dis-
cutido sobre;
ACESSE: 
se for preciso aces-
sar um ou mais sites 
para fazer download, 
assistir vídeos, ler 
textos, ouvir podcast;
RESUMINDO:
quando for preciso 
se fazer um resumo 
acumulativo das últi-
mas abordagens;
ATIVIDADES: 
quando alguma 
atividade de au-
toaprendizagem for 
aplicada;
TESTANDO:
quando o desen-
volvimento de uma 
competência for 
concluído e questões 
forem explicadas;
SUMÁRIO
Web Standards ............................................................................................. 12
O que são Web Standards? ...................................................................................................... 12
Vantagens dos Web Standards ............................................................................................. 15
HTML.................................................................................................................20
Sintaxe .................................................................................................................................................... 20
Estrutura de um Documento em HTML .........................................................................22
Editores HTML ..............................................................................................30
Introdução aos editores HTML ............................................................................................. 30
Editores HTML ...................................................................................................................................33
Cascading Style Sheets (CSS) ................................................................38
Conceitos de CSS .......................................................................................................................... 38
Sintaxe do CSS .................................................................................................................................. 41
9
UNIDADE
02
Ambiente para Desenvolvimento Web 
10
INTRODUÇÃO
Você sabia que é importante o conhecimento e a aplicação dos 
padrões de linguagens script para desenvolver projetos relacionados 
ao ambiente para desenvolvimento web? Isso mesmo. Também é 
importante saber a principal diferença entre programar para web e 
para quaisquer outros ambientes, como desktop e dispositivos móveis. 
Esses ambientes requerem certa preocupação quanto aos padrões 
aceitos pelos navegadores, nos quais a página que pode ser visualizada 
no browser da Microsoft (Internet Explorer ou Microsoft Edge), por 
exemplo, tem de servir para o Google Chrome, Mozilla Firefox e tantos 
outros quanto forem necessários. Isso garante a padronização e o 
correto uso dos scripts compatíveis com essas ferramentas. Estamos 
falando especificamente da linguagem HTML, CSS e uma série de 
padrões que devem ser conhecidos e respeitados de um modo mais 
abrangente, como Web Standards (ou padrões da web). Entendeu? Ao 
longo desta unidade letiva, você vai mergulhar neste universo!
Ambiente para Desenvolvimento Web 
11
OBJETIVOS
Olá. Seja muito bem-vindo à Unidade 2. Nosso objetivo é auxiliar 
você no desenvolvimento das seguintes competências profissionais até o 
término desta etapa de estudos:
1. Definir os principais conceitos relacionados a Web Standards, 
bem como suas principais funcionalidades, além de seus pontos 
positivos e negativos quanto à otimização do processo de criação 
de conteúdos para páginas HTML.
2. Identificar as diferenças entre linguagens de programação e 
linguagens script, criando as estruturas básicas de um projeto 
HTML e suas principais tags.
3. Definir os conceitos básicos relativos a editores HTML, bem como 
aos principais exemplares disponíveis no mercado, utilizando-os 
de maneira básica para o desenvolvimento de páginas HTML.
4. Aplicar os conceitos básicos relativos ao CSS, bem como as suas 
principais funcionalidades.
Ambiente para Desenvolvimento Web 
12
Web Standards
OBJETIVO:
Ao término deste capítulo, você será capaz de identificar 
os principais conceitos relacionados a Web Standards, 
bem como suas principais funcionalidades e seus pontos 
positivos e negativos quanto à otimização do processo 
de criação de conteúdos para páginas HTML. Isso será 
fundamental para o exercício de sua profissão. E então? 
Motivado para desenvolver esta competência? Então, 
vamos lá. Avante!
O que são Web Standards?
Os “Padrões Web” se constituem em orientações sobre a união de 
tecnologias específicas voltadas para a programação.
Os padrões estabelecidos pela Web Standards visam otimizar 
a prática da programação, buscando sempre o melhor código válido, 
acessível, semanticamente correto e que tenha uma URL amigável. Os 
Web Standardssão aplicados às linguagens conforme identificados na 
figura a seguir.
Figura 1 – Exemplo das principais linguagens adotadas para o padrão Web Standard
HTML XHTML XML CSS XSLT
DOM MathML SVG WAI WML
Fonte: Sena (2017a, p. 15).
Podemos afirmar que o objetivo principal dos Web Standards é 
criar um código válido, ou seja, compatível com a sua finalidade, que seja 
executado sem falhas em sua compreensão. Algumas das linguagens de 
desenvolvimento para web são: HTML e CSS.
Mas os padrões atendem a inúmeras outras linguagens, servindo 
para diferentes fins.
Ambiente para Desenvolvimento Web 
13
Figura 2 – O HTML é uma das principais linguagens de desenvolvimento para web
Fonte: Freepik
O conceito de Web Standards sugere que o código desenvolvido 
seja válido. Para a maioria dos desenvolvedores isso significa apenas 
validar o código HTML/XHTML, e existem ferramentas que validam 
também o CSS (validate your CSS code) (DUCKETT, 2016). Basicamente, 
ter um HTML/XHTML válido significa que o código da página web está 
escrito de acordo com o doctype que foi escolhido para o documento.
Figura 3 – Existem ferramentas que validam também 
o CSS, conhecidas como validate your CSS code
Fonte: Freepik
Ambiente para Desenvolvimento Web 
14
A escolha criteriosa do doctype é importante, uma vez que ele vai 
determinar como seu código HTML/XHTML será interpretado e qual 
modo de layout será ativado nos diferentes navegadores. Sendo seu 
código válido, você não precisa se preocupar com os diferentes erros 
de interpretação dos diversos navegadores, assegurando uma maneira 
uniforme de renderização por todos os navegadores.
DEFINIÇÃO:
Doctype é uma declaração que deve ser acrescentada ao 
código de seu documento, antes da tag. Ela é responsável 
por dizer ao navegador qual é a especificação do HTML ou 
XHTML, sempre com base nos padrões do W3C.
Validar seu código auxilia na detecção de erros e evita uma série de 
problemas relativos à renderização do layout proposto pelo seu código 
HTML/XHTML. Validar simplifica as tarefas de corrigir erros de código, 
acelera o desenvolvimento e resulta em um código de fácil manutenção.
Figura 4 – Exemplo da declaração doctype 
acrescentada ao código do documento antes da tag
Fonte: Elaborada pelos autores com base no software Dreamweaver.
Ambiente para Desenvolvimento Web 
15
Aos profissionais que trabalham com ambiente para desenvolvimento 
web é importante conhecer a entidade W3C (World Wide Web Consortium). 
Fundada em outubro de 1994 por Tim Berners-Lee, a W3C é a união de 
quase 400 organizações, que busca criar padrões na World Wide Web. 
Essa organização possui comitês próprios para cada item ou país, a fim de 
poder atender melhor às necessidades.
IMPORTANTE:
O W3C (World Wide Web Consortium) não é uma ferramenta. 
Trata-se de um padrão estabelecido por uma associação 
de empresas.
Os formatos normalmente aceitos são:
 • HTML. 
 • CSS.
 • XHTML.
SAIBA MAIS:
Conheça mais sobre o W3C visitando a página oficial da 
organização. Lá você vai encontrar inúmeras dicas sobre 
esse padrão. Acesse clicando aqui.
Vantagens dos Web Standards
Podemos citar como algumas vantagens dos Web Standards a 
redução de custos, eliminação de trabalhos desnecessários, redução do 
tempo de produção, separação entre a informação e a apresentação, e o 
maior controle sobre a apresentação.
Ambiente para Desenvolvimento Web 
www.w3c.org
16
Figura 5 – A W3C busca criar padrões na World Wide Web
Fonte: Wikimedia Commons. 
Podemos citar outras vantagens dos Web Standards, como:
 • Elaboração de comportamentos complexos, mantendo a 
compatibilidade entre as plataformas.
 • Suporte a novos dispositivos, inclusive aos que surgirão e para 
dispositivos que fornecem suporte a portadores de necessidades 
especiais.
 • Criação de versões específicas para meios específicos, sem a 
necessidade de criação de novas páginas, como impressão, slides, 
dispositivos aurais (são aqueles que respondem auditivamente a 
uma situação/problema), portáteis etc.
 • Utilização de XML em páginas XHTML, tratamento estrutural 
e semântico, melhor acessibilidade e usabilidade, rapidez no 
carregamento das páginas, melhores resultados nos mecanismos 
de busca.
Ambiente para Desenvolvimento Web 
17
Figura 6 – A utilização de XML em páginas XHTML 
é considerada uma das vantagens dos Web Standards
Fonte: Freepik
Para entender melhor, o XML, do inglês eXtensible Markup Language, 
trata-se de uma linguagem de marcação recomendada pela W3C para a 
criação de documentos com dados organizados hierarquicamente, como 
textos, banco de dados ou desenhos vetoriais.
Figura 7 – O XML é uma linguagem de marcação recomendada pela W3C
Fonte: Freepik
Ambiente para Desenvolvimento Web 
18
Quase não existem desvantagens em desenvolver utilizando os 
padrões, apenas casos de diferença de renderização dos navegadores. 
Navegadores mais antigos e desatualizados não seguem fielmente os 
padrões, diferentemente de navegadores como:
 • Chrome.
 • Firefox. 
 • Opera.
 • Mozilla.
 • Safari. 
 • Entre outros.
SAIBA MAIS:
Confira os padrões W3C como sugestões para Web 
Standards sobre as melhores práticas. Clique aqui.
Os problemas de renderização são de fácil resolução (na maioria 
das vezes), bastando conhecer e utilizar corretamente as propriedades do 
CSS e os recursos do XHTML. 
Figura 8 – Os problemas de renderização geralmente são resolvidos utilizando 
corretamente as propriedades do CSS e os recursos do XHTML 
Fonte: Freepik
Ambiente para Desenvolvimento Web 
https://www.w3.org/standards
19
Além disso, quase todas as incoerências de renderização do CSS 
encontradas até hoje já foram amplamente estudadas e documentadas 
em sites especializados, tendo sempre uma solução possível ou um 
workaround. Também é importante considerar a acessibilidade, que, no 
ambiente para desenvolvimento web, é a prática de desenvolver websites 
acessíveis. Todavia, esse termo vai muito além disso, englobando diversos 
fatores, como para que pessoas, sejam elas portadoras de deficiências 
ou não, possam ter acesso a World Wide Web, que é um sistema de 
hipertextos.
RESUMINDO:
E então? Gostou do que lhe mostramos? Aprendeu mesmo 
tudinho? Agora, só para termos certeza de que você 
realmente entendeu o tema de estudo deste capítulo, 
vamos resumir tudo o que vimos. Você deve ter aprendido 
que, utilizado cada vez mais, o conhecimento de Web 
Standards é fundamental para qualquer profissional que 
busca conhecer mais sobre programação para web. 
É fundamental que existam normas que assegurem 
um padrão de qualidade com foco na satisfação das 
necessidades dos usuários finais. No desenvolvimento 
web, esses padrões são definidos pelo W3C (World Wide 
Web Consortium), consórcio internacional da “www”, que 
significa World Wide web em inglês, ou seja, Rede Mundial 
de Computadores. É importante o conhecimento das 
principais funcionalidades dos projetos desenvolvidos para 
ambientes web, como seus pontos positivos e negativos 
quanto à otimização do processo de criação de conteúdos 
para páginas HTML (HyperText Markup Language, ou 
Linguagem de Marcação de Hipertexto).
Ambiente para Desenvolvimento Web 
20
HTML
OBJETIVO:
Ao término deste capítulo, você será capaz de identificar as 
diferenças entre linguagens de programação e linguagens 
script, e criar as estruturas básicas de um projeto HTML, 
identificando algumas de suas principais tags. Isso será 
fundamental para o exercício de sua profissão. E então? 
Motivado para desenvolver esta competência? Então, 
vamos lá. Avante!
A criação e formatação de conteúdo dentro de um arquivo HTML 
são desenvolvidas por meio de marcadores chamados de tags. Sem a 
utilização desses parâmetros, o navegador não seria capaz de entender 
seu conteúdo completamente ou parcialmente.
Sintaxe
Por padrão, toda tag deve ser usada dentro de marcadores 
chamados parênteses angulares, mais conhecidos como o sinalde 
maior e menor (< >). Além disso, existem algumas tags que necessitam 
de fechamento. Nesses casos, deve ser utilizado o sinal de barra (/) logo 
após a abertura da tag e anterior ao seu nome. 
Figura 9 – Por padrão, toda tag deve ser usada dentro de marcadores 
chamados parênteses angulares, o sinal de maior e menor (< >)
Fonte: Freepik
Ambiente para Desenvolvimento Web 
21
Em algumas tags, não existe um marcador de fechamento, situação 
em que é recomendado usar a barra logo antes de seu fechamento. 
Vejamos alguns exemplos:
<!DOCTYPE html>
<html>
<title>Primeiro Site</title>
<meta charset=”UTF-8”/>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
Um elemento pode ser classificado como simples ou composto:
 • Elemento simples: é formado apenas pela tag, não existindo 
nenhum outro parâmetro dentro desse elemento.
 • Elemento composto: sua marcação contém, além da tag, outros 
parâmetros, como atributos, valores e filhos.
Exemplo TAG <a>
Elemento simples
<a></a>
Elemento composto
<a href=”https://www.google.com”>
This is a link</a>
Por enquanto, não se preocupe com a função que cada tag exerce, 
adiante iremos ver algumas delas mais detalhadamente. Até o momento, 
você deve ter em mente como funciona a base de criação de elementos 
em HTML.
Ambiente para Desenvolvimento Web 
22
Figura 10 – É importante conhecer a função que cada tag 
exerce e como funciona a base de criação de elementos em HTML
Fonte: Freepik
Ao usar os sinais de maior e menor (< >), é criado um tipo de “alerta” 
para o navegador. Com isso, ele entende que ali existe algum tipo de 
ação que precisa ser executada. A todo momento, ele está captando 
esses marcadores e executando suas ações. Caso esses elementos não 
sejam colocados corretamente, podem acabar acarretando um desvio de 
função ou até mesmo um erro geral no site.
Estrutura de um Documento em HTML
Como já conhecemos o básico da sintaxe do HTML, podemos então 
começar a conhecer um pouco da estrutura padrão de um documento. 
Essa estrutura varia muito pouco, ou seja, para a criação de quase todos 
os sites, parte-se dessa mesma estrutura básica.
VOCÊ SABIA?
A maioria dos navegadores (browsers) possibilita a inspeção 
do código HTML de um site, basta você acessar o seu site 
preferido e pressionar a tecla de Função 12 (F12). Uma boa 
maneira de você testar seus conhecimentos adquiridos nas 
últimas aulas é analisar a estrutura desse site.
Ambiente para Desenvolvimento Web 
23
Podemos dividir essa estrutura em sete blocos principais:
1. A declaração <!DOCTYPE html> define que esse documento 
é um HTML, como o próprio nome já diz. Ele demonstra para o 
navegador e a alguns outros aplicativos que poderão acessar 
seu site o tipo de documento que se encontra ali, assim como o 
código em HTML. Em outras palavras, antes de o navegador ler 
qualquer linha de código contido no seu site, ele vai reconhecer 
essa instrução e preparar sua apresentação da melhor forma.
2. O elemento <html> é o elemento-raiz de uma página HTML. Essa 
tag vem logo após o doctype e se encarrega de demonstrar o 
início e o fim do arquivo HTML, ou seja, tudo dentro de um site 
deve estar dentro dessa tag.
3. O <head> é uma tag por meio da qual são introduzidas informações 
primordiais para o funcionamento perfeito de um site. Essas 
informações não são visíveis diretamente pelo usuário. Nessa tag 
serão inseridos os links para arquivos externos CSS e scripts, entre 
outras funcionalidades. Sobre CSS, apenas com um preview é 
possível verificar as alterações. Quando falamos em CSS, estamos 
falando de todo o estilo do site, ou seja, ele é o responsável por 
“dar vida” ao site. É capaz de alterar a cor da sua letra, do seu plano 
de fundo, do tamanho de sua fonte, margens, formato de botões, 
entre muitos outros parâmetros gerais.
4. O elemento <title> especifica um título para o documento.
5. O elemento <body> contém o conteúdo da página visível. Dentro 
dessa tag, deve ser inserido todo o conteúdo que se deseja 
mostrar no site, além de componentes de entrada de dados, como 
os formulários, botões, entre outros.
6. O elemento <h1> define o título.
7. O elemento <p> define um parágrafo.
Ambiente para Desenvolvimento Web 
24
Figura 11 – A estrutura HTML pode ser dividida em sete blocos principais
Fonte: Elaborada pelos autores com base no software Dreamweaver.
Com os setes blocos, podemos criar a estrutura básica de qualquer 
site, como exemplificado a seguir:
<!DOCTYPE html>
<html>
<title></title>
<meta charset=”UTF-8”/>
<body>
<h1>Meu primeiro título</h1>
<p>Meu primeiro parágrafo.</p>
</body>
</html>
Ambiente para Desenvolvimento Web 
25
A tag <meta charset=”UTF-8”/>, citada no exemplo anterior, é 
utilizada para demonstrar ao navegador que, dentro desse arquivo HTML, 
mais especificamente no conteúdo do <body>, são utilizados acentuação e 
outros caracteres especiais (LAWSON; SHARP, 2012). Quando esse detalhe 
não é especificado, o navegador gera um erro em letras acentuadas.
Figura 12 – Exemplo de como é visualizada uma página 
com acentuação e outros caracteres especiais
Fonte: Elaborada pelos autores com base no Google Chrome.
Agora já sabemos como criar a estrutura básica de um arquivo 
HTML utilizando os principais blocos: 
 • DOCTYPE.
 • HTML.
 • HEAD.
 • BODY.
Ambiente para Desenvolvimento Web 
26
Agora é o momento de aprender um pouco mais sobre links, que 
são de fundamental importância dentro do site. Por meio deles, podemos 
gerenciar com maior eficiência a navegabilidade do site, fazendo com 
que as informações cheguem até o usuário com um simples clique. Os 
links permitem a criação de menus, conectando uma página a outras, ou 
a outros trechos dentro da próxima página do site. Por exemplo, podemos 
interligar a primeira página do site (“home”) à sessão de “serviços” ou 
“contatos, podendo essas sessões estarem na própria página ou em 
subpáginas do site.
Assim, podem-se dividir links em dois tipos: internos e externos.
 • Links internos: cria uma ligação dentro de uma página HTML para 
outras sessões dentro do próprio arquivo.
 • Links externos: liga uma página a sites externos da web, nos quais 
poderá ser agregada alguma informação a mais ou funcionalidades 
para o site.
Para se construir um link, primeiramente devemos utilizar a tag <a> 
</a>. Essa marcação possibilita a criação de um hyperlink para a página 
de sua escolha, podendo ser interno ou externo. Entre a tag de abertura 
e a de fechamento, deve ser inserido o texto que você desejar mostrar. 
Vejamos alguns exemplos de links e seus atributos em HTML:
Link Interno:
<a href=”pagina2.html”>Aqui link para página 2</a>
Link Externo:
<a href=”https://www.google.com.br”>
Aqui link para uma página externa</a>
Vamos compreender um pouco mais a estrutura do exemplo anterior. 
Todo elemento deve estar entre os sinais de <>. No exemplo anterior, 
isso não é diferente. A tag a está logo após a abertura do elemento. Em 
seguida, está a novidade – o atributo chamado href=””, que é fundamental 
para o funcionamento de seu link. Como você pode notar, entre as aspas 
está descrito o nome do arquivo HTML, que ele irá chamar quando o 
usuário clicar sobre o link. No exemplo anterior, podemos dizer que existe 
Ambiente para Desenvolvimento Web 
27
uma pasta chamada “Site”. Dentro dessa pasta, existe o arquivo index.html, 
que seria a nossa página inicial, e um arquivo chamado pagina2.html. E, 
por fim, entre a tag de início e de fechamento, coloca-se o conteúdo que 
se julgar interessante para a visualização do usuário.
Para se criar um link entre arquivos, é necessário, além dos passos 
anteriores, estar bastante atento ao local em que o arquivo estará em 
seu computador. Desse modo, vamos supor que o arquivo “pagina2.html” 
esteja dentro de outra pasta chamada “pasta2”. Para a composição do 
endereço ficar correta, deve-se digitar o nome da pastaem que o arquivo 
está e, logo em seguida, utilizar uma barra. Por fim, deve-se digitar o nome 
do arquivo, como demonstrado a seguir:
<a href=”pasta2/pagina2.html”>
Aqui, ou o link vai para a página2</a> ou existe a possibilidade de 
regredir à pasta utilizando ../
A adição de imagens, além da utilização de outros artifícios, permite 
que o site seja mais interativo e tenha uma interface mais agradável. Para 
se adicionar uma imagem a um documento HTML, será necessária a 
utilização da tag <img>. Entretanto, como é de costume, uma tag sem 
atributos não funciona corretamente. Nesse caso, a tag <img> deve vir 
acompanhada do atributo src=“”. Apesar do nome diferente, ele funciona 
do mesmo modo do href, como vimos antes. A declaração do atributo 
src funciona da mesma forma que o href. Vamos supor que exista uma 
imagem chamada “foto.jpg”, nesse caso, ao se fazer a adição da imagem 
no <body> do seu documento HTML, ele deve ficar dessa forma: <img 
src=”foto.jpg”/>. Agora vamos ver como ficou o código final depois de todo 
o conhecimento adquirido nesta aula.
Ambiente para Desenvolvimento Web 
28
<!DOCTYPE html>
<html>
<title>Primeiro Site</title>
<meta charset=”UTF-8”/>
<body>
<a href=”pagina2.html”>
Clique aqui para ir a página2</a><br />
<a href=”https://www.google.com.br/”>Google</a>
<br />
<img src=”foto.jpg” alt=”Foto”>
</body>
</html>
Agora você pode dar uma olhada e testar as funcionalidades do 
que foi aprendido nesta aula. Pode parecer desarrumado e sem formato, 
à primeira vista, mas não se preocupe, pois, no decorrer desta disciplina, 
você vai ser capaz de organizar essa e outras páginas por meio de uma 
outra linguagem: o CSS.
Ambiente para Desenvolvimento Web 
29
RESUMINDO:
E então? Gostou do que lhe mostramos? Aprendeu mesmo 
tudinho? Agora, só para termos certeza de que você 
realmente entendeu o tema de estudo deste capítulo, 
vamos resumir tudo o que vimos. Você deve ter aprendido 
as primeiras noções sobre a linguagem HTML (Hypertext 
Markup Language) – uma linguagem de marcação padrão 
para a criação de páginas da web. O HTML é definido 
como a principal linguagem de marcação que se utiliza de 
parâmetros chamados de tags, para a criação de páginas 
na internet. É importante conhecer sua sintaxe, como deve 
ser a estrutura básica para criação de um site e os primeiros 
passos para se introduzir links, imagens, parágrafos, títulos, 
entre outros. De maneira geral, se não forem usados os 
parâmetros corretos, o navegador não será capaz de 
entender seu conteúdo completamente ou parcialmente. 
Por padrão, toda tag deve ser usada dentro de marcadores 
chamados parênteses angulares, mais conhecidos como o 
sinal de maior e menor (< >). Em algumas tags, não existe um 
marcador de fechamento, situação em que é recomendado 
usar a barra logo antes do seu fechamento.
Ambiente para Desenvolvimento Web 
30
Editores HTML 
OBJETIVO:
Ao término deste capítulo, você será capaz de entender 
os conceitos básicos relativos a editores HTML, bem como 
alguns exemplos disponíveis no mercado, utilizando-os 
de maneira básica para o desenvolvimento de páginas no 
ambiente web. Isso será fundamental para o exercício de 
sua profissão. E então? Motivado para desenvolver esta 
competência? Então, vamos lá. Avante!
Páginas da web podem ser criadas e modificadas usando editores 
HTML profissionais ou qualquer outro tipo de editor de texto que venha no 
sistema operacional da máquina que você utiliza.
Introdução aos editores HTML
Primeiramente, para compreender melhor o conteúdo, é 
recomendado aprender como criar um HTML básico usando o Bloco 
de Notas do Windows ou o editor de texto, para o IoS, sendo que iniciar 
o aprendizado em um editor de texto simples é uma boa maneira de 
aprender HTML.
Figura 13 – O Sublime Text Editor é um exemplo de editor de código-fonte multiplataforma
Fonte: Elaborada pelos autores com base no software Sublime Text Editor.
Ambiente para Desenvolvimento Web 
31
O ponto negativo de utilizar essas ferramentas é o fato de elas não 
conseguirem identificar as marcações criadas, dificultando assim a leitura 
e a compreensão de possíveis erros que o código possa trazer.
IMPORTANTE:
Chamamos de debug o processo pelo qual ocorre a 
depuração dos erros no código, buscando, linha a linha, 
possíveis falhas. A depuração tem por objetivo reduzir 
o número de erros no código. Ela pode ocorrer tanto em 
softwares quanto em hardwares. No caso de ambiente para 
desenvolvimento web, utilizamos a primeira opção.
Como vantagem da utilização dessas ferramentas, temos o fato de 
elas serem gratuitas e já virem instaladas no sistema operacional. O contra, 
como foi citado, é que elas não identificam o código, dificultando o processo 
do debug. Para começarmos a compreender como funcionam os editores 
de texto, siga os quatro passos a seguir para criar as suas primeiras páginas 
web com o Bloco de Notas ou algum outro editor de texto.
 • Passo 1: abra o Bloco de Notas, ou o editor de texto, e escreva ou 
copie alguns códigos HTML. Lembre-se da estrutura básica, veja 
a seguir:
<!DOCTYPE html>
<html>
<title>Primeiro Site</title>
<meta charset=”UTF-8”/>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
Ambiente para Desenvolvimento Web 
32
 • Passo 2: salve a sua página em HTML. Para isso, execute os 
seguintes procedimentos:
1. Salve o seu arquivo do Bloco de Notas no seu computador. 
Selecione o menu Arquivo, Salvar como, no Bloco de Notas.
2. Nomeie o arquivo como “index.html”.
3. Antes de salvar, selecione o Tipo: Todos os arquivos (*.*).
Figura 14 – Exemplo de código HTML no Bloco de Notas do sistema operacional Windows
Fonte: Elaborada pelos autores com base no software Bloco de Notas.
Passo 3: visualizar a página HTML em seu navegador. Abra o seu 
arquivo HTML salvo no seu computador usando o seu navegador favorito 
(clique duas vezes no arquivo ou clique com o botão direito e escolha 
“Abrir com”), será visualizada uma imagem conforme a figura a seguir.
Ambiente para Desenvolvimento Web 
33
Figura 15 – Exemplo de visualização do código em HTML em um navegador 
Fonte: Elaborada pelos autores com base no Google Chrome.
Editores HTML
Dando continuidade à aquisição de conhecimento sobre os editores 
de HTML, agora que já vimos a possibilidade de criar um código nos 
editores de texto básicos, vamos conhecer alguns dos principais editores 
que, ao contrário do Bloco de Notas, foram desenvolvidos especialmente 
para programação (MILETTO; BERTAGNOLLI, 2014). Vale frisar que um 
editor HTML eficiente e que tenha um bom desempenho irá ajudá-lo em 
diferentes momentos da criação do código, facilitando e tornando mais 
ágil o seu trabalho. Quando um bom editor HTML cumpre sua função, 
você se preocupa mais com o conteúdo do que com problemas que 
possam vir a surgir por erros de interpretação e linguagem, o que vai 
melhorar a qualidade de seu trabalho. 
Utilizado por profissionais do mundo inteiro, o Sublime Text é um 
editor de texto de alta performance quando o assunto é edição de HTML. 
Ele funciona desde para criação de aplicativos até sites inteiros na web. 
Com funcionalidades como “Autocomplete”, o Sublime Text completa 
a sintaxe da tag que você esteja digitando, economizando tempo de 
digitação. Esse autocompletar abre e fecha as tags, inibindo, assim, o 
esquecimento. 
Outro ponto que chama bastante atenção nesse editor é sua 
interface gráfica padrão escura e com marcações vivas. Assim, ela torna 
o trabalho mais confortável e fica mais difícil você “se perder” em seu 
Ambiente para Desenvolvimento Web 
34
próprio código. O ponto negativo desse editor é que ele é pouco intuitivo 
para usuários que não possuem conhecimento de programação, tendo 
estes que conhecer o mínimo para editar códigos com ele.
ACESSE:
Na página do fabricante, você encontra várias informações 
que podem ser úteis para o seu site. Clique aqui.
O Notepad++funciona como um Bloco de Notas melhorado e é 
escrito em C++. É utilizado por profissionais que migraram daquela edição 
no Bloco de Notas que vimos. Reconhecendo diversas linguagens como 
C++, PHP, ASP e outras mais, consegue corrigir os erros que podem 
acontecer no Bloco de Notas. Pelo fato de ser totalmente livre, o Notepad++ 
é utilizado por muitos programadores, mas, assim como no Sublime Text, 
o usuário precisa ter conhecimento para trabalhar com esse programa. 
Qualquer tarefa deve ser bem executada com base em conhecimento de 
programação. Podemos dizer que algumas vantagens desse editor são:
 • Interface gráfica e área inicial fácil e intuitiva.
 • Trabalho com abas, o que possibilita editar diversos arquivos 
simultaneamente, sem comprometer o desempenho.
 • É gratuito.
 • Ele consegue ler muitas linguagens, o que expande a sua área de 
atuação e o torna um “editor coringa”.
ACESSE:
Para o download, utilize a página do software, que contém 
outras informações que podem ser úteis para a construção 
de seu conhecimento. Clique aqui.
O Adobe Dreamweaver não é gratuito, mas suas funcionalidades 
o fazem ser um dos mais utilizados. Possui a funcionalidade de 
“autocomplete”. O diferencial desse editor é o fato de o design poder ser 
integrado com o código, isto é, ele possibilita a edição nesses dois níveis. 
Ambiente para Desenvolvimento Web 
https://www.sublimetext.com/
https://notepad-plus-plus.org/
35
Isso torna mais fácil a visualização do site enquanto se programa, fazendo 
com que seja um forte aliado dos profissionais que fazem front-end e 
back-end. 
Figura 16 – O Dreamweaver não é gratuito, mas suas 
funcionalidades faz com que seja um editor bastante utilizado
Fonte: Elaborada pelos autores com base no software Dreamweaver.
Algumas vantagens desse editor são:
 • Bem organizado e possibilita a criação de projetos em pastas 
separadas.
 • Cria uma conexão com as páginas que são interligadas. Assim, se 
ele modificar uma, a outra irá acompanhar essa mudança, o que 
evita a geração de bugs no código. 
O principal ponto negativo é o fato de ele ser pago, o que dificulta 
o acesso.
ACESSE:
Visite o site oficial do fabricante para encontrar mais 
informações sobre o editor e como utilizá-lo. Clique aqui.
Podemos estabelecer um comparativo entre os programas 
de edição de texto HTML. Observe a tabela a seguir, que compara as 
principais características dessas ferramentas.
Ambiente para Desenvolvimento Web 
http://www.adobe.com/br/products/dreamweaver.html
36
Tabela 1 – Comparativo dos programas de editor de HTML
PROGRAMA Gratuidade Interface fácil Autocomplete
Adobe Dreamweaver X X
Notepad ++ X X
Sublime Text X X X
Fonte: Sena (2017b, p. 17).
Mas qual, entre as opções dadas, seria a melhor? Podemos dizer 
que não existe uma melhor, mas, sim, a mais adequada para o fim que 
você deseja. É importante estar sempre atualizado sobre as novas versões 
e recursos dos softwares de edição de códigos HTML.
SAIBA MAIS:
Conheça um pouco mais sobre editores HTML. Clique aqui.
Foram apresentados os principais conceitos, mas devido às 
atualizações, algumas alterações de procedimentos podem ocorrer; 
por isso a importância de estar sempre atualizado sobre os recursos 
disponíveis para o ambiente para desenvolvimento web. Também é 
preciso ter o entendimento de que navegador ou browser é considerado 
um interpretador, visto que ele lê e obedece a um código, gerando uma 
ação inteligível ao homem. 
Para isso, é importante que as atividades básicas de um projeto 
para desenvolvimento web sejam cumpridas na ordem correta, sendo a 
primeira a do design da página, seguindo para a criação do HTML e, por 
último, a programação dos scripts.
Ambiente para Desenvolvimento Web 
https://www.kinghost.com.br/blog/2017/02/editor-de-codigo-gratuito-8-opcoes-para-voce-escolher-o-seu
37
RESUMINDO:
E então? Gostou do que lhe mostramos? Aprendeu mesmo 
tudinho? Agora, só para termos certeza de que você 
realmente entendeu o tema de estudo deste capítulo, vamos 
resumir tudo o que vimos. Você deve ter aprendido que, para 
dar continuidade aos estudos sobre o desenvolvimento no 
ambiente web, é importante conhecer os recursos básicos 
dos editores HTML, que são ferramentas fundamentais 
para o alcance de qualquer objetivo na programação. Esses 
editores são instrumentos que, por meio da linguagem 
HTML, fabricam páginas, utilizando marcações. Podem ser 
utilizados os editores profissionais ou quaisquer outros tipos 
de editores de texto disponíveis nativamente no sistema 
operacional da máquina que você utiliza, como o Bloco 
de Notas do Windows, no qual é possível desenvolver um 
HTML básico. Mas existem os que foram desenvolvidos 
especialmente para programação. Vale salientar que um 
editor HTML eficiente e que tenha um bom desempenho 
irá ajudá-lo em diferentes momentos da criação do código, 
facilitando e tornando mais ágil o seu trabalho.
Ambiente para Desenvolvimento Web 
38
Cascading Style Sheets (CSS) 
OBJETIVO:
Ao término deste capítulo, você será capaz de compreender 
os conceitos básicos relativos ao CSS, bem como as 
suas principais funcionalidades. Isso será fundamental 
para o exercício de sua profissão. E então? Motivado para 
desenvolver esta competência? Então, vamos lá. Avante!
Abreviação de Cascading Style Sheets, o CSS pode ser definido 
como a ferramenta que trabalha com a aparência ou apresentação de 
uma página. É no CSS que as definições dos elementos de uma página 
são definidas, criando todo o seu layout.
Conceitos de CSS
Vimos previamente que a linguagem de marcação mais comum é 
o HTML. O CSS funciona, basicamente, como uma maneira de estilizar e 
formatar o conteúdo do HTML. Ele define como essas informações vão 
aparecer esteticamente para o usuário, por meio de parâmetros.
Figura 17 – O CSS funciona, basicamente, como uma 
maneira de estilizar e formatar o conteúdo do HTML
Fonte: Freepik
Ambiente para Desenvolvimento Web 
39
Veja um exemplo básico de CSS.
h1 {
color: red;
background-color: blue;
border: 3px solid black;
}
Vamos detalhar o que significa cada item visto no código 
apresentado.
 • h1: chamado de seletor, o h1 corresponde ao objeto foco da 
modificação, representando os valores que serão alterados pelo 
CSS. Um seletor é responsável por vincular determinada estrutura 
ou elemento à modificação que será configurada. Esse seletor 
serve como “ponte” entre o elemento do HTML e as configurações 
que serão introduzidas no código em CSS.
 • Color: cor, em português, essa propriedade define a cor que o 
texto contido em h1 deverá ter, ou seja, tudo que estiver dentro da 
TAG h1 dentro do HTML terá a cor escolhida. Nisso, lembre-se de 
definir os seletores corretamente. Podem ser usados os padrões 
RGB e RGBA, como veremos em detalhes mais adiante.
 • Background: é o fundo da página, a cor, textura ou foto que se 
quer inserir nessa propriedade. Em linhas gerais, o background irá 
alterar o fundo de seu site. No exemplo foi definido que a cor de 
fundo será azul.
 • Border: borda, em português, essa definição cria uma borda de 3px 
(três pixels) em preto sólido ao redor do h1. Essa borda pode ser 
sólida, tracejada, riscada, além de possuir outras definições.
 • Ponto e vírgula (;): você observou que todo final de linha de 
formatação contém um ponto e vírgula? Eles não estão aí por 
acaso. Esse sinal representa que o comando terminou ali.
Ambiente para Desenvolvimento Web 
40
Vimos, em color, que dois padrões podem ser utilizados, o RGB e o 
RGBA. Mas você sabe qual é a diferença entre eles? Primeiramente, o RGB é 
formado pelas cores vermelho, verde e azul, e o RGBA é uma amplificação 
desse padrão, já que permite que se ponha opacidade nas cores.
Figura 18 – No CSS pode-se utilizar o padrão RGB, que é formado pelas cores 
vermelho, verde e azul e o RGBA, que é uma amplificação desse padrão
Fonte: Freepik
Tome cuidado com a resolução. Se você colocaruma imagem no 
background, ela pode desfocar e trazer um aspecto estranho a seu site. 
Caso você utilize essa imagem, ela deverá ser inserida por meio de uma 
URL (“URL DA IMAGEM”), e o local onde ela ficará deverá ser descrito. 
Vamos ver como fica o código no exemplo a seguir.
body {
background-image: url(“paper.gif”);
}
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
Ambiente para Desenvolvimento Web 
41
Lembre-se: todos os comandos devem ser escritos em inglês. 
Geralmente, alguns editores de texto completam uma indicação mudando 
a cor do elemento quando digitado corretamente.
Sintaxe do CSS
Podemos definir a sintaxe como as regras básicas para a configuração 
correta dos atributos e o caminho que deve ser utilizado pelo programador. 
Já vimos o que é um seletor, certo? A seguir veremos um exemplo bastante 
simples de como se dá a sintaxe dos elementos no CSS.
Figura 19 – Exemplo da sintaxe do CSS
Fonte: Sena (2017c, p. 15).
Vamos ver o que é uma propriedade e o que é valor? Nós já nos 
deparamos com isso antes, agora vamos compreender como realmente 
funciona. Podemos definir a propriedade como a mudança que você quer 
que seja realizada, como color, position, e todas as possibilidades de 
mudança que o CSS permite. 
DEFINIÇÃO:
A propriedade precisa ser válida e escrita de maneira correta 
e em inglês, e corresponde ao fator que será configurado 
ou editado. Se você quer mudar, por exemplo, a cor de seu 
texto, a propriedade escolhida será color. Agora, se você 
quiser alterar a borda, a propriedade mudará para border.
Algumas das propriedades mais utilizadas são:
 • Border-Style: define o estilo da borda.
 • Font-Size: diz o tamanho da fonte, que deve ser medida em pixels.
Valor
Ambiente para Desenvolvimento Web 
42
 • Font-Style: delimita o estilo da fonte. É nessa propriedade que 
você pode escolher se sua fonte será “normal”, “oblique” ou “italic”.
 • Color: delimita a cor do texto.
 • Text-Align: define qual será o alinhamento do texto, podendo ser 
justificado, centro, esquerda ou direita. Para alinhar à esquerda, o 
código deve ser: text-align: left. Para alinhar à direita: text-align: 
right. E assim por diante.
 • Font-Weight: deixa o texto em negrito, mais grosso ou mais fino. 
Quanto maior o valor, mais grossa será a fonte.
ACESSE:
Conheça um pouco mais sobre essas e outras propriedades. 
e confira diversos modelos e exemplos com alguns tipos 
de CSS vistos. Clique aqui.
No código a seguir, podemos compreender mais como essas 
propriedades podem ser utilizadas.
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Ambiente para Desenvolvimento Web 
https://www.w3schools.com/css/default.asp
43
Otimizando o código CSS, poderemos escrever assim:
h1, h2, p {
text-align: center;
color: red;
}
Em relação ao valor, vem logo após a propriedade e, basicamente, 
define como o elemento vai ficar. Por exemplo: se mudarmos a cor, color 
será a propriedade e blue será o valor atribuído a essa propriedade.
Salienta-se que, caso seja uma palavra composta, o valor deverá 
ser posto entre aspas da seguinte maneira:
p {
font-family: “Times New Roman”, Times, serif;
}
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
p.oblique {
font-style: oblique;
}
Para cada propriedade existe um ou mais valores e esses valores 
precisam estar claros e de acordo com a propriedade descrita. Você 
não conseguirá, por exemplo, mudar a cor de seu texto caso use uma 
propriedade text-align. Já em relação à folha de estilo externa, considerada 
a folha mais utilizada, permite a criação de toda a configuração em CSS 
separadamente. No HTML, existe um link que “puxa” a informação.
Ambiente para Desenvolvimento Web 
44
DEFINIÇÃO:
A folha de estilo externa ocorre quando o arquivo CSS é 
criado em um documento separado do HTML, tendo de ser 
importado para o HTML por link, que será responsável por 
criar a ponte entre esses dois documentos.
Existem ainda as folhas de estilo “Inline” e a “Declarando” na mesma 
página, mas elas são menos utilizadas, já que, por recomendação, é 
melhor utilizar a folha de estilo externa.
ACESSE:
Conheça mais sobre os diferentes tipos de folhas de estilo 
existentes obtendo outras informações. Clique aqui.
A seguir vemos como importar o arquivo CSS para o HTML marcado:
<!DOCTYPE html>
<html>
<meta charset=”UTF-8”/>
<title>Primeiro Site</title>
<link type=”text/css” rel=”stylesheet” href=”css/screen.css”>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
Conforme os parâmetros estipulados no arquivo CSS, por meio 
da interação com o HTML, o navegador irá reconhecer e aplicar as 
configurações. A folha de estilo poderá ser escrita em qualquer editor 
de texto, basta que o documento seja salvo na codificação UTF-8. Já em 
relação às Listas, são utilizadas para guiar os usuários em um site. As listas 
são fundamentais, podendo dispor de informações para consulta ou até 
criar menus. As listas podem ser, basicamente, de dois tipos:
Ambiente para Desenvolvimento Web 
http://www.devmedia.com.br/codigo-css-entendendo-a-folha-de-estilos/37459
45
 • Listas desordenadas: apresentam três tipos de marcadores: 
 • disc: corresponde a uma bola totalmente preenchida.
 • circle: um círculo sem preenchimento. 
 • square: um quadrado totalmente preenchido. 
 • Esses marcadores são dispostos ao lado de cada informação.
 • Listas ordenadas: em vez de símbolos, possuem uma ordenação, 
podendo ser letras e números, por exemplo, o que possibilita o 
escalonamento de informações.
Para cada site, existe uma necessidade. As listas podem estar 
dispostas em menus, por isso, às vezes uma lista desordenada pode ser 
melhor, esteticamente, que uma ordenada. Já uma lista ordenada pode ser 
útil para passar informações de maneira precisa e eficiente, evitando assim 
um conflito de entendimento. Vale salientar que uma das características 
do CSS é que ele possui compatibilidade com o XML (eXtensible Markup 
Language), no qual pode ser utilizada a técnica Tableless, que usa tabelas 
para facilitar o desenvolvimento de um site.
Ambiente para Desenvolvimento Web 
46
RESUMINDO:
E então? Gostou do que lhe mostramos? Aprendeu mesmo 
tudinho? Agora, só para termos certeza de que você 
realmente entendeu o tema de estudo deste capítulo, 
vamos resumir tudo o que vimos. Você deve ter aprendido 
que o CSS (Cascading Style Sheets) é uma ferramenta 
que trabalha na formatação da página, observando seus 
principais conceitos e como suas utilidades podem ser 
empregadas no desenvolvimento no ambiente web. 
De maneira geral, o CSS pode ser determinado como a 
ferramenta que lida com a aparência, apresentação, ou 
seja, os aspectos visuais de uma página. É no CSS que as 
definições dos elementos de uma página são definidas, 
criando todo o seu layout, como nas propriedades de cores, 
em que existem dois padrões que podem ser utilizados, o 
RGB e o RGBA. E se deve tomar cuidado com a resolução 
caso for utilizar uma imagem no background, pelo fato de 
a imagem poder desfocar e trazer um aspecto estranho 
para o site. Lembrando que todos os comandos devem ser 
escritos em inglês, normalmente alguns editores de textos 
e de códigos já completam e indicam quando o código 
está digitado corretamente.
Ambiente para Desenvolvimento Web 
47
REFERÊNCIAS
DUCKETT, J. HTML e CSS Projete e Construa websites. Rio de 
Janeiro: Alta Books, 2016.
LAWSON, B.; SHARP, R. Introdução ao HTML 5. Rio de Janeiro: Alta 
Books, 2012.
MILETTO, E. M.; BERTAGNOLLI, S., C. Desenvolvimento de 
Software II: Introdução ao Desenvolvimento web com HTML, CSS, 
JavaScript e PHP. Porto Alegre: Bookman, 2014.
SENA, H. Ambiente para Desenvolvimento Web: Arquitetura 
Cliente-Servidor. Recife: Uninassau, 2017a.
SENA, H. Ambiente para Desenvolvimento Web: ArquiteturaWeb. 
Recife: Uninassau, 2017b.
SENA, H. Ambiente para Desenvolvimento Web: HTTP Server. 
Recife: Uninassau, 2017c.
Ambiente para Desenvolvimento Web 
	_GoBack
	Web Standards
	O que são Web Standards?
	Vantagens dos Web Standards
	HTML
	Sintaxe
	Estrutura de um Documento em HTML
	Editores HTML 
	Introdução aos editores HTML
	Editores HTML
	Cascading Style Sheets (CSS) 
	Conceitos de CSS
	Sintaxe do CSS