Ensino I nterativo Universidade Anhembi Morumbi. Multimídia I

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

Download "Ensino I nterativo Universidade Anhembi Morumbi. Multimídia I"

Transcrição

1 Ensino I nterativo Universidade Anhembi Morumbi Multimídia I Objetivo Mostrar o que é preciso para o desenvolvimento de um Projeto para Web, apresentando os primeiros conceitos de HTML. Tópicos 1. Etapas para o desenvolvimento de um P rojeto para W EB 2. HTM L Hyper Text M arkup Language

2 1. Etapas para o desenvolvimento de um projeto para w eb (site) O planejamento é a chave para a produção de um site que pretende alcançar seus objetivos, tais como: vender, apresentar um trabalho, informar, recolher dados para pesquisa, criar uma comunidade, divulgar eventos, etc. Planejando antecipadamente a estrutura do site, iremos, com certeza, ganhar tempo na produção, evitar correções sobre correções, adequar o tempo disponível para a produção de forma a aproveitá lo melhor, distribuir as tarefas entre os componentes da equipe e ainda escolher as ferramentas adequadas. Existem muitas formas de se trabalhar a construção de um site, mas algumas etapas são inevitáveis: 1. Levantamento do conteúdo: (Texto, imagens, vídeos, etc). É necessário conhecer o conteúdo do site para poder disponibilizá lo de maneira adequada dentro dos recursos disponíveis na internet. (Ex.: hipertexto). 2. A partir deste conteúdo, estabelecer a estrutura do site destacando os pontos fortes do material levantado considerando o perfil do público que se deseja alcançar. O levantamento deste perfil é importante para se estabelecer tanto os recursos tecnológicos a serem utilizados (largura de banda, plataforma, plugins, etc.) como também as características da interface que irá manter o contato (interação) entre a informação e o usuário. 3. Conhecendo o conteúdo, o público, a estrutura principal do site e a tecnologia já podemos estabelecer um caminho para o desenvolvimento do P rojeto Gráfico. O P rojeto Gráfico Neste ponto, é preciso criar a interface que permitirá ao usuário acessar a informação de forma confortável, agradável e rápida. Precisamos estudar: as diferentes resoluções dos monitores (ex.: 800 x 600), o número de cores possíveis nestas resoluções, o brilho e o contraste que interferem na visualização da interface, a forma como os diversos sistemas operacionais (plataformas) tratam as cores, o tipo de imagem que melhor se adapta a proposta (JPG, GIF, Vetor), a possibilidade da não existência das fontes utilizadas (evitando quebra do layout). Estrutura do site Por estrutura do site, podemos entender a organização da navegação deste site como também a sua organização física dentro do servidor.

3 No primeiro caso, estaremos discutindo a forma como o conteúdo foi desmembrado quando da produção do projeto e como o usuário poderá acessar este conteúdo sem se perder em páginas sem ligações lógicas entre si. Exemplo: No segundo caso, detectamos a necessidade de organizar o material dentro de uma estrutura física no computador para tornar o trabalho mais rápido inclusive no momento das atualizações das informações. Aqui, devemos dividir o material por categorias: texto, imagens, animações, sons, vídeos, etc., criando uma hierarquia lógica com o uso das pastas e sub pastas.

