Programação para Web HTML - Parte 2

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "Programação para Web HTML - Parte 2"

Transcrição

1 Programação para Web HTML - Parte 2 Professor: Harlley Lima Departamento de Computação Centro Federal de Educação Tecnológica de Minas Gerais Belo Horizonte, 2 de março 2016

2 Programação para Web Revisão HTML 2/38 Aula de hoje HTML harlley/web/aula04

3 Programação para Web Revisão HTML 3/38 HTML Aula passada Estrutura básica de HTML Formatação de texto Lista

4 Programação para Web Revisão HTML 4/38 HTML Aula de hoje Links e âncoras Imagem Tabela

5 Programação para Web Revisão HTML 5/38 Links Para criarmos um link, devemos utilizar o elemento a. Esse elemento possui um atributo chamado href.

6 Links Programação para Web Revisão HTML 6/38

7 Programação para Web Revisão HTML 7/38 Links Além do atributo href, podemos utilizar o atributo target para informar onde o destino de um link deve ser aberto: blank: Abre o destino do link em uma nova janela ou aba. self: Abre o destino do link na mesma janela ou no mesmo frame que exibe o documento que contém o link.

8 Links Programação para Web Revisão HTML 8/38

9 Programação para Web Revisão HTML 9/38 Âncora Criar um link para uma determinada seção de um documento HTML Primeiro passo: identificar a seção que será o destino do link. Atributo name: identifica a seção. Segundo passo: criar links utilizando identificadores das seções, utilizando #.

10 Âncora Programação para Web Revisão HTML 10/38

11 Âncora Programação para Web Revisão HTML 11/38

12 Programação para Web Revisão HTML 12/38 Search Engine Optimization Sites de busca são hoje a principal fonte de procura de informações da Internet. Google pode ser a diferença entre o sucesso ou fracasso de uma empresa SEO: é um conjunto de técnicas que têm como principal objetivo tornar os sites mais amigáveis para os sites de busca. É o trabalho de otimização realizado para melhorar o posicionamento de sites na tela de resultados gratuitos de sites de busca.

13 Tela de Resultados de Busca (SERP) Resultados pagos Programação para Web Revisão HTML 13/38

14 Tela de Resultados de Busca (SERP) Resultados gratuitos Programação para Web Revisão HTML 14/38

15 Programação para Web Revisão HTML 15/38 Importância do texto âncora do link para o SEO Texto âncora é o texto que vai receber o link: <a href=" esse é o texto ^ancora</a>. É esse texto envolto no link que faz com que o máquinas de busca relacione o conteúdo da página que está sendo referenciada ao link. Qual texto âncora é melhor? 1. Outro artigo interessante é um que escrevi há algumas semanas atrás, sobre rich snippets. 2. Outro artigo interessante é um que escrevi há algumas semanas atrás, sobre rich snippets. Clique aqui e leia mais sobre isso.

16 Programação para Web Revisão HTML 16/38 Importância do texto âncora do link para o SEO O texto âncora deve explicar o que o usuário vai encontrar ao clicar naquele link. Isso impacta o SEO dos dois lados: Caso o texto âncora tenha a ver com o conteúdo que o usuário verá ao clicar no link, a página que recebe o link ganhará relevância. Tendo textos âncoras que reflitam o que o usuário encontrará na outra página, aumenta a confiança dos mecanismos de busca no seu conteúdo.

17 Programação para Web Revisão HTML 17/38 Prática: Página pessoal Pode ser que quem esteja navegando em sua página deseje ter mais informações sobre as instituições de sua formação acadêmica. Insira links para que seja possível acessar as páginas das instituições.

18 Programação para Web Revisão HTML 18/38 Imagens Podemos adicionar imagens em documento HTML com o elemento img. Esse elemento possui um atributo chamado src. Esse atributo indica o caminho absoluto ou relativo da imagem que queremos adicionar.

