Formatações adicionais em HTML - @Curso em Vídeo HTML5 e CSS3

Introdução

Visão geral da seção: Nesta seção, o instrutor dá as boas-vindas aos alunos e introduz o curso de HTML com CSS. Ele menciona que o curso é uma sequência de aulas e que é importante ter paciência para acompanhar todo o conteúdo.

Bem-vindo ao Curso de HTML com CSS

• O instrutor saúda os alunos e os convida a acompanharem o curso.

• Ele destaca que o curso aborda principalmente HTML, mas também fala um pouco sobre CSS.

• O instrutor enfatiza a importância de ter paciência e seguir todas as aulas em ordem para obter um bom aprendizado.

Patrocinador do Curso - Record

• O instrutor menciona que o curso é patrocinado pela Record, uma organização que visa ensinar tecnologias.

• Ele informa aos alunos sobre uma série de cursos oferecidos pela Record, desde conhecimentos básicos até tópicos mais avançados como internet das coisas, realidade virtual e desenvolvimento de aplicativos móveis.

• O instrutor explica que a inscrição na plataforma da Record é gratuita e os alunos podem acessar as oportunidades através do código fornecido.

Estilizando elementos com CSS

Visão geral da seção: Nesta seção, o instrutor explica como estilizar elementos usando CSS. Ele demonstra duas maneiras de adicionar estilos aos elementos: inserindo um estilo diretamente no elemento HTML ou criando uma tag <style> no cabeçalho do documento. O instrutor recomenda a segunda opção para aplicar estilos a vários elementos.

Estilizando elementos com CSS

• A primeira maneira de adicionar estilo é inserindo um atributo style diretamente no elemento HTML.

• A segunda maneira é criar uma tag <style> no cabeçalho do documento e usar seletores para aplicar estilos a diferentes elementos.

• É possível definir a cor de fundo usando o seletor background-color.

• Esses estilos serão aplicados a todos os elementos correspondentes na página.

Trabalhando com tamanhos de texto

• Existem tags específicas para alterar o tamanho do texto em HTML.

• A tag <big> aumenta o tamanho do texto e está obsoleta, mas ainda funciona.

• A tag <small> diminui o tamanho do texto e tem um significado semântico, sendo adequada para notas de rodapé ou observações importantes.

Texto excluído e inserido

• É possível marcar partes do texto como excluídas ou inseridas usando tags específicas.

• Para marcar um texto como excluído, pode-se usar a tag <del>.

• Para marcar um texto como inserido, pode-se usar a tag <ins>.

• O texto inserido será sublinhado por padrão.

Significado das tags de formatação

Visão geral da seção: Nesta seção, o instrutor discute o significado das tags de formatação em HTML. Ele explica que algumas tags têm um propósito semântico claro, enquanto outras estão obsoletas ou não possuem um significado claro.

Significado das tags de formatação

• A tag <big> está obsoleta porque aumentar o tamanho do texto não tem um significado semântico claro.

• A tag <small> ainda é relevante porque diminuir o tamanho do texto pode indicar observações importantes.

• A tag <ins> é usada para marcar texto inserido e possui um significado semântico claro.

• A tag <u> também pode ser usada para sublinhar texto, mas não possui um significado semântico específico.

Marcando texto excluído e inserido

Visão geral da seção: Nesta seção, o instrutor ensina como marcar partes do texto como excluídas ou inseridas usando as tags <del> e <ins>. Ele demonstra como aplicar essas marcações em parágrafos específicos.

Marcando texto excluído e inserido

• Para marcar um texto como excluído, utiliza-se a tag <del>.

• O texto marcado com essa tag será exibido com uma linha atravessando-o.

• Para marcar um texto como inserido, utiliza-se a tag <ins>.

• O texto marcado com essa tag será sublinhado por padrão.

Uso da tag <u> para sublinhar texto

Visão geral da seção: Nesta seção, o instrutor discute o uso da tag <u> para sublinhar texto em HTML. Ele menciona que essa tag não possui um significado semântico claro e pode estar prestes a ser considerada obsoleta.

Uso da tag <u> para sublinhar texto

• A tag <u> é usada para sublinhar texto em HTML.

• No entanto, essa tag não possui um significado semântico específico.

• É possível que a tag <u> esteja prestes a ser considerada obsoleta.

Significado das tags de formatação - Parte 2

Visão geral da seção: Nesta seção, o instrutor continua discutindo o significado das tags de formatação em HTML. Ele destaca a diferença entre as tags semânticas e as tags não semânticas.

Significado das tags de formatação - Parte 2

• A tag <ins> tem um significado semântico claro ao indicar texto inserido.

• A tag <u> é uma tag não semântica e seu uso pode variar dependendo do contexto.

• É importante entender a diferença entre as tags semânticas e as tags não semânticas ao aplicar estilos ou marcações no texto.

Inserindo Formatações de Sobrescrito e Subscrito

Visão Geral da Seção: Nesta seção, o instrutor demonstra como inserir formatações de sobrescrito e subscrito em um documento HTML.

Inserindo Sobrescrito

• Utilize a tag <sup> para envolver o texto que deseja formatar como sobrescrito.

• Exemplo: <sup>X</sup> irá exibir o caractere "X" como sobrescrito.

Inserindo Subscrito

• Utilize a tag <sub> para envolver o texto que deseja formatar como subscrito.

• Exemplo: <sub>2</sub> irá exibir o número "2" como subscrito.

Visualizando as Formatações

• Verifique visualmente como as formatações de sobrescrito e subscrito ficaram na página.

• Exemplo: 2<sup>20</sup> + 3 será exibido como "220 + 3", enquanto H<sub>2</sub>O será exibido como "H₂O".

Complementando Texto com Vídeo e Vice-Versa

Visão Geral da Seção: Nesta seção, o instrutor destaca a importância de complementar o conteúdo do texto com vídeos e vice-versa, para uma melhor compreensão do assunto.

• O objetivo é que os vídeos complementem os textos e vice-versa, proporcionando uma experiência mais completa de aprendizado.

• O curso foi desenvolvido com base na experiência do instrutor em concursos e na junção de conteúdo impresso e vídeos.

• Os materiais do curso podem ser acessados em diferentes formatos, como PDF para leitura no celular ou tablet, além dos vídeos para assistir.

• É encorajado que os alunos compartilhem o curso com outras pessoas em comunidades e grupos de estudo.

Finalizando a Seção de Formatações

Visão Geral da Seção: Nesta seção final, o instrutor conclui a parte inicial sobre formatações e destaca que ainda há muito mais para aprender nesse campo.

• A formatação é um mundo de possibilidades, e nem todas foram abordadas neste curso.

• No próximo vídeo, serão apresentadas mais algumas formatações.

• O exercício 08 será finalizado e o exercício 09 será iniciado.

• Os links para os exercícios estão disponíveis no repositório público do instrutor.

Encerramento da Seção

Visão Geral da Seção: Neste encerramento da seção, o instrutor agradece pelo estudo realizado até o momento e incentiva os alunos a praticarem as habilidades aprendidas.

• O instrutor expressa gratidão pela participação dos alunos no curso.

• Há muitas coisas para praticar após esta aula.

• O instrutor deseja um bom estudo aos alunos e se despede até o próximo vídeo.