tec. desenvolvimento web prof.: jean carlo mendes [email protected] [email protected]
TRANSCRIPT
TEC. DESENVOLVIMENTO WEBProf.: Jean Carlo Mendes
http://www.mendesnet.com.br
Páginas Web
- Uma página web é um arquivo ou documento de texto gravado com a extensão .html ou .htm, cujo conteúdo é composto basicamente de texto e códigos de marcação, conhecidos como tags HTML.
- Pode conter textos, imagens, vídeos, animações, sons, etc...
- Conhecida como Home Page
Páginas Web
- O acesso à páginas web é realizado através de programas conhecidos como navegadores (browsers)- IE, Firefox, Chrome, Opera, Safari, ....
- O navegador, conectado à internet, faz uma requisição ao servidor web (através do endereço – URL). O servidor processa o pedido e devolve o documento HTML.
Servidores Web
Navegadores - Browser
Navegadores – desktop - Mundo
Fonte: http://gs.statcounter.com/#desktop-browser-ww-monthly-201308-201407
Navegadores – desktop - Brasil
Fonte: http://gs.statcounter.com/#desktop-browser-BR-monthly-201308-201407
Navegadores – desktop - EUA
Fonte: http://gs.statcounter.com/#browser-US-monthly-201308-201407
Navegadores – mobile- mundo
Fonte: http://gs.statcounter.com/#mobile_browser-ww-monthly-201308-201407
Navegadores – mobile- Brasil
Fonte: http://gs.statcounter.com/#mobile_browser-BR-monthly-201308-201407
Navegadores – mobile- EUA
Fonte: http://gs.statcounter.com/#mobile_browser-US-monthly-201308-201407
Navegadores – tablet - mundo
Fonte: http://gs.statcounter.com/#tablet-browser-ww-monthly-201308-201407
Navegadores – tablet - Brasil
Fonte: http://gs.statcounter.com/#tablet-browser-BR-monthly-201308-201407
Navegadores – tablet - EUA
Fonte: http://gs.statcounter.com/#tablet-browser-US-monthly-201308-201407
O HTML
- O HTML não é uma linguagem de programação. É uma linguagem de marcação
- O HTML possuí um conjunto de tags- Uma página web é definida pelo
conjuntos de tags associado ao texto da página.
- Documentos HTML = Páginas Web
HTML
- A estrutura de um documento básico em HTML deve conter as seguintes tags:- HTML (Indica o início do documento)- HEAD (Seção de cabeçalho)- BODY Corpo do documento
HTML
- As tags HTML (salvo algumas exceções) devem conter marcações de início e de fim. A marcação de fim é iniciada por uma barra “/” antes do nome da tag.
- Exemplo:- <Body>- </Body>
<html>
<head>
<title>Exemplo de página </title>
<meta name=“Author” content=“José”>
<meta name=“keywords” content=“EC, Programação”>
</head>
<body>
Hello World!
</body>
</html>
HTML- Exercício:
- Criar uma página Hello World (ver slide anterior)- Gravar em um arquivo hello.html- Abrir a página no navegador...
HTML - Acentuação- Alguns navegadores e SOs não conseguem
lidar bem com caracteres acentuados escritos diretamente no documento HMTL.
- Nestes casos é necessários informar a codificação do caracter especial- á aacute;- â acirc;- Ç Ccedil;- Tabela de acentuação
HTML - Cores- As cores devem ser definidas através de
códigos hexadecimais, usando as definições de cores em RGB (Red, Green, Blue). Cada par de valor indica a intensidade da cor naquele canal.
- Preto #000000- Branco #FFFFFF- Azul #0000FF- Tabela de cores
HTML- Headings
- Existem marcações (tags) especiais para textos de cabeçalhos. Estas tags são divididas por níveis. Cada nível é formatado de uma forma diferente (tamanho da fonte)
- <h1> Cabeçalho Nível 1 </h1>- <h2> Cabeçalho Nível 2 </h2>- <h3> Cabeçalho Nível 3 </h3>- <h4> Cabeçalho Nível 4 </h4>- <h5 align=“center”> Cabeçalho Nível 5 </h5>- Exemplo
Cabeçalhos aceitam atributo de alinhamento...
HTML- Quebra de linhas
- A quebra de linha em documentos HTML é feita através da tag <br>. Esta tag não precisa de fechamento.
- Exemplo:
Esta é a primeira linha. <br>
Esta é a segunda linha. <br>
Esta é a terceira linha.
HTML- Formatação de parágrafos
- Todo o corpo do documento HTML deve estar contido entre as tags <body> e </body>
- O parágrafo é representado pela tag <p>- Quando o navegador encontra uma tag <p> ele
avança uma linha e inicía a exibição na próxima linha
HTML- O parágrafo aceita atributo de
alinhamento:<p align=“center”> Este texto será centralizado </p>
<p align=“left”> Este texto será alinhado à esquerda </p>
<p align=“justify”> Este texto será justificado </p>
- Exemplo
HTML- Textos também podem ser centralizados
usando a tag <center>- Exemplo:- <p>- <center>Este texto foi centralizado usando a tag
center</center>- </p>
- Exemplo
HTML – Cor de fundo- A cor de fundo de uma página pode ser
definida usando o atributo bgColor da tag <body>
- <body bgColor="#FFFF00">
- Exemplo
- ** Observação. Este atributo está caindo em desuso. Será retirado na especificação final do HTML 5
HTML – Sobrescrito e Subscrito- Representados pelas tags <sup> e <sub>
Fórmula da água é: H<sub>2</sub>O
Einstein disse que: E = mc<sup>2</sup>
Exemplo
HTML – Negrito e Itálico- Representados pelas tags <b> e <i>
<b>Este texto está em negrito</b>
<i>Este texto está em itálico</i>
HTML – Exercício....
- Tente reproduzir, com o que sabe até o momento, a seguinte página
Modelo
- Crie variações da página desenvolvida acima, alterando-se as cores e formatações