19 Programação para Web Revisão HTML 19/38 Imagens <img src="tim.jpg" alt="tim Berners-Lee" /> Atributo alt: usado para fornecer uma descrição textual alternativa da imagem caso por alguma razão a imagem não seja renderizada para o usuário. <img src=" <a href=" src="logo.png"></a>

20 Programação para Web Revisão HTML 20/38 Imagens O atributo title pode ser usado para fornecer uma curta descrição da imagem: <img src="logo.gif" title="aprenda HTML no site HTML.net">

21 Programação para Web Revisão HTML 21/38 Imagens Dois outros atributos importantes são width e height: Os atributos width e height podem ser usados para definir respectivamente, a largura e a altura da imagem. O valor adotado para medidas é o pixel: unidade de medida usada para medir resolução da tela. <img src="logo.gif" width="32" height="32">

22 Programação para Web Revisão HTML 22/38 Imagem SEO Imagens são cruciais para SEO. Fatores: Nome do arquivo da imagem: use a palavras mais importantes e remova stopwords. Alt tags e Title tags Tempo de carregamento: google privilegia sites mais rápidos. Reduza e comprima as imagens do seu site. Tipo do arquivo de imagem JPEG: imagens mais complexas PNG: gráficos e imagens transparentes GIFS: animações Para saber mais: SEO Image Optimization - Everything You Need To Know

23 Programação para Web Revisão HTML 23/38 Prática: Página pessoal Em um currículo nem sempre é recomendável colocar uma foto, mas em uma página como estamos criando talvez seja interessante.

24 Programação para Web Revisão HTML 24/38 Tabelas Necessidade de exibir dados de forma tabular em páginas web: table. As linhas de uma tabela são definidas com o elemento tr, as células de títulos com o elemento th e as células de dados com o elemento td. Table é definido pelos navegadores como block-level element

25 Tabelas colspan é usada na tag <td> para indicar quantas colunas estarão contidas em uma célula. Programação para Web Revisão HTML 25/38

26 Tabelas Programação para Web Revisão HTML 26/38

27 Programação para Web Revisão HTML 27/38 rowspan Especifica quantas linhas estarão contidas em uma célula.

28 rowspan Programação para Web Revisão HTML 28/38

29 Programação para Web Revisão HTML 29/38 Cabeçalho, corpo e rodapé podemos definir explicitamente o cabeçalho, o corpo e o rodapé de uma tabela através dos elementos thead, tbody e tfoot respectivamente. thead: define o cabeçalho da tabela tfoot: define o rodapé da tabela tbody: define o corpo da tabela

30 Tabelas Programação para Web Revisão HTML 30/38

31 Programação para Web Revisão HTML 31/38 Títulos Também podemos definir um título para uma tabela através do elemento caption.

32 Títulos Programação para Web Revisão HTML 32/38

33 Programação para Web Revisão HTML 33/38 Tables SEO Fatores: Definir uma coluna como tópico da tabela Essa coluna deve ficar em negrito Definir uma legenda para tabela Definir o cabeçalho da tabela com th ou thead Texto próximo à tabela ajuda em identificar o tema da tabela Uma boa tabela não terá muita variância no tamanho de célula para célula ou coluna para coluna Deixe claro a unidade numérica utilizada Saiba mais: BUILDING HTML TABLES THAT GOOGLE SEARCH WILL LOVE

34 Tables SEO Programação para Web Revisão HTML 34/38

35 Programação para Web Revisão HTML 35/38 Prática: Página pessoal Por vezes, é interessante mostrar seu histórico escolar em sua página pessoal (ainda mais se você tiver boas notas). Faça uma tabela para cada ano, contendo os nomes das disciplinas e a nota em cada bimestre.

36 Programação para Web Revisão HTML 36/38 Prática: Página pessoal Complete sua página com informações adicionais como: experiências profissionais, idiomas, habilidades técnicas, etc.

37 Programação para Web Revisão HTML 37/38 Prática: Página pessoal Não deixe de salvar os arquivos criados durante a aula, pois vocês deverão entregar e valerá ponto. Ainda vou definir a data.

38 Programação para Web Revisão HTML 38/38 Dúvidas? harlley/web/aula04

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

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

