HTML5: Primeiros passos na carreira de Desenvolvedor

Buenas! Seja muito bem-vindo(a) ao curso HTML5: Primeiros passos na carreira de Desenvolvedor. Esta é a nossa primeira aula, e pra começar, vamos entender o que é HTML.

HTML é uma linguagem de marcação, que usa um conjunto de tags (etiquetas ou marcações) para criar os sites da web. Resumindo: usamos HTML pra construir sites.

Atualmente a linguagem HTML está na versão 5.

Mas não te preocupa em saber o que cada coisa significa agora.

Nesta primeira aula vamos colocar a mão na massa e aprender a criar, do zero, nossa primeira página HTML5 de forma simples e objetiva.

Na próxima aula veremos mais detalhes sobre os conceitos e regras da linguagem HTML5.

Até lá, abraço.

Prof. Marnei Cardoso

Buenas! Na aula anterior vimos como criar, do zero, a nossa primeira página HTML5, seguindo alguns passos básicos. Nessa aula veremos mais detalhes sobre os conceitos e regras da linguagem.

Agora que já estamos mais familiarizados com a linguagem HTML5, vamos dar uma olhada mais detalhada nos seus conceitos e regras.

Mas afinal, o que é HTML5? Qual a importância para a nossa carreira como desenvolvedor?

✅ HTML5 é uma linguagem de marcação utilizada para desenvolvimento de sites.

✅ A linguagem HTML foi criada por Tim Berners-Lee no início da década de 90 para interligar instituições de pesquisa e compartilhar documentos. Na mesma época foi liberada a biblioteca de desenvolvimento WWW (World Wide Web), uma rede de alcance mundial, que junto com o HTML proporcionou o uso em escala mundial da Web.

✅ Atualmente as especificações da linguagem são controladas pela W3C (World Wide Web Consortium).

✅ Geralmente os sites possuem diversas páginas HTML5, como a página inicial, uma página explicando o propósito do site, uma página de contato etc.

✅ Cada página HTML5 consiste em uma série de tags, que podem ser consideradas os blocos de construção das páginas.

✅ As tags HTML5 podem ser escritas tanto em maiúsculas como em minúsculas. Mas por convenção os desenvolvedores adotaram como padrão, minúsculas.

✅ Não pode haver espaços na declaração das tags.

✅ Sempre devemos escrever as tags de abertura e de fechamento.

✅ HTML significa HyperText Markup Language ou Linguagem de Marcação de Hipertexto.

Na próxima aula veremos outras tags e seu funcionamento, na prática!

Até lá, abraço.

Prof. Marnei Cardoso

Buenas! Nesta aula vamos conhecer a tag "h".

Com ela podemos criar palavras destacadas para a nossa página, como um cabeçalho ou um título.

As tags de cabeçalho vão de "h1" até "h6", do maior para o menor.

As tags de cabeçalho são em bloco, o que gera uma quebra de linha e um espaçamento entre as linhas.

Na próxima aula veremos a tag "p" - Parágrafo.

Até lá, abraço.

Prof. Marnei Cardoso

Buenas! No HTML5, quando escrevemos o texto, ele não tem quebra de linha automática.

Por mais que a gente aperte Enter várias vezes para quebrar o texto, isso não vai acontecer.

Então, como fazemos para adicionar uma quebra de linha e deixar o nosso texto ou o conteúdo das nossas páginas mais organizado?

Nesta aula veremos como adicionar parágrafos e quebras de linha.

Para isso, temos que adicionar um marcador, uma indicação dizendo para o navegador, que ali, naquele ponto, queremos que seja renderizada (desenhada) na tela, a quebra de linha.

Veremos também como adicionar quebra de linha manualmente com a tag "br" e o conceito das tags que não precisam de fechamento, chamadas de "self closing" ou fechamento automático.

Na próxima aula veremos novas tags, de formatação.

Até lá, abraço.

Prof. Marnei Cardoso

Buenas! Quando escrevemos um texto, normalmente tem algumas palavras que queremos destacar, seja por questão visual ou para chamar a atenção, de quem está lendo, para aquele ponto.

