Curso de Programação em PHP aula 3- Revisão dos conceitos de HTML e CSS

Bem vindos á terceira aula do Curso de Programação em PHP Este artigo faz parte do curso de programação em PHP do INFOmoz. Para acessar outras aulas do curso, por favor visite o índice do curso de programação em PHP. Qualquer dúvida ou sugestão relacionada a esta aula, poderá ser deixada nos comentários, no fim desta aula. Objectivos da Aula:

  1. Revisão dos conceitos de HTML
  2. Conceitos de CSS
  3. Criação de Páginas estáticas com HTML
  4. Conceito de linguagens client-side e Server-Side

Revisão dos conceitos de HTML

Nesta aula começaremos a ver alguns detalhes do desenvolvimento web, mas apenas nos limitaremos a fazer uma revisão ou resumo daquilo que são os conceitos de HTML, CSS, Javascript e páginas estáticas. Não aprofundaremos muito este tema, já que supõe-se que os alunos deste curso já tenham as noções básicas sobre estas tecnologias. Caso não entenda nada do que se está a falar aqui, por favor visite o site www.pt-br.html.net, que é a minha referência principal para HTML, CSS e criação de páginas estáticas.

O que é HTML e para que serve

De uma forma resumida, HTML é a linguagem usada para criar páginas para Internet. Não preciso dar a definição de Internet aqui, já que a Wikipédia já tem isso. Foi criada por volta de 1990. O HTML é interpretado pelo navegador do utilizador que estiver a visitar a página, e assim o navegador nos apresenta a página duma forma mais apropriada para nós. Todos os navegadores actuais são capazes de Interpretar HTML.É possivel ver o código HTML de uma página, basta usar o atalho CTRL+U, que funciona em quase todos os navegadores, ou então atravês do menu Ver->Código-Fonte no Mozilla Firefox e Internet Explorer.

Sintaxe do HTML

Existem várias versões do HTML, e quase todas têm a mesma sintaxe básica, que é composta por dois elementos: tags e atributos.

Tags em HTML

As tags em HTML são usadas para definir elementos duma página, como o parágrafo, o corpo da página, tabelas, blocos de elementos,etc. A sintaxe de uma tag é a seguinte

<tag>Conteudo</tag>

Tudo o que estiver no espaço onde aparece a palavra conteúdo será marcado pela tag . Note que toda a tag tem um marcador de início e um de fim. Geralmente o marcador do fim é o mesmo que o marcador do início, acrescentando uma barra “/” para indicar que é o fim da tag. Existem tags que abrem e fecham no mesmo marcador, como a tag

<img alt="" />

Atributos em HTML

Algumas vezes, teremos a necessidade de alterar os comportamentos de algumas tags dentro da página HTML que estivermos a desenvolver. Nesses casos, usamos atributos de tags, para atribuir caracteristicas diferentes as Tags dentro das páginas. Por exemplo, podemos usar atributo para mudar o tamanho de uma imagem:

<img src="imagem.jpg" alt="" width="20px" />

Note que usamos atributo “width” para atribuir uma largura de 20px a imagem. Também usamos o atributo “src” para indicar o caminho para a imagem em questão.Em cursos especialmente voltados para o design de páginas em HTML você encontrará muito mais informação sobre tags e atributos, incluindo a lista de todas as tags e atributos que o HTML suporta.

HTML5, o futuro do HTML

Foi lançado recentemente uma nova versão do HTML, que é o HTML 5, que vem substituir o HTML 4.1 e o XHTML. Esta versão é uma verdadeira revolução na web, e actualmente nem todos os browsers possuem suporte completo ao HTML 5. Se o seu plano é mergulhar fundo na área de desenvolvimento web, aconselho que comece desde já a pesquisar mais sobre as novidades do HTML5 e se possível passar a implementar o HTML 5 nos seus projectos. Um curso especialmente dedicado ao HTML 5 está previsto aqui no INFOmoz, mas a prioridade é terminar os cursos agendados no ano passado primeiro.

Folhas de estilo e design de páginas

Lembra-se dos atributos de tags em HTML? Não! Impossível, falamos deles ainda nesta aula!Pois saiba que a maior parte das tags e principalmente das tags HTML lançadas nas primeiras versões desta tecnologia estão actualmente em desuso, pois existem novas soluções que por sinal são mais práticas para a criação de páginas web.Estamos a falar necessariamente das tags que definiam a formatação do conteúdo, como por exemplo as cores, os tamanhos e o posicionamento. Estas tags foram substituidas por uma nova tacnologia, chamada de Folhas de Estilo em Cascata(CSS). Com o CSS, podemos definir como o conteúdo definido pelo HTML deverá ser formatado.Existem várias formas de aplicar CSS, e em cursos especializados você aprenderá todas as técnicas do CSS. Aqui só pretendemos dizer que esta tecnologia existe, e o seu conhecimento, pelo menos o nível básico, é altamente aconselhado para quem quiser entrar para a área do desenvolvimento web com PHP ou qualquer outra tecnologia.

Sintaxe do CSS

Basicamente, aplicamos regras de CSS por tags, ou por bloco de elementos. Blocos de elementos são definidos em HTML usando tags especiais(div e span) ou atributos especiais(class e id). Por exemplo, para aplicar regras de CSS para alterar a apresentação de um parágrafo(que em HTML é marcado por pela tag p), fazemos algo parecido com:

p{color:red;background-color:blue;font-size:12px;font-weight:bold;}

Aqui, fazemos com que os parágrafos da página ligada a esta folha de estilos tenham as letras a vermelho, o fundo a azul, a fonte com tamanho 12px e a negrito.Veja no link que deixamos acima para um curso mais aprofundado de HTML e CSS.

Receba nossas actualizações por email

Ver Campanhas anteriores.

(Visited 14 times, 1 visits today)
Share