APOSTILA HTML E CSS Professor: Msc. Marx Gomes van der Linden Curso Superior em Tecnologia: Redes de Computadores IFPB 2009

Tamanho: px
Começar a partir da página:

Download "APOSTILA HTML E CSS Professor: Msc. Marx Gomes van der Linden Curso Superior em Tecnologia: Redes de Computadores IFPB 2009"

Transcrição

1 APOSTILA HTML E CSS Professor: Msc. Marx Gomes van der Linden Curso Superior em Tecnologia: Redes de Computadores IFPB 2009

2 Introdução Aplicações cliente/servidor para web Fundamentos de HTML+CSS Linguagem de programação de servidor: PHP Banco de Dados: MySQL Mecanismos de autenticação e fundamentos de Javascript Bibliografia Davis, M.E, Philips, J.A. Aprendendo PHP & MySQL. Alta Books, p. Robbins, J.N. Learning Web Design. 3rd Edition. O'Reilly, p. Avaliação 5 notas: o Projeto 1 (PHP) o Prova 1 (PHP) o Projeto 2 (MySQL) o Prova 2 (MySQL) o Listas de Exercícios A web, modelo estático 2

3 HTTP Hypertext Transfer Protocol Porta 80 Modelo de Requisição e Resposta Requisição Cliente (User Agent) emite uma Requisição, pedindo um Recurso: o Método (GET ou POST) + Recurso o Cabeçalho o Corpo da Mensagem GET /index.html HTTP/1.1 Host: User-Agent: Mozilla/5.0 (X11; U; Linux i686; pt-br; rv: ) Gecko/ Firefox/3.0.1 Accept-Language: pt-br,pt;q=0.8,en-us;q=0.5,en;q=0.3 Resposta Servidor HTTP retorna uma resposta Contém um código de status o 200 = ok o 302 = Redirecionamento o 403 = Não autorizado o 404 = Não encontrado o etc... HTTP/ OK Cache-Control: private, max-age=0 Date: Sun, 27 Jul :47:50 GMT Expires: -1 Content-Type: text/html; charset=utf-8 Content-Length: 2739 <html><head><meta http-equiv="content-type "content="text/html;charset=utf-8"><title> Google</title><style>body,td,a,p,.h{font-f amily:arial,sans-serif}.h{color:#3366cc}.q {color:#00c}.ts td{padding:0}.ts{border-c ollapse:collapse}.lnc:link,.lnc:visit(...) 3

4 Apache Servidor HTTP mais usado no mundo o (49.12% de todos os websites do mundo) Software livre Modular Versátil e configurável HTML HTML Arquivo de texto simples, organizado por tags o <nomedatag atributo1="valor1" atributo2="valor2"> Conteúdo </nomedatag> Nomes das tags não distinguem maiúsculas e minúsculas Espaços extras não são levados em consideração Deve especificar a estrutura do documento 4

5 HTML + CSS CSS Cascading Style Sheets Especificam a formatação do documento Um arquivo CSS pode ser aproveitado para vários arquivos HTML Uso de CSS facilita a separação entre conteúdo e formatação 5

6 6

7 Sites estáticos vs. Dinâmicos SITE ESTÁTICO Cliente solicita recursos, sem especificar parâmetros Servidor envia arquivos solicitados Não há interação com usuário SITE DINÂMICO Cliente especifica parâmetros nas requisições Servidor processa o arquivo antes de enviar Usuário interage com o site A web, modelo dinâmico 7

8 PHP PHP: Hypertext Preprocessor Linguagem interpretada. Pré-processador de HTML. o Código-fonte embutido no código HTML. Executada no servidor. Simples, direta e projetada especialmente para a web. Software Livre. exemplo.php 8

9 Saída: Renderização: 9

10 Armazenamento de dados Arquivos de texto vs Bancos de Dados Redundância Manutenção Integridade Eficiência Banco de dados relacional Composto por Entidades (ou Tabelas). Cada tabela tem campos. Os campos de uma tabela podem fazer referência a outras tabelas. Dados são armazenados de maneira eficiente. Buscas podem ser realizadas de maneira eficiente. SQL Structured Query Language Linguagem-padrão para manipulação de informações em bancos de dados. o Definições de dados o Consultas o Modificações, Inserções, Exclusões o Controle de Acesso SQL exemplos 10

11 CREATE TABLE My_table ( my_field1 INT, my_field2 VARCHAR (50), my_field3 DATE NOT NULL, PRIMARY KEY (my_field1, my_field2) ); INSERT INTO My_table (field1, field2, field3) VALUES ('test', 'N', NULL); UPDATE My_table SET field1 = 'updated value' WHERE field2 = 'N'; SELECT * FROM Book WHERE price > ORDER BY title; SELECT Book.title, count(*) AS Authors FROM Book JOIN Book_author ON Book.isbn = Book_author.isbn GROUP BY Book.title; DELETE FROM My_table WHERE field2 = 'N'; MySQL Sistema de Banco de Dados Software Livre Leve, eficiente e robusto Integra-se bem com PHP LAMP Linux + Apache + MySQL + PhP WAMP 11

12 Windows + Apache + MySQL + PhP HTML Arquivo-texto composto por um texto e um conjunto de tags de marcação. As tags podem referenciar imagens, scripts e outros objetos. Vínculos (links) Estrutura de um documento A estrutura de um documento html é definida através de tags: o Comandos entre < e > o Quase sempre aparecem aos pares, sendo uma de abertura e outra de fechamento: <tag> texto... </tag> Um documento HTML inicia e finaliza com uma tag de identificação HTML 12

13 <html>... </html> O browser não faz distinção entre maiúsculas e minúsculas o <HEAD> = <head> = <Head> = <head> Os caracteres < e > são representados como < ( less than ) e > ( greater than ) Cabeçalho Informações sobre o documento (meta- informações) e que não são exibidas (com exceção do título) Definido pelas tags <head> e </head> Uso opcional Pode apresentar as seguintes tags: o title o meta o link, etc Título o Nomeia um dado documento <head> <title> Minha Primeira Página </title> </head> o Quando o usuário define que determinada página fará parte de sua lista de favoritos, é o texto do título que será inserido: 13

14 o Usado pelos mecanismos de busca Corpo o Parte da página onde são colocados os textos e as marcações o É o que o usuário vê... o Texto o Imagens o Formulários o Vínculos <html> <head> <title> Minha Primeira Página </title> </head> <body> Texto e Tags... </body> </html> Headings o Usados para definir títulos de seção o Organizados através de seis tamanhos o <H1> texto </H1> o <H2> texto </H2>,... o Tamanho H1 > Tamanho H2 > Tamanho H3 >

15 <html> <head> <title> Minha Primeira Página </title> </head> <body> <h1>título da Seção 1</h1> <h2>título da Seção 1</h2> <h3>título da Seção 1</h3> <h4>título da Seção 1</h4> <h5>título da Seção 1</h5> </html> </body> Parágrafos Bloco de texto entre as tags <P> e </P> o Quebra uma linha antes e uma depois do texto HTML <p> Esse é o primeiro parágrafo. </p> <p> Esse é o segundo parágrafo. </p> Visualização Esse é o primeiro parágrafo. Esse é o segundo parágrafo. Quebra de linha Podemos quebrar uma linha sem criar um parágrafo usando <BR> o Não existe </BR> o Pode estar inserido dentro de <P> HTML Esse texto está <br> quebrado. Visualização Esse texto está quebrado. Destaque Destaca um elemento do texto. Por padrão, implica em negrito. o <strong> e </strong> HTML Visualização Esse texto está em negrito. Ênfase Indica ênfase em um elemento do texto. 15

16 Por padrão, implica em itálico. o <em> e </em> HTML Esse texto está em <em> itálico </em>. Visualização Sobrescrito Permite alterar a posição de um determinado texto em relação à linha de texto, colocando-o acima do padrão o <SUP> e </SUP> HTML Palavra <sup> sobrescrita </sup>. Visualização Palavra sobrescrita Subescritos Permite alterar a posição de um determinado texto em relação à linha de texto, colocando-o abaixo do padrão o <SUB> e </SUB> HTML Palavra <sub> sobrescrita </sub>. Visualização Palavra sobrescrita Texto sem formatação Exibe o texto conforme formatado na fonte o <PRE> e </PRE> o Retira a formatação de tabulação e de texto Comando for: <pre> if (a > b) { printf( Erro! ); } </pre> Comando for: if (a > b) { printf( Erro! ); } Imagens Imagens são anexadas em um documento HTML através da tag IMG o Não há </IMG> Atributos: o src:(obrigatório) caminho da imagem (local ou remoto) o alt: (opcional) texto alternativo o width: (opcional) largura de exibição em pixels 16

17 o heigth: (opcional) altura de exibição em pixels Exemplos: <img src=..\imagens\minhafoto.jpg > <img src=..\imagens\minhafoto.jpg alt= Texto que irá aparecer... > <img src=..\imagens\minhafoto.jpg width= 30 heigth= 90 > Links Os links (ligações ou hiperligações) representam um dos recursos mais interessantes da web, pois permite, dentre outras coisas, que: o Se mova de uma página à outra o Se descarregue um vídeo ou música o Se acione uma aplicação Estrutura de um hiperlink São formados por três partes: o Destino Identifica o servidor onde se encontra o recurso e o recurso De acordo com o recurso uma determinada ação é realizada o Rótulo Parte que o usuário vê e na qual clica para acessar o recurso o Alvo Representa o destino onde o documento será exibido. URL Uniform Resource Locator o Permite localizar qualquer tipo de recurso (objeto MIME) que possa ser reproduzido a partir de um browser web. o Seria o path de um arquivo, porém com maior alcance. o Também indica ao browser o que ele deve fazer. o Pode ser absoluto ou relativo. Site estático Protocolo Servidor Caminho Arquivo Site dinâmico (GET) Protocolo Servidor Caminho Arquivo Variáveis Outros formatos ftp://ftp.meusite.com.br/pub/musica.mp3 17

18 news:soc.culture.catalan file:///c:/textos/web/historiadaweb.html URL absoluto Mostra o caminho completo do arquivo o Esquema, servidor, caminho e o nome do arquivo. o Não importa onde esteja o documento com a referência, o browser conseguirá encontrar o caminho. o Pode estar em qualquer servidor da web URL relativo Mostra o caminho parcial do recurso o Omite o servidor onde o mesmo se encontra o Suficiente colocar o caminho e o recurso o Usa um diretório base como referência index.html /marcelo/index.htm../marcelo/index.htm servidor servidor web info pub textos homepage.html algo.html aqui.html dados.html imagem sol.gif Arquivo URL Asoluto URL Relativo algo.html meusite.com.br/web/algo.html algo.html sol.gif meusite.com.br/web/imagens/sol.gif imagens/sol.gif dados.html meusite.com.br/info/dados.html../info/dados.html homepage.html outrosite.com.br/pub/homepage.html (nenhum) Hiperlinks Hiperlinks também são chamados de Âncoras: Âncora Externa o Liga um documento a um outro Âncora Interna o Liga um ponto de um documento a outro ponto 18

19 Criando hiperlinks Criando um Hiperlink para outra página web <A HREF = documento.html > Rótulo </A> o A: Âncora (Anchor) URL da página de destino o Rótulo Texto ou Imagem <HTML> <HEAD><TITLE>Desenvolvendo Sites</TITLE> </HEAD><BODY> <p>uma das páginas mais úteis para quem quer começar a trabalhar com Web é a do <A HREF="http://www.w3c.org"> W3C (World Wide Web Consortium)</A>.</p> <p> Lá você encontrará tudo que se relaciona com as tecnologias abertas da WEB.</p> </BODY> </HTML> Âncoras internas Permitem ao usuário ir direto a um trecho específico de uma página html o Longos textos o Páginas com layout complexo É preciso que exista algum rótulo para identificar o trecho específico Criando uma âncora Inserir na seção específica: <A NAME= nome da âncora > rótulo </A> <A NAME= intro > <H1> 1. Introdução </H1></A> <p> bla bla bla bla bla bla bla bla bla bla </p> <A NAME= motiva > <H1> 2. Motivação </H1></A> <p> bla bla bla bla bla bla bla bla bla bla </p> <A NAME= vant > <H1> 3. Vantagens </H1></A> <p> bla bla bla bla bla bla bla bla bla bla </p 19

20 Criando um link para uma âncora Digite <A HREF= #nome da âncora > rótulo </A> Onde nome da âncora é o valor do atributo NAME da seção anterior. <BODY>... <A HREF= #intro > 1. Introdução </A> <A HREF= #motiva > 2. Motivação </A> <A HREF= #vant > 3. Vantagens </A>... </BODY> </HTML> Se a âncora estiver em outro documento, use: o <A HREF= pagina.html#nomeancora > Se a âncora estiver em um documento em outro servidor, use: o <A HREF= > HTML, listas e tabelas Listas Listas de itens são bastante úteis para a exibição ordenada de elementos em um determinado texto: o Relações o Índices o Definições Estrutura básica o Todas as listas são formadas a partir de duas partes: o Um código que define o tipo da lista o Um código que define o tipo de item Listas ordenadas Tipos de listas o Existem três tipos de listas: o OL (Ordered List) o UL (Unordered List) o DL (Definition List) 20

21 Lista ordenada o Usada quando se deseja apresentar uma relação de elementos e estes têm que obedecer a uma ordem: o Índice de tópicos o Relação de vencedores de um concurso o Seqüência de tarefas a serem realizadas o Como criar o Inserir <OL> para marcar o início da lista o Inserir <LI> no início da linha seguinte para definir o item da lista o Logo após escrever o elemento da lista o Opcionalmente, inserir </LI> ao final de cada linha o Repetir o processo para cada elemento o Inserir </OL> para marcar o final da lista <OL> <LI> José Gregório </LI> <LI> Maria Matilde Sampaio </LI> <LI> Antônio da Silva </LI> <LI> Inácio Xavier Couto </LI> </OL> Listas não-ordenadas o Usadas quando a ordem dos elementos não é importante. o Lista dos integrantes de um grupo o Relação dos professores de um curso o Como criar o Inserir <UL> para marcar o início da lista o Inserir <LI> no início da linha seguinte para definir o item da lista o Logo após escrever o elemento da lista o Repetir o processo para cada elemento o Inserir </UL> para marcar o final da lista <UL> <LI> Motor </LI> <LI> Chassis </LI> <LI> Pneus </LI> <LI> Direção </LI> </UL> Lista de definições É útil quando queremos associar um conceito ou termo a uma definição ou descrição maiores. o Glossário o Índices Remissivos 21

22 <DL> Como criar o Inserir <DL> para marcar o início da lista o Inserir <DT> no início da linha seguinte para marcar o início da definição o Inserir <DD> no início da linha seguinte para marcar a descrição da definição o Repetir o processo para cada elemento o Inserir </DL> para marcar o final da lista <DT> Filosofia </DT> <DD> Reflexão sobre as causas primeiras de tudo o que existe. </DD> <DT> Gnosticismo </DT> <DD> Sistema teológico e filosófico cujos sectários se arrogavam um conhecimento sublime da natureza e os atributos divinos. </DD> </DL> Listas aninhadas UL OL 22

23 <UL> <LI>São Paulo <OL> <LI> Santo André </LI> <LI> São Bernardo </LI> <LI> São Caetano </LI> </OL> </LI> <LI>Paraíba <OL> <LI> Lagoa Seca </LI> <LI> Lagoa de Roça </LI> <LI> Lagoa de Dentro </LI> </OL> </LI> </UL> Tabelas Tabelas são muito importantes porque permitem organizar os dados a fim de possibilitar uma melhor visualização o Orçamentos o Folha de pagamento o Notas de alunos Tabelas NÃO devem ser usadas para organizar o layout da página. NÃO!!! o Padrões o Usabilidade o Acessibilidade o Separação entre layout e conteúdo Para isso, usaremos CSS Sa lá rios M a rke ting Pe squisa Tota l Estrutura Define a tabela Definem as células de dados <table>...</table> <td>...</td> <tr>...</tr> Definem as linhas Obs: as células de cabeçalho usam as tags <th>..</th> 23

24 Criando uma tabela simples Inserir <TABLE> inserir <TR> para definir o início da linha Inserir <TD> para definir uma célula da linha Inserir os dados da linha Inserir </TD> para concluir a célula da linha Repetir a seqüência 3 a 5 para cada célula Inserir </TR> para concluir a linha Repetir passos 2 a 7 para cada linha seguinte Inserir </TABLE> <TABLE> <TR> <TH> PRODUTO </TH> <TH> PREÇO </TH> </TR> <TR> <TD> MOUSE </TD> <TD> 10,00 </TD> </TR> <TR> <TD> TECLADO </TD> <TD> 70,00 </TD> </TR> <TR> <TD> SCANNER </TD> <TD> 490,00 </TD> </TR> <TR> <TD> MONITOR </TD> <TD> 4.000,00 </TD> </TR> </TABLE> Linha 1 Linha 2 Linha 3 Linha 4 Linha 5 Expandindo células Através de várias colunas o A célula deve ocupar o espaço de várias colunas o <TD COLSPAN=n> o Onde n corresponde ao número de colunas sobre as quais a célula deve se expandir. 24

25 <tr> <td colspan=2> produto </td> </tr> <tr> <td> mouse </td> <td> 10,00 </td> </tr> <tr> <td> teclado </td> <td> 70,00 </td> </tr> Através de várias linhas <TD ROWSPAN=n> o Onde n corresponde ao número de linhas. Nesse caso, quando o valor de n=1 deve-se reduzir uma célula na linha abaixo (<TD> e </TD> ) <tr><td colspan=2> produto </td> </tr> <tr><td> mouse </td> <td> 10,00 </td> </tr> <tr><td> teclado </td> <td> 70,00 </td> </tr> <tr><td rowspan="2"> scanner </td> <td> 490 </td></tr> <tr><td> 4000 </td></tr> 25

26 Padding, spacing Padding Espaço entre o conteúdo e a borda da célula Spacing Espaço entre uma célula e outra Atributos HTML que se referem à apresentação Equivalentes em CSS não são bem suportados pelo Internet Explorer 6 cellpadding, cellspacing <table cellpadding="15" cellspacing="15"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> CSS CSS Introdução O HTML foi desenvolvido como um sistema de codificação universal o Em princípio, qualquer pessoa visualizaria as mesmas páginas, independente de plataforma. o Definição de estrutura e aparência juntas o Browsers diferentes... Visões diferentes... Com o passar do tempo, o HTML foi recebendo cada vez mais novos elementos para agregar novas funcionalidades. Tags para fontes, cores e estilos. 26

27 Uso excessivo de tabelas para diagramação. o Páginas desnecessariamente grandes o Código complexo o Difícil de ler e de manter CSS Cascading Style Sheet Linguagem criada pelo W3C para definir estilos (cores, tipologia, posicionamento, etc.) em páginas web. o Acrônimo para Folhas de Estilo em Cascata Possibilita que determinadas propriedades sejam aplicadas AO MESMO TEMPO a TODOS os elementos de uma página ou site que estejam marcados com um TAG ESPECÍFICO. Facilitam a criação, formatação e manutenção de páginas web. Histórico Criado no final de 1996 Padrão W3C (World Wide Web Consortium) Versão atual: CSS 2.1 (CSS 3.0 em Draft) Suportado pelos principais browsers... É um dos principais conceitos por trás dos Web Standards Proposta A linguagem HTML estrutura um documento através de blocos de informação o Títulos, cabeçalhos, parágrafos, links,etc. CSS controla a aparência e o layout do documento o Estrutura, cores, fontes, etc. o Separa estilo de conteúdo o Solução eficiente para administração de sites com alto volume de páginas Separação de responsabilidades Define o estilo dos elementos básicos do documento CSS Tags HTML Conteúdo Define a estrutura básica do documento Define a idéia Principal do documento Vantagens o Melhor controle da apresentação visual da página o Redução de esforço e tempo na criação e manutenção de páginas o Documentos menores e mais leves o Sites mais acessíveis o Gerência mais eficiente do layout 27

28 Tipos o Há três tipos de folhas de estilo o Local: Trecho de texto (tag) o Interno: Página o Externo: Conjunto de páginas (Site) o Pode-se usar um dos três ou mesmo os três no mesmo documento. o Precedência o Local > Interno > Externo Estrutura Cada elemento usado para definir estilo em CSS é derivado da estrutura de elementos HTML existentes o Tamanho, cor e estilo de fonte o Alinhamento de parágrafo o Borda de Tabela Folhas de estilo Estilos são definidos através de propriedades H1 { font-size: 12pt; color: red } Folhas de estilo locais Ideal quando o estilo se resume a um determinado trecho da página Dentro da tag HTML digite: STYLE= propriedade1:valor1;... Usado quando queremos sobrepor um estilo mais amplo (Interno ou Externo) <H1 STYLE="color:green"> Esse é um texto verde! </H1> <HTML> <HEAD> <TITLE> ::: ATÉ QUE ENFIM SAÍMOS DE HTML... ::: </TITLE> <STYLE> H1 {size:12;color:red} P {text-align: justify; font: 10pt,"Verdana"} </STYLE> 28

29 </HEAD> <body> <H1> Folhas de Estilo </H1> <P> Texto do parágrafo. </P> </body> </html> Folhas de Estilo Texto do parágrafo. Folhas internas Adequadas para páginas individuais com grande quantidade de formatação o Definições são colocadas no topo da página (fatoração) o As definições aplicam-se a vários trechos da página repetidamente o Se precisar aplicar os mesmos estilos a mais de uma página, é melhor utilizar Folhas Externas. Observações o Podem-se definir propriedades para várias tags ao mesmo tempo H1, H2, H3 { color:red } Folhas externas São ideais para dar uma aparência comum a um determinado conjunto de (ou mesmo todas) páginas de um site o Cada página HTML deverá consultar um arquivo de estilos o Fatoração deve ocorrer em todo o site Criando uma Folha de Estilo Externa 29

30 o Crie um documento de texto plano o Digite os pares seletor { lista de propriedades } Salve o arquivo com a extensão.css Utilizando uma Folha de Estilo Externa o Em cada página HTML onde deseja aplicar o estilo: Na seção HEAD digite: <LINK REL="stylesheet" TYPE=text/css HREF="arquivo.css"> Classes de estilos Configurando Classes de Estilos o Permite dividir os elementos HTML em categorias ou classes a fim de aplicar os estilos seletivamente. Parágrafos introdutórios X parágrafos normais o Aplicável apenas à Folhas Internas ou Externas Configurando Classes de Estilos o Na seção <STYLE> SELETOR.nomedaclasse { propriedade:valor } o Na tag desejada no documento HTML <SELETOR CLASS="nomedaclasse"> <HTML> <HEAD><TITLE> ::: CSS ::: </TITLE> <STYLE> P { COLOR:RED } P.DIFERENTE { COLOR:BLUE } </STYLE> </HEAD> <BODY> <P> Isso é um parágrafo comum!!!! </P> <P CLASS= DIFERENTE > Parágrafo diferente! </P> </BODY> </HTML> <HTML> <HEAD><TITLE> ::: CSS ::: </TITLE> <STYLE> P.JOAO { FONT: BOLD; COLOR:RED } P.MARIA { COLOR:BLUE } </STYLE> </HEAD> <BODY> <P CLASS= JOAO > ONDE ESTIVESTES, MARIA? </P> <P CLASS= MARIA > NÃO É DE SUA CONTA! </P> <P CLASS= JOAO > CLARO QUE É! POIS SOU TEU PAI! </P> 30

31 </BODY> </HTML> Herança CSS suporta o conceito de Herança, para definir que propriedades são aplicadas a que elementos Algumas propriedades aplicadas a um elemento HTML são automaticamente aplicadas a todos os elementos-filhos Classes de estilos Podem-se definir relações de dependência Formatando texto com estilo Permite modificar, dentre outras coisas: o Tamanho 31

32 o Inclinação o Altura da linha o Cor do primeiro plano e do fundo o Espaçamento e alinhamento de texto Fontes o São os elementos básicos de um documento. o São estilos de apresentação que se aplicam a letras, números e símbolos especiais o Atributos essenciais de uma fonte: Tipo (ou família) Tamanho Estilo (regular, itálico, etc) Peso (normal, negrito, leve, etc) Tipo ou Família de Fontes o Define o tipo da fonte o Propriedade: font-family Sintaxe: Famílias genéricas Toda lista font-family deve ao menos terminar com uma das famílias tipográficas genéricas: IE7/Windows Safari/MAC Tamanho da fonte o Propriedade font-size o Valores atribuídos são absolutos ou relativos 32

33 Estilo o font-style define a inclinação da fonte. o Font-style:normal o font-style: italic H1{font-style: normal} H3{font-style: italic} Peso font-weight define o peso ou largura da fonte font-weight: bold font-weight: bolder font-weight: light Font-weight: lighter Font-weight: Implementação dos pesos bold bolder light lighter Cores Padrão RGB # # # #0000FF #0066FF #0099FF #00CCFF #00FFFF # # # #00FF00 # # # # #CC0000 #CC3333 # #9933CC #FFFF00 #FFFF33 #FFFFCC #FFFFFF 33

34 Padrão nominal black navy aqua blue gray silver olive yellow green red teal lime maroom fuchsia purple white Cor de Texto o color : nome o color : #RRGGBB H1 { color : gray } P { color : #FFFFFF } Cor de Texto o color : rgb(r,g,b) Valores entre 0 e 255 o color : rgb(r%,g%,b%) Valores entre 0 e 100 <html> <head><title> ::: Página Exemplo... ::: </title> <style> P { color:rgb(70,20,255); } H1 {color:rgb(30%,50%,10%)} </style> </head> <body> <H1> Título da Página </H1> <P> Um parágrafo começa aqui. </P> </body> </html> 34

35 FONT o Permite especificar várias propriedades de uma só vez font: font-style, font-weight, font-size, font-family H1 {font: italic 24pt "sans serif"} Espaçamento o Entre palavras (tracking) word-spacing:comprimento (pxl, pt) o Entre letras (krening) letter-spacing:comprimento (pxl, pt) Viva o software livre Viva o software livre V i v a o s o f w a r e l i v r e Récuo de Margem de Texto o Permite dar um deslocamento em relação à margem. text-ident : valor absoluto text-ident : porcentagem <H1> Título da Página </H1> <P style="text-indent:14pt" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent mauris diam, dictum ut, vehicula vitae, adipiscing at, dolor. Nam varius feugiat magna. Etiam ut ante ut odio rhoncus tristique. Quisque orci est, accumsan et, dapibus sit amet, ultrices ac, nibh. Nulla vitae augue bibendum massa commodo congue.</p> Alinhamento o Define a posição do texto na página text-align:left text-align:right text-align:center text-align:justify 35

36 Uso de Linhas Uso de linhas o Permite destacar um determinado texto usando uma linha text-decoration:underline text-decoration:overline text-decoration:line-through <html><head> <title>untitled Document</title> <style> p.sublinhado {text-decoration:underline} p.porcima{text-decoration:overline} p.riscado {text-decoration:line-through} </style> </head><body> <p class="sublinhado"> Esse texto está sublinhado </p> <p class="porcima"> Esse texto está sobrelinhado </p> <p class="riscado"> Esse texto está riscado </p> </body></html> 36

37 Estados de uma Linha o a:link: o link não foi visitado o a:visited: o link já foi visitado o a:hover: o apontador do mouse está sobre o link o a:active: o apontador do mouse está sobre o link e o botão esquerdo do mouse está pressionado o a:link { background:blue; color:yellow; text-decoration:none } o a:visited { background:black; color:yellow; text-decoration:none } o a:hover { background:cyan; color:yellow; text-decoration:none } o a:active { background:white; color:yellow; text-decoration:none } Mudando o estado Maiúscula / Minúscula o text-transform: capitalize o text-transform: uppercase o text-transform: lowercase o text-transform: none a:hover {text-transform:uppercase;} Cor de fundo As cores de fundo de qualquer elemento podem ser alteradas o background-color o Sintaxe: background-color: transparent background-color: nome-da-cor background-color: #hexadecimal background-color: rgb(vermelho, verde, azul) exemplos H1 { background-color: yellow } P { background-color: #AA00FF } EM { background-color: rgb(255, 127, 63) } 37

38 Imagem de fundo Assim como é possível modificar as cores do fundo de um elemento, pode-se atribuir imagens: o background-imagem o Sintaxe: background-image: none background-image: url (URL da imagem) o Observação As URLs são relativas à localização do arquivo que contém a folha de estilo. H1 { background-image: url (http://www.bla.com/img/a.gif) } B { background-image: url (../esqueleto.gif) <TD STYLE= background-image: url (flinstone.gif) >... </TD> CSS permite um controle maior sobre a imagem de fundo: o Sintaxe: background-repeat: repeat (default) background-repeat: repeat-x background-repeat: repeat-y background-repeat: no-repeat BODY { background-image: url (ceu.gif); background-repeat: repeat-x } TABLE { background-image: url (sol.gif); background-repeat: no-repeat } O posicionamento do papel de parede pode também ser controlado o Sintaxe: background-attachment: fixed background-attachment: scroll Plano de fundo BODY {background-image: skull.gif; background-attachment: fixed} BODY {background-image: skull.gif; background-attachment: scroll} Podemos definir várias propriedades de uma única vez: o Sintaxe: background: background-color background-image background-repeat background-attachment background-position BODY { background: url(../popeye.gif) white repeat-y scroll BODY { background: rgb(200,100,127) } 38

Programação de Servidores CST Redes de Computadores. Marx Gomes Van der Linden

Programação de Servidores CST Redes de Computadores. Marx Gomes Van der Linden Programação de Servidores CST Redes de Computadores Marx Gomes Van der Linden Programação de Servidores Aplicações cliente/servidor para web. Fundamentos de HTML+CSS. Linguagem de programação de servidor:

Leia mais

HTML: Listas, Tabelas e Formulários CST Sistemas para Internet

HTML: Listas, Tabelas e Formulários CST Sistemas para Internet HTML: Listas, Tabelas e Formulários CST Sistemas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) Listas Listas de itens são bastante

Leia mais

Programação de Servidores CST Redes de Computadores

Programação de Servidores CST Redes de Computadores Programação de Servidores CST Redes de Computadores Marx Gomes Van der Linden http://marx.vanderlinden.com.br ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) HMTL Arquivo-texto

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

CSS Cascading Style Sheets Folhas de Estilo em Cascata

CSS Cascading Style Sheets Folhas de Estilo em Cascata CSS Cascading Style Sheets Folhas de Estilo em Cascata Conjunto de instruções que controla a aparência de uma página Web 1. Regra CSS seletor { propriedade1: valor; propriedade2: valor; 2. Aplicação 2.1

Leia mais

Ferramentas para Internet CST Sistemas para Internet

Ferramentas para Internet CST Sistemas para Internet Ferramentas para Internet CST Sistemas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) Ferramentas para Internet Web design: HTML CSS

Leia mais

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto)

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto) HTML (Hypertext Markup Language Linguagem de Marcação de Hipertexto) CSS - Cascading Style Sheets CSS serve para definir propriedades de apresentação/formatação a aplicar em tags HTML. A sua utilização

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

