Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Guias e Dicas
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Encontrar documentos
Prepare-se para as provas com trabalhos de outros alunos como você, aqui na Docsity
Pesquisar documentos Store
Os melhores documentos à venda: Trabalhos de alunos formados
Videoaulas
Prepare-se com as videoaulas e exercícios resolvidos criados a partir da grade da sua Universidade
QuizNEW
Responda perguntas de provas passadas e avalie sua preparação.
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Comunidade
Pergunte à comunidade
Peça ajuda à comunidade e tire suas dúvidas relacionadas ao estudo
Ranking universidades
Descubra as melhores universidades em seu país de acordo com os usuários da Docsity
Guias grátis
Os eBooks que salvam estudantes!
Baixe gratuitamente nossos guias de estudo, métodos para diminuir a ansiedade, dicas de TCC preparadas pelos professores da Docsity
HTML e CSS, Notas de estudo de Física
- - -
Tipologia: Notas de estudo
Antes de 2010
1 / 67
Documentos relacionados
Pré-visualização parcial do texto
Baixe HTML e CSS e outras Notas de estudo em PDF para Física, somente na Docsity! Apostila de HTML e Css HTML básico 1... reeteetaerereeeeaereeeaeeaerereeataanaa Definição... itserteeaeeeeeeeaeeseeeraranereaatanes Requisitos para o desenvolvimento de uma página WEB TAGS... 1.1 Iniciando um documento <HTML> ... <HTML>.. <HEAD> ... </HEAD>.. <TITLE>.... </TITLE>... <BODY>... </BODY>.. 1.2 | Trabalhando com textos. 1.2.1 Títulos e Subtítulos 1.2.2 Estilos de texto. 1.2.3 Fontes.............. 1.3 Quebras de linha. 1.4 Linhas Horizontais 2. Caracteres Especiais .. 3. Imagens................... 4. LINKS... 4.1 Links para o mesmo diretório. 4.2 Links para outro diretório. 4.3 Parâmetro NAME.......... 5. Listas... 5.1 - Criando listas ordenadas . 5.2 - Criando listas não ordenadas . 6. Tabelas................. st 6.1 - Construindo tabelas com o elemento TABLE 6.1.1 - O título da tabela (elemento CAPTION) 6.1.2 - TABLE HEADINGS (elemento TH) 6.1.3 - TABLE DATA (elemento TD) ......... 6.1.4 - END OF TABLE ROW (elemento TR).. 6.2 - Atributos para a tabela 6.2.1 - BORDER 6.2.2 - ALIGN..... 6.2.3 - VALIGN............ 6.2.4 — CELLSPACING... 6.2.5 - CELLPADDING.. 6.2.6 - ROWSPAN...... 6.2.7 - COLSPAN....... 6.2.8 — Largura da célula 6.2.9 — Cor de fundo das células. 7. Formulários... 7.1 - Construindo formulários com o FORM . 7.2 - Atributos para FORM. 7.21-GET... 7.22-PoST. ee 7.2.3 — INPUT... ieeerteeaaeeneeeaseeerracenerananeeerananeneaaeaneneaanana 33 CONAN ARER 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. 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: PON- a No Crie uma pasta chamada OrgaoColegiado. Clique em Arquivo/Novo/Documento de Texto Nomeie o arquivo como index.html. Abra o arquivo, você irá notar que a página está em branco, pois ainda não escrevemos nenhum código. 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. Copie e cole o exemplo abaixo, salve o arquivo .txt e feche. 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> Pets seranertas judo + > odds ya. a Endivço [E CA ecmena are setunge Wanezae e do srgao legado FE Mina) & AO) Sica | Ban | BC Bau [Gu e ERAZO ns] 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> fel! Arquivo Ediar Edti Favotos Feramentas Auca ] +» Qda daBIB SE -E Endeveco [E] =: Documents and SettinasiWenessalHe.s decumentas!CursolDraaoCaleaiadotExemoloTítulo htm E] er Jim” Título com H1: Orgãos Colegiados “Título com HZ: Órgãos Colegiados Título com II3: Órgãos Colegiados Titulo com H4: Órgãos Colegiados Tito com H5: Órgãos Colegiados “Edo com 6 senrilindo: ônfir Coagados ja fEicamde Besta SAnica || & (O) O *|| Enc | Bor | Bjcipo.. | Bcrade. | apos. [Euro [BLA 105 | 1.2.2 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. <l>...</l> 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 sebrescrito <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. <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. </body> </html> *+-> QnaSues|a 5s8-A Endereçn [E] Csjpocuments and SettingsivanessalMeus documentos|CursoyOrgasColegiado EstiloTevto html E em Jin” Estilo negrito. Estilo itálico. estile subinhado (rem todos os browser c reconhecem" Texto sobresesito Texto suserito. Fare é um pequena rexrn com estilo pré-rormacado. Este é um exemplo do primeico parágrafo centralizado. Este é um exemplo do segundo parágrafo | faia DER ainda] E PHO >|) Gee] Bum | Get | or | Baco. | Desa E FEET Pra 1.2.3 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":nvariade 1a 7 e 3éo0 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> > NOSHADE: Linha sem sombra. O padrão é a linha sombreada, utilizando esse atributo temos uma linha sem sombra. Exemplo: Crie um arquivo chamado LinhaHorizontal.html e insira o código abaixo: <html> <body> 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> ESSES =lsf=] reuho Edtar Sr Fever ado E +->- Qua Sun 99|b- 585-d z [EM aroermente end Settingeavanessaqhá is rhrimertasio isa Organcaleg adeimatizanta. atm ler [ims” Primeiro exemplo com a inha horizontal Segenda exeraplo com e lha honzoeral Verseito exemplo cem a linha horizontal E Feitas DT Eracoadr dinicor]|| & A] O 2] ice] Bron.] Bjc4.. | Bee. .] Epro. | Giro. |fEjero [EBRANAS tus 2. Caracteres Especiais À | Á á | á À |Â à |â A |À à |à À |Å à |å À |Ã à |ã À |Äi; à |ä FE | Æ e | æ E | É é | é É |Ê ê |ê E |[È ê |è É | 8Eumi; é | ëi; D |Ð ô |ð || | ĺ í | í | | &lcirc; 1 |î || | &lgrave; 1 | ì T |&lumi; 7 |8iumi; Ó | Ó 6 | ó O | Ô ô |ô O |Ò O |ò O |8&0slash; 9 |ø O | Õ 6 | õ O |&0um!; ô | ö U |Ú ú | ú U |Û à | û U |Ù u |ù Ú | Üi; U | ü C |Ç g |ç N | Ñ fi | ñ < |< > I|> & |& ” | " O |® O | © Y |Ý Y |ý Pp |Þ pb |þ B |ß e |8%186; 2 |8170; 1 |8H185; 2 |8H178; 3 |8H179; f |84131; t |84134; + |84135; %o | 8H137; c |8H162; £ |8H163; « |8H171; * |8&177; » |84187; - jaBs; W | 8188; Ya | 84189; % | 8190; é |8H191; x |8%215; + |8%247; i |84161; mn |84164; 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: <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. Ex.: 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> 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> efa] Arqvo. Edior Edir ajuda | "> Qndango|a5=-.a Endereço [E) =: Documents ord Seltingvareasenheus docurestosifursa(orgooCilegiadoinde html E] É tne”| E MENU Estilc ce Texte Títulos e Subtítulos LinhaHorizontal Fontes Tmag:m E] Elas [DD E tasconputador inicio] E ÃO *|| Dicas] Ban. | Egcto| Earo. | Bet | BinsoolfEjo. [ERA NAS 143 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: e Abarra utilizada para separar os diretórios é a barra convencional (/); e O ponto de partida para localizar um arquivo em outro diretório é o atual; e Para baixar um nível deve utilizar os sinais “../”. Exemplo: 2 <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="fAQUI">Desvia para o ponto "AQUI"</A> 2 5. Listas 5.1 - 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; Ss é |: Lista numérica com números romanos maiúsculos; * |: 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; Ss vv wv Exemplo: Crie um arquivo chamado Listas.html e insira o código abaixo: <html> <title>Curso de HTML</title> <body> <center><hl>Listas Ordenadas</hl></center> <n3>Cursos</n3> 25 6. Tabelas Tabelas correspondem a um ótimo formato para originar informações, e é por essa razão que eles foram acrescentados à linguagem HTML. 6.1 - 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> 6.1.1 - 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> 6.1.2 - 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>. 6.1.3 - 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 6.1.4 - 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>. 6.2 - Atributos para a tabela As marcações das tabelas podem apresentar resultados diferentes, se acompanhadas de alguns atributos. Os principais são: 6.2.1 - 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> <ID>7.8</TD> <TR> <TH>No de Inscrição</TH> <TD>376234809</TD> <TD>387349048</TD> <TD>502350432</TD> </TABLE> Veja o resultado: 21 NotasíAlunos Eduardo Ana Lúcia Andréa Notas 80 9.3 78 No de inscrição 376234809 387340048 [502350432 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 O (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> <TID>TESTE2</TD> <TID>TESTE3</TD> </TR> <TR> <TID>TESTE4</TD> <TID>TESTE5S</TD> <TID>TESTE6</TD> </TR> </TABLE> Veja o resultado: 6.2.2 - 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> <TD WIDTH="17%"> </TR> <TR> <TD WIDTH="16%"> <TD WIDTH="16%"> <TD WIDTH="17%"> <TD WIDTH="17%"> </TR> <TR> <TD WIDTH="16%"> <TD WIDTH="16%"> <TD WIDTH="17%"> <TD WIDTH="17%"> </TR> </TABLE> 6.2.7 - 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. coluna coluna coluna coluna coluna coluna coluna coluna coluna 5 </TD> </TD> </TD> </TD> </TD> </TD> </TD> </TD> </TD> <h3>Exemplo com COLSPAN</h3> <TABLE BORDER="1” <TR> <TD WIDTH="24%” COLSPAN="3">Célula com 3 colunas </TD> WIDTH="80%”" ALIGN="center”> <TD WIDTH="20%">coluna 4</TD> <TD WIDTH="20%">coluna 5</TD> </TR> <TR> <TD WIDTH="20%">coluna <TD WIDTH="20%">coluna <TD WIDTH="20%">coluna <TD WIDTH="20%">coluna <TD WIDTH="20%">coluna </TR> </TABLE> I</TD> 2</TD> 3</TD> 4</TD> 5</TD> 30 31 Armivo Edhar Extir Fevertos Ferramentes ajuda ] +» QUISunGI ASA A Endereço [E) = Documorts ord setar Woresrasu douro si cuaaor ganchos bl =] é me» Exemplo com CELLSPACING = | Aluno Doceme Técnico Adminstrativo Exemplo cura CELLPADDING | Aluac | Decente | Técnica Adiinistratiro Exemplo com ROWSPAN zcluma 2 | coluna 3 | cohma4 | colma5 zeluna 2! | coluna 3 | cohma4 | colmad Exemplo com COLSPAN [Céita nem * nomas Inohra 4 [nota * leotuna 1 toiuna 2 loctuna 3 leotaras [eotuaz 5] POD Era je |[Ej [gad.) Gira) BRAS iss (Ejcandado incar||| & (ÃO =| Zea] ve] Bo 6.2.8 — 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> 6.2.9 - 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. 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> 32 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: O sim O não 7.2.3.1.2 - 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> 7.2.3.1.3 - 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 DD metscape D Internet Explozer É Mosaic D HotJava 7.2.3.1.4- 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á: enviar 7.2.3.1.5 - 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á: Limpar 7.2.4 - 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 <TEXTAREA NAME="nome" COLS=20 ROWS=3>texto</TEXTAREA> 7.2.5 - 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. Vvvvwv 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> 7.2.6 — Exemplo completo de formulário 8. Frames É um recurso que permite dividir uma página de Internet em outras, na mesma página. Nada mais é que uma página que “chama” outras na página inicial que um documento html que contém frames. Em um determinado arquivo como o index.html, é onde pode ser definido a estrutura das novas janelas para o seu HTML. 8.1 - Estrutura Assim como o corpo do HTML, os FRAMES tem sua estrutura. Eles entram no lugar do corpo, substituindo o <BODY></BODY> por <FRAMESET></FRAMESET>. Exemplo: <HTML> <HEAD> <TITLE> Título do Documento </TITLE> </HEAD> <FRAMESET> Sintaxe dos Frames </FRAMESET> </HTML> 8.2 - Sintaxe Primeiramente devemos fazer um documento HTML para ele ser especificado pela sintaxe de FRAMES, no caso chamado de Frame .htm. <HTML> <HEAD> <TITLE> Frame 1 </TITLE> </HEAD> <BODY> 41 <FONT SIZE=+1> <B> Frame nl </B> </FONT> </BODY> </HTML> 8.3 - FRAMESET A primeira especificação é o FRAMESET, que é acompanhado pelas definições ROWS e COLS. 8.3.1 - ROWS Especifica o número de FRAMES e a altura de cada um. Exemplo: <FRAMESET ROWS="20%,30%,50%"> <FRAME SRC="Framel .html"> <FRAME SRC="Framel .html"> <FRAME SRC="Framel .html"> </FRAMESET> Neste exemplo de cima, ele chama três FRAMES, o 1º com 20% da tela, o 2º com 30% da tela, o 3º com 50% da tela (ambos em altura). E el8)z] ++ GasBasSyaIs Fes Trament Framenl Fromeni ie E uia] 8 122) +] gutsacosm, | Ejeitoaro | Ejesciera JfFjiadadsvs= [EAR co 42 8.3.2 - COLS Especifica o número de FRAMES e a largura de cada um. Exemplo: <FRAMESET COLS="20%,30%,50%"> <FRAME SRC="Framel .html"> <FRAME SRC="Framel .html"> <FRAME SRC="Framel .html"> </FRAMESET> Neste exemplo de cima, ele chama três FRAMES, o 1º com 20% da tela, o 2º com 30% da tela, o 3º com 50% da tela (ambos em largura). Ergeccalagado remo ol = és Jum” Frame nt Ezmdido LT or imiciar)| (3 [6] O >| fgaceade. | Bycntona. | Merostas | Ermo. [ETA [SÃO uso 8.4 - FRAME A segunda especificação é o FRAME, que é acompanhado pelas definições SRC, NAME, SCROLLING, NORESIZE, TARGET. 45 8.4.5 - TARGET Define qual a área (FRAME) que aparecerá o documento especificado pelo link. Mais útil na utilização de Menus e índices. Necessita do NAME. Exemplo: <FRAMESET COLS="20%,30%,50%"> <FRAME SRC="Framel.html" NAME="Principal"> <FRAME SRC="Framel .html"> <FRAME SRC="Framel .html"> </FRAMESET> O Link: <A HREF="http://www.unesp.br" TARGET="Principal"> Unesp </A> Se você quiser criar um link que chama uma nova tela do browser basta colocar TARGET="um nome que não existe". 8.5 - BORDER Define qual a borda que o FRAME terá. Mais útil na utilização de BACKGROUNDS iguais. Exemplo: <FRAMESET COLS="20%,30%, 50%" FRAMEBORDER="NO" BORDER=0> <FRAME SRC="Framel.html" FRAMEBORDER="NO" BORDER=0> <FRAME SRC="Framel.html" FRAMEBORDER="NO" BORDER=0> <FRAME SRC="Framel.html" FRAMEBORDER="NO" BORDER=0> </FRAMESET> FE a Arco cátar EXbF Favartos rerraentas ajuda +-— QRndlaaes|p 5sa.A Erro [E] CiDocamanc and seingaanera lc conunericsicuaorqascdlegado Frame Re Fer [> Frame nl Frame nl Frame ni Ea PED Binco ||| É O >|] Gcsado Jairo | Eros) Brant [PRAZO 05) 46 9. Tabelas de Cores 4 Esta tabela de cores pode ser usar quando quiser definir as cores de uma fonte de um texto ou então quando quiser definir o fundo de uma página. Deve-se usar o nome que está em inglês. Branco White Preto Black Azul Blue Amarelo Yellow Verde Green Laranja Orange Vermelho Red Rosa Pink Cinza Gray Ouro Gold Verde azulado Teal Azul marinho Navy Prata Silver Também poderá ser usado o nome em hexadecimal para definir a cor: 4FFFFFF (Branco) *400FF0O (Verde) H00FFFF (Cian) 4COCOCO (Cinza) 4000000 (Preto) %0000FF (Azul) 4FFFFOO (Amarelo) 4BCSFSF (Pink) &FF0000 (Vermelho) &FFOOFF (Magenta) 4ABABSAB (Cinza claro) 44F2F4F (Violeta) 50 Incorporado - Incorporado significa que você especifica as regras de CSS no cabeçalho do documento. As regras incorporadas afetam somente a página atual. Inline - Inline significa que você especifica as regras de CSS dentro da tag de HTML. Essas regras afetam somente a tag atual. 10.3.1 Estilos Externos Para definir um conjunto de regras de estilo que você pode facilmente aplicar em alguma página do seu site, é preciso colocar as regras em um arquivo de texto. Você pode criar este arquivo com um editor de textos simples, como o Notepad do Windows, e dar ao nome desse arquivo a extensão .css. Sempre que quiser utilizar esses estilos em uma nova página, basta colocar uma tag <LINK> no cabeçalho que referencie esse arquivo .css. Veja o exemplo: Arquivo OrgaoColegiado.css H4 ( font-family: 'Arial'; font-size: 14pt; color: blue Agora, para utilizar os estilos definidos neste arquivo .css você precisa adicionar a tag a seguir ao cabeçalho da página, onde nome do arquivo é uma referência absoluta ou relativa ao arquivo .css. <LINK REL="STYLESHEET" HREF=" OrgaoColegiado. css" TyPE="text/css"> OBS: Você deve inserir este texto entre as tags <HEAD>...</HEAD>, e colocar a localização correta do seu arquivo e seu nome. 10.3.2 Estilos Incorporados Se quiser criar um conjunto de estilos que se aplicam a uma única página, você pode configurar os estilos exatamente como fizemos no exemplo dos estilos externos - mas em vez de colocar as tags <STYLE->...</STYLE>, e as regras em um arquivo separado, coloque estas tags na própria página 51 HTML. A estrutura básica de uma página da web que utiliza estilos incorporados é semelhante ao seguinte código: <HTML> <HEAD> <TITLE>Exemplo Estilos Incorporados</TITLE> <STYLE TYPE="text/css"><!-— PL background-color: fFFFFFF; font-family:'Comic Sans MS'; font-size: 14pt > —-></STYLE> </HEAD> </BODY> </HTML> 10.3.3 Estilos Inline Os estilos inline são os que têm menos efeitos. Eles afetam somente a tag atual - não outras tags na página e tampouco outros documentos. A sintaxe para definir um estilo inline é a seguinte: Exemplo: <A STYLE="color: green; text-— decoration: none" HREF="http://www.unesp.br"> Note que em vez das tags <STYLE>...</STYLE>, você apenas utiliza um atributo STYLE dentro da tag para definir o estilo. E, em vez de colocar as regras de CSS entre colchetes, você as coloca entre aspas, separando-as com ponto-e-vírgula como de costume. 10.4 Tags Personalizadas Com as classes de estilo, é possível definir diversas variações de uma única tag. Por exemplo, você poderia fazer um estilo de parágrafo "texto alinhado à direita", um estilo de parágrafo "texto centralizado" e assim por diante, criando múltiplos temas em torno da tag de parágrafo. (<P>) 52 Você pode definir classes de estilo tanto em folhas de estilo externa como nas incorporadas. (Não há sentido em definir uma classe em um estilo inline!) A sintaxe é praticamente idêntica à sintaxe normal para os estilos externo e incorporado, com adição de um ponto e o nome da classe depois do elemento na qual será utilizado o atributo. <STYLE TYPE="text/css"><!-— elemento.nomedaClasse (atributo:valor; ... ) —-></STYLE> Exemplo: Adicionar esta TAG dentro da TAG <Head> da página index.html: <STYLE TYPE="text/css"><!-— A.meuslinks ( color: blue; text-decoration: none > —-></STYLE> Depois apenas adiciono o atributo CLASS="meuslinks" aos links em que eu desejar que fiquem azuis e não-sublinhados. Veja como deve ficar: <A CLASS="meuslinks" HREF="EstiloTexto.html"> Estilo de Texto [E III Banca || (5) 0 O 2] saca fc] Ejs bye | [600] BB] SD [fee doa 55 10.5 Atalhos e atributos de CSS 10.5.1 Atalhos de CSS Alguns atributos de CSS lhe permitem fazer diversas configurações em uma declaração. Por exemplo, suponha que você queira definir diversos aspectos da fonte utilizada para tags H1, como segue: H1 ( font-style: italic; font-weight: bold; font-size: 18pt; font-family: 'Times Roman') Como alternativa a especificar todas essas formatações de fonte individualmente, você pode utilizar o atributo font: para defini-las todas de uma só vez, assim: H1 ( font: italic bold 18pt 'Times Roman') Note como diversos valores - itálico, negrito, 18pt e Times Roman - são separados apenas por um espaço em branco. Essas regras abreviadas certamente poupam espaço e tempo de digitação. 10.5.2 Atributos de CSS Cor de fundo, imagem, transparência. Rolagem do fundo / Marca d'água. background-image Imagem de fundo. Cor de fundo ou transparência. Posicionamento da imagem de fundo. background-repeat Configuração lado-a-lado background background-attacnment background-color background-position border border-bottom border-bottom-color border-bottom-style border-bottom-width border-color border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width border-style border-top border-top-color border-top-style border-top-width border-width clear clip color cursor display filter float 56 da imagem de fundo. Largura, estilo e cor de todas as 4 bordas. Largura, estilo e cor da borda inferior. Cor da citada borda. Estilo da citada borda. Largura da citada borda. Cor das 4 bordas. Largura, estilo e cor da borda esquerda. Cor da borda citada. Estilo da borda citada. Largura da borda citada. Largura, estilo e cor da borda direita. Cor da borda citada. Estilo da borda citada. Largura da borda citada. Estilo de todas as 4 boras. Largura, estilo e cor da borda superior. Cor da borda citada. Estilo da borda citada. Largura da borda citada. Largura de todas as 4 bordas. Elementos flutuantes à esquerda ou à direita de um elemento. Parte visível de um elemento. Cor de primeiro plano. Tipo de ponteiro do mouse. Se o elemento é exibido e o espaço é reservado para ele. Tipo de filtro aplicado ao elemento. Se o elemento flutua. font Ofont-face font-family font-size font-style Fonte-variant font-weight height QOimport left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-left margin-right margin-bottom margin-top overflow padding 57 Estilo, variante, peso, tamanho e altura da linha do tipo de fonte. Incorporação da fonte ao arquivo HTML. Tipo de fonte. Tamanho da fonte. Fonte itálico. Fonte bold. Peso da fonte de claro a negrito. Altura exibida ao elemento. Folha de estilo a importar. Posição do elemento em relação a margem esquerda da página. Distância entre as letras. Distância entre linhas de base. Tipo, imagem e posição do estilo da lista. Marcador de item de lista. Posição do marcador de item da lista. Marcador de item de lista alternativo. Tamanho de todas as 4 margens. Tamanho da margem esquerda. Tamanho da margem direita. Tamanho da margem inferior. Tamanho da margem superior. Exibição de imagens que são maiores do que suas molduras. Espaço em torno de um elemento em todos os lados. 2) Crie uma nova página chamada Exercicio1.html e deixe-a com o seguinte layout: =[efx Arquivo Editar Exibir Favoritos Ferramentas Ajuda | *->- Qu dunga|i sa. a Endereço [E) CiiDocuments and Settings|VaressalMeus dacumentosiCursolOrgancolegiado!xercidol htm =] em [une > Barra de Ferramentas (Imagens) PBasgas Links Unesp Receita Federal E [E] Concluído DT Es computador hun) SADO » [gm] efe | Qu] De] [Me | Dejo [RAE vis a) O texto deverá ser em cor azul com tamanho 3. b) A Linha horizontal deve ser cinza e tamanho 2. c) Para cada figura colocar um texto para aparecer com for posicionado o mouse sobre a imagem. O texto a seguir colocar para cada figura seguindo a ordem (Buscar, Mostrar todos, Registro Anterior, Próximo Registro, Salvar, Limpar, Excluir). d) Para os links fazer para o site da Unesp e da Receita Federal. 3) Em outra página criar uma lista não ordenada com o tipo Square com os seguintes itens: Cursos de Graduação: Agronomia Biologia 61 Ciência da Computação Direito Medicina Nutrição Odontologia Pedagogia Zootecnia Para cada linha fazer na fonte tamanho 2, alterar as cores das linhas em verde e marrom. BEE E j | +» Quad e938:585:.4 Endereço [E] CADocuments and Settings|fanessalfteus documentos! CursolOrgaoColegiadotExerciiaZ,html =] er ES E Cursos de Graduação = Agronomia = Biologia = Ciência da Computação = Direito = Medicina = Nutrição = Odontologia = Pedagogia = Zootecnia Ei [E] concluído Rn] 6 2/00 *) rc) se] Mc] Or o] E) Be) Ge) Ge ffEE 61] RO 197 62 4) Criar uma página com o nome Exercio3.html com o seguinte layout: BEE as Endereço [EB] Cipocaments and SettingstVanessaipeus documentosfCurso(OrgaoColegado Exercios html =] em Junio» a Notas dos alunos fel [Eltnams POD Eres Anca|| 8 AO *|| Ge) Sel me) e.) Er.) De) Gefor. | [6% DZ DA 16:26 5) Construir a tela de cadastro de Órgão Colegiado como demonstrado na figura a seguir. Salvar esta página como ColegiadoOrgaoManutencao.htm!: 65 7) Criar uma Folha de Estilo com nome de Exercicio.css e realizar as seguintes tarefas: a) Criar estilo para TAG de link para que não tenha linha sublinhada e seja da cor azul b) Criar estilo para a TAG H3 com as seguintes propriedades: cor azul, fonte Arial, tamanho 12pt. c) Criar estilo para a TAG H1 com as seguintes propriedades: cor azul, fonte Arial, tamanho 16pt. d) Criar estilo com nome de nomeCampo com as seguintes propriedades: cor preta, fonte Arial, tamanho 12pt. e) Fazer a chamada desta folha de estilo nas páginas menu.html, rodapé html, principal.html, Exercicio1 .html, Exercicio2.html, Exercicio3.html f) Na página principal.html colocar a TAG H1 para o Título da página. 9) Nas páginas Exercicio1.html, Exercicio2.html, Exercicio3.html colocar a TAG H3 para os Títulos das páginas. 8) Com base no exercício 5 (formulário de Órgãos Colegiados), utilizar o arquivo CSS padrão da Unesp (folha.css), realizando as seguintes tarefas:[ e-> Onda SS|B SE or UNIVERSIDADE ESTADUAL PAULISTA unesp “JÚLIO DE MESQUITA FILHO” Colegiado UNESI + Manutenção do Órgão Colegiado Unidade FACULDADE DE ENGENHARIA DE ILHA SOLTEIRA Tipo Colegiado concrEGação Órgão Colegiado Nome [congregação DA FACULDADE DE ILHA SOLTEIRA sigla [cris Status ATIVADO | E Data Data Ativação [15/10/2000 Desa tsa Tas Órgão de Origem Busesr Órgão Superior Busesr Grgão criado com o objetivo de aprovar normas da unidade, = Documentação Excluir. Salvar 66 a) Inclua dentro da tag de cabeçalho <link href="folha.css" rel="stylesheet" type="text/css"> a) Dentro da tag BODY adicone: class="FundoPaginalnterna* b) Dentro da tag TD do “Colegiado da Unesp” adicione: class="NomeArea" c) Dentro da tag TD do “Manutenção do Órgão Colegiado” adicione: class="TituloDestaque2* d) Dentro da tag TD dos títulos “Unidade”, “Tipo Colegiado”, “Órgão Colegiado” adicione: class="tabela-titulo“ e) Dentro da tag TD dos nomes dos campos de formulário adicione: class="tabela-linha" f) Para todos os campos de formulário adicione dentro de suas tags: class="itens-form* 9) Para fazer o rodapé da página adicionar o código abaixo, antes de fechar a Tag BODY: <table width="768" border="0" cellpadding="0" cellspacing="0" id="Rodape"> <tr> <td height="60" align="left" class="RodapeFundo"><table width="100%" height="60" border="0" cellpadding="0" cellspacing="0" id="MenuRodape"> <tr> <td width="300" class="RodapeDestaque"> Secretaria Geral <td><div align="center"><a href="../" target=" blank" class="RodapeTexto">Home</a></div></td> <td width="2" class="RodapeDivisor"><div align="center"></div></td> <td><div align="center"><a href="../" class="RodapeTexto">Contato</a></div></td> <td width="2" class="RodapeDivisor"><div align="center"></div></td> 67 <td><img src="imagens/spacer.gif" width="265" height="30"></td> <td><div align="center"><a href="../" target=" top" class="RodapeTexto">Sair do Sistema</a></div></td> </tr> </table></td> </tr> </table> <table width="768" border="0" cellspacing="0" cellpadding="0"> <tr> <td><table width="567" border="0" align="center" cellpadding="0" cellspacing="0" id="desenv"> <tr> <td height="25"><div align="center"><span class="desenvTXT">UNESP - Universidade Estadual Paulista " Jsuacute;lio de Mesquita Filho" </span></div></td> </tr> <tr> <td height="25"><div align="center">Reitoria</div></td> </tr> </table></td> </tr> </table> <table width="768" border="0" cellpadding="0" cellspacing="0"> <tr class="desenvPor"> <td height="25" class="desenvPor"><div align="center">Tecnologia e Desenvolvimento <a href="http://www.unesp.br/ai" target=" blank'><br> Assessoria de Informática</a> - <b>GRUPO DE SISTEMAS</b> <br> <br> <img src="http://shelob.unesp.br:2000/images/gscc.gif" /> <br> </div></td> </tr> </table>
Documentos
Videoaulas
perguntas
Copyright © 2024 Ladybird Srl - Via Leonardo da Vinci 16, 10126, Torino, Italy - VAT 10816460017 - All rights reserved