PROGRAMAÇÃO EM AMBIENTE WEB I
|
|
|
- Clara Graça Camarinho
- 8 Há anos
- Visualizações:
Transcrição
1 PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi [email protected] UM POUCO DE HISTÓRIA Tudo começou com a ARPANET; 1977 ARPANET nasce 1987 Das universidades, volta-se a fins comerciais 1991 É criado o HTML HTTP - WWW 1
2 WWW É um grande conjunto de documentos (páginas) interligados, onde cada uma dessas páginas pode conter um tipo de hipermídia: Vídeos Sons Hipertextos Figuras MAIS UM POUCO DE HISTÓRIA Logo do Mosaic Mosaic exibindo uma página de
3 HISTÓRIA: HTML 1992: Primeira aparição do HTML; 1993: HTML + algumas definições de aparência, tabelas e formulários. 1994: HTML padronização de características 1994: HTML extensão do HTML 1995: HTML padronização do Netscape e Internet Explorer. HISTÓRIA: HTML 2000: XHTML é criado (versão do HTML 4.0); 2004: Surge a Web 2.0; 2008: W3c anuncia a especificação do HTML : Crescente o desenvolvimento do HTML : Previsão da versão final do HTML5 Hoje: Difusão de uso do HTML5. 3
4 WEB 1.0 Tinha como características: Estática, não existia interatividade; Destaque para o surgimento dos grandes portais; 1994 Apenas 10 mil sites hospedados. WEB 2.0 Tinha (tem) como características: Web colaborativa; Oferece conteúdo dinâmico com interatividade dos usuários; Criação de redes sociais dás mais variadas instâncias e finalidades. 4
5 WEB 3.0 Terá como características: Geração de conteúdo através da coletividade; Ferramentas para inovação; Terceirização de tarefas para um grande número de pessoas. Exemplos: Companhia aérea Azul. Exemplos: Starbucks LINGUAGEM DE MARCAÇÃO E ESTILOS - HTML 5
6 SEPARAÇÃO EM CAMADAS HTML Conteúdo Dados e estrutura CSS Apresentação Cores, fontes e posicionamentos. JavaScript Comportamentos - Interatividade 6
7 HYPERTEXT MARKUP LANGUAGE Ou simplesmente HTML é uma linguagem de marcação interpretada por um navegador Web, esta linguagem é composta por diversas tags com atributos que permitem que seja escrito um site. Tag indica estrutura Atributos são as propriedades de uma estrutura. ESTRUTURA DE UMA PÁGINA <!DOCTYPE html> <html> <head> <meta charset= UTF-8 /> <title> Minha primeira página em HTML </title> </head> <body> Minha primeira informação. </body> </html> 7
8 REGRAS HTML As tags HTML devem ser escritas em letras minúsculas e devem ser fechadas, bem como atributos devem sempre ter valores e entre aspas duplas. Exemplos: <p> Começamos um novo parágrafo </p> <b><p> Parágrafo em negrito </p></b> <br /> <hr /> <img src= imagem.gif alt= Foto da cidade /> TAGS ESTRUTURAIS 8
9 BODY Envolve todo o conteúdo HTML e pode receber vários atributos, dentre eles destacam-se: bgcolor Cor de fundo background Imagem como plano de fundo text Cor do texto principal link Cor dos links existentes na página alink Cor do link que foi ativado vlink Cor do link que já foi visitado META Esta tag fornece informações sobre o documento que não são mostrados, mas que podem ser utilizados em buscadores. <head> <meta name= aula content= Programação Web /> <meta name= keywords content= HTML, CSS /> <meta name= author content= Fabiano Taguchi /> <meta charset= UTF-8 /> </head> 9
10 META A tag ainda pode definir a linguagem natural da página, conteúdo padrão e redirecionamento de páginas. <head> <meta http-equiv= Content-Language content= pt-br > <meta http-equiv= Content-Type content= text/html > <meta http-equiv= refresh content= 5 ; URL= p1.html > </head> STYLE Apesar de ser recomendado utilizar regras CSS em arquivos separados (organização), esta tag é utilizada para inserir o CSS diretamente no HTML de uma página. O atributo utilizado é o type. <style type= text/css > body { color: red; background-color: blue; </style> 10
11 SCRIPT Tag utilizada para incluir um código JavaScript em uma página HTML. Os principais atributos utilizados são: src; type; async; charset. <script type= text/javascript src= ania.js > </script> ATRIBUTOS DE FORMATAÇÃO 11
12 FORMATAÇÃO font u em s sub big small i sup Alteração de face (face), cor (color) e tamanho (size) Efeito sublinhado Efeito enfatizado Efeito tachado Efeito subscrito Efeito que aumenta o texto Efeito que diminui o texto Efeito itálico Efeito sobrescrito TAGS PARA CONTEÚDO 12
13 IMAGEM DE FUNDO O atributo background quando usado na tag body permite que seja inserido uma imagem de fundo em uma página. <body background= fotos/cores.png > Informações a serem exibidas na página </body> PARÁGRAFOS Representada pela tag <p>, seu objetivo é organizar textos dentro de uma página HTML separando-os. O principal atributo é o align. <p> Começamos um novo parágrafo </p> <p align= right > Parágrafo à direita </p> <p align= left > Parágrafo à esquerda</p> 13
14 CORES Para trabalhar com cores em uma página HTML devem ser utilizados os atributos color e bgcolor. <body bgcolor= #00ff99 > <hr> <p color= #ff0000 > Exemplo de texto </p> </body> CABEÇALHOS 14
15 PRE É utilizada para mostrar um texto em sua formatação original, desta forma todos os enters, tab e espaços são preservados. <pre> Texto separado por dois espaços </pre> <pre> Texto em quebras de linha </pre> LINHA HORIZONTAL Para ser criado uma linha horizontal, a tag utilizada é a <hr>. <h1> Fabiano Taguchi </h1> <hr> <h2> [email protected] </h2> <h3> </h3> 15
16 QUEBRAS DE LINHAS As quebras de linha podem ser executadas com o uso da tag <br>. <p> Esse texto ficará Na mesma linha. <br> E este em outra linha. </p> <font color= ff0000 size= 3 > As páginas Web são escritas em HTML </font> TABULAÇÃO Para que seja deixado um espaço de margem dentro da página, a tag <blockquote> é utilizada. O efeito desta tag é acumulativo. <blockquote> Está é o site da XYZ. </blockquote> <blockquote> Seja bem vindo </blockquote> 16
17 CENTRALIZAR Um texto pode ser centralizado se for colocado dentro da tag <center>. Esta tag é antiga, e era usada quando não havia formas de centralizar textos. <center> Está é o site da XYZ. </center> <center> Seja bem vindo </center> ALINHAMENTOS Para que outros alinhamentos sejam feitos, o atributo align é inserido em várias tags. <h1 align= center > Cabeçalho centralizado </h1> <p align= left > Parágrafo alinhado à esquerda </p> <p align= right > Parágrafo alinhado à direita </p> <p align= center > Parágrafo centralizado </p> 17
18 IMAGENS As imagens são inseridas em um documento Web através da tag <img>. Alguns atributos podem ser inseridos: src Especifica o caminho físico da imagem alt Indica um texto alternativo title Exibida quando cursor fica sobre a imagem width e height Atributos de largura e altura border Cria borda ao redor da imagem IMAGENS Pode ainda na versão 5 do HTML fazer uso da tag <figcaption>, que cria uma legenda para imagem. <figure> <img src= img/produto.jpeg alt= Foto > <figcaption> Produto por R$ 129,90 </figcaption> </figure> 18
19 MAPAS SENSITIVOS Um mapa consiste em uma imagem que pode ser colocados links em áreas específicas. Como áreas podem ser usadas: rect, circle ou poly. <img src="planets.gif usemap="#planetmap"> <map name= mapa1 > <area shape= rect coords= 300,2,60,60 href= # > </map> LINKS A tag que representa um link é a tag <a>, seu principal atributo é o href que indic ao local do arquivo. Target também pode ser usado como atributo, que indica se o link será aberto na mesma página ou em uma nova. <a href= > Google </a> 19
20 PERSONALIZANDO LINKS <body vlink= #ff0000 text= #ff00ff > <h2> <a href= > Link para acesso ao site do Google </a> </h2> </body> ÂNCORAS São utilizadas como ponto de referência para marcar o início de uma seção no documento. No exemplo abaixo é criado a âncora para seção 1. <a href= #secao1 > Clique aqui </a> <a name= secao1 > Conteúdo a ser mostrado </a> 20
21 LISTAS NÃO ORDENADAS As listas não ordenadas são representadas pela tag <ul>. Cada item dentro de uma lista está contido dentro das tags <li>. <ul type= square > <li> Tome uma xícara de café </li> <li> Veja o sol nascer </li> <li> Ouça o canto dos pássaros </li> <li> Ouça o vento </li> </ul> LISTAS ORDENADAS São listas nas quais cada item é numerado de forma sequencial. Para criar uma lista ordenada, utilizamos a tag <ol>. <ol start= 10 type= A > <li> Inseria o CD-ROM </li> <li> Selecione executar </li> <li> Digite a letra para o drive de CD-ROM </li> <li> siga as instruções de instalação </li> </ol> 21
22 LISTAS DE GLOSSÁRIO Uma lista de glossário possui duas partes: termo e a definição do termo. Para o termo utiliza-se a tag <dt>, para a definição a tag usada é a <dd>. <dl> <dt> Manjericão </dt> <dd> Anual. Pode crescer até quatro pés de altura </dd> </dl> ÁUDIO E VÍDEO Uma forma de adicionar áudio e vídeo em páginas Web é fazendo uso da tag embed. O HTML5 possui suporte para adicionar mídia através do elemento <audio> e do elemento <video>, fazendo uso de alguns atributos: controls Cria controles padrão para áudio e vídeo autoplay Reprodução automática loop Repetição automaticamente do arquivo widht e height Largura e altura do elemento 22
23 ÁUDIO E VÍDEO Exemplos de aplicação dos elementos <audio> e <video>: <audio src= musica.mp3 ></audio> <video src= filme.wma ></video> <video src= audio.mp3 width= 300px height= 300px controls= controls autoplay= autoplay /> TABELAS 23
24 TABELAS Uma tabela é criada a partir da tag <table>. Cada linha dentro da tabela é criado com a tag <tr>, por sua vez cada célula dentro de uma linha pela tag <td>. <table> <tr> </tr> </table> <td> </td> <td> </td> TABELAS Entre os principais atributos de tabela temos: background Imagem do plano de fundo; bgcolor Cor do plano de fundo; border Largura da borda em pixels; cellpading Espaçamento nas células; cellspacing Espaçamento entre as células; width Largura da tabela align Alinhamento da tabela bordercolor Cor na borda da tabela 24
25 TABELAS <table border= 1 > <tr> <td> Primeira coluna </td> <td> Segunda coluna </td> <td> Terceira coluna </td> </tr> <tr> <td> Primeira coluna </td> <td> Segunda coluna </td> <td> Terceira coluna </td> </tr> </table> TABELAS <table border= 2 > <caption> Dados do curso </caption> <tr> <td> Nome do curso </td> <td> Valor do curso </td> <td> Nome do professor </td> </tr> </table> 25
26 TABELAS <table border= 2 cellpading= 2 > <tr> <td colspan= 2 > Primeira linha </td> </tr> <tr> <td> Primeira coluna </td> <td> Segunda coluna </td> </tr> </table> TABELAS <table border= 2 cellpading= 2 > <tr> <td> Programação Web </td> <td> R$ 250,00 </b> <td rowspan= 2 > José Joaquim </n> </tr> <tr> <td> Lógica de Programação </td> <td> R$ 120,00 </td> </tr> </table> 26
27 TABELAS <table border= 2 cellpading= 2 > <caption> Dados do curso </caption> <tr> <th> Nome do curso </th> <th> Valor do curso </th> <th> Nome do professor </th> </tr> <tr> <td> Programção Web </td> <td> R$ 250,00 </td> <td> José Joaquim </td> </tr> </table> LINHAS DE TABELAS Como visto, para criar uma linha de uma tabela a tag <tr> é criada. Alguns atributos podem ser utilizados nas linhas: align Alinhamento do conteúdo da linha valign Alinhamento vertical do conteúdo bgcolor Define uma cor de segundo plano para linha 27
28 TABELAS <table border= 2 align= center bgcolor= ff4321 > <tr> <td> Nome do curso </td> <td valign= top nowrap> Valor </td> </tr> <tr> <td> Programação Web </td> <td> R$ 250,00 </td> </tr> </table> EXERCÍCIO 28
29 FRAMES FRAMES <html> <head> <title> Usando frames </title> </head> <frameset cols= 150,650 > <frame src= menu.html name= Menu > <frame src= principal.html name= Principal > </frameset> </html> 29
30 PÁGINA MENU.HTML <html> <head> <title> Menu </title> </head> <body bgcolor= #99ff33 > <a href= Principal.html target= Principal > </a> <a href= Java.html target= Principal > </a> <a href= JavaMe.html target= Principal > </a> </body> </html> PÁGINA PRINCIPAL.HTML <html> <head> <title> Principal </title> </head> <body bgcolor= # > Principal </body> </html> 30
31 PÁGINA JAVA.HTML <html> <head> <title> Java </title> </head> <body bgcolor= # > Java </body> </html> PÁGINA JAVAME.HTML <html> <head> <title> Java </title> </head> <body bgcolor= # > Java ME </body> </html> 31
32 FRAMES DOIS FRAMESETS <html> <head> <title> Usando frames </title> </head> <frameset rows= 150,400 > <frame src= cabecalho.html name= Cabecalho > <frameset cols= 150,650 > <frame src= menu.html name= Menu > <frame src= principal.html name= Principal > </frameset> </frameset> </html> PÁGINA CABECALHO.HTML <html> <head> <title> Cabeçalho </title> </head> <body bgcolor= # > <font align= center > Cabeçalho </font> </body> </html> 32
33 EXERCÍCIOS EXERCÍCIOS 33
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
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
> Herbet Ferreira Rodrigues > [email protected]
Curso HTML & CSS > Herbet Ferreira Rodrigues > [email protected] Sumário > Apresentação > Introdução ao HTML História Começando a Programar > Tags em HTML Headings (Cabeçalhos) Parágrafos Formatação
Programação para Internet I
Programação para Internet I Aula 05 e 06 Fernando F. Costa [email protected] 1 Tags de Formatação de Texto - Permite que um texto se mova de um lado para o outro da página. Sintaxe:
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
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
Autoria Web. Professor: Diego Oliveira. Conteúdo 02: Principais Tags HTML
Autoria Web Professor: Diego Oliveira Conteúdo 02: Principais Tags HTML Diferença de HTML e XHTML Os elementos XHTML devem estar devidamente aninhados Os documentos XHTML devem estar bem-formados Os nomes
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
Programação para Web HTML - Parte 2
Programação para Web HTML - Parte 2 Professor: Harlley Lima E-mail: [email protected] Departamento de Computação Centro Federal de Educação Tecnológica de Minas Gerais Belo Horizonte, 2 de março
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
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
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
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
Prof. Erwin Alexander Uhlmann 1/7/2010
HTML 5 O html 5 é a nova versão do html 4. Foi desenvolvido para a interoperabilidade e padronização de plataformas e navegadores (motores). Compare as estruturas do html4 e do 5, abaixo: HTML 4 HTML 5
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
HyperText Markup Language HTML
HyperText Markup Language HTML Prof. Luis Nícolas de Amorim Trigo [email protected] http://professor.ifsertao-pe.edu.br/nicolas.trigo/ Introdução Linguagem de Marcação de Hipertexto. Uma
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
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
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
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
WebDesign. Professor: Paulo Trentin [email protected] http://www.paulotrentin.com.br. Escola CDI de Videira
WebDesign Professor: Paulo Trentin [email protected] http://www.paulotrentin.com.br Escola CDI de Videira Entendendo Alguns Conceitos Antes de prosseguirmos é importante ter em mente o motivo pelo
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
Linguagem WEB Prof. Alexandre Unterstell [email protected] - www.alex.inf.br/cesc
Linguagem WEB Prof. Alexandre Unterstell [email protected] - 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),
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
Programação e Designer para WEB
Programação e Designer para WEB html Prof. Rodrigo Rocha [email protected] http://www.bolinhabolinha.com Apresentação Onde Estamos Introdução a hipertexto. A linguagem. Ambientes para programação
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
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
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
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
Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: [email protected]
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;
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
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
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
Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto [email protected]
Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto [email protected] Listas A HTML permite definir três categorias distintas de listas: Ordenadas Sem ordenação Lista de definição 2/28 Listas
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
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
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).
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
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
HyperText Markup Language (HTML) Desenho de Documentos na World Wide Web
Programação Na Web HyperText Markup Language (HTML) Desenho de Documentos na World Wide Web 1 António Gonçalves Agenda Introdução ao HTML Criar e publicar uma página Web Validar uma documento Elementos
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
Tecnologia WEB I. Prof. Erwin Alexander Uhlmann. Dos princípios do HTML, estruturação com CSS e automação com Javascript
1 Tecnologia WEB I Prof. Erwin Alexander Uhlmann Dos princípios do HTML, estruturação com CSS e automação com Javascript UHLMANN, Erwin Alexander. Dos princípios do HTML, estruturação com CSS e automação
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
Curso de HTML. Daniel Destro do Carmo Softech Network Informática [email protected]
Daniel Destro do Carmo Softech Network Informática [email protected] Definições conceituais O que é HTML? Criando e publicando uma página web Elementos da HTML Estrutura básica de uma página HTML
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 [email protected] Página Web: É um documento composto de texto e códigos especiais, chamados tags, que especificam
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
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
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
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
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
Web Design Aula 15: Propriedades CSS
Web Design Aula 15: Propriedades CSS Professora: Priscilla Suene [email protected] Roteiro Propriedades de texto Propriedades de Cores Propriedades de Bordas Propriedades de Listas Cor de
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
Apostila Programador Web v3.0 Prof. Alexandre Unterstell [email protected] www.alex.inf.br
1 Apostila Programador Web v3.0 Prof. Alexandre Unterstell [email protected] www.alex.inf.br Antes de começar desenvolver um site na internet é importante que conheçamos alguns fatores importantes que
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
Roteiro de Auxílio para as Atividades Práticas de Sistemas de Informação
Roteiro de Auxílio para as Atividades Práticas de Sistemas de Informação A linguagem XML no contexto do curso de Sistemas de Informação é utilizada principalmente para o armazenamento e a manipulação de
FTIN - Módulo de WebDesign. Prof. Iran Pontes
FTIN - Módulo de WebDesign Prof. Iran Pontes FTIN FORMAÇÃO TÉCNICA EM INFORMÁTICA IMPLEMENTAÇÃO HTML/CSS Hipertexto É um sistema para a visualização de informação cujos documentos contêm referências internas
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
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
Claudio Damasceno. Avançar
Claudio Damasceno Conteúdo Alinhamento Âncoras, Links Tabelas Formatação Próximo Capítulo HTML [email protected] 2 Recapitulando - Estrutura básica título DA PÁGINA
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
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 : [email protected] Av. Bento Gonçalves, 9500 bloco
Curso de HTML. Rone Ilídio
Curso de HTML Rone Ilídio HTML HyperText Mark-up Language Linguagem criação de páginas Apresenta informações Formada por tags, exemplo: Tag H1: dados marcados com h1 Interessante: Acesse qualquer
Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto [email protected]
Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto [email protected] Conceitos de HTML Prof. André Y. Kusumoto [email protected] Definição de HTML Linguagem de marcadores (tags).
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
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:
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
Aplicativos para Internet Aula 01
Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx
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
O HTML possui sintaxes para os tags na ordem LIFO, ou seja, o último tag a ser digitado é o primeiro a ser fechado, por exemplo:
HTML é a sigla usada para Hyper Text Markup Language (linguagem de Marcação de Hipertexto). É a linguagem destinada a criação de páginas para a WEB. Ao contrário do que muita gente boa pensa, HTML não
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.
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
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
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS.
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Programação de Computadores
Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto [email protected]
Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto [email protected] 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.
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
MODULO 4 DESENVOLVIMENTO DE PÁGINAS WEB ESTÁTICAS. Redes de Comunicação
MODULO 4 DESENVOLVIMENTO DE PÁGINAS WEB ESTÁTICAS Redes de Comunicação Regras para um website eficaz Categorização dos conteúdos estrutura lógica dos conteúdos Condensação conteúdos simples e directos
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.
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
2 HTML Inserindo objetos
2 HTML Inserindo objetos Vinicius A. de Souza [email protected] 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
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
Web Design Aula 02: HTML
Web Design Aula 02: HTML Professora: Priscilla Suene [email protected] Motivação Roteiro Introdução Conceitos HTML Primeira Página Identação Incluindo o título Salvando a página Vizualizando
As tags indicam as diversas partes da página e produzem diferentes efeitos no navegador, elas são os comandos da linguagem HTML.
World Wide Web A Web é um conjunto de documentos acessíveis por meio da Internet. Esses documentos (ou páginas Web) contêm uma tecnologia chamada hipertexto. Onde você poderá percorrer partes do documento
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
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
HTML5 e Mobile Web Reinaldo Ferraz W3C Brasil
HTML5 e Mobile Web Reinaldo Ferraz W3C Brasil Um pouco do W3C O W3C no Brasil Web e W3C 5 Tim Berners-Lee criou / propôs a Web em 1989 (há 23 anos) (URI + HTTP + HTML) HTML5 - Futuro da Web Web em 1989
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
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:
Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo.
Prof. Vania Gimenez- Aula de Hoje Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. Como defino e escrevo uma classe? Classe é um seletor
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO
UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO Instituto de Ciências Exatas e Tecnologia Curso: Ciência da Computação e Sistemas de Informação Série: 1º semestre Disciplina: Laboratório de Práticas
Comandos Básicos de HTML
Comandos Básicos de HTML Agora iniciaremos o estudo ao HTML, para você fazer o site utilize o bloco de notas do windows(notepad) ou um outro editor de texto como Notepad++, Geany ou PSPAD. Para fazer você
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
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