> Herbet Ferreira Rodrigues > contato@herbetferreira.com Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação

Leia mais

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza

Webdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML

Leia mais

HTML. Conceitos básicos de formatação de páginas WEB

HTML. Conceitos básicos de formatação de páginas WEB HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto

Leia mais

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br Web Introdução Design CSS - Background, Color e Fontes Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br O que veremos... CSS Cores e fundos Fontes Cores e fundos Algumas propriedades

Leia mais

QUEM FEZ O TRABALHO?

QUEM FEZ O TRABALHO? Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome

Leia mais

FOLHAS DE ESTILO EM CASCATA

FOLHAS DE ESTILO EM CASCATA FOLHAS DE ESTILO EM CASCATA CSS (Cascading Style Sheets) ou Folhas de Estilo em Cascata são um conjunto de regras de estilo que definem como os elementos e os tags em uma página HTML devem ser exibidos

Leia mais

CSS Luciano Otávio de Assis CSS

CSS Luciano Otávio de Assis CSS CSS O HTML tem suas limitações quando se tratar de se construir layout. É certo, você tem seis diferentes tipos s títulos e de 6 diferentes tamanhos de fontes. Quando você trabalha com tabelas, você tem

Leia mais

Introdução à Cascading Style Sheets

Introdução à Cascading Style Sheets Estilo e Produtividade para Websites OVERVIEW História e Significado Por que usar? Como usar? Orientações ao Desenvolvedor O que é CSS? O que é CSS? Cascading Style sheets" ou "Folhas de Estilo Encadeadas

