Introdução ao Desenvolvimento Web com HTML, CSS e JavaScript

Prévia do material em texto

HTML e CSS
Introdução ao Desenvolvimento Web
Profa. Fernanda De Nardin Walker
Contexto
• Página web ➔ 3 camadas com funções diferenciadas:
• HTML (HyperText Markup Language – Linguagem de Marcação de Hipertexto)
• CSS (Cascading Style Sheets – Folha de Estilo em Cascata)
• JavaScript
Contexto
HTML
• HTML é a primeira camada
• Apresenta o conteúdo, indicando sua semântica:
• determinada informação é um parágrafo, 
• determinado texto é um artigo
• Responsável por exibir o conteúdo, dando-lhe significado
CSS
• Linguagem de estilização, formatação 
• Dá forma ao conteúdo HTML:
• escrita de um texto com determinada estilo, 
• uso de uma determinada cor de fundo em uma página
• uma borda envolvendo um bloco
• Seleciona um elemento do HTML para estilizá-lo e apresentá-lo como nova 
forma no navegador.
JavaScript
• Comportamentos dinâmicos
• executar uma ação que resulte em um comportamento na página
• programados através de scripts, que são acionados 
• Exemplo: ao preencher um formulário erramos o e-mail é o sistema nos avisa
CSS
• Cascading Style Sheet e é usado para estilizar elementos escritos em uma 
linguagem de marcação como HTML
• separa o conteúdo da representação visual do site
• desenvolvido pelo W3C (World Wide Web Consortium) em 1996
• HTML não foi projetado para ter tags que ajudariam a formatar a página
• apenas escrever a marcação para o site
CSS
• CSS permite que você estilize tudo em um arquivo diferente
• criando o estilo separadamente 
• integrando o arquivo CSS na parte superior da marcação HTML
• Marcação HTML limpa e de fácil manutenção
CSS
• conjunto de propriedades utilizadas para alterar a apresentação dos 
elementos em páginas web 
• como e onde as propriedades font, text, border, padding e margin são aplicadas
• características de fundo das páginas e de listas
• modificar aspectos dos elementos, segundo a definição de pseudo-elementos e de 
pseudo-classes
CSS
• Regras do CSS:
• descrição e sequência dos atributos e valores dentro da tag
CSS
• Propriedade font: 
• controlar a aparência do texto nas páginas web e algumas correspondências de fonte, como: 
família, tamanho, largura, estilo, entre outros
• usa medidas em pixels, pontos, centímetros, milímetros ou percentuais
• Propriedade text:
• controlar além da aparência, a formatação do texto nas páginas web: cor, alinhamento 
vertical e horizontal, identação, maiúsculas, minúsculas, sombra, espaçamento entre letras, 
palavras e linhas
• para cor, nome em inglês ou código RGB em hexadecimal