HTML & CSS para iniciantes

Quem quer criar páginas da web entrar em contato cedo ou tarde com HTML. Portanto, nos próximos cursos em vídeo, vamos conquistar juntos o belo mundo do HTML. Vão ver passo a passo o que esta língua significa e como se pode criar páginas da web com ela em combinação com folhas de estilo. No entanto, no início surge uma pergunta: afinal, o que é o HTML e as folhas de estilo? No final deste curso em vídeo vocês também descobrirão de que software precisam para criar e testar páginas da web.

Ao contrário de linguagens de programação como Java, é possível obter rapidamente os primeiros resultados em HTML, sem grande esforço inicial. Tudo o que precisam no início é um editor e um navegador. Neste vídeo de treinamento, vocês irão criar seu primeiro documento HTML e também obter uma saída diretamente no navegador. E, ao mesmo tempo, aprenderão como os documentos HTML, ou seja, páginas da web, são estruturados ou que estrutura básica seguem.

Vocês já conhecem a relação entre os termos Elemento, Tag e Atributo a partir da primeira parte desta série. Agora, vamos ver como essas coisas podem ser usadas na prática em documentos HTML. Para concluir este treinamento em vídeo, vocês aprenderão como verificar a correção sintática do seu código HTML.

Os vossos sites certamente não consistirão apenas de imagens, mas também de textos. E os textos devem ser estruturados de forma sensata, apenas para facilitar a leitura. Para isso, o HTML disponibiliza diversos elementos. Neste vídeo de formação, serão apresentados os elementos de estruturação mais importantes para textos. Além disso, aprenderão como mascarar os próprios caracteres do HTML e como exibir listagens de programas.

Para uma boa legibilidade de textos, é necessária uma formatação adequada. E isso vai além de elementos de estruturação pura, como títulos e parágrafos de texto. Assim, em HTML, por exemplo, é possível marcar citações e destacar passagens em negrito ou itálico. Este vídeo de treinamento fornece as ferramentas necessárias para isso.

Elementos que vocês encontram repetidamente em HTML são listas. Isso aplica-se não apenas a listas de tarefas, dados de contato, mas também à definição de menus. Portanto, as listas desempenham um papel central no HTML. Razão suficiente para dar uma olhada detalhada nelas. Neste vídeo de treinamento, vocês aprenderão todas as variantes de listas que o HTML oferece. Estas são listas de itens, listas numeradas, listas de definições e listas de menu. Além disso, vocês receberão dicas sobre como ajustar visualmente as listas conforme necessário.

As tabelas continuam a desempenhar um papel importante nos sites. No entanto, isto aplica-se apenas à apresentação de dados. Quando não havia CSS ou este não era realmente suportado pelos navegadores, as tabelas também tinham outro propósito: serviam para criar layouts. Dentro das células das tabelas, eram colocados os elementos individuais da página. Felizmente, os monstros de tabelas de layout resultantes fazem parte do passado, graças ao CSS. Hoje, as tabelas são usadas no design de páginas da web exclusivamente para o que são destinadas: para apresentar dados de forma clara.

Tabelas com aparência coesa não precisam necessariamente consistir em um número idêntico de células dentro de uma linha de tabela. Neste vídeo de treinamento, é mostrado como você pode conectar células de tabela umas às outras. Na segunda parte, você aprenderá sobre a rotulagem de tabelas. Este aspecto é importante, pois assim você pode mostrar imediatamente aos visitantes de que dados se trata. O vídeo de treinamento é concluído com um olhar detalhado sobre o design de tabelas em HTML. Pois, neste setor, houve muitas mudanças em comparação com as versões anteriores do HTML.

Mal nenhum site pode prescindir de gráficos. Não é de admirar, portanto, que o assunto dos gráficos também tenha um lugar importante nesta série. Nestes e nos próximos treinamentos em vídeo, será mostrado como vocês podem incorporar gráficos em seus sites. No entanto, no início, outro aspecto é o foco principal: quais formatos de imagem são adequados para uso online? Na segunda parte, falaremos sobre como referenciar caminhos de imagem.

Como as imagens podem ser referenciadas em princípio foi mostrado na parte anterior. No entanto, o fim da linha no que diz respeito às imagens ainda não foi alcançado. Na verdade, é possível descrever mais detalhadamente as imagens por meio de atributos específicos. É isso que este vídeo pretende abordar no início. Na segunda parte, será descrito como as legendas das imagens podem ser implementadas usando a sintaxe do HTML5.