Leia mais

CSS - Cascading Style Sheets

CSS - Cascading Style Sheets Introdução CSS - Cascading Style Sheets Padrão de Apresentação de Documentos CSS Cascate Style Sheets Objetivos: Conhecer o Histórico; Conhecer a Usabilidade; Por que usar? Quando usar? Como usar? Conhecer

Leia mais

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON COMPONENTES: ROBSON EDMILSON O HTML (Hiper Text Mark-up Language) é uma linguagem de programação hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos que definem o tipo de letra, qual

Leia mais

CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael

CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael CSS ETEC FRANCISCO MORATO Professores: Kelly e Rafael 2015 Agenda Introdução; Website Layouts; CSS; Referências. 2 Website Layouts A maioria dos sites têm colocado o seu conteúdo em várias colunas; Ex.:

Leia mais

7. Cascading Style Sheets (CSS)

7. Cascading Style Sheets (CSS) 7. Cascading Style Sheets (CSS) O CSS (Folha de Estilo em Cascata) é um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML. O Cascading Style Sheets não é exatamente uma

Leia mais

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS.

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS. UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Programação de Computadores

Leia mais

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1

Sumário. HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Sumário HTML CSS JQuery Referências IHC AULA 6 5-09-2011 1 Linguagem HTML HTML é a abreviação de HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação de Hipertexto. Não é uma linguagem

