Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho
|
|
|
- Isabel Regueira Amarante
- 8 Há anos
- Visualizações:
Transcrição
1 Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Março de 2007
2 Sumário Página 1 INTRODUÇÃO À LINGUAGEM HTML EDIÇÃO DE DOCUMENTOS HTML PUBLICAÇÃO DE DOCUMENTOS NA INTERNET (SITES) DOCUMENTO HTML BÁSICO E SEUS COMPONENTES SEÇÃO <HEAD> SEÇÃO <BODY> FONTES...7 CORES...7 TAMANHOS...7 TIPOS CABEÇALHOS...8 ANINHAMENTO DE CABEÇALHOS...9 ALINHAMENTO DE CABEÇALHOS SEPARADORES...10 QUEBRA DE LINHA...10 PARÁGRAFOS LINHA HORIZONTAL COMENTÁRIOS LISTAS EM HTML...12 LISTAS DE DEFINIÇÃO...12 LISTAS COM MARCADORES...13 LISTAS NUMERADAS...14 LISTAS E SUB-LISTAS FORMATAÇÃO DE TEXTOS E CARACTERES FORMATAÇÃO DE FRASES CARACTERES ESPECIAIS MARQUEE LIGAÇÕES (USO DE LINKS)...20 ATRIBUTOS...21 CAMINHOS...21 Caminho Relativo...21 Caminho Absoluto...22 INDICADORES INSERÇÃO DE IMAGENS...23 ATRIBUTOS BÁSICOS DE IMAGEM MOLDURAS DE IMAGEM TABELAS...27 ELEMENTOS BÁSICOS DE TABELAS...27 TÍTULOS, LINHAS E ELEMENTOS...27 TÍTULOS COMPREENDENDO MAIS DE UMA COLUNA OU LINHA...28 TABELAS SEM BORDA...29 EXTENSÕES DE TABELAS...29 Cor de fundo...29 Cor de borda FRAMES
3 1 Introdução à Linguagem HTML HTML (HyperText Markup Language - Linguagem de Formatação de Hipertexto) é fruto do "casamento" dos padrões HyTime e SGML. HyTime - Hypermedia/Time-based Document Structuring Language: HyTime (ISO 10744:1992) - padrão para representação estruturada de hipermídia e informação baseada em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (áudio, vídeo, etc.), conectados por webs ou hiperlinks. O padrão HyTime é independente dos padrões de processamento de texto em geral. Ele fornece a base para a construção de sistemas hipertextos padronizados, consistindo de documentos que aplicam os padrões de maneira particular. SGML - Standard Generalized Markup Language: Padrão ISO 8879 de formatação de textos: não foi desenvolvido para hipertexto, mas torna-se conveniente para transformar documentos em hiperobjetos e para descrever as ligações. SGML não é padrão aplicado de maneira padronizada: todos os produtos SGML têm seu próprio sistema para traduzir as etiquetas (tags) para um particular formatador de texto. DTD - Document Type Definition: Define as regras de formatação para uma dada classe de documentos. Um DTD ou uma referência para um DTD deve estar contido em qualquer documento conforme o padrão SGML. Portanto, HTML é definido segundo um DTD de SGML. Todo documento HTML apresenta elementos entre parênteses angulares (< e >). Esses elementos são as etiquetas (tags) de HTML, que são os comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de fechamento, representada com uma barra ( / ): <etiqueta>...</etiqueta> Isso é necessário porque as etiquetas servem para definir a formatação de uma porção de texto, e assim marcamos onde começa e onde termina o texto com a formatação especificada por ela. Alguns elementos são chamados vazios, pois não marcam uma região de texto, apenas inserem alguma coisa no documento, não havendo a necessidade do fechamento: Todos os elementos podem ter atributos: <etiqueta> <etiqueta atributo1=valor1 atributo2=valor2>...</etiqueta> HTML é um recurso muito simples e acessível para a produção de documentos. Nesta apostila, será possível aprender grande parte de seus elementos. Dica: Não existem programas em HTML, pois HTML não é uma linguagem de programação, mas de formatação (marcação). Portanto, a rigor não existem "programadores" de HTML. 3
4 2 Edição de Documentos HTML Existem Editores HTML chamados WYSIWYG (what you see is what you get - o que você vê é o que você tem). Eles oferecem ambiente de edição com um resultado final das marcações (pois o resultado final depende do browser 1 usado para visitar a página). Alguns bastante conhecidos são por exemplo: FrontPage e Dreamweaver. Figura 1 Tela do FrontPage Além dos editores específicos para HTML, Editores de Textos bastante utilizados, como o Word, entre outros, permitem a exportação de seus documentos próprios para o formato HTML (menu Arquivo, Salvar como, Salvar_como Tipo). Um documento HTML, normalmente terá extensão.html ou.htm. 3 Publicação de Documentos na Internet (Sites) Para que uma página esteja permanentemente disponível pela Web, ela precisa ter um endereço fixo, alojada em um servidor. Existem vários provedores de espaço (hosting) gratuitos e também os provedores de acesso geralmente oferecem espaço para os sites de seus assinantes. Sites com fins lucrativos geralmente são hospedados em provedores de espaço pagos. Definida a hospedagem, basta enviar para o provedor os arquivos de seu site (via FTP 2 ou por uma página de envio no próprio provedor de espaço) e suas páginas já estarão disponíveis para visitas no mundo todo. 1 Browser: Navegador Internet. Exemplos: Netscape, Internet Explorer, Mozilla, etc. 2 FTP - File Transfer Protocol: Protocolo de Transferência de Arquivos. 4
5 4 Documento HTML Básico e seus Componentes A estrutura de um documento HTML apresenta os seguintes componentes: <HTML> <HEAD> <TITLE> Titulo do Documento </TITLE> </HEAD> <BODY> texto, imagem, links, etc... </BODY> </HTML> Figura 2 Componentes Básicos de um Documento HTML As etiquetas (tags) HTML não são sensíveis à caixa, ou seja, tanto faz escrever <HTML>, <Html>, <html>, <HtMl>, etc. Não tem diferença entre maiúsculas e minúsculas. Os documentos se dividem em duas seções principais, que veremos a seguir. 5 Seção <HEAD> <HEAD> contém informações sobre o documento. O elemento <TITLE>, por exemplo, define um título, que é mostrado no alto da janela do browser. Exemplo: <HEAD> <TITLE> Página do Fulano de Tal </TITLE> </HEAD> Todo documento WWW deve ter um título; esse título é referenciado em buscas pela rede, dando uma identidade ao documento. Ao adicionar uma página aos seus Favoritos (Bookmarks), o título da página se torna a âncora de atalho para ela. Por isso é sugerido que os títulos dos documentos sejam sugestivos, evitando-se títulos genéricos como "Introdução", por exemplo. O título também é bastante significativo para a listagem de uma página nos resultados de pesquisas nos sites de busca da Internet. 5
6 6 Seção <BODY> Tudo que estiver contido em <BODY> será mostrado na janela principal do browser, sendo apresentado ao leitor. <BODY> pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros documentos, imagens, formulários, animações, vídeos, sons e scripts embutidos. Atributos de <BODY> Através de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das páginas, bem como uma imagem de fundo (marca d água): <BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb" VLINK="#rrggbb" BACKGROUND="URL"> Onde: BGCOLOR: Background Color, ou seja, cor de fundo da página. Quando não é indicada a cor de fundo, o browser irá mostrar uma cor padrão, geralmente cinza ou branco. TEXT: Cor dos textos da página (padrão: preto). LINK: Cor dos links (padrão: azul). ALINK: Cor dos links quando acionados, clicados (padrão: vermelho). VLINK: Cor dos links depois de visitados (padrão: azul escuro ou roxo). Seus valores são dados em hexadecimal, equivalentes a cores no padrão RGB (Red, Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores já oferece uma interface bem amigável através da qual escolhemos as cores desejadas, sem nos preocuparmos com números esdrúxulos tais como #FF80A0. Browsers que seguem a definição de HTML 3.2 em diante, também aceitam 16 nomes de cores, tirados da paleta VGA do Windows - por exemplo, podemos escrever BGCOLOR="BLUE". Porém, browsers mais antigos não apresentarão as cores indicadas. BACKGROUND: Indica o URL 3 da imagem a ser replicada no fundo da página, como uma marca d água. Para efeitos de design, é possível fixar a imagem de fundo, para que ela não se mova junto com o texto ao se rolar a página. Esse efeito não é padrão e funciona no Internet Explorer. Dica: Os nomes das cores - os 16 nomes de cores aceitos desde a versão 3.2 da HTML são estes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. 3 URL: O sistema de endereçamento da Web é baseado em uma sintaxe chamada URI (Universal Resource Identifier - Identificador Universal de Recursos). Os endereços que utilizamos atualmente são os URLs, que seguem essa sintaxe. URL significa Uniform Resource Locator - Localizador Uniforme de Recursos. Um exemplo de URL é: Esse endereço identifica: o protocolo de acesso ao recurso desejado (http) e a máquina a ser acessada ( 6
7 7 Fontes Atributos das fontes: Cores As cores são introduzidas através do elemento <FONT>, usando o sistema RGB para cores (da mesma forma que vimos para cores de documentos), como mostrado no exemplo a seguir: <FONT COLOR="red"> Texto </FONT> Produzirá na página: a palavra Texto escrita na cor vermelha. Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita através dos atributos de <BODY>. Tamanhos Veja a formatação a seguir: produzirá na página: a palavra Texto como o tamaho 3. <FONT SIZE=3> Texto </FONT> Este comando permite que o autor do documento altere o tamanho das letras em trechos específicos de texto. O tamanho básico dos textos é 3 (padrão). Podemos indicar tamanhos relativos a esse, por exemplo: <FONT SIZE=+2> Letra maior </FONT> Letra normal <FONT SIZE=-2> Letra menor </FONT> Letra maior Letra normal Letra menor Tipos Uma evolução que permite a escolha da fonte para os textos (tipo de letra), é o atributo FACE: <FONT FACE="Arial"> Texto </FONT> Produzirá: a palavra Texto com a fonte (tipo de letra) Arial. 7
8 Mais exemplos: <FONT FACE="Verdana" COLOR="blue"> Fonte Verdana Azul </FONT> Fonte Verdana Azul <FONT FACE="Arial" COLOR="green"> Fonte Arial Verde </FONT> Fonte Arial verde <FONT FACE="Courier New" COLOR="red"> Fonte Courier New Vermelha </FONT> Fonte Courier New Vermelha 8 Cabeçalhos Há seis níveis de cabeçalhos em HTML, de <H1> a <H6>: <H1> Este é um cabeçalho de nível 1 </H1> <H2> Este é um cabeçalho de nível 2 </H2> <H3> Este é um cabeçalho de nível 3 </H3> <H4> Este é um cabeçalho de nível 4 </H4> <H5> Este é um cabeçalho de nível 5 </H5> <H6> Este é um cabeçalho de nível 6 </H6> Esses cabeçalhos são mostrados no browser da seguinte forma: Este é um cabeçalho de nível 1 Este é um cabeçalho de nível 2 Este é um cabeçalho de nível 3 Este é um cabeçalho de nível 4 Este é um cabeçalho de nível 5 Este é um cabeçalho de nível 6 8
9 Aninhamento de cabeçalhos Os cabeçalhos não podem ser aninhados, isto é, a formatação: <H2>Este é <H1>um cabeçalho de nível 1</H1> dentro de um cabeçalho de nível 2</H2> pode produzir algum resultado próximo ao desejado: Este é um cabeçalho de nível 1 dentro de um cabeçalho de nível 2 Mas o mais comum é que os browsers "entendam" essa formatação como sendo: <H2>Este é</h2> <H1>um cabeçalho de nível 1</H1> dentro de um cabeçalho de nível 2</H2> Ou seja, como se estivesse faltando uma etiqueta de fechamento de <H2> antes de <H1> e faltando uma abertura de <H2> depois do fechamento de <H1>, oferecendo o seguinte resultado: Este é um cabeçalho de nível 1 dentro de um cabeçalho de nível 2 Os editores WYSIWYG naturalmente não permitem o aninhamento de cabeçalhos. Alinhamento de cabeçalhos Os cabeçalhos têm atributos de alinhamento: <H2 ALIGN=CENTER>Cabeçalho centralizado</h2> Cabeçalho centralizado <H3 ALIGN=RIGHT>Cabeçalho alinhado à direita</h3> Cabeçalho alinhado à direita <H4 ALIGN=LEFT>Cabeçalho alinhado à esquerda (default=padrão)</h4> Cabeçalho alinhado à esquerda (default=padrão) 9
10 9 Separadores As quebras de linha do texto fonte não são significativas na apresentação de documentos em HTML. Para organizar os textos, precisamos de separadores, apresentados a seguir. Quebra de linha Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário quando queremos uma quebra de linha em determinado ponto, pois os browsers já quebram as linhas automaticamente para apresentar os textos. Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Esse elemento tem um atributo especial, que será apresentado no item sobre inserção de imagens. Parágrafos Para separar blocos de texto, usamos o elemento <P>, por exemplo: Parágrafo 1; <P> Parágrafo 2. que produz o seguinte: Parágrafo1; Parágrafo2. Combinando parágrafos e quebras de linha, temos por exemplo: Parágrafo 1;<br> linha 1 do parágrafo 1, <br>linha 2 do parágrafo 1.<P>Parágrafo 2;<br> linha 1 do parágrafo 2, <br>linha 2 do parágrafo 2. O resultado da marcação acima é: Parágrafo 1; linha 1 do parágrafo 1, linha 2 do parágrafo 1. Parágrafo 2; linha 1 do parágrafo 2, linha 2 do parágrafo 2. 10
11 <P> tem atributo de alinhamento, semelhante aos cabeçalhos, como nos exemplos a seguir: <P ALIGN=CENTER> Assim como os trens, as boas idéias às vezes chegam com atraso. <BR> (Giovani Guareschi) </P> Assim como os trens, as boas idéias às vezes chegam com atraso. (Giovani Guareschi) <P ALIGN=RIGHT>Como diz o provérbio chinês: É melhor passar por ignorante uma vez do que permanecer ignorante para sempre.</p> Como diz o provérbio chinês: É melhor passar por ignorante uma vez do que permanecer ignorante para sempre. <P ALIGN=LEFT>Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial.</p> Este é o alinhamento padrão (default), e por isso não vou colocar nenhuma frase especial. 10 Linha Horizontal <HR> insere uma linha horizontal, como a apresentada abaixo: Essa linha tem diversos atributos, oferecendo resultados diversos. <HR SIZE=7> insere uma linha de largura 7 (pixels): <HR WIDTH=50%> insere uma linha que ocupa 50% do espaço horizontal disponível: <HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (do espaço horizontal disponível), alinhada à direita, sem efeito tridimensional: 11
12 <HR SIZE=70 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 70 (pixels), comprimento 2 (pixels), alinhada à esquerda (o Netscape, aparentemente, não aceita esta formatação de <HR>): Dica: Divisões - outros elementos usados para separar porções de texto são o <DIV> e o <CENTER>. <CENTER> centraliza os elementos (textos, imagens, tabelas) que estiverem dentro de sua marcação. <DIV> marca uma divisão lógica de um documento e é uma formatação bastante usada atualmente. 11 Comentários Para fazer algum comentário no código HTML usa-se a seguinte notação: <!-- blá blá blá --> 12 Listas em HTML Há vários tipos de listas em HTML, sendo estas as mais usadas e corretamente apresentadas pelos browsers: Listas de Definição Estas listas são chamadas também Listas de Glossário, uma vez que têm o seguinte formato: <DL> <DT> termo a ser definido <DD> definição <DT> termo a ser definido <DD> definição </DL> Que produz: termo a ser definido definição termo a ser definido definição 12
13 Este tipo de lista é muito utilizado para diversos efeitos de organização de páginas, por permitir a tabulação do texto. Um exemplo é a lista composta abaixo: <DL> <DT> Imperadores do Brasil: <DD> D. Pedro I <DL> <DD> Nome completo: Pedro de Alcântara Francisco Antônio João Carlos Xavier de Paula Miguel Rafael Joaquim José Gonzaga Pascoal Cipriano Serafim de Bragança e Bourbon </DL> <DD> D. Pedro II <DL> <DD> Nome completo: Pedro de Alcântara João Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocádio Miguel Gabriel Rafael Gonzaga </DL> </DL> Imperadores do Brasil: D. Pedro I Nome completo: Pedro de Alcântara Francisco Antônio João Carlos Xavier de Paula Miguel Rafael Joaquim José Gonzaga Pascoal Cipriano Serafim de Bragança e Bourbon D. Pedro II Nome completo: Pedro de Alcântara João Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocádio Miguel Gabriel Rafael Gonzaga Listas com Marcadores São equivalentes às listas com marcadores do MS-Word, por exemplo: <UL> <LI> item de uma lista <LI> item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto <LI> item </UL> item de uma lista item de uma lista, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto item 13
14 A diferença entre o resultado da marcação HTML e de um Editor de Textos está na mudança dos marcadores, assinalando os diversos níveis de listas compostas: <UL> <LI> Documentos básicos <LI> Documentos avançados <UL> <LI> formulários <UL> <LI> CGI </UL> <LI> contadores <LI> relógios </UL> <LI> Detalhes sobre imagens </UL> Documentos básicos Documentos avançados o formulários CGI o contadores o relógios Detalhes sobre imagens Listas Numeradas <OL> <LI> item de uma lista numerada <LI> item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto <LI> item de lista numerada </OL> 1. item de uma lista numerada 2. item de uma lista numerada, que pode ser tão grande quanto se queira, sem que seja necessário se preocupar com a formatação das margens de texto 3. item de lista numerada 14
15 Estas listas não apresentam numeração em formato 1.1, 1.2, etc., quando compostas apresentam-se da seguinte forma: 1. Documentos básicos 2. Documentos avançados 1. formulários 1. CGI 2. contadores 3. relógios 2. Detalhes sobre imagens Porém, através do atributo TYPE (HTML 3.2), pode-se lidar com a numeração dos itens: <OL TYPE=I> <LI> Documentos básicos <LI> Documentos avançados <OL TYPE=a> <LI > formulários <OL TYPE=i> <LI>CGI </OL> <LI> contadores <LI> relógios </OL> <LI> Detalhes sobre imagens </OL> I. Documentos básicos II. Documentos avançados a. formulários i. CGI b. contadores c. relógios III. Detalhes sobre imagens Ainda segundo HTML 3.2, o atributo START pode indicar o início da numeração da lista: <OL START=4 TYPE=A> <LI> um item <LI> outro item <LI> mais um item </OL> D. um item E. outro item F. mais um item 15
16 Listas e sub-listas As listas podem ser aninhadas. Por exemplo: <DL> <DT> termo a ser definido <DD> definição <OL> <LI> item de uma lista numerada <LI> item de uma lista numerada <UL> <LI> item de uma lista </UL> <LI> item de uma lista numerada </OL> <DT> termo a ser definido <DD> definição </DL> termo a ser definido definição 1. item de uma lista numerada 2. item de uma lista numerada o item de uma lista 3. item de uma lista numerada termo a ser definido definição Dica: Se você não está vendo diferença alguma entre as listas comuns e as que têm atributos TYPE, isso se deve ao fato de seu browser não estar reconhecendo esses atributos como válidos. Trata-se de um browser de versão antiga. Isso deve ser pensado quando usamos atributos mais recentes: nem todo usuário poderá ver o resultado das novas marcações. 16
17 13 Formatação de Textos e Caracteres Blocos de texto HTML oferece as seguintes formatações de blocos de texto: <PRE> Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulações: <pre> uma linha aqui, outra ali, etc. </pre> Resulta em: uma linha aqui, outra ali, etc. Uma vez que <PRE> mantém o texto original, não se deve forçar espaços com essa marcação dentro de outra marcação que já apresente tabulações e espaços específicos. <BLOCKQUOTE> É usado para citações longas: <blockquote> A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional. </blockquote> (Stephen W. Hawking, Uma Breve História do Tempo ) A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional. (Stephen W. Hawking, Uma Breve História do Tempo ) <ADDRESS> Usado para formatar endereços de e referências a autores de documentos, como por exemplo: Envie críticas e sugestões para <address> fulano@xxx.com.br </address> Envie críticas e sugestões para fulano@xxx.com.br 17
18 14 Formatação de Frases <B> Quando disponível no browser, é mostrado em negrito (em alguns browsers, pode aparecer sublinhado). <I> Itálico <U> Sublinhado. Deve ser usado com cuidado, pois confunde-se com a apresentação de links. <STRIKE> ou <S> Frase riscada. <BIG> Fonte um pouco maior. <SMALL> Fonte um pouco menor. <SUB> Frase em estilo índice, como em H 2 O, por exemplo. <SUP> Frase em estilo expoente, como em Km 2, por exemplo. 18
19 15 Caracteres Especiais HTML permite que caracteres especiais sejam representados por seqüências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caractere desejado, e um ; final. Três caracteres ASCII - <, >, e & têm significados especiais em HTML e são usados dentro de documentos seguindo a correspondência: Entidade Caractere < < > > & & Outras seqüências de escape suportam caracteres ISO Latin1. Aqui está uma tabela com os caracteres mais utilizados em Português: Entidade á â à ã ç é ê í ó ô õ ú ü Caractere á â à ã ç é ê í ó ô õ ú ü Entidade Á Â À Ã Ç É Ê Í Ó Ô Õ Ú Ü Caractere Á Â À Ã Ç É Ê Í Ó Ô Õ Ú Ü Como vemos, as seqüências de escape são sensíveis à caixa. Os editores de HTML fazem essa tradução automaticamente. Existem alguns símbolos que vêm sendo incorporados ao conjunto de caracteres reconhecidos em HTML. Por exemplo,, que é o símbolo, para, e para. Também pode-se usar seqüências com códigos ASCII, por exemplo: Qué pasa, señor? Qué pasa, señor? 19
20 Dica: Por que usar essas formatações? Por causa de um problema técnico relativo à transmissão dos caracteres especiais de várias línguas. Chama-se conjunto de caracteres uma representação digital de texto. O conjunto de representação amplamente utilizado é o ASCII. O ASCII padrão tem 7 bits, porém são usadas versões particulares desse padrão - o ASCII americano, ASCII português, etc., que utilizam 8 bits. Se geramos um texto em ASCII de 8 bits e, na transmissão, esse texto é tratado por um sistema que compreende apenas o ASCII de 7 bits, os caracteres especiais serão transformados em caracteres diferentes, pela perda do oitavo bit. Os usuários da Internet já devem ter sofrido experiência semelhante com mensagens de e- mail, que chegam com caracteres estranhos, ou páginas da Web com textos em japonês ou russo. 16 Marquee É possível obter o efeito de animação de texto, através da formatação <MARQUEE>. <MARQUEE BEHAVIOR=efeito> Texto </MARQUEE> Atributos de largura e direção do efeito permitem diversas apresentações diferentes, por exemplo: <MARQUEE BEHAVIOR=SCROLL WIDTH=30%> Texto </MARQUEE> <MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT> Texto </MARQUEE> <MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT> Texto </MARQUEE> Atenção: O efeito Marquee só é executado no Internet Explorer e em versões recentes do Netscape - e de maneiras diferentes. 17 Ligações (uso de Links) Com HTML é possível fazermos ligações de uma região de texto (ou imagem) a um outro documento (ou a outra parte do próprio documento). Você já deve ter visto em alguma página internet exemplos dessas ligações: o browser destaca essas regiões e imagens do texto, indicando que são ligações de hipertexto - também chamadas hypertext links ou hiperlinks ou simplesmente links, onde normalmente, o mouse vira uma mãozinha e ao clicar chamamos (abrimos) um outro documento, página web ou figura por exemplo. 20
21 Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma: <A HREF = "arquivo_destino"> âncora </A> Onde: arquivo_destino: é o endereço do documento de destino, da página ou imagem a qual queremos abrir. âncora: é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado para o documento de destino. Atributos <A> tem vários atributos que são utilizados de acordo com a ação associada ao link. Os mais usados são apresentados a seguir: HREF: Indica o arquivo de destino da ligação de hipertexto. TARGET: Indica o frame em que será carregado o arquivo_destino. Maiores detalhes na seção sobre frames. NAME: Marca um indicador, isto é, uma região de um documento como destino de uma ligação. Maiores detalhes na seção sobre indicadores. Caminhos Os links podem estar indicados como caminhos relativos ou absolutos. Caminho Relativo O caminho relativo pode ser usado sempre que queremos fazer referência a um documento armazenado no mesmo servidor do documento atual. Através do campo de endereços do browser, é possível identificar se um documento (página) que está sendo visualizado está dentro de algum diretório (pasta). Como por exemplo se estivermos em um browser acessando a página da FACCAT e vemos o seguinte endereço: O que podemos concluir é que o documento que está sendo visualizado no momento, chamado apostila_de_informatica.html, está localizado dentro de um diretório (pasta) chamado apostilas do servidor 21
22 Então para escrevermos por exemplo um link deste documento (apostila_de_informatica.html) para um documento chamado doc.html que está localizado no diretório /apostilas/documentos/ do mesmo servidor tudo que precisamos fazer é escrever: <A HREF="documentos/doc.html"> Exemplo de Caminho Relativo </A> Para usar links com caminhos relativos é preciso, portanto, conhecer a estrutura do diretório do servidor no qual estamos trabalhando, pois devemos indicar todo o caminho onde está o documento no qual estamos nos referindo no link. Quando há alguma dúvida, o melhor é usar o caminho absoluto. Caminho Absoluto Utilizamos o caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor, por exemplo: <A HREF=" FACCAT - Faculdades de Taquara </A> Que oferece um link FACCAT - Faculdades de Taquara que ao ser clicado com o mouse abrirá a página cujo endereço é Com a mesma sintaxe, é possível escrever links para qualquer servidor de informações da Internet. Indicadores O atributo NAME permite indicar um trecho de documento como ponto de chegada de uma ligação hipertexto. A formatação: <A NAME="inicio"> Indicadores (uso de links) </A> faz com que a âncora Indicadores (uso de links) seja o destino de um link. Se escrevermos: <A HREF="#inicio"> Topo do Documento </A> teremos uma ligação hipertexto para um trecho deste mesmo documento: 22
23 18 Inserção de Imagens O elemento IMG insere imagens que são apresentadas junto com os textos. Um atributo SRC deve estar presente, da seguinte forma: <IMG SRC="URL_imagem"> Onde URL_imagem é o URL do arquivo que contém a imagem que se quer inserir; pode ser referenciada uma imagem que esteja em um outro servidor (o que, logicamente, não é conveniente). Assim, escrevendo: <IMG SRC = "nome_da_figura.extensão"> ou, se ela estiver dentro de uma pasta no mesmo servidor: <IMG SRC = "nome_da_pasta/nome_da_figura.extensão"> Por exemplo, se quisermos inserir na página uma imagem chamada arvore.gif localizada no mesmo servidor e na mesma pasta, a tag seria assim: <IMG SRC = "arvore.gif"> As imagens usadas na Web, normalmente são armazenadas em arquivos com as seguintes extensões:.gif,.jpg (ou.jpeg),.png,.bmp. Atributos Básicos de Imagem ALT Indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers. Ou quando se desabilita o carregamento de imagens em browsers gráficos. É recomendável que esteja sempre presente. Também aparecerá ao passar o mouse sobre a imagem. <IMG SRC="URL_imagem" ALT="descrição_da_imagem"> Dessa forma: <IMG SRC="newred.gif" ALT="Novo!!!"> É apresentado nos browsers gráficos assim: e, nos browsers texto, assim: [Novo!!!]. E ao passar o mouse sobre a figura também aparecerá a descrição Novo!!! 23
24 WIDTH e HEIGHT Atributos de dimensão da imagem, em pixels 4. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a inserção de uma imagem. <IMG SRC="URL_imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura"> Uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser reservado a elas. BORDER Quando uma frase é marcada como âncora de um link, ela se apresenta sublinhada; quando uma imagem faz as vezes de âncora, ganha uma borda que indica sua condição de link. Porém, por questões de apresentação, nem sempre interessa termos essa borda ao redor da imagem. Assim, com o atributo BORDER, podemos controlar esse detalhe. * Se quisermos uma borda mais larga: <A HREF="URL"> <IMG SRC="imagem" ALT="descrição" BORDER=4> </A> * Se quisermos uma imagem sem borda: <A HREF="URL"> <IMG SRC="imagem" ALT="descrição" BORDER=0> </A> Essa borda pode ser apresentada também em imagens que não são âncora de links. Basta aplicar, por exemplo, a formatação: <IMG SRC="figura1.gif" ALT="Minha Foto" BORDER=2> 4 Pixel: O pixel, ou ponto, é a menor unidade que compõe uma imagem digital, ele contém os atributos de cor de cada ponto, a maior ou menor quantidade de pixels em uma área é que determinam a resolução da imagem, bem como seu maior ou menor tamanho em bytes. São pontos por centímetro quadrado. Quanto maior o número de pixels maior a qualidade da imagem e maior será o tamanho do arquivo também. 24
25 Assim, é possível dar mais destaque a uma imagem, sem ser necessário editá-la: Foto Original Foto com Borda gerada pelo HTML ALIGN <IMG SRC="imagem.extensão" ALT="descrição" ALIGN=alinhamento_desejado> Existem também atributos de alinhamento, que produzem os seguintes resultados: ALIGN=TOP: Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado não seja muito bom. ALIGN=MIDDLE: Alinha o texto adjacente com o meio da imagem, embora com linhas compridas o resultado não seja muito bom. ALIGN=BOTTOM: Alinha o texto adjacente com a parte de baixo da imagem (default). ALIGN=RIGHT: Alinha imagem à direita, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem. ALIGN=LEFT: Alinha imagem à esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem. Para ter duas imagens, uma em cada margem, numa mesma linha, escreva: <IMG ALIGN=LEFT SRC="imagem.extensão" ALT="descrição"> <IMG ALIGN=RIGHT SRC="imagem.extensão" ALT="descrição">...e pode-se escrever à vontade entre as imagens! Isto resulta em:...e pode-se escrever à vontade entre as imagens! 25
26 Um detalhe surgido com o alinhamento de imagens foi a necessidade de se liberar o texto desse alinhamento, ou seja: Suponhamos um texto mais ou menos curto, que desejamos colocar com a imagem ilustrativa, mas gostaríamos que este trecho já estivesse abaixo da imagem! De acordo com o comprimento da primeira frase, não seria possível usar o alinhamento TOP. Para conseguir isso, seria necessário incluir diversos <BR> consecutivos, inserindo linhas em branco; mesmo assim, o resultado final poderia ser bem pouco elegante. Surgiu, então, o atributo CLEAR para <BR>. Com esse atributo, podemos, por exemplo ter um texto posicionado no ponto em que a margem direita fica livre, com <BR CLEAR=RIGHT> ou no ponto em que a margem esquerda fica livre, com <BR CLEAR=LEFT> Dessa maneira, podemos controlar bem a posição relativa dos textos. Também pode-se posicionar o texto no ponto em que ambas as margens estão livres. Isso é conseguido com <BR CLEAR=ALL> E, assim, vimos tudo sobre quebras de linha depois de imagens! 19 Molduras de Imagem Para melhorar ainda mais a apresentação das imagens junto com os textos, foram desenvolvidos atributos de moldura. Estes atributos definem o espaço - vertical e horizontal - deixado entre as imagens e os textos circundantes: <IMG SRC="imagem.extensão" VSPACE=espaço_vertical> <IMG SRC=" imagem.extensão " HSPACE=espaço_horizontal> Outros exemplos: <IMG SRC="foto.gif" WIDTH="148" HEIGHT="95" ALIGN=left VSPACE="30"> <IMG SRC="foto.gif" WIDTH="160" HEIGHT="71" ALIGN=right HSPACE="30"> Abaixo, temos um exemplo com os dois atributos, através da formatação: <IMG SRC="foto.gif" ALIGN="LEFT" WIDTH="63" HEIGHT="68" HSPACE="20" VSPACE="20"> 26
27 20 Tabelas A formatação de tabelas foi adotada bem antes de sua inclusão na definição de HTML. A manipulação de tabelas, mesmo em editores, é trabalhosa. A maior diferença entre tabelas em HTML e em editores como o MS-Word, entretanto, é o fato das tabelas em HTML serem definidas apenas em termos de linhas e não de colunas. Mas isso será percebido no decorrer deste capítulo. As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas é possível, por exemplo, termos páginas organizadas em colunas, sendo uma delas reservada aos links de navegação dentro de cada seção. Tabelas implementam um conceito importante de layout: as grades, segundo as quais organizamos textos e ilustrações de maneira harmoniosa. Como já foi possível perceber, as tabelas contêm textos, listas, parágrafos, imagens, formulários e várias outras formatações - inclusive outras tabelas. Novas versões de HTML e de browsers populares vêm acrescentando diversos atributos às tabelas, e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis. Elementos básicos de tabelas <TABLE>...</TABLE> delimita uma tabela. Um atributo básico é BORDER, que indica a apresentação da borda. <TABLE BORDER="borda">... </TABLE> Títulos, linhas e elementos <CAPTION>...</CAPTION> define o título da tabela <TR>...</TR> delimita uma linha <TH>...</TH> define um cabeçalho para colunas ou linhas (dentro de <TR>) <TD>...</TD> delimita um elemento ou célula (dentro de <TR>) 27
28 Uma tabela simples: <TABLE BORDER=4> <CAPTION> Primeiro exemplo </CAPTION> <TR> <TH> Coluna 1 </TH> <TH> Coluna 2 </TH> </TR> <TR> <TD> linha1, coluna 1 </TD> <TD> linha 1, coluna 2 </TD> </TR> <TR> <TD> linha 2, coluna 1 </TD > <TD> linha 2, coluna 2 </TD> </TR> </TABLE> Primeiro exemplo Coluna 1 Coluna 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 Títulos compreendendo mais de uma coluna ou linha É possível englobar colunas e linhas, através dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas): <TABLE BORDER=1> <TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR> <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR> <TR><TH ROWSPAN=3>3 linhas</th><td>uma linha</td></tr> <TR><TD>duas linhas</td></tr> <TR><TD>tres linhas</td></tr> </TABLE> Colunas 1 e 2 linha1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 uma linha 3 linhas duas linhas tres linhas Neste exemplo, vemos que o cabeçalho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3). 28
29 Tabelas sem borda As páginas deste tutorial foram construídas com tabelas sem borda. Para tanto, foi empregada a seguinte declaração: <TABLE BORDER="0">... </TABLE> Dica: Pior que os acentos... A formatação de tabelas é complicada, e o texto fonte chega a ser quase ininteligível quando montamos tabelas complexas e fazemos uso de seus diversos atributos. A melhor opção, sem dúvida, é usar os editores WYSIWYG. Alguns editores de modo texto têm uma interface gráfica que ajuda na criação de tabelas, mas a edição de tabelas já existentes precisa ser feita à mão. Extensões de Tabelas Diversas extensões de tabelas possibilitam a apresentação de efeitos muito bons nas páginas. Cor de fundo <TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9"> janeiro fevereiro março abril maio junho <TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10> <TR><TD BGCOLOR="#E1FFD9">janeiro</TD><TD>fevereiro</TD> <TD BGCOLOR="#E1FFD9">março</TD></TR> <TR><TD>abril</TD><TD BGCOLOR="#E1FFD9">maio</TD><TD>junho</TD></TR> </TABLE> janeiro fevereiro março abril maio junho 29
30 Cor de borda <TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9" BORDERCOLOR="#00FF00"> janeiro fevereiro março abril maio junho <TABLE BORDER="1" CELLSPACING="0" CELLPADDING=10 BORDERCOLOR="#00FF00"> <TR> <TD bgcolor="#e1ffd9">janeiro</td><td>fevereiro</td> <TD bgcolor="#e1ffd9">março</td> </TR> <TR> <TD>abril</TD><TD bgcolor="#e1ffd9">maio</td><td>junho</td> </TR> </TABLE> janeiro fevereiro març o abril maio junho 21 Frames Os frames são divisões da tela do browser em diversas telas (ou quadros ). Com isso, torna-se possível apresentar mais de uma página por vez: por exemplo, um índice principal em uma parte pequena da tela, e os textos relacionados ao índice em outra parte (menus). É muito fácil colocar frames em páginas, porém, nem todos os usuários gostam deles, pois nem sempre a navegação é fácil, além de problemas para a impressão e a marcação dos documentos interiores aos frames nos bookmarks. A alternativa natural para os frames são as tabelas. 30
31 Uma página com frames tem um texto fonte semelhante a: <HTML> <HEAD><TITLE>Assunto X</TITLE></HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC="indice1.html"> <FRAME SRC="apresenta.html" NAME="principal"> <NOFRAME> <BODY> <H2>Bem-vindo à página do assunto X!</h2> <P> Blá blá blá blá blá blá blá blá blá blá </BODY> </NOFRAME> </FRAMESET> </HTML> A parte FRAMESET define a divisão da página em quadros. Neste exemplo, a página será dividida em duas colunas, sendo a primeira com 20% do tamanho da tela, e a segunda coluna com os restantes 80% da tela. Dentro da formatação de FRAMESET, temos os FRAME SRC, que são referências às páginas que serão mostradas nos frames definidos Assim, no código acima vemos que a página indice1.html será mostrada na primeira coluna (que ocupará 20% da tela), e a página apresenta.html será mostrada na segunda (ocupando 80% da tela). A formatação de frames inclui também uma parte NOFRAME, que é mostrada normalmente pelos browsers que não suportam sua apresentação. Material completo com exemplos e detalhes sobre HTML que serviu de fonte para elaboração desta apostila em: Autora: Maria Alice Soares de Castro 31
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
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
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
A estrutura de um documento HTML apresenta os seguintes componentes:
A estrutura de um documento HTML apresenta os seguintes componentes: Titulo do Documento texto, imagem, links,... As etiquetas HTML não são sensíveis
Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho
Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Fevereiro de 2012 Sumário Página 1 INTRODUÇÃO À LINGUAGEM HTML... 3 2 EDIÇÃO DE DOCUMENTOS
Apostila de Introdução à Linguagem HTML. Profa. Flávia Pereira de Carvalho
Apostila de Introdução à Linguagem HTML Profa. Flávia Pereira de Carvalho Outubro de 2004 Sumário Página Introdução à Linguagem HTML... 3 Edição de Documentos HTML... 4 Publicação de Documentos na Internet...
Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB -
Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Taquara - RS Sumário Página 1 INTRODUÇÃO À LINGUAGEM HTML... 3 2 EDIÇÃO DE 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
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
Profa. Reane Franco Goulart
Profa. Reane Franco Goulart A linguagem HTML (Hypertext Markup Language) tem o objetivo de formatar textos através de marcações especiais denominadas tags, para que possam ser exibidos de forma conveniente
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
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
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
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:
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
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
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
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
OS LINKS Os termos que aparecem em destaque na página, geralmente sublinhados e em cores diferentes, são textos que indicam uma ligação hipertexto.
Apostila de web estático Prof. Eduardo 2 CAPÍTULO PADRÕES DE FUNDO Uma Home page pode conter uma textura como padrão de fundo, um arquivo no formato gif ou jpg, ou utilizar as cores do padrão RGB. A notação
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;
Passa a passo para construir uma página pessoal - Parte 1
Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):
> 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
CONCEITOS INICIAIS. Agenda A diferença entre páginas Web, Home Page e apresentação Web;
CONCEITOS INICIAIS Agenda A diferença entre páginas Web, Home Page e apresentação Web; O que é necessário para se criar páginas para a Web; Navegadores; O que é site, Host, Provedor e Servidor Web; Protocolos.
mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos
Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.
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
Coleção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Introdução Nesta quinta edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos o estudo do Windows Mail, um cliente
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
4.14 - Imagens: <img src="..."> src <img src="tecnologia.jpg"> único atributo que não pode ser omitido neste TAG Nota: img
4.14 - Imagens: O TAG utilizado para a inclusão de imagens em páginas html é o: O atributo src especifica o local onde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso
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
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).
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
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
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),
Internet. Prof. Ricardo Argenton Ramos. www.univasf.ed.br/~ricardo.aramos
Internet Prof. Ricardo Argenton Ramos www.univasf.ed.br/~ricardo.aramos O que é Internet? A Internet é uma rede capaz de interligar todos os computadores do mundo. O que faz a Internet tão poderosa assim
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
4.14 - Imagens: <IMG SRC="..."> SRC <IMG SRC="tecnologia.jpg"> único atributo que não pode ser omitido neste tag Nota: img
4.14 - Imagens: O tag utilizado para a inclusão de imagens em páginas html é o: O atributo SRC especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso
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
Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o código HTML para isso é :
TABELAS As tabelas são muito importantes para o designer de uma home-page. Com elas podese fazer alinhamentos que dificilmente seriam possíveis com simples comandos. A funcionalidade de uma tabela faz
Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB -
Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Taquara - RS Sumário Apostila de HTML - Fonte: http://www.icmc.usp.br/ensino/material/html/intro.html
1 2 3 W O R K S H O P 4 5 6 W O R K S H O P 7 W O R K S H O P 8 9 10 Instruções gerais para a realização das Propostas de Actividades Para conhecer em pormenor o INTERFACE DO FRONTPAGE clique aqui 11 CONSTRUÇÃO
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
Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados
Tutorial Plone 4 Manutenção de Sites Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Sumário Introdução 1 Como fazer a autenticação do usuário 1.1 Através do
CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1
ESCOLA ESTADUAL PROF. JOSÉ BARROSO TOSTES PROFESSOR: ESP. ANDREW RODRIGUES CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 1 APOSTILA DE INTRODUÇÃO À LINGUAGEM
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
INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES INTRODUÇÃO. Professor Carlos Muniz
INTRODUCAO DESENVOLVIMENTO E DESIGN DE INTRODUÇÃO INTRODUÇÃO A linguagem HTML (Hipertext Markup Language Linguagem de Marcação de Hipertexto) é usada para divulgar páginas na World Wide Web, o serviço
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
15. OLHA QUEM ESTÁ NA WEB!
7 a e 8 a SÉRIES / ENSINO MÉDIO 15. OLHA QUEM ESTÁ NA WEB! Sua home page para publicar na Internet SOFTWARES NECESSÁRIOS: MICROSOFT WORD 2000 MICROSOFT PUBLISHER 2000 SOFTWARE OPCIONAL: INTERNET EXPLORER
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).
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
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
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
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
Microsoft Office FrontPage 2003
Instituto Politécnico de Tomar Escola Superior de Gestão Área Interdepartamental de Tecnologias de Informação e Comunicação Microsoft Office FrontPage 2003 1 Microsoft Office FrontPage 2003 O Microsoft
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
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
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
Word 1 - Introdução 1.1 - Principais recursos do word 1.2 - A janela de documento 1.3 - Tela principal
Word 1 - Introdução O Word para Windows ou NT, é um processador de textos cuja finalidade é a de nos ajudar a trabalhar de maneira mais eficiente tanto na elaboração de documentos simples, quanto naqueles
Portal do Projeto Tempo de Ser
Sumário Portal do Projeto Tempo de Ser O que é um Wiki?...2 Documentos...2 Localizando documentos...3 Links...3 Criando um Documento...4 Criando um link...4 Editando um Documento...5 Sintaxe Básica...5
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
Tutorial Módulo 1: Introdução e primeiros passos Por Daniel Chicayban (dan@trendnet.com.br)
Tutorial Módulo 1: Introdução e primeiros passos Por Daniel Chicayban (dan@trendnet.com.br) Introdução A HyperText Markup Language e a Web No núcleo de toda página da Web, encontramos a HyperText Markup
Introdução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira
Introdução Introdução a HTML Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA mario@deinf.ufma.br Página Web: É um documento composto de texto e códigos especiais, chamados tags, que especificam
Coleção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos do webmail
Programação para a Web - I. José Humberto da Silva Soares
Programação para a Web - I José Humberto da Silva Soares Fundamentos de Internet Rede Mundial de Computadores; Fornece serviços, arquivos e informações; Os computadores que têm os recursos são chamados
Introdução ao HTML 5 e Implementação de Documentos
Linguagem de Programação para Web Introdução ao HTML 5 e Implementação de Documentos Prof. Mauro Lopes 1-31 20 Objetivo Iremos aqui apresentar a estrutura básica de um documento HTML e iremos também apresentar
HTML HTML. Criação de Páginas WEB. Caracteres especiais < < > > Sessão 10
HTML Sessão 10 HTML HTML permite que caracteres especiais sejam representados por sequências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caractere
ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia.zip novembro 1996 Tutorial - Autoria em World Wide Web
RNP REDE NACIONAL DE PESQUISA Centro Regional de Brasília CR/DF ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia.zip novembro 1996 Tutorial - Autoria em World Wide Web Parte V - Hypertext
Claudio Damasceno. Avançar
Claudio Damasceno Conteúdo Alinhamento Âncoras, Links Tabelas Formatação Próximo Capítulo HTML prof.claudiodamasceno@hotmail.com 2 Recapitulando - Estrutura básica título DA PÁGINA
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;
Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5.
Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5. Ele considera que você já tem o Joomla! instalado no seu computador. Caso você queira utilizá lo em um servidor na web,
Instrução de Trabalho Base de Conhecimento
Aprovado por Comitê da Qualidade Analisado criticamente por Dono do processo 1. OBJETIVOS Esta instrução de trabalho tem como objetivo orientar os colaboradores da SINFO, de como a será mantida e acessada.
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
02 - Usando o SiteMaster - Informações importantes
01 - Apresentação do SiteMaster - News Edition O SiteMaster foi desenvolvido para ser um sistema simples de gerenciamento de notícias, instalado em seu próprio computador e com configuração simplificada,
CAPÍTULO 06. AG8 Informática. Este capítulo abrangerá :
3ª PARTE CAPÍTULO 06 Este capítulo abrangerá : 1. Tags de formatação de texto lógicas e físicas 2. Texto pré-formatado 3. Endereços, citações e comentários 38 TAGS DE FORMATAÇÃO Assim como em um editor
ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia5.zip 1996 Tutorial - Autoria em World Wide Web
RNP REDE NACIONAL DE PESQUISA Centro Regional de Brasília CR/DF ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia5.zip janeiro 1996 Tutorial - Autoria em World Wide Web Parte IV - Hypertext
HTML. Sessão 1 HTML. Cliente: browser (IE, por exemplo) Servidor: IIS (Internet Information Server), Apache, WebSphere,...
Sessão 1 A INTERNET Baseada no modelo Cliente-Servidor Cliente: programa que pede informação Servidor: programa que envia a informação No caso da WWW: Cliente: browser (IE, por exemplo) Servidor: IIS (Internet
CURSO CONSTRUÇÃO DE WEBSITES
CURSO CONSTRUÇÃO DE WEBSITES Aline Michelle Ellen Oliveira Maria do Carmo Alves da Silva Patrícia Virgínia de Souza Magalhães Sueli Gonçalves da Silva APOSTILA DE INTRODUÇÃO À LINGUAGEM HTML HTML significa
Web Design Aula 02: HTML
Web Design Aula 02: HTML Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Roteiro Introdução Conceitos HTML Primeira Página Identação Incluindo o título Salvando a página Vizualizando
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,
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
Adapti - Technology Solutions www.adapti.net Leonor cardoso nº 331 Fone : (041) 8844-7805 81240-380 Curitiba - PR MANUAL DO USUÁRIO
MANUAL DO USUÁRIO 1 Índice Administração de Documentos...2 Lista de documentos criados...3 Criando um novo documento...3 Barra de ferramentas do editor...4 Editando um documento...7 Administrando suas
CAPÍTULO 2. Este capítulo tratará :
1ª PARTE CAPÍTULO 2 Este capítulo tratará : 1. O que é necessário para se criar páginas para a Web. 2. A diferença entre páginas Web, Home Page e apresentação Web 3. Navegadores 4. O que é site, Host,
Programação HTML Construção de Páginas para WEB 47
Programação HTML Construção de Páginas para WEB 47 INICIANDO EXEMPLO3.HTML Crie um novo arquivo html chamado exemplo3.html dentro da pasta exemplos. Após os exercícios e trabalhos anteriores, nossa pasta
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
Manual de Gerenciamento de Conteúdo
Manual de Gerenciamento de Conteúdo 1 Sumário 1) O que é um Gerenciador de Conteúdo...3 2) Como o Site está Estruturado...3 3) Como Gerenciar o Conteúdo do Site...5 3.1) Adicionar Itens no Menu de Navegação...6
Manual do Publicador. Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web
Manual do Publicador Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web Sumário Painel de Administração... 3 1 - Inserção de post... 5 2 Publicação de post com notícia na área headline (galeria de
COMO COLABORAR NO WIKI DO MOODLE 1. Orientações para produção escolar colaborativa no wiki do Moodle:
COMO COLABORAR NO WIKI DO MOODLE 1 Ilse Abegg e Fábio da Purificação de Bastos e-mail: iabegg@mail.ufsm.br O wiki no Moodle é uma ferramenta de atividade que visa produção escolar colaborativa. Isso significa
Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo.
Manual de Instruções ECO Editor de Conteúdo Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo. O ECO é um sistema amigável e intui?vo, mas abaixo você pode?rar eventuais dúvidas e aproveitar
A Internet 7 Criação de Páginas Web
7 - Criação de Páginas Web A Internet A Internet Empresas, instituições e pessoas individuais estão cada vez mais interessadas não só em aceder ao imenso manancial de informação disponibilizado pela Internet
Coleção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Introdução Nesta sexta e penúltima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes
Microsoft Word INTRODUÇÃO
INTRODUÇÃO O Word é uma ferramenta utilizada para o processamento e editoração eletrônica de textos. O processamento de textos consiste na possibilidade de executar e criar efeitos sobre um texto qualquer,
JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.
JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um
Web Design Aula 01. No Caderno Responda as Questões abaixo
Aula 01 1 O que é Web Design? 2 Qual a diferença entre Web Design e Web Designer? 3 O que são Sites ou Páginas? Cite 3 tipos de Sites. 4 O que é um Navegador? 5 O que são Servidores e o que são Protocolos?
APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo)
APOSTILA DE EXEMPLO (Esta é só uma reprodução parcial do conteúdo) 1 Índice Aula 1 - Área de trabalho e personalizando o sistema... 3 A área de trabalho... 3 Partes da área de trabalho.... 4 O Menu Iniciar:...
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
HTML Página 1. Índice
PARTE - 1 HTML Página 1 Índice HTML A HISTÓRIA... 2 O COMEÇO E A INTEROPERABILIADE... 3 Primeira Página... 4 Entendendo seu código... 5 Abrindo o código fonte da sua página... 6 Comentários na página...
Manual do Painel Administrativo
Manual do Painel Administrativo versão 1.0 Autores César A Miggiolaro Marcos J Lazarin Índice Índice... 2 Figuras... 3 Inicio... 5 Funcionalidades... 7 Analytics... 9 Cidades... 9 Conteúdo... 10 Referência...
Construção Páginas de Internet
Construção Páginas de Internet Definir um Site no Frontpage Objectivos da sessão: No final da sessão os formandos deverão ser capazes de: Saber o que são os metadados do Frontpage; Distinguir entre Sites