4 2. Conceitos Básicos da HTML O que é HTM L? HTML (HyperText Markup Language) é uma linguagem de marcação de hipertexto. Trata se de um conjunto de indicadores que são inseridos em um texto efetuando uma marcação que informará ao Browser (navegador) como tratá lo. Características do HTM L Documentos HTML são arquivos escritos em ASCII texto. Podem ser criados em qualquer editor de texto. Existem editores específicos para várias plataformas. Existem conversores de vários formatos, por exemplo, doc para html A unidade mínima de informação é a página Há diferenças entre os diversos navegadores disponíveis. Nem todas as marcações e seus recursos são suportados por todos eles. Quando um navegador não entende uma determinada marcação, ele a ignora e o objetivo pretendido não é alcançado. Estrutura A estrutura básica da HTML: Elementos (palavras ou letras) contidos entre os sinais < e > criam links, formatam texto, criam tabela ou formulários. Exemplo: <b > Texto em Negrito </ b > Tags vazias <br> (break line) Algumas "tags" contém atributos para controle de sua aparência. <HR size= 3 w idth= 80% align= left > Cria uma linha divisória com a espessura determinada pelo parâmetro size=3, ocupando uma largura igual a 80% da largura do browser w idth=80% e alinhada a esquerda align=left, Documento html ou htm. Estrutura básica Algumas tags são obrigatórias e têm sua posição definida dentro do arquivo:

5 <HTM L> (indica o começo do documento html) <HEA D> (Indica o início do cabeçalho) <TI TLE> Título do documento </ TI TLE> (Indica a seção de título e fica dentro da seção de cabeçalho) </ HEA D> (Fim da seção de cabeçalho) <BODY > (Inicio do corpo do documento) (Conteúdo Variável) </ BODY > (Fim do corpo) </ HTM L> (Fim do documento) Para inserir comentários de uma linha <! P arte principal da página> Para inserir comentários de mais de uma linha <! P arte principal da página > Tags de formatação: <p > e </ p > Insere um parágrafo <p align=center> <p align=right> < p align=left> <p align=justify > Insere um parágrafo alinhado: ao centro, à direita, à esquerda e justificado <br> Quebra forçada de linha <b > </ b > ( BOLD) <i> < / i> ( I TÁ LI CO) <u> </ u > ( SUBLI NHA DO) Cabeçalho <Hn> Chamada Importante < / Hn> Onde n representa um número entre 1 e 6 que especifica o nível do cabeçalho (1 maior e 6 menor) <H1> Chamada Importante < / H1>... <H6> Chamada Importante < / H6>

6 Exemplo: <Hn align=alinhamento> Subscrito H<sub > 2 < / sub >O Sobrescrito m< sup >2 </ sup > Resultados: Outros: Espaçamento Único ( Teletype) <TT> </ TT > Todos os caracteres ocuparão o mesmo espaço. Tachado <strike> </ strike> Texto M aior <big> </ big> Texto M enor