Leia mais

APOSTILA DE PROGRAMAÇÃO WEB

APOSTILA DE PROGRAMAÇÃO WEB Programação Web - CSS 1 PROFESSOR LUIS NÍCOLAS DE AMORIM TRIGO APOSTILA DE PROGRAMAÇÃO WEB CSS CASCADING STYLE SHEETS (FOLHAS DE ESTILO EM CASCATA) Programação Web - CSS 2 INTRODUÇÃO CSS, também conhecido

Leia mais

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo

Leia mais

4 - HTML Básico: 4.2 - Criando documentos HTML:

4 - HTML Básico: 4.2 - Criando documentos HTML: 4 - HTML Básico: 4.1 - O que é HTML? Os documentos na Web são organizados com o uso de comandos que são interpretados pelos browsers. Estes comandos compõem a linguagem HTML (HyperText Markup Language).

Leia mais

Introdução às Folhas de Estilo

Introdução às Folhas de Estilo Introdução às Folhas de Estilo Folhas de Estilo Cascading Style Sheets (CSS). Separa aparência e estrutura do documento. Permite maior controle sobre a apresentação das páginas Margens Tamanho / tipo de

Leia mais

OPERAÇÃO DE SOFTWARE E APLICATIVOS

OPERAÇÃO DE SOFTWARE E APLICATIVOS OPERAÇÃO DE SOFTWARE E APLICATIVOS 1 SUMÁRIO 1 INTRODUÇÃO A WEB... 4 1.1 O QUE É A WORLD WIDE WEB?... 4 1.2 COMO FUNCIONA A WWW?... 4 1.3 SERVIDORES WEB... 4 1.4 BROWSERS... 4 1.5 PADRÕES DA WEB... 5 1.6

