Apostila de HTML e CSS
|
|
|
- Nicolas Taveira Rico
- 8 Há anos
- Visualizações:
Transcrição
1 Apostila de HTML e CSS 1
2 HTML básico Definição... 4 Requisitos para o desenvolvimento de uma página WEB... 4 TAGs Iniciando um documento... 5 <HTML> </HTML>... 5 <HEAD>... </HEAD>... 5 <TITLE>... </TITLE>... 5 <BODY>... </BODY> Trabalhando com textos Títulos e Subtítulos Estilos de texto Fontes Quebras de linha Linhas Horizontais Caracteres Especiais Imagens LINKS Links para o mesmo diretório Links para outro diretório Parâmetro NAME Listas Criando listas ordenadas Criando listas não ordenadas Tabelas Construindo tabelas com o elemento TABLE O título da tabela (elemento CAPTION) TABLE HEADINGS (elemento TH) TABLE DATA (elemento TD) END OF TABLE ROW (elemento TR) Atributos para a tabela BORDER ALIGN VALIGN CELLSPACING CELLPADDING ROWSPAN COLSPAN Largura da célula Cor de fundo das células Formulários Construindo formulários com o FORM Atributos para FORM GET POST INPUT
3 Tipos de elementos TYPE TYPE="RADIO" TYPE="PASSWORD" TYPE="CHECKBOX" TYPE="SUBMIT" TYPE="RESET" TEXTAREA SELECT Exemplo completo de formulário Frames Estrutura Sintaxe FRAMESET ROWS COLS FRAME SRC NAME SCROLLING NORESIZE TARGET BORDER Tabelas de Cores CSS O que é CSS? Como criar estilos Tipos de Folhas de Estilo Estilos Externos Estilos Incorporados Estilos Inline Tags Personalizadas Utilizando a TAG <DIV> Utilizando a TAG <SPAN> Atalhos e atributos de CSS Atalhos de CSS Atributos de CSS
4 4 HTML básico 1 Definição HTML significa Hyper Text Markup Language e é a linguagem de marcação de hipertexto, ou seja, é a linguagem na qual são escritas as páginas da Web, interpretada pelo navegador. As informações estão ligadas na forma de páginas ligadas entre si. A página é transferida de um computador remoto para o usuário, onde o browser faz o trabalho de interpretar os códigos naquele documento e mostra a página que o usuário vê. A Web está estruturada em dois princípios básicos: HTTP(Hiper Text Transfer Protocol) e HTML (Hiper Text Markup Language). HTTP é o protocolo de transferência de hipertexto, ou seja, é o protocolo que permite a navegação na Web, com o simples clicar do mouse sobre o texto (ou imagem) que esteja associado a outro link. Requisitos para o desenvolvimento de uma página WEB Conhecer a linguagem HTML para escrever o código fonte de sua página; Editor de texto para gerar o seu código fonte (bloco de notas, Front Page, Dremweaver, entre outros); Um navegador de internet (browser) para visualizar as suas páginas (Internet Explorer, Netscape, etc). TAGs Os comandos HTML são chamados de TAGs, compreendem de marcas padrões que são utilizadas para fazer indicações a um browser. Assim como em outras linguagens, os comandos têm uma sintaxe própria, e seguem algumas regras: As TAGs aparecem sempre entre sinais de menor que (<) e maior que (>); Geralmente são utilizadas aos pares, sendo que a TAG de finalização de um comando qualquer é finalizada com a precedência de uma barra (/).
5 5 Exemplos: TAG único: <br> TAG duplo: <center> xxx </center> 1.1 Iniciando um documento Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>. Uma página HTML possui três partes básicas: estrutura principal, um cabeçalho e um corpo de página. Possui uma estrutura dividida em 4 TAGs básicas: <HTML>... </HTML> <HEAD>... </HEAD> <TITLE>... </TITLE> <BODY>... </BODY> <HTML> </HTML> São usados para delimitar os comandos HTML, indicam o início e o fim de um documento. <HEAD>... </HEAD> Usado para indicar parâmetros de configuração do documento, também utilizado para exibir o título na barra de títulos do browser. <TITLE>... </TITLE> Indica o título do documento para o browser. Esta TAG deve estar sempre dentro das TAGs <HEAD> </HEAD>. <BODY>... </BODY> Envolvem a seção de corpo do documento. Aqui fica o conteúdo principal da Home Page.
6 6 Opcionalmente podemos indicar uma cor para o fundo da página, usando a opção BGCOLOR, ou um arquivo de imagem para formar o fundo, usando a opção BACKGROUND. Iniciaremos a nossa primeira página editando o código no Bloco de Notas. Siga os passos abaixo: 1. Crie uma pasta chamada OrgaoColegiado. 2. Clique em Arquivo/Novo/Documento de Texto 3. Nomeie o arquivo como index.html. 4. Abra o arquivo, você irá notar que a página está em branco, pois ainda não escrevemos nenhum código. 5. Clique com o botão direito do mouse sobre o arquivo e clique em Editar, ele irá abrir o bloco de notas com seu conteúdo vazio. 6. Copie e cole o exemplo abaixo, salve o arquivo.txt e feche. 7. Depois abra novamente o arquivo HTML. Exemplo com cor de fundo na página: <html> <head> <title> Curso de HTML </title> </head> <body bgcolor="green" > Corpo da página HTML com cor de fundo. </body> </html>
7 7 Agora substitua o código acima pelo exemplo abaixo seguindo os passos 5, 6 e 7. Exemplo com imagem de fundo na página: <html> <head> <title> Curso de HTML </title> </head> <body background="fundo.gif" > Corpo da página HTML com imagem de fundo. </body> </html>
8 8 1.2 Trabalhando com textos No corpo do documento é onde estará localizado o título e subtítulos, texto, imagens, ligações com outras páginas, etc. Nesta seção veremos como trabalhar com os textos Títulos e Subtítulos Para demarcar títulos e subtítulos, use os TAGs de HEADER (H1 a H6), juntamente com a opção CENTER. Veja alguns exemplos: Texto inserido entre <H1> e </H1>: Texto inserido entre <H2> e </H2>: Texto inserido entre <H3> e </H3>:
9 9 Texto inserido entre <H3><CENTER> e </CENTER></H3> : Observações: A TAG CENTER têm a função de deixar o cabeçalho ou texto centralizado. Exemplo: Crie um novo arquivo chamado ExemploTitulo.html e insira o código abaixo. <html> <head> <title> Curso de HTML </title> </head> <body> <H1>Título com H1: Órgãos Colegiados</H1> <H2>Título com H2: Órgãos Colegiados</H2> <H3>Título com H3: Órgãos Colegiados</H3> <H4>Título com H4: Órgãos Colegiados</H4> <H5>Título com H5: Órgãos Colegiados</H5> <H6><CENTER>Título com H6 centralizado: Órgãos Colegiados</CENTER></H6> </body> </html>
10 Estilos de texto Além da TAG <CENTER>...</CENTER> existem as seguintes TAGs que podem ser utilizadas para a formatação de um texto. <B>...</B> Aplica o estilo negrito. <I>...</I> Aplica o estilo itálico. <U>...</U> Aplica o estilo sublinhado (nem todos os browser o reconhecem). <SUP>...</SUP> Faz com que o texto fique sobrescrito. <SUB>...</SUB> Faz com que o texto fique subscrito. <PRE>...</PRE> Utiliza a pré-formatação, ou seja, deixa o texto da maneira em que foi digitado.
11 11 <P> A TAG responsável pela quebra de parágrafos é a <P> que finaliza o parágrafo e insere automaticamente uma linha em branco entre parágrafos. Sintaxe do comando: <P align= posição > Texto do parágrafo. Posição pode ser: Left: alinhamento à esquerda. Center: centralizado Right: alinhamento à direita Exemplo: Crie um novo arquivo com o nome EstiloTexto e insira o código abaixo: <html> <body> <title>curso de HTML</title> <B>Estilo negrito.</b> <br> <I>Estilo itálico.</i> <br> <U>estilo sublinhado (nem todos os browser o reconhecem)</u> <br> <SUP>Texto sobrescrito.</sup> <br> <SUB>Texto subscrito.</sub> <br> <PRE>Este é um pequeno texto com estilo pré-formatado.</pre> <p align="center"> Este é um exemplo do primeiro parágrafo centralizado. <p> Este é um exemplo do segundo parágrafo.
12 12 </body> </html> Fontes Para inserir em sua página um texto com fontes de tamanhos, cores e tipos diferentes utilizamos a TAG <FONT>... </FONT>. Sintaxe do comando: <FONT size= n face= nome color= cor > TEXTO </FONT> Onde: SIZE= n : n varia de 1 a 7 e 3 é o valor padrão da maioria dos navegadores; FACE= nome : nome da fonte a ser utilizada (Arial, Tahoma, etc); COLOR= cor : cor da fonte definida em hexadecimal, ou através de um nome pré-definido de cores. Veja no capítulo 9 desta apostila. Exemplo: Crie um arquivo chamado Fontes.html e insira o código abaixo: <html>
13 13 <body> <title>curso de HTML</title> <FONT size="1" face="tahoma" color="red"> Texto com cor vermelha </FONT> <br><br> <FONT size="2" face="arial" color="green"> Texto com cor verde </FONT> <br><br> <FONT size="3" face="tahoma" color="blue"> Texto com cor azul </FONT> <br><br> <FONT size="4" face="tahoma" color="orange"> Texto com cor laranja </FONT> <br><br> <FONT size="5" face="tahoma" color="pink"> Texto com cor pink </FONT> <br><br> <FONT size="6" face="tahoma" color="#4f2f4f"> Texto com cor violeta </FONT> <br><br> <FONT size="7" face="tahoma" color="#ff00ff"> Texto com cor magenta </FONT> <br><br> </body> </html>
14 Quebras de linha A tag <BR> faz a quebra de linha sem acrescentar espaços extras entre linhas. Finaliza a linha de texto e insere automaticamente uma outra linha em branco. Não precisa ser finaliza com </BR>. 1.4 Linhas Horizontais Desenha uma linha horizontal no documento. Não precisa ser finalizada com </HR>. Sintaxe: <HR width= n% align= posição size= n color= #cor noshade> Atributos: SIZE: Define a espessura, em pixels, da linha. WIDTH: Define a largura da linha, o que pode ser feito em pixels (número absoluto) ou em percentual da tela (com o símbolo de %) ALIGN: Alinhamento, como o que tem sido usado, pode ser LEFT, RIGHT e CENTER, ou seja, esquerda, direita e ao centro, respectivamente.
15 15 Exemplo: <html> <body> NOSHADE: Linha sem sombra. O padrão é a linha sombreada, utilizando esse atributo temos uma linha sem sombra. Crie um arquivo chamado LinhaHorizontal.html e insira o código abaixo: Primeiro exemplo com a linha horizontal <HR width="100%" align="left" size="2" color="silver" > <br> <center>segundo exemplo com a linha horizontal</center> <HR width="70%" align="center" size="3" color="blue" > <br> Terceiro exemplo com a linha horizontal <HR width="30%" align="center" size="5" color="red" noshade> <br> </body> </html>
16 16 2. Caracteres Especiais Á Á á á Â Â â â À À à à Å Å å å Ã Ã ã ã Ä Ä ä ä Æ Æ æ æ É É é é Ê Ê ê ê È È è è Ë Ë ë ë Ð Ð ð ð Í Í í í Î Î î î Ì Ì ì ì Ï Ï ï ï Ó Ó ó ó Ô Ô ô ô Ò Ò ò ò Ø Ø ø ø Õ Õ õ õ Ö Ö ö ö Ú Ú ú ú Û Û û û Ù Ù ù ù Ü Ü ü ü Ç Ç ç ç Ñ Ñ ñ ñ < < > > & & " " Ý Ý ý ý Þ Þ þ þ ß ß º º ª &170; ¹ ¹ ² ² ³ ³ ƒ ƒ † ‡ ‰ ««± ±»» ¼ ¼ ½ ½ ¾ ¾
17 17 3. Imagens Para inserir uma imagem em uma página web utilizamos o comando, tag, <img src> e seus atributos. Os formatos mais usados são o GIF e o JPG, ambos com compactação de pixels. Sintaxe: Ex.: <IMG SRC="endereço da imagem WIDTH= n% HEIGHT= n% ALIGN= posição ALT= texto > Atributos: WIDTH: Define a largura da imagem, o que pode ser feito em pixels (número absoluto) ou em percentual da tela (com o símbolo de %). HEIGHT: Define a altura da linha, o que pode ser feito em pixels (número absoluto) ou em percentual da tela (com o símbolo de %). ALIGN: Alinhamento da imagem pode ser, LEFT, RIGHT e CENTER, ou seja, esquerda, direita e ao centro, respectivamente. ALT: texto que irá aparecer ao passar o mouse sobre a imagem ou texto que surgirá caso a imagem não possa ser visualizada. BORDER: Especificação da largura da borda da imagem. Valor em pixel. VSPACE: Para especificar o espaço que deve ser deixado acima e abaixo da imagem. Valor em pixel. HSPACE: Especifica o espaço que deve ser deixado nas laterais da imagem. Valor em pixel. O único obrigatório é o src. Crie um arquivo chamado Imagem.html e insira o código abaixo: <html> <body> <title>curso de HTML</title> <IMG SRC="img/bullet.gif" ALIGN="left" ALT="Imagem Bullet"> <font size="3" face="arial" color="blue">esta é a nossa primeira imagem inserida.</font> <br><br>
18 18 <font size="4" face="courier New" color="orange">abaixo segue mais imagens na página.</font> <br><br> <IMG SRC="img/calendario.gif" ALIGN="left" ALT="Calendário"> <font size="3" face="arial" color="black">calendário.</font> <br><br> <IMG SRC="img/search.gif" ALIGN="left" ALT="Buscar"> <font size="3" face="arial" color="black">buscar.</font> <br><br> <IMG SRC="img/salvar.gif" ALIGN="left" ALT="Salvar"> <font size="3" face="arial" color="black">salvar.</font> <br><br> </body> </html>
19 19 4. LINKS O principal poder do HTML vem da capacidade de interligar partes de um texto, imagens a outros documentos. A interligação entre documentos não se restringe somente às ligações com outras páginas. Em páginas muito longas onde um assunto tem vários tópicos, podemos utilizar índices onde os links têm a função de interligar os tópicos de um texto e que com apenas um clique em um dos tópicos do índice, o item é exibido. 4.1 Links para o mesmo diretório Você só precisa especificar o nome do arquivo que será chamado e a sua extensão. Sintaxe: <A HREF = nomedoarquivo.extensão > Texto ou imagem </A> Onde: A: abertura da TAG de link; HREF= nomedoarquivo.extensão : deve ser informado o nome completo do arquivo que será acessado; Texto ou imagem: que servirá como link; /A: encerra a TAG de link. Exemplo: Edite o primeiro arquivo que criamos index.html. Substitua o código pelo o que está abaixo: <html> <head> <title> Curso de HTML </title> </head> <body > <h1><font face="arial" color="orange">menu</font></h1> <HR width="100%" align="left" size="2" color="silver" >
20 20 <A HREF = "EstiloTexto.html">Estilo de Texto</A> <br> <A HREF = "ExemploTitulo.html">Títulos e Subtítulos</A> <br> <A HREF = "LinhaHorizontal.html">LinhaHorizontal</A> <br> <A HREF = "Fontes.html">Fontes</A> <br> <A HREF = "Imagem.html">Imagem</A> </body> </html> 4.2 Links para outro diretório Para criar links para uma página localizada em outros diretórios é necessário indicar o caminho completo do arquivo. Para a WEB isto tem uma forma um pouco diferente do Windows e do DOS, veja: Exemplo: A barra utilizada para separar os diretórios é a barra convencional (/); O ponto de partida para localizar um arquivo em outro diretório é o atual; Para baixar um nível deve utilizar os sinais../.
21 21 <A HREF=../matricula/CadastraAluno.html > Cadastro de Aluno </A> 4.3 Parâmetro NAME O parâmetro NAME serve para marcar um ponto para possíveis desvios. Quando desviamos para um determinado ponto dentro de um documento, indicamos este nome com um "#". Por exemplo: <A NAME="AQUI">Aqui é um ponto para desvios</a>... <A HREF="#AQUI">Desvia para o ponto "AQUI"</A>
22 22 5. Listas Criando listas ordenadas Listas ordenadas são também denominadas listas numeradas, pois, quando um navegador encontra uma TAG, iniciando uma lista ordenada, ele passa a mostrar cada item utilizando números, como 1, 2, 3, e assim sucessivamente. Listas ordenadas são iniciadas pela TAG <OL>. Cada item utiliza a TAG <LI>. Finalmente, </OL>. Sintaxe: <OL TYPE= formato START= n > <LI> Tópico 1 <LI> Tópico 2 <LI> Tópico n </OL> Onde: <OL>: início da lista numerada; TYPE= formato : o formato da numeração pode ser: 1: lista numérica (não é necessário ser definido); A: lista alfabética com letras maiúsculas; A: lista alfabética com letras minúsculas; I: Lista numérica com números romanos maiúsculos; I: lista numérica com números romanos minúsculos; START= n : o valor inicial de uma lista numerada; <LI>: tópicos da lista; </OL>: fim da lista numerada; Exemplo: Crie um arquivo chamado Listas.html e insira o código abaixo: <html> <title>curso de HTML</title> <body> <center><h1>listas Ordenadas</h1></center> <h3>cursos</h3>
23 23 <OL> <LI>Graduação <LI>Pós-Graduação Lato Sensu <LI>Cursos de Pós-Graduação Stricto Sensu </OL> </body> </html> Criando listas não ordenadas Listas não ordenadas são muito parecidas com as ordenadas. A única diferença é o fato de elas não definirem explicitamente uma ordem, como é no caso as numeradas. Eles são formados por símbolos, que podem ser bola, quadrado, e uma bola vazia. Elas são iniciadas com a TAG <UL> e são respectivamente terminadas com </UL>. E seus elementos são que nem as numeradas: com <LI>. Sintaxe: <UL TYPE= formato > <LI> Tópico 1 <LI> Tópico 2 <LI> Tópico 3 </UL>
24 24 Onde: <UL> : Início da lista pontuada; TYPE= formato : o formato do marcador pode ser: disc: o marcador é um ponto (padrão utilizado pelos navegadores, não precisa indicar); square: o marcador é um quadrado; circle: o marcador é um ponto. <LI>: tópicos da lista, não é necessário encerrar a TAG; </UL>: fim da lista pontuada Exemplo: Acrescente o código abaixo no arquivo Listas.html: <br> <center><h1>listas Não Ordenadas</h1></center> <h3>membro da Comunidade Acadêmica</h3> <UL TYPE = disc > <LI>Aluno <LI>Docente <LI>Técnico Administrativo </UL>
25 25 6. Tabelas Tabelas correspondem a um ótimo formato para originar informações, e é por essa razão que eles foram acrescentados à linguagem HTML Construindo tabelas com o elemento TABLE A TAG <TABLE> é utilizada para a representação de dados tabulares. A estrutura e o conteúdo da tabela devem ficar dentro das TAGs <TABLE> </TABLE> O título da tabela (elemento CAPTION) A TAG <CAPTION> especifica o título de uma tabela. Por exemplo: <CAPTION>Notas da primeira avaliação</caption> TABLE HEADINGS (elemento TH) A TAG <TH> é usada para especificar as células de cabeçalho da tabela. Essas células são diferentes das outras, pois seu conteúdo aparece geralmente em negrito. O elemento TH pode ser apresentado sem conteúdo algum: isso corresponde a uma célula em branco. As tabelas podem ainda conter mais de um TH para uma dada coluna, ou linha, ou simplesmente não conter nenhum elemento TH, isto é, não conter em nenhuma célula em destaque. O TAG dela é: <TH>texto em destaque</th> Observações: Elas devem ficar, assim como todas, dentro da TAG <TABLE> TABLE DATA (elemento TD) A TAG <TD> especifica a células de dados de uma tabela. Por se tratar de dados comuns (e não cabeçalhos), essas células possuem seu conteúdo escrito em fonte normal, sem nenhum destaque e alinhamento à esquerda. Assim como o TH, pode-se construir células em branco, usando o elemento TD, como no exemplo a seguir: <TD>Células de dados</td> Observações: A TAG de terminação, <TD>, também é opcional.
26 END OF TABLE ROW (elemento TR) A TAG <TR> indica o início de uma linha na tabela. Cada linha da tabela pode conter várias células, e, portanto, é necessário que se faça uso de uma marcação que indique exatamente o ponto de quebra de uma linha e início de outra. Toda linha deve terminar com um </TR> Atributos para a tabela As marcações das tabelas podem apresentar resultados diferentes, se acompanhadas de alguns atributos. Os principais são: BORDER Um atributo opcional para ser usado com TABLE é o atributo BORDER. Se ele estiver presente, a tabela será formatada com linhas de borda. Atenção: Todas as explicações acima como as que estão por vir, foram feitas, para que você possa saber o que significa a TAG em questão. Exemplo: <TABLE BORDER> <CAPTION> Nota da primeira avaliação </CAPTION> <TD>Notas/Alunos</TD> <TH>Eduardo</TH> <TH>Ana Lúcia</TH> <TH>Andréa</TH> <TR> <TH>Notas</TH> <TD>8,0</TD> <TD>9.3<TD> <TD>7.8</TD> <TR> <TH>No de Inscrição</TH> <TD> </TD> <TD> </TD> <TD> </TD> </TABLE> Veja o resultado:
27 27 O atributo BORDER pode também receber um valor que vai estabelecer qual a espessura (além da existência) da linha de borda da tabela (BORDER="valor"). Se o valor atribuído for 0 (zero), o BORDER funciona exatamente como o caso padrão, sem o BORDER. Dessa maneira, é possível colocar tabelas em maior destaque, atribuindo um valor maior que 1 para o BORDER. <TABLE BORDER=5> <TR> <TD>TESTE</TD> <TD>TESTE2</TD> <TD>TESTE3</TD> </TR> <TR> <TD>TESTE4</TD> <TD>TESTE5</TD> <TD>TESTE6</TD> </TR> </TABLE> Veja o resultado: ALIGN Este atributo pode ser aplicado a TH, TD ou TR e controla o alinhamento do texto dentro de uma célula, com relação as bordas laterais. Quando aplicado a TR, ele define o alinhamento de toda uma linha da tabela. O exemplo abaixo mostra como o ALIGN aceita os valores LEFT, CENTER ou RIGHT, para alinhar à esquerda, centralizar ou alinhar à direita, respectivamente. <TABLE BORDER> <TD>Primeira célula</td> <TD>Segunda célula</td> <TD>Terceira célula</td> <TR>
28 28 <TD ALIGN="CENTER">Centro</TD> <TD ALIGN="LEFT">Esquerda</TD> <TD ALIGN="RIGHT">Direita</TD> <TR> </TABLE> Veja o resultado: VALIGN Pode ser aplicado a TH e TD e define o alinhamento do texto em relação às bordas superior e inferior. Aceite os valores TOP, MIDDLE, E BOTTOM para alinhar na parte de cima, no meio e na parte de baixo, respectivamente. Veja o exemplo: <TABLE BORDER> <TD>Teste de alinhamento</td> <TD VALIGN="TOP">TOP</TD> <TD VALIGN="middle">MIDDLE</TD> <TD VALIGN="bottom">BOTTOM</TD> </TABLE> Veja o resultado: CELLSPACING Este atributo compreende a distância entre células e linhas. Deve ser adicionado dentro da TAG <TABLE>. Como padrão dos navegadores a distância é 2 pixels. Exemplo:
29 29 Crie um arquivo chamado Tabela.html e insira o código abaixo: <h3>exemplo com CELLSPACING</h3> <TABLE BORDER= 1 WIDTH= 80% ALIGN= center CELLSPACING= 6 > <TR> <TD WIDTH= 33% ALIGN= center > Coluna 1 </TD> <TD WIDTH= 33% ALIGN= center > Coluna 2 </TD> <TD WIDTH= 34% ALIGN= center > Coluna 2 </TD> </TR> </TABLE> CELLPADDING Este atributo é utilizado para formatar o espaço entre o conteúdo de uma célula e suas bordas em todos os sentidos. É aplicado dentro da TAG <TABLE>. Exemplo: Acrescente o código abaixo no arquivo Table.html: <TABLE BORDER="1" WIDTH="80%" ALIGN="center" CELLPADDING="6"> <TR> <TD WIDTH="33%"ALIGN="center"> Aluno </TD> <TD WIDTH="33%"ALIGN="center"> Docente </TD> <TD WIDTH="34%"ALIGN="center"> Técnico Administrativo </TD> </TR> </TABLE> ROWSPAN Define quantas linhas uma mesma célula pode abranger. Por padrão, na maioria dos navegadores de Internet cada célula adicionada em uma tabela corresponde a uma linha. Pode ser aplicado em TH ou TD, proporcionando o mesmo efeito. Exemplo: Acrescente o código abaixo no arquivo Table.html. <TABLE BORDER= 1 WIDTH= 380 CELLPADDING= 7 ALIGN= center > <TR> <TD WIDTH= 16% ROWSPAN= 3 > 3 linhas </TD> <TD WIDTH= 16% > coluna 2 </TD> <TD WIDTH= 16% > coluna 3 </TD> <TD WIDTH= 17% > coluna 4 </TD>
30 30 <TD WIDTH= 17% > coluna 5 </TD> </TR> <TR> <TD WIDTH= 16% > coluna 2 </TD> <TD WIDTH= 16% > coluna 3 </TD> <TD WIDTH= 17% > coluna 4 </TD> <TD WIDTH= 17% > coluna 5 </TD> </TR> <TR> <TD WIDTH= 16% > coluna 2 </TD> <TD WIDTH= 16% > coluna 3 </TD> <TD WIDTH= 17% > coluna 4 </TD> <TD WIDTH= 17% > coluna 5 </TD> </TR> </TABLE> COLSPAN Este atributo define quantas colunas uma célula pode abranger. Por padrão, na maioria dos navegadores de Internet cada célula adicionada em uma tabela corresponde a uma coluna. Pode ser aplicado em TH ou TD, proporcionando a mesma abrangência. <h3>exemplo com COLSPAN</h3> <TABLE BORDER= 1 WIDTH= 80% ALIGN= center > <TR> <TD WIDTH= 24% COLSPAN= 3 >Célula com 3 colunas </TD> <TD WIDTH= 20% >coluna 4</TD> <TD WIDTH= 20% >coluna 5</TD> </TR> <TR> <TD WIDTH= 20% >coluna 1</TD> <TD WIDTH= 20% >coluna 2</TD> <TD WIDTH= 20% >coluna 3</TD> <TD WIDTH= 20% >coluna 4</TD> <TD WIDTH= 20% >coluna 5</TD> </TR> </TABLE>
31 Largura da célula Para alterar a largura de uma célula da tabela basta acrescentar o parâmetro WIDTH dentro da tag <TD>. Exemplo1: <TABLE BORDER=2> <TR> <TD WIDTH=100> WIDTH=100</TD> <TD ALIGN=MIDDLE WIDTH=200>WIDTH=200 (PIXELS)</TD> </TR> </TABLE> Cor de fundo das células Outro atributo que podemos ter nas tabelas é mudar a sua cor de fundo, isto se torna particularmente útil quando se quer dar destaque a uma célula em especial.
32 32 Vejamos um exemplo: <TABLE BORDER=0> <TR> <TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD> <TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD> <TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> </TR> <TR> <TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD> <TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> <TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD> </TR> </TABLE>
33 33 7. Formulários A linguagem HTML também permite que o cliente (navegador) interaja com o servidor, preenchendo campos, clicando em botões e passando informações. O elemento FORM, da linguagem HTML, é justamente o responsável por tal interação. Ele provê uma maneira agradável e familiar para coletar dados do usuário através da criação de formulários com janelas de entrada de textos, botões, etc Construindo formulários com o FORM Para fazer formulário, você tem que colocar as TAGs <FORM> </FORM>. Todos os outros comandos, devem ficar dentro dessas TAGs. Ok?! Atributos para FORM O elemento FORM pode conter dois atributos que determinaram para onde será mandada a entrada do FORM. Vejam como eles são: GET Os dados entrados fazem parte do URL associado à consulta enviado para o servidor e suporta até 128 caracteres POST É o mais utilizado, pois envia cada informação de forma separada da URL. Com este método POST os dados entrados fazem parte do corpo da mensagem enviada para o servidor e transfere grande quantidade de dados INPUT A TAG <INPUT> especifica uma variedade de campos editáveis dentro de um formulário. Ele pode receber diversos atributos que definem o tipo de mecanismo de entrada (botões, janelas de texto, etc.), o nome da variável associada com o dado da entrada, o alinhamento e o campo do valor mostrado. O atributo mais importante do INPUT é o NAME. Ele associa o valor da entrada do elemento. Por
34 34 exemplo, quando você for receber os dados, já, processados, irá vir o name: = resposta dada pelo visitante. Outro atributo importante é o TYPE. Ele determina o campo de entradas de dados. Veja como se usa este atributo: <INPUT TYPE="TEXT" NAME="nome"> Para mudar o tamanho, da janela padrão, você tem que colocar o comando SIZE. Por exemplo: <INPUT TYPE "TEXT" NAME="nome" SIZE=8>(ou número desejado) Outro comando importante é o VALUE. Ele acrescenta uma palavra digitada no comando à janela. Por exemplo: <INPUT TYPE "TEXT" NAME="nome" SIZE=8 VALUE="texto."> Olhe como ficaria: Tipos de elementos TYPE Você pode fazer várias coisas com o elemento TYPE. Por exemplo, para ser um campo de senha, que quando digitado, apareça o símbolo "*", ao invés das letras, você deve escrever o seguinte: <INPUT TYPE"PASSWORD" NAME="nome" SIZE=8> TYPE="RADIO" Quando o usuário deve escolher uma resposta em uma única alternativa, de um conjunto, utiliza-se o RADIO Buttons. Um exemplo típico do uso de tais botões é cuja resposta pode ser SIM ou NÃO. É preciso que todos os rádios buttons de um mesmo grupo, ou seja, referentes à mesma pergunta, tenham o mesmo atributo NAME. Para esse tipo de entrada, os atributos NAME e VALUE, são necessários. Veja a seguir:
35 35 <INPUT TYPE="RADIO" NAME="você gostou dessa home page?" VALUE="sim">sim<p> <INPUT TYPE="RADIO" NAME="você gostou dessa home page?" VALUE="nao">não<p> Repare: TYPE="PASSWORD" Este comando serve para fazer um campo de senhas! Quando a pessoa digitar, aparecerá o sinal de "*"! O comando é: <INPUT TYPE="PASSWORD" NAME="SENHA" MAXLENGHT=6> TYPE="CHECKBOX" Esse comando é válido quando apenas uma resposta, é esperada. Mas nem sempre esta é a situação...o tipo CHECKBOX provê outros botões através dos quais mais de uma alternativa, pode ser escolhida. Definição dos checkboxs: <INPUT TYPE="CHECKBOX" NAME="netscape" VALUE="net"> Netscape<p> <INPUT TYPE="CHECKBOX" NAME="Explorer" VALUE="exp"> Internet Explorer<p> <INPUT TYPE="CHECKBOX" NAME="Mosaic" VALUE="mos"> Mosaic<P> <INPUT TYPE="CHECKBOX" NAME="Hot Java" VALUE="hot"> Hot Java<P> Veja o resultado:
36 TYPE="SUBMIT" Esse é o botão que submete os dados do formulário quando pressionados, ou seja, possibilitam, o envio, dos dados para o script que vai tratá-los. Veja como se adiciona o botão: <INPUT TYPE="SUBMIT" VALUE="enviar"> Veja como ficará: TYPE="RESET" No caso dos botões RESET, quando o botão é clicado, ele automaticamente limpa todos os campos já preenchidos no formulário, voltando à situação inicial. <INPUT TYPE="RESET" VALUE="Limpar"> Veja como ficará: TEXTAREA Para se limitar o tamanho do campo mostrado na tela, faz-se o uso dos atributos COLS e ROWS que especificam, respectivamente, o número de colunas e linhas que se deseja mostrar para o usuário. O atributo NAME é obrigatório, e especifica o nome da variável, que será associada à entrada do cliente (navegador). O atributo VALUE não é aceito nesse elemento, mas você pode colocar já um texto da seguinte maneira. Veja como ele é colocado:
37 37 <TEXTAREA NAME="nome" COLS=20 ROWS=3>texto</TEXTAREA> SELECT Permite definir uma lista de opções, com barra de rolagem ou fixa na tela do navegador. É uma TAG que deve ser iniciada com <SELECT> e finalizada com </SELECT>. Sintaxe: <SELECT MULTIPLE NAME= nomedalista > <OPTION SELECTED VALUE= valor de retorno > Valor Visualizado <OPTION VALUE= Valor de retorno > Valor Visualizado 2 </SELECT> Onde: NAME: obrigatório, serve para a identificação da lista; OPTION: item da lista; MULTIPLE: com este atributo a lista aparecerá sempre aberta; SELECTED: indica o valor padrão da lista; VALUE: valor a ser retornado ao servidor. Exemplo: <SELECT MULTIPLE NAME= Estados > <OPTION SELECTED VALUE= SP > São Paulo <OPTION VALUE= RJ > Rio de Janeiro <OPTION VALUE= MG > Minas Gerais <OPTION VALUE= ES > Espírito Santo </SELECT> Exemplo completo de formulário
38 38 Mostraremos a seguir um exemplo completo de um formulário para Cadastro de Conselhos. Utilizaremos também a tag TABLE para alinhar os campos do formulário na tela em questão. Crie um arquivo com nome de CadConselho.html e copie o exemplo abaixo: <html> <body> <title>órgão Colegiado</title> <TABLE BORDER=1 BGCOLOR="blue" width="100%"> <TH ><font color="white">cadastro de Conselho</font></TH> </TABLE> <FORM NAME="form_conselho" METHOD="POST"> <h4>programa</h4> <table width="100%"> <tr> <td width="15%"><font size="3" face="arial"> Unidade</font></td> <td><input type="text" name="codunidade" size="5"></td> <td><input type="text" name="unidade" size="80"></td> </tr> <tr> <td width="15%"><font size="3" face="arial"> Programa</font></td> <td><input type="text" name="codprograma" size="5"></td> <td><input type="text" name="programa" size="80"></td> </tr> </table> <h4>conselho de Programa de Pós-Graduação</h4> <table width="100%"> <tr> <td width="15%"><font size="3" face="arial">código</font></td> <td><input type="text" name="codigo" size="5"></td> </tr> <tr> <td width="15%"><font size="3" face="arial">nome</font></td> <td><input type="text" name="nome" size="100"></td> </tr> <tr> <td width="15%"><font size="3" face="arial">tipo</font></td> <td> <select name="tipo"> <option > <option value="1">comissoes TRANSITORIAS DE ESTUDOS <option value="2">conselhos DE DEPARTAMENTO <option value="3">comissoes PERMANENTES DE UNIDADE ADMINISTRATIVA </select> </td> </tr> <tr> <td width="15%"><font size="3" face="arial">fundamento</font></td> <td> <TEXTAREA NAME="fundamento" COLS=50 ROWS=3></TEXTAREA>
Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:
48 10. CSS 10.1 O que é CSS? CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Você já deve ter visto esses nomes em vários lugares. CSS é mais uma forma de aperfeiçoar seus documentos, o CSS
neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css?
neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css? O html inclui uma tag para praticamente todos os elementos de design comumente
CSS (Style Sheets - Folhas de Estilo)
Anuncie nesse espaço da Aprendendo HomePage, clique aqui e veja como e porque. CSS (Style Sheets - Folhas de Estilo) CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Vc já deve ter visto esses
1) Crie uma nova página chamada Exercício.html e deixe-a com o seguinte layout:
Exercícios: 1) Crie uma nova página chamada Exercício.html e deixe-a com o seguinte layout: a) O cabeçalho Sistema de Órgãos Colegiados deve ter tamanho 3 e ficar centralizado. b) Após o cabeçalho incluir
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
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
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,
#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.
#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores
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,
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
HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS
APRESENTANDO O CSS CSS Cascading Style Sheets, ou, em português, Folha de Estilo em Cascata - é uma linguagem de estilo que pode ser utilizada na formatação de documentos HTML. Com CSS, podemos criar regras
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
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
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
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
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):
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
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:
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
Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens
Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe
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
CSS Cascading Style Sheets Folhas de Estilo em Cascata
CSS Cascading Style Sheets Folhas de Estilo em Cascata Conjunto de instruções que controla a aparência de uma página Web 1. Regra CSS seletor { propriedade1: valor; propriedade2: valor; 2. Aplicação 2.1
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS.
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Programação de Computadores
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
QUEM FEZ O TRABALHO?
Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome
Introdução. 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
Tecnologias para Web Design
Tecnologias para Web Design CSS Folhas de estilo em cascata ÿ CSS Cascading Style Sheets ÿ Linguagem para definir atributos de estilo dos elementos da linguagem HTML ÿ CSS é uma linguagem independente
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
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Laboratório de Práticas
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
Introdução à Tecnologia Web
Introdução à Tecnologia Web HTML HyperText Markup Language XTML extensible HyperText Markup Language Elementos da Seção do Corpo Tabelas Formulários Professor Alan Cleber Borim www.alanborim.com.br Índice.
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
APOSTILA DE PROGRAMAÇÃO WEB
Programação Web - CSS 1 PROFESSOR LUIS NÍCOLAS DE AMORIM TRIGO APOSTILA DE PROGRAMAÇÃO WEB CSS CASCADING STYLE SHEETS (FOLHAS DE ESTILO EM CASCATA) Programação Web - CSS 2 INTRODUÇÃO CSS, também conhecido
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
HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto)
HTML (Hypertext Markup Language Linguagem de Marcação de Hipertexto) CSS - Cascading Style Sheets CSS serve para definir propriedades de apresentação/formatação a aplicar em tags HTML. A sua utilização
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
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
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
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
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.
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.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
WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira
WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Recursos avançados com CSS Uma vez entendido o uso básico e treinado muito, chegou
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
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
Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata
Mudança de formatos no HTML título CSS - Cascading Style Sheets e os problemas do HTML Para mudar a cor de uma única linha de uma página seria relativamente fácil.
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
EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}
Fontes A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina
Tecnologias para apresentação de dados - HTML. Aécio Costa
Tecnologias para apresentação de dados - HTML Aécio Costa Apresentação de Dados na Web Tecnologias client-side HTML CSS JavaScript HyperText Markup Language Uma linguagem de marcação utilizada para produzir
Desenvolvedor Web Docente André Luiz Silva de Moraes
Roteiro 3: Layout básico e Div's: técnicas com uso de ID's e Classes Objetivos Compreender a importância do uso de Elementos de Div no desenvolvimento de Layouts de página; Explorar e aplicar o uso de
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
INTRODUÇÃO AO DESENVOLVIMENTO WEB
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que
Mais sobre uso de formulários Site sem Ajax
Mais sobre uso de formulários Site sem Ajax Página com busca padrão 1 Página com o resultado da busca carregada no local da anterior (o formulário está vazio) Site com Ajax 2 Site usando Ajax para preencher
TABLELESS E PROJETO ESTRUTURAL
Barra Lateral 1 Barra Lateral 2 Barra Lateral 2 Barra Lateral Barra Lateral DISCIPLINA: FUNDAMENTOS E TECNOLOGIA EM WEB Professora: Adriana Silva TABLELESS E PROJETO ESTRUTURAL O termo TABLELESS refere-se
Introdução às Folhas de Estilo
Introdução às Folhas de Estilo Folhas de Estilo Cascading Style Sheets (CSS). Separa aparência e estrutura do documento. Permite maior controle sobre a apresentação das páginas Margens Tamanho / tipo de
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
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
CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br
Web Introdução Design CSS - Background, Color e Fontes Prof. Bruno Medeiros bruno.medeiros@sc.senai.br http://www.bruno.dump.com.br O que veremos... CSS Cores e fundos Fontes Cores e fundos Algumas propriedades
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;
Compêndio códigos. {css}
Compêndio códigos {css} ADVERTÊNCIA: A que se segue é apenas uma lista com as propriedades de CSS, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba de antemão o signi cado
> 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
Web Design Aula 15: Conhecendo CSS
Web Design Aula 15: Conhecendo CSS Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Roteiro Agrupando Seletores Herança Comentários Exercício Adicionando Classes Validação Propriedades Agrupando
Programação para Internet I
Programação para Internet I Aulas 09 e 10 Fernando F. Costa nando@fimes.edu.br Formulários O formulário representa o modo mais importante de interatividade que a linguagem HTML oferece. Um formulário pode
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
Posicionamento e Layout com CSS
Posicionamento e Layout com CSS Esquemas de posicionamento: absolute e relative Construção de layouts com divs e regras CSS Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto
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).
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
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
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?
Cabeçalho do documento
Cabeçalho do documento O cabeçalho de uma página HTML fica dentro das Tags e , e dentro dessas Tags podemos usar Tags , , , , e etc. A Tag TITLE Por exemplo
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
Bem vindo ao ajuda do software QUICKFISH para criação de sites.
Bem vindo ao ajuda do software QUICKFISH para criação de sites. SUMÁRIO 1 Exemplo de site criado no software QUICKFISH...02 2 Salvando Seu Site...03 3 Publicando Seu Site...03 4 Visão inicial do Software
Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário
Sumário FORMULÁRIO EM HTML... 2 FORM... 2 ACTION... 2 METHOD... 2 INPUT... 2 INPUT TYPE TEXT... 2 INPUT TYPE PASSWORD... 2 CHECKBOX - Múltipla escolha... 4 RADIO - Escolha única... 4 Botões de ação...
Planilhas Eletrônicas
Planilhas Eletrônicas APOSTILA DE EXEMPLO (Esta é só uma reprodução parcial do conteúdo) 1 Índice AULA 1... 3 Apresentação do BrOffice Calc... 3 Tela Inicial... 4 Teclas e Atalhos de movimentação... 6
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),
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
Universidade Federal do Mato Grosso - STI-CAE. Índice
CAPA Universidade Federal do Mato Grosso - STI-CAE Índice 1. Página da área administrativa... 1.1 Botões e campo iniciais... 2. Explicar como funcionam as seções... 2.1. Seções dinâmicos... 2.1.1 Como
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,
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
COMO FUNCIONA UM FORMULÁRIO
FORMULÁRIOS Constitui-se numa das formas de a máquina cliente enviar informações para que um programa no servidor receba estes dados, processe-os e devolva uma resposta ao usuário, por meio do navegador,
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
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,
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
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,
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
O código acima descreve o formulário com uma caixa de texto e dois botões
Formulários Formulários permitem que os usuários interajam com um servidor Web passando informações. Assim, através da Web, se pode ler e gravar informações em Banco de Dados, gerando enormes possibilidades
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
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;
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
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
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
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
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
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
HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).
HTML / JAVASCRIPT Estamos iniciando o estudo do HTML através das TAGS (comandos) para construir formulários. Isso facilitará a continuidade dos nossos estudos da linguagem de programação JavaScript, a
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
CRIANDO TEMPLATES E LEGENDAS
CRIANDO TEMPLATES E LEGENDAS Este tutorial tem como objetivo instruir passo à passo como criar templates de peças, utilizar os novos recursos de cadastro de propriedade de peças e criação de legenda. 1-