1ª Edição - Março 2014

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

Download "1ª Edição - Março 2014"

Transcrição

1

2 1ª Edição - Março 2014 Nenhuma parte deste livro pode ser u lizada ou reproduzida sob quaisquer meios existentes sem autorização por escrita do autor. Marco Aurélio Lang - Todos os Direitos Reservados 2014 Sobre o autor Marco Aurélio Lang é publicitário, apaixonado por internet, Bacharel em Comunicação Social e MBA em Marke ng e Administração. Professor de web design no CNEC e de desenvolvimento Web na Universidade do Site.

3 Sumário Introdução 4 Conhecendo o Web design Que diabos é HTML? Tags HTML Estrutura básica do HTML Criando uma página Marcações textuais Hyperlinks Comentários em HTML Linhas horizontais Listas em HTML Imagens em HTML Tabelas em HTML Formulários em HTML Elementos bloco e inline Conclusão

4 Introdução Decidi escrever este livro sobre HTML depois de procurar pela Internet por um material em lingua portuguesa de qualidade sobre o assunto para indicar aos alunos da Universidade do Site. O que encontrei foi muita informação desconexa, desatualizada e escrita em linguagem complexa demais. A única alterna va que me restou foi dedicar dois meses escrevendo um material que compila todas as principais marcações ( tags) HTML necessárias para dominar a linguagem. Como tenho mais de 10 anos de experiência em web design, para escrever um livro como este ve que me colocar no lugar dos estudantes de desenvolvimento de sites e criar algo acessível e rápido de assimilar, porém ao mesmo tempo completo. Escrito totalmente em conformidade com as recomendações da W3C para estudantes de HTML5, apresento este material para todos web design, e me orgulho em dizer que é o livro que melhor ensina HTML no menor tempo. Bons estudos... Marco Aurélio Lang

5 1 Conhecendo o Web design O Web design é uma extensão da prá ca do design aplicada ao desenvolvimento de sites e demais peças para a Internet. O profissional que trabalha com esse po de design é conhecido como web designer, e precisa dominar diversas disciplinas como a arquitetura da informação, programação, ergonomia, usabilidade, acessibilidade entre outros. O webdesigner pode trabalhar como empregado em qualquer empresa que tenha uma área de web, em uma agência digital, ou ainda como freelancer, oferecendo seus serviços como profissional autônomo. A maioria do trabalho do webdesigner é desenvolvido em HTML (estrutura), CSS (formatação es lís ca) e SCRIPTS (comportamento). Existem normas técnicas de padronização para cada um deles que são recomendadas pelo W3C, orgão esse responsável pelos padrões de desenvolvimento para a internet. Para criar sites o webdesigner precisa de um simples editor de texto e algum programa para ilustrações, apesar de exis rem bons so wares que auxiliam o desenvolvimento para web, como o Dreamweaver, WYSIWYG Web Builder, Notepad++, etc. Como você pode ver, a pessoa precisa dominar diversas competências para se tornar um Webdesigner profissional e cumprir com o principal obje vo do Web Design, que é tornar a experiência do usuário do site a mais agradável e intui va possível. 5

6 1. Conhecendo o Web design Web Design x Webdesigner É comum ver as pessoas confundindo o nome da profissão Webdesigner com o nome da técnica Web Design. Se você é - ou deseja ser - um profissional da internet jamais pode cometer o pecado de confundir esses dois termos. Web Design: área do design que desenvolve sites e demais peças/aplicações para a Internet; Webdesigner: profissional que "faz" web design. 6

7 2 Que diabos é HTML? O termo HTML é usado para abreviar a expressão HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto, ou seja, é a matéria prima que cons tui os sites na internet. São as marcações HTML que dizem ao browser como exibir o documento ao internauta. Essa linguagem pode ser interpretada pelos navegadores (browsers) de formas diferentes, onde uma marcação não reconhecida por determinado so ware simplesmente é ignorada, resultando em diferenças na apresentação da página ao internauta. Por esse mo vo que existe a necessidade de sempre que desenvolvermos algo em HTML testarmos em diferentes navegadores. A World Wide Web Consor um (W3C) é uma organização criada para manter as especificações do HTML. Ela faz recomendações tanto para web designers quanto para desenvolvedores de so wares na tenta va de padronizar a linguagem. Até o ano de 2006 a organização trabalhou em uma nova linguagem que foi chamada de XHTML, que posteriormente foi subs tuída pelo chamado HTML5, linguagem essa que tem como principal caracterís ca uma sintaxe mais rigorosa e menos ambígua para tornar o HTML mais simples de ser processado e extendido. Se quiser conhecer mais sobre a história do HTML, assista o vídeo: h ps://www.youtube.com/watch?v=nsmapcncsyi 7

8 2. Que diabos é HTML? Diferentes versões do HTML A tabela a seguir mostra as diferentes versões do HTML lançadas até hoje. Versão do HTML Ano HTML 1991 HTML HTML HTML HTML XHTML 2000 HTML Características do HTML Documentos HTML podem ser criados em qualquer editor de texto (notepad, edit, etc...); Os documentos HTML não são compilados, seu código sempre é visível e editável; Existem editores e conversores que automa zam grande parte da escrita HTML; HTML não faz diferença entre maiúsculas e minúsculas, ou seja, a notação <body> é equivalente a <BODY> ou <body>. Porém segundo recomendações da W3C devemos sempre usar as marcações em letras minúsculas. 8