Leia mais

Web Design. Prof. Felippe

Web Design. Prof. Felippe Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre

Leia mais

Técnicas e processos de produção. Profº Ritielle Souza

Técnicas e processos de produção. Profº Ritielle Souza Técnicas e processos de produção Profº Ritielle Souza Ferramentas Programáveis Mensagem para mais de um destinatário FALE CONOSCO Definindo

Leia mais

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Laboratório de Práticas

Leia mais

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção

Leia mais

Aplicativos para Internet Aula 01

Aplicativos para Internet Aula 01 Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx

Leia mais

Compêndio códigos. {css}

Compêndio códigos. {css} Compêndio códigos {css} ADVERTÊNCIA: A que se segue é apenas uma lista com as propriedades de CSS, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba de antemão o signi cado

Leia mais

Aula 5 Cabeçalhos, Imagens e Links

Aula 5 Cabeçalhos, Imagens e Links Roteiro Aula 5 Cabeçalhos, Imagens e Links Efeitos em cabeçalhos Imagens e CSS Links Curso: Técnico em Informática / 2º Módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Efeitos

Leia mais

Roteiro 2: Conceitos de Tags HTML

Roteiro 2: Conceitos de Tags HTML Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável

Leia mais

Ferramentas Programáveis. Profº Ritielle Souza