Tabelas. Uma célula de dados pode conter texto, imagens, listas, parágrafos, formulários, linhas horizontais, etc. <table> <tr>

Tabelas. Uma célula de dados pode conter texto, imagens, listas, parágrafos, formulários, linhas horizontais, etc. <table> <tr> Tabelas HTML Tabelas Tabelas São definidas pela tag Uma tabela é dividida em linhas -com a tag Cada linha divida em células de dados (com a tag ). As letras td são um acronimo

Leia mais

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

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

Leia mais

CEEP-CENTRO ESTADUAL DE EDUCAÇÃO PROFISSIONAL PEDRO BOARETTO NETO INTERNET E PROGRAMAÇÃO WEB INICIO DE HTML

CEEP-CENTRO ESTADUAL DE EDUCAÇÃO PROFISSIONAL PEDRO BOARETTO NETO INTERNET E PROGRAMAÇÃO WEB INICIO DE HTML INICIO DE HTML Neste tutorial usaremos o já conhecido Notepad++ ou Bloco de Notas e um Browser (Chrome, Mozilla ou Internet Explorer). Para nossos exemplos usaremos o Chrome. A estrutura básica de uma

Leia mais

Módulo 17E. Revisões de HTML. A) Noções básicas de HTML (cont.)

Módulo 17E. Revisões de HTML. A) Noções básicas de HTML (cont.) Módulo 17E Revisões de HTML A) Noções básicas de HTML (cont.) Inserção de Imagens A inserção de imagens em documentos HTML é feita através da tag (que não tem tag de fecho). A indicação do local

Leia mais

Linguagem XHTML -Aula 3 Cleverton Hentz

Linguagem XHTML -Aula 3 Cleverton Hentz Linguagem XHTML -Aula 3 Cleverton Hentz Sumário da Aula Tags Básicas da Linguagem Lista Ordenadas e não ordenadas Imagens, Links e Âncoras 2 Tags Básicas: Trabalhando com Texto Existem algumas tags que

Leia mais

IFSC/Florianópolis - prof. Herval Daminelli

IFSC/Florianópolis - prof. Herval Daminelli O marcador para inserção de imagens em um documento HTMl é o ; É uma tag vazia, e não necessita ser fechada; A tag apresenta diversos atributos. Os principais são: alt define um texto alternativo,

Leia mais

Capítulo 9 - Imagens. Imagens

Capítulo 9 - Imagens. Imagens Capítulo 9 - Imagens 9 Imagens EM JAVASCRIPT, É POSSÍVEL MANIPULAR COM AS IMAGENS DE UMA PÁGINA, alterando a URL que localiza o arquivo de imagem. Assim, pode-se trocar a imagem que está sendo exibida

Leia mais

gedit Bloco de notas

gedit Bloco de notas GOVERNO DA REPÚBLICA PORTUGUESA gedit Bloco de notas Sistema Operativo Linux Tecnologias de Informação e Comunicação Professor: Joaquim Frias Instruções básicas do HTML TAGS TAGS Uma tag é uma instrução

Leia mais

Tabelas. table <table>...</table>

Tabelas. table <table>...</table> Tabelas table ... Explicação: Indica o início e o final de uma determinada tabela. Todas as demais marcas referentes a tabelas - linhas e células - somente serão consideradas se incluidas

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

Aula 3. Imagens. <img src="foto.jpg" />

Aula 3. Imagens. <img src=foto.jpg /> Aula 3 Imagens Para inserir uma imagem na página utilizamos a tag

Leia mais

Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o código HTML para isso é :

Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o código HTML para isso é : TABELAS As tabelas são muito importantes para o designer de uma home-page. Com elas podese fazer alinhamentos que dificilmente seriam possíveis com simples comandos. A funcionalidade de uma tabela faz

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

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

Aula 6: Frames. Pré-requisitos: Os temas das aulas 2 e 5, e a forma como se define cores apresentada na aula 4, serão muito importantes para frames.

