CURSO HTML. Parte 1: Introdução ao desenvolvimento WEB. Olá amigos visitantes,

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

Download "CURSO HTML. www.regilan.com. Parte 1: Introdução ao desenvolvimento WEB. Olá amigos visitantes,"

Transcrição

1 CURSO HTML Parte 1: Introdução ao desenvolvimento WEB Olá amigos visitantes, O objetivo deste mini-curso é fornecer os conhecimentos básicos que permitirão construir um web site. Como partiremos do zero esse curso não requer qualquer conhecimento prévio de programação. É bom deixar claro que não ensinaremos tudo, dessa forma é necessário que você se empenhe, pratique e pesquise sobre os conhecimentos abordados. Além do C# e do HTML que começamos a estudar, outros cursos virão em breve como: Lógica de Programação, SQL, Visual Basic.Net, ASP.NET, UML, entre outros. É bom lembrar que o curso será feito de forma incremental no qual a cada semana teremos um novo capitulo do curso, por isso não deixe de visitar o nosso site para dar continuidade aos estudos. Desejo mais uma vez boa sorte a todos que começarão junto comigo essa jornada! Prof. Regilan Meira

2 Curso de HTML - Parte 1: Introdução ao desenvolvimento WEB Conceitos Básicos A Internet é um conjunto de redes formado por milhões de computadores em todo o mundo que permite o acesso a informações e todo tipo de transferência de dados. Alguns dos serviços disponíveis na Internet, além da Web, são o acesso remoto a outras máquinas (Telnet e SSH), transferência dearquivos (FTP), correio eletrônico ( normalmente através dos protocolos POP3 e SMTP), boletins eletrônicos (news ou grupos de notícias), bate-papo online (chat), mensagens instantâneas (ICQ, YIM, Jabber, Messenger, Blogs), fóruns, comunidades virtuais(orkut,myspace), blogs, vídeos(you tube), etc. A World Wide Web, ou "WWW" é uma rede de computadores na Internet que fornece informação em forma de hipertexto. A HTML utiliza o conceito de hipertexto através de uma linguagem de marcação usada para documentos da www. HTML foi inventado em 1990 por um cientista chamado Tim Berners-Lee. A finalidade inicial era a de tornar possível o acesso e a troca de informações e de documentação de pesquisas, entre cientistas de diferentes universidades. HTML é uma linguagem que possibilita apresentar informações na Internet. Quando abrimos uma página na Internet, o que o navegador (browser) faz é interpretar o código HTML e apresentar ao usuário. Agora que sabemos o que é HTML, vamos construir nossos websites. Um site ou Web site é um conjunto de páginas Web acessível geralmente pelo protocolo HTTP 1 na Internet. O conjunto de todos os sites públicos existentes compõe a World Wide Web. No nosso curso não utilizaremos de softwares voltados para o desenvolvimento de sites como o Adobe Dreamweaver ou Microsoft FrontPage. Precisaremos apenas de um simples editor de textos como o bloco de notas e de um navegador para testar os exemplos. Criando a Estrutura do Site O primeiro passo para a construção de um site é a criação da estrutura de pastas e arquivos que serão posteriormente publicados na internet. É recomendável que esta estrutura seja a mais clara possível para a organização dos arquivos dentro do site. Dessa forma crie uma pasta em seu computador onde será criada as será criada as pastas internas do site e os arquivos html. Crie as seguintes pastas: arquivos, imagens, multimidia, e 1 HTTP significa HyperText Transfer Protocol (Protocolo de Transferência de Hipertexto) e é o protocolo utilizado por clientes e servidores para transferência de dados hipermídia (imagens, sons e textos) na World Wide Web. Página 2

3 Curso de HTML - Parte 1: Introdução ao desenvolvimento WEB demais pastas necessárias de acordo com a sua necessidade. Cada pasta terá uma função determinada: 1. A pasta arquivo será o local onde será salvo todos os arquivos não web, ou seja, arquivos.doc,.psd,.png,.txt,.tif,.cdr, etc. Estes arquivos permanecerão na pasta projeto como fonte original dos arquivos que foram trabalhadas para web e esta pasta não será publicada. (atenção esta é um pasta muito pesada pois guarda arquivos de pesados). 2. A pasta imagens será utilizada para guardar os arquivos.jpg e.gif. 3. Dentro da pasta multimídia serão salvos os arquivos som e vídeo. É importante também que no diretório projeto exista um arquivo que será o responsável pela entrada no site. O padrão é utilizar o nome index.html. Publicação do Site Para publicar seu site você vai precisar de um programa de FTP (File Transfer Protocol) para executar a tranferência de arquivos do seu micro para o servidor onde seu site ficará hospedado. Os programas de FTP mais conhecidos são: WS_FTP. Filezilla. CuteFTP, etc. Um projeto para WEB deve passar pelas seguintes etapas: Criação de uma estrutura de site com pastas e arquivos, depois do site pronto, deve ser feito o registro do domínio e a obtenção junto ao provedor de hospedagem da conta de FTP para publicação do site na web. A partir desse momento o site está disponível para consulta dos usuários da internet. Tags HTML Tags são rótulos usados para informar ao navegador como deve ser apresentado o website. Todas as tags HTML possuem o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">". Existem dois tipos de tags: tags de abertura: <comando> e tags de fechamento: </comando>. Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag. Existem algumas tags onde a abertura e o fechamento se dá na mesma tag. Tais tags contém comandos que não necessitam de um conteúdo Página 3

4 Curso de HTML - Parte 1: Introdução ao desenvolvimento WEB para serem processados, isto é, são tags de comandos isolados, por exemplo, um pulo de linha é conseguido com a tag <br />. Uma tag (marca) de html possui a seguinte estrutura de sintaxe: <Nome da tag {atributo1="valor" atributo2="valor"...}> Conteúdo </Nomeda tag> O texto dentro dos tags não é Case Sensitive, ou seja, não faz diferença entre maiúsculas e minúsculas. Além disso, não se devem usar espaços em branco dentro dos tags, exceto para se separar o nome de um tag de um nome de um atributo, ou ainda entre os atributos. Nome do tag = texto entre < e > que define o tag do html. Atributo = alguns tags da html permitem e/ou exigem que atributos. Os atributos pode ou não estabelecer um valor para a sua função, que sempre deve estar entre aspas. Conteúdo = ë tudo que pode ou será modificado por um tag. Basicamente o conteúdo constituído de texto ou imagem. Fechamento do tag = texto entre </ e > que define um tag de fechamento. Todo documento html deve possuir um cabeçalho <HEAD> </HEAD> e um corpo <BODY> </BODY>, que por sua vez devem estar delimitados respectivamente pelos tags <HTML> e </HTML>. <HTML> <HEAD> <TITLE> Título do documento </TITLE> </HEAD> <BODY> Conteúdo que deve ser inserido no documento... </BODY> </HTML O navegador lê HTML de cima para baixo e da esquerda para a direita. Assim um documento HTML inicia com aquilo que deve ser a primeira coisa aparecer na página e termina com a última coisa a aparecer. A primeira coisa a fazer é dizer ao navegador que você vai "falar" com ele na linguagem HTML. Isto é feito com a tag. Então, antes de mais nada digite "" na primeira linha do documento, no Notepad. Página 4

