TP01_HTML_Ana Silva

Formador: Silvia Barros Formando: Ana Silva Nº1 T120

Tbalho de LP

SOBRE: HTML

O que é HTML?

Criada pelo britânico Tim Berners-Lee, o acrônimo HTML significa HiperText Markup Language, traduzindo ao português: Linguagem de Marcação de Hipertexto. O HTML é o componente básico da web, ele permite inserir o conteúdo e estabelecer a estrutura básica de um website. Portanto, ele serve para dar significado e organizar as informações de uma página na web. Sem isso, o navegador não saberia exibir textos como elementos ou carregar imagens e outros conteúdos.Os hipertextos são conjuntos de elementos conectados. Esses podem ser palavras, imagens, vídeos, documento, etc. Quando conectados, formam uma rede de informações que permite a comunicação de dados, organizando conhecimentos e guardando informações.

Introduction

A linguagem de marcação HTML surgiu como solução para a disseminação e compartilhamento de documentos científicos entre pesquisadores. Tim e seus colegas, queriam uma forma mais fácil de compartilhar artigos e documentos científicos. Seu desejo era criar algo parecido com um repositório hospedado na rede com todos os arquivos científicos que os seus colegas quisessem compartilhar. Mas para isso, era preciso uma linguagem que fosse até o servidor (repositório) e apresentasse o resultado da busca no navegador. Consequentemente, o objetivo dessa linguagem era fazer a comunicação entre o servidor (server-side) e o navegador (client-side). Sendo assim, o resultado dessa comunicação é o que vemos no navegador: as páginas da web.

Em 1995, a especificação do HTML foi atualizada para o HTML 2.0, que incluía suporte a tabelas, formulários e framesets (permitindo que diferentes páginas da web fossem exibidas dentro de uma única janela). Nesse mesmo ano, foi lançado o navegador Mosaic, que se tornou popular entre os usuários da web. Em 1997, o HTML 3.0 foi lançado, trazendo suporte para folhas de estilo (CSS) e elementos multimídia, como vídeo e som. No mesmo ano, a Netscape lançou o navegador Netscape Navigator, que se tornou o navegador mais popular da época.

História do HTML (versões)

HTML (Hypertext Markup Language) é uma linguagem de marcação utilizada para criar e exibir conteúdo na web. A sua evolução começou em 1989, quando Tim Berners-Lee, um cientista da computação britânico que trabalhava no CERN (Organização Europeia para a Pesquisa Nuclear), desenvolveu a ideia da World Wide Web. A primeira versão do HTML, conhecida como HTML 1.0, foi lançada em 1991. Essa versão incluía tags básicas para formatar o texto, como <h1> para títulos, <p> para parágrafos e <a> para links. Também incluía imagens, embora apenas em preto e branco.

Desde então, o HTML5 se tornou a versão mais utilizada do HTML e é suportado por todos os principais navegadores da web. Além disso, o HTML5 continua a ser atualizado com novos recursos e funcionalidades para acompanhar as demandas em constante evolução da web.

História do HTML (versões)

Em 1999, foi lançado o HTML 4.0, que incluía novos recursos como tabelas avançadas, frames e suporte para scripts do lado do cliente (JavaScript). O HTML 4.0 também incluía a especificação de documentos XHTML (Extensible Hypertext Markup Language), que combinava o HTML com o XML. Em 2000, o W3C (World Wide Web Consortium) lançou o HTML 4.01, que era uma atualização menor do HTML 4.0, corrigindo alguns erros e inconsistências. Em 2004, o desenvolvimento do HTML foi retomado com a criação do grupo de trabalho HTML da W3C. Esse grupo de trabalho trabalhou no desenvolvimento do HTML5, que foi lançado em 2014. O HTML5 incluiu muitos novos recursos, como elementos semânticos (como <article> e <section>), suporte para vídeo e áudio, geolocalização e capacidade de armazenamento local.

Como funciona o HTML?

Por ser uma linguagem baseada em marcações, na programação em HTML são usadas Tags para indicar como a informação marcada deve ser apresentada. Uma manchete de uma página de um jornal, por exemplo, é marcada com uma Tag chamada h1. Então, na linguagem HTML, a manchete seria inserida assim: <h1>Título da Manchete</h1> As marcações “<h1>” e “</h1>” são as tags que indicam que a informação entre elas é um título e, portanto, deve ter formatação diferente do restante do texto. Outro exemplo simples é a marcação utilizada para um parágrafo de texto: <p>Parágrafo de texto</p> Desse modo, as tags vão dando orientações ao navegador de internet sobre como as informações devem ser distribuídas e exibidas. Isso diferencia títulos de parágrfos, de links, de menus, etc.Normalmente, um website contém várias páginas HTML, pois cada subpágina do site precisa ter sua própria construção em HTML. Por exemplo, uma homepage, uma página de produtos e uma para contato, devem ser concebidas em três construções HTML diferentes. Mas tudo isso fica mais fácil de se entender quando imaginamos que o HTML representa o esqueleto dos sites, enquanto o JavaScript seria os músculos que dão movimento e o CSS as características físicas.

Quem usa o HTML?

O HTML (HyperText Markup Language) é usado por uma ampla variedade de profissionais e entusiastas, incluindo:Desenvolvedores Web: Para criar a estrutura e o conteúdo de sites e aplicações web.Designers Web: Que trabalham em conjunto com desenvolvedores para criar layouts e interfaces visuais.Blogueiros e Criadores de Conteúdo: Para formatar postagens e páginas em plataformas de blogs.Educadores: Que utilizam HTML para criar materiais educacionais online.Marketers: Para construir emails e landing pages otimizadas.Estudantes: Que aprendem sobre desenvolvimento web e design.