Aula 6: Frames. Pré-requisitos: Os temas das aulas 2 e 5, e a forma como se define cores apresentada na aula 4, serão muito importantes para frames. Aula 6: Frames Você certamente já visitou páginas organizadas em áreas diferenciadas que podiam ser usadas, redimensionadas movidas para cima ou para baixo independentemente. Pois essa possibilidade de

Leia mais

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

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

Leia 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

TECNOLOGIA WEB. XHTML Aula 5. Profa. Rosemary Melo

TECNOLOGIA WEB. XHTML Aula 5. Profa. Rosemary Melo TECNOLOGIA WEB XHTML Aula 5 Profa. Rosemary Melo HTML (Hiper Text Markup Language) Linguagem de marcação de hipertexto Comum especificar o conteúdo do documento e sua formatação em um só documento HTML.

Leia mais

TecWeb Tecnologias Web. Prof. Esp. Douglas Mariano dos Santos

TecWeb Tecnologias Web. Prof. Esp. Douglas Mariano dos Santos TecWeb Tecnologias Web Prof. Esp. Douglas Mariano dos Santos Sobre mim Formado na FAU: Faculdade Alfa de Umuarama Sistemas para Internet Formado na FCV MBA em Desenvolvimento para Aplicativos Móveis Trabalhou

Leia mais

17/01/2016 PROGRAMAÇÃO EM AMBIENTE WEB I UM POUCO DE HISTÓRIA WWW. Tudo começou com a ARPANET; 1977 ARPANET nasce

17/01/2016 PROGRAMAÇÃO EM AMBIENTE WEB I UM POUCO DE HISTÓRIA WWW. Tudo começou com a ARPANET; 1977 ARPANET nasce PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com UM POUCO DE HISTÓRIA Tudo começou com a ARPANET; 1977 ARPANET nasce 1987 Das universidades,

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

O que faz um servidor/navegador web? 30/03/2017 Rômulo da Silva Lima Slid e 2

O que faz um servidor/navegador web? 30/03/2017 Rômulo da Silva Lima Slid e 2 HTML O que faz um servidor/navegador web? e 2 O que é? HyperText Markup Language Utilizada para produzir páginas WEB Documentos escritos na linguagem HTML podem ser traduzidos por browser O HTML utiliza

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

PROGRAMAÇÃO EM AMBIENTE WEB I

PROGRAMAÇÃO EM AMBIENTE WEB I PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi fabianotaguchi@gmail.com http://fabianotaguchi.wordpress.com UM POUCO DE HISTÓRIA Tudo começou com a ARPANET; 1977 ARPANET nasce 1987 Das universidades,

Leia mais

PROGRAMAÇÃO PARA INTERNET. Prof.: Jean Carlo Mendes

PROGRAMAÇÃO PARA INTERNET. Prof.: Jean Carlo Mendes PROGRAMAÇÃO PARA INTERNET Prof.: Jean Carlo Mendes carlomendes@yahoo.com.br http://www.jeancarlomendes.com.br HTML Tabelas - As tabelas em HTML são criadas através das tags e - Algumas

Leia mais

Este é o primeiro nível Este é o segundo nível Este é o terceiro nível Este é o quarto nível Este é o quinto nível Este é o sexto nível

Este é o primeiro nível Este é o segundo nível Este é o terceiro nível Este é o quarto nível Este é o quinto nível Este é o sexto nível 1. Conhecendo as Tags HTML Agora que já vimos como é um arquivo HTML básico, podemos começar a ver as tags que irão construir as páginas. Elas ficam após o comando e neste local já se pode começar a escrever

Leia mais

Programação Web Aula 2 XHTML/CSS/XML

Programação Web Aula 2 XHTML/CSS/XML Programação Web Aula 2 XHTML/CSS/XML Departamento de Informática UFPR 17 de Fevereiro de 2014 1 Histórico 2 Funcionamento 3 Atributos 4 HTML5 Estrutura de uma arquivo HTML5 Validação Tags básicas Seleção

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

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

Linguagem HTML: Frames

