Neste artigo, vamos explorar os fundamentos do HTML e CSS, as linguagens essenciais para a construção de páginas web. Você aprenderá como criar estruturas básicas, formatar textos, inserir imagens e links, além de entender a importância dessas tecnologias no cenário atual de desenvolvimento web.

Apresentação

Meu nome é João, sou engenheiro de software sênior na Intera. Trabalho na área há cerca de 13 anos, já atuei em várias empresas, inclusive na Alemanha. Neste curso, serei o professor responsável pelo módulo introdutório de HTML e CSS.

  • Experiência de 13 anos na área de engenharia de software
  • Atuação em diversas empresas, incluindo experiência internacional na Alemanha
  • Responsável pelo módulo introdutório de HTML e CSS em curso

Como os sites são construídos

Antes de tudo, queria mostrar como os sites da internet são construídos. Vamos abrir o site da DNC, clicar com o botão direito e selecionar ‘Exibir código-fonte da página’. Esses passos podem ser repetidos em qualquer site. O que veremos é o código-fonte, composto por HTML, CSS e JavaScript. Todas as páginas web utilizam pelo menos o HTML, que é uma linguagem de marcação, não de programação. O HTML é responsável por definir elementos como botões, formulários, textos, títulos, tabelas e tudo o que há em sites. Já CSS e JavaScript são opcionais, para aprimorar o visual e interatividade. Porém, o HTML é a base da web. Redes sociais, mecanismos de busca e qualquer site usam HTML como base.

  • Processo de construção de sites da internet
  • Composição do código-fonte: HTML, CSS e JavaScript
  • Importância do HTML como base para definição de elementos em sites

Criando uma página HTML

Vou demonstrar como criar uma página HTML. Não se preocupe em decorar o código, o objetivo é apenas mostrar o funcionamento. Sinta-se à vontade para repetir em seu computador e criar seu primeiro site. Abrindo o Bloco de Notas, escreveremos: <html> <head> <title>Meu primeiro site</title> </head> <body> Hello world! </body> </html> Para funcionar no navegador, é necessário salvar no formato .html. No Windows, selecione ‘Todos os arquivos’ na caixa de diálogo. Ao abrir o arquivo, veremos nosso primeiro site! É muito simples, mas é de códigos HTML que a web é const

  • Demonstração de criação de uma página HTML
  • Simplicidade na criação de um site utilizando HTML
  • Passos para salvar e visualizar a página no navegador

Editores de código

Na criação de sites, a escolha de um bom editor de código é crucial. O Visual Studio Code é uma opção popular e gratuita, que oferece recursos avançados para programadores. Além disso, existe uma versão online do Visual Studio Code, chamada vscode>.dev, que proporciona a flexibilidade de programar diretamente do navegador. Essas ferramentas são essenciais para o desenvolvimento de sites e garantem uma experiência mais eficiente e produtiva.

  • O Visual Studio Code é uma opção popular e gratuita para edição de código
  • A versão online do Visual Studio Code, vscode>.dev, oferece flexibilidade para programar diretamente do navegador
  • As ferramentas de edição de código são essenciais para o desenvolvimento de sites

Próximos passos

Após a escolha do editor de código, é importante aprofundar o conhecimento em HTML, compreendendo sua estrutura e explorando novas tags. A prática é fundamental para fixar o conteúdo, por isso, é recomendado utilizar os editores de código mencionados para desenvolver sites do zero, utilizando HTML e CSS. Dessa forma, será possível aplicar o conhecimento teórico na prática, consolidando a compreensão e habilidades na construção de páginas web.

  • Aprofundar o conhecimento em HTML é fundamental para o desenvolvimento de sites
  • A prática é essencial para fixar o conteúdo teórico
  • Utilizar os editores de código mencionados para desenvolver sites do zero é uma maneira eficaz de aplicar o conhecimento na prática

Estrutura básica de um documento HTML