5 Curso de HTML - Parte 1: Introdução ao desenvolvimento WEB Como sabemos, é uma tag de abertura e deve ser fechada com a tag de fechamento quando você acabar de digitar seu documento HTML. Para termos certeza que não iremos esquecer de fechar a tag HTML, faça isso agora mesmo, digitando "" localizada a algumas linhas abaixo, assim você irá escrever seu documento entre as tags digitadas e. A próxima coisa que o documento precisa é um "head" (cabeçalho), que fornece informações sobre o documento e um "body" (corpo), que abriga o conteúdo do documento. Resumindo, nosso documento HTML é composto de duas partes: um head e um body. Na seção head você escreve informações sobre a página e na seção body você coloca as informações que constituem a página. Por exemplo, para dar um título ao documento, título este que apareça no topo da barra do navegador você deverá usar a seção "head". A tag para acresentar um título é <title>. Veja o exemplo agora com a tag <title> <HTML> <HEAD> <TITLE> Primeira página HTML </TITLE> </HEAD> <BODY> Olá Mundo!!! Essa é minha primeira página feita em HTML. </BODY> </HTML Agora que terminamos de construir nosso primeiro website, basta salvar nosso arquivo no HD e testar seu funcionamento no navegador. Se você escreveu esse código HTML no bloco de notas, vá até o menu "Arquivo" no topo da janela e escolha a opção "Salvar como...". Escolha "Todos os arquivos" na caixa "Salvar como tipo". Isto é muito importante - caso você não faça isto, o arquivo será salvo como texto e não como documento HTML. Salve seu documento com o nome "exemplo1.html" (a extensão ".html" indica que se trata de um documento HTML). Você pode salvar o documento onde você quiser no seu HD - esteja certo de salvar em um lugar que depois você possa achar com facilidade. Vá ao seu navegador e na barra de endereços digite o caminho onde está o seu arquivo. Página 5

6 Curso de HTML - Parte 1: Introdução ao desenvolvimento WEB Você deverá ver o seguinte resultado: Bem pessoal, por hoje terminamos aqui e espero ter passado alguma informação útil para vocês. Hoje não evoluímos muito naa TAGS da linguagem, afinal estamos apenas aquecendo as turbinas para começar a voar. Nas próximas partes deste curso daremos uma avançada maior na TAGS HTML e faremos alguns exercícios para fixar o conteúdo. possível. Qualquer dúvida, pergunta ou sugestão, mande um que responderei o mais rápido Prof. Regilan Meira Página 6

7 CURSO HTML Parte 2: Mais Tags Olá amigos visitantes, Estamos na segunda parte do mini-curso HTML. Hoje iremos aprender algumas tags da linguagem. Mais uma vez quero dizer que ninguém se tornará um bom criador de websites aprendendo os exemplos contidos neste mini-curso. O que iremos aprender é simplesmente o básico e a introdução para criação de Web Sites. Para se tornar um bom desenvolvedor web você deverá avançar nos estudos e fazer diversos exemplos para desenvolver a criatividade. No capítulo passado estudamos sobre a estrutura de uma página HTML que é formada pelas tags principais: HEAD e BODY. Tente criar algumas páginas. Por exemplo, construa uma página com um título, um cabeçalho, algum texto, um subtítulo e mais algum texto. Ou seja, vá testando os conhecimentos adquiridos. Hoje iremos estudar algumas tags HTML que o ajudará na criação e organização de seus sites. Desejo mais uma vez boa sorte a todos que começarão junto comigo essa jornada! Prof. Regilan Meira

8 Curso de HTML - Parte 2: Mais Tags Tags de formatação de texto Vimos que todo documento html deve possuir um cabeçalho <HEAD> </HEAD> e um corpo <BODY> </BODY>, que por sua vez devem estar delimitados respectivamente pelos tags <HTML> e </HTML>. Ex: <HTML> <HEAD> <TITLE> Título do documento </TITLE> </HEAD> <BODY> Conteúdo que deve ser inserido no documento </BODY> </HTML> Inicialmente vamos estudar as tags de formatação que são usadas dentro do conteúdo presente entre as tags: <BODY> </BODY>, ou seja, na área reservada ao conteúdo do site. Os comandos ou tags de formatação indicam ao browser exatamente como um texto deve ser formatado. Tags: Vejamos algumas dessas tags na tabela abaixo: <B> texto em negrito </B> <I> texto em itálico </I> <U> texto sublinhado </U> <STRIKE> texto riscado </STRIKE> <S> texto tachado </S> <SUB> texto em subscrito </SUB> <SUP> texto em sobrescrito </SUP> <BIG> texto em fonte maior do que o padrão </BIG> <STRONG> texto destacado </STRONG> <SMALL> texto em fonte menor do que o padrão </SMALL> <BLINK> texto piscando </BLINK> Agora vamos ver um exemplo: Página 2

9 Curso de HTML - Parte 2: Mais Tags <head> <title>exemplo utilizando TAGS </title> </head> <body> <b>esse É UM EXEMPLO UTILIZANDO UM TEXTO EM NEGRITO </b> <b><i><s>posso COMBINAR VÁRIAS TAGS SIMULTANEMANTE, DESDE QUE ESTEJAM ANINHADAS CORRETAMENTE </s></i></b> <blink>que LEGAL ESSE TEXTO PISCANDO</blink> </body> Digite o código acima no bloco de notas e salve como: exemplo2.html. Em seguida abra seu navegador web e digite o endereço onde se localiza o arquivo exemplo2.html. Veja exemplo: Quebrando Linhas As quebras de linha são indicadas por um tag simples <br>. A tag <br> - break row - não possui fechamento. Acrescente as tags <br> para quebrar linhas do texto feito no exemplo anterior. O código deverá ficar assim: <head> <title>exemplo utilizando TAGS </title> </head> <body> <b>esse É UM EXEMPLO UTILIZANDO UM TEXTO EM NEGRITO </b> <br> <b><i><s>posso COMBINAR VÁRIAS TAGS SIMULTANEMANTE, DESDE QUE ESTEJAM ANINHADAS CORRETAMENTE </s></i></b> <br> <blink>que LEGAL ESSE TEXTO PISCANDO</blink> <br> </body> TAG <BR> quebrando linhas. Página 3

