Por GustavoGuanabara
Curso completo para quem quer aprender a criar sites utilizando as tecnologias de HTML5 + CSS3 + JavaScript de uma maneira simples e objetiva. O professor Gustavo Guanabara vai mostrar passo-a-passo como criar um site completo utilizando as três principais tecnologias do momento.
HTML5 é uma linguagem de marcação hipertexto utilizada para criar sites. A versão 5 da linguagem foi homologada e lançada a partir de 2009, mas só ganhou mercado no final de 2012 com o surgimento dos grandes navegadores compatíveis.
Nesta primeira aula, aprenda como a Internet surgiu e evoluiu até o que temos hoje em dia. Um apanhado geral de todos os inventores e invenções que fizeram parte da evolução da maior rede mundial.
Você sabe como surgiu a linguagem HTML? Conhece a evolução desde a HTML1 até HTML5? Sabe quais são as principais funções W3C? Veja nessa aula a resposta para todas essas perguntas e muito mais.
Entenda o funcionamento de toda a infraestrutura que permite o funcionamento da internet.
Aula 100% prática de HTML5 com CSS3. Conheça as tags básicas e saiba como criar um documento no novo padrão.
Nesta Aula do Curso de HTML5 você vai aprender:
- Como utilizar o !DOCTYPE para HTML5
- Como definir as áreas de HEAD e BODY no HTML5
- Diferença entre as tags H1, H2, H3, H4, H5 e H6 em documentos HTML5
- Como definir as áreas DIV, HEADER e HGROUP no HTML5
- Como definir um parágrafo no documento HTML5
Aprendendo um pouco mais sobre títulos, parágrafos, quebras de linha e símbolos especiais em HTML5.
Hierarquia de títulos em HTML5 com HGROUP: entenda que a hierarquia de títulos não depende apenas de ordem em um mesmo grupo de títulos. Tudo é uma questão de significado ou semântica HTML5.
Parágrafos em HTML5 com P: Os parágrafos delimitam textos agrupados em HTML5. Todo parágrafo deve estar limitado com a tag P e /P.
Quebras de linha usando HTML5 com BR: A quebra de linhas vai desviar a reprodução do texto no início da linha abaixo da atual. A tag BR não possui fechamento.
Quebra de palavras em HTML5: Usando a nova tag WBR em HTML5, você consegue criar quebra de palavras em seu site. Qualquer palavra muito longa pode ser feita utilizando a tag WBR.
Hifenização em HTML5: No caso de criar uma palavra grande, você pode utilizar a marca SHY para gerar a separação de sílabas com hifenização. É uma das maneiras mais simples de separar sílabas em HTML5.
Caracteres especiais e símbolos em HTML5: Os caracteres especiais permitem criar alguns símbolos em seu site feito em HTML5, como nbsp lt gt le ge pound yen euro copy reg trade pernil sum infin times plusmn oplus radic ne delta lambda omega phi larr rarr uarr darr harr spades clubs hearts diams.
HTML5 é uma tecnologia nova e que rompe com alguns conceitos estabelecidos na versão 4.0 da linguagem. Agora, tudo aquilo que é feito em HTML5 tem um caráter semântico, enquanto a parte visual e de formatação ficará por conta das folhas de estilo CSS.
Semântica em HTML5: a partir de agora, as tags HTML5 possuem uma função semântica, o que diz para o navegador e mecanismos de busca que cada área do documento tem um significado. Nessa aula, vamos compreender algumas tags novas.
Itálico em HTML5: Utilizando a tag I e a tag EM Tags depreciadas HTML: Antigamente, a tag U era utilizada para sublinhar trechos de texto. Agora, tudo é realizado via CSS, com text-decoration: underline em uma SPAM. As tags S ou STRIKE foram substituídas pela tag DEL.
Tipos de text-decoration com CSS: Entenda os tipos de decoração para textos em CSS como undeline, overline, line-through e none.
Herança de características em CSS3
Formatações de Negrito em HTML5 com CSS3: O parâmetro text-weight como normal, bold e bolder.
Alinhamento de textos em HTML5 com CSS: A formatação com o align no código HTML também foi depreciada. A partir de agora, utilizaremos o text-align do CSS com os valores left, right, center e justify.
Indentação de parágrafos com HTML5: Utilizando text-indent em CSS você pode causar deslocamentos laterais no início de parágrafos.
Configuração global nas CSS: Utilizando a tag STYLE do HTML5, você pode criar formatações de folha de estilo que vão funcionar para todos os objetos em uma página.
Tags de formatação em HTML5: Entenda o funcionamento de tags como SUP, SUB, CODE e PRE.
Algumas tags e parâmetros foram descontinuadas do HTML4 para o HTML5, incluindo o FONT COLOR e o BGCOLOR da tag BODY. A partir de agora, devemos utilizar o parâmetro STYLE de qualquer tag e utilizar as configurações de background-color e color do CSS.
A utilização de cores através de seus nomes (como red, green, blue, etc) é algo bastante limitado. Por conta disso, vamos aprender nesse vídeo, como utilizar o código para cores RGB.
Para o código de cores #60453E, por exemplo, temos as quantidades de vermelho/red (60), verde/green (45) e azul/blue (3E). A junção desses códigos vai gerar uma cor única, em um espectro que possui milhões de combinações. Cada valor é representado em base hexadecimal.
Outra maneira de utilizar cores em CSS é utilizando o modificador rgb(), passando as quantidades de vermelho, verde e azul em valores representados na base decimal.
Em HTML5 e CSS3, utilizando o rgba() nas CSS3, podemos ainda incluir a configuração do canal alpha, que vai de 0 até 1.
Em HTML5 e CSS3, também podemos criar cores utilizando a representação percentual de Matiz (Hue), saturação (Saturation) e luminosidade (Brightness) utilizando a função hlsa() das folhas de estilo.
De maneira similar, temos também a função hlsa() para indicar também o canal alpha.
Podemos também colocar imagens no fundo do site utilizando o parâmetro background e utilizar a função url() do CSS para carregar uma imagem.
Como inserir uma imagem em HTML5? Nessa aula, veremos como utilizar a tag IMG para inserir fotos em um site feito em HTML5.
Qual a diferença entre PNG e JPG? O formato PNG é ligeiramente maior, mas possibilitam transparências. O formato JPEG é mais otimizado, pois suporta compressão sem uma perda perceptível na qualidade visual.
Utilizando os parâmetros WIDTH ou HEIGHT, você pode redimensionar uma imagem pelo HTML. Porém, a melhor maneira de se diminuir o tamanho do arquivo é utilizar um editor de imagens para realizar o redimensionamento.
Outra coisa muito importante é utilizar a opção de “Exportar para Web” do seu editor de imagem. Isso gera um arquivo menor ainda, mais otimizado para ser utilizado em sites construídos com HTML5. Durante a aula, será mostrado como reduzir um arquivo de exemplo em praticamente 300KB.
Como carregar uma imagem em HTML5 que esteja em uma outra pasta?
Novos parâmetros FIGURE e FIGCAPTION. O HTML5 ganhou um caráter semântico, e utilizar legendas de imagens em HTML5 é um ótimo recurso para otimizar seu site para mecanismos de busca, técnicas conhecidas como SEO.
Formatar imagens utilizando folhas de estilo CSS é algo muito simples e requer o conhecimento de alguns parâmetros específicos em HTML5 e CSS3. Nessa aula, você verá como criar um efeito de transparência e animação com CSS em uma legenda que vai flutuar sobre a foto, que também terá uma elegante borda simulando um retrato sobre a mesa.
Estilos CSS em arquivos separados Quando as formatações com folhas de estilo CSS começam a ficar grandes demais, o ideal é trabalhar com arquivos CSS externos. Para isso, utilizamos a tag LINK com o parâmetro REL de valor STYLESHEET.
Comentários em CSS Para comentar pedaços de código em CSS, utilizamos os caracteres /* e logo após a descrição do comentário, colocamos */
Referenciando CLASS e ID A diferença entre CLASS e ID dentro das CSS é na referência. Para usar o CLASS, utilizamos o caractere de ponto (.) e para o ID, utilizaremos a cerquilha (#)
Tamanho de objetos em CSS Utilizando os parâmetros WIDTH (largura) e HEIGHT (altura), você pode modificar o tamanho de um objeto utilizando CSS.
Posição de objetos em CSS Utilizando os parâmetros TOP (topo) e LEFT (esquerda)
Utilizando o POSITION em CSS – Diferença entre RELATIVE e ABSOLUTE Existem dois tipos de posicionamento para CSS: com o POSITION RELATIVE, ele terá a localização feita em relação à sua posição atual. Para POSITION ABSOLUTE, ele terá a localização feita em relação a todo o conteúdo.
CSS com BOX-SIZING com o parâmetro BORDER-BOX.
Modificando opacidade com CSS utilizando o parâmetro OPACITY.
Utilizando o HOVER em um objeto com CSS vai fazer com que uma formatação específica
TRANSITION com CSS adiciona efeitos de transição ao modificar características visuais em um objeto.
Menus e listas em HTML5.
Nessa aula, vamos aprender como criar um menu em HTML5 utilizando a nova tag NAV.
Além disso, veremos como criar listas em HTML5 utilizando as tags OL UL e LI.
A tag OL (Ordered lists) vai criar uma lista ordenada. Utilizando os valores do parâmetro TYPE, você pode criar uma lista ordenada numérica (1), alfabética (a/A) ou em algarismos romanos (i/I). O parâmetro START da tag OL vai indicar onde vai começar a contagem dos itens. O parâmetro START aceita apenas valores numéricos, independente da maneira utilizada para numerar.
A tag UL (Unordered lists) vai criar uma lista com demarcadores ou lista não-ordenada. O parâmetro TYPE para OL suporta os valores CIRCLE, SQUARE ou DISC. Para a tag UL, o parâmetro START simplesmente não funciona.
Podemos também criar hierarquia com listas, utilizando tags OL e UL aninhadas.
Criando links em sites HTML5.
Vamos entender como realizar ligações entre sites ou entre páginas dentro de um mesmo site. Para criar um link em HTML5, basta criar uma âncora utilizando a tag A.
O parâmetro Hypertext Reference, ou HREF. Ele cria uma referência hipertexto para outras páginas.
O parâmetro TARGET da tag A vai permitir indicar em qual janela o conteúdo será aberto. O valor _blank vai permitir abrir em uma janela em branco, enquanto o parâmetro _self vai abrir o conteúdo na janela atual.
Veja como criar um menu suspenso utilizando apenas HTML5 e CSS3.
A partir do HTML5, a tag NAV é utilizada para criar áreas de navegação. Com o CSS3, podemos configurar posicionamento, cores, efeitos de transição e outros comportamentos. Nessa aula, veremos como transformar uma lista com demarcadores em um menu flutuante para o nosso site.
Para realizar essas configurações, aprenderemos alguns parâmetros de CSS3, como:
Modificar o formato da lista, eliminando os demarcadores com o LIST-STYLE Utilizando o TEXT-TRANSFORM com o valor UPPERCASE, alteramos todas as letras de cada item para maiúsculas, independente da maneira que foram escritas.
Com a configuração DISPLAY com o valor INLINE-BLOCK, você vai conseguir alterar a posição de cada item da lista.
As propriedades BACKGROUND-COLOR e COLOR modificam a cor do objeto.
Com o PADDING, vamos configurar o espaço interno de cada objeto, enquanto o MARGIN vai definir o espaço externo de cada um deles.
O POSITION do CSS3, vai configurar qual será a base de movimentação em relação ao seu objeto container. Os valores aceitos são ABSOLUTE e RELATIVE.
As propriedades LEFT e TOP vão configurar a posição do objeto em suas grandezas em pixels para o lado esquerdo e borda superior, respectivamente.
Utilizando a propriedade DISPLAY com o valor NONE, podemos esconder determinados objetos utilizando CSS3.
Vamos aprender alguns efeitos bem interessantes utilizando o CSS3.
Utilizando o modificador :HOVER aplica o efeito quando movemos o mouse por cima de um objeto.
Com o seletor TRANSITION, podemos monitorar alterações nos objetos e fazer efeitos de transição.
Template HTML5 grátis. A construção de interfaces em HTML5 necessita da organização das áreas do nosso site. Podemos fazer isso em qualquer tag, incluindo DIV, HEADER, ARTICLE, FOOTER e muitas outras.
O modificador WIDTH vai configurar a largura de um objeto. O posicionamento em CSS pode ser ABSOLUTE ou RELATIVE.
A centralização de um objeto em CSS3 é utilizando o parâmetro MARGIN.
Nessa aula, veremos como criar cabeçalhos para sites HTML5 utilizando CSS3 e alguns parâmetros adicionais para realizar uma formatação.
– Os modificadores BORDER-TOP, BORDER-BOTTOM, BORDER-LEFT e BORDER-RIGHT configura linhas em volta do objeto e aceita valores como SOLID, DOTTED, DASHED, etc.
Para carregar imagens via CSS, podemos utilizar o modificador BACKGROUND usando a função URL para carregar o arquivo no fundo dos objetos. Utilizando o parâmetro NO-REPEAT para que ele não repita o objeto.
Para a configuração de texto, utilizaremos FONT-FAMILY, FONT-SIZE, COLOR e TEXT-SHADOW.
Além disso, configuramos os espaços internos e periféricos dos objetos com os parâmetros MARGIN e PADDING e suas variações MARGIN-BOTTOM e MARGIN-TOP.
Como mudar a fonte de um site usando CSS3 e um arquivo True Type Font (TTF) com fontes personalizadas em CSS3.
Utilizando o modificador @FONT-FACE das CSS3, com o FONT-FAMILY e o SRC, poderemos criar fontes personalizadas utilizando CSS3.
O usuário que visita o seu site não precisa ter a fonte instalada. Ela é instalada automaticamente.
Como usar Google Fonts para inserir uma fonte personalizada do seu site utilizando o @IMPORT.
Como usar as tags SECTION, ASIDE e FOOTER. O HTML5 possui algumas tags que dão significado ao conteúdo da página.
SECTION: Cria uma sessão que vai poder conter vários artigos (ARTICLE) ou objetos.
ASIDE: São conteúdos periféricos, que estão diretamente relacionados ao conteúdo do artigo principal.
FOOTER: É o rodapé da página ou do conteúdo específico.
Para configurar essas tags e utilizar o posicionamento correto, utilizaremos o CSS3 com os modificadores DISPLAY: BLOCK e o FLOAT para gerar uma flutuação.
Caso seja necessário interromper a flutuação, utilizaremos o modificador CSS CLEAR:BOTH para eliminá-la.
Como criar tabelas em HTML5? Veremos nessa aula, como utilizar as tags TABLE, CAPTION, TR, TD e muitas outras usadas para criar tabelas em sites HTML.
Cada linha da tabela em HTML será uma Table Row, ou TR. Cada célula de dados será uma Table Data, ou TD.
Observação: A partir do HTML5, os fechamentos das tags /TR e /TD são opcionais e podem ser omitidas.
Utilizando CSS3, podemos utilizar alguns modificadores para formatar a tabela, usando BORDER para criar bordas sólidas para TABLE, TR e TD.
O modificador BORDER-SPACING das CSS modifica o espaço entre as células de uma tabela.
No HTML, podemos realizar ROWSPAN, que vai criar uma expansão de linha nas células.
De maneira similar, utilizando COLSPAN, teremos uma expansão de coluna nas células de uma tabela HTML5.
Veja como criar estilos de formatação com CSS3 para tabelas feitas em HTML5.
Na aula anterior do Curso de HTML5, fizemos a criação de uma TABLE utilizando parâmetros como COLSPAN e ROWSPAN. Nessa aula, formataremos a tabela criada utilizando CSS3, com modificadores como VERTICAL-ALIGN.
Veja como formatar cada coluna de uma tabela com cores diferentes, utilizando o parâmetro CLASS diferentes para cada coluna.
Veja como construir interfaces complexas utilizando apenas HTML5 e CSS3. Na versão 5, temos várias tags semânticas como HEADER, SECTION, ASIDE, NAV, FOOTER e ARTICLE.
Para criar um artigo em HTML5, utilize a tag ARTICLE. Os conteúdos relacionados a esse artigo podem ser tratados como ASIDE.
É importante saber que podemos usar a tag HEADER para qualquer tipo de cabeçalho, não apenas para o cabeçalho do site. Nessa aula, veremos que um ARTICLE também pode possuir um cabeçalho HEADER.
Para formatar os componentes, utilizamos alguns modificadores das CSS3, como: margin, padding, color, background-color, font-family e muito mais.
Introdução ao JavaScript. Veja como criar programas simples com a linguagem JS, criada e popularizada pela empresa Netscape.
Vamos aprender alguns comandos específicos e introdutórios do JavaScript, como o alert, document.write, Date
História do JavaScript: em 1992, a OpenWave estava criando a linguagem Cmm, rebatizada para ScriptEase, quando foi comprada pela Netscape. O projeto então passou a se chamar Mocha e logo em seguida (1995) teve seu nome modificado para LiveScript. Por conta de uma negociação com a Sun Microsystems (criadora do Java), uma jogada de marketing mudou o nome da linguagem para JavaScript.
JavaScript não é Java. Ela apenas usa nomes semelhantes por conta da jogada explicada anteriormente. Ambas se parecem por conta da origem, baseada em Linguagem C (C-like).
Atualmente, existe uma versão padronizada do JavaScript, o ECMAScript que está na versão 5.0. O JavaScript atualmente está na versão 1.8.5.
O JavaScript se popularizou e temos várias tecnologias relacionadas, como Ajax, jQuery e CommonJS.
HTML5 + JavaScript
Entenda JavaScript e veja como trabalhar com FUNCTION para criar funções que são disparadas de acordo com alguns eventos no HTML5, como ONCLICK e ONMOUSEMOVE.
Aprenda a referenciar objeto dentro do JavaScript com DOCUMENT.GETELEMENTBYID().
Como criar funções em JavaScript que recebem parâmetros. Além disso, veremos o conceito de máquina de estados para aprimorar ainda mais nossos scripts.
Como juntar JavaScript e HTML5 em uma mesma página. Veja como integrar scripts aos seus códigos estáticos em linguagem HTML.
Usando os métodos ONMOUSEOVER e ONMOUSEOUT do JavaScript para executar um procedimento em script chamado mudaFoto().