A estrutura básica de um documento HTML envolve as tags <html>, <head> e <body>. A tag <html> envolve todo o conteúdo da página, enquanto a tag <head> contém informações técnicas e de configuração, e a tag <body> engloba o conteúdo visível. É fundamental que essa estrutura padrão esteja presente em todos os documentos HTML, garantindo a correta formatação e organização das páginas.

  • A estrutura básica de um documento HTML envolve as tags <html>, <head> e <body>
  • É fundamental que a estrutura padrão esteja presente em todos os documentos HTML
  • A correta formatação e organização das páginas é garantida pela estrutura básica de um documento HTML

A tag

A tag <title> desempenha um papel crucial em um documento HTML, pois define o título exibido na aba do navegador e nos resultados de busca. É fundamental utilizar um título descritivo e único para cada página, visando aprimorar a experiência do usuário e a visibilidade nos mecanismos de busca. Um título bem elaborado pode influenciar significativamente o tráfego e a relevância de um site na internet.

  • A tag <title> define o título exibido na aba do navegador e nos resultados de busca
  • Utilizar um título descritivo e único para cada página é fundamental para aprimorar a experiência do usuário e a visibilidade nos mecanismos de busca
  • Um título bem elaborado pode influenciar significativamente o tráfego e a relevância de um site na internet

Parágrafos e quebras de linha

As tags <p> e <br> desempenham funções distintas na estrutura de um documento HTML. Enquanto a tag <p> é utilizada para inserir parágrafos, a tag <br> é empregada para inserir quebras de linha. Essas tags são fundamentais para a formatação e organização do conteúdo em uma página web, contribuindo para uma melhor experiência de leitura e compreensão por parte dos usuários.

  • A tag <p> é utilizada para inserir parágrafos em um documento HTML
  • A tag <br> é empregada para inserir quebras de linha na estrutura de um documento HTML
  • As tags <p> e <br> contribuem para a formatação e organização do conteúdo em uma página web

Uso da tag

A tag <br> é utilizada para criar uma quebra de linha no conteúdo HTML.

  • A tag <br> não possui fechamento.
  • É útil para separar visualmente partes do conteúdo.

Cabeçalhos em HTML

Os cabeçalhos em HTML são representados pelas tags <h1> até <h6> e servem para definir títulos e subtítulos no conteúdo.

  • Costuma-se usar apenas um <h1> por página, pois ele representa o título principal.
  • Os cabeçalhos de nível 2 a 6 são utilizados para subtítulos de diferentes níveis.

Formatação de texto

Além dos cabeçalhos, algumas tags permitem formatar o texto, como negrito, itálico, sublinhado e marcação de texto.

  • As tags <b>, <i>, <u> e <mark> são utilizadas para aplicar diferentes estilos de formatação ao texto.
  • Essas formatações podem ser usadas para enfatizar palavras ou trechos importantes.

Listas em HTML

Em HTML, é possível criar listas ordenadas e não ordenadas, utilizando as tags <ul> e <ol>.

  • As listas não ordenadas são úteis para itens sem uma ordem específica.
  • Já as listas ordenadas são ideais para itens que precisam ser numerados.

Os links são criados com a tag <a> e permitem direcionar o usuário para outras páginas da web.

  • O atributo href define o destino do link.
  • Os links são essenciais para a navegação e interligação entre páginas.

Inserção de Imagens

As imagens são inseridas em páginas HTML utilizando a tag <img>, e o atributo src indica o caminho da imagem.

  • As imagens são importantes para enriquecer visualmente o conteúdo de uma página.
  • Devem ser utilizadas de forma a complementar e ilustrar o texto.

Comentários em HTML

É possível adicionar comentários no código HTML utilizando a tag <!-- -->, que não são visíveis no navegador.

  • Os comentários são úteis para incluir anotações e observações no código.
  • Podem ajudar outros desenvolvedores a compreender o propósito de determinadas partes do código.

Conclusão

Dominar o HTML e CSS é o primeiro passo para se tornar um desenvolvedor web competente. Com essas bases sólidas, você estará preparado para evoluir para tecnologias mais avançadas, como JavaScript, e criar sites profissionais do zero.