10 Curso de HTML - Parte 2: Mais Tags Comentários Um comentário deve ser adicionado ao código, quando você necessitar acrescentar informações que facilitem o entendimento, incluir dados como data de execução, nome do desenvolvedor, ou qualquer outra informação complementar, mas que não deva ser exibida ao visitante. O comando utilizado para incluir um comentário em sua origem de dados é: Vejamos um exemplo: <!-- COMENTÁRIOS --> <head> <title>exemplo utilizando TAGS </title> </head> <body> <!-- DESENVOLVEDOR: REGILAN MEIRA OBJETIVO: MOSTRAR A UTILIZAÇÃO DE COMENTÁRIOS DATA: 03/01/ > <b>esse É UM EXEMPLO UTILIZANDO COMENTÁRIOS. OBSERVE QUE UM COMENTÁRIO NÃO É MOSTRADO AO USUÁRIO!</b> </body> Linha horizontal Outra tag de comando é <hr /> que serve para definir uma linha horizontal ("hr" vem "horizontal rule" - régua horizontal ). A linha pode ter um valor em pixels ou em porcentagem em relação à tela do browser. <head> <title>exemplo utilizando TAGS </title> </head> <body> <blink>esse É UM EXEMPLO UTILIZANDO A LINHA HORIZONTAL!</blink><br> <hr> <br> <b><strong>linha HORIZONTAL ACIMA </b> <br> </body> Página 4

11 Curso de HTML - Parte 2: Mais Tags Cabeçalhos Esta tag é responsável pela inserção dos diferentes tamanhos de título que têm como objetivo ajudar na organização do conteúdo e facilitar a leitura de um documento. Existem 6 níveis de títulos, numerados de H1 a H6. Cabeçalho com: <h1> </h1> Cabeçalho com: <h2> </h2> Cabeçalho com: <h3> </h3> Cabeçalho com: <h4> </h4> Cabeçalho com: <h5> </h5> Cabeçalho com: <h6> </h6> Vamos testar o exemplo abaixo em nosso navegador: <head> <title>exemplo utilizando Cabeçalhos</title> </head> <body> <h1> CABELAÇALHO COM H1 </h1> <br> <h2> CABELAÇALHO COM H2 </h2> <br> <h3> CABELAÇALHO COM H3 </h3> <br> <h4> CABELAÇALHO COM H4 </h4> <br> <h5> CABELAÇALHO COM H5 </h5> <br> <h6> CABELAÇALHO COM H6 </h6> <br> </body> O resultado deverá ser o seguinte: Página 5

12 Curso de HTML - Parte 2: Mais Tags Parágrafos A tag de parágrafo é utilizada para marcar o início dos parágrafos, de modo a controlar o espaçamento entre eles. A tag <p> pode ser utilizada como tag vazia, onde um novo parágrafo termina o anterior, ou como tag de container usando <P> e </P>. Obs: Nesta TAG o fechamento é opcional. Agora um exemplo utilizando a tag <p> <head> <title>exemplo utilizando listas ordenadas</title> </head> <body> <strong> <h1>utilizando Parágrafos</h1> Página 6

13 Curso de HTML - Parte 2: Mais Tags <p>a separação dos parágrafos deve ser feita através da tag de parágrafo. <p>é aconsenhável usar esta tag no ínicio de cada parágrafo, para que eles não apareçam juntos. <p> </strong> </body> Veja como fica executando o código acima no navegador. Listas A Tag de uma lista ordenada é <ol>... </ol>. O número inicial de uma lista ordenada é 1. Uma lista ordenada possui atributos que indica o número inicial da lista (o padrão é 1) e o tipo de item que será usado: Letras maiúsculas, letras minúsculas, número romano maiúsculo, números romano minúsculo e números arábicos (padrão). Na próxima parte deste mini-curso estudaremos sobre os atributos das tags. Os atributos possíveis para um item de lista são: <li> <li> Vamos ver um exemplo utilizando listas ordenadas. <head> <title>exemplo utilizando listas ordenadas</title> </head> <body> <strong> <ol> <li>já aprendemos a formatar textos: negrito, ítalo, etc. </li> <li>estudamos sobre linhas horizontais, quebrar linhas. </li> <li>vimos como adicionar comentários em nossos códigos. </li> Página 7

14 Curso de HTML - Parte 2: Mais Tags ordenadas. </li> </ol> </strong> </body> <li>em seguida estudamos sobre como inserir cabeçalhos. </li> <li>agora estamos estudando sobre listas ordenadas e não Salve o arquivo acima e execute em seu navegador para ver o resultado. A Tag para uma lista não-ordenada é <ul>... </ul>. Da mesma forma que na tag <ol> </ol>, a tag responsável pela entrada de itens na lista é <li>. Vamos testar o mesmo exemplo acima, só que dessa vez usando listas não ordenadas. <head> <title>exemplo utilizando listas ordenadas</title> </head> <body> <strong> <ul> ordenadas. </li> </ul> </strong> </body> <li>já aprendemos a formatar textos: negrito, ítalo, etc. </li> <li>estudamos sobre linhas horizontais, quebrar linhas. </li> <li>vimos como adicionar comentários em nossos códigos. </li> <li>em seguida estudamos sobre como inserir cabeçalhos. </li> <li>agora estamos estudando sobre listas ordenadas e não Página 8

15 Curso de HTML - Parte 2: Mais Tags Terminamos aqui. Aconselho novamente, a fazer seus próprios exemplos, construindo algumas páginas usando as tags que aprendemos nesta lição. Na próxima parte do curso, aprenderemos sobre os atributos das tags. Através dos atributos das tags podemos configurar nosso site colocando cor, cor de fundo, alinhamento, entre outros estilos. Até a próxima parte! possível. Qualquer dúvida, pergunta ou sugestão, mande um que responderei o mais rápido Prof. Regilan Meira Página 9

16 CURSO HTML Parte 3: Atributos das TAGS Olá amigos visitantes, Estamos na terceira parte do mini-curso HTML. No capítulo passado estudamos sobre várias TAGS presentes na HTML. Tente criar algumas páginas utilizando essas TAGS. Uma tag é um comando para o navegador (por exemplo, <br /> é um comando para mudar de linha, <b> </b> que é um comando para que um texto fique em negrito). Em algumas tags podemos ser mais específico, acrescentando na tag, informações adicionais de comando. Isto é feito através dos atributos. Hoje iremos estudar alguns desses atributos presentes nas TAGS já estudadas. Existem vários atributos e eles podem ser aplicados à maioria das tags. Vamos começar então! Prof. Regilan Meira

17 Curso de HTML - Parte 3: Atributos das TAGS Tags de formatação de texto Uma tag é um comando para o navegador (por exemplo, <br /> é um comando para mudar de linha, <b> </b> que é um comando para que um texto fique em negrito). Em algumas tags podemos ser mais específico, acrescentando na tag, informações adicionais de comando. Isto é feito através dos atributos. Os atributos são definidos dentro da tag de abertura do elemento, Veja no exemplo abaixo que mostramos o atributo style para configurar o estilo do elemento parágrafo. Ex: <head> <title>exemplos de atributos</title> </head> <body> <p style="color:blue">parágrafo na cor azul</p> </body> A sintaxe para atributos é definida pelo nome do atributo seguido por um sinal de igual e depois entre aspas são declaradas as informações do atributo. As informações quando mais de uma, devem ser separadas por ponto e vírgula. Na listagem a seguir, temos alguns atributos do elemento BODY. O atributo bgcolor= permite a seleção da cor de fundo; O atributo background= permite uma imagem no fundo da página; O atributo text= permite a seleção da cor do texto principal; O atributo link= permite a escolha da cor que indicará a existência do link; O atributo vlink= permite selecionar a cor que indicará um link já visitado; O atributo alink= permite a escolha da cor que indicará o link que foi ativado; O atributo marginheigth = elimina a margem esquerda que fica numa página no browser O atributo marginwidth = elimina a margem no topo da página no browser O atributo topmargin = elimina a margem no topo da página no browser O atributo leftmargin = elimina a margem esquerda que fica numa página no browser Página 2