Linguagem HTML: Frames Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de maio de 2012 Aula de Hoje Divisão da janela em partes para exibir várias páginas

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

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

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

SEO e UX - 2016. www.infotechnology.com.br

SEO e UX - 2016. www.infotechnology.com.br SEO e UX - 2016 www.infotechnology.com.br Objetivos UX SEO 2 SEO - Search engine optimazation SEO é um conjunto de técnicas que têm como objetivo principal tornar os sites amigáveis para os sites de busca

Leia mais

REVISÃO DAS PUBLICAÇÕES

REVISÃO DAS PUBLICAÇÕES O arquivo index.htm. Código fonte. REVISÃO DAS PUBLICAÇÕES Erros que podem ocorrer: Verificar a barra ( / ) que fecha as marcações; Inverter os comandos FRAMESET E FRAME SRC; Espaço entre a marcação FRAME

Leia mais

Introdução a HTML. André Tavares da Silva.

Introdução a HTML. André Tavares da Silva. Introdução a HTML André Tavares da Silva andre.silva@udesc.br HTML HiperText Markup Language Linguagem de marcação para criar páginas Web Formada por textos e comandos chamados tags (etiquetas/rótulos)

Leia mais

Prof.: Melba Lima Gorza Aula Introdutória de HTML. Componentes do HTML. Estrutura de um documento XHTML

Prof.: Melba Lima Gorza Aula Introdutória de HTML. Componentes do HTML. Estrutura de um documento XHTML Prof.: Melba Lima Gorza Aula Introdutória de HTML Componentes do HTML Estrutura de um documento XHTML primeiro Documento XHTML meu primeiro documento XHTML

Leia mais

Programação de Servidores CST Redes de Computadores

Programação de Servidores CST Redes de Computadores Programação de Servidores CST Redes de Computadores Marx Gomes Van der Linden http://marx.vanderlinden.com.br ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) HMTL Arquivo-texto

Leia mais

HTML Página 36. Índice

HTML Página 36. Índice PARTE - 6 HTML Página 36 Índice Tabelas... 37 Construindo tabelas Marcação TABLE... 37 Título da Tabela Marcação CAPTION... 37 Cabeçalho da tabela (table headings) Marcação TH... 37 Dados da tabela (table

Leia mais

Aplicação para Web I. Manipulando Imagens e Links

Aplicação para Web I. Manipulando Imagens e Links Aplicação para Web I Manipulando Imagens e Links Antes de começar O HTML também é uma linguagem de programação, então deve ser organizada de forma identada também. Estamos aprendendo agora a linguagem

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

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

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

Joomla na otimização de sites para buscadores de Internet SEO. Marcio Junior Vieira marcio@ambientelivre.com.br

Joomla na otimização de sites para buscadores de Internet SEO. Marcio Junior Vieira marcio@ambientelivre.com.br Joomla na otimização de sites para buscadores de Internet SEO Marcio Junior Vieira marcio@ambientelivre.com.br Agenda O CMS Joomla. Vantagens do Joolma O que é SEO? Joomla e SEO Tipos de Buscas Práticas

Leia mais

Tags estruturais <!-- --> Cria um comentário <html> </html> Envolve todo um documento html <head> </head> Envolve o cabeçalho de um documento html

Tags estruturais <!-- --> Cria um comentário <html> </html> Envolve todo um documento html <head> </head> Envolve o cabeçalho de um documento html Tags estruturais Cria um comentário Envolve todo um documento html Envolve o cabeçalho de um documento html Fornece informações gerais sobre o documento

Leia mais

Prova de pré-requisito

Prova de pré-requisito Prova de pré-requisito PHP & MySQL: Técnicas para Web 2.0 1 - Qual das opções constrói a tabela abaixo: DIA MÊS ANO 28 04 1988 22 02 2002 a) b) c) dia mês ano

Leia 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

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com Luiz Leão luizleao@gmail.com http://luizleao.com CONTEÚDO PROGRAMÁTICO DESTA UNIDADE HTML TAG S HTML LINGUAGEM HTML Hypertext Markup Language Interpretada pelo navegador Não linearidade da informação Formatação