9 9 2. Que diabos é HTML? Glossário básico A seguir alguns termos básicos do HTML que o webdesigner precisa conhecer: Documento: é a unidade mínima da informação do HTML, a página. : é a unidade mínima da informação do HTML, a página. Elementos: são as diferentes partes do documento HTML, por exemplo tulos, parágrafos, imagens, etc. Marcações: são as e quetas ( tags) usadas geralmente em duplas que formam os diferentes elementos. Ex: <p>; Tags: o mesmo que marcações; Atributos: configuram as tags com determinados valores. Ex: <a href= pagina2.html>, nesse caso href é o atributo. Browser: é o navegador usado pelos internautas para renderizar os arquivos HTML. Por exemplo Google Chrome, Internet Explorer, Firefox, Safari.

10 10 3 Tags HTML O HTML tem como principal caracterís ca o uso de tags (ou e quetas) para marcação dos elementos no documento. Uma tag sempre começa com o símbolo <, seguida do nome da marcação, e fechada com >. De modo geral as tags sempre são usadas em pares para formar um elemento, sendo uma para iniciar a marcação e outra para finalizá-la, esta úl ma caracterizada pelo uso de uma barra / logo após sua abertura. Um exemplo é a tag que inicia todo documento <html> e a que o finaliza </html>. As tags podem ainda conter outras informações referentes a atributos e valores do elemento, sempre com a finalidade de modificar os resultados padrões que os elementos geram quando renderizados pelo browser. Outra caracterís ca das tags é que elas podem ser aninhadas (podemos abrir tags dentro de tags). Inclusive a própria lógica de um documento HTML consiste em um aninhamento de tags (elementos).

11 3. Tags HTML Exemplo de elemento simples O exemplo a seguir mostra um parágrafo com o texto exemplo na formatação mais básica do elemento <p>. <p>exemplo de parágrafo simples.</p> Exemplo de elementos aninhados O exemplo a seguir mostra o mesmo texto, porém com uma das palavras em negrito, demonstrando um dos possíveis aninhamento que podem ser feitos em HTML. <p>exemplo de <strong>parágrafo</strong> simples.</p> 11

12 12 4 Estrutura básica do HTML A estrutura básica do HTML é o mínimo que um documento deve ter para que o servidor e o browser consigam entregar o conteúdo ao visitante. Ela consiste nas seguintes tags: <html>: inicia o documento HTML e indica ao browser que todo conteúdo que vier depois dela deve ser tratado como uma série de códigos HTML. <head>: define o cabeçalho de um documento HTML, trazendo informações sobre o mesmo como tulo, ligações de folhas de es lo, scripts, entre outros. <body>: onde são colocados os demais elementos que vão compor a página, ou seja, é a área que ficará visível aos visitantes da mesma. Apesar de muitos browsers conseguirem renderizar páginas sem essa estrutura básica, a presença dessas três tags é altamente recomendada em qualquer documento HTML, jamais deixe de u lizá-las.

13 4. Estrutura básica do HTML Exemplo de estrutura básica do HTML O exemplo a seguir mostra a estrutura básica que você precisa usar para criar um documento HTML. <html> <head> <title>minha página</title> </head> <body> <p>exemplo de texto.</p> </body> </html> Hora de praticar! 1. Abra o seu editor de texto (ex. Bloco de Notas do Windows); 2. Copie o código da estrutura básica do HTML nele; 3. Salve esse arquivo como index.html; 4. Localize o arquivo e abra-o no browser de sua preferência; 5. Pronto! Você acaba de criar sua primeira página em HTML. 13

14 5 Criando uma página Um website é um conjunto de páginas em hipermídia sob um mesmo domínio, portanto, para começar um site o primeiro passo é criar a página inicial - também conhecida como homepage ou simplesmente home que servirá como uma espécie de índice para o restante do site. Para criar essa página inicial, acesse o editor de texto de sua preferência e crie um arquivo novo chamado index.html. A palavra index vem do inglês e significa índice, ou seja, será ela que remeterá o visitante as demais páginas que compõem o site. O index.html é o arquivo padrão a ser mostrado quando a URL requisitada corresponde a uma pasta. Por exemplo, se o internauta digitar uol.com.br/esportes o arquivo que será carregado será provavelmente uol.com.br/esportes/index.html. Diz-se que é provavelmente esse arquivo porque determinados servidores podem aceitar outras nomenclaturas ou formatos, como index.htm, index.php, default.htm, default.asp, etc. Dica Quente! A Dica Quente para quem esta começando a desenvolver sites é sempre nomear o arquivo da homepage (primeira página do site) 14 como index.html.

15 5. Criando uma página Colocando conteúdo em sua página Começar a construção de uma página implica em escrever a estrutura básica (mínima) do documento HTML, conforme visto anteriormente. Abra um editor de texto qualquer (notepad, por exemplo), e digite o código a seguir: <html> <head> <title>nome da sua página</title> </head> <body> <p>primeiro elemento que aparecerá na página</p> </body> </html> Além das tags <html>, <head> e <body> das quais falamos anteriormente, você pode ver no exemplo anterior: < tle>: Título do documento que aparecerá na Barra de Título do browser do internauta. Como regra geral todo o documento HTML precisa de um tulo que descreva em pouquíssimas palavras o assunto do mesmo. <p>: Criação de um novo parágrafo no corpo da página. Ambas as tags serão explicadas com maior profundidade posteriormente, no momento você pode u lizá-las para começar a montar sua primeira página de teste. Dica Quente! Jamais use acentos e espaços nos 15 nomes de seus arquivos HTML. A forma indicada é, por exemplo pagina-colecao.html.

