Linguagem de Programação Web Karine Alessandra Córdova.

Linguagem de Programação Web

Karine Alessandra Córdova

HyperText Markup Language: • Linguagem de Marcação de Hipertexto; • Inventada por Tim Berners-Lee (década de

1980); • Utilizado como base as especificações SGML; • Define o conteúdo de uma página Web; • Arquivos do tipo HTML são textos;

HTML

Possui 8 versões: HTML; HTML +; HTML 2.0; HTML 3.0; HTML 3.2; HTML 4.0; HTML 4.01; HTML 5;

Navegadores WEB

É um programa que habilita seus usuários a interagirem com documentos HTML hospedados em um servidor Web.

Navegadores WEB

Exemplos:

Internet Explorer - Microsoft

Mozilla Firefox - Mozilla Corporation

Google Chrome - Google

Safari - Apple Inc.

Opera - Opera Software ASA

Exercício 01

Busque outros navegadores web e qual a empresa de sua autoria.

Editores HTML

• É um software para a criação de páginas web utilizando a linguagem de marcação HTML.

• Editores HTML específicos oferecem vários recursos extras para auxiliar na criação de páginas.

• Muitos dão a opção de visualização do projeto, tanto em linhas de código HTML quanto o resultado delas no design da página.

Editores HTML

Exemplos: Adobe Dreamweaver

Editores HTML

Exemplos: Bloco de notas

Editores HTML

• Exemplos:• CoffeeCup HTML Editor• CoffeeCup Free HTML Editor (Free)

Editores HTML

• Exemplos:• Microsoft Frontpage

Editores HTML

• Exemplos:• PHP Editor (Free)

Exercício 02

Busque outros editores HTML e qual a empresa de sua autoria.

O Padrão W3C

W3C - World Wide Web Consortium (Consorcio de empresas de tecnologia)

Desenvolve padrões para criação e interpretação web. Endereço para validar seu site:

http://validator.w3.org

HyperText Markup Language: • Linguagem de Marcação de Hipertexto; • Inventada por Tim Berners-Lee (década de

1980); • Utilizado como base as especificações SGML; • Define o conteúdo de uma página Web; • Arquivos do tipo HTML são textos;

HTML

O que são TAGS HTML?

• Rótulos usados para informar ao navegador como deve ser apresentado o website

• Todas as Tags tem o mesmo formato, começam com o sinal “<” e encerram com o sinal “>”

• Existem dois tipos: • de abertura “<”• de fechamento “</”

• Exceções (não há necessidade de abertura ou fechamento da Tag) - Existem algumas Tags de comandos isolados como: <br />

O que são TAGS HTML?

• Exemplos:• Exemplo 1

• <b>Exemplo em negrito.</b>• Exemplo 2

• <center>Este texto será apresentado no centro da tela.</center>

Formação básica de uma página

<html><head><title>Título do Site</title></head><body></body></html>

Possui 8 versões: HTML; HTML +; HTML 2.0; HTML 3.0; HTML 3.2; HTML 4.0; HTML 4.01; HTML 5;

Estrutura Básica

<!DOCTYPE>: • Utilizado para informar a especificação do

código que está sendo usado ao navegador; • É a primeira declaração inserida em um

documento HTML; • Não é considerado um elemento, e sim uma

instrução ao navegador; • <!DOCTYPE html>;

• <html>: • Informa ao navegador que se trata de um

documento do tipo html; • Qualquer elemento HTML deve inserido dentre

deste elemento principal (com exceção de DOCTYPE);

• Esta tag representa a raiz de um documento html;

• <html></html>;

<head>: • Serve para definir comandos de configuração

da página; • A ideia é agrupar informações sobre o

documento HTML (metainformações); • Encoding, descrição de autor, título da página,

palavras chaves; • <head></head>;

<body>: • Basicamente é a área que irá definir o corpo da

página • Responsável por comportar o conteúdo exibido

ao usuário; • Cabeçalhos, textos, listas, tabelas, hyperlinks e

outros componentes; • <body></body>;

<h1>...<h6>: • As tags <h1> à <h6> são responsáveis por