Leia 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

Sistema De Gerenciamento Web UFFS

Sistema De Gerenciamento Web UFFS Sistema De Gerenciamento Web UFFS Acesso ao Sistema Link para acesso O acesso ao SGW UFFS é feito através de um link, que por segurança, poderá não ser permanente. Este mesmo link será modificado com uma

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

#Aula Nº 2 Marcação XHTML webstandards.samus.com.br webstandards.samus.com.br/aulas/aula2.pdf Vinicius Fiorio Custódio

#Aula Nº 2 Marcação XHTML webstandards.samus.com.br webstandards.samus.com.br/aulas/aula2.pdf Vinicius Fiorio Custódio #Aula Nº 2 Marcação XHTML webstandards.samus.com.br webstandards.samus.com.br/aulas/aula2.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Descrever os principais elementos da XHTML, Quando, Porque

Leia mais

Prof. Fernando Gonçalves Abadia. Sistemas Multimídias

Prof. Fernando Gonçalves Abadia. Sistemas Multimídias Prof. Fernando Gonçalves Abadia Sistemas Multimídias Títulos Títulos são definidos com as tags a . A define o título maior. A define o título menor. este é um título este

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

Links e Imagens. Ana Cuper ana@instructor.com.br

Links e Imagens. Ana Cuper ana@instructor.com.br Links e Imagens Ana Cuper ana@instructor.com.br Links Existem duas maneiras de referenciar um documento: relativo ou absoluto. Caminho absoluto- começa de um ponto fixo :

Leia mais

MANUAL DE PUBLICAÇÃO NO PORTAL CAMPUS MATÃO

MANUAL DE PUBLICAÇÃO NO PORTAL CAMPUS MATÃO INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DE SÃO PAULO CAMPUS MATÃO MANUAL DE PUBLICAÇÃO NO PORTAL CAMPUS MATÃO AUTOR: COORDENADORIA DE TECNOLOGIA DA INFORMAÇÃO CAMPUS MATÃO MATÃO 2016 SUMÁRIO

Leia mais

Introdução ao HTML. Sumário

Introdução ao HTML. Sumário Introdução ao HTML Telemédia Grupo de Comunicações por Computador Sumário em HTML Texto Alternativo Alinhamento Margens Redimensionar 1 em HTML Para inserir uma imagem basta usar a etiqueta da seguinte

Leia mais

<HTML5> Autor: Fernando Vaz de Lima Pereira

<HTML5> Autor: Fernando Vaz de Lima Pereira Autor: Fernando Vaz de Lima Pereira 4 Multimídia Os elementos de multimídia possuem grande relevância na estrutura de um site ou página de internet. Além de tornar o conteúdo mais dinâmico com

Leia mais

Nossa Caixa Desenvolvimento. A2 sitebox. Manual do Usuário. www.nossacaixadesenvolvimento.com.br.a2/sis/gr

Nossa Caixa Desenvolvimento. A2 sitebox. Manual do Usuário. www.nossacaixadesenvolvimento.com.br.a2/sis/gr Nossa Caixa Desenvolvimento www.nossacaixadesenvolvimento.com.br.a2/sis/gr A2 sitebox Manual do Usuário Dezembro 2010 1 Índice Apresentação... 3 A2 sitebox... 4 Painel de Controle... 4 Homepage... Erro!

Leia mais

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS HTML Como utilizar cabeçalhos e elementos de cabeçalhos de página em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste

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

Universidade de São Paulo

Universidade de São Paulo Manual para usuários do site Este manual foi especialmente desenvolvido para os administradores de conteúdo de cada departamento, que terá uma pessoa responsável pelas atualizações das informações departamentais

Leia mais

O que faz um servidor/navegador web? 14/03/2016 Rômulo da Silva Lima Slid e 2