16 5. Criando uma página Testando sua página O próximo passo é testar como o browser renderiza sua página. Para tanto, vá até a pasta onde se encontra seu arquivo index.html e no menu do botão direito do mouse selecione a opção Abrir com... e selecione o browser de sua preferência. No começo basta testar seu arquivo HTML em um único navegador, porém conforme o documento for ficando mais complexo é interessante renderizá-lo em outros browser. Os principais sugeridos são: Principais Browsers (navegadores) da atualidade Google Chrome Mozilla Firefox Apple Safari Opera Internet Explorer Apesar de atualmente o Chrome ser o líder absoluto no ranking dos navegadores mais u lizados jamais devemos esquecernos dos demais browsers, principalmente em um mercado de grande oscilação quanto esse, onde até poucos anos o Internet Explorer da Microso reinava absoluto, porém foi superado por outros so wares principalmente devido à baixa par cipação de mercado em smartphones. Conforme você for avançando no desenvolvimento de sites 16 verá o quão são importantes os diversos testes de desempenho do site, não só em diferentes browsers como também em variadas resoluções e disposi vos.

17 6 Marcações textuais As marcações textuais, denominadas de tags para texto, servem para montar os elementos que compõem o texto do documento HTML, como parágrafos, tulos, citações, entre outros. O uso adequado das mesmas além de tornar o documento mais compa vel com a linguagem o torna mais relevante perante os buscadores como o Google e o Bing. Dica Quente! O melhor editor de arquivos HTML é o Notepad++, que pode ser baixado gratuitamente pelo site h p://notepad-plusplus.org/download/. Esse mesmo programa será ú l também para trabalhar com CSS, JavaScript, PHP e demais linguagens com as quais você, como webdesigner, pode se deparar. 17

18 6. Marcações textuais Heading Tags As Heading tags também são conhecidas como Cabeçalhos e servem para marcar tulos e sub tulos no documento HTML. É comum a confusão entre a tag < tle> e as heading tags, pois geralmente a tle tag é igual à primeira heading tag do texto. Vejo o exemplo a seguir: <html> <head> <title>carros esportivos</title> </head> <body> <h1>carros esportivos</h1> <p>vamos falar sobre carros esportivos...</p> </body> </html> O resultado desse código é: < tle> <h1> 18

19 6. Marcações textuais O HTML possui 6 níveis dis ntos de heading tags, sendo o número 1 o de maior destaque até chegar ao 6, que é o Cabeçalho de menor destaque. É fundamental manter a hierarquia deste po de tags abrindo sempre o próximo nível sem pular etapas: Uso Correto <h1>cabeçalho1</h1> <h2> Cabeçalho2</h2> <h3> Cabeçalho3</h3> <h4> Cabeçalho4</h4> Uso Incorreto <h1>cabeçalho1</h1> <h3> Cabeçalho3</h3> <h4> Cabeçalho4</h4> <h5> Cabeçalho2</h5> Note que no exemplo incorreto anterior a tag <h3> está aberta sem que exista uma tag <h2>, subvertendo a ordem crescente de tulos. A seguir os diferentes níveis de heading tags e sua renderização padrão nos browsers. HTML No Browser <h1>cabeçalho 1</h1> Cabeçalho 1 <h2>cabeçalho 2</h2> <h3>cabeçalho 3</h3> <h4>cabeçalho 4</h4> <h5>cabeçalho 5</h5> <h6>cabeçalho 6</h6> Cabeçalho 2 Cabeçalho 3 Cabeçalho 4 Cabeçalho 5 Cabeçalho 6 19

20 20 6. Marcações textuais Parágrafos Como o HTML não reconhece os caracteres de quebra de linha dos editores de texto é necessário usar a marcação <p> para criar um novo parágrafo. <p>texto que aparecerá no primeiro parágrafo.</p> <p>segundo parágrafo aberto.</p> <p>terceiro e último parágrafo do texto.</p> O código anterior monta 3 pequenos parágrafos na sequência, deixando uma linha em branco entre eles. Quebra de linha A tag <br> serve para fazer a quebra de linha forçada, que não deve ser confundida com a criação de um novo parágrafo que além de quebrar a linha também adiciona um espaço em branco entre os parágrafos. Veja a diferença no código a seguir. <h1>tag P</h1> <p>diferença usando a tag P.</p> <p>observe o espaço entre os parágrafos.</p> <h1>tag BR</h1> <p>exemplo de uso do BR.<br>Observe o espaço entre as linhas.</p> A seguir compare os resultados:

21 6. Marcações textuais Formatação básica de texto O HTML possui tags específicas para fazer marcações de formatação em textos. A forma de marcação é a mesma de qualquer outro elemento, onde o trecho formatado deve aparecer entre o par de tags da formatação: <tag de formatação>texto a ser formatado</tag de formatação>. <b>: negrito prefira sempre usar <strong>; <i>: itálico, usado para mudar a voz na oração - prefira sempre usar <em>; <small>: define um texto menor; <strong>: define texto importante, renderizado como negrito; <em>: define texto importante, renderizado como itálico. <sub>: subscrito; <sup>: sobrescrito; <del>: riscado usado para mostrar que algo foi apagado; <mark>: destacado. Dica Quente! A esta altura dos estudos você deve estar se perguntando sobre como mudar o tamanho da letra, a cor, o alinhamento, etc. Isso tudo não é feito diretamente com HTML, e sim via CSS, assunto e s s e q u e v o c ê e n c o n t r a r á e m a b u n d â n c i a n o s i t e h p://universidadedosite.com.br/. 21

