A diferença entre HTML, CSS e JavaScript - @Curso em Vídeo HTML5 e CSS3

Introdução

Visão geral da seção: Nesta seção, o apresentador dá as boas-vindas e introduz o tópico do capítulo 3.

História da Internet e Hospedagem de Sites

Visão geral da seção: O apresentador fala sobre os tópicos abordados nas aulas anteriores, como história da internet e hospedagem de sites. Ele também menciona a empresa Hostnet, que oferece soluções digitais para negócios, incluindo hospedagem de sites e registro de domínios.

Registro de Domínio e Hospedagem

• A Hostnet oferece registro de domínio em várias terminações, como .com.br, .net e outras.

• A empresa também oferece hospedagens com servidores modernos localizados no Brasil.

• Os servidores têm serviços de backup constante, personalização do ambiente com painel exclusivo da Hostnet e suporte técnico eficiente.

HTML e CSS

Visão geral da seção: O apresentador explica a diferença entre HTML e CSS. Ele esclarece que essas tecnologias não são linguagens de programação.

HTML vs. CSS

• HTML é uma linguagem representada no feminino singular porque é a linguagem HTML.

• CSS é referenciado no feminino plural porque são as folhas de estilo.

• HTML e CSS não são linguagens de programação; elas são linguagens para criação de sites.

• Em vez de dizer que programa em HTML e CSS, é mais correto dizer que desenvolve ou cria sites com essas tecnologias.

Siglas

• HTML significa Hypertext Markup Language.

HTML, CSS e JavaScript

Visão geral da seção: Nesta seção, o professor explica as diferenças entre HTML, CSS e JavaScript e como eles trabalham juntos para criar sites interativos.

HTML é uma linguagem de marcação focada em conteúdo

• HTML é uma linguagem de marcação focada em conteúdo.

• Conteúdo pode ser texto, imagem, vídeo ou tabela.

• Tudo que é focado em conteúdo é feito em HTML.

CSS é uma linguagem de estilo focada no design

• CSS é uma linguagem de estilo focada no design.

• Cores, sombras, tamanhos e posicionamento são definidos pelo CSS.

JavaScript é uma linguagem de programação para interatividade

• JavaScript é uma linguagem de programação para interatividade.

• As três tecnologias (HTML, CSS e JavaScript) trabalham juntas para criar sites interativos.

• É importante aprender as três tecnologias juntas para construir bons sites.

Instalando e utilizando a extensão Web Developer

Visão geral da seção: Nesta seção, o instrutor ensina como instalar e utilizar a extensão Web Developer no Google Chrome para desabilitar JavaScript e CSS em um site.

Instalando a extensão Web Developer

• Acesse a Chrome Web Store no Google Chrome.

• Pesquise por "Web Developer" na loja.

• Clique na engrenagem ao lado da extensão "Web Developer".

• Clique em "Usar no Chrome" para instalar a extensão.

Desabilitando JavaScript em um site

• Clique na engrenagem da extensão "Web Developer".

• Na primeira aba, clique em "Desativar JavaScript".

• Atualize o site para ver as mudanças.

Desabilitando CSS em um site

• Clique na engrenagem da extensão "Web Developer".

• Na segunda aba, clique em "Desativar todos os estilos CSS".

• Atualize o site para ver as mudanças.

Desabilitando JavaScript no YouTube

Visão geral da seção: Nesta seção, o instrutor demonstra como desabilitar o JavaScript no YouTube e como isso afeta a interatividade do usuário com o site.

Desabilitando JavaScript no YouTube

• Clique na engrenagem da extensão "Web Developer".

• Na primeira aba, clique em "Desativar JavaScript".

• Atualize o site do YouTube para ver as mudanças.

Efeitos de desabilitar JavaScript no YouTube

• Sem habilitação de JavaScript, não é possível clicar nos vídeos ou ter acesso à interatividade do usuário.

• Para restaurar a interatividade, é necessário habilitar o JavaScript novamente e atualizar a página.

Conclusão

Visão geral da seção: Nesta seção, o instrutor conclui o vídeo reforçando a importância de entender as diferenças entre HTML, CSS e JavaScript para desenvolver sites eficientes. Ele também incentiva os alunos a continuarem aprendendo com o curso.

• É importante entender as diferenças entre HTML, CSS e JavaScript para desenvolver sites eficientes.

• A extensão Web Developer pode ser útil para desabilitar JavaScript e CSS em um site.

• O YouTube é altamente dependente do JavaScript para sua interatividade.

• Continuar aprendendo é fundamental para se tornar um bom desenvolvedor de sites.

Introdução ao HTML

Visão geral da seção: Nesta seção, Guanabara introduz o HTML como uma linguagem de marcação e explica a anatomia de uma tag.

Anatomia de uma tag em HTML

• As tags em HTML são colocadas entre colchetes angulares (< >).

• A maioria das tags tem abertura e fechamento.

• Para transformar um título, é necessário usar a tag H1.

• Todo parágrafo é delimitado entre as tags P e /P.

• As tags podem ter parâmetros e valores específicos.

Estilo CSS

• O estilo CSS geralmente está dentro da tag Style do HTML.

• Para configurar o H1, é necessário utilizar seletores.

• É possível mudar a família da letra utilizando o seletor ponto Family.

Anatomia das CSS

Visão geral da seção: Nesta seção, o instrutor explica a anatomia das CSS e como elas funcionam.

Seletores e declarações

• Os seletores são usados para selecionar elementos HTML.

• As declarações são pares de propriedade e valor que definem o estilo dos elementos selecionados.

Estrutura básica do documento HTML

• Todo documento HTML tem uma estrutura básica obrigatória.

• A primeira linha contém a tag <!DOCTYPE html>, que define a versão do HTML sendo usada.

• A tag <html> é usada para envolver todo o conteúdo do documento.

• O atributo lang pode ser usado na tag <html> para especificar o idioma principal do site.

Áreas da cabeça e corpo

• Todo documento HTML tem duas áreas bem definidas: área da cabeça (head) e área do corpo (body).

• A área da cabeça é onde as configurações são feitas, enquanto a área do corpo é onde fica o conteúdo visível no navegador.

Configurações importantes na área da cabeça

• A linha <meta charset="utf-8"> é importante para garantir compatibilidade com caracteres especiais em português.

• A linha <meta name="viewport" content="width=device-width, initial-scale=1.0"> garante que o site seja visualizado corretamente em dispositivos móveis.

Como funciona HTML e CSS

Visão geral da seção: Nesta seção, o instrutor explica como o HTML e o CSS funcionam juntos para criar um site. Ele também descreve como o navegador analisa linha por linha do código e gera o resultado visual.

Funcionamento de HTML e CSS

• O código HTML e CSS é colocado no servidor.

• O usuário digita a URL no cliente.

• O DNS retorna o IP do servidor.

• O servidor envia uma cópia do HTML e CSS para a máquina do usuário.

• O navegador analisa linha por linha do código e gera o resultado visual na tela.

Próxima aula: Mão na massa!

Visão geral da seção: Nesta seção, o instrutor encerra a parte teórica da aula e incentiva os alunos a revisar as anotações antes de começar a próxima aula prática. Ele também informa que os alunos precisam instalar um navegador e um editor de código antes da próxima aula.

Preparação para próxima aula

• Instale um navegador (Google Chrome recomendado).

• Instale um editor de código.

• Revisite as anotações anteriores em caso de dúvidas.

• Esteja pronto para começar com atividades práticas na próxima aula.