O que faz um servidor/navegador web? 14/03/2016 Rômulo da Silva Lima Slid e 2 HTML O que faz um servidor/navegador web? e 2 O que é? HyperText Markup Language Utilizada para produzir páginas WEB Documentos escritos na linguagem HTML podem ser traduzidos por browser O HTML utiliza

Leia mais

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES CORPO DE UMA PÁGINA. Professor Carlos Muniz

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES CORPO DE UMA PÁGINA. Professor Carlos Muniz INTRODUCAO DESENVOLVIMENTO E DESIGN DE CORPO DE UMA PÁGINA Definindo uma fonte para a página Para definirmos as uma fonte para a página, utilize a tag FONT FACE.

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 Frames São janelas que podem conter páginas Web. Uma janela pode ser subdividida em várias subjanelas, cada uma, visualizando

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

HTML Página 29. Índice

HTML Página 29. Índice PARTE - 5 HTML Página 29 Índice HTML - Hiperlinks... 30 Frames com links... 31 O código fonte do arquivo índex.htm... 31 Conhecendo os comandos border e bordercolor do frame... 31 Conhecendo os comandos

Leia 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

Links, Caminho Absoluto e Caminho Relativo

Links, Caminho Absoluto e Caminho Relativo AULA: Links, Caminho Absoluto e Caminho Relativo Autoria Web http://docentes.ifrn.edu.br/albalopes alba.lopes@ifrn.edu.br Hipertexto Para agregar novos conjuntos de informação ao site como Textos Imagens

Leia mais

Ao projeto inciado na aula anterior, faça as seguintes alterações:

Ao projeto inciado na aula anterior, faça as seguintes alterações: Atividade 4 Ao projeto inciado na aula anterior, faça as seguintes alterações: 1. Insira uma cor de fundo na página. 2. Google fonts Se nos basearmos apenas nas fontes que o usuário terá instaladas em

Leia mais

Instruções de uso e edição do template HTML

Instruções de uso e edição do template HTML Instruções de uso e edição do template HTML CATIV8 Studio Cativ8studio@gmail.com http://perfil.mercadolivre.com.br/cativ8+studio Como adicionar o template ao anúncio Na tela de criação de anúncio do mercado

Leia mais

MANUAL DO CLIENTE FINAL ALTERAÇÕES BÁSICAS NO PRODUTO SITE ACESSANDO O PAINEL _ 1 EDITANDO TEXTOS _ 2 TROCANDO IMAGENS 4 INSERINDO VIDEOS 7

MANUAL DO CLIENTE FINAL ALTERAÇÕES BÁSICAS NO PRODUTO SITE ACESSANDO O PAINEL _ 1 EDITANDO TEXTOS _ 2 TROCANDO IMAGENS 4 INSERINDO VIDEOS 7 MANUAL DO CLIENTE FINAL ALTERAÇÕES BÁSICAS NO PRODUTO SITE SUMÁRIO ACESSANDO O PAINEL _ 1 EDITANDO TEXTOS _ 2 TROCANDO IMAGENS 4 INSERINDO VIDEOS 7 EDITANDO O BANNER 9 ADICIONANDO UM MAPA DE LOCALIZAÇÃO

Leia mais

Melhores Práticas em Design para Email Marketing

Melhores Práticas em Design para Email Marketing Melhores Práticas em Design para Email Marketing Índice 1. Boas práticas na criação de peças de Email Marketing 2. Identificação de Características para Pontuação Anti-Spam 2 1 BOAS PRÁTICAS NA CRIAÇÃO

Leia mais

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

HTML Página 23. Índice

HTML Página 23. Índice PARTE - 4 HTML Página 23 Índice HTML - Frames... 24 Exemplo:... 24 Parâmetros utilizados para a marcação ... 25 Composições com Frames... 25 Exemplo 1.... 26 Exemplo 4.... 26 Parâmetros que Completam

Leia mais

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

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

PUBLICAÇÃO DE MATERIAIS

PUBLICAÇÃO DE MATERIAIS PUBLICAÇÃO DE MATERIAIS Este recurso permite ao tutor publicar diversos tipos de materiais, bem como: links, vídeos, documentos, textos e imagens. PUBLICAÇÃO DE MATERIAIS EM FORMATO URL Ative a edição