18 Curso de HTML - Parte 3: Atributos das TAGS Vamos ao exemplo. Copie o código abaixo para o bloco de notas, salve com formato.html e teste no navegador para verificar os resultados. <head> <title>exemplos de atributos</title> </head> <body bgcolor="#00cc66" text="#aa00ff" marginheigth= 0 marginwidth= 0 > <p>testando atributos do elemento BODY</p> Para alterar os tamanhos das fontes, utilize os seguintes comandos: <font size= 4 > Alterando o tamanho da font </font> <head> <title>exemplos de atributos</title> </head> <body bgcolor="#00cc66" text="#aa00ff" marginheigth= 0 marginwidth= 0 > <font size="9"> <p>testando o tamanho da fonte</p> </font> Estudamos que o elemento <p> é usado para parágrafos. Com o atributo align ele desloca o texto. Veja os exemplos: Página 3

19 Curso de HTML - Parte 3: Atributos das TAGS <head> <title>exemplos de atributos</title> </head> <body bgcolor="#00cc66" text="#aa00ff" marginheigth= 0 marginwidth= 0 > <p align="left"> Minicurso HTML </p> <! -Alinhamento a esquerda --> <p align="right">minicurso HTML </p> <! -Alinhamento a direita --> <p align="center">minicurso HTML </p> <! -Alinhamento centralizado --> <p align="justify"> Minicurso HTML </p> <! -Alinhamento justificado --> Nas linhas abaixo temos uma relação de algumas tags com seus atributos. 1. <A> Insere uma âncora para uma ligação de hipertexto. HREF Referência de hipertexto. NAME Determina o ponto de destino do hipertexto. TARGET Abre uma nova janela com o hipertexto indicado. TITLE Cria um quadro com descrição do hipertexto. 2. <BODY> Contém o corpo do documento HTML. ALINK Configura a cor do texto do link já visitado. BACKGROUND Especifica um arquivo gif/jpg como papel de parede. BGCOLOR Define uma cor de fundo. BGPROPERTIES Mantém o papel de parede fixo no fundo da tela. LEFTMARGIN Define um espaço entre a borda esquerda e o texto. LINK Configura a cor do texto do link. SCROLL Define se a página terá ou não as barras de rolagens. TEXT Configura a cor do texto. TOPMARGIN Define um espaço entre a borda de topo e o texto. VLINK Configura a cor do link ativo. 3. <FONT> Formata da fonte. SIZE Altera o tamanho da fonte. COLOR Altera a cor da fonte. FACE Define a tipologia da fonte. 4. <H1> <H2> <H3> <H4> <H5> <H6> Seis níveis de cabeçalho. ALIGN Alinhamento do cabeçalho. STYLE Insere propriedades de estilo no cabeçalho. Página 4

20 Curso de HTML - Parte 3: Atributos das TAGS <HEAD> Cabeçalho do arquivo HTML. TITLE Título do arquivo HTML. ISINDEX BASE Especifica o endereço base do URL. LINK Relaciona o documento com outro. META Adiciona metainformações ao arquivo. STYLE Adiciona formatação de folha de estilo ao documento. 5. <HR> Horizontal Rule - Linha horizontal. SIZE Define o tamanho da linha. WIDTH Define a espessura da linha. ALIGN Define a margem de alinhamento da linha. NOSHADE Define uma textura sólida a linha. COLOR Define a cor da linha. 6. <HTML> Comando de abertura e fechamento do arquivo HTML. VERSION Informa a versão do HTML usado. LAN Determina em qual idioma o arquivo está escrito. DIR Determina a direção do fluxo do texto. 7. <IMG> Insere uma imagem no documento. ALIGN Define o alinhamento da imagem. ALT Cria um quadro com informações sobre a imagem. BORDER Permite criar e formatar a borda da imagem. HEIGHT Define a altura da imagem. HSPACE Cria um espaço horizontal entre a imagem e o texto. ISMAP Mapeamento da imagem controlado pelo servidor. ONMOUSEOVER ONMOUSEOUT SRC Determina a URL do arquivo de imagem. USEMAP Mapeamento da imagem controlado pelo usuário. VSPACE Cria um espaço vertical entre a imagem e o texto. WIDTH Define a largura da imagem. 8. <LINK> Estabelece ligações da página com outros documentos. HREF Indica o endereço para o qual o link aponta. REL Explica a relação desse documento com o outro. METHODS Indica o método usado para acessar o documento. TITLE Título do documento ao qual o link faz referência. Página 5

21 Curso de HTML - Parte 3: Atributos das TAGS 9. <MARQUEE> Cria efeito de movimento ao objeto. ALIGN Alinhamento do objeto. BEHAVIOR O objeto desaparece ou não em uma das margens. BGCOLOR Cor de fundo. DIRECTION Direção do movimento. HEIGHT Altura do painel. HSPACE Largura das margens esquerda/direita. LOOP Quantas vezes o efeito irá se repetir. SCROLLAMOUNT Quantidade de pixel utilizada no movimento. SCROLLDELAY Tempo de deslocamento do objeto. VSPACE Determina a margem superior e inferior do marquee. WIDTH Especifica a altura do painel. 10. <OL> Ordered List - Lista ordenada. TYPE Define o tipo de numeração. START Indica o valor onde a contagem deve começar. 11. <P> Paragraph - Parágrafo. ALIGN Alinhamento do parágrafo. STYLE Formatação de CSS. 12. <TABLE> Declara a formatação de uma tabela. BACKGROUND Imagem de fundo. BGCOLOR Cor de fundo. BORDER Borda da tabela. BORDERCOLOR Cor das bordas. BORDERCOLORDARK Cor de sombra das bordas. BORDERCOLORLIGHT Cor da luz das bordas. CELLSPACING Espaço entre as células. CELLPADDING Espaço entre o texto e as bordas da célula. FRAME Define tipos de borda da tabela. HEIGHT Altura da tabela. RULES Define tipos de bordas para as células. SUMMARY Cria um comentário no código fonte da tabela. WIDTH Largura da tabela. 13. <TD> Célula da tabela. ALIGN Alinhamento horizontal do conteúdo da célula. BACKGROUND Textura de fundo. BGCOLOR Cor de fundo. Página 6