Em editores de texto podemos simplesmente selecionar a palavra que queremos formatar e clicar na opção desejada para deixar em negrito, em itálico, sublinhado etc.

Em HTML5 estas formatações funcionam de forma um pouco diferente.

Não adianta copiar todo o texto já formatado lá no editor e colar no nosso arquivo HTML5.

Não funciona assim...

Então, como fazemos para formatar nosso texto?

Nesta aula veremos como usar as tags para formatar as palavras do nosso texto.

Na próxima aula veremos como criar listas ordenadas e não ordenadas.

Até lá, abraço.

Prof. Marnei Cardoso

Buenas! Nesta aula veremos como criar Listas Ordenadas e Listas Não Ordenadas.

Uma lista ordenada geralmente é uma lista de itens numerada, e por padrão é iniciada em 1.

Além dos números, podemos ordenar a nossa lista com letras.

Para fazer isto, temos que avançar um pouco nos estudos das tags, dos elementos HTML e começar a trabalhar com os atributos.

Daqui em diante nas aulas, vamos utilizar os atributos dos elementos, das tags HTML. Então precisamos entender o conceito e como utilizar.

Há algumas regras importantes:

◼ Os atributos são sempre especificados na tag inicial (tag de abertura)

◼ Os atributos geralmente são declarados com seu nome e seu valor

◼ Todos os elementos (tags) HTML5 podem ter atributos

◼ Atributos fornecem informações adicionais sobre um elemento

Sabendo isto, agora podemos adicionar atributos nas nossas tags. É muito simples.

Não te preocupa se não tiver entendido o conceito, porque veremos na prática agora.

E sempre que a gente for utilizar de novo, veremos juntos como fazer.

Além da Lista Ordenada, temos a Lista Não Ordenada, que não tem os números, apenas os pontos pretos, os marcadores.

Outra coisa legal que podemos fazer é colocar uma lista dentro de outra.

Na próxima aula veremos como tornar as nossas páginas ainda mais interessantes, criando ligações para outras páginas e sites.

Até lá, abraço.

Prof. Marnei Cardoso

Buenas! Nesta aula veremos como tornar as nossas páginas ainda mais interessantes, criando ligações para outras páginas e sites.

Para fazer isto usamos a tag "a" para criar uma ligação com outra página ou para uma determinada parte da página atual.

Dentro da tag "a", adicionamos o atributo "href", que significa "hyperlink reference", a referência deste hiperlink, para onde ele está apontando.

Resumindo: para onde leva ao clicar nele.

Na próxima aula veremos um recurso interessante, as âncoras.

Até lá, abraço.

Prof. Marnei Cardoso

Buenas! Além dos links para as nossas páginas ou para outros sites, também podemos adicionar âncoras.

As âncoras podem ser utilizadas para criar capítulos sobre determinado assunto ou para que o usuário possa se mover mais rapidamente em páginas e textos longos, como em sites que precisamos ficar descendo e subindo várias vezes, rolando e rolando a página, de forma repetitiva e cansativa.

Nesta aula veremos como tornar a navegação nas nossas páginas mais ágil e dinâmica, criando hiperlinks internos, as âncoras.

Para fazer isto usamos a tag "a".

Sim, é a mesma tag que usamos para criar os links, já que são basicamente a mesma coisa. Enquanto as âncoras são internas da página, e normalmente mais simples, os links são externos, para outras páginas do nosso site ou para outro site, e normalmente usam endereços mais complexos, com http, domínio etc.

Existe uma ferramenta extremamente útil e simples, que todos os desenvolvedores do mundo utilizam para simular textos e colocar conteúdo nas páginas dos sites enquanto estamos desenvolvendo: Lorem Ipsum.

Na próxima aula veremos uma ferramenta que vai aumentar muito a nossa produtividade!

O editor de código Visual Studio Code.

Até lá, abraço.

Prof. Marnei Cardoso

Buenas! Até agora, desde que começamos o curso, nós escrevemos todos os códigos direto no Bloco de Notas.

Apesar de ser muito importante começar pelo básico e digitar todos os comandos várias e várias vezes para fixar as tags e o jeito de escrever, chega num ponto em que começamos a perceber que não estamos tendo produtividade, porque cada coisa que vamos fazer demora bastante tempo.

