Aplicação para Web I Começando a compreender o HTML
A Linguagem da WEB O HTML ou HyperText Markup Language linguagem universal compreendida pelos navegadores web (browsers) para a comunicação utilizando a internet. Funcionamento padrão: IN TE R N ET H TML Serv id or
Servidor Web O que realmente um servidor web faz? Operação fundamental Aguarda as solicitações dos browsers sem descanso; Que tipo de solicitações páginas web, imagens, sons ou até mesmo filmes. O que o browser faz? Transcreve o HTML no padrão visual com o qual nós trabalhamos todos os dias.
Programação WEB - HTML Requisitos para a programação WEB Conhecer a linguagem HTML; Utilização de um editor de textos; Possuir um browser web para testar as aplicações. O que é escrito no HTML? Linguagem baseada em TAGs Marcas padrões que aparecem sempre entre sinais de < e > e são utilizadas para indicar a formatação a serem executados pelo browser.
Código HTML <html> <head> <title> Meu primeiro código HTML</title> </head> <body> 1 <h1> Meu primeiro código HTML </h1> 2 <p> Junte-se a nós nesse novo mundo de aplicações para Web. </p> 3 <h2> COMO FAÇO ISSO? </h2> 4 <h3> Estudaremos HTML, CSS, XHTML, JAVASCRIPT e JQUERY</h3> </body> </html> 5
HTML Toda página HTML possui 3 partes básicas: estrutura principal: <html>... </html> um cabeçalho: <head>... </head> um corpo de página: <body>... </body> <html>... </html> Utilizado para delimitar o código html escrito <head>... </head> Utilizado para identificar parâmetros de configuração do documento e o título da barra. <body>... </body> Envolve o corpo do html em sim e configurações de exibição.
Código HTML <html> <head> <title> Meu segundo exemplo</title> <meta content="text/html; charset=utf-8"> </head> <body bgcolor= green > Temos t a m b é m c o m o p a d r ã o BR a iso-8859-1 <h1> Página html com cor de fundo... </h1> </body> </html>
Vamos treinar Uma cervejaria gostaria de vender diferentes tipos de cervejas para todo brasil. O chefe geral vai até você e mostra o seguinte rascunho: Seu objetivo é analisar o rascunho e montar a página com o respectivo conteúdo em cada umas das partes básicas do HTML O site deve ter: N o m e d o arquivo: index.html o fundo deve ser: Cinza (gray) B e m v indos a cervejaria LUPO As cervejas que t e m o s hoje são: Black caixa lata = R $ 9,99 Black garrafa = R $ 32,50 Pilsen caixa lata = R $ 11,30 Pilsen garrafa = R $ 36,00 Artesanal caixa lata = R$ 28,50 Artesanal garrafa = R$ 76,80 Obrigado pela preferência!!!
Programação HTML É possível trocar a cor de fundo por imagem Sim, compare os códigos abaixo... <html> <head> <title> Página 1 </title> </head> <body bgcolor= gray > <h1> Fundo Cinza </h1> </body> </html> <html> <head> <title> Página 1 </title> </head> <body background= f.png > <h1> Fundo Cinza </h1> </body> </html>
Melhorando o site da cervejaria LUPO Após uma análise realizada pela cervejaria LUPO, o chefe pede que abaixo de cada cerveja tenha: Um comentário de fonte menor dizendo Para a black: Cerveja apurada de boa qualidade Para a Pilsen: Cerveja criada com os melhores componentes existentes Para a artesanal: Melhor cerveja do mercado brasileiro Como o chefe passou as alterações? Um único conteúdo deve estar em cada linha do site e não mais que isso
Programação HTML Trabalhando com formatação e estilos Já vimos que o HTML não utiliza formatação visual como a do Word. Vimos também que tudo nele é a base de TAGs Então como é feita a formação padrão? utilizando novas TAGs, tais como: <center>... </center> :: centraliza o texto entre as tags <b>... </b> :: deixa o texto entra as tags em bold <i>... </i> :: deixa o texto entre as tags italico <sub>... </sub> :: faz com que o texto fique sobrescrito <pre>... </pre> :: deixa o texto como foi digitado <p>... </p> :: utilizada para quebra de parágrafo Teste
Programação HTML A TAG <p>... </p> responsável pela quebra de parágrafos e inserção automatica de uma linha em branco entre parágrafos. Pode fazer uso de alinhamento nas posições: Left :: alinhamento a esquerda Center :: alinhamento a esquerda Right :: alinhamento a direita Sintaxe de uso: Melhorem a cervejaria <p align= POSIÇÃO >... </p> Teste
Programação HTML Configurando as fontes Há uma forma de colocar uma determinada fonte, um determinado tamanho e uma cor específica em uma parte do texto Use a TAG <font>... </font> Sintaxe do comando <font size= n face= nome color= cor >... </font> Onde: n = tamanho da fonte que vai de 1 a 7, sendo o padrão 3 nome = nome da fonte utilizada. ex.: Arial cor = cor que a fonte terá
Programação HTML Vamos testar essas novas formas de trabalhar com o HTML. Faça o seguinte arquivo: Título :: Página para teste das fontes Nome do arquivo:: coresfontes.html TESTE DAS FONTES EM HTML Texto cor red com size 1 e face Arial Texto cor green com size 2 e face Tahoma Texto cor blue com size 3 e face Arial Texto cor orange com size 4 e face Verdana Texto cor gray com size 5 e face Tahoma Texto cor #CBC348 size 6 e face Arial Texto cor #9DECE7 size 7 e face Verdana FIM DOS TESTES
Programação HTML Como faço para pular uma linha? A TAG <BR> faz a quebra de linha sem acrescentar espaços extras entre linhas. Finaliza a linha de texto e insere automaticamente uma outra linha em branco. Não precisa ser finaliza com </BR> Crie um novo arquivo html para testar a TAG<br/>. Para tanto, coloque este texto como está escrito aqui e abra-o no browser!!! Como ficou?
Programação HTML Linhas Horizontais Em alguns arquivos HTML é necessário a criação de linhas para a separação do texto. Uma das formas é utilizando o TAG <HR> como no <BR> não é preciso finaliza-la com </HR> Sintaxe <HR width= n% align= posição size= n color= #cor noshade> width :: define a largura da linha em porcentagem align :: alinhamento da linha na página size :: define a espessura da linha em pixels color :: cor da linha noshade :: linha sem sombra.
Código HTML <html> <head> <title> Testando linhas horizontais </title> </head> <body> Primeiro exemplo com a linha horizontal <hr width= 100% align= left size= 2 color= silver> <br/> <center>segundo exemplo com a linha horizontal</center> <HR width="70%" align="center" size="3" color="blue" > <br> Terceiro exemplo com a linha horizontal <HR width="30%" align="center" size="5" color= red > <br> </body> </html>
Caracteres Especiais
Exercício Fazer um site com o seu currículo baseado na figura abaixo:
Dúvidas?