SlideShare uma empresa Scribd logo
1 de 35
Baixar para ler offline
• URL – http://www.sc.senac.br/2016/ead.html
• http – protocolo
• www.sc.senac.br – nome de domínio – (registro.br)
• 2016 – caminho
• ead.html – arquivo
• HTTP - Hypertext Transfer Protocol (Protocolo de Transferência de Hipertexto)
• Métodos HTTP (request - solicitação)
• GET – (Padrão) Solicita um recurso. Os dados são transferidos pela URL mesmo.
• POST – na transferência com este método os dados são codificados.
• HEAD – retoma a linha de resposta e os cabeçalhos de resposta.
• PUT/PATCH – permite que documentos/recursos sejam transferidos e armazenados.
• DELETE – permite que documentos/recursos sejam excluídos.
• OPTIONS - permite fazer uma consulta de quais comandos estão disponíveis.
• TRACE - permite depurar as requisições, devolvendo o cabeçalho de um documento.
• Métodos HTTP (response - resposta)
• 200 (OK) – significa que a confirmação da requisição foi respondida com sucesso.
• 304 (NOT MODIFIED) – informa que os recursos não foram alterados desde a última
vez que foi solicitada. Isso ocorre por causa dos mecanismos de “cache” do browser.
• 401 (UNAUTHORIZED) – significa que o cliente não tem acesso autorizado para
acessar a área requisitada.
• 403 (FORBIDDEN) – informa que o acesso à área requisitada falhou.
• 404 (NOT FOUND) - Não encontrado.
• Hipertext Markup Language (Linguagem de marcação de texto);
• Desde 1996 vêm sendo mantida pela World Wide Web Consortium (W3C);
• Utilizada na confecção de sites;
• São “rótulos” (tags) que marcam trechos e blocos de texto;
• Utilizados por um visualizador HTML (navegador) para formatar e apresentar o texto na
tela;
• O HTML é escrito em texto plano, ou seja, pode ser escrito em qualquer editor de textos.
• A representação dos elementos do HTML nas páginas de internet se dá através de
marcações ou rótulos (tags);
• O HTML não é case sensitive, ou seja, não há diferença entre letras maiúsculas ou
minúscula na representação dos elementos;
• O navegador interpreta como sendo uma tag todos os elementos HTML válidos que
estejam entre os símbolos < e >.
<br> = <BR>
• <BR> é uma tag válida que determinará uma quebra de linha em um texto;
• <CHTRU> não é uma tag válida, é ignorada o que fará com que nada seja exibido na tela;
• Mesmo não exibindo as tags inválidas não se deve utilizar desta opção como uma
maneira de ocultar conteúdo em um documento elaborado através do HTML;
• Existem marcações específicas para comentários em HTML. São elas, <!-- e -->.
• A maioria dos elementos no HTML possuem um rótulo inicial e um final, envolvendo o
texto ou elemento a ser marcado por eles:
• Os marcadores de início e final geralmente possuem o mesmo nome se diferenciando
apenas pela / (barra) no finalizador.
<!-- Exemplo de comentário HTML -->
<elemento> texto a ser marcado (conteúdo) </elemento>
Não há diferença entre <br> e <BR>.
Porém, a maneira correta de escrever é em letras minúsculas, sempre escreva
assim: <br>
• Esta declaração deve ser a primeira coisa em seu documento HTML, antes da tag <html>.
• O <! DOCTYPE> declaração não é uma tag HTML; é uma instrução para o navegador da
web sobre qual versão do HTML da página é escrito.
<!DOCTYPE HTML>
<div class="titulo-maior"></div>
class: pode-se repetir no html
<div id="titulo-cabecalho"></div>
id: é único em todo html
<img src="imagem.jpg">
<tag atributo="valor">
<img src="imagem.jpg">
<tag atributo="valor">Texto</tag>
<a></a>
<html></html>
<head></head>
<title></title>
<body></body>
<meta>
<h1></h1> - <h6></h6>
<p></p>
<br>
<hr>
<ul></ul>
<li></li>
<ol></ol>
<img>
<table></table>
<tr><td></td></tr>
<pre></pre>
<blockquote></blockquote>
<address></address>
<cite></cite>
<code></code>
<em></em>
<strong></strong>
<i></i>
<b></b>
<u></u>
<strike></strike>
<big></big>
<small></small>
<sub></sub>
<sup></sup>
<font></font>
<div></div>
<span></span>
<title><h2><center>titulo<h2><center></title>
<div class="Bem Vindo"></div>
file:///F:/html/index2.html / file:///F:/html/imagem
Sem Título-3.jpg
<form>
Atributos
• method – método HTTP de envio das informações (POST / GET)
• action – endereço a serem enviados os dados - #
• enctype - multipart/form-data – para envio de arquivos
<form method="#" action="POST">
<input>
Tipo de dado Tipo de campo
text Texto
radio Opção, seleção única
checkbox Opção, seleção múltipla
file Arquivo
hidden Oculto
password Senha
Tipo de dado Tipo de campo
color Seleção de cor
date Data
datetime Data e Hora
month Mês
email E-mail
number Número
range Intervalo numérico
search Busca
tel Telefone
time Hora
url URL
week Semana
<form></form>
<input></input>
<textarea></ textarea>
<button></button>
<select></select>
<label></label>
<input type="text" value="Campo" required>
- _docs – Documentos relacionados ao projeto (docs, imagens, briefing)
- _layout – Layout do projeto (html / imagem)
- _sql – Arquivo de banco de dados
- css – Cascading Style Sheet (.css)
- fonts – fontes utilizadas no site / ícones (.ttf, woff, svg, woff2, .otf)
- img – imagens estáticas utilizadas no layout do site (.png, jpg, .gif, .svg)
- js – Scripts Javascript (.js)
index.html
favicon.ico
HTTP
FTP
Arquivos sendo enviados e recebidos
FileZilla Client
Computador RemotoComputador Local
Dados e log da conexão
• História da Internet (https://pt.wikipedia.org/wiki/História_da_Internet)
• Internet (https://pt.wikipedia.org/wiki/Internet)
• E-mail (https://pt.wikipedia.org/wiki/E-mail)
• História da Internet no Brasil (https://pt.wikipedia.org/wiki/História_da_Internet_no_Brasil)
• Uniform Resource Name (https://en.wikipedia.org/wiki/Uniform_Resource_Name)
• Sebben, Naiara. Programação Web. Joaçaba. Unoesc Virtual. 2013. 200p. ISBN 978-85-
65600-17-0
• A História do HTML (http://www.frontendbrasil.com.br/artigos/a-historia-do-html/)
• HTML5 (https://en.wikipedia.org/wiki/HTML5)
• HTML5 (https://en.wikipedia.org/wiki/HTML5)
• HTML (https://en.wikipedia.org/wiki/HTML)
• W3Schools (http://www.w3schools.com)
• HTML Princípios Básicos - (http://pt.slideshare.net/mayzaoliveira/htmlprincipiosbasicos)
• Tutorial de HTML - Tabelas (http://www.clem.ufba.br/tuts/html/c09.htm)
• FTP - (https://pt.wikipedia.org/wiki/File_Transfer_Protocol)
• Organização - (https://pt.wikipedia.org/wiki/Organiza%C3%A7%C3%A3o)

Mais conteúdo relacionado

Mais procurados (20)

HTML Formatando Textos
HTML Formatando TextosHTML Formatando Textos
HTML Formatando Textos
 
HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
 
HTML - Introdução
HTML - IntroduçãoHTML - Introdução
HTML - Introdução
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScript
 
Introdução a Desenvolvimento Web
Introdução a Desenvolvimento WebIntrodução a Desenvolvimento Web
Introdução a Desenvolvimento Web
 
Html5 - Estrutura Básica
Html5 - Estrutura BásicaHtml5 - Estrutura Básica
Html5 - Estrutura Básica
 
XHtml
XHtmlXHtml
XHtml
 
HTML
HTML HTML
HTML
 
Aula 3 – Linguagem HTML - formatação de texto
Aula 3 – Linguagem HTML -  formatação de textoAula 3 – Linguagem HTML -  formatação de texto
Aula 3 – Linguagem HTML - formatação de texto
 
Aula de XHTML
Aula de XHTMLAula de XHTML
Aula de XHTML
 
Html Exercicio
Html ExercicioHtml Exercicio
Html Exercicio
 
Resumo html 2012 exercícios 01 21
Resumo html 2012   exercícios 01 21Resumo html 2012   exercícios 01 21
Resumo html 2012 exercícios 01 21
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
Html, css, js, ajax
Html, css, js, ajaxHtml, css, js, ajax
Html, css, js, ajax
 
Aula
AulaAula
Aula
 
Html
HtmlHtml
Html
 
Padroes Web
Padroes WebPadroes Web
Padroes Web
 
HTML & CSS - Aula 4
HTML & CSS - Aula 4HTML & CSS - Aula 4
HTML & CSS - Aula 4
 
HTML - aula 1
HTML - aula 1HTML - aula 1
HTML - aula 1
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
 

Destaque

Zilele Biz 2015 - Media & Marketing - Denisa Mihai, Avon Romania
Zilele Biz 2015 - Media & Marketing - Denisa Mihai, Avon RomaniaZilele Biz 2015 - Media & Marketing - Denisa Mihai, Avon Romania
Zilele Biz 2015 - Media & Marketing - Denisa Mihai, Avon RomaniaGabriel Barliga
 
Strategipublicrelationsdalampemasaran
StrategipublicrelationsdalampemasaranStrategipublicrelationsdalampemasaran
Strategipublicrelationsdalampemasaranjamal_luthfi
 
Presentación1
Presentación1Presentación1
Presentación1alejito001
 
«Розвиток у дошкільників уяви, пам’яті, мислення, рухової активності через гр...
«Розвиток у дошкільників уяви, пам’яті, мислення, рухової активності через гр...«Розвиток у дошкільників уяви, пам’яті, мислення, рухової активності через гр...
«Розвиток у дошкільників уяви, пам’яті, мислення, рухової активності через гр...dnz150of
 
Top 10 Social Networks For Professionals
Top 10 Social Networks For ProfessionalsTop 10 Social Networks For Professionals
Top 10 Social Networks For Professionalsbrandieclaborn
 
Uvv 2015 modelo para trabalho final - pedrinha
Uvv 2015   modelo para trabalho final - pedrinhaUvv 2015   modelo para trabalho final - pedrinha
Uvv 2015 modelo para trabalho final - pedrinhaOi S.A
 
Responsive Design - Introdução
Responsive Design - IntroduçãoResponsive Design - Introdução
Responsive Design - IntroduçãoMarcos César
 
HESA Written Comp Exam- Bib (Autosaved)
HESA Written Comp Exam- Bib (Autosaved)HESA Written Comp Exam- Bib (Autosaved)
HESA Written Comp Exam- Bib (Autosaved)Michael Weddington
 
III Jornadas de Micogastronomía 2012, por Alberto Arregui
III Jornadas de Micogastronomía 2012, por Alberto ArreguiIII Jornadas de Micogastronomía 2012, por Alberto Arregui
III Jornadas de Micogastronomía 2012, por Alberto ArreguiFrancisco Javier Gambra Arregui
 
Віталій Мороз “Предметна економіка: “Вірність” від прядок до оніксів”
Віталій Мороз “Предметна економіка: “Вірність” від прядок до оніксів”Віталій Мороз “Предметна економіка: “Вірність” від прядок до оніксів”
Віталій Мороз “Предметна економіка: “Вірність” від прядок до оніксів”Lviv Startup Club
 

Destaque (20)

Zilele Biz 2015 - Media & Marketing - Denisa Mihai, Avon Romania
Zilele Biz 2015 - Media & Marketing - Denisa Mihai, Avon RomaniaZilele Biz 2015 - Media & Marketing - Denisa Mihai, Avon Romania
Zilele Biz 2015 - Media & Marketing - Denisa Mihai, Avon Romania
 
CCarros
CCarrosCCarros
CCarros
 
Strategipublicrelationsdalampemasaran
StrategipublicrelationsdalampemasaranStrategipublicrelationsdalampemasaran
Strategipublicrelationsdalampemasaran
 
Candy
CandyCandy
Candy
 
ready to sell
ready to sellready to sell
ready to sell
 
Presentación1
Presentación1Presentación1
Presentación1
 
Debashish Mukherjee Basel II
Debashish Mukherjee Basel IIDebashish Mukherjee Basel II
Debashish Mukherjee Basel II
 
«Розвиток у дошкільників уяви, пам’яті, мислення, рухової активності через гр...
«Розвиток у дошкільників уяви, пам’яті, мислення, рухової активності через гр...«Розвиток у дошкільників уяви, пам’яті, мислення, рухової активності через гр...
«Розвиток у дошкільників уяви, пам’яті, мислення, рухової активності через гр...
 
розвиток нервової системми
розвиток нервової системмирозвиток нервової системми
розвиток нервової системми
 
Pulia area a ser preechida 'tig
Pulia area a ser preechida 'tigPulia area a ser preechida 'tig
Pulia area a ser preechida 'tig
 
Top 10 Social Networks For Professionals
Top 10 Social Networks For ProfessionalsTop 10 Social Networks For Professionals
Top 10 Social Networks For Professionals
 
Uvv 2015 modelo para trabalho final - pedrinha
Uvv 2015   modelo para trabalho final - pedrinhaUvv 2015   modelo para trabalho final - pedrinha
Uvv 2015 modelo para trabalho final - pedrinha
 
Efsi
EfsiEfsi
Efsi
 
Nama surah ikut tahun
Nama surah ikut tahunNama surah ikut tahun
Nama surah ikut tahun
 
Responsive Design - Introdução
Responsive Design - IntroduçãoResponsive Design - Introdução
Responsive Design - Introdução
 
HESA Written Comp Exam- Bib (Autosaved)
HESA Written Comp Exam- Bib (Autosaved)HESA Written Comp Exam- Bib (Autosaved)
HESA Written Comp Exam- Bib (Autosaved)
 
III Jornadas de Micogastronomía 2012, por Alberto Arregui
III Jornadas de Micogastronomía 2012, por Alberto ArreguiIII Jornadas de Micogastronomía 2012, por Alberto Arregui
III Jornadas de Micogastronomía 2012, por Alberto Arregui
 
30 Anos Depois
30 Anos Depois30 Anos Depois
30 Anos Depois
 
Sayed hashim
Sayed hashimSayed hashim
Sayed hashim
 
Віталій Мороз “Предметна економіка: “Вірність” від прядок до оніксів”
Віталій Мороз “Предметна економіка: “Вірність” від прядок до оніксів”Віталій Мороз “Предметна економіка: “Вірність” від прядок до оніксів”
Віталій Мороз “Предметна економіка: “Вірність” від прядок до оніксів”
 

Semelhante a Introdução ao HTML e HTTP

Html aula 1
Html aula 1Html aula 1
Html aula 1Sedu
 
Introdução de web
Introdução de webIntrodução de web
Introdução de webSedu
 
Desevolvimento Web Client-side - HTML
Desevolvimento Web Client-side - HTMLDesevolvimento Web Client-side - HTML
Desevolvimento Web Client-side - HTMLGuilherme
 
Apresentação1.pptx
Apresentação1.pptxApresentação1.pptx
Apresentação1.pptxssusercbd9c4
 
Introdução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançadoIntrodução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançadoLuisFalco8
 
Manual curso php
Manual curso phpManual curso php
Manual curso phpalexinaa
 
Manual curso php
Manual curso phpManual curso php
Manual curso phpalexinaa
 
Curso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLCurso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLWillian Magalhães
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLFabio Moura Pereira
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Eduardo Bertolucci
 
Html completo
Html completoHtml completo
Html completoEMSNEWS
 
Curso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-endCurso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-endMario Sergio
 

Semelhante a Introdução ao HTML e HTTP (20)

Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Html aula 1
Html aula 1Html aula 1
Html aula 1
 
02 html - fontes e estilos
02 html  - fontes e estilos02 html  - fontes e estilos
02 html - fontes e estilos
 
Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
O que é html
O que é htmlO que é html
O que é html
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
HTML introdução
HTML  introduçãoHTML  introdução
HTML introdução
 
Aula html5
Aula html5Aula html5
Aula html5
 
Desevolvimento Web Client-side - HTML
Desevolvimento Web Client-side - HTMLDesevolvimento Web Client-side - HTML
Desevolvimento Web Client-side - HTML
 
Apresentação1.pptx
Apresentação1.pptxApresentação1.pptx
Apresentação1.pptx
 
Introdução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançadoIntrodução ao HTML 5 do Básico ao avançado
Introdução ao HTML 5 do Básico ao avançado
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 
Curso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLCurso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTML
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
 
Html
HtmlHtml
Html
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
 
Html completo
Html completoHtml completo
Html completo
 
Curso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-endCurso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-end
 

Mais de Israel Messias

Programação Multiplataforma em Ambiente Web
Programação Multiplataforma em Ambiente WebProgramação Multiplataforma em Ambiente Web
Programação Multiplataforma em Ambiente WebIsrael Messias
 
Programação Orientada a Objetos (POO) com PHP - Parte 2
Programação Orientada a Objetos (POO) com PHP - Parte 2Programação Orientada a Objetos (POO) com PHP - Parte 2
Programação Orientada a Objetos (POO) com PHP - Parte 2Israel Messias
 
Programação Orientada a Objetos (POO) com PHP - Parte 1
Programação Orientada a Objetos (POO) com PHP - Parte 1Programação Orientada a Objetos (POO) com PHP - Parte 1
Programação Orientada a Objetos (POO) com PHP - Parte 1Israel Messias
 
Arquitetura Cliente-Servidor - Modelos
Arquitetura Cliente-Servidor - ModelosArquitetura Cliente-Servidor - Modelos
Arquitetura Cliente-Servidor - ModelosIsrael Messias
 
Arquitetura Cliente-Servidor
Arquitetura Cliente-ServidorArquitetura Cliente-Servidor
Arquitetura Cliente-ServidorIsrael Messias
 
Arquitetura Cliente-Servidor - Banco de dados
Arquitetura Cliente-Servidor - Banco de dadosArquitetura Cliente-Servidor - Banco de dados
Arquitetura Cliente-Servidor - Banco de dadosIsrael Messias
 
Ferramentas para Animações de Sites - Canvas
Ferramentas para Animações de Sites - CanvasFerramentas para Animações de Sites - Canvas
Ferramentas para Animações de Sites - CanvasIsrael Messias
 
Ferramentas para Animações de Sites - Áudio
Ferramentas para Animações de Sites - ÁudioFerramentas para Animações de Sites - Áudio
Ferramentas para Animações de Sites - ÁudioIsrael Messias
 
CSS - Cascading Style Sheets - Medidas
CSS - Cascading Style Sheets - MedidasCSS - Cascading Style Sheets - Medidas
CSS - Cascading Style Sheets - MedidasIsrael Messias
 
CSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - RevisãoCSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - RevisãoIsrael Messias
 
CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2Israel Messias
 
CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1Israel Messias
 
HTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTPHTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTPIsrael Messias
 
HTML - HyperText Markup Language - Organização de arquivos
HTML - HyperText Markup Language - Organização de arquivosHTML - HyperText Markup Language - Organização de arquivos
HTML - HyperText Markup Language - Organização de arquivosIsrael Messias
 
HTML - HyperText Markup Language - Formulário
HTML - HyperText Markup Language - FormulárioHTML - HyperText Markup Language - Formulário
HTML - HyperText Markup Language - FormulárioIsrael Messias
 
HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review Israel Messias
 
HTML - HyperText Markup Language - HTML5
HTML - HyperText Markup Language - HTML5HTML - HyperText Markup Language - HTML5
HTML - HyperText Markup Language - HTML5Israel Messias
 
HTML - HyperText Markup Language - Introdução
HTML - HyperText Markup Language - IntroduçãoHTML - HyperText Markup Language - Introdução
HTML - HyperText Markup Language - IntroduçãoIsrael Messias
 

Mais de Israel Messias (20)

CMS
CMSCMS
CMS
 
Programação Multiplataforma em Ambiente Web
Programação Multiplataforma em Ambiente WebProgramação Multiplataforma em Ambiente Web
Programação Multiplataforma em Ambiente Web
 
Programação Orientada a Objetos (POO) com PHP - Parte 2
Programação Orientada a Objetos (POO) com PHP - Parte 2Programação Orientada a Objetos (POO) com PHP - Parte 2
Programação Orientada a Objetos (POO) com PHP - Parte 2
 
Programação Orientada a Objetos (POO) com PHP - Parte 1
Programação Orientada a Objetos (POO) com PHP - Parte 1Programação Orientada a Objetos (POO) com PHP - Parte 1
Programação Orientada a Objetos (POO) com PHP - Parte 1
 
Websockets
WebsocketsWebsockets
Websockets
 
Arquitetura Cliente-Servidor - Modelos
Arquitetura Cliente-Servidor - ModelosArquitetura Cliente-Servidor - Modelos
Arquitetura Cliente-Servidor - Modelos
 
Arquitetura Cliente-Servidor
Arquitetura Cliente-ServidorArquitetura Cliente-Servidor
Arquitetura Cliente-Servidor
 
Arquitetura Cliente-Servidor - Banco de dados
Arquitetura Cliente-Servidor - Banco de dadosArquitetura Cliente-Servidor - Banco de dados
Arquitetura Cliente-Servidor - Banco de dados
 
Ferramentas para Animações de Sites - Canvas
Ferramentas para Animações de Sites - CanvasFerramentas para Animações de Sites - Canvas
Ferramentas para Animações de Sites - Canvas
 
Ferramentas para Animações de Sites - Áudio
Ferramentas para Animações de Sites - ÁudioFerramentas para Animações de Sites - Áudio
Ferramentas para Animações de Sites - Áudio
 
CSS - Cascading Style Sheets - Medidas
CSS - Cascading Style Sheets - MedidasCSS - Cascading Style Sheets - Medidas
CSS - Cascading Style Sheets - Medidas
 
CSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - RevisãoCSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - Revisão
 
CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2
 
CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1
 
HTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTPHTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTP
 
HTML - HyperText Markup Language - Organização de arquivos
HTML - HyperText Markup Language - Organização de arquivosHTML - HyperText Markup Language - Organização de arquivos
HTML - HyperText Markup Language - Organização de arquivos
 
HTML - HyperText Markup Language - Formulário
HTML - HyperText Markup Language - FormulárioHTML - HyperText Markup Language - Formulário
HTML - HyperText Markup Language - Formulário
 
HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review
 
HTML - HyperText Markup Language - HTML5
HTML - HyperText Markup Language - HTML5HTML - HyperText Markup Language - HTML5
HTML - HyperText Markup Language - HTML5
 
HTML - HyperText Markup Language - Introdução
HTML - HyperText Markup Language - IntroduçãoHTML - HyperText Markup Language - Introdução
HTML - HyperText Markup Language - Introdução
 

Introdução ao HTML e HTTP

  • 1.
  • 2. • URL – http://www.sc.senac.br/2016/ead.html • http – protocolo • www.sc.senac.br – nome de domínio – (registro.br) • 2016 – caminho • ead.html – arquivo
  • 3. • HTTP - Hypertext Transfer Protocol (Protocolo de Transferência de Hipertexto)
  • 4. • Métodos HTTP (request - solicitação) • GET – (Padrão) Solicita um recurso. Os dados são transferidos pela URL mesmo. • POST – na transferência com este método os dados são codificados. • HEAD – retoma a linha de resposta e os cabeçalhos de resposta. • PUT/PATCH – permite que documentos/recursos sejam transferidos e armazenados. • DELETE – permite que documentos/recursos sejam excluídos. • OPTIONS - permite fazer uma consulta de quais comandos estão disponíveis. • TRACE - permite depurar as requisições, devolvendo o cabeçalho de um documento.
  • 5. • Métodos HTTP (response - resposta) • 200 (OK) – significa que a confirmação da requisição foi respondida com sucesso. • 304 (NOT MODIFIED) – informa que os recursos não foram alterados desde a última vez que foi solicitada. Isso ocorre por causa dos mecanismos de “cache” do browser. • 401 (UNAUTHORIZED) – significa que o cliente não tem acesso autorizado para acessar a área requisitada. • 403 (FORBIDDEN) – informa que o acesso à área requisitada falhou. • 404 (NOT FOUND) - Não encontrado.
  • 6. • Hipertext Markup Language (Linguagem de marcação de texto); • Desde 1996 vêm sendo mantida pela World Wide Web Consortium (W3C); • Utilizada na confecção de sites; • São “rótulos” (tags) que marcam trechos e blocos de texto; • Utilizados por um visualizador HTML (navegador) para formatar e apresentar o texto na tela; • O HTML é escrito em texto plano, ou seja, pode ser escrito em qualquer editor de textos.
  • 7.
  • 8. • A representação dos elementos do HTML nas páginas de internet se dá através de marcações ou rótulos (tags); • O HTML não é case sensitive, ou seja, não há diferença entre letras maiúsculas ou minúscula na representação dos elementos; • O navegador interpreta como sendo uma tag todos os elementos HTML válidos que estejam entre os símbolos < e >. <br> = <BR>
  • 9. • <BR> é uma tag válida que determinará uma quebra de linha em um texto; • <CHTRU> não é uma tag válida, é ignorada o que fará com que nada seja exibido na tela; • Mesmo não exibindo as tags inválidas não se deve utilizar desta opção como uma maneira de ocultar conteúdo em um documento elaborado através do HTML;
  • 10. • Existem marcações específicas para comentários em HTML. São elas, <!-- e -->. • A maioria dos elementos no HTML possuem um rótulo inicial e um final, envolvendo o texto ou elemento a ser marcado por eles: • Os marcadores de início e final geralmente possuem o mesmo nome se diferenciando apenas pela / (barra) no finalizador. <!-- Exemplo de comentário HTML --> <elemento> texto a ser marcado (conteúdo) </elemento>
  • 11. Não há diferença entre <br> e <BR>. Porém, a maneira correta de escrever é em letras minúsculas, sempre escreva assim: <br>
  • 12.
  • 13. • Esta declaração deve ser a primeira coisa em seu documento HTML, antes da tag <html>. • O <! DOCTYPE> declaração não é uma tag HTML; é uma instrução para o navegador da web sobre qual versão do HTML da página é escrito. <!DOCTYPE HTML>
  • 22.
  • 23.
  • 24. <form> Atributos • method – método HTTP de envio das informações (POST / GET) • action – endereço a serem enviados os dados - # • enctype - multipart/form-data – para envio de arquivos <form method="#" action="POST">
  • 25. <input> Tipo de dado Tipo de campo text Texto radio Opção, seleção única checkbox Opção, seleção múltipla file Arquivo hidden Oculto password Senha Tipo de dado Tipo de campo color Seleção de cor date Data datetime Data e Hora month Mês email E-mail number Número range Intervalo numérico search Busca tel Telefone time Hora url URL week Semana
  • 26.
  • 28.
  • 29. - _docs – Documentos relacionados ao projeto (docs, imagens, briefing) - _layout – Layout do projeto (html / imagem) - _sql – Arquivo de banco de dados
  • 30. - css – Cascading Style Sheet (.css) - fonts – fontes utilizadas no site / ícones (.ttf, woff, svg, woff2, .otf) - img – imagens estáticas utilizadas no layout do site (.png, jpg, .gif, .svg) - js – Scripts Javascript (.js) index.html favicon.ico
  • 31.
  • 33. Arquivos sendo enviados e recebidos FileZilla Client Computador RemotoComputador Local Dados e log da conexão
  • 34. • História da Internet (https://pt.wikipedia.org/wiki/História_da_Internet) • Internet (https://pt.wikipedia.org/wiki/Internet) • E-mail (https://pt.wikipedia.org/wiki/E-mail) • História da Internet no Brasil (https://pt.wikipedia.org/wiki/História_da_Internet_no_Brasil) • Uniform Resource Name (https://en.wikipedia.org/wiki/Uniform_Resource_Name) • Sebben, Naiara. Programação Web. Joaçaba. Unoesc Virtual. 2013. 200p. ISBN 978-85- 65600-17-0 • A História do HTML (http://www.frontendbrasil.com.br/artigos/a-historia-do-html/) • HTML5 (https://en.wikipedia.org/wiki/HTML5)
  • 35. • HTML5 (https://en.wikipedia.org/wiki/HTML5) • HTML (https://en.wikipedia.org/wiki/HTML) • W3Schools (http://www.w3schools.com) • HTML Princípios Básicos - (http://pt.slideshare.net/mayzaoliveira/htmlprincipiosbasicos) • Tutorial de HTML - Tabelas (http://www.clem.ufba.br/tuts/html/c09.htm) • FTP - (https://pt.wikipedia.org/wiki/File_Transfer_Protocol) • Organização - (https://pt.wikipedia.org/wiki/Organiza%C3%A7%C3%A3o)