22 6. Marcações textuais Observe os exemplos no código a seguir. <p><strong>texto em negrito.</strong></p> <p><em>texto em itálico.</em></p> <p><small>texto pequeno.</small></p> <p><strong>texto importante.</strong></p> <p><b>texto <sub>subscrito</sub> e outro <sup>sobrescrito.</sup></b></p> <p><del>texto apagado.</del></p> <p><mark>texto destacado.</mark></p> Veja o resultado: Essa formatação básica serve para estruturar as informações no texto de seu HTML, muito usada como técnica de SEO (o mização de sites para buscas). Como é possível ver a formatação é bastante básica e até parecida como no caso do <b> e do <strong> - porém a formatação es lís ca destes elementos pode 22 ser alterada através de CSS, trabalho esse de competência do webdesigner.

23 6. Marcações textuais Citações Uma importante marcação textual em HTML são as citações, usadas para apresentar trechos de texto de outros autores. Elas podem ser de dois pos: <q>: citação curta dentro da linha do parágrafo; <blockquote>: citação longa. Observe a diferença no exemplo a seguir. <p>exemplo do uso de uma <q>citação curta dentro</q> de um parágrafo.</p> <blockquote>já as citações longas, com várias linhas devem ser colocadas entre a tag blockquote. Note que nesta caso não abrimos um novo parágrafo, pois o blockquote em sí já se caracteriza como um. Repare também na tabulação deste tipo de citação.</blockquote> O resultado é o seguinte: Note que no caso de citações curtas colocamos a tag <q> dentro do <p>, já nas longas não abrimos um novo parágrafo, pois o 23 <blockquote> em si já se caracteriza como um. Repare também na tabulação deste po de citação.

24 24 7 Hyperlinks Como mencionado anteriormente, o termo HTML é o usado para abreviar a expressão HyperText Markup Language, que em português significa Linguagem de Marcação de Hipertexto. O grande trunfo desses hipertextos escritos em HTML está na sua capacidade de criar ligações (links) a outras partes desse documento ou a outro documento. Sempre que você clica em algum botão em um site ou outra área qualquer de texto destacado clicável - na verdade está a vando um desses hyperlinks que vão remetê-lo a outro documento ou arquivo de forma facilitada, tornando a localização de conteúdos mais rápida.

25 7. Hyperlinks Criando um link simples Um link (abreviação muito u lizada para se referir ao hyperlink) é criado com a marcação denominada âncora, aplicada com a tag <a>. A tag <a> é sempre composta, ou seja, precisa de outros atributos e valores para funcionar. O principal e indispensável é o href que especificará o documento que será ligado através do link. Por exemplo: <a href= contato.html ">Fale Conosco</a> A tag <a> é composta pelo href, seguida do sinal matemá co de = e do nome do documento entre aspas duplas. Posteriormente, segue o texto âncora que aparecerá para o internauta clicar, e finalmente fecha com a tag </a> que diz ao browser que aquele elemento link termina ali. Dica Quente! Jamais crie links usando todo o caminho do arquivo, por exemplo C:/meu-site/produtos.html. Use somente o nome do arquivo e da pasta a par r do ponto de par da de seu arquivo. Digamos que você queira abrir o arquivo produtos.html que está na mesma pasta meu-site, faça o link assim: produtos.html. 25

26 7. Hyperlinks Criando um link em diretório diferente O processo de fazer ligações entre documento HTML ou demais arquivos que estão em diretórios diferentes é o mesmo, basta adicionar ao href o caminho completo para onde o link deve apontar. Exemplo: <a href="produtos/camisetas.html ">Camisetas</a> Agora imagine que dentro do documento Camisetas você queira criar um link para retornar ao seu index.html, que se encontra na raiz do site. Se você montar o link chamando diretamente o documento através da href= index.html" o link quebrará, pois o index.html se encontra em uma pasta abaixo da camisetas.html, que é a que você esta acessando. Para resolver o problema você deve voltar um nível de pastas usando../, como no exemplo a seguir: <a href="../index.html">homepage</a> Dica Quente! Apesar de na criação de um link para determinada pasta não ser necessário o uso da barra / no final, é aconselhado usá-la, pois a não u lização da mesma faz a requisição em duplicidade ao servidor, deixando tanto o site um pouco mais lento quanto o próprio servidor de hospedagem. Confira o exemplo a seguir: Link para pasta correto: <a href=" leite/"> 26 Link para pasta incorreto: <a href=" leite">

27 7. Hyperlinks Criando um link com URL Na web os endereços que digitamos no browser para acessar determinado arquivo ou documento são chamados de URL como, por exemplo, h p://www.maujor.com/dicas/deprecated.php. É comum fazermos ligações usando URL's pelo fato de muitos links em nossos documentos HTML apontarem para outros sites. O processo de criação desses hyperlinks é muito parecido com os links internos: <a href=" Dicas</a> Criando um link para seção específica Pode ser bastante ú l para o internauta pular para determinadas seções de um documento sem precisar passar pelo conteúdo como um todo. Para isso an gamente era usada a named anchor, ou âncora em português. Nas novas versões do HTML ela foi subs tuída pelo atributo id, que torna a criação de links para seções muito mais intui va. O primeiro passo é criar o link que aponta para a seção específica, que pode inclusive estar no mesmo documento HTML, como é o caso do exemplo a seguir: <a href=" #cachorro">cachorro </a> 27