7 <small> < / small> Texto P ré formatado <pre> </ pre> O navegador (browser) respeita o texto da forma que foi formatado no código fonte. Recuos <blockquote > < / blockquote> Atributos de fonte <FONT> conteúdo do texto </ FONT> <font color= red (ou #ff0000) face= arial, times size= 2 (1 a 7) > Texto em arial, vermelho e tamanho 2 </ font> Algumas cores e seus valores hexadecimais: Black = # White = #FFFFFF Red = #FF0000 Orange = #FF8000 Yellow = #FFFF00 Blue = #0000FF Green = # P adrões da P ágina <BODY text=cor BGCOLOR=cor> Acentos e caracteres especiais Exemplos : ç = ç ou ç Ç = Ç ou Ç = ou = ou I magens Formatos Compuserve Bitmap, GIF e JPG. <IMG>

8 Atributos: Localização (source) <I M G SRC= imagem.gif > Inserção direta da imagem <I M G SRC= imagens / foto.jpg > Inserção da imagem foto.jpg que se encontra dentro do diretório imagens abaixo do diretório atual. <I M G SRC=../ imagens / foto.jpg > Inserção da imagem foto.jpg que se encontra dentro do diretório imagens que está em um diretório acima do diretório atual. <I M G SRC= imagens / foto.jpg w idth=200 height= 100 align =top> Inserção da imagem foto.jpg que se encontra dentro do diretório imagens abaixo do diretório atual. Aqui usamos os parâmetros w idth (largura) e height (altura) para definir o tamanho de exibição desta imagem. O parâmetro align=top garante o alinhamento da imagem no topo da página. <I M G SRC= imagens / foto.jpg w idth=200 height= 100 align =top alt= Texto substituto > O parâmetro alt= assegura a exibição de um texto substituto no lugar da imagem caso esta não apareça ou um texto que explica esta imagem quando o cursor está sobre ela. <BODY background = imagens / fundo.jpg > Imagem inserida como background da página Uso de hiperlinks O uso do hiperlink é fundamental na construção de um site, uma vez que possibilita o acesso as informações organizadas dentro do próprio site ou em outros sites. Para criarmos um link, usamos o seguinte recurso: <A > < / A > ( Â ncora )

9 O complemento HREF ou Referência de hipertexto possibilita incluir o endereço desejado ou a url ( Uniform Resource Location ). <A HREF= url> </ A > Então, para criar um link para o site da Universidade Anhembi Morumbi: <a href= / w w w.anhembi.br > Universidade Anhembi Morumbi </a> Dentro do mesmo documento, podemos usar a âncora para pular para uma parte do texto que está em qualquer parte da página. <A NAME= capitulo1 > Nomeia o ponto que deve ser acessado <A HREF= # capitulo1 >Vá para o capítulo 1</a> Posiciona o ponto nomeado no topo da página Transferência de arquivos FTP <A HREF= ftp://ftp.host.com.br/pub/exemplo.exe > (entre aspas) Arquivo de exemplo</ A > Correio eletrônico <A HREF= > (entre aspas) A lterando a cor dos links a partir de parâmetros colocados na tag BODY <BODY LI NK= cor A LI NK= cor VLI NK= cor > Não visitados (LINK) Ativos (ALINK) Visitados (VLINK) Listas Ordenadas Quando um navegador encontra uma "tag" iniciando uma lista ordenada (também conhecida como lista numerada), ele passa a mostrar cada item utilizando números ou letras. Por exemplo: P ara fazer um página HTM L, você deve : 1. Organizar o material 2. Trabalhar o lay out 3. Abrir o editor de textos 4. Usar as "tags" corretas 5. Salvar no formato htm

10 6. Testar várias vezes no navegador Para fazer uma lista ordenada, utilizamos os seguintes comandos: < OL > Lista ordenada < LI > Início de um item da lista < / LI > Fim de um item da lista < / OL > Fim da lista Pode se especificar o tipo de numeração desejada inserindo dentro da "tag" < OL > a opção TY P E="...". Por exemplo: Passos de uma resenha: < OL TY P E=" i" > < LI >Sumário< /LI > < LI >Introdução< /LI > < LI >Primeira Parte< /LI > < LI >Segunda Parte< /LI > < LI >Bibliografia< /LI > < LI >Sobre o Autor< /LI > < /OL > Resultado: Passos de uma resenha: i. Sumário ii. Introdução iii. Primeira Parte iv. Segunda Parte v. Bibliografia vi. Sobre o Autor Temos também: < OL TY P E=" I " > < OL TY P E=" A " > < OL TY P E=" a" > Listas N ão ordenadas As listas não ordenadas são iniciadas com a "tag" < UL > e são respectivamente terminadas com < / UL >. Seus itens são iniciados por < LI > e finalizados por </ LI >, da mesma forma que as ordenadas. Por exemplo:

11 Disciplinas: < UL > < LI >Matemática< /LI > < LI >Ciências Sociais< /LI > < LI >Geografia< /LI > < /UL > Resultado: Disciplinas: Matemática Ciências Sociais Geografia A opção TY P E="..." também está disponível. < UL TY P E=" disc" > < UL TY P E=" square" > < UL TY P E=" circle" > Barras horizontais A marcação <HR > produz uma linha horizontal no documento. É possível determinar uma largura maior para as barras, utilizando se a extensão "size". <hr size=10> <hr size=20> É ainda possível determinar o quanto da largura da página a linha horizontal vai ocupar. Para isso utiliza se a extensão width=. <hr size=10 w idth=75% > <hr size=20 w idth=100% > <HR w idth=70% align=left size=10 noshade> (sem sombra) Tabelas O recurso de tabelas é fundamental para a montagem das páginas Web, pois permite dividir a tela em linhas e colunas formando as células onde é possível inserir tudo o que normalmente faz parte do corpo de um documento, como textos, links, imagens, listas e até outras tabelas.

12 Exemplo: Tag inicial: TABLE <table>...</ 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 entre <table> e </ table>. <table> <tr> <td>conteúdo A</td> <td>conteúdo B</td> </ tr> </ table> TR <tr >...< / tr> Indica o início e o final de uma determinada linha da tabela (Table Row). TD <td>...</ td> I ndica um elemento ( célula) da tabela, vindo do inglês " Table Data". Nesta célula serão inseridos os elementos do site. Atributos principais das Tabelas (TABLE) BOR DER

13 A tribui bordas a tabela. Se for atribuido o valor 0 ( zero), a tabela não apresentará bordas e será possível a confecção de tabelas mais compactas. Exemplo: <table border=" 4" > CELLSP A CI NG I ndica quanto espaço, em pixels, deve ser inserido entre as células da tabela. Exemplo: <table cellspacing =" 10" > CELLP A DDI NG I ndica quanto espaço, em pixels, deve ser inserido entre as bordas das células e seu conteúdo. Exemplo: <table cellpadding =" 5" > W I DTH Estabelece a largura da tabela. Usa se como medida o número de pixels desejado ou uma porcentagem da largura do documento. Exemplos: <table w idth=" 300" > <table w idth=100% > BA CKGROUND Especifica uma imagem que será utilizada como " fundo" da tabela. Exemplo: <table background=" imagem.gif" > BGCOLOR Especifica uma cor de fundo para a tabela. Exemplo: <table bgcolor=" yellow " > ou <table bgcolor= # ffff00 > BOR DER COLOR

14 Especifica uma cor para as bordas da tabela. Exemplo: <table bgcolor=" yellow " bordercolor=" blue" > A lguns destes atributos podem ser usados também nas tags <TR> e <TD> Exemplo: <table w idth=100% border=1 bgcolor= # ffff00 cellspacing= 0 cellpadding =0 background= fundo.gif > <tr bgcolor= w hite > <td align=left valign=top>conteúdo A < / td> <td align=right valign=bottom >Conteúdo B</ td> </ tr > </ table> 3. Saiba Mais Exemplo de HTM L completo e comentado: Observações em vermelho, comandos em preto <html> ("tag" inicial) <head> (inicio do cabeçalho) <title>primeiro site em HTML< / title> (título da página) </ head> (fim do cabeçalho) <body bgcolor= #aaaaaa text=# link=# vlink=#440000> (início do corpo da página com fundo cinza, texto preto, links cinzas e links visitados vermelhos) <center> (centraliza a tabela na página) <table background=" imagens / fundotabela.jpg" w idth=600 cellspacing =0 cellpadding =0 border= 0> (início da tabela com uma imagem de fundo, largura = 600 pixels, sem borda e com espaços extras excluídos) <tr > (início da primeira linha da tabela>

15 <td align =left valign =top> (iníicio da primeira coluna alinhada a esquerda e no topo) <img src=" imagens / logo.gif" border= 0>(carregamento da primeira imagem = o logo que tem fundo transparente = que se encontra na pasta imagens ) </ td > (fechamento da primeira coluna) <td align =left valign =top> (início da segunda coluna alinhada a esquerda e no topo) <a href=" index.htm" ><img src=" imagens / b home.gif" border=0></ a> (carregamento da segunda imagem = o botão home que tem fundo transparente) e está com link para a página index.htm) </ td> (fechamento da Segunda coluna) <td align =left valign =top> (início da terceira coluna alinhada à esquerda e no topo) <a href=" contato.htm " ><img src=" imagens / contato.gif" border= 0></ a> (carregamento da terceira imagem = o botão contato que tem fundo transparente) e está com link para a página contato.htm) </ td > (fechamento da terceira coluna) <td align =left valign =top> (início da quarta coluna alinhada à esquerda e no topo) <a href=" noticias.htm" ><img src=" imagens / noticias.gif" border=0></ a> (carregamento da quarta imagem = o botão noticias que tem fundo transparente) e está com link para a página noticias.htm) </ td > (fechamento da quarta coluna) <td align =left valign =top> (início da quinta coluna alinhada à esquerda e no topo) <a href=" links.htm" ><img src=" imagens / links.gif" border=0></ a> (carregamento da quinta imagem = o botão links que tem fundo transparente) e está com link para a página links.htm) </ td > (fechamento da quarta coluna) <td align =left valign =top> (início da sexta coluna alinhada a esquerda e no topo) <a href=" portfolio.htm " ><img src=" imagens / portfolio.gif" border= 0></ a> (carregamento da sexta imagem = o botão portfolio que tem fundo transparente) e está com link para a página portfolio.htm) </ td> (fechamento da sexta coluna) </ tr > (fechamento da primeira linha

16 <tr > (inicio da Segunda linha) <td align =left valign =middle colspan=4 bgcolor= #ffffff> (início da coluna de texto que se expande por 4 das colunas acima, tem fundo branco, está alinhada à esquerda e centralizada verticalmente) <font face=verdana size=2 color=# > (marcação da fonte utilizada, verdana, tamanho 2 e de cor preta) <br> (salto de linha) <dd> (utilizado no início da frase cria um parágrafo) Qualquer texto que apresente o conteúdo do site e sirva para testarmos a formatação da página juntamente com a imagem colocada à direita. </ td> (fechamento da coluna quadrupla) <td align =center valign=middle colspan= 2 bgcolor=#ffffff> (início da coluna com a imagem que se expande por 2 das colunas acima, tem fundo branco, está alinhada ao centro na horizontal e na vertical) <br> (salto de linha) <img src=" imagens / passaro.jpg" > (carregamento da imagem do pássaro) <br><br> (duplo salto de linha) </ td> (fechamento da coluna dupla) </ tr > (fechamento da segunda linha) <tr > (início da terceira linha) <td align =left valign =middle colspan=4 bgcolor= #ffffff> (início da coluna de texto que se expande por 4 das colunas acima, tem fundo branco, está alinhada à esquerda e centralizada verticalmente) <font face=verdana size=2 color=# > (escolha da fonte verdana, tamanho 2 e de cor preta) <dd> (utilizado no início da frase cria um parágrafo) Qualquer outro texto que complemente o estudo acima e sirva para atualizar este conteúdo. Precisamos apenas lembrar de expandir as colunas para não separarmos os botões. <br><br><br><br> (quatro saltos de linha) </ td> (fechamento da coluna)

17 <td align =center valign=top colspan= 2 bgcolor=#ffffff> (início da coluna com a imagem que se expande por 2 das colunas acima, tem fundo branco, está alinhada ao centro na horizontal e na vertical) <img src=" imagens / radio.jpg" > (carregamento da imagem do rádio) </ td> (fechamento da coluna) </ tr > (fechamento da terceira linha) <tr > (início da Quarta linha) <td align =left valign =top colspan=6 > (início da coluna de texto que se expande pelas 6 colunas acima, está alinhada à esquerda e no topo) <font face=verdana size=2 color=# > (escolha da fonte verdana, tamanho 2 e de cor preta) <dd> (utilizado no início da frase cria um parágrafo) Esta linha não está dividida em texto e imagem, portanto, expande suas colunas ao número máximo, ou seja, 6 que é o total de colunas montadas no menu. <dl> (início de uma lista de itens) <dd> (utilizado no início da frase cria um parágrafo)<li>(desenha um ponto de lista) item um<br> <dd> (idem)<li>(idem)item dois< br> <dd> (idem)<li>(idem)item tres< br> </ dl> (fechamento da lista) <dd> (utilizado no início da frase cria um parágrafo)esta linha não está dividida em texto e imagem, portanto expandi suas colunas ao número máximo, ou seja, 6 que é o total de colunas montadas no menu. <br><br><br><br> (quatro saltos de linha) </ td> (fechamento da coluna) </ tr > (fechamento da Quarta linha) <tr > (início da Quinta linha) <td align =center valign=top colspan= 6 bgcolor=#000000> (abertura de uma coluna expandida por 6 e com fundo preto, alinhada ao centro) <font face = verdana size = 1 color=# ffffff> Rodapé contendo informações da página e os links principais< / font>

18 (alteração da fonte para tamanho 1 e cor branca) </ td> (fechamento da coluna) </ tr > (fechamento da Quinta linha) <tr > (início da Sexta linha) <td bgcolor=# ffffff colspan= 6> (abertura de uma coluna expandida por 6 e com fundo branco) <br> (salto de linha) </ td> (fechamento da coluna) </ tr > (fechamento da sexta linha) </ table> (fechamento da tabela) </ body> (fechamento do corpo da página) </ html> (fechamento da html) 4. Bibliografia DOTTA, Sílvia. Construção de sites. São Paulo: Editora Global, LEMAY, Laura. A prenda em 1 semana HTM L 4. São Paulo: Campus, SIEGEL, David. Criando sites arrasadores na W eb I I I : a arte da terceira geração em design de sites. São Paulo: Market Books, WEINMANN, Lynda. Design criativo com HTM L. 2 Rio de Janeiro: Editora Ciência Moderna, 2002

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

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

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

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

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

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

> Herbet Ferreira Rodrigues > contato@herbetferreira.com

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

Leia mais

Programação 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

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

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

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

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

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

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

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

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

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

Leia mais

Programação e Designer para WEB

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

Leia mais

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

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

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

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

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

Leia mais

Introdução 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

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

WEB DESIGNER WEB DESIGNER

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

Leia mais

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

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

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

INTRODUÇÃO À PROGRAMAÇÃO

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

Leia mais

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

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

Leia mais

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

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

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

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

Leia mais

Tutorial de HTML. O que é HTML? Aprendendo

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

Leia mais

Introdução. 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

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

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

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

Leia mais

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

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

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

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

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

Leia mais

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

Apostila Programador Web v3.0 Prof. Alexandre Unterstell alexunter@gmail.com www.alex.inf.br

Apostila Programador Web v3.0 Prof. Alexandre Unterstell alexunter@gmail.com www.alex.inf.br 1 Apostila Programador Web v3.0 Prof. Alexandre Unterstell alexunter@gmail.com www.alex.inf.br Antes de começar desenvolver um site na internet é importante que conheçamos alguns fatores importantes que

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

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

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

HyperText Markup Language HTML

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

Leia mais

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

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

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

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

Aplicação para Web I. Começando a compreender o HTML

Aplicação para Web I. Começando a compreender o HTML Aplicação para Web I Começando a compreender o HTML A Linguagem da WEB O HTML ou HyperText Markup Language linguagem universal compreendida pelos navegadores web (browsers) para a comunicação utilizando

Leia 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

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

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

Claudio Damasceno. Avançar

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

Leia mais

WEB DESIGNER PASSO A PASSO PARA INICIANTES WWW.LIGG3.COM.BR WWW.LIGG3.COM.BR. Bem vindo a este manual de guia Passo a Passo para Web Designer.

WEB DESIGNER PASSO A PASSO PARA INICIANTES WWW.LIGG3.COM.BR WWW.LIGG3.COM.BR. Bem vindo a este manual de guia Passo a Passo para Web Designer. INTRODUÇÃO Bem vindo a este manual de guia Passo a Passo para Web Designer. Com o avanço cada vez mais da Internet é necessário mais do que nunca você está dentro da Rede Mundial de Computadores, a Net

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

MINISTÉRIO DA EDUCAÇÃO

MINISTÉRIO DA EDUCAÇÃO MINISTÉRIO DA EDUCAÇÃO SECRETARIA DE EDUCAÇÃO PROFISSIONAL E TECNOLÓGICA INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DE SANTA CATARINA CAMPUS SÃO JOSÉ TECNICO EM TELECOMUNICAÇÕES REDES DE COMPUTADORES

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

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

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

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

CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1

CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 ESCOLA ESTADUAL PROF. JOSÉ BARROSO TOSTES PROFESSOR: ESP. ANDREW RODRIGUES CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 CURSO: PROGRAMADOR WEB DISCIPLINA: HTML 4.0.1 1 APOSTILA DE INTRODUÇÃO À LINGUAGEM

Leia 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

José Frazão. Página 2 de 19

José Frazão. Página 2 de 19 Página 2 de 19 Índice Página 1. Introdução 4 2. História e características 5 3. Sintaxe 5 3.1. Texto 7 3.2. Comandos básicos mais utilizados 8 3.3. Fundo (Backgrounds) e cores 10 3.4. Tabela de acentos

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

APOSTILA DE INTRODUÇÃO AO HTML

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

Leia mais

APOSTILA DE HTML. Programa de Educação Tutorial Curso de Engenharia de Telecomunicações Universidade Federal Fluminense. Rafael de Oliveira Ribeiro

APOSTILA DE HTML. Programa de Educação Tutorial Curso de Engenharia de Telecomunicações Universidade Federal Fluminense. Rafael de Oliveira Ribeiro APOSTILA DE HTML Programa de Educação Tutorial Curso de Engenharia de Telecomunicações Universidade Federal Fluminense Autor atual: Últimas atualizações: Robertha Pereira Pedroso Pâmella Almeida Gomes

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

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

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

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

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

Leia mais

UFCD 21 Criação de sites webs D U R A Ç Ã O : 5 0 H O R A S

UFCD 21 Criação de sites webs D U R A Ç Ã O : 5 0 H O R A S UFCD 21 Criação de sites webs 1 D U R A Ç Ã O : 5 0 H O R A S Objectivos: 2 C R I A R D O C U M E N T O S E M H I P E R T E X T O D E S E N V O L V E R E A L O J A R U M S I T E N A I N T E R N E T Conteúdos

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

UNIVERSIDADE FEDERAL DO PARANÁ FRONTPAGE 2000

UNIVERSIDADE FEDERAL DO PARANÁ FRONTPAGE 2000 UNIVERSIDADE FEDERAL DO PARANÁ PRÓ-REITORIA DE RECURSOS HUMANOS E ASSUNTOS ESTUDANTIS COORDENAÇÃO DE DESENVOLVIMENTO DE RECURSOS HUMANOS UNIDADE DE QUALIFICAÇÃO FRONTPAGE 2000 Módulo I Hamilton Chaiben

Leia mais

3.1.7. Definição do fundo da página

3.1.7. Definição do fundo da página 3.1.7. Definição do fundo da página 1 Definição do fundo da página A definição do fundo de uma página pode ser feita através da atribuição de uma cor ou de uma imagem Quando é feita através da utilização

Leia mais

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

CURSO HTML. www.regilan.com. Parte 1: Introdução ao desenvolvimento WEB. Olá amigos visitantes, CURSO HTML www.regilan.com Parte 1: Introdução ao desenvolvimento WEB Olá amigos visitantes, O objetivo deste mini-curso é fornecer os conhecimentos básicos que permitirão construir um web site. Como partiremos

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

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

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

Parte 3 - HTML. Tópicos abordados neste capítulo. 3.1 - Conceitos Básicos. 3.1.1 - O que é uma Página Web? 3.1.2 - Como se cria uma Página Web?

Parte 3 - HTML. Tópicos abordados neste capítulo. 3.1 - Conceitos Básicos. 3.1.1 - O que é uma Página Web? 3.1.2 - Como se cria uma Página Web? Parte 3 - HTML Tópicos abordados neste capítulo 3.1 - Conceitos Básicos 3.1.1 - O que é uma Página Web? 3.1.2 - Como se cria uma Página Web? 3.1.3 - Como são os Tags HTML? 3.1.4 - A estrutura de uma Página

Leia mais

TECNOLOGIAS WEB AULA 5 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD

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

Leia mais

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

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

3 HTML Tabelas, frames e formulário

3 HTML Tabelas, frames e formulário 3 HTML Tabelas, frames e formulário Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Tabelas...3 Principais atributos das tabelas...4 Principais atributos

Leia mais

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

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

Leia mais

Todos os tags obedecem a uma hierarquia, como no seguinte exemplo:

Todos os tags obedecem a uma hierarquia, como no seguinte exemplo: <a> <b> <c> </c> </b> </a> O que é o HTML? HTML significa HyperText Markup Language, e é uma linguagem universal destinada à elaboração de páginas com hiper-texto, como o nome indica. O conceito de hiper-texto é bastante simples:

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

André Kawamoto NE31A

André Kawamoto NE31A André Kawamoto NE31A Internet Internet: uma coleção de redes Todos os computadores conectados à Internet fazem parte de uma rede (rede local, rede doméstica) Rede de Redes Internet x WWW Internet e World

Leia mais

Manual do Publicador. Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web

Manual do Publicador. Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web Manual do Publicador Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web Sumário Painel de Administração... 3 1 - Inserção de post... 5 2 Publicação de post com notícia na área headline (galeria de

Leia mais

Programação para a Web - I. José Humberto da Silva Soares

Programação para a Web - I. José Humberto da Silva Soares Programação para a Web - I José Humberto da Silva Soares Fundamentos de Internet Rede Mundial de Computadores; Fornece serviços, arquivos e informações; Os computadores que têm os recursos são chamados

Leia mais

hipertexto, hipermédia e representação de informação

hipertexto, hipermédia e representação de informação hipertexto, hipermédia e representação de informação 5 2002 Luis Borges Gouveia (http://www.ufp.pt/~lmbg) 1 Internet rede global de dados com propriedade distribuída cada instituição integrada na rede

Leia mais

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho

Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Apostila de Introdução à Linguagem HTML - Disponibilização de Conteúdos na WEB - Profa. Flávia Pereira de Carvalho Março de 2007 Sumário Página 1 INTRODUÇÃO À LINGUAGEM HTML...3 2 EDIÇÃO DE DOCUMENTOS

Leia mais

Observações importantes:

Observações importantes: Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB AD1 1 semestre de 2014. Observações importantes:

Leia mais

72ABC - 2 Bimestre. Check-list para Prova Bimestral. 01 - Criar uma versão do site do primeiro bimestre em HTML.

72ABC - 2 Bimestre. Check-list para Prova Bimestral. 01 - Criar uma versão do site do primeiro bimestre em HTML. 72ABC - 2 Bimestre Check-list para Prova Bimestral 01 - Criar uma versão do site do primeiro bimestre em HTML. 02 Serão desenvolvidas as mesmas páginas já feitas, mas em versão HTML. A seguir, um exemplo

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

Profa. Reane Franco Goulart

Profa. Reane Franco Goulart Profa. Reane Franco Goulart A linguagem HTML (Hypertext Markup Language) tem o objetivo de formatar textos através de marcações especiais denominadas tags, para que possam ser exibidos de forma conveniente

Leia mais