No HTML, o que são: Atributos

AtributosOs atributos são informações adicionais que podem ser adicionadas às tags para fornecer mais detalhes sobre um elemento. Eles são especificados na tag de abertura e geralmente têm um nome e um valor. Por exemplo:Na tag <a href="https://example.com">Clique aqui</a>, href é um atributo que define o link para onde o texto "Clique aqui" irá.Atributos: Informações adicionais sobre elementos.

No HTML, o que são: Elementos

ElementosUm elemento HTML é a combinação da tag de abertura, do conteúdo e da tag de fechamento. Por exemplo:<p>Este é um parágrafo.</p> é um elemento que representa um parágrafo.Elementos: Combinação de tags e conteúdo.

No HTML, o que são: Tags

Tags (Etiquetas)As tags são os marcadores que definem o início e o fim de um elemento HTML. Elas são escritas entre sinais de menor e maior. Por exemplo:<tag> é a tag de abertura.</tag> é a tag de fechamento.Tags: Marcadores que definem elementos.

A sintaxe do HTML é baseada em uma estrutura de tags que organizam o conteúdo em um documento. Aqui estão os principais componentes:Estrutura BásicaUm documento HTML típico tem a seguinte estrutura:<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Título da Página</title> </head> <body> <h1>Bem-vindo ao meu site!</h1> <p>Este é um parágrafo de exemplo.</p> </body> </html>

Sintaxe do HTML

Componentes<!DOCTYPE html>: Declara o tipo de documento e a versão do HTML.<html>: A tag raiz que envolve todo o conteúdo da página.<head>: Contém informações sobre o documento, como o título e links para CSS.<meta>: Fornece metadados, como a codificação de caracteres.<title>: Define o título da página, exibido na aba do navegador.<body>: Contém todo o conteúdo visível da página, como textos, imagens e links.Tags Comuns<h1> a <h6>: Cabeçalhos, sendo <h1> o mais importante.<p>: Parágrafo.<a>: Link (com atributo href para o URL).<img>: Imagem (com atributo src para a fonte da imagem).<div>: Divisão ou seção de conteúdo.AtributosAtributos são adicionados nas tags de abertura e têm a forma nome="valor". Exemplo:<a href="https://example.com" target="_blank">Visite nosso site</a>

Sintaxe do HTML

O documento HTML sempre inicia com o que chamamos de estrutura básica. Esta estrutura é quase que imutável. Sempre será dessa forma e você sempre, sempre começará seu HTML começando por esse código. Geralmente os editores como o Sublime Text já tem atalhos para iniciar os documentos HTMLs com essa estrutura, logo, você não precisa se preocupar em decorá-la, mas é bom que faça. Veja abaixo como ela se inicia:<!DOCTYPE html> <html lang="pt-br"> <head> <title>Título da página</title> <meta charset="utf-8"> </head> <body> Aqui vai o código HTML que fará seu site aparecer. </body> </html>É possível compreender o documento em HTML de uma maneira muito simples, através de uma divisão de blocos das tags essenciais, conforme a a seguinte estrutura: Definição do documento (doctype) Cabeça (head) Corpo (body)

Estrutura básica de uma página em HTML

Pontos fortes e fragilidades do HTML

Pontos Fortes do HTML:Fácil de aprender e usar:HTML é simples e direto, o que o torna acessível a iniciantes. Sua sintaxe é clara e intuitiva, facilitando o aprendizado.Padrão universal:O HTML é a base de todas as páginas da web e funciona em qualquer navegador moderno, sem necessidade de plugins adicionais.Altamente compatível com outras tecnologias:Funciona perfeitamente com CSS para estilização e com JavaScript para funcionalidades dinâmicas, permitindo a criação de páginas ricas e interativas.Estrutura de documentos clara:HTML permite a organização lógica e semântica do conteúdo da página (títulos, parágrafos, listas, links, etc.), o que melhora a acessibilidade e a otimização para motores de busca (SEO).Suporte robusto para mídia:Com HTML5, há suporte nativo para mídia, como áudio e vídeo, sem a necessidade de plugins como o Flash, tornando o processo de incorporação de multimídia mais eficiente.Ampla comunidade e documentação:Como é amplamente utilizado, existe uma vasta quantidade de recursos, tutoriais e comunidades de desenvolvedores disponíveis para ajudar no aprendizado e resolução de problemas.

Pontos fortes e fragilidades do HTML

Fragilidades do HTML:Limitações sem CSS e JavaScript:O HTML, por si só, não fornece muita capacidade de design ou interatividade. Para criar páginas visualmente atraentes ou dinâmicas, ele depende de CSS e JavaScript.Problemas de compatibilidade entre navegadores:Embora o HTML seja um padrão, diferentes navegadores podem renderizar certos elementos de forma ligeiramente diferente, especialmente quando se trata de novos recursos introduzidos no HTML5.Falta de funcionalidades dinâmicas:HTML é uma linguagem estática. Para interatividade em tempo real, é necessário o uso de linguagens de script como JavaScript ou frameworks front-end mais avançados.Validação e erros:HTML não exige uma sintaxe tão rígida quanto outras linguagens de programação, o que pode levar a más práticas de codificação. Embora os navegadores sejam tolerantes a erros, isso pode causar problemas de compatibilidade e renderização.Dependência do servidor:O HTML por si só não pode interagir diretamente com servidores (salvar dados, consultar bancos de dados, etc.), necessitando de linguagens de backend como PHP, Python, ou Node.js para lidar com essas funções.Limitações no controle de design:O HTML define a estrutura da página, mas a estilização é feita com CSS. Para designs mais complexos e avançados, o HTML sozinho não é suficiente, tornando-o dependente do CSS para qualquer personalização visual significativa.

FIM