28 7. Hyperlinks O código anterior monta a ligação (note o uso do símbolo # ), enquanto que a seguir é definida a seção para onde o link apontará: <h2 id= cachorro >Cachorro</h2> O resultado disso é que quando o internauta clicar no link Cachorro ele será direcionado para a seção Cachorro dentro do mesmo documento, que foi marcada com o atributo id. Digamos que a seção cachorro esteja em outro documento, basta adicionar o caminho completo no link e definir o atributo id na seção do documento des no: <a href="animais.html#cachorro">cachorro</a> O internauta é direcionado para a seção Cachorro que se encontra dentro do documento animais.html. Criando um link com URL Apesar de exis rem formas melhores de o visitante manter contato com o site, como um formulário de , por exemplo, o link mailto pode ser ú l em caso de não dispormos de um script para contato. <a um e mail para nós.</a> Esse link quando clicado abrirá o cliente de (ex.: Outlook) padrão do usuário, já com o des natário preenchido. 28

29 7. Hyperlinks Principais atributos da tag <a> Como visto anteriormente, a tag <a> é sempre composta, ou seja, precisa de outros atributos para funcionar. Conheça os principais: href: especifica o des no do link para qual o internauta será reme do quando clicar; tle: uma breve descrição sobre o documento para o qual o link aponta que aparecerá quando o visitante colocar o ponteiro do mouse sobre o mesmo sem clica-lo. target: define o alvo onde o documento será aberto, que pode ser uma determinada janela ou frame. Os principais são: _blank, que abre o documento em uma nova janela; e _self, abre no mesmo frame, caso você u lize esse po de recurso o que não é recomendado. Confira a seguir um exemplo de marcação <a> que abre um arquivo PDF em uma nova janela: <a href="imposto de renda.pdf" title="formulário de preenchimento para declaração do IR." target="_blank">imposto de Renda</a> 29

30 7. Hyperlinks O atributo target foi eliminado no XHTML, porém voltou a ser recomendado no HTML5, devido a sua grande u lidade. U lize-o sempre de forma moderada e inteligente, evitando definir a abertura de muitos links em novas janelas, pois isso irrita o internauta. Quanto ao atributo tle, a recomendação é sempre usá-lo pois além de ser uma importante técnica SEO facilita a navegação. Dica Quente! Tenha sempre em mente que independente do po de link que você quiser criar, a estrutura é sempre a mesma: <a href= caminho+nome do arquivo+extensão >Texto âncora</a> Hora de praticar! Hyperlinks são uma das tags HTML que mais confundem os estudantes, por isso é tão importante você pra car. 1. Crie um documento HTML e salve como index.html; 2. Dentro da pasta onde esta o index.html, crie outra pasta chamada arquivos; 3. Na pasta arquivos crie outro documento HTML chamado segundo.html; 4. No index.html crie um link para o segundo.html, e vice-e- 30 versa. Esse exercício vai ensiná-lo a linkar páginas em diferentes diretórios.

31 8 Comentários em HTML As tags de comentário <!--" e --> são u lizadas para fazer observações e apontamentos no código fonte do HTML. Sua principal caracterís ca é não ficar visível para o visitante na renderização do browser, porém aparecer sempre que o código fonte é acessado. Usar tags de comentário facilita o desenvolvimento do site, principalmente se o código for muito extenso ou desenvolvido por uma equipe, pois nesse caso um desenvolvedor pode deixar observações para os demais envolvidos no projeto. Veja o exemplo a seguir: <html> <head> <title>carros esportivos</title> <! esse título precisa ser melhorado > </head> <body> <h1>carros esportivos</h1> <p>vamos falar sobre carros esportivos...</p> </body> </html> Veja que o desenvolvedor deixou um lembrete no código alertando sobre uma melhoria necessária no documento. 31

32 9 Linhas horizontais Existe uma tag HTML específica para a criação de linhas horizontais no documento: <hr>. Essa marcação é bastante ú l para a criação de um separador visual simples de conteúdo para as versões até HTML 4.1. Já para HTML5 ela ganha ainda mais relevância, pois serve para marcar a quebra de tema no documento. Sua principal caracterís ca é a não necessidade de fechamento, como é possível ver no exemplo a seguir. <p>meu primeiro parágrafo.</p> <hr> <p>segundo parágrafo.</p> Note que o <hr> não necessita de </hr> para que o complemento seja renderizado corretamente pelo navegador. <hr> 32

33 10 Listas em HTML O uso de listas em HTML facilita muito a criação de tópicos, sejam eles numerados ou não. Ao invés de usar o famigerado marcador * ou números seguidos de pontos, em documentos HTML u liza-se <ul> para listas não ordenadas e <ol> para listas ordenadas (numeradas). Lista não ordenada Lista ordenada Dentro de qualquer item de lista é possível colocar - além de texto imagens, links, citações, etc., inclusive outras listas. Dica Quente! Pessoas gostam de listas, diversas pesquisas de marke ng comprovam isso. U lize este recurso HTML para criar conteúdo como Dicas úteis para... ou As 7 técnicas

34 10. Listas em HTML Uso de listas não ordenadas <ul> Uma lista não ordenada sempre começa com a tag <ul>, e seus itens ficam entre a marcação <li>, como no exemplo a seguir: <ul> <li>fiat</li> <li>ford</li> <li>chevrolet</li> </ul> gera: Veja a seguir o exemplo de lista não ordenada que o código Hora de praticar! 1. Crie um documento HTML, sempre usando a estruturá básica completa; 2. Nele crie um lista ordenada e logo abaixo uma não Abra no browser e compare os resultados. ordenada;

35 10. Listas em HTML Uso de listas ordenadas <ol> As listas ordenadas (ou numeradas) são criadas com a marcação <ol>, seguida dos itens colocados entre a tag <li>: <ol> <li>primeiro</li> <li>segundo</li> <li>terceiro</li> </ol> A seguir como a lista ordenada aparece no browser para o internauta: Como padrão as listas ordenadas sempre são renderizadas pelos browsers em uma sequência numérica ( ). Porém através de es lização CSS é possível alterar essa formatação, assim como a formatação das listas não ordenadas. 35

36 11 Imagens em HTML A máxima uma imagem vale mais que mil palavras se aplica perfeitamente a importância das imagens para as páginas da Internet. Diferente das imagens colocadas em um documento do Word, por exemplo, onde as mesmas são inseridas no arquivo do documento, no caso do HTML elas apenas são chamadas para determinado espaço reservado a elas. Por exemplo, se você criar um documento HTML com 5 imagens, seis requisições diferentes de arquivos serão feitas ao servidor 1 do arquivo HTML e 5 das imagens. Portanto cuidado com o uso em excesso desse po de recurso, sob pena de ter uma página lenta. Para inserir imagens em um documento HTML é necessário usar a tag <img>, sempre acompanhada do atributo src, que é uma abreviação da palavra inglesa source (fonte). No atributo src é colocado o caminho de sua imagem, como no exemplo a seguir: <img src="imagens/logo.png"> O código acima exibe a imagem logo.png que se encontra dentro do diretório imagens do site. Note como a tag <img> não precisa de fechamento /. 36

37 11. Imagens em HTML Atributo ALT da tag <img> O atributo alt da tag para imagens serve para especificar um texto (curto) alterna vo caso a imagem por alguma razão não possa ser mostrada ao visitante da página. Ela serve também como um texto âncora que dirá para os motores de busca (Google, Bing...) qual o conteúdo gráfico daquela imagem. A seguir um exemplo de atributo alt sendo mostrado pelo browser porque a imagem quebrou : imagem com ALT imagem quebrada sem ALT imagem quebrada sem ALT Apesar de não ser um atributo obrigatório e geralmente não visível para a maioria dos visitantes, é altamente recomendável u lizá-lo. Para você ter uma ideia da importância de criar bons alt's que descrevam a imagem, os internautas com deficiência visual que usam um navegador apropriado (como Jaws e Orca) ouvem a 37 narração do texto âncora, já que não podem ver a imagem.

38 11. Imagens em HTML Atributos HEIGHT e WIDTH da <img> O atributo height é u lizado para especificar a altura da imagem, enquanto o width especifica seu comprimento. Apesar de poder ser definido em porcentagem, por padrão ambos os valores são em pixels, como no exemplo a seguir: <img src="imagens/logo.png" alt= Logomarca colorida da empresa X. width="55" height="55"> Já em porcentagem é necessário fazer uso do símbolo % : <img src="imagens/logo.png" alt= Logomarca colorida da empresa X. width="35%" height="35%"> No exemplo acima a imagem ocupa 35% - tanto na largura quanto no comprimento do espaço disponível para ela. Dica Quente! O uso dos atributos height e width não é obrigatório, porém é recomendado pela W3C, pois define na rendeziração o espaço que o browser deve deixar para a imagem antes mesmo de carregá-la. O efeito de não especificar esse valores será da página ir mudando conforme as imagens forem sendo carregadas. 38

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

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

> 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

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

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

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

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

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

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

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

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

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 1 CDI - Curso de Webdesign - Prof. Paulo Trentin Objetivos para esta aula Debater sobre

Leia mais

Curso PHP Básico. Jairo Charnoski do Nascimento

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

Leia mais

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

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

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

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

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

SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível

SIEP / RENAPI. Dicas HTML e CSS para Desenvolvimento. de um Site/Portal Acessível SIEP / RENAPI Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Setembro de 2009 Dicas HTML e CSS para Desenvolvimento de um Site/Portal Acessível Cuidados em geral Separar adequadamente

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

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

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

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

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

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

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

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

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

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

Leia mais

Maurício Samy Silva. Novatec

Maurício Samy Silva. Novatec Maurício Samy Silva Novatec Sumário Agradecimentos...13 Sobre o autor...13 Introdução...15 Para quem foi escrito este livro... 15 Convenções tipográficas... 16 Site do livro... 18 Capítulo 1 O que é (X)HTML?...20

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

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

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 INTRODUÇÃO HTML Sigla em inglês para Hyper Text Markup Language, traduzindo daria algo como Linguagem para marcação de Hipertexto. E o que seria o

Leia mais

Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados

Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Tutorial Plone 4 Manutenção de Sites Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Sumário Introdução 1 Como fazer a autenticação do usuário 1.1 Através do

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

Hospedagem de site. Prof. Marciano dos Santos Dionizio

Hospedagem de site. Prof. Marciano dos Santos Dionizio Hospedagem de site Prof. Marciano dos Santos Dionizio Hospedagem de site O mundo está preparado para ver suas páginas? O mundo está preparado sim - você, em breve, estará também. Para publicar seu trabalho

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

Desenvolvimento Web Introdução a XHTML. Prof. Bruno Gomes

Desenvolvimento Web Introdução a XHTML. Prof. Bruno Gomes Desenvolvimento Web Introdução a XHTML Prof. Bruno Gomes 2014 Introdução HTML e XHTML Estrutura básica do documento DTDs Validação do documento Exercícios HTML e XHTML HTML (Hipertext Markup Language)

Leia mais

XXIV SEMANA MATEMÁTICA

XXIV SEMANA MATEMÁTICA XXIV SEMANA ACADÊMICA DA MATEMÁTICA Minicurso: Produção de Páginas Web para Professores de Matemática Projeto de Extensão: Uma Articulação entre a Matemática e a Informática como Instrumento para a Cidadania

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

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS HTML Como criar links em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte por quaisquer

Leia mais

Afinal o que é HTML?

Afinal o que é HTML? Aluno : Jakson Nunes Tavares Gestão e tecnologia da informacão Afinal o que é HTML? HTML é a sigla de HyperText Markup Language, expressão inglesa que significa "Linguagem de Marcação de Hipertexto". Consiste

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

DICAS PARA DESENVOLVER SITE ACESSÍVEL

DICAS PARA DESENVOLVER SITE ACESSÍVEL DICAS PARA DESENVOLVER SITE ACESSÍVEL Este arquivo contém dicas para o desenvolvimento de uma página acessível e de acordo com as normas W3C (World Wide Web). Para uma boa compreensão destas dicas é necessário

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

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

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

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

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

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

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.

Leia mais

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

Material didático Projeto Web Prof. Carlos 1 PROJETO WEB

Material didático Projeto Web Prof. Carlos 1 PROJETO WEB Material didático Projeto Web Prof. Carlos 1 PROJETO WEB Em dupla: (se sobrar um aluno poderemos ter apenas um trio). Construir um site de 10 páginas, no mínimo, sendo a primeira o INDEX; O site deverá

Leia mais

Apostila. Desenvolvimento de Aplicações com HTML

Apostila. Desenvolvimento de Aplicações com HTML Apostila Desenvolvimento de Aplicações com HTML 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

Leia mais

Aplicativos para Internet Aula 01

Aplicativos para Internet Aula 01 Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx

Leia mais

Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo.

Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo. Manual de Instruções ECO Editor de Conteúdo Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo. O ECO é um sistema amigável e intui?vo, mas abaixo você pode?rar eventuais dúvidas e aproveitar

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

WWW - World Wide Web

WWW - World Wide Web WWW World Wide Web WWW Cap. 9.1 WWW - World Wide Web Idéia básica do WWW: Estratégia de acesso a uma teia (WEB) de documentos referenciados (linked) em computadores na Internet (ou Rede TCP/IP privada)

Leia mais

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

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES INTRODUÇÃO. Professor Carlos Muniz INTRODUCAO DESENVOLVIMENTO E DESIGN DE INTRODUÇÃO INTRODUÇÃO A linguagem HTML (Hipertext Markup Language Linguagem de Marcação de Hipertexto) é usada para divulgar páginas na World Wide Web, o serviço

Leia mais

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

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

DESENVOLVIMENTO DE PÁGINAS PARA INTERNET

DESENVOLVIMENTO DE PÁGINAS PARA INTERNET UNIVERSIDADE ESTADUAL DE MARINGÁ PRÓ-REITORIA DE RECURSOS HUMANOS E ASSUNTOS COMUNITÁRIOS - PRH DIRETORIA DE RECURSOS HUMANOS - DRH DIVISÃO DE TREINAMENTO E DESENVOLVIMENTO TDE DESENVOLVIMENTO DE PÁGINAS

Leia mais

Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT.

Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT. Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT. PÁGINA: 2 de 21 Nenhuma parte deste documento pode ser utilizado ou reproduzido, em qualquer meio

Leia mais

DWEB. Design para Web. CSS3 - Fundamentos. Curso Superior de Tecnologia em Design Gráfico

DWEB. Design para Web. CSS3 - Fundamentos. Curso Superior de Tecnologia em Design Gráfico DWEB Design para Web Curso Superior de Tecnologia em Design Gráfico CSS3 - Fundamentos E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis qual

Leia mais

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

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

Leia mais

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

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

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

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

Aula 1 Desenvolvimento Web. Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme

Aula 1 Desenvolvimento Web. Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Aula 1 Desenvolvimento Web Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Plano de Aula Ementa Avaliação Ementa Noções sobre Internet. HTML

Leia mais

LABORATÓRIO DE INTERNET FRONTPAGE

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

Leia mais

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

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

Leia mais

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

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

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 Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos do webmail

Leia mais

ALUNES MANUAL DO USUÁRIO. Guia rápido Alunes

ALUNES MANUAL DO USUÁRIO. Guia rápido Alunes ALUNES MANUAL DO USUÁRIO Guia rápido Alunes 1 Manual de Instruções Versão 2.0 Alunes Informática 2 Sumário Introdução... 5 Pré-requisitos... 5 Principal/Home... 6 Como editar texto do home... 7 Desvendando

Leia mais

TUTORIAL. Como criar um blogue/página pessoal no WordPress

TUTORIAL. Como criar um blogue/página pessoal no WordPress TUTORIAL Como criar um blogue/página pessoal no WordPress Índice Criar o blogue... 3 Alterar as definições gerais... 4 Alterar tema... 6 Criar Páginas... 7 Colocar Posts (citações)... 9 Upload de ficheiros...

Leia mais

Manual de Utilização do PLONE (Gerenciador de página pessoal)

Manual de Utilização do PLONE (Gerenciador de página pessoal) Manual de Utilização do PLONE (Gerenciador de página pessoal) Acessando o Sistema Para acessar a interface de colaboração de conteúdo, entre no endereço http://paginapessoal.utfpr.edu.br. No formulário

Leia mais

MANUAL E DICAS ASSISTENTE VIRTUAL (AV) ADS DIGITAL (WWW.ADSDIGITAL.COM.BR) VERSÃO DO ASSISTENTE VIRTUAL: 1.3.1 POR

MANUAL E DICAS ASSISTENTE VIRTUAL (AV) ADS DIGITAL (WWW.ADSDIGITAL.COM.BR) VERSÃO DO ASSISTENTE VIRTUAL: 1.3.1 POR MANUAL E DICAS DO ASSISTENTE VIRTUAL (AV) POR ADS DIGITAL (WWW.ADSDIGITAL.COM.BR) VERSÃO DO ASSISTENTE VIRTUAL: 1.3.1 ÍNDICE Introdução...3 Requisitos e Restrições do Assistente...3 Diferenças da Versão

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

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

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

Microsoft Office FrontPage 2003

Microsoft Office FrontPage 2003 Instituto Politécnico de Tomar Escola Superior de Gestão Área Interdepartamental de Tecnologias de Informação e Comunicação Microsoft Office FrontPage 2003 1 Microsoft Office FrontPage 2003 O Microsoft

Leia mais

HTML. Sessão 1 HTML. Cliente: browser (IE, por exemplo) Servidor: IIS (Internet Information Server), Apache, WebSphere,...

HTML. Sessão 1 HTML. Cliente: browser (IE, por exemplo) Servidor: IIS (Internet Information Server), Apache, WebSphere,... Sessão 1 A INTERNET Baseada no modelo Cliente-Servidor Cliente: programa que pede informação Servidor: programa que envia a informação No caso da WWW: Cliente: browser (IE, por exemplo) Servidor: IIS (Internet

Leia mais

Programando em PHP. Conceitos Básicos

Programando em PHP. Conceitos Básicos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Conceitos Básicos Todo o escopo deste estudo estará voltado para a criação de sites com o uso dos diversos recursos de programação web

Leia mais

Moodle FTEC Versão 2.0 Manual do Usuário Acesse a área de LOGIN do site da FTEC www.ftec.com.br

Moodle FTEC Versão 2.0 Manual do Usuário Acesse a área de LOGIN do site da FTEC www.ftec.com.br Moodle FTEC Versão 2.0 Manual do Usuário Acesse a área de LOGIN do site da FTEC www.ftec.com.br Índice Como acessar o Moodle Editando seu PERFIL Editando o curso / disciplina no Moodle Incluindo Recursos

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

Linux. Educacional. Tutorial Buzzword

Linux. Educacional. Tutorial Buzzword Linux Educacional Tutorial Buzzword Para trabalhar com o programa Buzzword online, é necessário que crie uma conta no site. Para isso acesse o endereço - https://buzzword.acrobat.com/ Para criar uma conta

Leia mais

Curso de Capacitação em Gerenciador de Conteúdo PLONE

Curso de Capacitação em Gerenciador de Conteúdo PLONE Curso de Capacitação em Gerenciador de Conteúdo PLONE 1 Índice Menus Sobre a Navegação do Plone 3 Configurar Pastas 4 Visualização Padrão de Pastas 13 Conteúdo Dicas para um Conteúdo Claro 17 Ações de

Leia mais

Treinamento para Sistema de Loja Virtual ou Catálogo Eletrônico

Treinamento para Sistema de Loja Virtual ou Catálogo Eletrônico Treinamento para Sistema de Loja Virtual ou Catálogo Eletrônico Índice Atenção: O termo utilizado loja serve para Loja Virtual ou Catálogo Eletrônico, bem como o termo produto serve para produtos ou serviços

Leia mais

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont

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

Leia mais

Conteúdo Programático do Web Design

Conteúdo Programático do Web Design Conteúdo Programático do Web Design O Ambiente Macromedia Dreamweaver Instalação do Dreamweaver Arquivos Utilizados na Apostila A Inicialização de Dreamweaver Área de Trabalho Dreamweaver Criação de uma

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

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

02 - Usando o SiteMaster - Informações importantes

02 - Usando o SiteMaster - Informações importantes 01 - Apresentação do SiteMaster - News Edition O SiteMaster foi desenvolvido para ser um sistema simples de gerenciamento de notícias, instalado em seu próprio computador e com configuração simplificada,

Leia mais

Manual do Instar Mail Sumário

Manual do Instar Mail Sumário Manual do Instar Mail Sumário 1 - Apresentação do sistema... 2 2 - Menu cliente... 2 3 - Menu Importação... 5 4 - Menu Campanhas... 9 5 - Menu banco de arquivos... 16 6 - Menu agendamento... 16 7 - Menu

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

Manual do Gestor de Templates

Manual do Gestor de Templates Manual do Gestor de Templates Versão - Revisão 2 200.07.09 Índice Introdução... 3 2 O que muda com o Gestor de Templates... 3 3 Implicação da utilização do Gestor de Templates... 4 4 Lista de Funcionalidades...

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