HTML? HTML? HTML? HTML e HTTP. HTML e HTTP 26/02/2011

Tamanho: px

Começar a partir da página:

Download "HTML? HTML? HTML? HTML e HTTP. HTML e HTTP 26/02/2011"

Ana Laura Sanches Antunes
5 Há anos
Visualizações:

HTTP. Tim Berners-LeeLeProfessor do MIT Rhavy Maia Guedes rhavy.maia@gmail.com HTML?

1 INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 HTML? INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 1 Hypertext Markup Language (Linguagem de marcação de hipertexto); Criada por Tim Berners-Lee em 1989; Trafega através do protocolo HTTP. Tim Berners-LeeLeProfessor do MIT Rhavy Maia Guedes rhavy.maia@gmail.com HTML? HTML? 3 4 Provê a estrutura da página web; Publicar documentos online; Recuperar ou acessar informações através de links; Construir formulários para conduzir transações: buscas, compras, inscrições...; Incluir gráficos, vídeos, imagens, sons. Estrutura: HTML e HTTP HTML e HTTP 5 6 O HTTP é responsável pelo tratamento de pedidos e respostas entre cliente e servidor na World Wide Web; Forma padronizada de comunicação entre os clientes e os servidores da Web; Possui oito métodos de requisição que indicam a ação a ser realizada no recurso especificado. Principais métodos HTTP: GET Os dados de envio para o servidor fazem parte da URL; POST Os dados entrados pelo formulário fazem parte do corpo da mensagem enviada para o servidor; Possibilita a transferência de grande quantidade de dados. DELETE, PUT, HEAD, TRACE, OPTIONS, CONNECT. 1

2 xhtml? WWW e HTML 7 8 Variante do HTML que utiliza a sintaxe do XML(Extensible Markup Language); Utiliza todos os componentes existentes no HTML Linguagem utilizada pela Web por sua capacidade de formatação e diagramação de Hipertexto/hipermídia O que é HTML? Como ler e exibir o HTML? 9 10 Um arquivo de texto comum; Pode ser escrito através de qualquer editor de texto. Possui as possíveis extensões: html e htm Linguagem interpretada; Pode ser exibida através de qualquer Navegador de Internet (Browser); Alguns sistemas auxiliam na criação de páginas HTML. Bloco de notas; Dreamweaver; Bluefish; Notepad++. Como ler e exibir o HTML? Passos iniciais no HTML? Tags <body> Atributos <body bgcolor='#99cc66'> Os arquivos HTML serão armazenado, inicialmente, nos próprios computadores; Organização: Código Arquivos 2

Estrutura Básica HTML Estrutura Básica HTML 13 14 <html> <head> <title> <body> Estrutura Básica HTML HTML: Cores em Hexadecimal 15 16 <body> bgcolor text link alink vlink Hexadecimal #ff0000 Nome red

3 Estrutura Básica HTML Estrutura Básica HTML <html> <head> <title> <body> Estrutura Básica HTML HTML: Cores em Hexadecimal <body> bgcolor text link alink vlink Hexadecimal #ff0000 Nome red <body bgcolor='#99cc66' text='arial' link= #99FF00 alink= red' vlink= pink'> Tags iniciais Tag <font> </br> <p></p> Align <b></b> <i></i> <u></u> <s></s> <sub></sub>, <sup></sup> Utilizado para formatar a cor, tamanho e ou tipo de letra das palavras. <font></font> size face color <font size= 3 face= arial color= #FFFF00 > 3

4 Exercícios Revisão Exercício 1 HTML HEAD BODY TAGs Exemplo: <html></html> Atributos Exemplo: <body bgcolor= #FFFF00 font= arial > Revisão Negrito: <b> Negrito </b> Itálico: <i> Itálico </i> Sublinhado: <u> Sublinhado </u> Riscado: <s> Riscado </s> Eu salvo, mas não aparece minha página web, fica sempre texto. Verifique sempre a extensão do arquivo. Sempre deve aparecer HTML no final por exemplo, index.html Fiz a página, mas o navegador não mostra nada. Fique sempre alerta nas TAGs que formam seu documento. Elas devem sempre obedecer a sintaxe correta! Fiz a página, mas o navegador não mostra nada. Fique sempre alerta nas TAGs que formam seu documento. Elas devem sempre obedecer a sintaxe correta! 4

