Por que você deve aprender HTML e CSS
Tese: Por que você deve aprender HTML e CSS. Pesquise 860.000+ trabalhos acadêmicosPor: Rogenia • 30/4/2014 • Tese • 9.407 Palavras (38 Páginas) • 327 Visualizações
1.1 Por que você deve aprender HTML e CSS
Caso você seja um designer sem muita experiência com desenvolvimento, ou um programador mais acostumado a trabalhar com linhas de comando e compiladores do que navegadores, me deixe explicar um pouco a importância de se aprender HTML e CSS. Se você estiver trabalhando ou pretende trabalhar com tecnologia, acredito que boa parte - ou tudo - dos seus projetos será utilizado através de um navegador. Desde os tempos do Mosaico (que eventualmente se tornou o Netscape) e das primeiras versões do Internet Explorer sempre enfrentamos uma guerra de incompatibilidade entre os nevagadores e a necessidade de padrões para garantir a interoperabilidade da web entre clientes diferentes. O Google Chrome mudou a perspectiva sobre o processo de atualização contínua, garantindo que a maioria dos seus usuários possuam a última versão do navegador, e o Firefox começou a adotar um processo similar.
Atualmente, o Google Chrome costuma ser o campeão dos testes de compatibilidade com as últimas especificações, sempre seguido de perto das últimas versões do Firefox, Safari e Opera. Boa parte das inclusões do HTML5 e CSS3.
Disponíveis nesses navegadores por completo ou através de prefixos proprietários. O Internet Explorer, atualmente na versão É (no momento da escrita desse livro a versão, está em desenvolvimento), ainda se encontra bem atrás dos demais, mas as promessas para a sua próxima versão são interessantes.
Essas propriedades enquanto elas são definidas e refinadas. Usaremos tags e pro-priedades que estão em uso a anos, além de passar por adições recentes do HTML5 e do CSS3. Além da estrutura básica de HTML abaixo, vamos utilizar algumas ferramentas para ajudar o nosso trabalho e deixar algumas partes não tão interessantes do desenvolvimento web de lado, assim podemos focar no que realmente importa. Casa do Código Capítulo Õ. O desenvolvimento web hoje
um pouco de JavaScript para •nalizar alguns dos nossos exemplos, e ai o jQuery
(http://jquery.com/) entrará em ação.
<!doctype html>
<html lang='pt-BR'> <head>
<meta charset="UTF-8"> <title></title>
<link rel="stylesheet" href="normalize.css"> <script src="prefixfree.min.js"></script>
</head>
<body>
<!-- O seu HTML vem aqui! --> <script src="jquery.min.js"></script>
</body>
</html>
Para o CSS específico de cada exemplo, você pode criar um arquivo com um nome relacionado ao que estiver fazendo e adicionar uma referência a ele, logo abaixo do normalize.css. Assim, no exemplo de animações, você pode criar um arquivo animações.css e colocar uma tag link dentro da tag head.
Nós vamos criá-la do zero, e a versão final ficará assim:
2.1 Escrevendo HTML, de Dentro para Fora
Vamos começar pela parte mais importante da página, o conteúdo. O primeiro, a Avenida Paulista, ficará assim:
<h2>Passear na Avenida Paulista!</h2> <p>
Um dos principais centros financeiros da cidade, a avenida Paulista também possui diversas opções de entretenimento.
respeito no <a href='https://twitter.com/#!/search/Avenida Paulista' target='_blank'>Twitter</a>?
</p>
O que temos aqui? Primeiro, um título secundário utilizando a tag h2, acompa-nhado de dois parágrafos com texto, delimitados pela tag p. Dentro dos parágrafos, além do próprio texto, temos outras tags para de•nir mais elementos.
O outro elemento, é um link para se navegar aos resultados de busca do Twitter para o termo “Av. Paulista”, é criado pela tag a (derivada da palavra âncora em inglês, an-chor).
Seguindo em frente, podemos adicionar o resto do nosso conteúdo, outros ó lugares. Um deles é a região da Vila Madalena, e o último é o Parque do Ibirapuera.
</a>
</p>
<h2>O Parque do Ibirapuera</h2> <p>
Um dos cartões postais da cidade, o parque dispõe de mais de 1,5 km{^2} de área verde, lagos artificiais e pistas de cooper e ciclismo.
como chegar ao parque. Novos parágrafos, títulos e links para outros luga-res - a busca de bares do site da Veja São Paulo e a localização do Parque no Google Maps. Com a parte principal no seu lugar, vamos continuar na lista de melhorias a fazer para a nossa página. -->
</body>
</html>
Ótimo! Já podemos dizer que estamos com uma página em mãos, certo? Bem, o HTML está no seu lugar, mas precisamos de um pouco de CSS para melhorar a apresentação do nosso conteúdo.
2.2 Adicionando Formatações Básicas
Para começar o CSS da nossa página vamos fixar a largura disponível para o conteúdo e centralizar o mesmo na página, deixando um espaço em branco nas laterais. Para isso, adicionamos uma tag div em volta de todo o HTML que criamos dentro do
body, com uma classe chamada container
<div class='container'>
<!-- Todo o corpo da página vem aqui... --> </div>
E o CSS para centralizar esta div na página:
.container { margin: 0 auto; width:960px;
}
A propriedade width fixa a largura para 960px, adequando o conteúdo a telas de pelo menos de largura, como tablets e netbooks. O próximo passo é melhorar a exibição dos textos, ajustando um pouco o estilo das fontes com o seguinte código, que deve ser adicionado
...