Ferramentas Programáveis. Profº Ritielle Souza Ferramentas Programáveis Profº Ritielle Souza Folhas de Estilo Existem três formas de trabalharmos com folhas de estilos Forma mais usual CSS Externo Estilo na página Forma menos usual estilo inline

Leia mais

MÓDULO 1 - xhtml Básico

MÓDULO 1 - xhtml Básico MÓDULO 1 - xhtml Básico 1. Introdução xhtml significa Extensible Hypertext Markup Language (Linguagem de Marcação Hipertextual Extensível) e é a linguagem de descrição de documentos usada na World Wide

Leia mais

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,

Leia mais

css Cascading Style Sheets CSS CASCADING STYLE SHEETS

css Cascading Style Sheets CSS CASCADING STYLE SHEETS css Cascading Style Sheets CSS CASCADING STYLE SHEETS Oque é o CSS Cascading Style Sheets - Folhas de Estilo em Cascata Não é uma linguagem de programação, é uma linguagem de estilo. Define a apresentação

Leia mais

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira

WebDesign. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br. Escola CDI de Videira WebDesign Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo

Leia mais

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css?

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? O html inclui uma tag para praticamente todos os elementos de design comumente

Leia mais

Programação para Internet I

Programação para Internet I Programação para Internet I Aula 05 e 06 Fernando F. Costa nando@fimes.edu.br 1 Tags de Formatação de Texto - Permite que um texto se mova de um lado para o outro da página. Sintaxe:

Leia mais

Exemplo de uso correto da semântica HTML

<!DOCTYPE html> <html lang = pt-br> <head> <meta charset = UTF-8> <title> Exemplo de uso correto da semântica HTML </title> </ head > Para um navegador exibir corretamente uma página web, devemos informar explicitamente o tipo do documento. O tipo do documento é informado com a declaração . TAG

Leia mais

Lista e Tabelas. Fundamentos da Linguagem Web

Lista e Tabelas. Fundamentos da Linguagem Web Lista e Tabelas Fundamentos da Linguagem Web Bruno Angelo Medeiros Março de 2015 LISTAS O que são? Tipos Ordenadas Não ordenadas De definição Exemplos Exercícios LISTAS - O QUE SÃO? São uma forma de organização

Leia mais

