HTML & CSS INDICE...2

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

Download "HTML & CSS INDICE...2"

Transcrição

1

2 INDICE INDICE...2 HTML BÁSICO...5 COMO SE CRIA UM DOCUMENTO HTML...5 TAGS OU COMANDOS HTML...5 ESTRUTURA BÁSICA...6 Criando o primeiro documento HTML...6 Comentários...6 Caracteres especiais...6 PARÁGRAFOS E QUEBRAS DE LINHA...7 O COMANDO <P>...7 Alinhando parágrafos...7 O COMANDO <BR>...7 O COMANDO <HR>...7 Alterando o formato de linha de separação...7 USANDO IMAGENS COMO LINHAS SEPARADORAS...7 DIV...7 BLOCKQUOTE...8 ESTILOS DE TEXTO E FONTE...8 APLICANDO CORES E TAMANHOS NO TEXTO...8 ALTERANDO O TAMANHO DA FONTE...8 Size...9 Face...9 Color...9 CABEÇALHOS...10 ALINHANDO CABEÇALHOS...10 LISTAS...10 LISTAS ORDENADAS...10 LISTAS NÃO ORDENADAS...10 LISTA DE DEFINIÇÃO...10 IMAGENS...11 O COMANDO IMG...11 URLS E LINKS...13 URL...13 Criando um Link com Arquivos Locais...13 Usando uma Imagem como Hiperlink...13 Vinculando Arquivos de outros diretórios...13 CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA...13 Criando uma Âncora...14 ENVIANDO DIRETAMENTE DA PÁGINA HTML...14 DEFININDO DESTINOS...14 TABELAS...14 ELEMENTOS BÁSICOS DE TABELAS...14 PARÂMETROS...15 Parâmetros do elemento <TABLE>...15 Parâmetros do elemento <TR>...15 Parâmetros dos Elementos <TD> e <TH>...16 FRAMES Seu site de Apostilas e Tutoriais 2

3 Como funcionam os frames...17 O Comando Document...17 O Comando FRAMESET...17 Cols=tamanho...17 ROWS=tamanho...17 Combinando ROWS e COLS...18 O ATRIBUTO <FRAMESPACING=VALOR>...18 O ATRIBUTO <FRAMEBORDER=1/0>...18 O COMANDO <FRAME SRC>...18 Ajustando as margens internas do Frame...19 Barras de Rolagem e Redimensionamento dos Frames...19 INTERLIGAÇÃO DE FRAMES...19 Criando a Estrutura dos Frames...19 Criando o conteúdo do Menu...19 IFRAME...20 META...21 INFORMAÇÕES ESPECÍFICAS...21 VARIAÇÕES DO COMANDO META...21 MULTIMIDEA...21 CONSIDERAÇÃO NO USO DE MULTIMIDEA...21 INSERINDO UM VÍDEO...21 ATRIBUTOS UTILIZADOS EM VÍDEOS...22 USANDO O COMANDO EMBED PARA EXIBIR VÍDEO...23 O comando NOEMBED...23 MARQUEE...24 Combinando a utilização de vários Marquees...25 SOM...25 Inserindo Áudio...26 Inserindo Áudio através de Hiperlinks...26 INSERINDO MÚSICA DE FUNDO...26 O comando BGSOUND (Internet Explorer)...26 JAVA...27 ELEMENTO HTML PARA APPLETS JAVA...27 FOLHAS DE ESTILO...27 VERSÕES DA CSS...27 CSS CSS Positioning (CSS-P)...28 CSS CSS REGRAS DA CSS...28 INCLUINDO CSS NO DOCUMENTO...28 Incluindo a CSS em uma página WEB...29 Incluindo a CSS em um site da WEB...29 PRINCIPAIS ATRIBUTOS DE UMA FOLHA DE ESTILO...30 DEFININDO CLASSES...31 DEFININDO IDS...31 LAYERS...31 DEFININDO TAGS DENTRO DO CONTEXTO...31 CRIANDO UMA DEFINIÇÃO!IMPORTANT...32 DEFININDO A CSS PARA IMPRESSÃO...32 DEFININDO QUBRAS DE PÁGINA PARA A IMPRESSÃO...33 FAZENDO O DOWNLOADS DE FONTES...33 CONTROLES DE TEXTO...33 Ajustando o Kerning...33 Ajustando o espaçamento entre as palavras...34 Ajustando as Entrelinhas...34 DEFININDO SEGUNDO PLANO...34 BORDAS Seu site de Apostilas e Tutoriais 3

4 ENVOLVENDO UM ELEMENTO COM TEXTO...36 POSICIONAMENTOS...36 Posicionamento Estático...36 Posicionamento Relativo...36 Posicionamento Absoluto...36 Posicionamento 3D...36 DEFININDO A VISIBILIDADE DE UM ELEMENTO...37 DEFININDO A ÁREA VISIVEL DE UM ELEMENTO (RECORTE)...37 Definindo o lugar do Overflow...37 BARRAS DE ROLAGEM COLORIDAS...38 CUIDADOS NA CONSTRUÇÃO DE UM SITE...39 TRACE METAS...39 FAÇA UM ESBOÇO...39 DIVIDA O SEU SITE...39 ACESSO DIRETO A INFORMAÇÃO...39 EVITE SITES TIPO CARNAVAL...39 NÃO SE PRENDA A PLATAFORMAS...39 DIVULGUE O SEU SITE E OBSERVE OS ACESSOS...39 GLOSSÁRIO Seu site de Apostilas e Tutoriais 4

5 HTML BÁSICO A Internet é, sem sombra de dúvida, o lugar mais quente da atualidade, onde os internautas passam a maior parte do tempo, e onde proliferam home pages de universidades, empresas, tendências, jornais, lojas e tudo o mais que se possa imaginar. Até pouco tempo, atingir o grande público era privilégio de poucos. Com a WWW, tudo fica diferente; coloque uma home page no ar, mande um para algumas pessoas, e saiba que, se o conteúdo for bom, a sua página será visitada e divulgada para outras pessoas. Para colocar uma página no ar, duas coisas: fazer a Home Page e conseguir um espaço em disco em uma máquina conectada permanentemente na Internet. Agora você conhecerá o básico da linguagem HTML, utilizada para se construírem páginas Web. Para fazer Home Pages, você terá que aprender pelo menos um pouco de HTML (Hipertext Markup Language) que pode ser traduzido como Linguagem de Hipertexto baseada em Marcas. Apesar da palavra linguagem, que leva a associação com linguagens de programação, ao final deste curso você vai perceber que gerar documentos HTML é bastante fácil e parecido com formatação de textos. Para que qualquer computador pudesse entender os documentos HTML, sem as complicações que trazem os caracteres de controles e coisa do tipo, foi definido que estes documentos deveriam ser gerados no formato mais simples possível, o bom e velho txt. Desta forma, documentos HTML podem ser gerados por qualquer editor de textos, desde que gravados no formato texto e com extensão.htm ou.html. COMO SE CRIA UM DOCUMENTO HTML Uma página Web é composta de textos e comandos especiais (tags). Assim como qualquer linguagem, o programador deve escrever o código-fonte seguindo as regras da linguagem. Esse código-fonte é posteriormente interpretado pelo browser, que se encarregará de executar os comandos (tags) do código para formatar e acessar recursos da Web. O código fonte pode ser escrito usando-se o mais simples dos editores de texto. Até o programa Bloco de Notas pode ser usado para esta tarefa. Mas existem editores WYSIWYG (What you see is what you get, ou o que você vê é o que realmente obtém) como exemplo podemos citar o Microsoft FrontPage, DreamWeaver. Existem ainda editores não WYSIWIG, onde você tem que construir o código, mas ele completa muitos comando, como exemplo podemos citar o Arachnophilia e o AceExpert, e na própria Internet existem vários destes editores gratuitos. TAGS OU COMANDOS HTML As TAGS normalmente são especificadas em pares, delimitando um texto que sofrerá algum tipo de formatação. As TAGS são identificadas pelo sinais < > ou </ >. Entre os sinais <> são especificados os comandos propriamente ditos. No caso de tags que necessitam envolver um texto, sua finalização deve ser feita usando-se a barra de divisão /, indicando que a TAG está finalizando a marcação de texto. Os principais elementos de página HTML são, títulos, textos, parágrafos, imagens e links, responsáveis pela chamada de outras páginas para a tela: 1. Título: É o texto que aparece na barra de título do browser. 2. Imagem: São figuras, desenhos e fotos usados para ilustrar a página. 3. Texto: É a informação mais comum dentro de uma página. Pode ser formatado através de comandos. 4. Link: É um trecho que aparece destacado do restante do texto, normalmente sublinhado e com outra cor. Ao clicar no Link, o browser acessa outra região da página atual ou uma página localizada em qualquer lugar na Internet. Uma figura também pode ser usada como link, ou seja, clicando na figura saltamos para outro local. Seu site de Apostilas e Tutoriais 5