22 Curso de HTML - Parte 3: Atributos das TAGS BORDERCOLOR Cor das bordas. BORDERCOLORDARK Cor de sombra das bordas. BORDERCOLORLIGHT Cor da luz das bordas. COLSPAN Avanço em colunas. NOWRAP Célula de tamanho fixo. ROWSPAN Avanço em linhas. VALIGN Alinhamento vertical do conteúdo da célula. WIDTH Largura da célula. 14. <TR> Table Row - Linha da tabela. ALIGN Alinhamento horizontal do conteúdo da célula. BGCOLOR Cor de fundo. BORDERCOLOR Cor das bordas. BORDERCOLORDARK Cor de sombra das bordas. BORDERCOLORLIGHT Cor da luz das bordas. CHAR Caracter de alinhamento. CHAROOF Deslocamento do caracter de alinhamento. VALIGN Alinhamento vertical do conteúdo da célula. 15. <UL> Unordered List - Lista não ordenada. TYPE Define o tipo de marcação da lista. Atualmente a HTML possui 91 elementos, sendo que a maioria deles possuem uma série de atributos. Na relação acima especifiquei 15 elementos com seus atributos. Recomendo que pesquise ou mesmo compre algum guia de referência da linguagens. Nesses guias podemos consultar de forma rápida os elementos com seus respectivos atributos. Terminamos aqui. Aconselho novamente, a fazer seus próprios exemplos, construindo algumas páginas usando as tags que aprendemos nesta lição. Crie págimas com cores de fundo, cor no texto, alinhamento de parágrafos. Enfim, tente usar o máximos dos recursos vistos neste capítulo. Na próxima parte do curso, aprenderemos mais algumas tags HTML. possível. Qualquer dúvida, pergunta ou sugestão, mande um que responderei o mais rápido Prof. Regilan Meira Página 7

23 CURSO HTML Parte 4: Mais TAGS: Links e Imagens Olá amigos visitantes, Estamos na quarta parte de nosso tutorial HTML. Até o momento estudamos uma série de TAGS de forma que já podemos fazer pequenos exemplos de sites. Com o estudo de hoje deixaremos nosso site mais atraente com a possibilidade de inserir imagens e também criar ligações (links) entre as páginas. Bom Estudo! Prof. Regilan Meira

24 Curso de HTML - Parte 4: Mais TAGS: Links e Imagens Inserção de Imagens A maioria das imagens que encontramos na Web são GIF ou JPG. gif: pode ser animado ou não, permite fundos transparentes, e é utilizada mais para imagens tipo desenho ou mapa (traços ou vetores). jpg: não pode ser animado enem pode ter fundo transparente, pode ter ótima qualidade e ser leve, utilizado mais para fotos. O elemento destinado a inserir uma imagem no documento é a tag img. O elemento img insere imagens que são apresentadas junto com os textos. Um atributo src deve estar presente, da seguinte forma: < img src = "URL da Imagem" /> A URL da imagem é a URL do arquivo que contém a imagem que se quer inserir, que pode ser uma imagem localizada no próprio servidor ou pode ser referenciada uma imagem que esteja em outro servidor. A tag <img> não possui tag de encerramento, mas possui vários atributos, sendo o principal o atributo: "src" que especifica o local onde a imagem está localizada. Veja exemplo: <head> <title>utilizando Imagens </title> </head> <body> <p style="color:blue;font-family:verdana"> Aprendendo a usar imagens <br/> </p> </body> <img src = "6630.png" alt="celular Nokia /> Agora veja o resultado do código acima no navegador: Página 2

25 Curso de HTML - Parte 4: Mais TAGS: Links e Imagens Observe que o elemento img possui 3 atributos: src que define o endereço onde se encontra a imagem, o atributo alt que descreve a imagem e o atributo title que dá um título a imagem. O título aparecerá no navegador quando o cursor do mouse estive sobre a imagem. Também é possível alinhar a posição da imagem com relação ao que vem depois dela, que pode ser um texto ou outra imagem. <img src= 6630.png align= center > <img src= 6630.png align= left > Imagem do lado esquerdo e texto do lado direito. Podemos ainda adicionar bordas em uma imagem: <img src= figura.jpg align= center border= 3 > <img src= figura.jpg align= center border= 0 > Um caso muito comum de utilização de imagens é associado ao atributo "background". Neste caso, não trabalhamos com a tag "src" e sim com o atributo "background". Dessa forma, este atributo deve estar dentro de uma tag, que podem ser as tags abaixo: Página 3

26 Curso de HTML - Parte 4: Mais TAGS: Links e Imagens <body> - para colocar uma imagem no fundo da página <td> - para colocar uma imagem no fundo de uma célula de tabela <tr> - para colocar uma imagem no fundo de uma linha de tabela <table> - para colocar uma imagem no fundo de uma tabela Veja exemplo: <body background= 6630.jpg > Podemos também inserir imagens que estão localizadas em outros diretórios ou até mesmo em outros websites. Veja os exemplos: <img src="imagens/abacaxi.png"> <img src= op.jpg > Infelizmente para trabalharmos melhor com tratamento de imagens é necessário um bom editor de imagens como o Adobe PhotoShop e o Adobe Fireworks. Links Com HTML é possível fazermos ligações de uma região de texto (ou imagem) a outro documento. Para construir links entre páginas precisamos de um elemento conhecido como âncora. Para inserir um link em um documento, utilizamos a tag <A>, da seguinte forma: <a href = "pagina_destino"> Clique aqui </a> pagina_destino : é o URL do documento de destino; Clique aqui: é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado para o documento de destino. A tag <a> possui vários atributos, utilizados acordo com a ação associada ao link. Os mais usados são os dois atributos abaixo: HREF : Indica o arquivo de destino da ligação de hipertexto. TARGET : Indica o frame em que será carregado a pagina de destino, por exemplo: uma nova janela no navegador, na página atual. Página 4

27 Curso de HTML - Parte 4: Mais TAGS: Links e Imagens Podemos também criar links internos, dentro da própria página. Tudo o que precisamos é usar o atributo id e o símbolo "#". Use o atributo id para marcar o elemento que é o destino do link. Por exemplo: <h1 id="inicio"> Inicio do Texto </h1> Agora podemos criar um link que leve àquele elemento usando o símbolo "#" no atributo do link. O símbolo "#" informa ao navegador para ficar na mesma página em que está. O símbolo "#" deve ser seguido pelo valor atribuido a id para onde o link vai. Por exemplo: <a href="#inicio">link para o início do texto </a> Veja o exemplo completo abaixo: <head> </head> <body> <p><a href="#cabecalho1">link para cabeçalho 1</a></p> <p><a href="#cabecalho2">link para cabeçalho 2</a></p> <h1 id="cabecalho1">cabeçalho 1</h1> <p>texto do cabeçalho 1</p> <h1 id="cabecalho2">cabeçalho 2</h1> <p>texto do cabeçalho 2</p> </body> Agora se você quer construir links entre páginas de um mesmo website você não precisa escrever o endereço completo de cada página (URL). Por exemplo, se você tem duas páginas e salvou as duas em um mesmo diretório você constrói um link de uma para a outra usando somente o nome do arquivo no link. Veja como fica o exemplo: <a href="page2.htm">aqui um link para a pagina 2</a> Podemos também utilizar imagens como links. Veja exemplo: Página 5