Roteiro de Estudos e Atividades Avaliativas HTML

Roteiro de Estudos e Atividades Avaliativas HTML Roteiro de Estudos e Atividades Avaliativas HTML Faça essa atividade de forma individual ou em dupla, faça o máximo de questões que conseguir. Pesquise na Web o significado das tags e utilize-as para alcançar

Leia mais

Curso PHP Básico. Jairo Charnoski do Nascimento

Curso PHP Básico. Jairo Charnoski do Nascimento Curso PHP Básico Jairo Charnoski do Nascimento Agenda Ferramentas necessárias Introdução HTML HTML? Tags Construindo seu primeiro website Observações sobre a estrutura Mais tags Atributos Agenda Cores

Leia mais

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15

Algoritmia e Programação APROG HTML. Introdução. Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 APROG Algoritmia e Programação HTML Introdução Nelson Freire (ISEP DEI-APROG 2014/15) 1/15 O que é o HTML? Sumário Geral Documento HTML Elemento HTML Estrutura Básica de Documento HTML Elementos Títulos

Leia mais

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 CSS Sérgio Nunes Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 1 Objetivos Conhecer as origens e os objetivos da linguagem CSS. Conhecer a estrutura base de uma regra CSS. Compreender

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução O Gmail possui duas versões distintas para seu webmail: uma mais recente, que é a versão atual utilizada pelos usuários de Gmail, e

Leia mais

Ferramentas para Multimídia e Internet - 1486

Ferramentas para Multimídia e Internet - 1486 1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato

Leia mais

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: Times New Roman, serif;} Fontes A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina

Leia mais

HyperText Markup Language HTML

HyperText Markup Language HTML HyperText Markup Language HTML Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ Introdução Linguagem de Marcação de Hipertexto. Uma

Leia mais

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão

1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão 1. HTML - Introdução Hyper Text Markup Language É uma linguagem de formatação de conteúdos Não é uma linguagem de programação Portável Não depende da plataforma em que é vizualizado Ficheiros de pequena

Leia mais

Construção de sitesaula4

Construção de sitesaula4 Construção de sites Aula4 Universidade Federal do Paraná Pró-reitoria de Assuntos Estudantis Departamento de Informática 26 de Agosto de 2010 Indice Formatando fundo da página com CSS 1 Formatando fundo

Leia mais

Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html

Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html Por que aprender a fazer tabelas? Tabelas auxiliam na formatação da página, e é por essa razão que eles foram acrescentados à linguagem html Tabela de dados Tabelas para alinhar texto Tabelas para conter

Leia mais

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos.

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. 1 Índice 1 - INTRODUÇÃO 3 2 - TAGS 3 3 - EDITORES 3 4 - SALVANDO UMA PAGINA HTML 3 5 - INICIANDO UMA PÁGINA 3 6 - CONSTRUINDO

Leia mais

Introdução. História. Como funciona

Introdução. História. Como funciona Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado

Leia mais

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe: 48 10. CSS 10.1 O que é CSS? CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Você já deve ter visto esses nomes em vários lugares. CSS é mais uma forma de aperfeiçoar seus documentos, o CSS

Leia mais

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2

Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com No início A Web é criada em 1989, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos.

Leia mais

Unidade: O que é CSS? HTML e CSS? Boa aula!!!

Unidade: O que é CSS? HTML e CSS? Boa aula!!! Unidade: O que é CSS? HTML e CSS? Boa aula!!! Objetivo Construir: Padrões Web, Tableless e outros Como inserir o CSS nas páginas Sintaxe de utilização do CSS Tag DIV e tag SPAN Orientações Durante a explanação

Leia mais

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc

Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Linguagem WEB Prof. Alexandre Unterstell alexunter@gmail.com - www.alex.inf.br/cesc Dicas Importantes: - Sempre crie um diretório em seu computador e salve todos os arquivos que vai usar (imagens e paginas),

Leia mais

Web design & HTML. avançado

Web design & HTML. avançado Web design & HTML avançado Helder da Rocha Rev.: WDHT-03-2000/04 A4 (ASIT) Copyright 1998, 1999, 2000 por Helder Lima Santos da Rocha. Todos os direitos reservados. Os direitos do autor sobre esta obra

Leia mais

CSS (Style Sheets - Folhas de Estilo)

CSS (Style Sheets - Folhas de Estilo) Anuncie nesse espaço da Aprendendo HomePage, clique aqui e veja como e porque. CSS (Style Sheets - Folhas de Estilo) CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Vc já deve ter visto esses

Leia mais

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com

Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA INFORMÁTICA E METODOLOGIA - SUBSEQUENTE 1 Quem sou eu? Ana Paula Alves de Lima Formação: Bacharel em Sistemas de Informação;

Leia mais

Tecnologias para apresentação de dados - HTML. Aécio Costa

Tecnologias para apresentação de dados - HTML. Aécio Costa Tecnologias para apresentação de dados - HTML Aécio Costa Apresentação de Dados na Web Tecnologias client-side HTML CSS JavaScript HyperText Markup Language Uma linguagem de marcação utilizada para produzir

Leia mais

Tecnologias para Web Design

Tecnologias para Web Design Tecnologias para Web Design CSS Folhas de estilo em cascata ÿ CSS Cascading Style Sheets ÿ Linguagem para definir atributos de estilo dos elementos da linguagem HTML ÿ CSS é uma linguagem independente

Leia mais

Introdução; Sintaxe; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores Relativos x Absolutos.

Introdução; Sintaxe; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores Relativos x Absolutos. Ana Paula Ambrósio Zanelato anapaula@unitoledo.br Disciplina: Aplicações para Web Conteúdo Introdução; ; Utilizando estilos; Estilo In-line; Estilo Incorporado; Estilo Vinculado; Prioridade; Cores; Valores

Leia mais

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1

Leia mais

Introdução 1ª Parte Web Web Web Web Browsers Editores Editores Etiquetas (tags) base indica que se trata de uma página escrita em linguagem HTML. Esta deve abranger todo o código;

Leia mais

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS APRESENTANDO O CSS CSS Cascading Style Sheets, ou, em português, Folha de Estilo em Cascata - é uma linguagem de estilo que pode ser utilizada na formatação de documentos HTML. Com CSS, podemos criar regras

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Listas A HTML permite definir três categorias distintas de listas: Ordenadas Sem ordenação Lista de definição 2/28 Listas

Leia mais

Programação web Prof. Wladimir

Programação web Prof. Wladimir Programação web Prof. Wladimir HTML @wre2008 1 Sumário Histórico; Resumo XHTML; Tags; Edição de documentos HTML; Publicação de um documento; Estrutura básica de um documento HTML; Edição de documentos