6 5. Cabeçalho: São linhas de texto com tamanhos especiais. Existem seis tamanhos de cabeçalhos. Seu site de Apostilas e Tutoriais 6

7 ESTRUTURA BÁSICA A estrutura básica de um documento HTML é a seguinte: <HTML> <HEAD> <TITLE> Título do Documento</TITLE> </HEAD> <BODY> Aqui deverá ser digitado e criado a maioria dos itens que irão aparecer em sua Home Page </BODY> </HTML> Vamos ver um pouco sobre os elementos básicos do HTML: <HTML></HTML>: Indicam respectivamente o início e o fim do documento. Todo o resto deve estar entre estas marcas. <HEAD></HEAD>: Delimitam a seção de cabeçalho do documento. Trata-se da primeira seção do documento. <TITLE></TITLE>: Indicam o título do documento, que será apresentado na barra superior do browser. Estas marcas devem constar da seção de cabeçalho. <BODY></BODY>: Corpo do documento. Entre estas marcas estará o conteúdo a ser apresentado, textos, cores, imagens, etc. Este elemento pode conter cinco parâmetros opcionais: BACKGROUND: configura especificar uma imagem como fundo da página. EX. <BODY BACKGROUND= fundo.gif > configura uma página com a imagem fundo.gif como fundo. BGCOLOR: Configura a cor de fundo da página. EX: <BODY BGCOLOR= White > configura uma página com fundo branco (padrão). TEXT: configura a cor padrão do texto da página. EX: <BODY TEXT= Black > configura uma página com texto em cor preta. (padrão). LINK, ALINK, VLINK: configura as cores dos links da página. ALINK configura a cor do link ativo, isto é quando é clicado, e VLINK configura a cor de um link já visitado. EX: <BODY LINK= Blue VLINK= Purple ALINK= Red > configura uma página com links azuis, links ativos vermelhos e links visitados roxos. Esta estrutura inicial é simples, no entanto existem detalhes que devem ser respeitados: Todas as marcas apresentadas são do tipo início-fim, ou seja, funcionam em pares. Em cada documento HTML só deve haver uma marca de cada tipo acima. Existe uma ordem seqüencial lógica entre as marcas. Estes detalhes devem ser respeitados, senão o browser não conseguirá apresentar o documento. Como HTML não é uma linguagem de programação, você não será avisado de erros que tenha cometido na edição do seu documento. Criando o primeiro documento HTML <HTML> <HEAD> <TITLE>Este é o meu primeiro documento em HTML</TITLE> </HEAD> <BODY BGCOLOR= Red TEXT= White > Agora no corpo do texto vou digitar o meu primeiro texto em Html, no momento não usarei nenhuma formatação especial aqui dentro. </BODY> </HTML> Comentários Podemos também acrescentar comentários ao nosso código HTML, estes comentários não aparecem para no navegado e somente no código, são representados pela seguinte TAG <!- - inicia o comentário //- - >, finaliza o comentário. São utilizados para ocultar scripts dentro do código Html, pois caso o script não possa ser processado o mesmo será ignorado pelo navegador. Seu site de Apostilas e Tutoriais 7

8 Caracteres especiais Existem caracteres que não podem ser obtidos através de teclado. Eles podem ser inseridos em sua página através da especificação de um código especial que o browser interpreta e substitui por um caractere específico. Esses códigos podem ser obtidos utilizando-se uma nomenclatura definida pela norma ISO. Alguns dos símbolos mais utilizados no HTML é o que corresponde ao espaço do teclado, já que na HTML ele considera apenas um espaço. Para uma tabela mais completa visite o link PARÁGRAFOS E QUEBRAS DE LINHA Ao contrário dos editores de texto comum, nos quais você insere uma quebra ou avanço de linha toda vez que pressiona a tecla ENTER, em um programa HTML é necessário colocar um comando específico para que o browser entenda que você deseja mudar de linha e iniciar uma nova linha ou começar um novo parágrafo. Existem dois comandos para criar quebras de linha e novos parágrafos. São os comandos <P> e <BR> O COMANDO <P> Para forçar um novo parágrafo, ou seja, avançar uma linha em branco e iniciar o texto na segunda linha após o final do parágrafo anterior deve ser usado o comando <P>. Alinhando parágrafos O Comando <P> inicia um novo parágrafo onde o texto é automaticamente alinhado pela margem esquerda da tela. Através do parâmetro ALIGN, pode-se mudar o alinhamento de forma que o texto do parágrafo inteiro fique centralizado ou alinhado à direita. Nesse caso, deve-se usar um par de comandos <P> envolvendo o parágrafo. ALIGN=CENTER ALIGN=RIGHT ALIGN=JUSTIFY ALIGN=LEFT Centraliza o texto. Alinha pela margem direita Alinha pelas duas margens Alinha pela margem esquerda (padrão) O COMANDO <BR> O comando <P> insere uma linha em branco no seu local ou na linha seguinte à qual ele foi inserido, caso esteja no meio de uma linha de texto e não em seu final. O comando <BR> tem como função avançar para a linha imediatamente após àquela em que ele se encontra, sem, contudo, deixar uma linha em branco. O COMANDO <HR> O comando <HR> tem como finalidade inserir uma linha divisória na posição em que foi especificado. Seu uso é recomendado para criar uma divisão na página. Alterando o formato de linha de separação As linhas criadas pelo comando <HR> podem Ter o seu tamanho alterado pelos parâmetros SIZE e WIDTH. O parâmetro SIZE altera a espessura (altura) da linha, deixando-a mais grossa em função do valor especificado. Esse valor é expresso em pixels. A largura ou comprimento da linha é alterada pelo parâmetro WIDTH e pode ser expresso em pixels, sendo que, nesse caso, o tamanho da linha é fixo ou utiliza uma porcentagem relativa à largura da janela. Assim, seu tamanho varia em função da largura da janela. Veja o código abaixo: USANDO IMAGENS COMO LINHAS SEPARADORAS Em vez de usar o comando <HR> como separador, podemos usar uma imagem com o comando <IMG>. Assim como o comando HR, podemos usar os parâmetros WIDTH e HEIGHT para alterar o tamanho da imagem. DIV Seu site de Apostilas e Tutoriais 8

