Introdução a HTTP, HTML e CSS
|
|
|
- Manoela Filipe Rijo
- 7 Há anos
- Visualizações:
Transcrição
1 MIEEC SIEM ano letivo 2014/15 Introdução a HTTP, HTML e CSS José A. Faria (jfaria@fe.up.pt) FEUP, DEGI Setembro 2014
2 1. Introdução ao protocolo HTTP
3 Introdução A WEB -worldwideweb é um sistema global de hipertexto inicialmente desenvolvido em 1989 no CERN para facilitar a partilha de documentos científicos entre um grupo de cientistas geograficamente distribuído. A WEB utiliza um modelo de processamento do tipo cliente/servidor onde: os clientes são designados por web browsers os servidores por web servers.
4 Introdução Exemplos de web browsers: Internet Explorer Mozzila Firefox Googel Chrome Exemplos de web servers: Internet Information Server Apache
5 WEB browsers Um web browser é uma aplicação que fornece aos utilizadores acesso a servidores web, sendo responsável: pela formatação e apresentação dos dados; pela interação com o utilizador.
6 WEB browsers No mínimo, um web browser contém: um cliente HTTP (hypertext transfer protocol) um interpretador de HTML (hypertext markup language). Nota Os clientes e servidores web interatuam através do protocolo HTTP. Os documentos transmitidos dos servidores para os browsers são codificados em formato HTML.
7 WEB servers Os servidores web são responsáveis pelo atendimento dos pedidos de informação provenientes dos clientes. A informação enviada pelos servidores aos clientes (browsers) pode consistir: no conteúdo de um ficheiro de texto; no output gerado por um programa.
8 Protocolo HTTP Os browsers e servidores web interactuam através do protocolo HTTP -hypertext transfer protocol, o qual permite a transferência de documentos HTML.
9 Protocolo HTTP O protocolo HTTP é baseado em interações do tipo pedido/resposta (request/response) onde: o cliente estabelece uma conexão ao servidor e envia-lhe um pedido através da invocação do método request; o servidor responde ao pedido, após o que termina a conexão.
10 Protocolo HTTP Assim, as transações HTTP desenvolvem-se em 4 fases: o browser abre uma conexão ao servidor o browser envia um pedido ao servidor o servidor envia uma resposta ao browser a conexão é fechada Nota: Além da informação propriamente dita, as mensagens enviadas pelo servidor incluem outros dados como a versão do protocolo, um código de sucesso ou erro, a identificação do servidor,...
11 Endereços WEB Um URI -Uniform Resource Identifier (endereço web), é uma stringque identifica um servidor web e uma fonte de informação nesse servidor (ficheiro ou programa). Exemplo paginas.fe.up.pt/~jfaria/public_html/aulas/siem/index.html
12 Endereços WEB Um URI combina: um URL -Uniform Resource Locator, para a identificação do servidor um URN -Uniform Resource Name, para a identificação da fonte de informação dentro do servidor.
13 Endereços WEB: exemplo URL URN paginas.fe.up.pt / ~jfaria/public_html/aulas/siem / index.html servidor caminho no sistema de ficheiros ficheiro
14 Endereços WEB Num servidor web Apache, por defeito: os recursos disponíveis na web estão debaixo da pasta public_html é devolvido o ficheiro index.html Assim, o endereço web: paginas.fe.up.pt/~jfaria/public_html/aulas/siem/index.html é equivalente a: paginas.fe.up.pt/~jfaria/aulas/siem
15 2. Introdução à linguagem HTML
16 Linguagem HTML O HTML é uma linguagem baseada em marcas (tags) através das quais é formatado o conteúdo das páginas (texto, imagens, links,...). Cada documento html é composto por um cabeçalho (header) e por um corpo (body).
17 Linguagem HTML O HTML é uma linguagem baseada em marcas (tags) através das quais é formatado o conteúdo das páginas (texto, imagens, links,...). Cada documento html é composto por um cabeçalho (header) e por um corpo (body).
18 Primeiro exemplo <html> <head> <title>primeira página web</title> </head> <body> Estão a ver como é fácil criar uma página web? </body> </html> ver exemplo-inicial.html
19 Comandos Cada marca corresponde a um comando e está contida entre os carateres < e >. Todos os caracteres que não se encontrem entre < e > são tratados como texto e inseridos diretamente na página. Os comandos permanecem ativos desde que são abertos e até serem fechados através do sinal /.
20 Formatação Basicamente, o HTML dispõe dos comandos de formatação usuais que se encontram nos processadores de texto mais, entre os quais: <p> introduz um parágrafo e uma linha em branco. <br> introduz um parágrafo, sem adicionar linha. <i>... </i> itálico <b>... </b> bold <u>... </u> sublinhado ver exemplos formatação
21 Ligações (Links) Uma das características fundamentais do htmlé a possibilidade incluir, dentro de um documento, ligações (links) para outros documentos. Os links são introduzidos através da tag <a>... </a>: <a href = URL > texto </a>
22 Exemplo <a ref= ficha.pdf >Ficha da disciplina</a> Cria um link: para o ficheiro ficha.pdf contido no diretório public_html/aulas/siem/ da área de trabalho do utilizador jfaria do servidor páginas do domínio fe.up.pt O link é apresentado no browser como: Ficha da disciplina.
23 Ligações (Links) Os links podem também ser associados a imagens. No exemplo seguinte, o link fica associado à imagem contida no ficheiro figuras/fig4.jpg. <a href= > </a> <img src= figuras/fig4.jpg >
24 Ligações (Links) <a href= > <img src= figuras/fig4.jpg > </a> Neste caso, clicando sobre a figura, será invocado o ficheiro: /~jfaria/public_html/aulas/siem/index.html ver exemplo figuras.html
25 Ligações (Links) Por defeito, um link para uma página coloca o cursor no início dessa página. É, no entanto, possível efetuar ligações para pontos específicos dentro de uma página. Para isso, no ponto destino terá de ser inserido um bookmark através da marca: <a name= nome do bookmark >
26 Ligações (Links) Admitindo que o ficheiro index.html do diretório sie contém o bookmark Trabalhos, o comando: <a href= index.html#trabalhos >Trabalhos práticos</a> apresenta o link Trabalhos práticos no browser. Quando este link for clicado, o cursor ficará posicionado no local da página onde foi inserido o bookmark: <a name= Trabalhos >
27 Tabelas As tabelas são um elemento fundamental do HTML e podem ser utilizadas com duas finalidades distintas: apresentação dos dados sob forma tabular (o que corresponde à utilização convencional de tabelas) estruturação da própria página HTML, definido o layout dos vários elementos (texto e figuras) que a compõem.
28 Tabelas As principais marcas associadas às tabelas são: <table>... </table> introduz uma tabela no documento. <tr>... </tr> introduz uma nova linha na tabela (table row). <td>... </td> introduz uma nova célula na tabela (table data) na linha atual (esta marca deve ser sempre introduzida entre a marca <tr> </tr>).
29 Tabelas Nota As várias linhas de uma tabela podem conter diferentes números de células, sendo a dimensão das células calculada com base na linha que contiver o maior número de células. Nas linhas com menor número de células, serão acrescentadas células vazias.
30 Tabelas O HTML suporta múltiplas propriedades associadas às tabelas, às linhas e às células que permitem definir em detalhe o aspeto gráfico e a apresentação dos dados. Essas propriedades permitem, nomeadamente definir as dimensões, cores, caixilho das células, o alinhamento do texto, o espaçamento entre células,...
31 Listas O HTML suporta vários tipos de listas, numeradas ou não: as listas bulleted são delimitadas pelas marcas <ul> e </ul> (unordered list) As listas numeradas são delimitadas pelas marcas <ol> e </ol> (ordered list) Os elementos das listas são separados pelas marcas <li> e </li> (listelement).
32 Exemplos de listas <ul type= disk"> <li>text1</li> <li>text2</li> <li>text3</li> </ul> text1 text2 text3 Para o bullet existem 3 opções: disc <ul type= disk"> circle <ul type="circle"> square <ultype= square"> <ol> <li>text1</li> <li>text2</li> <li>text3</li> </ol> 1. text1 2. text2 3. text3 ver exemplo listas.html
33 3. Introdução às folhas de estilo (CSS)
34 Folhas de estilo Uma folha de estilo (CSS cascading stylesheets) define um conjunto de regras que determinam como é que o browser apresenta os documentos html. Através das CSS é possível separar: o conteúdo do documento (HTML) do estilo da apresentação (CSS).
35 Folhas de estilo Através das CSS s é possível definir um vasto conjunto de propriedades, por exemplo: Font : Font Family, Font Size,... Color and Background: Color, Background Color,... Text : Word Spacing, Letter Spacing, Vertical Alignment, Text Indentation, Line Height Box : Margin, Padding, Border Width, Border Color,... Para uma listagem completa das propriedades que podem ser definidas nas CSS s ver:
36 Exemplo
37 Dimensões, background, tipo de letra das divisões
38 Cor, tamanho dos vários tipos de títulos
39 Indentação do texto
40 Margens, espaçamento, tipo de letra: - células header e dados, - linhas normais e alternativas
41 Tipo de letra, cores, border dos botões
42 Seletores Cada regra de estilo é formada por um seletor (por exemplo um elemento html como BODY, P ou H1) e um estilo a ser aplicado a esse seletor. selector { property: value }
43 Folhas de estilo: Exemplo Por exemplo, as seguintes regras especificam que os headers: do tipo H1 devem ser apresentados pelo browser com font extra large e cor vermelha e os do tipo H2 com font large e cor azul H1 { font-size: x-large; color: red } H2 { font-size: large; color: blue } propriedade valor
44 Seletores Qualquer elemento HTML (BODY, P, DIV, H1, TABLE...) pode ser um selector. Na regra de estilo seguinte, o seletor é o parágrafo: p {font-family:arial; font-size=12; font-color: black} Se esta regra for aplicada a um documento html, o browser irá a font Arial, 12 pixels, preto a todos os parágrafos.
45 Selectores Os seletores também podem ser definidos com base nos atributos class e id do html. CSS p.comentario {color: grey;} #div_principal { font: arial; background-color: blue; } HTML <p class= comentario >... </p> <div id= div_principal >... </div>
46 Seletores ID Os seletores do tipo ID permitem definir um estilo para um elemento particular do documento html. Estes seletores são antecedidos pelo caracter "#, como em: #div_menu { left: 3px; width: 800px; position: absolute; top: 3px; height: 28px; background-color: blue; }
47 Seletores ID <body> <div id=div_menu>... </div> </body> #div_menu { left: 3px; width: 800px; position: absolute; top: 3px; height: 28px; background-color: blue; }
48 Seletores Class Os seletores de classe podem ser associados a seletores html, como em: p.normal {color: green;} p.comentario {color: blue;} após o que podem ser utilizados nesses seletores, por exemplo: <body> <p class= normal >texto normal</p> <p class= comentario >texto do comentario</> </body>
49 Seletores Class Os seletores de classe também podem ser declarados sem estar associadas a qualquer elemento, por exemplo:.normal {font-size: 12pt; font-family: Times} Neste caso, o seletor classe pode ser utilizado em qualquer elemento: <p class= normal >texto com formato normal</p> <input type= submit class= normal value= Ok></input>
50 In linecss as definições de estilo podem ser incluídas no interior de qualquer elemento dentro do BODY do documento html, como em: <p STYLE="color: red; font-family: serif"> Este parágrafo será apresentado com fontserif e cor vermelha</p>
51 CSS embebidas As definições de estilo podem ser embebidas nos cabeçalhos dos documentos html através do elemento STYLE: <head> <STYLE TYPE="text/css" MEDIA=screen> body { background: url(foo.gif) red; color: black} p { background: yellow; color: black}.note { margin-left: 5em; margin-right: 5em } </STYLE> </head>
52 CSS externas As definições de estilos também podem ser definidas em ficheiros externos aos ficheiros html, o que permite utilizar as mesmas definições de estilo em múltiplas páginas. Desta forma, é possível mudar completamente o estilo de uma aplicação (possivelmente com dezenas ou centenas de páginas) atuando sobre uma único ficheiro. Esta é a forma mais correta de especificar as definições de estilo.
53 CSS externas Neste caso, as páginas contém um link para o ficheiro CSS externo no cabeçalho (Head) do documento htmlpor exemplo: <head> <link rel=stylesheet href="style.css" type="text/css"> </head> onde style.css é o nome do ficheiro contendo a folha de estilo.
54 Exemplo de ficheiro CSS /********* Gerais *********/ p { color: #4d4d4d; font-size: 8pt; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; }.buttons { font-family: Verdana; font-size: 8pt; color: #4d4d4d; } table { /********* Títulos *********/.titulo1 { color: White; padding: 1px 6px 1px 6px; text-align: center; border: 1px #7c9ccc solid; }.titulo2 { /********* Divisões *********/ #div1 { left: 3px; width: 800px; position: absolute; top: 3px; height: 28px; background-color: #0099ff; border: 1px solid #0099ff; }
Introdução ao HTML e às folhas de estilo (CSS)
MIEEC SIEM ano letivo 2013/14 Introdução ao HTML e às folhas de estilo (CSS) José A. Faria (jfaria@fe.up.pt) FEUP, DEIG Setembro 2013 MIEEC SIEM --- 1 --- José António Faria Introdução ao protocolo HTTP
Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva
Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva Cascading Style Sheets - (CSS] Introdução Uma Style Sheet é um ficheiro que contém regras que dizem ao browser
HTML BÁSICO E TEMPLATE VIEW. Gabrielle Amorim Porto
HTML BÁSICO E TEMPLATE VIEW Gabrielle Amorim Porto HTML BÁSICO E TEMPLATE VIEW Hypertext Markup Language Linguagem de marcação de hipertexto; Descreve a estrutura das páginas Web utilizando tags. HTML
TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão
Luiz Leão luizleao@gmail.com http://luizleao.com Conteúdo da Unidade Cascading Style Sheet (CSS) Linguagem CSS Introdução É uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos
HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo
HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo RESUMO Linguagem de Marcação e Estilo - CSS DESCRIÇÃO Regra CSS Vinculação Inline Vinculação Incorporada Vinculação Externa TAGS seletor
HTML & CSS. uma introdução
HTML & CSS uma introdução HTML hypertext markup language CSS cascading style sheet linguagem de marcação que dá ao conteúdo estrutura e significado linguagem de estilo que dá ao conteúdo estilo e aparência
PROGRAMAÇÃO EM AMBIENTE WEB I
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com CSS As folhas de estilo em cascata são mecanismos usados para adicionar estilos em
Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]
![Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]](/thumbs/75/71501484.jpg "Recurso Didáctico. Dossier Técnico Pedagógico Projecto: 5742/2008/22 Acção: 5742/2008/ Formador[a]")
Recurso Didáctico Formador[a] Sónia Rodrigues UFCD / UC 0793 Scripts CGI e Folhas de Estilo Data 05/05/2009 Contextualização / Objectivos Documentação de apoio Orientação Pedagógica Apontamentos de Folhas
Sintaxe Básica da Linguagem CSS
Sintaxe Básica da Linguagem CSS Regras - Regra CSS é uma declaração com sintaxe própria, que indica como será aplicado um estilo a um ou mais elementos HTML. Ela é composta por três partes: um seletor,
COM222 DESENVOLVIMENTO DE SISTEMAS WEB. Aula 01: HTML e CSS
COM222 DESENVOLVIMENTO DE SISTEMAS WEB Aula 01: HTML e CSS 2 Conteúdo Noções introdutórias HTML CSS HTML: HyperText Markup Language 3 Linguagem usada para construir páginas Web Função principal Estruturar
Módulo 17E. Revisões de HTML. A) Noções básicas de HTML
Módulo 17E Revisões de HTML A) Noções básicas de HTML Estrutura básica de um documento Um documento HTML começa com a tag de abertura e termina com a tag de fecho . De seguida, temos a considerar
08/11/2012. Tecnologias WEB - CSS. Professor Elisson Lobão
Tecnologias WEB - CSS Professor Elisson Lobão 1 CSS CSS(Cascade Style Sheets) são folhas de estilo que permitem controlar a aparência dos elementos HTML Vantagens: Grande liberdade de formatação Maior
06/02/2016 PROGRAMAÇÃO EM AMBIENTE WEB I CSS UM POUCO DE HISTÓRIA
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com CSS As folhas de estilo em cascata são mecanismos usados para adicionar estilos em
CSS (Cascading Style Sheet)
CSS (Cascading Style Sheet) André Tavares da Silva andre.silva@udesc.br CSS Folha de Estilo em Cascata Mecanismo simples para adicionar estilos (fontes, cores, espaçamentos, por exemplo) aos documentos
Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Exemplo: h1, h2, h3, h4, h5, h6 { color: #00FF00; }
CENTRO PASTORAL, EDUCACIONAL E ASSISTENCIAL DOM CARLOS CPEA Reconhecido de Utilidade Pública pelo Decreto No. 5.692 de 08.11.1967 FACULDADE VIZINHANÇA VALE DO IGUAÇU VIZIVALI DOIS VIZINHOS PARANÁ Criada
CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira
![CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira](/thumbs/68/59560005.jpg "CSS [10] Desenvolvimento e Design de. Websites. Prof.: Ari Oliveira")
Desenvolvimento e Design de Websites Prof.: Ari Oliveira Folhas de Estilo em Cascata CSS Localização dos estilos Seletores 2 Faça uma página de trabalhe conosco. Esta página deverá conter um formulário
Desenvolvimento Web. Professor: Bruno E. G. Gomes
Instituto Federal de Educação Ciência e Tecnologia Curso Técnico Integrado em Informática Campus Currais Novos Desenvolvimento Web CSS Conceitos básicos parte I Professor: Bruno E. G. Gomes 2013 Introdução
CSS Exercício JCC. Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto. Sumário
CSS Exercício JCC Comunicações Digitais e Internet, 2006/07 Jornalismo e Ciências da Comunicação, U.Porto Sumário Com este exercício pretende-se apresentar e experimentar o processo de implementação de
Respostas - RESUMO: Questionário CSS. 1) O padrão CSS nasceu para tentar minimizar quais problemas ligados à gestão de conteúdos na web?
Faculdade de Informática de Taquara Disciplina: Autoria e Design na Internet I Profa. Flavia Pereira de Carvalho Respostas - RESUMO: Questionário CSS 1) O padrão CSS nasceu para tentar minimizar quais
F E B A C. Exercício de Fixação 3. FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07
F E B A C FACULDADE DE EDUCAÇÃO DE BACABAL FACULDADE DE EDUCAÇÃO DE BACABAL FEBAC Credenciamento MEC/Portaria: 472/07 Resolução: 80/07 Curso: Sistemas para Internet Período: 2 o Disciplina: Fundamentos
Web Design Aula 16: Modelo de Caixa e propriedades de Imagem
Web Design Aula 16: Modelo de Caixa e propriedades de Imagem Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Introdução Área de Conteúdo Enchimento Bordas Margens Caixas Propriedades
Desenvolvimento de Aplicações para Internet
Desenvolvimento de Aplicações para Internet CSS Celso Olivete Júnior olivete@fct.unesp.br HTML Formatando o documento... Formulário Responsável por fazer a interação entre os dados fornecidos pelo usuário
Estilo em Aplicações Hipermídia na Web
SCC0265 Sistemas Interativos Web Estilo em Aplicações Hipermídia na Web Renata Pontin M. Fortes (renata@icmc.usp.br) PAE: Willian Watanabe (watinha@gmail.com) Instituto de Ciências Matemáticas e de Computação
Tarlis Portela Web Design HTML
Tarlis Portela Web Design HTML HTML Definição HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) ; É uma linguagem de marcação utilizada
Cascading Style Sheets CSS
Cascading Style Sheets CSS Sistemas de Informação André Monteiro de Oliveira Restivo E-mail: andre.restivo@fe.up.pt URL: www.fe.up.pt/~arestivo/aulas/sinf André Restivo SINF 2003/2004 CSS: 1 CSS: O que
CASCADING STYLE SHEETS (CSS)
UI MARIA LENIR ARAÚJO MENESES Prof Esp. Leonardo Delgado Aula 02: CASCADING STYLE SHEETS (CSS) Unidade IV Aluno: Data: / / CASCADING STYLE SHEETS (CSS) O CSS é uma linguagem de estilo que foi desenvolvida
CSS CASCADING STYLE SHEET
CSS CASCADING STYLE SHEET CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB 1 PROF. ALEXANDRO DOS SANTOS SILVA 1 SUMÁRIO Conceito Sintaxe básica Tipos de folhas de estilos 2 1 CSS
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO
INTRODUÇÃO À PROGRAMAÇÃO EXERCÍCIO DE REVISÃO Questões de concurso 1. Na interface Web, ele é um arquivo independente do arquivo HTML no qual são declaradas propriedades e valores de estilização para os
Módulo 17E. Revisões de HTML. A) Noções básicas de HTML (cont.)
Módulo 17E Revisões de HTML A) Noções básicas de HTML (cont.) Inserção de Imagens A inserção de imagens em documentos HTML é feita através da tag (que não tem tag de fecho). A indicação do local
Teste de avaliação de frequência Parte Prática
Abaixo está uma proposta de solução para os exercícios do teste de avaliação de frequência às aulas práticas. Se tem dúvidas sobre esta resolução, fale com o seu Professor. GRUPO I HTML 1. CrieumHTMLcom3tiposdiferentesdelistasnãonumeradas.
CSS Cascading Style Sheets
CSS Cascading Style Sheets Linguagem de Folhas de Estilo Introdução Faz parte da versão 4 do html Utilizado para padronizar os componentes html Pode ser utilizado de três formas: Inline quando é utilizada
20/02/2014. <HTML> Introdução </HTML> Web
Introdução 1 Web 2 1 Web 3 Web 4 2 Web 5 Browsers 6 3 Editores 7 Editores 8 4 Aula Teórica-prática Etiquetas (tags) base Etiqueta principal e que deve abranger todo o código;
Interfaces Pessoa. Laboratório 1. Máquina. HTML, CSS, JS- Introdução
Interfaces Pessoa Máquina Laboratório 1 HTML, CSS, JS- Introdução 01 HTML + CSS + JavaScript Tecnologia para desenvolvimento web: Páginas web Aplicações web Aplicações mobile HTML Linguagem standard para
AULA 02 Introdução (HTML, CSS e Javascript) PROGRAMAÇÃO PARA WEB Marcelo Henrique dos Santos
AULA 02 Introdução (HTML, CSS e Javascript) Mestrado em Educação (em andamento) MBA em Negócios em Mídias Digitais MBA em Marketing e Vendas Especialista em games : Produção e Programação Bacharel em Sistema
Construção de sites Aula 1
Construção de sites Aula 1 Programa Instrutor Universidade Federal do Paraná Pró-reitoria de Assuntos Estudantis Departamento de Informática 31 de Julho de 2010 Indice Estrutura da Internet 1 Estrutura
TECNOLOGIA WEB. XHTML Aula 5. Profa. Rosemary Melo
TECNOLOGIA WEB XHTML Aula 5 Profa. Rosemary Melo HTML (Hiper Text Markup Language) Linguagem de marcação de hipertexto Comum especificar o conteúdo do documento e sua formatação em um só documento HTML.
17/01/2016 PROGRAMAÇÃO EM AMBIENTE WEB I UM POUCO DE HISTÓRIA WWW. Tudo começou com a ARPANET; 1977 ARPANET nasce
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com UM POUCO DE HISTÓRIA Tudo começou com a ARPANET; 1977 ARPANET nasce 1987 Das universidades,
Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS.
Este exercício será parecido com a montagem de um projeto real, onde trabalhamos com vários arquivos XHTML e um único arquivo CSS. 1) Crie uma pasta chamada com_estilo e salve dentro dela os arquivos obrigado.html
Programação Web Aula 2 XHTML/CSS/XML
Programação Web Aula 2 XHTML/CSS/XML Departamento de Informática UFPR 17 de Fevereiro de 2014 1 Histórico 2 Funcionamento 3 Atributos 4 HTML5 Estrutura de uma arquivo HTML5 Validação Tags básicas Seleção
CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW
CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW 2017.2 1 CSS: ementa Texto Fontes Links Ícones Listas Tabelas DPW 2017.2 2 / 18 CSS: text Definição Formatar o texto quanto
Hiperlinks. Hiperlinks. Hiperlinks. Tag <a></a> Hiperlinks 07/05/2011
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 2 Documentos hipertexto permitem estabelecer fluxos
REDES DE COMUNICAÇÃO. 11º - ANO Professor: Rafael Henriques
16-01-2019 Redes de Comunicação - Prof. Rafael Henriques 1 REDES DE COMUNICAÇÃO 11º - ANO Professor: Rafael Henriques E-mail: prof@rafaelhenriques.com Apresentação módulos 4 - Desenvolvimento de Páginas
Desenvolvimento Web. CSS Conceitos básicos parte I. Professor: Bruno Gomes
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA CURSO TÉCNICO INTEGRADO EM INFORMÁTICA CAMPUS CURRAIS NOVOS Desenvolvimento Web CSS Conceitos básicos parte I Professor: Bruno Gomes 2011 INTRODUÇÃO O
PROGRAMAÇÃO EM AMBIENTE WEB I
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com UM POUCO DE HISTÓRIA Tudo começou com a ARPANET; 1977 ARPANET nasce 1987 Das universidades,
Treinamento em CSS. Índice
Nível: Básico Horas: 2 Treinamento em CSS Índice Índice...1 Introdução...2 Formantando documentos...2 O que é CSS?...2 Por que utilizar CSS?...2 Separando o sistema em camadas...3 Vinculando um arquivo
Permite que o conteúdo e o layout de uma página seja separado do design visual e os elementos de apresentação.
Porque usar css? Cascading Style Sheets (css) sobrepõe as características padrões dos browsers São usadas para melhorar e controlar a aparência de uma página web. Porque usar css? Permite que o conteúdo
CSS EXTERNO. <head> <link href="estilo.css" type="text/css" rel="stylesheet" /> </head>
CSS DDW CSS EXTERNO O CSS é um arquivo que visa personalizar o modo como seu HTML aparece para o usuário. Ele deve ser chamado dentro da tag no topo do site.
Fábio Borges de Oliveira. HTML HyperText Markup Language
Fábio Borges de Oliveira HTML HyperText Markup Language Iniciando Código É a primeira tag de um documento HTML, nas primeiras versões dos browsers essa tag era obrigatória. Propriedade que
Tags estruturais <!-- --> Cria um comentário <html> </html> Envolve todo um documento html <head> </head> Envolve o cabeçalho de um documento html
Tags estruturais Cria um comentário Envolve todo um documento html Envolve o cabeçalho de um documento html Fornece informações gerais sobre o documento
INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 2
1 INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 2 Rhavy Maia Guedes rhavy.maia@gmail.com Hiperlinks
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
HTML - Definição e Conceitos
1 HTML - Definição e Conceitos HTML e uma abreviação para Hyper Text Markup Language ou Linguagem de Marcação de Hipertexto. É uma linguagem utilizada pra criação de páginas para a internet que serão "interpretadas"no
Exercícios Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exercícios Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Maio de 2018 1 Exemplos e Exercícios Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: 2 4) Também é possível
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Capacitar para a construção de documentos
Desenvolvimento Web CSS Conceitos básicos parte II
Desenvolvimento Web CSS Conceitos básicos parte II Prof.: Bruno E. G. Gomes 2014 Folhas de Estilo Externa Estilos são definidos em um arquivo separado e incorporados à página através da tag link Podem
3. Construção de páginas web Introdução ao HTML
3. Construção de páginas web 3.1. Introdução ao HTML 1 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido para especificar a organização lógica de um documento com extensões de hipertexto,
Cascading Style Sheets
Cascading Style Sheets PROF. ME. HÉLIO ESPERIDIÃO CSS Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação,
Comandos Extras Formatações no CSS
Comandos Extras Formatações no CSS Propriedade 'background-color': A propriedade background-color define a cor do fundo de um elemento. Propriedade 'color': A propriedade color define a cor do primeiro
Web Design - CSS. Conteúdo. - O que é CSS? - Sintaxe CSS - Como inserir CSS em HTML - Propriedades CSS
CSS Web Design - CSS Conteúdo - O que é CSS? - Sintaxe CSS - Como inserir CSS em HTML - Propriedades CSS 01 Assunto: CSS O que é CSS? CSS é a sigla para Cascading Style Sheets, que pode ser traduzida para
Recursos Complementares (Tabelas e Formulários)
Linguagem de Programação para Web Recursos Complementares (Tabelas e Formulários) Prof. Mauro Lopes 1-31 30 Objetivo Nesta aula iremos trabalhar o conceito de tabelas e todas as tags associadas ao seu
Exemplos Práticos HTML5 + CSS3. Profa. Flávia Pereira de Carvalho
Exemplos Práticos HTML5 + CSS3 Profa. Flávia Pereira de Carvalho Agosto de 2018 2 1 Exemplos Práticos HTML5 e CSS3 1) Primeiro exemplo: 2) Seletor ID: 3) Seletor de Classe: Profa. Flávia Pereira de Carvalho
Cascading: Style Sheet
André Kawamoto 2010 O que é CSS Cascading: Múltiplos estilos podem se sobrepor para especificar uma variedade de estilos desde um website inteiro até um único elemento. Qual estilo é aplicado diz respeito
Introdução à linguagem HTML. Volnys Borges Bernal
1 Introdução à linguagem HTML Volnys Borges Bernal 2013-2015 Volnys Bernal 2 Introdução à linguagem HTML Sumário Visão geral Primeira página Principais tags Principais atributos Formulários 2011-2015 Volnys
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
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
CSS. Karen Frigo Busolin
CSS Karen Frigo Busolin O que é CSS? Significa Cascading Style Sheets Estilos define como mostrar elementos HTML Estilos foram adicionandos no HTML 4.0 Estilos na solução de problemas HTML nunca deve a
Volnys Bernal. Introdução à linguagem HTML. Introdução à linguagem HTML. Visão geral. Visão geral. Visão geral. Visão geral.
1 2 Introdução à linguagem HTML Sumário Volnys Borges Bernal Primeira página Principais tags Principais atributos 3 4 HTML HTML = HyperText Markup Language Linguagem de marcação (Markup) para criação de
HTML, CSS e JavaScript
HTML, CSS e JavaScript Contato: Site: http://professores.chapeco.ifsc.edu.br/lara/ 1 Arquivo externo Dentro da tag head: 2 Qual a dirença
Criando estilos. Css. Cada estilo que você cria é definido como uma regra CSS. Cada regra deve-se utilizar a seguinte sintaxe:
Css CSS (Style Sheets Cascating - Folhas de Estilo em Cascata) é um estilo criado para melhorar a formatação de textos, imagens, links, tabelas, formulários e etc das suas páginas HTML. o CSS também facilita
Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral
Desenvolvimento WEB1 Aula 03 Profa Wanessa Machado do Amaral Surgimento do CSS Na aula passada tivemos uma breve introdução ao CSS Os documentos web, cada vez mais sofisticados e extensos, estavam fugindo
HTML? HTML? HTML? HTML e HTTP. HTML e HTTP 26/02/2011
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
Tarlis Portela Web Design CSS
Tarlis Portela Web Design CSS Web Design CONCEITOS 01 01 Histórico Quando o HTML foi criado, a intenção não era de forma alguma, formatar informação; A medida que o HTML foi se popularizando e evoluindo,
Dezembro/2012. Universidade Federal Fluminense. Curso de Introdução ao HTML. SeTel- Grupo PET-Tele. Adicionando links e imagens. Tabelas.
Universidade Federal Fluminense Dezembro/2012 1 2 3 4 5 6 7 8 Informações principais Base da Web: - Um esquema de nomes para localização de fontes de informação na Web : URL. - Um Protocolo de acesso para
#Trabalhando com Texto
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RIO GRANDE DO NORTE CAMPUS SÃO GONÇALO DO AMARANTE PROGRAMAÇÃO WEB #Trabalhando com Texto Eliezio Soares elieziosoares@gmail.com Aula de Hoje Web
MODELO DE CAIXA (BOX MODEL)
Programação Web MODELO DE CAIXA (BOX MODEL) Conferencia 5 MSc. Yoenis Pantoja Zaldívar MODELO DE CAIXA (BOX MODEL) ( ) comportamento de CSS que provoca que todos os elementos incluidos numa página HTML
Aplicativos móveis com HTML5
Aplicativos móveis com HTML5 Preparando o ambiente de desenvolvimento O código HTML pode ser escrito em qualquer editor de texto comum. Você pode utilizar o editor padrão do seu sistema operacional (Bloco
Informática Parte 21 Prof. Márcio Hunecke
Escriturário Informática Parte 21 Prof. Márcio Hunecke Informática CSS 3 É no CSS (Cascading Style Sheets) que se define estilos para páginas web com efeitos de transição, imagem, e outros, que dão um
Aula 7 Html 7. Prof. Paulo Cesar F. De Oliveira, BSc, PhD. 22/04/15 P C F de Oliveira
Aula 7 Html 7 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 1 Elementos Genéricos DIV SPAN 2 DIV Cria divisão ou seção no documento HTML Containers que podem ser formatados Elemento em bloco 3
UFCD 0793 Scripts CGI e Folhas de Estilo Formadora: Sónia Rodrigues
UFCD 0793 Scripts CGI e Folhas de Estilo Formadora: Sónia Rodrigues 0793 Scripts CGI e folhas de estilo Objectivos da UFCD: Desenvolver páginas para a Web, através de scripts CGI e folhas de estilo. UFCD
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I Prof. Dr. Daniel Caetano 2012-2 Objetivos Apresentar o CSS como substituto dos parâmetros visuais do HTML Apresentar a tag DIV Capacitar para a
HTML (HyperText. Markup Language)
Pontifícia Universidade Católica do Rio Grande do Sul PUCRS Faculdade de Informática HTML (HyperText Markup Language) Prof. Fabiano Passuelo Hessel Profª. Leticia Lopes Leite Julho de 2002. 1. Introdução
IFSC/Florianópolis - Prof. Herval Daminelli. De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links
De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links Propriedades básicas para fontes: color: cor da fonte font-family: tipo de fonte font-size: tamanho
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II
PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE II Prof. Dr. Daniel Caetano 2012-1 Objetivos Apresentar o CSS como ferramenta de layout de página Capacitar para o posicionamento de elementos com
Faculdade de Engenharia Departamento de Informática. Composição Web
Folha Prática 5 : CSS OBJECTIVO: O objetivo desta ficha é familiarizar-se com as folhas de estilos encadeados (Cascade Style Sheets CSS). RECOMENDAÇÕES: Sempre que necessário, procure informação adicional
Navegador. Servidor. Apache
PROGRAMAÇÃO AVANÇADA PARA WEB Navegador O navegador também conhecido como web browser ou simplesmente browser é um programa que habilita seus usuários a interagirem com documentos hospedados em um servidor
INTRODUÇÃO AO CSS. HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados.
INTRODUÇÃO AO CSS O que é CSS? Talvez você já tenha ouvido falar em CSS, mas não saiba o que significa exatamente. Nesta lição você saberá o que é e para que serve CSS. CSS é a abreviatura para Cascading
INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO CSS - Cascading Style Sheets Folhas de estilo em cascata Para cada estilo deve ser definido uma regra CSS Cada regra CSS deve utilizar
08/08/2011 TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS
TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS 1 SINTAXE: seletor{ propriedade: valor; Seletor: É o elemento HTML
Aula 3 - Parte Final HTML e CSS
Universidade Federal do Paraná - UFPR 16 de Agosto de 2010 Div 1 Div 2 Div Div Podemos dizer que a função da tag < div > é fazer a divisao dos itens de uma pagina, isto é posicionar os layouts. Para um
A linguagem Hyper Text Markup Language (HTML)
A linguagem Hyper Text Markup Language (HTML) Nota: Contém material utilizado no curso de HTML do Instituto Superior de Engenharia de Lisboa (ISEL) Ultima actualização: 15-10-2006 O que é? Linguagem para
<HTML> Vinícius Roggério da Rocha
Vinícius Roggério da Rocha www.monolitonimbus.com.br O que é HTML? HTML = HyperText Markup Language ou Linguagem de Marcação de Hipertexto Linguagem: maneira de se comunicar (entre máquinas, pessoas
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
PROGRAMADOR WEB. PROF. Esp. Andrew H. G. Rodrigues
PROGRAMADOR WEB PROF. Esp. Andrew H. G. Rodrigues CSS - CASCADING STYLE SHEETS Folhas de estilo em cascata Para cada estilo deve ser definido uma regra CSS Cada regra CSS deve utilizar a seguinte sintaxe:
Faculdade de Engenharia Departamento de Informática. Composição Web
Folha Prática 6: CSS OBJECTIVO: Neste laboratório iremos continuar a trabalhar com Cascade Style Sheets na formatação de uma página muito simples, que apenas contém um título e uma lista desordenada que
PROFESSORA MERRIS MOZER. Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias
PROFESSORA MERRIS MOZER Mestranda em Metodologias para o Ensino de Linguagens e suas Tecnologias INTRODUÇÃO AO DESENVOLVIMENTO DE SISTEMAS WEB Aula 1 HTML INTRODUÇÃO O que é HTML? INTRODUÇÃO HTML ou Hypertext
Criação de estilos CSS
Em primeiro lugar vamos inserir um parágrafo Marco Soares 1 Criação de estilos CSS Para começar, crie um site novo e uma página inicial para testes chamada index.html Vamos começar por criar alguns estilos
Programação para Internet
Universidade Federal de Uberlândia Faculdade de Computação Programação para Internet Curso de Sistemas de Informação Prof. Dr. Daniel A. Furtado Módulo 3 HTML com CSS 2 CSS Cascading Style Sheets É uma