5 25 26 Está tudo de uma cor só. Procure a TAG FONT que está mandando dar essa cor, ou ela esta escrita aberta ou sem complemento </font> Usada para inserir imagens na pagina web; <img> src width height alt border <img src= endereço imagem width= largura height= altura alt= mensagem > <img src= endereço > O endereço da imagem deve ser escrito completo quando você estiver inserindo imagem de outros sites. Quando a imagem estiver no seu próprio site e na mesma pasta da página html basta informar o nome da imagem ou se a imagem estiver dentro de uma pasta basta informar o nome da pasta e em seguida o nome da imagem. Exemplo: <img src= ifpb.png alt= IFPB > Exemplo: <img src= alt= IFPB > Borda Para inserir uma borda na imagem basta informar o atributo border dentro da tab <img>; Caso a imagem seja um link automaticamente ela aparecerá com uma borda. Nesse caso não é necessário utilizar o atributo border. <img src= ifpb.png alt= IFPB border= 1 > Procure usar imagens do tipo JPG, PNG em suas páginas web, pois elas são de boa qualidade e são mais leves que outros tipos e, portanto, a página demora menos para ser exibida no navegador. 5

6 Efeitos Especiais Tag <hr> Alguns recursos HTML que servem para deixarmos nossas páginas um pouco mais interessantes. Faz aparecer na página web uma linha horizontal; <hr> size width Color align <hr color= red size= 4 width= 600 > Tag <marquee> Tag <marquee> Faz um letreiro ou uma imagem correr horizontalmente ou verticalmente pela página; <marquee> behavior - Define o tipo de efeito: SCROLL, SLIDE, ALTERNATE. direction - Define a direção do efeito: LEFT (esquerda), RIGHT (direita), Up (para cima) ou Down (para baixo). width - Define, em pixels ou %, o comprimento horizontal do efeito. height - Define, em pixels ou %, o comprimento vertical do efeito. bgcolor - Serve para definir a cor de fundo do letreiro. A cor pode ser dada por uma cor escrita em inglês ou por código. <marquee> align - Alinha o texto/imagem: "top" (no topo), "middle" (no meio) ou "bottom" (em baixo). scrollamount - Especifica, em pixels, de quantos em quantos pixels o texto aparecerá na tela. Assim podese definir a velocidade de deslocamento do letreiro, pois quanto maior o número, maior será a velocidade. scrolladelay - Especifica, em milissegundos, o tempo que o texto/imagem permanecerá na tela, assim, quanto menor o numero, maior será a velocidade. hspace - Determina, em pixels, as margens esquerda e direita. vspace - Determina, em pixels, as margens superior e inferior. loop - Determina o numero de vezes que o texto rolará na tela. Sem usar este atributo, por padrão, o numero de vezes é infinito. Tag <marquee> Tag <div> <marquee behavior='scroll' direction='right'>guia xhtml</marquee> <marquee behavior='alternate' width='400 >Guia xhtml</marquee> <center> <marquee behavior='alternate'> <img src='ifpb.png' width='150' height='196'> </marquee> </center> Usado para alinhar blocos de texto: a direita, a esquerda, justificado ou centralizado; <div> align center left right justify <div align= center'>bloco de texto e ou objetos</div> 6

Tag <blockquote> Exercícios 37 38 Usado para exibir o texto e objetos, sob seu controle, com espaçamento horizontal em suas

7 Tag <blockquote> Exercícios Usado para exibir o texto e objetos, sob seu controle, com espaçamento horizontal em suas margens esquerda e direita; <blockquote> Exercício 2 Imagem Marquee Div <blockquote>texto e ou Objetos</blockquote> 39 Perguntas? 7

Documentos relacionados

HTML. HyperText Markup Language. v Rui Menino. Tags de marcação. Referência. (Linguagem de marcação de hypertext)

HTML. HyperText Markup Language. v Rui Menino. Tags de marcação. Referência. (Linguagem de marcação de hypertext) HTML HyperText Markup Language (Linguagem de marcação de hypertext) Tags de marcação Referência v1.1 2008-2017 Rui Menino tags Para formatar e paginar o texto dentro de uma página html, foi definido o