28 Curso de HTML - Parte 4: Mais TAGS: Links e Imagens <a href=" <img src="logo.png"></a> Por último podemos criar link para um endereço de . Isto é feito de modo semelhante aos links para documentos. <a para o professor Regilan</a> Observe que no lugar do endereço do documento escrevemos mailto: seguido pelo endereço de . Quando o link é clicado o programa de padrão do usuário é aberto com o endereço do link já digitado na linha para destinatário. Mas, atenção, isto só irá funcionar se o usuário tiver um programa de instalado na sua máquina. Encerramos por aqui. Na parte 5 deste tutorial estudaremos sobre tabelas, além das tags <div>, <span> e <blockquote> Até a próxima parte! possível. Qualquer dúvida, pergunta ou sugestão, mande um que responderei o mais rápido Prof. Regilan Meira Página 6

29 CURSO HTML Parte 5: Tabelas, div e span Olá amigos visitantes, Estamos na quarta parte de nosso tutorial HTML. Até o momento estudamos uma série de TAGS de forma que já podemos fazer pequenos exemplos de sites. Com o estudo de hoje deixaremos nosso site mais atraente com a possibilidade de inserir imagens e também criar ligações (links) entre as páginas. Bom Estudo! Prof. Regilan Meira

30 Curso de HTML - Parte 5: Tabelas, div e span Tabelas Em HTML, usamos as tabelas não só para exibir dados como em uma planilha tipo Excel, mas também para distribuir melhor os objetos na tela. Porém com os padrões web em alta (Web Standards) as tabelas estão sendo banidas definitivamente para esta última utilidade. As tabelas estão previstas nas especificações da X(HTML) e devem ser utilizadas para os fins a que se destinam. O elemento table foi introduzido com a finalidade de apresentar dados tabulares como, por exemplo: tabelas de pesos e medidas, preços, tabelas de dados gerais, entre outros. Segundos os princípios da Web Standards as tabelas devem ser utilizadas somente para esses fins. O elemento table é apresentado no navegador, como uma espécie de grade, composta de colunas, linhas e células, podendo conter texto, imagem, link ou qualquer outro tipo de conteúdo. Resumindo, as tabelas são definidas conforme abaixo: uma tabela é composta por linhas e colunas que formam células. as células podem conter textos, imagens e até outras tabelas. é feita por meio das tags <table>... </table>. a tag <table> possui os atributos [border] [cellpadding] [cellspacing] [width]: o O atributo [border= n ] representa a espessura da borda em pixels o O atributo [cellpadding = n ] define o enchimento, espaço entre a borda e seu conteúdo, em pixels o O [cellspacing = n ] representa o espaçamento entre as células da tabela, em pixels. o O atributo [width = n ]: fixa um valor determinado, em pixels ou em porcentagem para a largura das células. cada linha da tabela é definida por <tr> </tr> (table row) cada célula na linha é definida por <td> </td> (table data) Para definir uma tabela, primeiro usamos a tag de abertura: <table>, depois iniciamos a linha (<tr>) e colocamos as células que a linha contêm. No final colocamos as tag de fechamente(</td></tr></table>). As linhas devem conter o mesmo número de células para que não dê erros. Ou seja, dentro das tags <tr> e </tr> devem haver o mesmo número de <td></td>. Página 2

31 Curso de HTML - Parte 5: Tabelas, div e span Para melhor compreensão, vamos ao exemplo abaixo. <head> </head> <body bgcolor="#00cc44"> <table border="1" width= 30% > <tr> <td>destino</td> <td>saída</td> <td>classe</td> </tr> <tr> </tr> <tr> </tr> <tr> </tr> </table> <td>eunápolis</td> <td>06:30</td> <td>comercial</td> <td>ilhéus</td> <td>08:00</td> <td>executiva</td> <td>salvador</td> <td>19:00</td> <td>leito</td> </body> Agora veja o código acima quando executado no navegador. Página 3

32 Curso de HTML - Parte 5: Tabelas, div e span Observe que no código acima utilizamos de atributos nas tabelas. Usamos o atributo border que é usado para definir a espessura de uma borda em volta da tabela. O atributo width é utilizado para definir a largura da tabela que é informado em pixels. Temos ainda alguns outros atributos como o align que define o alinhamento horizontal do conteúdo da tabela, de uma linha ou de uma célula. Por exemplo, left, center ou right (à esquerda, no centro ou à direita) e o valign que define o alinhamento vertical do conteúdo de uma célula. Por exemplo, top, middle ou bottom (em cima, no meio ou em baixo). Pode inserir qualquer coisa em uma tabela: texto, links e imagens. MAS, tabelas segundo os padrões da web destinam-se a apresentar dados tabulares (isto é, dados que devam ser apresentados em linhas e colunas). Antes as tabelas eram usadas como ferramenta para construir layout, atualmente fazemos isso através do uso de CSS, que veremos em capítulos futuros As recomendações do W3C para tabelas prevêem vários elementos e atributos para marcar adequadamente uma tabela, entre os quais podemos destacar o elemento <th> que é utilizado em substituição ao elemento td para células que representam o cabeçalho. Veja como fica o exemplo de tabelas utilizado o atributo <th> <head> </head> <body bgcolor="#00cc44"> <table border="1" width="30%"> <tr> <th>destino</th> <th>saída</th> <th>classe</th> </tr> <tr> <th>eunápolis</th> <td>06:30</td> <td>comercial</td> </tr> <tr> <th>ilhéus</th> <td>08:00</td> <td>executiva</td> </tr> Página 4

33 Curso de HTML - Parte 5: Tabelas, div e span <tr> </tr> </table> </body> <th>salvador</th> <td>19:00</td> <td>leito</td> A TAG Blockquote O objetivo da tag Blockquote é aplicar uma endentação (margem esquerda). Vamos fazer um exemplo utilizando esta tag: <head></head> <body bgcolor="#00cc44"> <p>inicialmente estamos utilizando um elemento <b>p</b>. Abaixo usamos o elemento blockquote. </p> <blockquote> Este elemento está utilizando a tag blockquote </blockquote> Veja agora a execução do código acima no navegador. Página 5

