AULA 01 - Conceitos de HTML.pptx

1. CONCEITOS DE HTML AULA 01

2. O QUE É HTML? • Criada pelo britânico Tim Berners-Lee, HTML significa HiperText Markup Language. • O HTML é o componente básico da web, ele permite inserir o conteúdo e estabelecer a estrutura básica de um site. Para executar o conteúdo escrito pelo HTML, necessitamos de um aplicativo chamado navegador: Chrome, Firefox, Edge, Brave • Hipertextos são conjuntos de elementos conectados. Esses podem ser palavras, imagens, vídeos, documento, etc. • No inicio da web, era comum encontrar sites apenas contendo textos e imagens simples, com estrutura básica e sem estilizações. Porém, nos dias atuais, muito dificilmente você encontrará sites que possuam apenas elementos HTML. Portanto, podemos considerar o HTML o “esqueleto” da sua página. • Imagine então que além do esqueleto, é necessário ter o corpo. Para isso, temos então as linguagens CSS e o JavaScript, que em conjunto com HTML, formam a base para todos os websites atuais.

3. COMO FUNCIONA O HTML • Através de um documento HTML, ou seja, um documento com a extensão .html ou .htm., o navegador faz a leitura do arquivo e renderiza o seu conteúdo para que o usuário possa visualizá-lo. Os arquivos .html podem ser visualizados em qualquer navegador. • Geralmente um site é composto por diversas páginas HTML, como por exemplo: um website que contenha três páginas (uma homepage, uma página de contato e uma página de produtos) receberá ao menos três documentos .html diferentes, sendo uma para cada página do website. • O código pode ser escrito através de qualquer editor de texto, como o próprio bloco de notas. Cada página consiste em uma série de tags (também chamados de elementos) que podem ser considerados os blocos de construção das páginas. Portanto, esses blocos são a maneira com a qual o HTML faz a marcação dos conteúdos, criando a hierarquia e a estrutura do mesmo, dividido entre seções, parágrafos, cabeçalhos, e outros.

4. MAS O QUE SÃO TAGS? • Através de qualquer editor de texto, como o Sublime Text, o NotePad++ ou até mesmo o bloco de notas, é possível criar um documento com a extensão .html que será renderizado pelos navegadores para você visualizar o resultado. • Este documento consiste em uma série de tags. As tags são códigos que definem toda a estrutura da página, tais como o seu tamanho, a fonte da letra, as cores, as quebras de linha e etc. A maioria dos elementos do documento HTML são compostos por uma estrutura de abertura e uma de fachamento, como <tag> e </tag>. Há também tags de estrutura única, como a tag <br/> que realiza uma quebra de linha. • Digamos que você queria escrever um paragrafo, chamamos então a tag <p>, escrevemos o paragrafo e finalmente fechamos a tag com </p>: • <p>Meu primeiro paragrafo.</p> • Dessa forma, ao salvar o arquivo com a extensão .html e abri-lo em um navegador, você verá o parágrafo escrito na tela do navegador.

5. PRINCIPAIS TAGS HTML Atualmente existem mais de 140 tags, mas algumas delas quase não são utilizadas. Dentre as mais utilizadas temos: • <head> – local para declarar todas informações, como título e metadados da sua página; • <title> – define o título; • <body> – local para declarar todos os elementos que irão compor o corpo da página; • <h1>,<h2>,<h3>,<h4>,<h5 >e <h6> – Tags para definir um título e subtítulos, variando de 1 a 6, sendo h1 o título mais importante e h6 o de menor importância; • <p> – Tag para definir um parágrafo; • <a> – Tag de link, junto ao atributo href=”” é responsável pela principal característica da web; • <header> – define um cabeçalho; • <section> – define uma seção;

6. PRINCIPAIS TAGS HTML • <article> – define um artigo; • <div> – define uma divisão; • <footer> – define um rodapé; • <nav> – define uma área de navegação (como menus); • <table> – define uma tabela; • <ol> – define uma lista ordenada; • <ul> – define uma lista não ordenada; • <li> – define o item de uma lista; • <form> – define um formulário; • <input> – define os campos do formulário; • <textarea> – define uma área para o usuário digitar um texto; • <button> – define um botão; • <img> – permite inserir uma imagem no seu documento.

7. ESTRUTURA BÁSICA DE UM DOCUMENTO HTML <!DOCTYPE html>  tipo de document, no caso HTML5 <html>  início do documento HTML <head>  receberá todas as informações como o título da página <title></title>  receberá o título da página </head>  fechamento do cabeçalho <body>  todas as tags são definidas dentro do corpo </body> </html>  fechamento do HTML

8. ESTRUTURA BÁSICA DE UM DOCUMENTO HTML <!DOCTYPE html>  tipo de document, no caso HTML5 <html>  início do documento HTML <head>  receberá todas as informações como o título da página <title></title>  receberá o título da página </head>  fechamento do cabeçalho <body>  todas as tags são definidas dentro do corpo </body> </html>  fechamento do HTML

9. ESTRUTURA BÁSICA DE UM DOCUMENTO HTML Para que não ocorram erros de renderização ou incompatibilidade de caracteres, devemos também declarar o padrão de teclado. No Brasil e em boa parte da América Latina, utilizamos o padrão UTF-8. Dessa forma, através da tag de metadados <meta/>, vamos declarar dentro de um atributo charset que nosso padrão é o UTF-8. Temos assim a estrutura básica de nosso documento HTML: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> </head> <body> </body> </html>