O sal na sopa da internet é a possibilidade de conectar conteúdos entre si por meio de hiperlinks. Se não existissem esses hiperlinks, a internet na sua forma atual não poderia ser imaginada. Quais as variantes que o HTML oferece em relação às definições de hiperlinks, vocês descobrirão neste e no próximo vídeo de treinamento.

O HTML oferece muito mais possibilidades em termos de hiperlinks do que foi mostrado no vídeo de treinamento anterior. Por exemplo, você pode definir links de e-mail e oferecer arquivos para download. Vocês aprenderão essas e outras variantes de hiperlinks neste vídeo de treinamento.

Para antecipar: especialmente no HTML5, os formulários deram um salto quântico. Graças a vários novos tipos de campos, é possível criar formulários muito interessantes. Vocês irão, é claro, conhecer essas novas possibilidades. No entanto, neste vídeo de treinamento, começaremos com as ferramentas necessárias para definir formulários. No início, trataremos da criação de campos de entrada de uma única linha. Vocês verão como definir esses campos, como pré-preenche-los e como torná-los não editáveis. Da mesma forma, vocês aprenderão a definição de campos de senha. Afinal, este é um tipo de campo que pode ser útil de tempos em tempos.

Neste vídeo, você aprenderá sobre outros tipos de campos com os quais poderá equipar seus formulários. Especificamente, trata-se de campos de seleção, botões de rádio e caixas de seleção. Todos esses são elementos importantes que são frequentemente necessários em formulários. Razão suficiente, portanto, para dar uma olhada mais detalhada nesses e em outros elementos.

Com o HTML5, houve muitas mudanças, especialmente no que diz respeito aos formulários. Razão suficiente para darmos uma olhada detalhada nas muitas novas funcionalidades de formulários que agora podem ser utilizadas. Afinal, os simples campos de entrada estão fora de moda. Finalmente é possível definir também controles deslizantes, campos de data, etc. - e tudo isso sem precisar de JavaScript.

O início no mundo dos formulários HTML5 foi pavimentado pelo treinamento em vídeo anterior. No entanto, o fim da linha ainda está longe de ser alcançado. Na verdade, o HTML5 tem muito mais a oferecer nessa área.

No HTML5, além dos tipos de campos apresentados, existem inúmeros outros aspectos interessantes. Assim, agora é possível, por exemplo, implementar facilmente uma função de autocompletar para campos de formulário seguindo o exemplo do Google. Essas e outras coisas são mostradas neste treinamento em vídeo.

Quem está lidando com o HTML5 não pode ignorar o tema da semântica. Neste e nos próximos vídeos de treinamento, vocês aprenderão os elementos mais importantes que o HTML5 traz consigo e que podem ser usados para estruturar documentos de forma sensata. Na verdade, essa estruturação lógica é indispensável se você deseja tornar suas páginas da web seguras para o futuro.

O HTML5 traz consigo vários elementos de estruturação novos. Quais são eles, foi mostrado no vídeo de treinamento anteriormente. Agora, o objetivo é utilizá-los na prática. Pois são esses elementos que garantem uma estruturação semântica dos documentos. Neste vídeo de treinamento, vocês principalmente irão conhecer os dois elementos article e section. Estes garantem a estrutura fundamental dos documentos HTML. No final deste vídeo, será dada também uma olhada nas diferenças que existem entre div, article e section.

Em HTML5, os documentos podem não só ser divididos em artigos e seções. Na verdade, existem muitos elementos adicionais, como cabeçalho, rodapé & Co., para uma estruturação semântica. Eles definitivamente merecem ser examinados mais de perto.

Neste último vídeo de treinamento da série de elementos semânticos, vocês aprenderão mais elementos de estruturação. Na verdade, o HTML5 também oferece elementos para áreas de navegação, marginalia e resumos.

Nas versões anteriores do HTML, a integração de conteúdos multimídia era um pesadelo. Com uma combinação de elementos object e embed, tentou-se trazer vídeos e sons para o site. A questão era se o vídeo incorporado realmente podia ser reproduzido. Também nesta área, houve uma grande evolução no HTML5.

Como incorporar vídeos, vocês já viram. Agora, os vídeos obviamente não são tudo o que se pode apresentar aos visitantes no site. Neste treinamento em vídeo, é descrito quais opções o HTML5 oferece para a incorporação de arquivos de áudio e filmes em Flash. Pois também é necessário exibir essas coisas de vez em quando em sua página.