34 Curso de HTML - Parte 5: Tabelas, div e span A TAG Span A tag "span" não tem função estruturada definida e destina-se a fornecer ao autor um mecanismo de marcação utilizado em conjunto com os atributos: id e class. Pode ser utilizada para a configuração de trechos de parágrafos, principalmente para aplicação de folhas de estilo. O elemento span e div quando empregado com folhas de estilo em cascata (css) constitui um poderoso mecanismo para construção de websites. Vamos ver um exemplo utilizando essa tag. <head> <title>trabalhando com span</title> <style type="text/css">.configuracao { background-color: #BBDD55; color:#aa5577; font-family:verdana; } </style> </head> <body> <p> Vamos trabalhar com uma série de parágrafos.</p> <p>aqui eu vou selecionar apenas <span class="configuracao">esta parte do parágrafo</span> para aplicar o estilo de cor de fundo. </p> <p class="configuracao">neste aqui vou aplicar um estilo de cor de fundo no parágrafo todo utilizando a tag "p"</p> <p> <span class="configuracao">neste outro, também um parágrafo, usarei o mesmo estilo, porém selecionado com a tag "span". </span> </p> </body> Veja o resultado agora no navegador. Página 6

Curso PHP Básico. Jairo Charnoski do Nascimento

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

Leia mais

Programação para Internet I

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

Leia mais

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

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

Leia mais

Programação web Prof. Wladimir

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

Leia mais

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

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

Leia mais

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

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

Leia mais

Roteiro 2: Conceitos de Tags HTML

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

Leia mais

MÓDULO 1 - xhtml Básico

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

Leia mais

OPERAÇÃO DE SOFTWARE E APLICATIVOS

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

Leia mais

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

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

Leia mais

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

Programação HTML Construção de Páginas para WEB 47 Programação HTML Construção de Páginas para WEB 47 INICIANDO EXEMPLO3.HTML Crie um novo arquivo html chamado exemplo3.html dentro da pasta exemplos. Após os exercícios e trabalhos anteriores, nossa pasta

Leia mais

4. Características Gerais das Tabelas do HTML

4. Características Gerais das Tabelas do HTML 4. Características Gerais das Tabelas do HTML Curso de Extensão em HTML PUCRS A criação de uma tabela começa pelo tag e termina pelo tag. Antes do texto de cada linha da tabela você deve inserir o tag

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

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

Leia mais

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

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

Leia mais

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

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

Leia mais

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

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

Leia mais

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

Leia mais

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

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

Leia mais

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

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

Leia mais

Programação e Designer para WEB

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

Leia mais

LINGUAGEM DE PROGRAMAÇÃO HTML COMPONENTES: ROBSON EDMILSON

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

Leia mais

QUEM FEZ O TRABALHO?

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

Leia mais

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

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

Leia mais

1.Introdução ao HTML página 04. 2.O que é o HTML página 05. 3.O que são tags HTML página 05. 4.Iniciando com HTML página 10

1.Introdução ao HTML página 04. 2.O que é o HTML página 05. 3.O que são tags HTML página 05. 4.Iniciando com HTML página 10 Apostila de Índice HTML 1.Introdução ao HTML página 04 2.O que é o HTML página 05 3.O que são tags HTML página 05 4.Iniciando com HTML página 10 5.Mais tags HTML página 12 6.Atributos página 14 7.Links

Leia mais

Web Design Aula 02: HTML

Web Design Aula 02: HTML Web Design Aula 02: HTML Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Roteiro Introdução Conceitos HTML Primeira Página Identação Incluindo o título Salvando a página Vizualizando

Leia mais

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

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

Leia mais

Ferramentas para Multimídia e Internet - 1486

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

Leia mais

Roteiro de Estudos e Atividades Avaliativas HTML

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

Leia mais

2 HTML Inserindo objetos

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

Leia mais

Web Design. Prof. Felippe

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

Leia mais

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

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

Leia mais

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

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

Leia mais

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

4.14 - Imagens: <img src=...> src <img src=tecnologia.jpg> único atributo que não pode ser omitido neste TAG Nota: img 4.14 - Imagens: O TAG utilizado para a inclusão de imagens em páginas html é o: O atributo src especifica o local onde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

Leia mais

HyperText Markup Language HTML

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

Leia mais

Introdução. História. Como funciona

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

Leia mais

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

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

Leia mais

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

4.14 - Imagens: <IMG SRC=...> SRC <IMG SRC=tecnologia.jpg> único atributo que não pode ser omitido neste tag Nota: img 4.14 - Imagens: O tag utilizado para a inclusão de imagens em páginas html é o: O atributo SRC especifica o local aonde está a imagem e o seu nome. Nas páginas pessoais é mais comum o uso

Leia mais

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

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

Leia mais

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

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

Leia mais

PDI 1 - Projeto e Design de Interfaces Web

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

Leia mais

Introdução ao HTML Hypertext Markup Language

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

Leia mais

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

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

Leia mais

WEB DESIGNER WEB DESIGNER

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

Leia mais

Ensino I nterativo Universidade Anhembi Morumbi. Multimídia I

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

Leia mais

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo

Leia mais

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Imagens

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Imagens IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo Imagens ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo Imagens Índice

Leia mais

CRIAÇÃO DE SITES (AULA 4)

CRIAÇÃO DE SITES (AULA 4) Prof. Breno Leonardo Gomes de Menezes Araújo brenod123@gmail.com http://blog.brenoleonardo.com.br CRIAÇÃO DE SITES (AULA 4) O que eu preciso para construir um link? Para construir um link você usa o que

Leia mais

Introdução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira

Introdução. Introdução a HTML. A Linguagem HTML. Estrutura de uma Página. Mário Antonio Meireles Teixeira Introdução Introdução a HTML Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA mario@deinf.ufma.br Página Web: É um documento composto de texto e códigos especiais, chamados tags, que especificam

Leia mais

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

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

Leia mais

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

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

Leia mais

Passa a passo para construir uma página pessoal - Parte 1

Passa a passo para construir uma página pessoal - Parte 1 Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):

Leia mais

Claudio Damasceno. Avançar

Claudio Damasceno. Avançar Claudio Damasceno Conteúdo Alinhamento Âncoras, Links Tabelas Formatação Próximo Capítulo HTML prof.claudiodamasceno@hotmail.com 2 Recapitulando - Estrutura básica título DA PÁGINA

Leia mais

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,

Leia mais

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

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

Leia mais

Lista e Tabelas. Fundamentos da Linguagem Web

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

Leia mais

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

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

Leia mais

Tutorial de HTML. O que é HTML? Aprendendo

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

Leia mais

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

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

Leia mais

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

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

Leia mais

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

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

Leia mais

Como criar uma página WEB

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

Leia mais

HTML. Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.).

HTML. Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.). HTML Um documento HTML é constituído por um conjunto de TAGS (ex. html, head, body, etc.). Para se criar um novo documento HTML pode-se utilizar o Bloco de Notas, bastando para tal gravar o documento com

Leia mais

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

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

Leia mais

Unidade: O que é CSS? HTML e CSS? Boa aula!!!

Unidade: O que é CSS? HTML e CSS? Boa aula!!! Unidade: O que é CSS? HTML e CSS? Boa aula!!! Objetivo Construir: Padrões Web, Tableless e outros Como inserir o CSS nas páginas Sintaxe de utilização do CSS Tag DIV e tag SPAN Orientações Durante a explanação

Leia mais

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

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