definirem cabeçalhos na página; • <h1> define o cabeçalho mais importante e o

<h6> o menos; • É sempre inserido uma linha abaixo de cada

cabeçalho definido; • <h1>Principal Título da Página</h1>;

<br>: • Elemento utilizado para efetuar uma quebra de

linha no documento html; • Deve ser utilizada quando se deseja levar o

conteúdo seguinte para uma próxima linha sem iniciar um parágrafo;

• Deve ser utilizada para quebrar linhas, não para separar parágrafos;

• Este texto<br>será quebrado<br>assim.

Outros: • <table></table>; • <img></img>; • <b></b>; • <nav></nav>; • <ul><ul>; • <li></li>; • <a></a>;

Formação básica de uma página

Resultado

Exercício 03

• Abra o bloco de notas e crie uma pagina HTML onde o título da página devera ser seu nome.

• Atenção: • Deve ser utilizado as TAGS para uma formatação básica já vistas em

aula (<html>, <head>, <title>, <body> ).• Após sua página pronta basta salvar sua pagina com

nome_do_seu_site.html (nome_do_seu_site deve ser substituído pelo seu nome).

Conjunto de Caracteres (Charecter set)

• Biblioteca de caracteres• Define a língua que o site será exibido

• Exemplo:• Língua portuguesa• Língua inglesa• Língua espanhola• Etc.

Conjunto de Caracteres (Charecter set) Local de utilização:

<html>

<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8“ /><title>Título do site</title>

</head><body></body></html>


• Exemplos• Exemplo 01

• <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

• Exemplo 02• <meta http-equiv="Content-Type" content="text/html; charset=iso-

8859-1" />


Resultado do exemplo 01

Conjunto de Caracteres (Charecter set) Resultado do exemplo 02

Conjunto de Caracteres (Charecter set) Utilização de alguns editores HTML:

´ ´Á &Aacute

; Ç ÇÃ Ã

Exercício 04

Pesquise três outros Characters Set não apresentados em aula

TAGS mais utilizadas

• Para cabeçalho “<head>”• <title>: define o título da página• <style>: define formatação em CSS (Cascading Style Sheets). • <script>: define programação de certas funções em página com scripts• <meta>:

• define propriedades da página• codificação de caracteres • descrição da página, autor, etc • são muitos usados por mecanismos de busca

TAGS mais utilizadas

Para corpo “<body>”<h1>, <h2>,... <h6>: cabeçalhos e títulos no documento em diversos tamanhos. <p>: novo parágrafo. <br>: quebra de linha. <table>: cria uma tabela (linhas são criadas com <TR> e novas células com <TD>. <div>: determina uma divisão na página a qual pode possuir variadas formatações. <font>: altera a formatação (fonte, cor e tamanho) de um trecho do texto. <b>, <i>, <u> e <s>: negrito, itálico, sublinhado e riscado, respectivamente. <img>: imagem - <img src="imagens/minha_imagem.png" /> <a>: hiper-ligação para um outro local<textarea>: caixa de texto (com mais de uma linha); <cite>: citação <bgcolor>: define a cor de fundo

Exercício 02

Utilize a estrutura já criada no exercício anterior e adicione palavras-chave para sua página.

Inserindo palavras chave de uma página

<meta name="keywords" content="Palavras-chave do site">

Resultado apresentado até o momento

<html>

<head><title>Título do site</title><meta name="description" content="Descrição do site"><meta name="keywords" content="Palavras-chave do site"></head>

<body></body>

</html>

Inserindo cor de fundo

<body bgcolor="#CEE7FF">

Exercício 02

Utilize a estrutura já criada nos exercícios anteriores e adicione cor de fundo para seu site.

Resultado apresentado até o momento

<html><head><title>Título do site</title><meta name="description" content="Descrição do site"><meta name="keywords" content="Palavras-chave do site"></head>

<body bgcolor="#CEE7FF">

</body>

</html>

Linguagem de Programação Web Karine Alessandra Córdova.

Documents

Transcript of Linguagem de Programação Web Karine Alessandra Córdova.