Frames não existem mais no HTML5. Seus homólogos, os iFrames, no entanto, conseguiram sobreviver à era do novo HTML e estão presentes no HTML5. Enquanto os frames clássicos dividem uma página em seções independentes, é possível incorporar recursos variados em páginas da Web usando iFrames.

HTML é utilizado para estruturar o conteúdo. Quando se trata de projetar a página, entram em jogo as Cascading Stylesheets (CSS). Pois somente a combinação de CSS e HTML permite transformar uma estrutura HTML simples em páginas web atraentes. Razão suficiente para dar uma olhada mais detalhada no CSS.

Um termo que você encontrará repetidamente no contexto do CSS é o de "seletores". Através destes seletores, você finalmente define os elementos que devem ser formatados usando CSS. Neste vídeo de treinamento, você aprenderá os primeiros seletores. Aqui serão apresentados os seletores de elementos, IDs e universais. Com eles, você os utilizará diariamente ao projetar suas páginas da web com CSS.

Alguns seletores foram apresentados no vídeo de treinamento anterior. Claro que o CSS possui muitos outros seletores para oferecer.

Neste último vídeo de treinamento de seletores, apresento a vocês uma forma muito especial de seletores. Estes são conhecidos como pseudoclasse e pseudoelemento. São seletores que não se referem a elementos HTML específicos, mas são gerados pelo dispositivo de saída.

Neste e nos próximos treinamentos em vídeo, vou apresentar a vocês as propriedades CSS mais importantes. Não se trata de apresentar a vocês um guia de referência CSS neste ponto. Pelo contrário, você deve ter uma ideia do que é possível fazer com CSS. Vamos começar com a formatação de texto. Neste vídeo de treinamento, serão apresentadas todas as coisas relacionadas diretamente às chamadas Fontes. Observem que há outras propriedades relacionadas à formatação de texto, que serão mostradas no próximo vídeo de treinamento.

As propriedades de CSS apresentadas neste vídeo de treinamento permitem ajustar visualmente textos e caracteres. Por exemplo, é possível alterar os espaços entre as letras individuais e alinhar textos. Portanto, essas propriedades também ajudam a apresentar textos de forma atraente.

Naturalmente, as definições de cor e os fundos gráficos não podem faltar no CSS. As propriedades correspondentes são apresentadas neste vídeo-treinamento. De fato, o CSS tem várias possibilidades nessa área. Assim, não é possível apenas definir cores e imagens de forma simples. Repetir imagens de fundo também é possível.

Principalmente quando se trata de criar layouts de páginas web, vocês terão que lidar com a definição de margens externas e espaçamentos. Nos últimos vídeos de treinamento desta série, será implementado um projeto de exemplo abrangente, no qual será demonstrado de forma prática o uso dessas e de outras propriedades CSS.

O CSS oferece algumas propriedades interessantes para parágrafos e blocos de texto, as quais não quero deixar de compartilhar com vocês. Por exemplo, é possível alinhar parágrafos de texto à esquerda e à direita.

Quando se fala em molduras, a maioria certamente pensa primeiro em tabelas. E de fato, as molduras desempenham um papel importante em conexão com tabelas. No entanto, através de CSS, é possível também adicionar molduras a outros elementos. E como essas molduras acabam ficando, também pode ser determinado de forma explícita por meio de definições CSS.

Como definir listas, vocês provavelmente já sabem há muito tempo. Isso foi mostrado exaustivamente dentro desta série. No entanto, as listas não são necessariamente elegantes por padrão. Para que elas também tenham uma boa aparência visual, existem propriedades CSS correspondentes. Vocês aprenderão quais são e como usá-las neste vídeo de treinamento. Na segunda parte, trataremos dos chamados "counter", com os quais é possível realizar numerações mais complexas.

Quando se trata de criar layouts para websites, o chamado modelo de caixa será seu companheiro constante. Pois é através dele que se define, em última instância, como e onde os elementos serão posicionados.

Para poder posicionar elementos dentro da página da web nos locais desejados, é necessário usar propriedades CSS muito específicas.

No vídeo de treinamento anterior, o chamado princípio de flutuação foi brevemente mencionado. No entanto, o tema é tão complexo que aqui daremos uma olhada mais detalhada nesse conceito de flutuação. Na verdade, este é um conceito crucial no CSS. Porque só quando se entende esse tema é possível criar realmente páginas da web.

Nos treinamentos em vídeo anteriores, foram apresentados os fundamentos para trabalhar com HTML e CSS. Agora, naturalmente, também devem ser colhidos os primeiros frutos. Nos próximos treinamentos em vídeo, uma página web de exemplo será construída passo a passo. No entanto, neste treinamento em vídeo, vocês irão primeiro conhecer as diferentes variantes de layout. Pois a escolha da forma de layout adequada deve sempre ser o ponto de partida em seus pensamentos para o design de um site.

