Programação para Internet I 3. HTML. Nuno Miguel Gil Fonseca
|
|
|
- Natália Chaves Brezinski
- 7 Há anos
- Visualizações:
Transcrição
1 Programação para Internet I 3. HTML Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt
2 Um dos principais responsáveis pela evolução da Internet; Tida como a linguagem da Internet; Não é na verdade uma linguagem... É antes um conjunto standard de tags que permite definir a aparência de documentos; Baseada em SGML (Standard Generalized Markup Language) Levou ao surgimento de diferentes standards: WML, VXML, XHTML... (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 2
3 A última versão apresentada foi a 4.01 Posteriormente foi apresentada uma evolução XHTML1.x As especificações dos diferentes standards é regulamentada pelo W3C ( A especificação da versão 4.01 pode ser encontrada em: A próxima versão será HTML5 (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 3
4 Pedido de uma página: (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 4
5 O browser pede a página ao servidor WWW; O servidor WWW responde com o envio do texto e/ou imagens e restantes objectos que constituem a página; O browser recebe o texto e/ou os objectos pedidos. É interpretado o código HTML da página; É apresentado no monitor o resultado da interpretação do código recebido. (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 5
6 Os ficheiros HTML São vulgares ficheiros de texto; Conjuntos de tags que definem o modo como o conteúdo das páginas se encontra estruturado; Para tratar do aspecto das páginas deve recorrer-se exclusivamente a CSS (que serão abordados mais adiante nesta cadeiras!) (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 6
7 As tags São case insensitive <TITLE> = <title> = <TiTlE> As tags usam-se geralmente aos pares <p>... </p> <HEAD>... </HEAD> A ordem das tags não é indiferente... <table> <tr> <td></td> </tr> </table> Certo! <table> <tr> <td></tr> </td> </table> Errado! (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 7
8 Estrutura básica de um ficheiro HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//PT"> <html> <head> <title>título</title> <meta http-equiv="content-type" content="text/html; charset=iso " />... </head> <body [...propriedades...]>... </body> </html> tipo do documento cabeçalho corpo (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 8
9 Cabeçalho <title>... </title> <script>... </script> <style>... </style> <META HTTP-EQUIV=" " CONTENT="valor"> author nome do autor; description descrição da página; keywords palavras chave usadas pelos motores de busca; generator nome do editor de HTML usado na criação da página; copyright informação sobre os direitos de autor; expires, pragma, max-age, cache-control... <base href="url"> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 9
10 Corpo Parágrafos <p [...propriedades...]> texto </p> Para mudar de linha dentro de um parágrafo, deve utilizar-se a tag <br>. <p> A primeira linha do meu texto. <br> A segunda linha do meu texto </p> Uma tag<br> só deve ser utilizada dentro de um par <p>... </p> Barras horizontais <hr [...propriedades...]> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 10
11 Corpo Headings <h1></h1> a <h6></h6> Uma tag<h1>,<h2>, etc. não pode ser utilizada dentro de uma tag<p> <h1>titulo</h1> <p>bl bla bla</p> <h2>subtítulo</h2> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 11
12 Corpo Imagens <img src="path" [width="largura" height="altura"]... > <img src="./imagens/foto.jpg" width="100" height="100" alt="fotografia do bóbi ao saltos que nem um doido"> Deverão sempre ser utilizados caminhos relativos e não absolutos./fotos/xpto.jpg certo! C:\Program files\apache Software Foundation\Apache2.2\htdocs\fotos\xpto.jpg errado! Deverão ser sempre fornecidos valores sobre a altura e largura da imagem Deverá ser sempre utilizada a propriedade alt e/ou title que será utilizada por browsers que não tenham capacidade de mostrar imagens. Convém que a propriedade alt e/ou title tenha um valor que de facto descreva a foto. É de evitar valores como foto ou picture. (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 12
13 Corpo Hyperlinks <a href="url" [...propriedades...]>texto/imagem </a> <a href=" >Hiperligação textual</a> <a href=" ><img src="./sapo.gif" width="50" height="50" alt="clica na imagem para acederes ao sapo.pt"></a> Deverão sempre ser utilizados caminhos relativos e não absolutos./amigos/ze.html certo! C:\Program files\apache Software Foundation\Apache2.2\htdocs\amigos\ze.html errado! (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 13
14 Corpo Hyperlinks <a href="url" [...propriedades...]>texto/imagem </a> Deverá ter-se também em atenção que quando se quiser apontar para outro servidor, o link deverá sempre começar por caso contrário, o browser irá tratar url como sendo uma directoria do próprio servidor. <a href=" >Hiperligação textual</a> Neste caso irá tentar abrir o ficheiro (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 14
15 Hyperlinks (âncoras) Usados para criar hyperlinks dentro de uma mesma página No local para onde se pretenda ir, deverá inserir-se a seguinte tag <a name="nomedaancora">texto/imagem</a> Para construir um link para o local acima indicado... <a href="nomedapagina.html#nomedaancora"> texto/imagem</a> Link para o topo da página <a href="#">topo</a> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 15
16 Hyperlinks (mapas) Para criar muitos e diferentes links com base na mesma imagem <img src="xpto.gif" width="x" height="y" border="0" usemap="#nomedomapa"> <map name="nomedomapa"> <area shape="rect" coords="x1_1,y1_1,x2_1,y2_1" href=" <area shape="rect" coords="x1_2,y1_2,x2_2,y2_2" href=" <area shape="rect" coords="x1_3,y1_3,x2_3,y2_3" href=" </map> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 16
17 Hyperlinks (mapas)(cont.) É possível definir outras formas geométricas para além de rectângulos (e quadrados) Circulos <area shape="circle" coords= " x,y,raio" href=" Polígonos com número indefinido de lados <area shape="poly" coords= " x1,y1,x2,y2,...,xn,yn" href=" (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 17
18 Hyperlinks (cont.) Por vezes pretendemos que ao clicar num determinado hyperlink, seja automaticamente aberto o nosso cliente de (Outlook por exemplo) <a href="mailto:nuno.fonseca@estgoh.ipc.pt">mail!</a> Para abrir um hyperlink numa nova janela de browser, recorre-se à propriedade target. <a href=" target="_blank">mail!</a> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 18
19 Listas Numeradas <ol> <li>sporting</li> <li>porto</li> <li>benfica</li> </ol> Não numeradas <ul> <li>sporting</li> <li>porto</li> <li>benfica</li> </ul> 1. Sporting 2. Porto 3. Benfica Sporting Porto Benfica (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 19
20 Listas De definições <dl> </dl> <dt>sporting</dt> <dd>o maior clube do mundo e arredores</dd> <dt>porto </dt> <dd>cidade do norte de Portugal</dd> Sporting O maior clube do mundo e arredores Porto Cidade do norte de Portugal (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 20
21 Citação Como dizia o outro, <q> chapéus há muitos </q>! Como dizia o outro, chapéus há muitos! Bloco de citação Como dizia o outro: <blockquote> chapéus há muitos </blockquote> E dizia ele muito bem! Como dizia o outro: chapéus há muitos E dizia ele muito bem! Abreviaturas e acrónimos O <abbr title="sporting Clube de Portugal">SCP</abbr> joga mesmo bem O <acronym title="sporting Clube de Portugal">SCP</acronym> joga mesmo bem (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 21
22 Código fonte <p>para formatar texto para parecer código utiliza-se a tag <code>code</code>.</p> Para formatar texto para parecer código utiliza-se a tag code. Convém reparar que a palavra code ficou com uma formatação diferente Para listar grandes quantidades de código faz-se: <pre> for i = 1 to 10 if i = 1 print i else print i + 1 next i </pre> for i = 1 to 10 if i = 1 print i else print i + 1 next i Importa referir que só nesta situação é que dois ou mais espaços irão surgir ao utilizador como tal. Nas outras situações irá sempre surgir só um espaço! (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 22
23 Cores As cores em HTML podem ser representadas por um nome (exemplos: white, black, red, green, etc ) ou pelo código RGB da cor ( exemplos: #FFFFFF, #000000, #FF0000, #00FF00, etc ) A cada conjunto de dois símbolos corresponde a quantidade de cor R, G e B que aquela cor irá ter de acordo com o modelo aditivo de cores (em que 00 indica ausência da cor e FF indica a presença da totalidade da cor). #FF FF FF = # = R G B R G B #FF = #00 FF 00 = #00 00 FF = R G B R G B R G B (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 23
24 Formatações básicas (cont.) Alinhamento ao centro As formatações usando HTML não deverão ser usadas em trabalho real são aqui apresentadas para mostrar como se fazia antigamente... A forma correcta de formatar páginas é recorrendo a CSS (será apresentado mais adiante) Alinhamento à direita <center>imagens/texto</center> <right>imagens/texto</right> Alinhamento à esquerda <left>imagens/texto</left> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 24
25 Formatações básicas Definir cor de fundo da página As formatações usando HTML não deverão ser usadas em trabalho real são aqui apresentadas para mostrar como se fazia antigamente... A forma correcta de formatar páginas é recorrendo a CSS (será apresentado mais adiante) Definir imagem de fundo da página <body background="path da imagem"...> Alterar o tipo de letra <body bgcolor="#f5f5f5"...> Formatação por defeito <font face="arial" color="#00ff00" size="3"> Formatação alterada </font> Formatação por defeito (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 25
26 Formatações básicas (cont.) Texto a bold As formatações usando HTML não deverão ser usadas em trabalho real são aqui apresentadas para mostrar como se fazia antigamente... A forma correcta de formatar páginas é recorrendo a CSS (será apresentado mais adiante) Texto normal <b>texto bold</b> texto normal Texto em itálico Texto normal <i>texto em itálico</i> texto normal Texto sublinhado Texto normal <u>texto sublinhado</u> texto normal Texto riscado Texto normal <s>texto "riscado"</s> texto normal As tags <b> e <i> não deverão ser utilizadas! Em alternativa deverá utilizar-se CSS. (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 26
27 Tabelas <table...propriedades...>...</table> tags usadas para indicar início e fim de tabela <tr...propriedades...>...</tr> tags usadas para indicar início e fim de linha, deverá surgir entre as tags<table></table> <th...propriedades...>...</th> tags usadas para indicar início e fim de células de cabeçalho, deverá surgir entre as tags <tr></tr> <td...propriedades...>...</td> tags usadas para indicar início e fim de células de conteúdo, deverá surgir entre as tags <tr></tr> <caption> </caption> permite especificar a legenda de uma tabela, deverá vir imediatamente a seguir à tag <table> Nota: existem ainda as tags <thead>, <tbody> e <tfoot>, no entanto nem todos os browsers as suportam (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 27
28 Tabelas Exemplo <table border="1"> <caption>exemplo de uma tabela</caption> <tr> <th>cabeçalho</th> </tr> <tr> <td>dados</td> </tr> </table> cabeçalho dados Exemplo de uma tabela (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 28
29 Tabelas (continuação...) <table border="1"> <thead> <tr> <th>clube</th> <th>pontos</th> </tr> </thead> <tbody> <tr> <td>sporting</td> <td>100 pontos</td> </tr> <tr> <td>porto</td> <td>10 pontos</td> </tr> </tbody> </table> Clube Pontos Sporting 100 Porto 10 (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 29
30 Tabelas (continuação...) Propriedades das tabelas (as principais) width permite especificar a largura da tabela em pixels ou % da janela height - permite especificar a altura da tabela em pixels ou % da janela border permite especificar a moldura da tabela (valor numérico) bgcolor permite definir a cor (nome ou hexadecimal) de fundo da tabela cellpadding permite especificar um valor em pixels para a distância entre os dados e a linha que delimita a célula cellspacing - permite especificar um valor em pixels para a distância entre as border células cellspacing cellpadding height width (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 30
31 Tabelas (continuação...) Propriedades das células (as principais) width permite especificar a largura da célula em pixels ou % da tabela height - permite especificar a altura da célula em pixels ou % da tabela bgcolor permite definir a cor (nome ou hexadecimal) de fundo da tabela align permite definir o alinhamento horizontal (left, center, right) valign permite definir o alinhamento vertical (top, middle, bottom) (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 31
32 Tabelas (continuação...) Merge de colunas <table border="1" cellpadding="5" cellspacing="5"> <tr> <td>xxxxxx</td> <td>yyyyyy</td> </tr> <tr> <td colspan="2">zzzzzzzzzzzz</td> </tr> </table> Merge de linhas <table border="1" cellpadding="5" cellspacing="5"> <tr> <td rowspan="2">x</td> <td>x1</td> </tr> <tr> <td>x2</td> </tr> </table> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 32
33 A tag<span...propriedades...>...</span> Permite definir containers simples, ou seja, grupos de conteúdos simples Usada principalmente em formatação de texto <span style="font-size: 10px"> bla bla bla <span style="font-size: 20px"> ble </span> bla bla bla </span> Para definir containers mais complexos deverá ser usada a tag <div...propriedades...>...</div> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 33
34 Para criar containers visiveis, recorrer-se à tag <fieldset>. <fieldset> <legend>alunos</legend> Zé<br> Carlos<br> </fieldset> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 34
35 Símbolos especiais espaço - > - > < - < Lista completa em: Comentários em HTML <!- Texto --> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 35
36 Para mais informações Lista completa de tags (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 36
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
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,
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
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,
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,
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
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.
Síntese da aula anterior
Síntese da aula anterior Na última aula, aprendemos a utilizar em html: Tabelas Hiperligações Foi também disponibilizado um formulário de ajuda em html com as tags principais Sítio da aula anterior: http://www.marcosoares.com/aia/11/aula_2010_04_16/
Tabelas Div Span Frames Formulários
Tabelas Div Span Frames Formulários Tabelas Tabelas implementam um conceito importante de layout: as grades, segundo as quais organizamos textos e ilustrações de maneira harmoniosa. A utilização de tabelas
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
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
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
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 HyperText Markup Language (Linguagem de Marcação de HiperTexto)
HTML HyperText Markup Language (Linguagem de Marcação de HiperTexto) Instituto Federal de Educação, Ciência e Tecnologia do Triângulo Mineiro Prof. Edwar Saliba Júnior 1 Noções Básicas Estrutura de uma
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
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 HTML. Centro de Form. Profissional de Alverca Formador: Cosmin Constantinescu 1
HTML Sessão 7 HTML são mapas de imagem são outro tipo de grafismo muito utilizado na Web. Trata-se de uma forma de utilizar as imagens como links, em que a imagem é dividida em zonas e em que cada
Tabelas. table <table>...</table>
Tabelas table ... Explicação: Indica o início e o final de uma determinada tabela. Todas as demais marcas referentes a tabelas - linhas e células - somente serão consideradas se incluidas
HTML Página 36. Índice
PARTE - 6 HTML Página 36 Índice Tabelas... 37 Construindo tabelas Marcação TABLE... 37 Título da Tabela Marcação CAPTION... 37 Cabeçalho da tabela (table headings) Marcação TH... 37 Dados da tabela (table
TecWeb Tecnologias Web. Prof. Esp. Douglas Mariano dos Santos
TecWeb Tecnologias Web Prof. Esp. Douglas Mariano dos Santos Sobre mim Formado na FAU: Faculdade Alfa de Umuarama Sistemas para Internet Formado na FCV MBA em Desenvolvimento para Aplicativos Móveis Trabalhou
PROGRAMAÇÃO PARA INTERNET. Prof.: Jean Carlo Mendes
PROGRAMAÇÃO PARA INTERNET Prof.: Jean Carlo Mendes carlomendes@yahoo.com.br http://www.jeancarlomendes.com.br HTML Tabelas - As tabelas em HTML são criadas através das tags e - Algumas
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;
Tabelas. Uma célula de dados pode conter texto, imagens, listas, parágrafos, formulários, linhas horizontais, etc. <table> <tr>
Tabelas HTML Tabelas Tabelas São definidas pela tag Uma tabela é dividida em linhas -com a tag Cada linha divida em células de dados (com a tag ). As letras td são um acronimo
</H1>... <H6>... </H6>
HTML ... *Todo arquivo html tem que ter esse corpo no início e no fim do arquivo. ... *É o cabeçalho, contém todas as informações necessárias para o navegador ou servidor processar
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
Informática I. Aula 3. Aula 3-03/09/2007 1
Informática I Aula 3 http://www.ic.uff.br/~bianca/informatica1/ Aula 3-03/09/2007 1 Ementa Noções Básicas de Computação (Hardware, Software e Internet) HTML e Páginas Web Internet e a Web Javascript e
HTML: INTRODUÇÃO TAGS BÁSICAS
HTML: INTRODUÇÃO TAGS BÁSICAS CURSO TÉCNICO DE INFORMÁTICA MODALIDADE SUBSEQÜENTE DESENVOLVIMENTO WEB I PROF. ALEXANDRO DOS SANTOS SILVA 1 1 SUMÁRIO Definição Editores HTML Estrutura básica de um documento
HyperText Markup Language HTML. Tabela
HyperText Markup Language HTML Tabela Prof. Luis Nícolas de morim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ Introdução Tabela consiste em uma estrutura de
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
4. Características Gerais das Tabelas do HTML
4. Características Gerais das Tabelas do HTML Curso de Extensão em HTML PUCRS A criação de uma tabela começa pelo tag e termina pelo tag. Antes do texto de cada linha da tabela você deve inserir o tag
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
Tabelas. Tabelas. Iniciando a construção... Atributos <table> Tag <table></table> 05/06/2011
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 Tabelas INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 3 Largamente suportado(browser); Controlar
Programação para Internet I
Programação para Internet I Aula 03 Prof. Fernando F. Costa nando@fimes.edu.br Prof. Fernando 1 HTML - Acentuação Não é recomendável utilizar acentos em documentos web Problemas Pode haver má interpretação
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
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:
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
Os slides que seguem mostram os principais comandos da linguagem HTML. Conhecer o código HTML possibilita a criação de páginas leves que contenham ape
INTRODUÇÃO A PROGRAMAÇÃO HTML Os slides que seguem mostram os principais comandos da linguagem HTML. Conhecer o código HTML possibilita a criação de páginas leves que contenham apenas os comandos necessários
Prof. Erwin Alexander Uhlmann 1/7/2010
HTML 5 O html 5 é a nova versão do html 4. Foi desenvolvido para a interoperabilidade e padronização de plataformas e navegadores (motores). Compare as estruturas do html4 e do 5, abaixo: HTML 4 HTML 5
Tabelas. Tabelas. Iniciando a construção... Atributos <table> Tag <table></table> 05/04/2011
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA PARAÍBA CAMPUS CAMPINA GRANDE 1 2 Tabelas INTERNET BÁSICA: EXTENSIBLE HYPERTEXT MARKUP LANGUAGE XHTML PARTE 3 Largamente suportado(browser); Controlar
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
> 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
Links, Imagens e Tabelas
Links, Imagens e Tabelas Criar um link em um texto significa estabelecer uma ligação com outra página, outro texto, que o leitor pode abrir clicando numa palavra, grupo de palavras ou em uma imagem. 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
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 a HTML. André Tavares da Silva.
Introdução a HTML André Tavares da Silva andre.silva@udesc.br HTML HiperText Markup Language Linguagem de marcação para criar páginas Web Formada por textos e comandos chamados tags (etiquetas/rótulos)
Maurício Samy Silva. Novatec
Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...13 Introdução...15 Para quem foi escrito este livro... 15 Convenções tipográficas... 16 Site do livro... 18 Capítulo 1 O que é (X)HTML?...20
INTRODUÇÃO AO DESENVOLVIMENTO WEB
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Tabelas A tag permite a criação de tabelas com linhas e colunas Tabelas devem ser utilizadas para organizar e apresentar dados
SIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS HTML Como utilizar cabeçalhos e elementos de cabeçalhos de página em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste
Internet & HTML Internet & HTML Pedro Costa / 2004
Internet & HTML Pedro Costa / 2004 Como funcionam as páginas Web As páginas web são apenas constituídas por texto ASCII plano. Os Web browsers processam o código usado nas páginas web para mostrarem uma
TECNOLOGIA WEB INTRODUÇÃO CONSTRUÇÃO DE PÁGINAS ESTÁTICAS HTML / XHTML
INTRODUÇÃO CONSTRUÇÃO DE PÁGINAS ESTÁTICAS HTML / XHTML 1 INTRODUÇÃO TECNOLOGIA WEB Começaremos desvendando o poder do desenvolvimento de aplicações baseadas na Web com a XHTML (Extensible HyperText Markup
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
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
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
Introdução a Web Standards. Reinaldo Ferraz e Clécio Bachini
Introdução a Web Standards Reinaldo Ferraz e Clécio Bachini Document Object Model (DOM) Modelo de Documentos em Objetos Objetos em um Documento Markup Linguagem de Marcação Semântica Objetos com Sentido
Desenvolvimento Web. XHTML tag head e tags de texto. Professor: Bruno Gomes
INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA CURSO TÉCNICO INTEGRADO EM INFORMÁTICA CAMPUS CURRAIS NOVOS Desenvolvimento Web XHTML tag head e tags de texto Professor: Bruno Gomes 2012 INTRODUÇÃO
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
1 Introdução ao HTML e formatação de texto
1 Introdução ao HTML e formatação de texto Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Introdução...3 Uma visão geral do HTML...3 Estrutura do documento...3
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
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
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
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
HTML. HyperText Markup Language. Elaborado por Marco Soares
HTML HyperText Markup Language 1 HTML É uma linguagem de marcação utilizada para produzir páginas web As páginas web ou documentos html podem ser interpretados por navegadores web/browsers tais como Google
Implementando e manipulando Tabelas
Implementando e manipulando Tabelas Aplicações para Web I 31/03/2016 Tiago Alves de Oliveira - tiagofga@gmail.com 1 Tabelas As tags utilizadas para a criação de tabelas A utilização de tabelas permite
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
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
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
Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Elementos da Seção do Corpo Resumo
IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage ElementosdaSeçãodoCorpo Resumo ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger ElementosdaSeçãodoCorpo
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
O elemento para definição de uma tabela é <TABLE> sendo finalizada com </TABLE>. Este elemento prevê sub-elementos para sua composição.
HTML Tabelas O elemento para definição de uma tabela é sendo finalizada com. Este elemento prevê sub-elementos para sua composição. 1. Sub-elemento Título O título de uma tabela é definido pela
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
#Aula Nº 2 Marcação XHTML webstandards.samus.com.br webstandards.samus.com.br/aulas/aula2.pdf Vinicius Fiorio Custódio
#Aula Nº 2 Marcação XHTML webstandards.samus.com.br webstandards.samus.com.br/aulas/aula2.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Descrever os principais elementos da XHTML, Quando, Porque
#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
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
Aula 3. Imagens. <img src="foto.jpg" />
Aula 3 Imagens Para inserir uma imagem na página utilizamos a tag
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
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
Conceitos de HTML 5 Aula 1
Prof. João Augusto da Silva Bueno (joao.augusto@ifsc.edu.br) Conceitos de HTML 5 Aula 1 World Wide Web É um serviço da Internet que reúne vários documentos de todas as partes do mundo e esses documentos
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
INTRODUÇÃO HTML INTR 1 Formador José Calado
INTRODUÇÃO HTML 1 TAGS Têm identificadores de início e de fecho Contidas entre os sinais de menor, "" Devem ser sempre escritas em minúsculas Exemplo: - Tag de abertura do corpo do documento
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 em Ambiente Web. Prof. André Y. Kusumoto
Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Tabelas A linguagem HTML permite a construção de tabelas de dados. Praticamente, qualquer objeto pode ser colocado nas
Introdução à Tecnologia Web
Introdução à Tecnologia Web HTML HyperText Markup Language XTML extensible HyperText Markup Language Elementos da Seção do Corpo Tabelas Formulários Professor Alan Cleber Borim www.alanborim.com.br Índice.
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
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/64/51151119.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 15/04/2009 Contextualização / Objectivos Documentação de apoio Orientação Pedagógica Lista de tags, atributos
Prof. Daniel Oliveira
Prof. Daniel Oliveira Introdução ao HTML Formatação de textos Links Imagens Introdução ao HTML HTML (HyperText Markup Language - Linguagem de Formatação de Hipertexto) União dos padrões HyTime e SGML.
INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO A partir do HTML 4.01, o único modo de alterar a letra (cor, tamanho, tipo, etc.) ou o fundo (cor ou imagem) é utilizando o atributo
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
HTML: Recursos Básicos e Especiais
Linguagem de Programação para Web HTML: Recursos Básicos e Especiais Prof. Mauro Lopes 1-31 34 Objetivo Iremos aqui apresentar os recursos básicos e especiais do HTML. Serão apresentados, o uso de fontes,
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
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
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. Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.).
HTML Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.). Para se criar um novo documento HTML pode-se utilizar o Bloco de Notas, bastando para tal gravar o documento com
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
APOSTILA DE XHTML Profa. Gilene Borges Gomes
MÓDULO 2: Linha Horizontal . Quebra de linha: . Parágrafos . Cabeçalho: , , , , , . Comentário: . Atributos comuns. Tags - indica um bloco de texto
Programação e Designer para WEB
Programação e Designer para WEB Html Xhtml CSS Prof. Rodrigo Rocha prof.rodrigorocha@yahoo.com http://www.bolinhabolinha.com IIS C:\inetpub\www Apache \var\www Diretórios em servidor web Arquivos colocados
Síntese da aula anterior
Síntese da aula anterior Na última aula, aprendemos a utilizar em html: Tabelas Hiperligações 1 O que vamos fazer hoje? Vamos utilizar o que aprendemos da aula anterior juntamente com Utilização de imagens
<CENTER> <iframe src="http://www.universo.edu.br" width=740 height=255> </iframe> </CENTER>
6.4 iframes: Outra maneira mais elegante de inserir outras páginas dentro de nossos documentos HTML é através do comando . Nesse caso, devemos especificar o tamanho do espaço que deverá ser aberto
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