Leia mais

Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo.

Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Como defino e escrevo uma classe? Classe é um seletor

Leia mais

Módulo 11 A Web e seus aplicativos

Módulo 11 A Web e seus aplicativos Módulo 11 A Web e seus aplicativos Até a década de 90, a internet era utilizada por acadêmicos, pesquisadores e estudantes universitários para a transferência de arquivos e o envio de correios eletrônicos.

Leia mais

Tecnologias para apresentação de dados - HTML. Aécio Costa

Tecnologias para apresentação de dados - HTML. Aécio Costa Tecnologias para apresentação de dados - HTML Aécio Costa Apresentação de Dados na Web Tecnologias client-side HTML CSS JavaScript HyperText Markup Language Uma linguagem de marcação utilizada para produzir

Leia mais

Posicionamento e Layout com CSS

Posicionamento e Layout com CSS Posicionamento e Layout com CSS Esquemas de posicionamento: absolute e relative Construção de layouts com divs e regras CSS Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto

Leia mais

Introdução ao HTML 5 e Implementação de Documentos

Introdução ao HTML 5 e Implementação de Documentos Linguagem de Programação para Web Introdução ao HTML 5 e Implementação de Documentos Prof. Mauro Lopes 1-31 20 Objetivo Iremos aqui apresentar a estrutura básica de um documento HTML e iremos também apresentar

Leia mais

Programação para Internet

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

Leia mais

Técnicas e processos de produção. Profº Ritielle Souza

Técnicas e processos de produção. Profº Ritielle Souza Técnicas e processos de produção Profº Ritielle Souza Ferramentas Programáveis Mensagem para mais de um destinatário FALE CONOSCO Definindo

Leia mais

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

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

Leia mais

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

HTML HTML. Criação de Páginas WEB. Caracteres especiais < < > > Sessão 10 HTML Sessão 10 HTML HTML permite que caracteres especiais sejam representados por sequências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caractere

Leia mais

Introdução à Tecnologia Web

Introdução à Tecnologia Web Introdução à Tecnologia Web HTML HyperText Markup Language XTML extensible HyperText Markup Language Elementos da Seção do Corpo Tabelas Formulários Professor Alan Cleber Borim www.alanborim.com.br Índice.

Leia mais

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

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com No início A Web é criada em 1989, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos.

Leia mais

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

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

Leia mais

Síntese da aula anterior

Síntese da aula anterior Síntese da aula anterior Na última aula, aprendemos a utilizar em html: Tabelas Hiperligações 1 O que vamos fazer hoje? Vamos utilizar o que aprendemos da aula anterior juntamente com Utilização de imagens

Leia mais

Aula 01: Apresentação da Disciplina e Introdução a Conceitos Relacionados a Internet e WEB

Aula 01: Apresentação da Disciplina e Introdução a Conceitos Relacionados a Internet e WEB Aula 01: Apresentação da Disciplina e Introdução a Conceitos Relacionados a Internet e WEB Regilan Meira Silva Professor de Informática do Campus Ilhéus Formação em Ciência da Computação com Especialização

Leia mais

TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar as principais tags utilizadas na construção de páginas Web. Compreender as principais funcionalidades de cada tag utilizada.

Leia mais

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

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

Leia mais

INTRODUÇÃO À PROGRAMAÇÃO

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

Leia mais

Prof. Erwin Alexander Uhlmann 1/7/2010

Prof. Erwin Alexander Uhlmann 1/7/2010 HTML 5 O html 5 é a nova versão do html 4. Foi desenvolvido para a interoperabilidade e padronização de plataformas e navegadores (motores). Compare as estruturas do html4 e do 5, abaixo: HTML 4 HTML 5

Leia mais

1 2 3 W O R K S H O P 4 5 6 W O R K S H O P 7 W O R K S H O P 8 9 10 Instruções gerais para a realização das Propostas de Actividades Para conhecer em pormenor o INTERFACE DO FRONTPAGE clique aqui 11 CONSTRUÇÃO

Leia mais

1. Como criar uma conta

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

Leia mais

DESENVOLVIMENTO WEB I - 7122

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

Leia mais

APOSTILA DE INTRODUÇÃO AO HTML

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

Leia mais

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

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

Leia mais

PDI 1 - Projeto e Design de Interfaces Web

PDI 1 - Projeto e Design de Interfaces Web Introdução a HTML e XHTML Elementos básicos parte 2 Professor: Victor Hugo L. Lopes Agenda: --Aprofundando nos elementos básicos do HTML; --Criando Hiperlinks em HTML; 2 Estrutura básica de um documento

Leia mais

ÍNDICE - HTML. Módulo 1 WEB... 2 Browsers... 2 HTTP... 3 IP... 4 DNS... 4 URL... 4 FTP... 4

ÍNDICE - HTML. Módulo 1 WEB... 2 Browsers... 2 HTTP... 3 IP... 4 DNS... 4 URL... 4 FTP... 4 ÍNDICE - HTML Módulo 1 WEB... 2 Browsers... 2 HTTP... 3 IP... 4 DNS... 4 URL... 4 FTP... 4 Módulo 2 HTML 4... 5 Tag... 7 Adicionando Cor e Imagem ao fundo da página... 10 Cabeçalhos Elementos de título...

Leia mais

jquery Apostila Básica

jquery Apostila Básica jquery Apostila Básica INTRODUÇÃO 3 CAPÍTULO 1 POR ONDE INICIAR 3 CAPÍTULO 2 MEU PRIMEIRO SCRIPT! 4 EXERCÍCIOS...5 CAPÍTULO 3 ADICIONANDO CSS 6 EXERCÍCIOS...7 CAPÍTULO 4 MODIFICANDO APENAS PARTE DO DOCUMENTO

Leia mais

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

Web Design Aula 01. No Caderno Responda as Questões abaixo Aula 01 1 O que é Web Design? 2 Qual a diferença entre Web Design e Web Designer? 3 O que são Sites ou Páginas? Cite 3 tipos de Sites. 4 O que é um Navegador? 5 O que são Servidores e o que são Protocolos?

Leia mais

CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: cauetec@cauetec.com.

CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: cauetec@cauetec.com. 3 de 13 Índice 1. Mapa CSS e legenda das principais imagens que compõe as paginas...4 a. Conhecimentos desejáveis:...4 b. Modelos Clássico e Fundo Fixo:...4 c. Para o designer o que muda entre o modelo

Leia mais

Sumário. Os Créditos que Faltavam Introdução

Sumário. Os Créditos que Faltavam Introdução Sumário Os Créditos que Faltavam Introdução Parte Um: Bem-vindo à Web Capítulo 1: Preparação para a web 9 Apresentação da World Wide Web 9 Navegadores 10 Servidores web 14 Planejamento de um website 15

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução O Gmail possui duas versões distintas para seu webmail: uma mais recente, que é a versão atual utilizada pelos usuários de Gmail, e

Leia mais

HTML -- Criação de Home Page

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

Leia mais