Eu parto de um layout de colunas típico para o nosso projeto prático. Antes de apresentar este projeto ao vivo e a cores, gostaria de mostrar de forma muito concreta como podem implementar layouts de colunas. O foco aqui serão layouts de duas e três colunas, afinal, estes ainda formam a base da maioria dos websites.

Nos seguintes treinamentos em vídeo, vou mostrar como implementar um layout de site passo a passo. Existem abordagens muito diferentes para isso. Muitas vezes, os layouts são criados no Photoshop. Os elementos individuais da página são cortados e depois reunidos como um site usando CSS e HTML. Isso é feito da mesma forma aqui. No entanto, em vez do Photoshop, eu uso o GIMP, que é gratuito. Os passos descritos também podem ser seguidos no Photoshop.

Os primeiros passos rumo ao seu próprio layout foram dados no vídeo de treinamento anterior. Naturalmente, ainda faltam muitos elementos. Estes serão adicionados neste vídeo de treinamento. Assim que o layout estiver pronto, segue-se para o corte, chamado de "slicing". Pois este é, em última instância, o passo de trabalho através do qual se torna possível implementar o design criado praticamente através de HTML e CSS.

Vocês criaram o layout. Agora vamos para a sua implementação prática. Neste vídeo de treinamento, vamos criar juntos a estrutura básica em HTML do site.

A estrutura básica da página está pronta, mas ainda parece bastante espartana. Este vídeo de treinamento vai expandir o conteúdo da página. O foco inicial é o menu localizado na parte superior da página. Em seguida, encontram-se o menu direito e o inferior.

Um aspeto crucial para um site visualmente apelativo é, naturalmente, a sua tipografia. Ao longo desta série, você já teve a oportunidade de conhecer as possibilidades que o HTML e o CSS oferecem no que diz respeito ao design de texto. Neste treinamento em vídeo, essas possibilidades serão utilizadas para melhorar o site. Aliás, não nos limitaremos apenas às variantes clássicas. A palavra-chave para a utilização de fontes "exóticas" é @font-face.

Normalmente, deve-se oferecer aos visitantes a possibilidade de entrarem em contato. No caso mais simples, basta anotar um número de telefone e/ou endereço de e-mail. Pode-se fazer assim, mas não é muito conveniente para os visitantes. Por isso, neste vídeo de treinamento, vamos criar um formulário através do qual os visitantes podem entrar facilmente em contato conosco. E, claro, vamos utilizar as possibilidades que o HTML5 e o CSS3 nos oferecem.

A estrutura básica e o design fundamental do formulário estão definidos e concluídos. E de fato, o formulário já está bastante atraente neste momento. No entanto, com o CSS3, há muito mais a ser explorado quando se trata de melhorar visualmente o formulário. Portanto, neste vídeo tutorial, o formulário será estilizado um pouco mais.

Neste ponto, com certeza já investiram muito tempo e esforço no desenvolvimento do vosso site. Desde a conceção até ao design do layout, e sua implementação em HTML e CSS. Portanto, é hora de finalmente apresentar o vosso site ao mundo. É exatamente isso que este vídeo-treinamento irá abordar. Vou mostrar-vos como colocar o site online. Primeiro, aprenderão como obter o provedor certo e o pacote de espaço na web adequado. Em seguida, os dados são carregados para o servidor com o popular FileZilla. E então, bem, o site estará realmente online.

Neste treinamento em vídeo, gostaria de dar a vocês uma breve visão geral do ambiente de desenvolvimento adequado para criar páginas da web. Aqueles que já escreveram sites completos ou páginas individuais menores geralmente já possuem esses editores e podem pular este vídeo.

Será mostrado:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

O HTML5 Boilerplate é um modelo poderoso para sites em HTML5 e CSS3; torna o HTML5 o mais compatível possível com os CrossBrowser e contém alguns ótimos modelos de código nas áreas de JavaScript, CSS3 e, é claro, HTML.

Neste vídeo-treinamento, quero apresentar-vos essas mesmas funcionalidades. Atualmente, não há um modelo melhor para começar com HTML5 e CSS3.

Neste treinamento em vídeo, gostaria de apresentar a vocês algumas ferramentas muito úteis com as quais é possível desenvolver HTML5 e CSS3.

Isso inclui:
html5css3box.com
kuler.adobe.com (agora https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com