Leia mais

Os slides que seguem mostram os principais comandos da linguagem HTML. Conhecer o código HTML possibilita a criação de páginas leves que contenham ape

Os slides que seguem mostram os principais comandos da linguagem HTML. Conhecer o código HTML possibilita a criação de páginas leves que contenham ape INTRODUÇÃO A PROGRAMAÇÃO HTML Os slides que seguem mostram os principais comandos da linguagem HTML. Conhecer o código HTML possibilita a criação de páginas leves que contenham apenas os comandos necessários

Leia mais

Sumário. 1- Notícias. 1.1 Publicando uma nova notícia Blocos de edição

Sumário. 1- Notícias. 1.1 Publicando uma nova notícia Blocos de edição O site desenvolvido pela SH3 é intuitivo, totalmente gerenciado através de um painel de administração. Nele o usuário responsável será mantenedor de todas as informações e configurações existentes, podendo

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

Projeto Integrador. Pesquisa HTML5. Green Friday. Gestão em Tecnologia da Informação. Turma 1º B

Projeto Integrador. Pesquisa HTML5. Green Friday. Gestão em Tecnologia da Informação. Turma 1º B Projeto Integrador Green Friday Pesquisa HTML5 Gestão em Tecnologia da Informação Turma 1º B Versão : 1.0.0 Equipe Cristiano Margarida Rodrigues Idealização e arquitetura Tiago Dariel Gois Marques - Teste

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

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

A linguagem Hyper Text Markup Language (HTML)

A linguagem Hyper Text Markup Language (HTML) A linguagem Hyper Text Markup Language (HTML) Nota: Contém material utilizado no curso de HTML do Instituto Superior de Engenharia de Lisboa (ISEL) Ultima actualização: 15-10-2006 O que é? Linguagem para

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

Especificação técnica do feed de produtos

Especificação técnica do feed de produtos Especificação técnica do feed de produtos Para integrarmos a sua loja em UmSoLugar.com.br, recomendamos que você respeite as seguintes especificações técnicas: Formato dos arquivos suportados - CSV ou

Leia mais

Tabelas. Web. Professor: Jarbas Araújo CENTRO EDUCACIONAL RADIER.

Tabelas. Web. Professor: Jarbas Araújo CENTRO EDUCACIONAL RADIER. Tabelas Web Professor: Jarbas Araújo professorjarbasaraujo@gmail.com CENTRO EDUCACIONAL RADIER Página 2 Tabelas As tabelas são em HTML exatamente o que são em qualquer outro lugar. Elas servem para organizar

Leia mais

HyperText Markup Language HTML. Tabela

HyperText Markup Language HTML. Tabela HyperText Markup Language HTML Tabela Prof. Luis Nícolas de morim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ Introdução Tabela consiste em uma estrutura de

Leia mais

Programação para web HTML: Formulários

Programação para web HTML: Formulários Programação para web HTML: Formulários Professor: Harlley Lima E-mail: harlley@decom.cefetmg.br Departamento de Computação Centro Federal de Educação Tecnológica de Minas Gerais Belo Horizonte, 9 de março

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

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

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

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

<title>introdução a HTML</title>

<title>introdução a HTML</title> introdução a HTML programação para a Internet prof. Vilson Heck Junior O que é HTML Hypertext Markup Language: Linguagem de Marcação de Hipertexto; É uma coleção de TAGs

Leia mais

Programação para Internet

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

Leia mais

APOSTILA DE INFORMÁTICA INTERNET E E-MAIL

APOSTILA DE INFORMÁTICA INTERNET E E-MAIL APOSTILA DE INFORMÁTICA INTERNET E E-MAIL Profa Responsável Fabiana P. Masson Caravieri Colaboração Empresa Júnior da Fatec Jales Monitora: Ângela Lopes Manente SUMÁRIO 1. INTERNET... 3 2. ACESSANDO A

Leia mais