Certificado ISO 9001:2000 Nº /98. Centro de Informática CETEP Quintino Elaborada por: Wanderson Mirandela
|
|
- Mariana Dina Peixoto Lima
- 8 Há anos
- Visualizações:
Transcrição
1 Certificado ISO 9001:2000 Nº /98 Centro de Informática CETEP Quintino Elaborada por: Wanderson Mirandela
2 A POLÍTICA DA QUALIDADE DO CI Prover cursos de nível básico profissionalizante na área de Informática, adequados à realidade do mercado de trabalho, buscando a melhoria contínua dos serviços prestados e da eficácia do Sistema de Gestão, de forma a garantir a plena satisfação dos seus alunos e colaboradores, através do atendimento aos requisitos da norma NBR ISO 9001:2000. O CURSO DE WEBDESIGN O treinamento de um Web Designer é baseado em um conteúdo que visa familiarizar os participantes não apenas para a criação, mas também a manutenção de Web Sites, compreender os fatores mais importantes no design de um site, desenvolver conteúdo para a web, utilizar ferramentas para a gestão de Home Pages, utilizar-se do tratamento digital de informações, além de um conjunto de diversas soluções gráficas. Nos dias atuais, ser um Web Designer é ter uma sólida profissão, com uma forte tendência à expansão deste mercado, em virtude do avanço da tecnologia. Assim, o aluno estará apto a criar páginas pessoais e profissionais para a internet. Utilizando algumas das mais modernas e importantes tecnologias do mercado. APOSTILA DE WEBDESIGN Módulo de HTML Equipe de Elaboração Wanderson Mirandela Revisão Amanda Tanaka Aprovação Sandra Regina Barbosa Apostila de Html Curso WebDesign 1
3 Índice 1. HTML - Introdução Iniciando um documento TAGs usados no início do documento Títulos e subtítulos Formatação de textos HTML Imagens Links Listas Listas ordenadas Listas não ordenadas Atributos adicionais do elemento UL Refresh Page 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 17 Apostila de Html Curso WebDesign 2
4 6. Frames Estrutura Sintaxe FRAMESET ROWS COLS FRAME SRC NAME SCROLLING NORESIZE TARGET BORDER Música Caracteres Especiais Exercícios de Fixação Bibliografia HTML Introdução Apostila de Html Curso WebDesign 3
5 HTML significa Hypertext Markup Language e é a linguagem de descrição de documentos usada na WWW - World Wide Web. Ela é orientada por marcadores, chamados TAGs. Os TAGs são os comandos utilizados pela linguagem HTML. Cada TAG informa ao programa visualizador (o Browser), como ele deverá formatar o texto, que deve estar dentro dos sinais de menor que (<) e maior que (>). Exemplo: <HTML>, <BODY>, etc. Os Tags podem ser únicos ou duplos, com início e fim. Quando forem duplos, a Barra de Divisão ( / ) indicará, na segunda Tag, o seu término. Exemplos: TAG único: <BR> TAG duplo: <P>...</P> INICIANDO UM DOCUMENTO Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>. Dentro destes tags, tem-se duas seções básicas: HEAD BODY Contém parâmetros de configuração do documento. Contém o documento em si. A estrutura básica de um documento HTML é: <title>título da home page</title> <body> Conteúdo da home page! TAGS USADOS NO INÍCIO DO DOCUMENTO <HTML>...</HTML> Envolvem todas as seções de um documento (HEAD e BODY). <HEAD>...</HEAD> Apostila de Html Curso WebDesign 4
6 Envolvem a seção de cabeçalho do documento. <TITLE>...</TITLE> Indica o título do documento para o Browser. Os Browsers apresentam este título na Barra de títulos da sua Janela no Windows. <BODY>...</BODY> Envolvem a seção de corpo do documento. Aqui fica o conteúdo principal da Home Page. Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a opção: BACKGROUND, descrita mais adiante TÍTULOS E SUBTÍTULOS Para demarcar títulos e subtítulos, use os TAGs de HEADER (H1 a H6), juntamente com as opções CENTER ou BLINK. Veja alguns exemplos: Texto inserido entre <H1> e </H1>: Texto inserido entre <H2> e </H2>: Texto inserido entre <H3> e </H3>: Texto inserido entre <H3><CENTER> e </CENTER></H3> : FORMATAÇÃO DE TEXTOS Há dois tipos de formatação em HTML: lógica e física. Os efeitos de apresentação na tela são os mesmos: o motivo da distinção entre eles se deve à idéia básica de independência entre especificação e apresentação. Quando formatamos um trecho de texto como cabeçalho de nível 1, não explicitamos se esse tipo de cabeçalho deve ser em alguma fonte determinada, em um tamanho determinado, justificado à esquerda ou à direita, ou centralizado. Esses detalhes de apresentação são deixados para o browser - o dispositivo Apostila de Html Curso WebDesign 5
7 de apresentação do documento - que pode ser configurado de acordo com o leitor (usuário final). A formatação lógica segue o significado lógico do texto marcado: um endereço de e- mail, uma citação etc. Sua apresentação final varia conforme o browser, podendo oferecer resultados mais ricos. A formatação física especifica explicitamente o estilo que se quer para o texto: itálico, grifado etc. Sua apresentação final não sofre grandes variações. Estilos Lógicos <CITE> Para títulos de livros, filmes, e citações curtas. Exemplo: Assisti Guerra nas Estrelas umas oito vezes! <CODE> Para indicar trechos de código de programas. Exemplo: for (x=0); cl &&(!feof(stdin)); x++)); <DFN> Indica definição de uma palavra, em geral apresenta o texto em itálico. Exemplo: CERN: Centre d Éstudes et Recherches Nucleaires <EM> Ênfase, também normalmente apresentado em itálico. Exemplo: É preciso pesquisar muito para encontrar o termo exato. <KBD> Indica uma entrada via teclado. Exemplo: Para ler mensagens recebidas, digite pine -i <SAMP> Indica uma seqüência de caracteres, por exemplo uma mensagem de erro ou um resultado. Exemplo: O resultado do primeiro applet é: Hello, World! <STRONG> Forte ênfase, mostrado normalmente em negrito. Exemplo: Antes de enviar um , confira o campo Subject:! <VAR> Indica variáveis, ou valores que o usuário deverá escrever; geralmente mostrado em itálico. Exemplo: No campo Login, escreva guest. Estilos Físicos Apostila de Html Curso WebDesign 6
8 <B> Quando disponível no browser, é mostrado em negrito (em alguns browsers, pode aparecer sublinhado) <I> Itálico (em alguns casos, caracteres inclinados) <TT> Tipo teletype - fonte de espaçamento fixo. <U> Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentação de links. <STRIKE> ou <S> Frase riscada. <BIG> Fonte um pouco maior. <SMALL> Fonte um pouco menor. <SUB> Frase em estilo índice, como em H 2 O. <SUP> Frase em estilo expoente, como em Km 2. Observação: As Marquees É possível obter o efeito de animação de texto, através do tag <MARQUEE>. Atributos de largura e direção do efeito permitem diversas apresentações diferentes. Por exemplo (o efeito só é executado no Internet Explorer e em versões recentes do Netscape - e de maneiras diferentes): <MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT>Texto</MARQUEE> <MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT>Texto</MARQUEE> <MARQUEE BEHAVIOR=ALTERNATE DIRECTION=LEFT>Texto</MARQUEE> <MARQUEE WIDTH=30%>Texto</MARQUEE> <MARQUEE SCROLLAMOUNT=50>Texto</MARQUEE> 2. HTML Apostila de Html Curso WebDesign 7
9 2.1 - IMAGENS Pode-se inserir imagens dentro de um documento HTML. Os formatos mais usados são o GIF e o JPG, ambos com compactação de pixels. Antes de criar uma página com dezenas de figuras e fotos, lembre-se de que ao criar e testar sua página em seu micro, todas as imagens serão carregadas quase que instantaneamente. Contudo, quando sua página estiver na internet, o tempo para que uma imagem grande seja carregada pode tornar o aceso a sua página muito difícil. A quantidade de cores também influi no tamanho da imagem. Se você digitalizar uma imagem com 65 mil cores, o tamanho do arquivo será muito maior do que ela tivesse sido capturada com 256 cores. Para inserir uma imagem, usa-se o tag <IMG>, que é único, não exigindo um tag para finalizar. Exemplo: <IMG SRC="figura1.gif"> Os arquivos com as imagens deverão estar armazenados no seu Provedor de acesso, juntamente com o documento HTML, para que a imagem seja visualizada pelo usuário. Atributos básicos de imagem ALT Indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no lugar da imagem nos browsers (aquela informação que descreve uma imagem quando paramos a seta do mouse sobre ela). É recomendável que esteja sempre presente. <IMG SRC="c:\pasta\imagem.gif ALT="descrição_da_imagem"> WIDTH e HEIGHT Atributos de dimensão da imagem, em pixels. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicamos a inserção de uma imagem. Uma das vantagens de se usar esses atributos é que o browser pode montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser reservado para elas. <IMG SRC="imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura"> BORDER Quando uma frase ou palavra é marcada como um link, ela se apresenta sublinhada; quando uma imagem se torna um link, ganha uma borda azul que indica esta condição. Porém, por questões de apresentação, nem sempre interessa termos essa borda ao redor da imagem. Assim, com o atributo BORDER, podemos controlar esse detalhe. Apostila de Html Curso WebDesign 8
10 Se quisermos uma borda mais larga... <A HREF="URL"><IMG SRC="imagem" ALT="descrição" BORDER=4></A> Se quisermos uma imagem sem borda... <A HREF="URL"><IMG SRC="imagem" ALT="descrição" BORDER=0></A> OBS: Essa borda pode ser apresentada também em imagens que não são âncora de links. Basta aplicar, por exemplo, a BORDER=N dentro da tag IMG SRC. Exemplo: <IMG SRC="icones/fotoicm.gif" ALT="Foto antiga do ICMC" BORDER=2> Assim, é possível dar mais destaque a uma imagem, sem ser necessário editá-la: Foto Original Foto com Border=3, dentro da tag IMG SRC ALIGN <IMG SRC="imagem" ALT="descrição" ALIGN= alinhamento > Existem também atributos de alinhamento, que produzem os seguintes resultados: ALIGN=TOP Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado não seja muito bom. ALIGN=MIDDLE Alinha o texto adjacente com o meio da imagem, embora com linhas compridas o resultado não seja muito bom ALIGN=BOTTOM Alinha o texto adjacente com a parte de baixo da imagem (default) ALIGN=RIGHT Alinha imagem à direita, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem. ALIGN=LEFT Alinha imagem à esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem. OBS: Para ter duas imagens, uma em cada margem, numa mesma linha, escreva: <IMG align=left SRC="imagem.gif" alt="imagem"><img align=right SRC="imagem.gif" alt="imagem">...e se pode escrever à vontade entre as imagens! Apostila de Html Curso WebDesign 9
11 Isso resulta em:...e se pode escrever à vontade entre as Imagens LINKS Com HTML é possível fazermos ligações de uma região de texto (ou imagem) para um outro documento. Para inserir um link em um documento, utilizamos o tag <A>, da seguinte forma: <A HREF = "arq_destino"> texto ou figura </A> onde: arq_destino é o URL (Uniform Resource Local) do documento de destino; texto ou figura é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado para o documento de destino. Atributos <A> tem vários atributos, utilizados de acordo com a ação associada ao link. Os mais usados são: HREF Indica o arquivo de destino da ligação de hipertexto. TARGET Indica o frame em que será carregado o arq_destino. 3. Listas LISTAS ORDENADAS Listas ordenadas são também denominadas listas numeradas, pois, quando um navegador encontra um 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> e finalizadas com o TAG </OL>. Cada item utiliza O TAG <LI>. Exemplo: Apostila de Html Curso WebDesign 10
12 <OL> <LI>É facil fazer uma Home Page: <LI>Tem que ter paciência <LI>Bons recursos <LI>E não exagerar em imagens </OL> Resultado Final: 1. É facil fazer uma Home Page: 2. Tem que ter paciência 3. Bons Recursos 4. E não exagerar em imagens LISTAS NÃO ORDENADAS Listas não ordenadas são muito parecidas com as ordenadas. A 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, ou uma bola vazia. Elas são iniciadas com o TAG <UL> e são respectivamente terminadas com </UL>, e seus elementos são descritos igual às nem as numeradas: com <LI>. Exemplo: <UL> <LI>Internet <LI>Intranet <LI> </UL> Resultado: Internet Apostila de Html Curso WebDesign 11
13 Intranet ATRIBUTOS ADICIONAIS DO ELEMENTO UL O Netscape introduziu o atributo TYPE também em listas ordenadas. Ele recebe o tipo do marcador que será utilizado ao lado dos itens da lista, o qual pode ser CIRCLE, SQUARE OU DISC, respectivamente, bola, quadrado, ou uma bola vazia. Exemplo: <title>listas</title> <body> Listas com Marcadores <b>sem atributos</b>: <UL> <LI>Internet <LI>Intranet <LI> </UL> Listas com Marcadores e o type <b>square</b>: <UL type="square"> <LI>Internet <LI>Intranet <LI> </UL> Listas com Marcadores e o type <b>circle</b>: <UL type="circle"> <LI>Internet <LI>Intranet <LI> </UL> Listas com Marcadores e o type <b>disc</b>: <UL type="disc"> <LI>Internet <LI>Intranet <LI> </UL> Apostila de Html Curso WebDesign 12
14 4. Refresh Page São páginas normalmente sem links, que chamam outras depois de um determinado tempo dentro dela, sem nenhuma interferência do internauta. Para que o Refresh ocorra, basta colocar no documento a seguinte linha de comando, dentro do HEAD: <META HTTP-EQUIV="REFRESH" CONTENT="segundos; URL=Documento.htm"> Exemplo: <HTML> <HEAD> <META HTTP-EQUIV="REFRESH" CONTENT="5; URL= <TITLE> Título da Página </TITLE> </HEAD> <BODY bgcolor="cornsilk"> <center><font color="darkred" size="5" face="simsun">esta é uma página de teste de</font></h1></center> <center><font color="darkred" size="7" face="simsun">redirecionamento</font></h1></center> </BODY> </HTML> 5. 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) Apostila de Html Curso WebDesign 13
15 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 um destaque. O TAG dela é: <HT>texto em destaque</ht> 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 END OF TABLE ROW (ELEMENTO TR) A TAG <TR> indica o fim 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>, com exceção da última linha da tabela, que dispensa o TR porque o uso da própria marcação de fim de tabela </TABLE> torna implícito o fim da linha ATRIBUTOS PARA A TABELA As marcações das tabelas podem apresentar resultados diferentes, se acompanhadas de alguns atributos. Os principais são: BORDER Apostila de Html Curso WebDesign 14
16 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 aos alunos do Centro de Informática: 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: 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> <TD>TESTE</TD> <TD>TESTE2</TD> <TD>TESTE3</TD> <TR> <TD>TESTE4</TD> <TD>TESTE5</TD> <TD>TESTE6</TD> Apostila de Html Curso WebDesign 15
17 </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> <TD ALIGN="CENTER">Centro</TD> <TD ALIGN="LEFT">Esquerda</TD> <TD ALIGN="RIGHT">Direita</TD> <TR> </TABLE> Veja o resultado: VALIGN Apostila de Html Curso WebDesign 16
18 Pode ser aplicado a TH e TD e define o alinhamento do texto em relação às bordas superior e inferior. Aceita 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: 6. Frames Os FRAMES são divisões de telas do seu browser que permitem a utilização de vários documentos no formato HTML. Este recurso permite criar páginas HTML que podem ser visualizadas simultaneamente na janela do Browser, compartilhando o espaço disponível. Sem o recurso de frames, para visualizar três páginas diferentes, por exemplo, o usuário necessitaria acessa-las individualmente por meio de uma página inicial que contivesse um menu, ou então, acessar uma página por vez, no browser 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: Apostila de Html Curso WebDesign 17
19 <HTML> <HEAD> <TITLE> Título do Documento </TITLE> </HEAD> <FRAMESET> Sintaxe dos Frames </FRAMESET> </HTML> SINTAXE Primeiramente devemos fazer um documento HTML para ele ser especificado pela sintaxe de FRAMES, no caso chamado de Frame1.htm. <HTML> </HTML> <HEAD> <TITLE> Frame 1 </TITLE> </HEAD> <BODY> <FONT SIZE=6> <B> Frame n1 </B> </FONT> </BODY> FRAMESET A primeira especificação é o FRAMESET, que é acompanhado pelas definições ROWS e COLS ROWS Exemplo: Especifica o numero de FRAMES e a altura de cada um. <FRAMESET ROWS="20%,30%,50%"> <FRAME SRC="FRAME1.HTM"> Apostila de Html Curso WebDesign 18
20 <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> </FRAMESET> Neste exemplo de cima, ele chama 3 FRAMES, o 1º com 20% da tela, o 2º com 30% da tela, o 3º com 50% da tela (ambos em altura) COLS Exemplo: Especifica o numero de FRAMES e a largura de cada um. <FRAMESET COLS="20%,30%,50%"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> </FRAMESET> Neste exemplo de cima, ele chama 3 FRAMES, o 1º com 20% da tela, o 2º com 30% da tela, o 3º com 50% da tela (ambos em largura) FRAME A segunda especificação é o FRAME, que é acompanhado pelas definições SRC, NAME, SCROLLING, NORESIZE, TARGET SRC Especifica o documento de formato HTML chamado para o FRAME. Indispensável, por que sem ele o documento aparecerá vazio, só com as divisões. Exemplo: <FRAMESET COLS="20%,30%,50%"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> </FRAMESET> NAME Especifica o nome do documento de formato HTML chamado para o FRAME. É extremamente necessário para o uso do TARGET, que será visto a seguir. Apostila de Html Curso WebDesign 19
21 Exemplo: <FRAMESET COLS="20%,30%,50%"> <FRAME SRC="FRAME1.HTM" NAME="Principal"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> </FRAMESET> SCROLLING Define se o Frame terá barra de rolagem, o default é Auto. Fornece as opções: Yes, No, Auto. Yes - Exibe a barra de rolagem independente do tamanho do documento. No - Não exibe a barra de rolagem, mesmo que o documento seja maior que o tamanho especificado. Auto - Só exibe a barra de rolagem se o documento for maior que a área especificada. Exemplo: <FRAMESET COLS="20%,30%,50%" <FRAME SRC="FRAME1.HTM" SCROLLING="no"> <FRAME SRC="FRAME1.HTM" SCROLLING="yes"> <FRAME SRC="FRAME1.HTM" SCROLLING="auto"> </FRAMESET> NORESIZE Impossibilita o usuário de mudar o tamanho da área especificada do FRAME. Por default o usuário pode mudar esta área. Exemplo: <FRAMESET COLS="20%,30%,50%"> <FRAME SRC="FRAME1.HTM" NORESIZE> Apostila de Html Curso WebDesign 20
22 <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> </FRAMESET> 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="FRAME1.HTM" NAME="Principal"> <FRAME SRC="FRAME1.HTM"> <FRAME SRC="FRAME1.HTM"> </FRAMESET> O Link: <A HREF=" TARGET="Principal"> Microsoft </A> Se você quiser criar um link que chama uma nova tela do browser basta colocar TARGET="um nome que não existe" BORDER Define qual a borda que o FRAME terá. Mais útil na utilização de BACKGROUNDS iguais. Exemplo: Apostila de Html Curso WebDesign 21
23 <FRAMESET COLS="20%,30%,50%" FRAMEBORDER="NO" BORDER=0> <FRAME SRC="FRAME1.HTM" FRAMEBORDER="NO" BORDER=0> <FRAME SRC="FRAME1.HTM" FRAMEBORDER="NO" BORDER=0> <FRAME SRC="FRAME1.HTM" FRAMEBORDER="NO" BORDER=0> </FRAMESET> 7. Música Existem 2 maneiras de colocar músicas em uma home page, através do HTML. A primeira é com o TAG <BGSOUND> que só é reconhecido pelo Internet Explorer. Para utilizar este TAG siga o exemplo : <BGSOUND SRC="arquivo.mid"> Onde arquivo.mid é o arquivo de música. Caso você queira que a música repita-se, adicione o atributo loop="infinite". A segunda maneira é com o TAG <EMBED> que, por ser reconhecido pelo Internet Explorer e Netscape, é recomendado. Para utilizá-lo, siga o exemplo : <EMBED SRC="arquivo.mid"> Obs: É recomendável usar arquivos midi, por serem bem menores que os wavs! 8. Caracteres Especiais Em determinados momentos da criação de página em HTML, pode-se fazer necessário a utilização de caracteres que, normalmente, podem não ser reconhecidos pelo browser. Estes caracteres são chamados caracteres especiais. Veja a tabela a seguir, contendo alguns exemplos: Á Á á á Â Â â â À À à à Apostila de Html Curso WebDesign 22
24 Å Å å å Ã Ã ã ã Ä Ä ä ä Æ Æ æ æ É É é é Ê Ê ê ê È È è è Ë Ë ë ë Ð Ð ð ð Í Í í í Î Î î î Ì Ì ì ì Ï Ï ï ï Ó Ó ó ó Ô Ô ô ô Ò Ò ò ò Ø Ø ø ø Õ Õ õ õ Ö Ö ö ö Ú Ú ú ú Û Û û û Ù Ù ù ù Ü Ü ü ü Ç Ç ç ç Ñ Ñ ñ ñ < < > > & & " " Ý Ý ý ý Þ Þ þ þ ß ß º º ª &170; ¹ ¹ ² ² ³ ³ ƒ ƒ † ‡ ‰ ««± ±»» ¼ ¼ ½ ½ ¾ ¾ 9. Exercícios de Fixação Os exercícios de fixação a seguir estão divididos em níveis, de acordo com o conteúdo desenvolvido nesta apostila. São 5 níveis: Exercícios de fixação Nível 1 1) Estrutura básica em HTML Apostila de Html Curso WebDesign 23
25 <body> 2) Estrutura simples contendo informações <title>meu primeiro site em HTML</title> <body> Esta é a minha primeira página em HTML! 3) Estrutura contendo quebras de linha <title>exemplos de Quebras de Linha</title> <body> Primeira linha contendo texto<br> Segunda linha contendo texto<br> Terceira linha contendo texto<br> Quarta linha contendo texto<p> Quinta linha contendo texto<p> Sexta linha contendo texto<p> Repare a diferença de espaçamento entre as duas tags de quebra de linha. A tag br tem por objetivo inserir uma quebra de linha imediatamente após ser inserida, enquanto a tag p insere duas linhas em branco. 4) Estrutura contendo linhas horizontais divisórias <title>exemplos de linhas divisórias horizontais</title> <body> Paulo <br> Beto<br> João<br><hr> Ana<br> Beatriz<br> Lúcia<br><hr> Apostila de Html Curso WebDesign 24
26 Ao ser inserida no meio desta linha, é mostrada uma barra na próxima linha <hr> e o restante do texto na linha seguinte. 5) Estrutura contendo estilos de texto <title>estilos de texto</title> <body> São vários os estilos que podem ser aplicados no texto, em HTML. Eis alguns exemplos: <p> <b>negrito</b> - aplica o efeito negrito ao texto <br> <i>itálico</i> - aplica o efeito itálico ao texto <br> <u>sublinhado</u> - sublinha o texto <br> <strong>strong</strong> - Similar ao negrito <br> <big>big</big> - faz com que texto aumente de tamanho <br> <small>small</small> - faz com que texto reduza de tamanho <br> <tt>typerwriter</tt> - faz com o texto fique similar ao de uma máquina de escrever <br> <sup>sobrescrito</sup> - Eleva o texto e diminui o seu corpo <br> <sub>subscrito</sub> - Rebaixa o texto e diminui o seu corpo <br> <marquee>marquee - faz com que o texto deslize pela tela </marquee> 6) Estrutura contendo formatação de texto <title>formatação de texto</title> <body> <font size=7 color="blue" face="tahoma">f</font> <font size=6 color="gray" face="impact">o</font> <font size=5 color="silver" face="comic sans ms">r</font> <font size=4 color="lime" face="arial">m</font> <font size=4 color="red" face="times new roman">a</font> <font size=5 color="yellow" face="verdana">t</font> <font size=6 color="darkgreen" face="garamond">a</font> <font size=7 color="lightblue" face="arial black">r</font> 7) Estrutura contendo cor de fundo e texto centralizado <title>fundo colorido e texto alinhado</title> <body bgcolor= darkblue > Apostila de Html Curso WebDesign 25
27 <center><font size=7 color=#ffffff face="arial black">fundo Colorido</font></center><p> <center><font size=5 color=#ffffff face="comic sans ms">esta página contém o fundo colorido com as letras em branco.</font></center> Exercícios de fixação Nível 2 1) Estrutura contendo cor de fundo, alinhamentos de parágrafo e cabeçalhos <title>fundo colorido com parágrafos alinhados e cabeçalhos</title> <body bgcolor=#ffff99> <h1>cabeçalhos</h1> A palavra cabeçalho, acima digitada, é um exemplo de cabeçalho no tamanho H1. Em HTML os cabeçalhos variam de H1 a H6, sendo H1 o maior e a seqüência decrescente. Os cabeçalhos têm o objetivo de servir como títulos, textos simples ou em destaque, pois possuem padrões diferenciados.<hr> <p align= center ><h1>alinhamentos</h1></p> Para alinharmos textos em HTML, utilizamos a tag <b>p align=</b>. Os alinhamentos podem ser de três tipos:<p> <p align= left >left (ou alinhamento à esquerda, que é o padrão de qualquer editor de textos).</p> <p align= center >center (ou alinhamento centralizado).</p> <p align= right >right (ou alinhamento à direita).</p> 2) Estrutura contendo fundo com imagem (arquivo.gif ou.jpeg) <title>fundo contendo imagem</title> <body background="fundocat.jpg"> <p align="center"><font size=6 color=#ffffff face="comic sans ms">bem vindos à minha Home Page</font></p> 3) Estrutura contendo imagens e textos Apostila de Html Curso WebDesign 26
28 <title>imagens com e sem bordas</title> <body bgcolor=#33ccff> <font size=4 face= tahoma color=#330099>para inserir imagens em HTML, como fotos e figuras, é necessário utilizar a tag <b>img src</b>, mais o nome completo do arquivo que será inserido como figura, inclusive a extensão. Algumas imagens podem vir com uma borda, e para retira-la, utiliza-se a tag <b>border=</b> mais o número zero. Exemplo: <p></font> <font size=2 face= tahoma color=#330099> <center><img src= garfield.gif border=0> Imagem contendo a tag border=0</center><br> <center><img src= garfield.gif border=6> Imagem contendo a tag border=5</font ></center><br> 4) Estrutura contendo alinhamento de imagens <title>alinhamento de imagens</title> <body bgcolor=#339999> <img src="garfield.gif" align="bottom"> Esta figura possui o alinhamento <b>bottom</b><br><br><br> <img src="garfield.gif" align="middle"> Esta figura possui o alinhamento <b>middle</b><br><br><br> <img src="garfield.gif" align="top"> Esta figura possui o alinhamento <b>top</b><br><br><br> <img src="garfield.gif" align="left"> Esta figura possui o alinhamento <b>left</b><br><br><br><br><br><br><br><br><br><br> <img src="garfield.gif" align="right"> Esta figura possui o alinhamento <b>right</b> 5) Estrutura contendo alterações nos tamanhos das imagens <title>tamanhos das imagens</title> <body bgcolor=#ffffcc> <img src="garfield.gif"> O tamanho desta figura não foi alterado<p> <img src="garfield.gif" widht=50 height=50> O tamanho foi alterado para width e height 50<p> <img src="garfield.gif" widht=200 height=200> O tamanho foi alterado para width e height 200<p> A tag <b>widht</b> refere-se à largura da imagem e a tag <b>height</b> se refere à altura. Apostila de Html Curso WebDesign 27
29 Exercícios de fixação Nível 3 1) Estrutura contendo link para <title>links para </title> <body bgcolor=#6699cc> Em HTML textos e imagens podem servir como links, ou seja, ligações para outras páginas no próprio micro, sites da internet o qual chamamos URL (Uniform Resource Locator) e até mesmo para facilitar o envio de s.a tag utilizada para criação de links chama-se <b>a href=</b>.<p> Exemplo de link para utilizando texto: <a href=mailto:info.prof@bol.com.br>entre em contato</a><p> Exemplo de link para utilizando figura: <a href=mailto:info.prof@bol.com.br><img src="garfield.gif" border=0></a> 2) Estrutura contendo link para URL <title>links para </title> <body bgcolor=#66ccff> Exemplos de links para URL, ou seja, para endereços de sites já hospedados na internet:<p> Exemplo de link utilizando texto: <a href= Exemplo de link utilizando figura: <a href= src="garfield.gif" border=0 align="middle"></a> 3) Estrutura contendo tabelas <title>tabelas</title> <body bgcolor=#ffcc99> O uso de tabelas é essencial para muitas das páginas existentes na web. Para se utilizar estas tabelas em HTML, necessita-se de mais de uma tag. As mais utilizadas são:<br> <b>table border</b> - Serve para iniciar e finalizar as tabelas em HTML<br> Apostila de Html Curso WebDesign 28
30 <b>tr</b> - Serve para indicar o início e o final de uma linha da tabela<br> <b>td</b> - Serve para indicar cada célula da tabela.<p> <table border> <tr> <td>linha 1 - Coluna 1</td> <td>linha 1 - Coluna 2</td> <td>linha 1 - Coluna 3</td> </tr> <tr> <td>linha 2 - Coluna 1</td> <td>linha 2 - Coluna 2</td> <td>linha 2 - Coluna 3</td> </tr> </table><p> <table border=6> <tr> <td>ana e João</td> <td>ana e Pedro</td> </tr> <tr> <td>maria e João</td> <td>maria e Pedro</td> </tr> </table><p> <table border=0> <tr> <td>brasil</td> <td>chile</td> </tr> <tr> <td>hungria</td> <td>dinamarca</td> </tr> </table> Exercícios de fixação Nível 4 1) Estrutura contendo Listas Ordenadas e Não-Ordenadas <title>listas Ordenadas e Não-Ordenadas em HTML</title> Apostila de Html Curso WebDesign 29
31 <body bgcolor=#6699cc> <H2><p align=center>listas</p></h2> A tag utilizada para inserir Listas Ordenadas é a tag OL (Odered List). Exemplo: <OL> <LI>Primeiro item da lista <LI> Segundo item da lista <LI> Terceiro item da lista </OL><BR> A tag utilizada para inserir Listas Não-Ordenadas é a tag UL (Unordered List). Exemplo: <UL> <LI> Primeiro item da lista <LI> Segundo item da lista <LI> Terceiro item da lista </UL> 2) Estrutura alinhamento Justify de parágrafos <title>alinhamento Justify</title> <body bgcolor=#66ccff> <p align= justify >Quando o Web Design necessitar de um alinhamento mais específico, no caso, o Justificar, que alinha o texto tanto à sua direita quanto à esquerda, será necessário a utilização da tag <b>justify</b>, dentro do p align. Este texto, por exemplo, está alinhado de forma justificada, como em um editor de textos igual ao pagemaker ou ao Microsoft Word.</p> Exercícios de fixação Nível 5 1) Estrutura contendo variações de Marquee <title>teste de Marquee</title> <body bgcolor=#cc9966> <marquee>marquee normal</marquee> <marquee behavior="slide">marquee com behavior (comportamento, tipo) slide</marquee> <marquee behavior="slide" scrollamount=100>marquee com behavior slide e scrollamount (velocidade) 100</marquee> <marquee behavior="alternate">marquee com behavior alternate</marquee> Apostila de Html Curso WebDesign 30
32 <marquee behavior="alternate" scrollamount=50>marquee com behavior alternate e scrollamount 50</marquee> 2) Estrutura contendo background com imagem de fundo fixa <title>background com imagem de fundo fixa</title> <body background="imagem.jpg" bgproperties= fixed > <p align="center"><font size=6 color=#ffffff face="comic sans ms">bem vindos à minha Home Page</font></p> 3) Estrutura para transformar o Site em página inicial do usuário <title>página Inicial</title> <body bgcolor=#669999> <p align="center"><font size=6 color=#ffffff face="impact">welcome to Fire s Page</font></p> <a href= # onclick= this.style.behavior= url(default#homepage) ; this.sethomepage( ); >Clique aqui</a> Apostila de Html Curso WebDesign 31
33 10. Bibliografia Html 4 Prático e Rápido Autor: Ramalho, Jose Antonio Alves Editora: Berkeley Brasil Programando em Html 4.0 Autor: Marcondes, Christian Alfim Editora: Erica Apostila de Html Curso WebDesign 32
Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com
Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA INFORMÁTICA E METODOLOGIA - SUBSEQUENTE 1 Quem sou eu? Ana Paula Alves de Lima Formação: Bacharel em Sistemas de Informação;
Leia maisIntrodução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira
Introdução Introdução a HTML Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA mario@deinf.ufma.br Página Web: É um documento composto de texto e códigos especiais, chamados tags, que especificam
Leia maisVejamos 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
Leia maisWEB DESIGNER WEB DESIGNER
WEB DESIGNER 1 WEB DESIGNER INICIO DO CURSO DE HTML 4.0 Toda vez que você acessar um site (veja tópico Word Wide Web) por meios de domínios quando adiciona a URL na barra de endereço, do seu Navegador
Leia maisftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia5.zip 1996 Tutorial - Autoria em World Wide Web
RNP REDE NACIONAL DE PESQUISA Centro Regional de Brasília CR/DF ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia5.zip janeiro 1996 Tutorial - Autoria em World Wide Web Parte IV - Hypertext
Leia maisAutoria Web HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza
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 Apresentar
Leia maisAplicação para Web I. Começando a compreender o HTML
Aplicação para Web I Começando a compreender o HTML A Linguagem da WEB O HTML ou HyperText Markup Language linguagem universal compreendida pelos navegadores web (browsers) para a comunicação utilizando
Leia maisCEEP-CENTRO ESTADUAL DE EDUCAÇÃO PROFISSIONAL PEDRO BOARETTO NETO INTERNET E PROGRAMAÇÃO WEB INICIO DE HTML
INICIO DE HTML Neste tutorial usaremos o já conhecido Notepad++ ou Bloco de Notas e um Browser (Chrome, Mozilla ou Internet Explorer). Para nossos exemplos usaremos o Chrome. A estrutura básica de uma
Leia maisTECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com
Luiz Leão luizleao@gmail.com http://luizleao.com CONTEÚDO PROGRAMÁTICO DESTA UNIDADE HTML TAG S HTML LINGUAGEM HTML Hypertext Markup Language Interpretada pelo navegador Não linearidade da informação Formatação
Leia maisINTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Estrutura básica do HTML Um documento HTML deve estar delimitado pela tag e . Dentro deste documento, podemos ainda distinguir
Leia maisProf.: Melba Lima Gorza Aula Introdutória de HTML. Componentes do HTML. Estrutura de um documento XHTML
Prof.: Melba Lima Gorza Aula Introdutória de HTML Componentes do HTML Estrutura de um documento XHTML primeiro Documento XHTML meu primeiro documento XHTML
Leia maisLinks e Frames José Antônio da Cunha
Links e Frames José Antônio da Cunha Links Até agora, produzimos documentos simples. Mas os documentos de hipertexto têm como principal característica, fazer ligações com outros hipertextos. Os pontos
Leia maisPÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Aula 06: Introdução Linguagem HTML
PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Aula 06: Introdução Linguagem HTML O Desenvolvimento Web O desenvolvimento web é o termo utilizado para descrever atividade relacionada
Leia maisProgramação de Servidores CST Redes de Computadores
Programação de Servidores CST Redes de Computadores Marx Gomes Van der Linden http://marx.vanderlinden.com.br ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) HMTL Arquivo-texto
Leia maisAula 2: Listas e Links
Aula 2: Listas e Links Nesta segunda aula, você aprenderá a utilizar listas numeradas ou não, a entender o que são listas de definições e como fazer referências a outros documentos. Vamos entender a diferença
Leia maisWeb Design Aula 11: XHTML
Web Design Aula 11: XHTML Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação HTML 1.0-2.0: Havia hipertextos, não havia preocupação com a apresentação HTML 3: Guerra dos Browser (Microsoft
Leia maisHTML. Conceitos básicos de formatação de páginas WEB
HTML Conceitos básicos de formatação de páginas WEB HTML HyperText Markup Language Linguagem utilizada para criar hipertexto na web Ou seja, criar documentos estruturados utilizando para tal um conjunto
Leia maisHTML Página 29. Índice
PARTE - 5 HTML Página 29 Índice HTML - Hiperlinks... 30 Frames com links... 31 O código fonte do arquivo índex.htm... 31 Conhecendo os comandos border e bordercolor do frame... 31 Conhecendo os comandos
Leia maisProfa. Reane Franco Goulart
Profa. Reane Franco Goulart A linguagem HTML (Hypertext Markup Language) tem o objetivo de formatar textos através de marcações especiais denominadas tags, para que possam ser exibidos de forma conveniente
Leia maisRelatório: Página HTML
Universidade do Minho Escola de Engenharia Relatório: Disciplina: Linguagens de Programação Curso: Engenharia e Gestão Industrial Carolina Fernandes N.º40532 Guilherme Bacinello N.º42119 Diana Rocha N.º40536
Leia maisScientific Electronic Library Online
FAPESP - CNPq BIREME - FapUNIFESP Scientific Electronic Library Online Manual de Codificação de Tabelas para xhtml Projeto PMC São Paulo Novembro 2013 INTRODUÇÃO Este manual tem o objetivo de mostrar passo
Leia mais¾ Ò Ñ Ó ÐÙ Ó ÓÑÔÐ Ñ ÒØ ËÙ Ø ÒØ Ó ÓÑÔÐ Ñ ÒØ Ø ÓÒ Ó Ù ÝÒ Ñ Ò ÖÓ ÝÒ Ñ Ð Ø ÃÐ Ù Ï ÐØÒ Ö Å ÖØ Ò ÁÒ ÐÑ Ò¹ËÙÒ Ö ÒØÓÒ Ó Ë Ö Ó Ô Ö Ó È ÙÐÓ Å Ö Ò ÁÒ Ø ØÙØÓ Í ÊÙ Ø ÒÓ ÅÓÙÖ ½¾ ¹ Ö Ó ÑÔÙ ÍÒ Ú Ö Ø Ö Ó ÇÒ Ò È ¼º¾½¼¹
Leia maisDESENVOLVIMENTO WEB I - 7122
6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que
Leia maisHTML Página 1. Índice
PARTE - 1 HTML Página 1 Índice HTML A HISTÓRIA... 2 O COMEÇO E A INTEROPERABILIADE... 3 Primeira Página... 4 Entendendo seu código... 5 Abrindo o código fonte da sua página... 6 Comentários na página...
Leia mais6.2 - Formulários: form <form action="url_de_script" method="método">...</form> form action method POST GET exceto outros formulários form
6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que
Leia maisWebdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza
Webdesign Introdução a 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 Apresentar as
Leia maisA estrutura de um documento HTML apresenta os seguintes componentes:
A estrutura de um documento HTML apresenta os seguintes componentes: Titulo do Documento texto, imagem, links,... As etiquetas HTML não são sensíveis
Leia maisDesenvolvimento em Ambiente Web. HTML - Introdução
Desenvolvimento em Ambiente Web HTML - Introdução O que é HTML? HTML é uma linguagem para descrever a estrutura de uma página WEB. Ela permite: Publicar documentos online com cabeçalhos, texto, tabelas,
Leia maisMODULO 4 DESENVOLVIMENTO DE PÁGINAS WEB ESTÁTICAS. Redes de Comunicação
MODULO 4 DESENVOLVIMENTO DE PÁGINAS WEB ESTÁTICAS Redes de Comunicação Regras para um website eficaz Categorização dos conteúdos estrutura lógica dos conteúdos Condensação conteúdos simples e directos
Leia maisÒ ÓÙÚ Ä Ö ØÙ Ó ØÖ Ù Ó È ÕÙ ÒÓ Ç ØÓ ÒÓ Ë Ø Ñ ËÓÐ Ö Ì ÔÖ ÒØ ÍÒ Ú Ö Ö Ð Î Ó ÓÑÓ Ô ÖØ Ü ¹ Ò Ó ÔÖÓ Ö Ñ È Ó ¹ Ö Ù Ó Ñ ÔÐ Ô Ö Ó Ø Ò Ó Ó Ø ØÙÐÓ Å Ø Ö Ë ÒØ º ÎÁ ÇË ÅÁÆ Ë Ê ÁË ¹ Ê ËÁÄ ¾¼¼ Ñ Ò ÔÓ Â Ò Ö Ñ Ò Ð ÄÙ ÒÒ
Leia maisHTML Básico. Antonio Fernando de Oliveira Núcleo de Computação Eletrônica da UFRJ Tel. (021) 2598-3111 e-mail: antonio@nce.ufrj.br
HTML Básico Antonio Fernando de Oliveira Núcleo de Computação Eletrônica da UFRJ Tel. (021) 2598-3111 e-mail: antonio@nce.ufrj.br Referências Bibliográficas: Iniciando em HTML Ramalho, Makron Books Home
Leia mais1. INTRODUÇÃO. 1.1 Como são as marcações (tags) HTML?
HTML 1. INTRODUÇÃO HTML abreviação de HiperText Markup Language é a linguagem de programação que usamos para criar uma página Web, que, por sua vez, será composta de textos e comandos especiais, chamados
Leia maisÅ ÒÙ Ö ØÓ ËÙ Ñ Ø Ó Ê Ú Ø ÁÒ ÓÖÑ Ø Ì ÓÖ ÔÐ ¾¼ ÒÓÚ Ñ ÖÓ ¾¼¼¼ Ê ÙÔ Ö Ó Ò ÓÖÑ Ó Ú Ù Ð ÓÑ ÒÓ ÓÒØ Ù Ó Ñ Ñ Ò Ú Ó Ø ÖÒ Ð Ó Ð ÙÕÙ ÖÕÙ Ö Ù Ó Ë ÐÚ Ó Â Ñ Ð ÖÞÓÐ Ù Ñ Ö Ê ÙÔ Ö Ó Ò ÓÖÑ Ó Ú Ù Ð ÓÑ ÒÓ ÓÒØ Ù Ó Ñ Ñ Ò Ú Ó
Leia maisLINGUAGEM C UMA INTRODUÇÃO
LINGUAGEM C UMA INTRODUÇÃO AULA 4 Entrada e saída 1 Entrada, saída, hãmm? O conceito de entrada e saída já foi utilizado de forma intuitiva nos exemplos das aulas anteriores. Entendemos por entrada qualquer
Leia maisPortal do Projeto Tempo de Ser
Sumário Portal do Projeto Tempo de Ser O que é um Wiki?...2 Documentos...2 Localizando documentos...3 Links...3 Criando um Documento...4 Criando um link...4 Editando um Documento...5 Sintaxe Básica...5
Leia mais1. HTML - Introdução. Hyper Text Markup Language. É uma linguagem de formatação de conteúdos. Portável. Ficheiros de pequena dimensão
1. HTML - Introdução Hyper Text Markup Language É uma linguagem de formatação de conteúdos Não é uma linguagem de programação Portável Não depende da plataforma em que é vizualizado Ficheiros de pequena
Leia maisIntrodução ao HTML Utilizando frames Hospedando seu site na WEB
Introdução ao HTML Utilizando frames Hospedando seu site na WEB Por quê???? Por que com tantos editores gráficos de HTML, devemos saber como escrever um código fonte? Porque se você só viu páginas feitas
Leia maisLINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON
COMPONENTES: ROBSON EDMILSON O HTML (Hiper Text Mark-up Language) é uma linguagem de programação hipertexto. O HTML tem códigos para criar páginas na web. Estes códigos que definem o tipo de letra, qual
Leia maisCADERNOS DE INFORMÁTICA Nº 1. Fundamentos de Informática I - Word 2010. Sumário
CADERNO DE INFORMÁTICA FACITA Faculdade de Itápolis Aplicativos Editores de Texto WORD 2007/2010 Sumário Editor de texto... 3 Iniciando Microsoft Word... 4 Fichários:... 4 Atalhos... 5 Área de Trabalho:
Leia maisPara o OpenOffice Impress, assim como para vários softwares de apresentação, uma apresentação é um conjunto de slides.
OPENOFFICE IMPRESS 1. O QUE É UMA APRESENTAÇÃO Para o OpenOffice Impress, assim como para vários softwares de apresentação, uma apresentação é um conjunto de slides. Em cada slide podemos ter vários elementos
Leia maisIntrodução 1ª Parte Web Web Web Web Browsers Editores Editores Etiquetas (tags) base indica que se trata de uma página escrita em linguagem HTML. Esta deve abranger todo o código;
Leia maisClaudio Damasceno. Avançar
Claudio Damasceno Conteúdo Alinhamento Âncoras, Links Tabelas Formatação Próximo Capítulo HTML prof.claudiodamasceno@hotmail.com 2 Recapitulando - Estrutura básica título DA PÁGINA
Leia maisPara o PowerPoint, assim como para vários softwares de apresentação, uma apresentação é um conjunto de slides.
POWERPOINT 1. O QUE É UMA APRESENTAÇÃO Para o PowerPoint, assim como para vários softwares de apresentação, uma apresentação é um conjunto de slides. Em cada slide podemos ter vários elementos ou objetos
Leia maisQUEM FEZ O TRABALHO?
Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA 1 QUEM FEZ O TRABALHO? Com as tagsaprendidas hoje, faça uma página HTML sobre você com as seguintes informações: Seu nome
Leia maisMÓDULO 1 - xhtml Básico
MÓDULO 1 - xhtml Básico 1. Introdução xhtml significa Extensible Hypertext Markup Language (Linguagem de Marcação Hipertextual Extensível) e é a linguagem de descrição de documentos usada na World Wide
Leia maisUNIPAMPA Universidade Federal do Pampa. Núcleo de Tecnologia da Informação (NTI)
UNIPAMPA Universidade Federal do Pampa Núcleo de Tecnologia da Informação (NTI) Instruções para gerenciamento dos sites em Joomla (versão 1.5.3) Níveis: Editor e Administrador Junho/2008 Í N D I C E Usuários
Leia maisMódulo: Criação de Páginas WEB
Módulo: Criação de Páginas WEB 50 Horas - Sessão 05/13 TEXTO ANIMADO O comando MARQUEE orienta o browser a definir o efeito de texto/imagem a passar no ecrã. Deve ser utilizado quando queremos dar destaque
Leia maisPassa 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):
Leia maisRoteador. subrede de comunicação. canal
Ê Ë ÇÅÈÍÌ ÇÊ Ë ÅÇ ÄÇ ÇËÁ Ð Ö Ö ÓÞÓ Å ÙÖ Ó º Å Ð Ô ÖØ Ñ ÒØÓ Ò Ò Ö ÓÑÔÙØ Ó ÙØÓÑ Ó ÁÒ Ù ØÖ Ð ÙÐ Ò Ò Ö Ð ØÖ ÓÑÔÙØ Ó ÍÒ Ú Ö Ø Ù Ð ÑÔ Ò ¾¼¼¾ ½ ¹¾¼¼¾»»ÍÆÁ ÅÈ Ô ØÙÐÓ ½ ÁÆÌÊÇ Í Ç ½º½ ÓÒ ØÓ Ó Ò Ö ÑÓ Ê ÓÑÔÙØ ÓÖ ÓÑÓ
Leia maisTreinamento em BrOffice.org Writer
Treinamento em BrOffice.org Writer 1 Índice I. INTRODUÇÃO...3 II. BARRA DE FERRAMENTAS...3 III. CONFIGURAR PÁGINA...4 1. Tamanho, Margens e Orientação...5 2. Cabeçalhos...6 3. Rodapés...6 4. Numerando
Leia maisINTRODUÇÃO AO DESENVOLVIMENTO WEB. PROFª. M.Sc. JULIANA H Q BENACCHIO
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO As imagens são armazenadas em forma de arquivos, principalmente PNG (para desenhos) ou JPG (para fotos) Para incluir imagens usa-se
Leia maisRoteiro 2: Conceitos de Tags HTML
Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias
Leia maisApostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB -
Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Taquara - RS Sumário Apostila de HTML - Fonte: http://www.icmc.usp.br/ensino/material/html/intro.html
Leia maisWeb Design. Prof. Felippe
Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre
Leia maissubdiretório diretório de usuário
Ô ØÙÐÓ Ë Ø Ñ ÖÕÙ ÚÓ Ô ÖØ Ñ Ú Ú Ð ÙÑ Ø Ñ ÓÔ ÖÓÒ Ð Ó Ù Ø Ñ ÖÕÙ ÚÓ º ÈÖÓ Ö Ñ ÔÐØ ÚÓ ÙØ Ð Þ Ñ Ó Ø Ñ ÖÕÙ ÚÓ Ú Ñ Ø Ñ µ Ô Ö ÖÖ Ð Ö Ö Ú Ö Ö ÑÓÚ Ö ÖÕÙ ÚÓ º Í Ù Ö Ó ÙØ Ð Þ Ñ ÒØ Ö Ø Ú Ñ ÒØ Ó Ø Ñ ÖÕÙ ÚÓ Ú Ðе Ô Ö
Leia maisÍNDICE INTRODUÇÃO...3
ÍNDICE INTRODUÇÃO...3 1 ACESSO À PLATAFORMA PÁGINA INICIAL...4 1º Passo Endereço da plataforma...4 2º Passo Acessar a plataforma...4 3º Passo Alterar senha...5 4º Passo Continue...6 5º Passo Acessar página
Leia maisManual do Usuário CMS WordPress Versão atual: 3.0
Manual do Usuário CMS WordPress Versão atual: 3.0 1 - Introdução O Centro de Gestão do Conhecimento Organizacional, CGCO, criou, em março de 2008, uma equipe para atender à demanda de criação de novos
Leia maisManual de Publicação Wordpress
Fundação Universidade Federal de Mato Grosso do Sul Manual de Publicação Wordpress Núcleo de Tecnologia da Informação - UFMS Maurílio Mussi Montanha 2014 Sumário 1 Introdução... 3 2 ACESSO À INTERFACE
Leia maisAula de JavaScript 05/03/10
Objetos Sabe-se que variável são contêiners que podem armazenar um número, uma string de texto ou outro valor. O JavaScript também suporta objetos. Objetos são contêiners que podem armazenar dados e inclusive
Leia maisFerramentas para Multimídia e Internet - 1486
1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato
Leia maisProgramação para Internet I
Programação para Internet I Aula 05 e 06 Fernando F. Costa nando@fimes.edu.br 1 Tags de Formatação de Texto - Permite que um texto se mova de um lado para o outro da página. Sintaxe:
Leia mais4. Características Gerais das Tabelas do HTML
4. Características Gerais das Tabelas do HTML Curso de Extensão em HTML PUCRS A criação de uma tabela começa pelo tag e termina pelo tag. Antes do texto de cada linha da tabela você deve inserir o tag
Leia maisWebdesign HTML. Introdução a HTML e as principais tags da linguagem. Thiago Miranda dos Santos Souza
Webdesign HTML Introdução a HTML e as principais tags da linguagem Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Apresentar a HTML
Leia maisDispositivo: o cinema e o fim da moldura
INTRODUÇÃO TRANSCINEMAS Ð ³ ² ³=» Ý ³»²ô ³ ² ª- Ê ô ³ ² ¾ ª- α» ³ ² ª- л 7 «ò O CINEMA SEMPRE FOI EXPERIMENTALô ± ¼» »³» º± «³ ½ ³ ± ¼»» «ò ݱ³± ½ «³ ³ ¹»³»³ ³±ª ³»² ±á ݱ³± ±» á ݱ³± ± ± «3¼± ¼± ±»
Leia maisInstituto Siegen Manual do Professor
Manual do Professor - www.institutosiegen.com.br - 1 Instituto Siegen Manual do Professor Manual do Professor - www.institutosiegen.com.br - 2 Sumário Instituto Siegen...1 Manual do Professor...1 Funcionamento
Leia maisUnidade IV Introdução à Linguagem PHP Parte 1
Unidade IV Introdução à Linguagem PHP Parte 1 Professor Fabiano de Paula Soldati fpsoldati@yahoo.com.br http://br.groups.yahoo.com/group/professorsoldati/ Introdução HTML = HyperText Markup Language HTML
Leia maisUniversidade Federal do Espírito Santo
Universidade Federal do Espírito Santo Núcleo de Tecnologia da Informação Gerenciamento do Conteúdo de Sítios Institucionais Versão 1.4 Atualizado em: 8/10/2015 Sumário Sumário................................................
Leia maisROBERTO OLIVEIRA CUNHA
LEIAME APRESENTAÇÃO Nenhuma informação do TUTORIAL DO MICRO- SOFT OFFICE WORD 2003 poderá ser copiada, movida ou modificada sem autorização prévia e escrita do Programador Roberto Oliveira Cunha. Programador:
Leia mais4.14 - Imagens: <img src="..."> src <img src="tecnologia.jpg"> único atributo que não pode ser omitido neste TAG Nota: img
4.14 - Imagens: O TAG utilizado para a inclusão de imagens em páginas html é o: O atributo src especifica o local onde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso
Leia mais<!DOCTYPE html> <html lang = "pt-br"> <head> <meta charset = UTF-8"> <title> Exemplo de uso correto da semântica HTML </title> </ head >
Para um navegador exibir corretamente uma página web, devemos informar explicitamente o tipo do documento. O tipo do documento é informado com a declaração . TAG
Leia maisAmostra OpenOffice.org 2.0 Writer SUMÁRIO
Amostra OpenOffice.org 2.0 Writer SUMÁRIO 1. INTRODUÇÃO 2. INSERIR TEXTO 3. SALVAR UM DOCUMENTO 4. FECHAR UM DOCUMENTO 5. INICIAR UM NOVO DOCUMENTO 6. ABRIR UM DOCUMENTO 7. SELECIONAR TEXTO 8. RECORTAR,
Leia maisGuia do Usuário. idocs Content Server v.2.0-1 -
Guia do Usuário idocs Content Server v.2.0-1 - 2013 BBPaper_Ds - 2 - Sumário Introdução... 4 Inicializando a aplicação... 6 Ambiente... 7 Alterando o ambiente... 8 Senhas... 10 Alterando senhas... 10 Elementos
Leia maisO Windows também é um programa de computador, mas ele faz parte de um grupo de programas especiais: os Sistemas Operacionais.
MICROSOFT WINDOWS O Windows também é um programa de computador, mas ele faz parte de um grupo de programas especiais: os Sistemas Operacionais. Apresentaremos a seguir o Windows 7 (uma das versões do Windows)
Leia maisCurso PHP Básico. Jairo Charnoski do Nascimento
Curso PHP Básico Jairo Charnoski do Nascimento Agenda Ferramentas necessárias Introdução HTML HTML? Tags Construindo seu primeiro website Observações sobre a estrutura Mais tags Atributos Agenda Cores
Leia maisIntrodução à Linguagem HTML
Introdução à Linguagem HTML HTML (HyperText Markup Language - Linguagem de Formatação de Hipertexto) é fruto do "casamento" dos padrões HyTime e SGML.; HyTime - Hypermedia/Time-based Document Structuring
Leia maisINTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES INTRODUÇÃO. Professor Carlos Muniz
INTRODUCAO DESENVOLVIMENTO E DESIGN DE INTRODUÇÃO INTRODUÇÃO A linguagem HTML (Hipertext Markup Language Linguagem de Marcação de Hipertexto) é usada para divulgar páginas na World Wide Web, o serviço
Leia maisManual do Instar Mail v2.0
Manual do Instar Mail v2.0 Sumário Conteúdo Menu Principal... 2 Menu Cliente... 3 Pagina Categorias do Instar-Mail... 4 Importação... 4 Campanhas... 8 Cadastramento de campanhas do Instar-Mail... 9 Ações
Leia maisSuperintendência Regional de Ensino de Ubá - MG Núcleo de Tecnologia Educacional NTE/Ubá. LibreOffice Impress Editor de Apresentação
Superintendência Regional de Ensino de Ubá - MG Núcleo de Tecnologia Educacional NTE/Ubá LibreOffice Impress Editor de Apresentação Iniciando o Impress no Linux Educacional 4 1. Clique no botão 'LE' no
Leia mais4.14 - Imagens: <IMG SRC="..."> SRC <IMG SRC="tecnologia.jpg"> único atributo que não pode ser omitido neste tag Nota: img
4.14 - Imagens: O tag utilizado para a inclusão de imagens em páginas html é o: O atributo SRC especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso
Leia maisIntrodução. História. Como funciona
Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado
Leia maisDesenvolvedor Web Docente André Luiz Silva de Moraes
Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável
Leia maisQuestões de Informática Prova Comentada Ministério Público da União
NOÇÕES DE INFORMÁTICA QUESTÕES COMENTADAS Prof.: Erion Monteiro Questões de Informática Prova Comentada Ministério Público da União Nível Superior Cargo 1 Analista Administrativo 11/9/2010 Sequencial 015
Leia maisCURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1
ESCOLA ESTADUAL PROF. JOSÉ BARROSO TOSTES PROFESSOR: ESP. ANDREW RODRIGUES CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 1 APOSTILA DE INTRODUÇÃO À LINGUAGEM
Leia maisVerifique se o Plugin do Flash Player está instalado no seu computador para a navegação adequada no portal.
1 Tutorial: Blogs no Clickideia Introdução Esse tutorial mostrará as funções básicas da ferramenta de Blog do Portal Educacional Clickideia. Ele foi elaborado pensando em diferentes níveis de usuários
Leia maisProva de pré-requisito
Prova de pré-requisito PHP & MySQL: Técnicas para Web 2.0 1 - Qual das opções constrói a tabela abaixo: DIA MÊS ANO 28 04 1988 22 02 2002 a) b) c) dia mês ano
Leia maismkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos
Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.
Leia maisSumário. 1. Instalando a Chave de Proteção 3. 2. Novas características da versão 1.3.8 3. 3. Instalando o PhotoFacil Álbum 4
1 Sumário 1. Instalando a Chave de Proteção 3 2. Novas características da versão 1.3.8 3 3. Instalando o PhotoFacil Álbum 4 4. Executando o PhotoFacil Álbum 9 3.1. Verificação da Chave 9 3.1.1. Erro 0001-7
Leia maisPortal da Prefeitura de São Paulo SECOM. MANUAL DO WARAM v. 1.5 Secretarias
SECOM MANUAL DO WARAM v. 1.5 Secretarias WARAM 1.5 Ferramenta de atualização do Portal da Prefeitura de São Paulo. Use preferencialmente o navegador Internet Explorer superior ou igual a 7.0. No campo
Leia maisPREFEITURA MUNICIPAL DE BOM DESPACHO-MG PROCESSO SELETIVO SIMPLIFICADO - EDITAL 001/2009 CARGO: COORDENADOR DE INCLUSÃO DIGITAL CADERNO DE PROVAS
CADERNO DE PROVAS 1 A prova terá a duração de duas horas, incluindo o tempo necessário para o preenchimento do gabarito. 2 Marque as respostas no caderno de provas, deixe para preencher o gabarito depois
Leia maisIntrodução ao HTML Hypertext Markup Language
Introdução ao HTML Hypertext Markup Language Prof. Marcus Ramos Tags São comandos que são inseridos juntamente com o texto a ser apresentado, e que definem a forma como o mesmo será exibido na tela do
Leia maisDefinindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar
Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar tabelas (tableless), e utilizando muito . Para continuar lendo esse post,
Leia maisInstituto Politécnico de Tomar Escola Superior de Tecnologia de Abrantes Curso Superior de Comunicação Social. Exercicio Nº 4 de Word
Instituto Politécnico de Tomar Escola Superior de Tecnologia de Abrantes Curso Superior de Comunicação Social Exercicio Nº 4 de Word Objectivo específico: Estilos, Tipos de letra, Colunas, Capitular. Numa
Leia maisRespondendo a eventos
Respondendo a eventos Até agora, a maioria dos scripts que você escreveu foi executado de uma forma tranqüila e ordenada, movendo-se da primeira instrução para a última. Agora aprenderemos a utilizar a
Leia maisUsando o NVU Parte 2: Inserindo imagens
Usando o NVU Parte 2: Inserindo imagens Simão Pedro P. Marinho Para uso exclusivo por alunos da PUC Minas Inserindo uma imagem que está no seu computador Inserindo uma imagem que já está na Internet Inserindo
Leia maisProgramação HTML Construção de Páginas para WEB 47
Programação HTML Construção de Páginas para WEB 47 INICIANDO EXEMPLO3.HTML Crie um novo arquivo html chamado exemplo3.html dentro da pasta exemplos. Após os exercícios e trabalhos anteriores, nossa pasta
Leia maisUTILIZANDO RECURSOS E ATIVIDADES NO MOODLE
UTILIZANDO RECURSOS E ATIVIDADES NO MOODLE Luanna Azevedo Cruz Polyana Ribas Bernardes 2015 2015 1. INTRODUÇÃO Para utilizar as funcionalidades acesse o Moodle: http://moodle.ead.ufvjm.edu.br/ e clique
Leia maisDesenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes
Roteiro 2: Introdução a Linguagem HTML Desenvolvimento de Sites com PHP e Mysql Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção
Leia maisProf Rafael Guem Murakami
Prof Rafael Guem Murakami São Paulo 2006 Sumário: Definição:... 4 Barra de Formatação:... 4 Configuração de página:... 5 Bordas e Sombreamento:... 6 Índices:... 8 Inserindo Figuras:... 12 Word-Art:...
Leia maisLayouts de páginas com HTML e CSS
Layouts de páginas com HTML e CSS Layouts de Páginas com CSS.... 2 Layout com tamanho Líquido... 2 Layout com tamanho Fixo... 3 Desenvolvendo um layout com tamanho fixo.... 5 Layouts de Páginas com CSS.
Leia mais