9 A Tag <DIV></DIV> envolve uma área do texto ou divisão que pode receber parâmetros específicos de alinhamento, como é o caso de ALIGN, para alinhar o texto. Podemos envolver vários parágrafos com o elemento DIV BLOCKQUOTE O comando Blockquote permite dar recuos de parágrafos aos parágrafos, e pode ser cumulativo Vamos a um exemplo: <html> <head> <title>formatação de Parágrafos</title> </head> <body> <P align="center">texto centralizado</p> <P align="justify">aqui temos um texto justificado, aqui temos um texto justificado, Aqui temos um texto justificado, <BR> <div align="center">aqui centralizamos um texto com o elemento DIV</div> <div align="justify">começamos justificado<p align="center">centralizei</p> continuamos justificado</div> <hr align="center"> <blockquote>recuando o Texto</blockquote> <blockquote><blockquote>recuando o Texto 2 vezes</blockquote></blockquote> <HR color="red" size=10 width=75%> </body> </html> ESTILOS DE TEXTO E FONTE Assim como no editor de textos, você pode criar uma série de efeitos no texto, alterando a forma ou o tipo da fonte. Todos os comandos que alteram o estilo do texto são do tipo contêiner ou liga desliga, ou seja, precisam ser especificados em pares, marcando o início e fim do texto que sofrerá a formatação. Os principais comandos de estilo de texto são: Comando Sintaxe Função Negrito <B>Texto</B> Aplica o estilo Negrito Itálico <I>Texto</I> Aplica o estilo Itálico Sublinhado <U>Texto</U> Aplica o estilo sublinhado(não funciona em alguns Browsers Strong <Strong>Texto</Strong> Similar ao Negrito Typerwriter <TT>Texto</TT> Deixa o texto com espaçamento regular Big <BIG>Texto</BIG> Aumenta a fonte e aplica negrito Small <SMALL>Texto</SMALL> Reduz e altera a fonte Sobrescrito <SUP>Texto</SUP> Eleva o texto e diminui seu corpo Subscrito <SUB>Texto</SUB> Rebaixa o texto e diminui seu corpo Pulsante <BLINK>Texto</BLINK> Faz com que o texto pisque (Não funciona no IE 4. APLICANDO CORES E TAMANHOS NO TEXTO Seu site de Apostilas e Tutoriais 9

10 ALTERANDO O TAMANHO DA FONTE Um dos recursos de tratamento do texto mais interessantes da linguagem HTML é a possibilidade de alterar o tamanho, a cor e o tipo da fonte do texto utilizado. O comando responsável por isso é o comando <FONT>, que é do tipo liga desliga. Size O parâmetro size especifica o tamanho da fonte utilizada. Os valores permitidos vão de 1, o menor até 7, o maior. O padrão é 3. Se for especificado um número antecedido pelo sinal de adição ou de subtração, o tamanho da fonte atual será aumentado ou diminuído nesse valor. Por exemplo, se a fonte atual é 3 e for especificado <FONT SIZE=+2> o texto será exibido no tamanho 5. Se o valor for especificado sem sinal, a fonte será exibida no tamanho especificado. Face Esse parâmetro permite que seja escolhida uma fonte diferente para o texto. Podemos especificar várias fontes, de maneira que, se o sistema não possuir a primeira opção, a segunda é carregada. Se não for encontrada nenhuma das fontes especificadas, o texto é exibido na fonte padrão. Color Esse parâmetro especifica a cor do texto. Seu valor pode ser especificado no formato hexadecimal, RGB ou através de um nome predefinido de cores como mostra a tabela abaixo: Cor Código Cor Código Aqua #70DB93 Blue #0000FF Black # Cyan #00FFFF Fuchsia #FF00FF Gray #C0C0C0 Green #00FF00 Lime #32CD32 Brown # Navy #23238E Olive # Red #FF0000 Silver #E6E8FA Teal # White #FFFFFF Yellow #FFFF00 Não exagere na quantidade cores e tamanho das letras do texto ou a sua página parecerá uma mensagem enviada por código. Veja o exemplo abaixo: As figuras acima mostram o código anterior sendo visualizado no IE e o Netscape, observem que no IE o comando BLINK não é aplicado. <HTML> <HEAD><TITLE>Aplicando estilos de texto</title> </HEAD> <BODY> <font face="arial" size="4" color="red">este texto está em<b>negrito</b><br> Este texto está em <I>Itálico</I><BR> Este texto está em <U>Sublinhado</U><BR> Este texto está em<b><i> Negrito e Itálico</B></I><P> Este texto recebeu o estilo<strong> chamado Strong que é parecido com </STRONG>negrito<BR> Este texto recebeu o estilo<tt>typerwriter</tt>.<hr> Este texto recebeu o formato de fonte <BIG>big</BIG> que cria letras grandes.<br> Este texto recebeu o formato de fonte <SMALL>Small</SMALL> que cria letras pequenas. <BR> Este é um exemplo de texto <SUP>Sobrescrito</SUP> pelo comando SUP.<BR> Este é um exemplo de texto onde foi usado o efeito <SUB>Subscrito</SUB> do comando SUB.<P> Seu site de Apostilas e Tutoriais 10

11 Para chamar a <BLINK>atenção</BLINK> use o comando BLINK.</font> </BODY> </HTML> CABEÇALHOS Outra forma muito usada para mudar o tamanho da letra e aplicar um efeitos em textos é utilizando cabeçalhos. A linguagem HTML possui seis comandos de cabeçalho de <H1> até <H6>. Além do tamanho diferenciado, o comando cabeçalho insere uma linha em branco antes e depois da linha que contém o comando. Eles são perfeitos para criar títulos e iniciar seções dentro de uma página. O comando <H1> possui o maior tamanho enquanto que <H6> possui o menor tamanho de fonte. ALINHANDO CABEÇALHOS Como padrão um cabeçalho gerado pelo comando <Hn> é sempre posicionado no lado esquerdo da linha. Usando o parâmetro ALIGN pode-se centralizar ou ajustar o cabeçalho à direita da linha. Veja o código: <HTML> <HEAD> <TITLE>Alinhando Cabeçalhos</TITLE> </HEAD> <BODY> <H2> Cabeçalho sem alinhamento especial</h2> <HR> <H2 ALIGN=CENTER>Cabeçalho com alinhamento centralizado</h2> <HR> <H2 ALIGN=RIGHT>Cabeçalho com alinhamento à direita</h2> </BODY> </HTML> LISTAS Na linguagem HTML existem elementos específicos para a criação de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definições (DL). Um detalhe interessante é que podem ser criadas listas aninhadas, ou seja, listas dentro de listas. A seguir, veremos as características de cada umas delas. LISTAS ORDENADAS <OL TYPE=...START=...>...</OL> são os elementos delimitadores de listas ordenadas (OL Ordered Lists). A estrutura das listas ordenadas é bastante simples: entre os elementos de início e fim, os itens da lista são definidos pelos elementos <LI></LI>. Os itens são apresentados em linhas consecutivas e precedidos por uma numeração atribuída pelo paginador. O parâmetro opcional TYPE define como será o tipo de numeração de cada linha. Os tipos disponíveis são: A (A,B,...Z), a (a,b,...z), I (I,II,III, etc.), i (i,ii,iii,etc), e 1 (1,2,3,etc). Se omitido, é utilizado o tipo padrão (1,2,3, etc). O parâmetro opcional START define a partir de que elemento a numeração deve se iniciar. Ele deve receber como valor um número indicando em que posição a contagem deve se iniciar. LISTAS NÃO ORDENADAS <UL>...</UL> são os elementos delimitadores de listas sem ordenação (UL Unordered Lists). A estrutura das listas sem ordenação é a mesma das listas ordenadas, sendo que, na apresentação, os itens serão precedidos por um marcador (bullet). No caso de listas sem ordenação aninhadas (listas dentro de listas), o paginador utilizará um marcador (bullet) diferente para os itens de cada lista. Seu site de Apostilas e Tutoriais 11

12 Como já foi visto acima <LI>...</LI> é o elemento que define um item de uma lista ordenada ou sem ordenação. O seu conteúdo pode ser texto, outras listas, imagens, links,etc. LISTA DE DEFINIÇÃO <DL>...</DL> são as marcas que englobam uma lista de definições, ideais para a criação de glossários e coisas do gênero. A estrutura desta lista é diferente das outras, pois existem dois elementos o termo a ser definido (DT), e a definição propriamente dita (DD). Na apresentação cada termo aparece em uma linha, e a respectiva definição na linha seguinte, deslocada para a direita. <HTML> <HEAD> <TITLE>Listas de definição</title> </HEAD> <BODY> <H2>Listas de definição</h2> <DL> <DT>HTML</DT> <DD>Hiper Text Markup Language</DD> <DT>OL</DT> <DD>Listas ordenadas com numeração.</dd> <DT>UL</DT> <DD>Listas sem ordenação</dd> <DT>LI</DT> <DD>Elemento da Lista</DD> </DL> <H2>Listas não ordenadas combinadas<br>com uma lista de Definição</H2> <DL> <DT>Parâmetro do elemento OL</DT> <DD> <UL> <LI>TYPE</LI> <LI>START</LI> </UL> </DD> <DT>Parâmetros do elemento IMG</DT> <DD> <UL> <LI>SRC</LI> <LI>ALT</LI> <LI>BORDER</LI> <LI>WIDTH</LI> <LI>HEIGHT</LI> <LI>VSPACE</LI> <LI>HSPACE</LI> </UL> </DD> </DL> </BODY> </HTML> IMAGENS Você pode obter uma imagem através de uma cópia feita a partir de uma página da Internet, através de CDs ROMs, Scanners, etc. ou pode cria-las a partir de um programa de imagens. Seu site de Apostilas e Tutoriais 12

13 O COMANDO IMG Esse comando define a posição de uma imagem que aparece no corpo do documento. <IMG SRC= URL WIDTH=... HEIGHT= BORDER= ALT= Texto VSPACE= HSPACE= > ALIGN= BOTTOM TOP MIDLE SRC= URL É o nome da figura, se estiver no mesmo diretório do programa ou seu caminho completo. ALT= texto Exibe o texto quando o browser não encontra a imagem, ou uma legenda quando o cursor do mouse passa sobre ela mostrando o texto especificado. ALIGN= TOP MIDLE Especifica o alinhamento da imagem BOTTOM relativamente à linha de texto onde é exibida. ALIGN= LEFT RIGHT Especifica o alinhamento da imagem relativamente às bordas laterais da janela WIDTH= número número% Esse parâmetro especifica a largura de exibição da imagem independentemente do seu tamanho físico. Se a imagem for maior ou menor do que o valor especificado, ela será esticada ou comprimida para caber no espaço especificado. Se for o colocado o sinal de porcentagem, ele é relativo à largura da janela. HEIGHT= número Especifica a altura de exibição da imagem independentemente de seu tamanho físico. Se a imagem for maior ou menor do que o valor especificado. BORDER= número Especifica em pixels a largura da borda da imagem. O valor zero remove a imagem VSPACE= número HSPACE= número Determina em pixels o espaço que deve ser deixado em branco na parte de cima e na parte de baixo da imagem. Determina em pixels o espaço que deve ser deixado em branco nas laterais da imagem Com exceção do parâmetro SRC, todos os demais são opcionais. Portanto, para exibir uma imagem chamada foto.gif que esteja no mesmo diretório do programa deve ser especificado o seguinte comando: IMG SRC= foto.gif <html> <head> <title>imagens</title> </head> <body background="images/backarvore.jpg" text="yellow"> <img src="images/worldmap.jpg" width="200" height="100" alt="mapa Mundi" align="left" align="midle"> <DIV align="justify">o Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa,O Mapa,O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, O Mapa, </div><hr> Seu site de Apostilas e Tutoriais 13

14 <img src="images/batlow.gif" alt="morcego" align="right"><div align="justify">o Morcego,O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego, O Morcego,O Morcego,O Morcego,O Morcego,O Morcego,O Morcego,O Morcego,O Morcego, </div> <Br> <img src="images/hlpglobe.gif" width="20" height="20"><b>usando uma imagem como marcador</b><br> Usando imagens como linhas separadoras <br> <img src="images/arame.gif" width="120%"> </body> </html> URLS E LINKS Até agora você aprendeu como criar documentos interessantes, mas que poderiam ter sido criados em um processador de textos. O Principal atrativo da Internet é a criação de documentos com o conceito de hipertexto, ou seja, um documento que se liga a outros por meio de vínculos especiais chamados hyperlinks. Com esse conceito você pode criar documentos que façam referência a um endereço qualquer do computador ou da Web e permitam ao usuário acessar essas referências, não importando se elas estão em outra página WEB, no seu micro ou em qualquer servidor da rede. URL A Internet usa uma nomenclatura específica para indicar o endereço de um documento. Chamada de Uniform Resource Locator (Localizador Universal de Recursos) ou URL, essa nomenclatura inclui três componentes. Ela deve conter o protocolo do documento, (como por exemplo http. Gopher ou WAIS), o endereço servidor e a localização do arquivo, usando a seguinte sintaxe: Protocolo://servidor.NomeDoArquivo http: É o protocolo É o nome do servidor index.htm: É o nome do documento que será acessado. Criando um Link com Arquivos Locais Vincular um texto com uma página local é uma tarefa bastante simples. Você precisa apenas especificar o nome completo do arquivo que será chamado, utilizando o comando <A> de âncora. Veja a sintaxe básica deste comando: <A HREF=... NAME... >caracteres</a> Principais parâmetros: HREF= URL NAME= String Especifica o endereço do URL ao qual o link está associado. Pode ser usado dentro e fora do documento. Especifica o nome da seção de um documento à qual um link de hipertexto faz referência. Usando uma Imagem como Hiperlink Você pode usar uma imagem como hiperlink envolvendo-a com o comando <A></A>. Em vez de especificar um texto de hiperlink, você usa o comando <IMG> para colocar a imagem. Vinculando Arquivos de outros diretórios Seu site de Apostilas e Tutoriais 14

15 Você pode especificar o endereço de outros diretórios usando um esquema de caminhos parecido com DOS. Existe uma diferença entre esses caminhos. Na Web você deve inverter a barra de espaços, usando a barra / no lugar da barra \, para separar diretórios. CRIANDO LINKS PARA SEÇÕES DE UMA PÁGINA Para dominar o uso do hipertexto, o programador em HTML deve conhecer bem o funcionamento do comando <A> e dois de seus parâmetros da linguagem. Um é o <H HREF>, usado para criar o link em si, e o outro é o <A NAME>, que cria âncoras ou endereços de seções de um documento, permitindo seu endereçamento. Criando uma Âncora Para interligar uma página, você precisa criar uma âncora (também chamado de indicador em alguns editores de HTML) no inicio de cada seção do documento. Essa âncora recebe um nome que será mencionado pelo link que acessará. <A NAME= #nome da âncora >Texto Opcional</A> Iremos criar agora uma página Web com exemplos de links e âncoras : Neste código criamos primeiramente os links com as âncoras da página, e depois as âncoras, aproveitamos também e trabalhamos com inserção de imagens na página: ENVIANDO DIRETAMENTE DA PÁGINA HTML Você pode acionar o programa padrão de diretamente de uma página HTML usando uma variação do comando <A>, que usa a opção MAILTO no lugar da URL. <A HREF= >Tire as suas dúvidas </A> DEFININDO DESTINOS Podemos também definir destinos para os nossos links,(recurso muito utilizado em frames) através do parâmetro target:. E podem ser _self: Mesmo quadro, _top: página inteira, _blank: nova janela e _parent: quadro pai. <html> <head> <title>links</title> </head> <body> <p align="center">links</p> <p><a href="http://www.microsoft.com.br">microsoft</a> <p><a href="http://www.macromedia.com.br">macromedia</a> <p><a href="http://www.adobe.com.br" target="_blank">adobe</a> <p><a <hr> <P Align="center">Criando as Âncoras</P> <a href="#textos">textos</a> <a href="#imagens">imagens</a> <P> <a name="textos">textos</a> <p> </p><p> </p><p> </p><p> </p><p> </p><p> </p> <a name="imagens">imagens</a> <p align="center"><img border="0" src="entrar1.gif" width="150" height="50"></p> </body> </html> TABELAS Assim com as listas que nós já vimos, no HTML existem elementos específicos para a criação e formatação de tabelas. O recurso de tabelas é muito interessante e muito usado nas páginas Web. Seu site de Apostilas e Tutoriais 15

16 O conceito é o mesmo conhecido usualmente: ela tem linhas e colunas, e na interseção delas estão as células. Na linguagem HTML, você pode inserir nas células tudo o que normalmente faz parte do corpo de um documento, como textos, links, imagens, listas e até outras tabelas. ELEMENTOS BÁSICOS DE TABELAS <TABLE>...</TABLE> São as marcas que englobam a definição de uma tabela. Todas as demais marcas referentes a tabelas linhas e células somente serão consideradas se incluídas entre <TABLE>e </TABLE>. <CAPTION>...</CAPTION> Trata-se de um elemento opcional que define o título da tabela, e deve constar entre as marcas que definem a tabela, mas separado das marcas que definem linhas e colunas. Sem parâmetros, o título á apresentado acima da tabela e centralizado. <TR>...</TR> Table Row ou Linha de tabela Este é o elemento utilizado na definição de linhas de tabelas. Tabelas são definidas em linhas, sendo as linhas compostas de células. O número de linhas de uma tabela corresponde ao número de <TR></TR>. <TD>...</TD> Table Data ou Dados de Tabela Marcas que delimitam as células que compõem as linhas, e assim sendo devem estar inseridas entre as marcas de linhas. Uma célula pode conter tudo o que normalmente consta do corpo de um documento HTML Links, referências a imagens, textos, e até tabelas. O alinhamento padrão de uma célula é à esquerda horizontalmente e centralizado verticalmente, e caso o número de células varie de uma linha para outra, as linhas com menos células são completadas à direita com células em branco. <TH>...</TH> Table Header ou Cabeçalho de Tabela Elemento que define células de cabeçalho. Células de cabeçalho têm características idênticas a células de dados definidas por <TD>, a não ser pelo alinhamento horizontal, que é centralizado, e pela utilização de fonte em Negrito. PARÂMETROS Estes elementos básicos, entretanto, possuem alguns parâmetros que permitem um maior controle sobre alguns detalhes da apresentação da tabela. Parâmetros do elemento <TABLE> BORDER A apresentação padrão de uma tabela é sem bordas. A presença do parâmetro BORDER indica justamente que deve ser desenhada uma borda em torno de cada célula da tabela. Pode ser usado para indicar a espessura da borda (em pixels), com BORDER=X. Exemplo: <TABLE BORDER=2> BORDERCOLOR Permite que se coloque cores nas bordas de sua tabela e possui duas variações: bordercolorlight e bordercolordark, permitindo que se coloque duas cores de bordas em volta de sua tabela. WIDTH Especifica a largura da tabela, que pode ser definida em pixels ou em percentual referente à largura da janela. Caso não seja especificado, o próprio browser se encarrega de determinar a largura mais adequada, baseado nos textos inseridos nas células. Exemplo: <TABLE WIDTH=75%> CELLSPACING Define o espaço entra as células, ou seja, a largura das linhas de grade (as bordas que envolvem as células). É especificado em pixels. Exemplo: <TABLE CELLSPACING=3> CELLPADDING Determina, em pixels, o espaço entre o conteúdo e as bordas da célula. Exemplo: <TABLE CELLPADING=6> ALIGN Seu site de Apostilas e Tutoriais 16

17 Configura o alinhamento horizontal da tabela em relação aos outros elementos da página. Pode conter os valores LEFT (esquerda), CENTER (centro) ou RIGHT( direita). Este parâmetro não funciona em alguns browsers. BGCOLOR Define a cor de fundo da tabela. Parâmetros do elemento <TR> ALIGN Configura o alinhamento horizontal dos elementos contidos nas células de uma linha. Pode conter os valores LEFT, CENTER OU RIGHT. Se omitido, o alinhamento é à esquerda para as células de dados (<TD>), e centralizado para células de cabeçalho (<TH>). VALIGN Define o alinhamento vertical dos elementos contidos nas células de uma linha. Pode conter os valores TOP(topo), MIDLE(meio) ou BOTTOM (fundo). Se omitido, o alinhamento é ao meio. BGCOLOR Define a cor de fundo da linha. Parâmetros dos Elementos <TD> e <TH> ALIGN Configura o alinhamento horizontal dos elementos contidos na célula. Pode conter os valores LEFT, CENTER OU RIGHT. Se omitido, o alinhamento é à esquerda para as células de dados (<TD>), e centralizado para células de cabeçalho (<TH>). VALIGN Define o alinhamento vertical dos elementos contidos na célula. Pode conter os valores TOP (topo), MIDLE(meio) ou BOTTON(fundo). Se omitido, o alinhamento é ao meio. BGCOLOR Define a cor de fundo da linha. NOWRAP Quando este parâmetro encontra-se associado a uma célula, o browser entende que o texto dentro daquela célula não pode ser dividido em mais de uma linha. Este parâmetro deve ser utilizado com cuidado, para evitar colunas demasiadamente largas. COLSPAN Especifica o número de colunas de uma tabela a ser ocupado por uma célula. Deve ser utilizado para expandir uma célula horizontalmente. Se atribuirmos COLSPAN=2 a uma célula, ela ocupará o seu espaço e o espaço de mais uma célula para a direita, assim esta linha deverá possuir uma célula a menos que as demais, já que uma de suas células vale por duas. ROWSPAN Define o número de linhas a ser ocupado por uma célula. Deve ser utilizado para expandir uma célula verticalmente (para baixo). Ao atribuir ROWSPAN=2 para uma célula, diminuirá em 1 o número de células da linha de baixo. Vamos a um exemplo: <html> <head> <title>tabelas</title> </head> <body> <table border="10" width="100%" bordercolorlight="#000080" bordercolordark="#0000ff"> <tr> <th width="100%" colspan="3"> <p align="center">título da Tabela</th> </tr> <tr> <td width="33%">texto1</td> <td width="33%">texto 2</td> <td width="34%">texto 3</td> Seu site de Apostilas e Tutoriais 17

18 </tr> </table> </body> </html> Atenção: Além de criar tabelas para exibir dados como numa planilha, os elementos de tabelas são usados para formatar páginas de uma forma geral. Eles são usados para criar textos com elementos na tela de forma mais fácil, para delimitar áreas de uma página e diversas outras utilidades que você nem imagina. Por exemplo, podemos usar tabelas para garantir que o texto fique na posição A da tela e a imagem fique na posição B, independente da resolução de vídeo do visitante de sua página. Utilizando uma tabela de tamanho definido, podemos evitar que a página fique grande demais para resoluções de 640x480, podemos simular colunas de texto, entre outras aplicações. FRAMES O recurso de frames (janelas), compatível com a versão 2 e superiores do Navigator e do IE, permite ao desenvolvedor criar páginas HTML que podem ser visualizadas simultaneamente na janela do browser. Com esse recurso, a janela do browser é dividida em frames que compartilham o espaço disponível. Sem o recurso de frames, para visualizar três páginas diferentes chamadas A. HTM, B.HTM e C.HTM, o usuário precisaria acessá-las individualmente por meio de uma página inicial que contivesse um menu ou então através da especificação de seu URL Usando o recurso de frames, podemos exibir mais de um frame (janela) simultaneamente. Em nosso projeto iremos usar um dos frames para exibir permanentemente o conteúdo da página do menu e a outra para exibir o conteúdo dos capítulos, facilitando a navegação pelo manual. Como funcionam os frames Ao contrário da maioria dos recursos da linguagem HTML, o uso frames requer um planejamento prévio. Esse planejamento consiste na criação da estrutura dos frames, na qual você irá especificar a quantidade de frames, a disposição que eles terão na tela, a largura e a altura de cada frame, assim como o conteúdo que será exibido em cada um deles. Trabalhar com frames exige duas etapas. Na primeira você cria o layout dos frames, na segunda, define seu conteúdo. O Comando Document O uso de frames exige a criação de um documento HTML especial que contém todas as definições dos frames. Você pode considera-lo como um documento mestre. Esse documento se diferencia dos demais documentos HTML, pois ele não usa os comandos <BODY> e </BODY>. Em seu lugar é usado o comando <FRAMESET></FRAMESET>. Dentro desse par de comandos são especificados todos os atributos dos frames que serão criados. O frameset define as características gerais dos frames, como sua quantidade e disposição horizontal e vertical. Cada frame especificado precisará de um outro comando chamado <FRAME> para definir suas características individuais. O Comando FRAMESET Este comando é do tipo contêiner, ou seja deve ser aberto e fechado. Veja a sintaxe deste comando: <FRAMESET COLS=tamanho FRAMEBORDER=1/0 FRAMESPACING=spacing ROWS=tamanho></FRAMESET> Cols=tamanho O atributo cols é usado para criar um documento com frames dispostos em colunas. Nele deverá ser especificada a largura de cada coluna do documento. Pode ser especificado um valor padrão para todas as colunas ou tamanhos individuais. Os valores podem ser especificados em pixels, percentagem ou tamanho relativo. Usando valores em pixels <FRAMESET COLS= 100,300,200 > Seu site de Apostilas e Tutoriais 18

19 Usando valores relativos Para dividir os frames igualmente pela largura da janela do browser, a melhor opção é usar um asterisco (*) para cada coluna <FRAMESET COLS=*,*,*> Usando valores percentuais A terceira forma de determinar a largura de uma coluna é especificar os valores em forma de percentual, totalizando 100 por cento <FRAMESET COLS=25%,50%,25% Os diferentes valores podem ser combinados entre si. Por exemplo, para criar um frameset com três colunas de modo que a primeira ocupe 25%, a terceira tenha 100 pixels e a outra ocupe o espaço restante, pode-se usar o seguinte comando: <FRAMESET COLS=25%,*,100> ROWS=tamanho O atributo ROWS funciona da mesma forma que o atributo COLS, só que cria os frames horizontalmente. Tudo o que foi exposto para COLS, aplica-se a ROWS. Combinando ROWS e COLS Pode-se combinar a criação de frames, usando os dois atributos. Você pode criar um janela dividida em dois frames horizontais, onde o primeiro deles é dividido em duas colunas. Para que isso seja possível, basta aninhar conjuntos de comandos <FRAMESET> O ATRIBUTO <FRAMESPACING=VALOR> Esse atributo tem como finalidade alterar o espaço entre os frames, dando a impressão de que a borda dos frames foi aumentada. Contudo, ele apenas distancia um frame de outro pela quantidade de pixels especificada. O código pode ser o mesmo do exemplo anterior. A penas a primeira linha deve ser alterada para: <FRAMESET ROWS=50%,50% FRAMESPACING=10> O ATRIBUTO <FRAMEBORDER=1/0> Esse atributo tem a finalidade de eliminar as bordas dos frames. Como padrão, ele usa o valor 1, que exibe a borda. Se for especificado o valor 0, as bordas serão omitidas. A omissão de bordas é interessante para criar a ilusão de uma única janela, onde as partes dessa janela são independentes das outras. Outro efeito interessante é a mudança da cor de fundo de cada janela, permitindo dividir a tela em áreas coloridas distintas. O COMANDO <FRAME SRC> Sintaxe: <FRAME ALIGN=posição FRAMEBORDER=1/0 MARGINHEIGHT=altura MARGINWIDTH=largura NAME=nome SCROLLING=yes/no SRC=endereço Align=posição Ajusta o alinhamento do frame ou do texto. Os valores permitidos são: TOP O texto ao redor do frame é alinhado pela parte superior do frame. MIDDLE O texto ao redor do frame é alinhado pelo meio do frame. BOTTO O texto aos redor do frame é alinhado pela parte inferior do M frame. LEFT O frame é alinhado à esquerda, deixando o texto posicionado no seu lado direito. Seu site de Apostilas e Tutoriais 19

20 RIGHT O frame é alinhado à direita, deixando o texto posicionado no seu lado esquerdo Frameborder=0/1 Idêntico ao atributo de mesmo nome do comando <FRAMESET>, ele ativa ou desativa a exibição de borda para o frame atual. Marginheight=altura Especifica a altura da margem superior e inferior do frame em pixels. Marginwidht=largura Especifica a largura das margens esquerda e direita do frame em pixels. Name=nome Atribui um nome para o frame, de maneira que possa ser identificado e localizado para carregar documentos. Noresize Esse atributo evita que o frame seja redimensionado pelo usuário. Scrolling=yes/no Esse atributo, quando ajustado para o valor no, não permite que o frame tenha barras de rolagem quando a janela for redimensionada. SRC=endereço Endereço deve ser substituído pelo nome ou URL do documento que será exibido no frame. Ajustando as margens internas do Frame O desenvolvedor pode criar uma margem interna para o frame, de forma a distanciar o conteúdo da janela da sua borda. Para criar um margem nas laterais da janela, deve ser usado o comando MARGINWIDTH. Para criar uma margem na parte superior e outra no rodapé do frame, deve ser usado o atributo MARGINHEIGHT. O tamanho da margem deve ser especificado em pixels. Barras de Rolagem e Redimensionamento dos Frames Como padrão, os frames possuem os atributos que permitem seu redimensionamento e a inclusão automática de barras de rolagem quando suas dimensões ficam menores do que o conteúdo a ser exibido. Para alterar essas características, você deve usar os comandos SCROLLING E NORESIZE. No caso do comando SCROLLING, deve ser atribuído a ele o valor no para desativar as barras de rolagem. INTERLIGAÇÃO DE FRAMES Até agora você viu como criar um conjunto de frames para exibir documentos independentes um do outro. Nosso projeto inicial previa a criação de um manual eletrônico usando frames para mostrar um índice permanente na tela enquanto outra janela exibia o conteúdo selecionado. Para isso iremos aprender mais alguns itens. O primeiro deles é a atribuição de um nome para o frame e o segundo é direcionar o carregamento de um documento em uma janela específica. Para indicar ao browser em qual janela os documentos dos capítulos deverão ser carregados, devemos incluir no documento que contém os links um novo comando chamado <BASE TARGET= nome da janela > contendo o nome da janela-alvo. Criando a Estrutura dos Frames Esse arquivo contém a definição de dois frames, um para o menu e outro para os capítulos. O frame que receberá o nome de textos, e nenhum arquivo será previamente carregado. O frame que conterá o menu principal recebera o nome de menu. Nessa situação, apenas o nome do frame textos tem de ser obrigatoriamente especificado. Criando o conteúdo do Menu O arquivo de menu contém os links para os capítulos do manual. Nesse documento, você deve incluir o comando <BASE TARGET>, que é responsável por indicar ao browser onde os arquivos vinculados pelo comando <A HREF> devem ser carregados. Em nosso exemplo, ele orienta o browser a carregar os links no frame chamado textos. Se esse comando for omitido, os capítulos serão carregados no frame do menu. Os códigos dos documentos ficarão da seguinte maneira e salve o documento como menu: <HTML> <HEAD> <TITLE>Menu Principal</TITLE> Seu site de Apostilas e Tutoriais 20

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

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

Leia mais

OPERAÇÃO DE SOFTWARE E APLICATIVOS

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

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

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

Leia mais

Programação web Prof. Wladimir

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

Leia mais

Programação para Internet I

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

Leia mais

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

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

Leia mais

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

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

Leia mais

HTML -- Criação de Home Page

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

Leia mais

Módulo: Criação de Páginas WEB

Módulo: Criação de Páginas WEB Módulo: Criação de Páginas WEB 50 Horas - Sessão 05/13 TEXTO ANIMADO O comando MARQUEE orienta o browser a definir o efeito de texto/imagem a passar no ecrã. Deve ser utilizado quando queremos dar destaque

Leia mais

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

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

Leia mais

2 HTML Inserindo objetos

2 HTML Inserindo objetos 2 HTML Inserindo objetos Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Imagem...3 Links...5 Links para locais da mesma página...6 Áudio e vídeo...8

Leia mais

Programação HTML Construção de Páginas para WEB 47

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

Leia mais

CURSO BÁSICO DE HTML Alessandro S Silveira. Lista de tags e atributos

CURSO BÁSICO DE HTML Alessandro S Silveira. Lista de tags e atributos CURSO BÁSICO DE HTML Alessandro S Silveira Lista de tags e atributos Os tags apresentados aqui formam uma compilação das definições oficiais da linguagem mais as extensões introduzidas por empresas como

Leia mais

Introdução. História. Como funciona

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

Leia mais

Ferramentas para Multimídia e Internet - 1486

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

Leia mais

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

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

Leia mais

4. Características Gerais das Tabelas do HTML

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

Leia mais

QUEM FEZ O TRABALHO?

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

Leia mais

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros.

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. Formulários Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. O formulário depende de outros programas no servidor, para receber e

Leia mais

MÓDULO 1 - xhtml Básico

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

Leia mais

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

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

Leia mais

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

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

Leia mais

DESENVOLVIMENTO WEB I - 7122

DESENVOLVIMENTO WEB I - 7122 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

6.2 - Formulários: form
...
form action method POST GET exceto outros formulários form

6.2 - Formulários: form <form action=url_de_script method=método>...</form> form action method POST GET exceto outros formulários form 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

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

Leia mais

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

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

Leia mais

Curso PHP Básico. Jairo Charnoski do Nascimento

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

Leia mais

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

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

Leia mais

Roteiro de Estudos e Atividades Avaliativas HTML

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

Leia mais

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. 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

Leia mais

Aula 4: Cores e Multimídia

Aula 4: Cores e Multimídia Aula 4: Cores e Multimídia Nesta quarta aula vamos entender os conceitos de cores na WEB. Veremos como definir a cor da página e dos textos. Aprenderemos a incluir recursos multimídia de som e vídeo em

Leia mais

Roteiro 2: Conceitos de Tags HTML

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

Leia mais

3 HTML Tabelas, frames e formulário

3 HTML Tabelas, frames e formulário 3 HTML Tabelas, frames e formulário Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Tabelas...3 Principais atributos das tabelas...4 Principais atributos

Leia mais

1 INTRODUÇÃO. Web é o diminutivo para World Wide Web.

1 INTRODUÇÃO. Web é o diminutivo para World Wide Web. 1 1 INTRODUÇÃO Antes de começarmos a trabalhar HTML, é necessário que se conheça alguns termos básicos que envolvem esta linguagem. Internet é um conjunto de pequenas redes de computadores, formando assim

Leia mais

Como criar uma página WEB

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

Leia mais

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

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

Leia mais

Ensino I nterativo Universidade Anhembi Morumbi. Multimídia I

Ensino I nterativo Universidade Anhembi Morumbi. Multimídia I Ensino I nterativo Universidade Anhembi Morumbi Multimídia I Objetivo Mostrar o que é preciso para o desenvolvimento de um Projeto para Web, apresentando os primeiros conceitos de HTML. Tópicos 1. Etapas

Leia mais

Tutorial de HTML. O que é HTML? Aprendendo

Tutorial de HTML. O que é HTML? Aprendendo Tutorial de HTML Tutorial: O que é HTML? Aprendendo Títulos Textos Imagens Links Imagens Clicáveis Explorando o TAG BODY Música de Fundo Gifs Animados Tabelas Testando sua Página O que é HTML? HTML é uma

Leia mais

PROGRAMAÇÃO WEB DO LADO DO CLIENTE

PROGRAMAÇÃO WEB DO LADO DO CLIENTE PROGRAMAÇÃO WEB DO LADO DO CLIENTE FORMULÁRIO Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets,

Leia mais

XHTML. A versão mais recente desta linguagem é a XHTML (extensible HyperText Markup Language Linguagem de Marcação de Hipertexto Estendida).

XHTML. A versão mais recente desta linguagem é a XHTML (extensible HyperText Markup Language Linguagem de Marcação de Hipertexto Estendida). XHTML 1. Significado do Termo HTML (HyperText Markup Language Linguagem de Marcação de Hipertexto) é a linguagem na qual são feitas as páginas que irão compor um site da Internet. A versão mais recente

Leia mais

Introdução a Tecnologia Web Desenvolvimento e Manutenção de Site

Introdução a Tecnologia Web Desenvolvimento e Manutenção de Site Tecnologia Educacional na Formação Profissionalizante de Jovens Introdução a Tecnologia Web Jovens do Saber Digital Inclusão Sócio-Digital Fortaleza - Ceará, Brasil Sumário 1. O que é a Internet? 2. O

Leia mais

4.14 - Imagens: src único atributo que não pode ser omitido neste TAG Nota: img

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

Leia mais

HyperText Markup Language HTML

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

Leia mais

HTML. Sessão 4 HTML. Criação de Páginas WEB. Tabelas

HTML. Sessão 4 HTML. Criação de Páginas WEB. Tabelas HTML Sessão 4 HTML É por vezes interessante fazer com que uma célula se expanda de forma a incorporar a célula imediatamente abaixo ou ao lado (o que em folhas de cálculo como o Microsoft Excel se denomina

Leia mais

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

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

Leia mais

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN Sumário 1. Introdução...1 2. Tags...1 3. HTML...1 4. Cabeça, Corpo

Leia mais

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

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

Leia mais

4.14 - Imagens: SRC único atributo que não pode ser omitido neste tag Nota: img

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

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

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

Leia mais

Introdução ao HTML Hypertext Markup Language

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

Leia mais

Programação para Internet

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

Leia mais

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

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

Leia mais

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

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

Leia mais

UNIVERSIDADE FEDERAL DO PARANÁ FRONTPAGE 2000

UNIVERSIDADE FEDERAL DO PARANÁ FRONTPAGE 2000 UNIVERSIDADE FEDERAL DO PARANÁ PRÓ-REITORIA DE RECURSOS HUMANOS E ASSUNTOS ESTUDANTIS COORDENAÇÃO DE DESENVOLVIMENTO DE RECURSOS HUMANOS UNIDADE DE QUALIFICAÇÃO FRONTPAGE 2000 Módulo I Hamilton Chaiben

Leia mais

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont

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

Leia mais

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES FRAMES. Professor Carlos Muniz

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES FRAMES. Professor Carlos Muniz INTRODUCAO DESENVOLVIMENTO E DESIGN DE FRAMES Algumas páginas da internet são congeladas em seu cabeçalho ou em seu lado esquerdo, para construção de menus que geralmente precisam estar disponíveis para

Leia mais

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI

Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Manual do usuário Desenvolvendo páginas em Drupal Faculdade de Ciências Médicas FCM Unicamp Núcleo de Tecnologia de Informação NTI Conteúdo Primeiro Passo... 3 1.1 Login... 3 1.2 Recuperando a Senha...

Leia mais

CAPÍTULO 06. AG8 Informática. Este capítulo abrangerá :

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

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO

INTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO As imagens são armazenadas em forma de arquivos, principalmente PNG (para desenhos) ou JPG (para fotos) Para incluir imagens usa-se

Leia mais

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4

Sumário INTRODUÇÃO 3 DICAS PARA CRIAR UM BOM SITE 4 Sumário Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73. Nenhuma parte deste livro, sem prévia autorização por escrito de Celta Informática, poderá ser reproduzida total ou parcialmente,

Leia mais

Todos os tags obedecem a uma hierarquia, como no seguinte exemplo:

Todos os tags obedecem a uma hierarquia, como no seguinte exemplo: <a> <b> <c> </c> </b> </a> O que é o HTML? HTML significa HyperText Markup Language, e é uma linguagem universal destinada à elaboração de páginas com hiper-texto, como o nome indica. O conceito de hiper-texto é bastante simples:

Leia mais

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

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

Leia mais

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

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

Leia mais

INTRODUÇÃO À PROGRAMAÇÃO

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

Leia mais

HTML HTML. Criação de Páginas WEB. Caracteres especiais < < > > Sessão 10

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

Leia mais

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia5.zip 1996 Tutorial - Autoria em World Wide Web

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

Leia mais

Conceitos Fundamentais de Microsoft Word. Professor Rafael rafampsilva@yahoo.com.br www.facebook.com/rafampsilva

Conceitos Fundamentais de Microsoft Word. Professor Rafael rafampsilva@yahoo.com.br www.facebook.com/rafampsilva Conceitos Fundamentais de Microsoft Word Professor Rafael www.facebook.com/rafampsilva Introdução É um editor de texto ou processador de texto? editores de texto: editam texto (assim como uma máquina de

Leia mais

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Formulários HTML Aula 07: Formulários e Frames HTML Os formulários HTML são utilizados, geralmente, como entradas de dados prépreenchimento,

Leia mais

André Kawamoto NE31A

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

Leia mais

Claudio Damasceno. Avançar

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

Leia mais

Profa. Reane Franco Goulart

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

Leia mais

Programação e Designer para WEB

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

Leia mais

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário Introdução HyperText Markup Language HTML Formulário Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ O usuário interage com os serviços

Leia mais

MINISTÉRIO DA EDUCAÇÃO

MINISTÉRIO DA EDUCAÇÃO MINISTÉRIO DA EDUCAÇÃO SECRETARIA DE EDUCAÇÃO PROFISSIONAL E TECNOLÓGICA INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DE SANTA CATARINA CAMPUS SÃO JOSÉ TECNICO EM TELECOMUNICAÇÕES REDES DE COMPUTADORES

Leia mais

Apostila Básica de Informática Ensino Fundamental Volume 4

Apostila Básica de Informática Ensino Fundamental Volume 4 Apostila Básica de Informática Ensino Fundamental Volume 4 1 Introdução:... 3 A Tela do Excel... 3 Criando uma nova pasta de trabalho... 3 Diferença entre Pasta de Trabalho e Planilha.... 4 Salvando sua

Leia mais

O HTML possui sintaxes para os tags na ordem LIFO, ou seja, o último tag a ser digitado é o primeiro a ser fechado, por exemplo:

O HTML possui sintaxes para os tags na ordem LIFO, ou seja, o último tag a ser digitado é o primeiro a ser fechado, por exemplo: HTML é a sigla usada para Hyper Text Markup Language (linguagem de Marcação de Hipertexto). É a linguagem destinada a criação de páginas para a WEB. Ao contrário do que muita gente boa pensa, HTML não

Leia mais

Programação para a Web - I. José Humberto da Silva Soares

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

Leia mais

Este arquivo é parte integrante do CD MEGA CURSOS Acesse - www.megacursos.com.br

Este arquivo é parte integrante do CD MEGA CURSOS Acesse - www.megacursos.com.br Pg 1 Introdução... Pg 2 Exemplo completo... Pg 3 Passo 2... Pg 4 Hyperlinks e Texto dentro de uma caixa... Pg 5 Tag para cores e Tabelas... Pg 6 Formatar o Texto... Pg 7 Download... Pg 8 Frame... Pg 9

Leia mais

INDICE 1. INTRODUÇÃO À INTERNET E A THE WORLD WIDE WEB...4

INDICE 1. INTRODUÇÃO À INTERNET E A THE WORLD WIDE WEB...4 INTRODUÇÃO À PROGRAMAÇÃO WEB 2007 1 INDICE 1. INTRODUÇÃO À INTERNET E A THE WORLD WIDE WEB...4 1.1 A INTERNET...4 1.2 ENDEREÇAMENTO INTERNET...4 1.3 DEFINIÇÕES DA HTML...4 1.4 ELEMENTOS DE UM PROJETO WEB...4

Leia mais

As tags indicam as diversas partes da página e produzem diferentes efeitos no navegador, elas são os comandos da linguagem HTML.

As tags indicam as diversas partes da página e produzem diferentes efeitos no navegador, elas são os comandos da linguagem HTML. World Wide Web A Web é um conjunto de documentos acessíveis por meio da Internet. Esses documentos (ou páginas Web) contêm uma tecnologia chamada hipertexto. Onde você poderá percorrer partes do documento

Leia mais

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

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

Leia mais

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos

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.

Leia mais

Comandos Básicos de HTML

Comandos Básicos de HTML Comandos Básicos de HTML Agora iniciaremos o estudo ao HTML, para você fazer o site utilize o bloco de notas do windows(notepad) ou um outro editor de texto como Notepad++, Geany ou PSPAD. Para fazer você

Leia mais

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES INTRODUÇÃO. Professor Carlos Muniz

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

Leia mais

LABORATÓRIO DE INTERNET FRONTPAGE

LABORATÓRIO DE INTERNET FRONTPAGE I LABORATÓRIO DE INTERNET FRONTPAGE Prof. Antonio Geraldo da Rocha Vidal II SUMÁRIO Introdução...3 Construindo um Web Site...4 Iniciando...4 Administrando o Site...5 Navegação...5 Trabalhando com Páginas...6

Leia mais

STI - Seção Técnica de Informática. Dreamweaver. DreamWeaver 1

STI - Seção Técnica de Informática. Dreamweaver. DreamWeaver 1 Dreamweaver DreamWeaver 1 Índice Introdução 1. Conhecendo a Área de Trabalho 1.1. Barra de Título 1.2. Barra de Menus 1.3. Guias 1.3.1 Guia "Common" 1.4. Barra de "Edição do Documento" 1.5. Painéis 1.6.

Leia mais

PDI 1 - Projeto e Design de Interfaces Web

PDI 1 - Projeto e Design de Interfaces Web Introdução a HTML e XHTML Elementos básicos parte 2 Professor: Victor Hugo L. Lopes Agenda: --Adicionando imagens; --Trabalhando com vídeos e sons em HTML; Disponível em http://wp.me/p48yvn-43 2 Inserindo

Leia mais

Aula 04 Word. Prof. Bruno Gomes bruno.gomes@ifrn.edu.br http://www.profbrunogomes.com.br/

Aula 04 Word. Prof. Bruno Gomes bruno.gomes@ifrn.edu.br http://www.profbrunogomes.com.br/ Aula 04 Word Prof. Bruno Gomes bruno.gomes@ifrn.edu.br http://www.profbrunogomes.com.br/ Agenda da Aula Editor de Texto - Word Microsoft Office Conjunto de aplicativos para escritório que contém programas

Leia mais

UFCD 21 Criação de sites webs D U R A Ç Ã O : 5 0 H O R A S

UFCD 21 Criação de sites webs D U R A Ç Ã O : 5 0 H O R A S UFCD 21 Criação de sites webs 1 D U R A Ç Ã O : 5 0 H O R A S Objectivos: 2 C R I A R D O C U M E N T O S E M H I P E R T E X T O D E S E N V O L V E R E A L O J A R U M S I T E N A I N T E R N E T Conteúdos

Leia mais

1. Como criar uma conta

1. Como criar uma conta Tutorial MediaWiki 1. Como criar uma conta Para criar uma conta clique no botão, disponível canto superior direito, "Entrar". Será então mostrada a página de entrada na conta onde terá de introduzir os

Leia mais

Lista e Tabelas. Fundamentos da Linguagem Web

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

Leia mais

APOSTILA DE INTRODUÇÃO AO HTML

APOSTILA DE INTRODUÇÃO AO HTML 1 2 Apostila de Introdução ao HTML 3 ESTA OBRA PODE SER REPRODUZIDA E DISTRIBUÍDA PARCIAL OU INTEGRALMENTE DESDE QUE CITADA A FONTE. MATERIAL COPYLEFT - VENDA PROIBIDA Todo material desenvolvido pela Coordenadoria

Leia mais

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

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

Leia mais

WEB DESIGNER WEB DESIGNER

WEB DESIGNER WEB DESIGNER WEB DESIGNER 1 WEB DESIGNER INICIO DO CURSO DE HTML 4.0 Toda vez que você acessar um site (veja tópico Word Wide Web) por meios de domínios quando adiciona a URL na barra de endereço, do seu Navegador

Leia mais

Web Design Aula 01. No Caderno Responda as Questões abaixo

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?

Leia mais

Web Design. Prof. Felippe

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

Leia mais

FTIN - Módulo de WebDesign. Prof. Iran Pontes

FTIN - Módulo de WebDesign. Prof. Iran Pontes FTIN - Módulo de WebDesign Prof. Iran Pontes FTIN FORMAÇÃO TÉCNICA EM INFORMÁTICA IMPLEMENTAÇÃO HTML/CSS Hipertexto É um sistema para a visualização de informação cujos documentos contêm referências internas

Leia mais

Links e Frames José Antônio da Cunha

Links e Frames José Antônio da Cunha Links e Frames José Antônio da Cunha Links Até agora, produzimos documentos simples. Mas os documentos de hipertexto têm como principal característica, fazer ligações com outros hipertextos. Os pontos

Leia mais

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Introdução Aula 03: Pacote Microsoft Office 2007 O Pacote Microsoft Office é um conjunto de aplicativos composto, principalmente, pelos

Leia mais