10. COMO SURGIU O HTML Em 1980, o Físico Britânico Tim Berners-Lee, iniciou um projeto baseado na Marcação de HiperTexto, denominado ENQUIRE. Este projeto foi realizado inicialmente através da linguagem de programação Pascal. Anos mais tarde, em 1889, Tim Berners-Lee e o estudante Robert Cailliau conseguiram implementar a primeira comunicação entre o usuário e servidor através do protocolo HTTP. Com isso, surgia então a World Wide Web (www), a web que conhecemos hoje. Com o objetivo de facilitar comunicação e disseminação de documentos entre pesquisadores, ele criou então a linguagem de marcação de hipertexto, o HTML. A sua primeira versão foi publicada em 1991 e foi baseada na SGML, uma linguagem de marcação utilizada para a estruturação de documentos. O SGML já possuía diversas tags que foram herdadas pelo HTML. Contudo, a maior diferença entre essas duas linguagens, é que o HTML implementava a tag <a>, permitindo a ligação de uma página a outra, conhecido como link. A interligação entre documentos é a base do funcionamento de toda Web. A linguagem de marcação de hipertexto ficou bastante conhecida quando começou a ser utilizada para formar a rede pública daquela época. Alguns anos mais tarde, se tornaria a linguagem padrão da internet que conhecemos hoje.

11. A EVOLUÇÃO DO HTML Conforme visto anteriormente, a primeira versão do HTML surgiu no início da década de 90. • Entre 1990 e 1995 passou por várias atualizações e modificações em sua estrutura. Até então, quem supervisionava e controlava o padrão da linguagem era o CERN. Desse ano em diante, a entidade que regula os padrões da web, W3C (The World Wide Web Consortium), passou a supervisionar e controlar a linguagem de marcação de hipertextos, tornando-a uma linguagem padrão da web. • Em 1993, Dave Raggett propôs uma evolução do padrão, denominada HTML+. • 1995 – Versão 2.0. O seu objetivo era formalizar todas as características do HTML que já eram utilizadas. • 1997 – Versão 3.2. O HTML 3.2 implementou características como tabelas, applets e texto flutuante ao redor de imagens. • 1999 – Versão 4.0.1. A principal novidade é que as páginas poderiam usar frames (utilização de quadros). • 2000 – XHTML 1.0. Combinava as vantagens do HTML com as do XML (que permitia documentos serem lidos por diferentes sistemas. • 2004 – a fundação da WHATWG (Web Hypertext Application Technology Working Group) por desenvolvedores de grandes empresas como Mozilla, Apple e Opera. A partir desse momento, teve início o trabalho de criação da nova versão do HTML. • 2014 – A grande mudança: a versão 5 do HTML

12. A RELAÇÃO ENTRE HTML, CSS E JAVASCRIPT

13. A RELAÇÃO ENTRE HTML, CSS E JAVASCRIPT O HTML servirá para marcar todos os elementos da nossa página. Ele funciona como se fosse o esqueleto de uma página. Porém, sozinho o HTML é limitado a essa função, mesmo em sua versão mais atual. Sendo assim, podemos definir que uma página web é composta por três camadas. 1. O HTML formará a primeira camada que apresenta o conteúdo ao usuário. 2. O CSS formará segunda camada que dará forma aos elementos. 3. Finalmente, o Javascript formará a terceira camada que adicionará comportamentos dinâmicos à página.

14. A RELAÇÃO ENTRE HTML, CSS E JAVASCRIPT CSS Para poder dar forma ao nosso documento, é necessário trabalhar com o estilo em cascata, o CSS. Com isso podemos estilizar todos nossos elementos, aplicando espaçamentos, cores, posicionamentos, tamanho de fontes, famílias de fontes, bordas e outros efeitos visuais que dão forma ao documento. Durante muito tempo, o estilo era aplicado diretamente na tag html. Hoje em dia, é possível utilizar um espaço dentro do seu documento html, através da tag <style></style> que deve ser declarada dentro do head, onde irá conter todo o CSS. Da mesma forma, pode-se utilizar uma folha de estilos externa, geralmente de extensão .css , o que deixa o código muito mais limpo e organizado. Atualmente, a versão mais recente do CSS é o CSS 3. Podemos considerar que o CSS é o corpo do nosso documento.

15. A RELAÇÃO ENTRE HTML, CSS E JAVASCRIPT JAVASCRIPT O JavaScript, diferentemente do HTML e do CSS, é uma linguagem de programação, e em conjunto com esses, ele é capaz de dar vida, gerar movimento ao site. Ele é o que tornará os elementos mais dinâmicos, pois é o JavaScript que permite a execução de scripts na nossa página. Dessa forma, quando o usuário está navegando em uma página e executa uma ação que resulte em um comportamento na página, muito provavelmente será um script que executará esse comportamento. Portanto, o JavaScript pode ser comparado com o movimento do corpo (e do esqueleto) da nossa página.

AULA 01 - Conceitos de HTML.pptx

AULA 01 - Conceitos de HTML.pptx

Recomendados

Mais conteúdo relacionado

Similar a AULA 01 - Conceitos de HTML.pptx

Similar a AULA 01 - Conceitos de HTML.pptx(20)

Último

Último(20)

AULA 01 - Conceitos de HTML.pptx