Leia mais

André Kawamoto NE31A

André Kawamoto NE31A André Kawamoto NE31A Internet Internet: uma coleção de redes Todos os computadores conectados à Internet fazem parte de uma rede (rede local, rede doméstica) Rede de Redes Internet x WWW Internet e World

Leia mais

Internet e Programação Web

Internet e Programação Web COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 2 Técnico Prof. Cesar 2014 1 1. CSS CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo,

Leia mais

Web Design Aula 13: Introdução a CSS

Web Design Aula 13: Introdução a CSS Web Design Aula 13: Introdução a CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Você lembra que HTML e XHTML são linguagens de marcação? Para organizar melhor o visual das páginas

Leia mais

INTRODUÇÃO À PROGRAMAÇÃO

INTRODUÇÃO À PROGRAMAÇÃO Departamento de Informática INTRODUÇÃO À PROGRAMAÇÃO Apontamentos de (HyperText Markup Language) Prof. Carlos Pampulim Caldeira Évora, Março de 2003 ÍNDICE 1. O QUE É O?...1 1.1 INTRODUÇÃO...1 1.2 QUE

Leia mais

Programação e Designer para WEB

Programação e Designer para WEB Programação e Designer para WEB html Prof. Rodrigo Rocha prof.rodrigorocha@yahoo.com http://www.bolinhabolinha.com Apresentação Onde Estamos Introdução a hipertexto. A linguagem. Ambientes para programação

Leia mais

Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo.

Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Como defino e escrevo uma classe? Classe é um seletor

Leia mais

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver

Leia mais

Guia de Consulta Rápida. PHP com XML. Juliano Niederauer. Terceira Edição. Novatec

Guia de Consulta Rápida. PHP com XML. Juliano Niederauer. Terceira Edição. Novatec Guia de Consulta Rápida PHP com XML Juliano Niederauer Terceira Edição Novatec Copyright 2002 da Novatec Editora Ltda. Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. É proibida

Leia mais

Programação para Internet

Programação para Internet Programação para Internet Aula 07 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos

Leia mais

Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL.

Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Procuraremos mostrar os principais procedimentos para fazer um cadastro de registros numa base de dados MySQL utilizando a linguagem

Leia mais

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br

Desenvolvimento Web. Saymon Yury C. Silva Analista de Sistemas. http://www.saymonyury.com.br Desenvolvimento Web Saymon Yury C. Silva Analista de Sistemas http://www.saymonyury.com.br Vantagens Informação em qualquer hora e lugar; Rápidos resultados; Portabilidade absoluta; Manutenção facilitada

Leia mais

Desenvolvimento de Aplicações Web. Prof. José Eduardo A. de O. Teixeira www.vqv.com.br / j.edu@vqv.com.br

Desenvolvimento de Aplicações Web. Prof. José Eduardo A. de O. Teixeira www.vqv.com.br / j.edu@vqv.com.br Desenvolvimento de Aplicações Web Programação Contextualização de aplicações Web: navegadores e servidores como interpretadores, tecnologias do lado do cliente (XHTML, CSS, Javascript) e do lado do servidor

Leia mais

CSS - Parte 02. Prof. Marciano dos Santos Dionizio

CSS - Parte 02. Prof. Marciano dos Santos Dionizio CSS - Parte 02 Prof. Marciano dos Santos Dionizio Imagens de fundo [backgroundimage] A propriedade CSS background-image é usada para definir uma imagem de fundo. Usaremos a imagem de uma borboleta para

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Conceitos de HTML Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Definição de HTML Linguagem de marcadores (tags).

Leia mais

Criação de Web Sites I

Criação de Web Sites I de Criação de Web Sites I Conteúdo 12. Introdução... 67 12.1. O que são folhas de estilo?...67 12.2. Para que servem as folhas de estilo...68 Separar apresentação da estrutura...68 Controle absoluto da

Leia mais

TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD TECNOLOGIAS WEB AULA 9 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Compreender a sintaxe utilizada em Folhas de Estilos em Cascata, seu uso e limitações. Apresentar as principais características das

Leia mais

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets António Gonçalves ESTSetúbal ÍNDICE Introdução Sintaxe Básica Regras Selectores Selectores Contextuais Propriedades Valores Agrupamento Herança Comentários Pseudo-classes e Pseudo-elementos

Leia mais

Como criar uma página WEB

Como criar uma página WEB Como criar uma página WEB Utilização de comandos HTML Luís Manuel Borges Gouveia versão 1.1 Dezembro, 1996 Requisitos necessários para criar ou editar uma página Web um navegador (browser): Netscape ou

Leia mais

CSS#:#Cascading#Style#Sheets#

CSS#:#Cascading#Style#Sheets# CSS#:#Cascading#Style#Sheets# Composição#Web# # Engenharia#Informá=ca#/#Informá=ca#Web#2014/15# Artur%M.%Arsénio% Style#Sheets# #Folhas#de#Es=los# CSS#(Cascading#Style%Sheet% %ou%folhas%de%es6los% encadeados)%é#um#conjunto#de#regras#de#formatação#que#

Leia mais

Introdução ao HTML Hypertext Markup Language

Introdução ao HTML Hypertext Markup Language Introdução ao HTML Hypertext Markup Language Prof. Marcus Ramos Tags São comandos que são inseridos juntamente com o texto a ser apresentado, e que definem a forma como o mesmo será exibido na tela do

Leia mais

Programação WEB Introdução

Programação WEB Introdução Programação WEB Introdução Rafael Vieira Coelho IFRS Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Sul Campus Farroupilha rafael.coelho@farroupilha.ifrs.edu.br Roteiro 1) Conceitos

Leia mais

José Frazão. Página 2 de 19

José Frazão. Página 2 de 19 Página 2 de 19 Índice Página 1. Introdução 4 2. História e características 5 3. Sintaxe 5 3.1. Texto 7 3.2. Comandos básicos mais utilizados 8 3.3. Fundo (Backgrounds) e cores 10 3.4. Tabela de acentos

Leia mais

HTML -- Criação de Home Page

HTML -- Criação de Home Page PPáággi innaa 1 LISTAS Na linguagem HTML existem elementos específicos para a criação de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definição (DL). Um detalhe

Leia mais

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Prof. André Yoshimi Kusumoto andrekusumoto.unip@gmail.com http://www.kusumoto.com.br Apresentação Carga horária mensal:

Leia mais

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont APOSTILA Curso de HTML com PHP HTML Pablo Dapont PET Computação - sala 202 Prédio 43424 ( prédio dos laboratórios ) Instituto de Informática - UFRGS email : pet@inf.ufrgs.br Av. Bento Gonçalves, 9500 bloco

Leia mais