AULA 01 - Conceitos de HTML.pptx

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.

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.

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.

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;

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.

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

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>

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.

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

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.

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.

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

Mais conteúdo relacionado

Mais procurados

Semelhante a AULA 01 - Conceitos de HTML.pptx

Último

AULA 01 - Conceitos de HTML.pptx