Acredito que chegamos num ponto que já podemos subir de nível e ganhar acesso à uma ferramenta nova: um editor de código!

Quem já trabalha com desenvolvimento, sabe que ninguém usa o Bloco de Notas como sua ferramenta principal, justamente pela pouca produtividade.

Existem várias ferramentas que podemos utilizar para desenvolver, e dependendo da linguagem que estamos usando, algumas dessas ferramentas oferecem muitas vantagens e facilidades.

Nesta aula, vamos instalar, de forma simples e rápida, uma ferramenta que está cada vez mais sendo utilizada no desenvolvimento de sistemas para a internet, o Visual Studio Code.

Na próxima aula veremos como adicionar imagens nas páginas HTML5.

Até lá, abraço.

Prof. Marnei Cardoso

Buenas! Até agora vimos várias tags importantes na linguagem HTML5, mas ainda não temos nada visual, apenas textos e mais textos.

Também era assim no começo da web…

Lá nos anos 90, não era comum o uso de imagens nos sites, por vários motivos. Entre eles, a conexão muito lenta.

O modem discava para um servidor local e fazia a conexão com a internet, porém esse modem era bem limitado, alcançando uma conexão de 56 Kbps (quilobit por segundo).

Essa conexão era do tipo "dial-up", ou conexão discada, através da linha telefônica e ficava ocupando o telefone enquanto isso. Como uma ligação comum.

Comparando com uma conexão média atual, aquele valor era extremamente baixo, demorando vários minutos para carregar uma única imagem! Sim, vários minutos, dependendo do tamanho da imagem…

Para ter uma ideia: atualmente para baixar um arquivo do tamanho de um CD de música (700 MB), com uma conexão média atual, de 50 Mb, leva em torno de 2 minutos.

Para baixar o mesmo arquivo com uma conexão discada de 56 Kb, levaria até 1 semana…

Com a melhoria das estruturas da internet e, consequentemente, o aumento da velocidade de navegação, se tornou comum o uso de imagens nos sites.

As imagens podem melhorar a aparência das nossas páginas e trazer uma experiência mais interessante para os usuários.

Nesta aula vamos aprender como adicionar imagens nas páginas HTML5.

Na próxima aula veremos como criar tabelas.

Até lá, abraço.

Prof. Marnei Cardoso

Buenas! As tabelas em HTML5 servem para separar, organizar e exibir conteúdo, mostrando os valores de forma mais consistente, e não apenas soltos na páginas.

Também podemos usar uma tabela como estrutura de layout de páginas, para definir o posicionamento das tags HTML de forma visual.

Mas ATENÇÃO: esta forma não é mais utilizada profissionalmente e NÃO é recomendada.

Veremos mais sobre este assunto nas próximas aulas.

Nesta aula veremos como criar tabelas para exibir o conteúdo de forma organizada.

Na próxima aula vamos utilizar o que aprendemos para construir, do zero, um site com várias páginas e as ligações entre elas, vamos adicionar imagem, tabela e ainda conhecer mais algumas técnicas importantes.

Até lá, abraço.

Prof. Marnei Cardoso

Baixe os arquivos necessários para o desenvolvimento do projeto.

Buenas! Até agora vimos várias ferramentas e dicas que são utilizadas no desenvolvimento de sites e sistemas pra web. No entanto pra gente fixar bem o que aprendemos, nada melhor do que colocar a mão na massa e fazer!

Nesta aula vamos utilizar o que aprendemos até agora para construir, do zero, um site com várias páginas e as ligações entre elas, vamos adicionar imagem, tabela e ainda conhecer mais algumas técnicas importantes.

Espero que tenha gostado das aulas e que possa tirar proveito do conteúdo.

Com certeza tudo foi criado com muito carinho e dedicação.

Parabéns por ter completado o curso!

Obrigado por ter dedicado teu tempo e esforço!

Se ficou alguma dúvida, deixe um comentário!

Nos vemos no próximo curso!

Até lá, abraço.

Prof. Marnei Cardoso

Baixe os arquivos do projeto completo.