Faculdade de Tecnologia Senac Goiás Aluno: Maurillio Araujo Oliveira Fundamentos de TI

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

Download "Faculdade de Tecnologia Senac Goiás Aluno: Maurillio Araujo Oliveira Fundamentos de TI"

Transcrição

1 Faculdade de Tecnologia Senac Goiás Aluno: Maurillio Araujo Oliveira Fundamentos de TI HTML Conceito GERAL Goiânia, 20 de Maio de 2015.

2

3 A História Do HTML Em 1980 Tim Berners-Lee propôs um projeto baseado no conceito de hipertexto denominado ENQUIRE. Este projeto foi inicialmente todo desenvolvido em linguagem Pascal. Em 1989 Tim Berners-Lee com a ajuda de um estudante do CERN chamado Robert Cailliau conseguiu implementar a primeira comunicação bem sucedida entre um cliente HTTP e um servidor através da internet. Surgia então a World Wide Web. Porém o protocolo HTTP só foi implementado em fevereiro de A sigla HTML significa HyperText Markup Language em português, linguagem de marcação de hipertexto. A primeira versão do HTML foi baseada na linguagem SGML. O SGML era utilizado para a estruturação de documentos e foi dele que o HTML herdou diversas tags tais como: título <h1> ao <h6>, cabeçalho <head> e parágrafo <p>. A maior diferença entre essas duas linguagens de marcação é que o HTML implementava a tag <a> com o atributo href, permitindo assim a ligação (links) de uma página a outra. Esse conceito de interligação entre documentos é a base do funcionamento de toda Web. O HTML surgiu em 1990 e até o seu quinto ano de vida sofreu várias revisões e alterações na sua especificação. Nesta época, quem controlava o padrão era o CERN e a IETF. Após 1995, o padrão passou a ser regularizado pela W3C, entidade que regula os padrões Web e que será detalhada com maior profundidade posteriormente. Em 1993, Dave Raggett propôs uma evolução do padrão HTML, denominada HTML+. Entretanto tal proposta nunca foi implementada. O verdadeiro sucessor do HTML foi o HTML 2.0, o qual foi apresentado na primeira conferência mundial sobre Web, a World Wide Web Conference. Essa versão do HTML pode ser vista apenas como uma correção da versão anterior, ou seja, apenas formalizava as características do HTML que já estavam em uso. Depois, Dave Raggett escreveu o HTML 3.0 baseado em seu mais recente rascunho do HTML+. Entretanto, mais uma vez, a versão do HTML não foi implementada. Esta especificação foi superada pela versão 3.2, a qual novamente foi uma correção e

4 providenciou total compatibilidade com a versão 2. O HTML 3.2 implementou características tais como tabelas, applets e texto flutuante ao redor de imagens. Posteriormente, Raggest foi co-author do HTML 4 e ajudou com o desenvolvimento das linguagens como XHTML, XForms, MathML e além de outras especificações mais modernas da W3C. Em dezembro de 1999 o HTML 4.01 foi publicado trazendo como principal premissa a compatibilidade com as suas versões anteriores através de 3 implementações: Scrict (estrita) implementação na qual fica proibida a utilização de elementos obsoletos da linguagem; Transitional (transitória) implementação na qual os elementos obsoletos são permitidos; Frameset implementação direcionada para site que usam frames. W3C World Wide Web Consortium Em agosto de 1994 foi fundada a W3C, um consórcio formado por instituições comerciais e educacionais, com o objetivo de definir padrões para as respectivas áreas relacionadas à Web. Em dezembro de 1997 a W3C publicou o HTML 4 e após dois meses publicou o XML 1. A W3C reformulou o grupo responsável pelo HTML para criar uma suíte de tags XML. O primeiro passo foi dado em dezembro de 1998 quando o grupo reescreveu o HTML em XML sem adicionar elementos ou atributos novos. Essa especificação foi chamada de XHTML 1. O objetivo seguinte da W3C foi a reestruturação dos formulários Web. Em agosto de 1999 o mesmo grupo responsável pelo HTML publicou o primeiro rascunho da extensão dos formulários para XHTML. Alguns meses depois, essa extensão dos formulários para XHTML foi rebatizada de XForms. Foi criado um grupo específico, responsável pelo XForms. Esse grupo trabalhou em paralelo com o grupo de desenvolvimento do HTML com a finalidade de publicar a primeira versão do XForms em outubro de Enquanto isso, com a transição do XML completa, os membros do grupo do

5 HTML criaram a nova geração do HTML. Em maio de 2001 eles publicaram a primeira versão do XHTML 1.1. Em julho de 2004 a W3C organizou um workshop chamado Workshop on Web Applications and Compound Documents. Nesse workshop estavam presentes membros da W3C e companhias desenvolvedoras de navegadores como a fundação Mozilla e a Opera. Neste workshop foi apresentado uma visão do futuro da web com uma evolução do padrão HTML 4 incluindo novas características para aplicações modernas. No workshop a W3C deixou claro que não seriam desenvolvidas novas tecnologias de extensões do HTML e CSS que não fossem criadas pelo atual grupo de trabalho da W3C. Diante desse impasse, o grupo que desenvolvia o HTML e os formulários HTML tinha duas escolhas: ou se uniam à W3C, ou se separavam. Dessa forma, em julho de 2004 surgiu o WHATWG. WHATWG Web Hypertext Application Technology Working Group O WHATWG é o grupo de trabalho tecnológico de aplicações de hipertexto para Web. Trata-se de um grupo livre, não oficial e de colaboração dos desenvolvedores de navegadores e de seus interessados. O WHATWG desenvolve especificações baseadas no HTML e em tecnologias relacionadas para facilitar o desenvolvimento e compatibilidade das aplicações web, com a intenção de submeter os resultados para um padrão organizacional. Essas submissões podem então fazer parte do padrão formal do HTML. O WHATWG trabalhou por muito tempo somente por e alcançaram seu maior feito com os formulários HTML 4 que passou a incorporar tecnologias dos autores do grupo, sem quebrar o padrão de compatibilidade com o conteúdo existente. O grupo foi criado para assegurar que o futuro desenvolvimento destas especificações fosse completamente livre, através de arquivos públicos e uma lista de discussão aberta. Por muitos anos o W3C e o WHATWG ignoraram um ao outro. Enquanto o WHATWG focava nos formulários e nas novas características no HTML, o W3C estava ocupado com a versão 2.0 do XHTML. Mas em outubro de 2006, ficou claro que a WHATWG estava vivendo um momento mais sério, enquanto o XHTML 2.0 estava sendo

6 lançado como rascunho e não estava sendo implementado pela maioria dos navegadores. Em outubro de 2006, Tim Berners-Lee, o fundador da W3C, anunciou que a W3C deveria trabalhar em conjunto com a WHATWG. O primeiro passo do trabalho em conjunto foi renomear o Web Application 1.0 para HTML5. O Que é HTML??? HTML é a abreviatura de Hyper Text Markup Language, que pode ser traduzida como Linguagem de Hipertexto Baseada em Códigos. Define um conjunto de estilos como cabeçalhos, parágrafos, listas e tabelas que compões uma página da W e serve para indicarmos formatações para textos, inserir imagens e ligações de hipertexto. Tags ou Diretivas. A linguagem HTML possui algumas regras de sintaxe que devemos seguir para obter o resultado desejado. Todo documento HTML apresenta elementos entre parênteses angulares correspondente etiqueta de fechamento (<ETIQUETA> </ETIQUETA>). Isto é de texto, apenas inserem alguma coisa no documento As etiquetas serão escritas em(<elementos>), esses elementos são as etiquetas da linguagem HTML, que são os comandos de formatação da linguagem. As etiquetas, tags ou diretivas, tem sua nescessário porque as tags servem para definir a formatação de uma porção de texto, e assim marca-se onde começa e onde termina o texto com formatação especificada por ela. Alguns tags são chamados "vazios" ou unidirecionais, pois não marcam uma região maiúsculas apenas para facilitar a visualização, pois você pode misturar ou colocar tudo minúsculo que é igualmente aceito pelos Browsers. Como Editar as Páginas em HTML. As páginas desenvolvidas em HTML são arquivos simples e podem ser lidos e confeccionados em qualquer editor de texto (Microsoft Word, Word Pad, Edit do DOS, NotePad). Depois de editar os códigos e textos é só gravar o arquivo mudando a extenção (ex.:.txt) para.html ou.htm.

7 A diferença entre.htm e.html é que o.html é mais novo e são comandos melhores aceitos e.htm é como se iniciou o html mais não mudou praticamente nada. Tanto faz você salvar em qualquer uma das duas. Então, basicamente, os arquivos HTML possuem dois componentes: 1. O texto propriamente dito; 2. As tags que indicarão os elementos de página: estrutura; formatação; vínculos a outras páginas. Obs.: Para exibir o resultado do arquivo HTML não é nescessário estar conectado à rede, basta acessar um Browser (Internet Explorer, Netscape, etc) e utiliza-lo para abrir o arquivo. Formatação de Textos Em uma página HTML podem existir textos, imagens, itens multimídia e hipertexto. Para isso o documento HTML apresenta a seguinte estrutura: <TITLE>Titulo do documento</title> texto, imagem, links, etc Como o HTML não é uma linguagem de programação, você nunca será avisado de erros cometidos na edição do seu documento. Um simples esquecimento de uma barra pode mudar toda sua página. Seções <HTML> e </HTML>: Identifica o documento como sendo HTML. <HEAD> e </HEAD>: É o cabechalho e contém as informações sobre o documento.

8 <TITLE> e </TITLE>: Define um título que é mostrado no alto da janela do Browser. Todo documento W deve ter um título. Esse título é referenciado em busca pela rede, dando uma identidade ao documento, facilitando assim, a classificação em catalogos de busca. Tudo que estiver na seção BODY será mostrado na janela do browser e, consequentemente, apresentado ao leitor. Esta seção pode conter cabeçalhos, parágrafor, listas, tabelas, imagens e links para outros documentos. Dentro da tag <BODY> podemos usar as seguintes opções que não são obrigatórias e caso não existam assumem o valor default: BGCOLOR - especifica uma cor de fundo para a página; BACKGROUND - especifica a imagem (.gif ou.jpg) usada no fundo da tela; BGPROPERTIES = FIXED - fixa uma imagem no fundo da tela; TEXT - define uma cor para o texto; LINK - define uma cor para os links; VLINK - define uma cor para os links já visitados; ALINK - define uma cor para o link na hora que for ativado. Por exemplo: <BODY BACKGROUND=nome_imagem.extencao BGCOLOR=nome_cor TEXT=nome_cor LINK=nome_cor VLINK=nome_cor ALINK=nome_cor> Ou então, podemos usar o código equivalente da cor em hexadecimal: <BODY BACKGROUND=nome_imagem.extencao BGCOLOR=#codigo_cor TEXT=#codigo_cor LINK=#codigo_cor VLINK=#codigo_cor ALINK=#codigo_cor> Não importa a seqüência dos atributos (BGCOLOR, LINK, VLINK...) e sempre se coloca um espaço entre os atributos. Formatação de Textos Podemos formatar o texto mudando a fonte do texto, a cor, colocando em itálico, negrito, sublinhado, fonte espaçada, subscrito, etc. Para todas elas são nescessário delimitar o início e o fim do texto a ser formatado.

9 <FONT COLOR=nome_cor> texto </FONT>: Muda a cor do texto que estiver entre as tags início e fim. <FONT FACE=nome_letra> texto </FONT>: Muda o tipo de letra do texto que estiver entre as tags início e fim. <FONT SIZE=tamanho> texto </FONT> ou <Hn> texto </Hn>: Muda o tamanho da letra do texto que estiver entre as tags início e fim. O n da tag <Hn> pode variar de 1 (o maior) até 6 (o menor). negrito. <B> texto </B>: Coloca o texto que estiver entre as tags início e fim em <I> texto </I>: Coloca o texto que estiver entre as tags início e fim em itálico. <T> texto </T>: Coloca o texto que estiver entre as tags início e fim com fonte monoespaçada. Sublinha o texto que estiver entre as tags início e fim. (Não é aconselhavel colocar o texto sublinhado, pois os links já são sublinhados e pode confundir). sobscrito. subscrito. <SUP> texto </SUP>: Coloca o texto que estiver entre as tags início e fim em <SUB> texto </SUB>: Coloca o texto que estiver entre as tags início e fim em <S> texto </S>: Taxa o texto que estiver entre as tags início e fim. Ainda falando da disposição de texto na tela, se desejarmos mudar de linha não basta usar o ENTER como em um editor de textos, existem tags específicas para isso, além de outros recursos para alocar um texto na página. São eles: <CENTER> texto </CENTER>: Centraliza o texto em relação à página. <BR>: Quebra de linha, inicia o texto seguinte na linha logo abaixo.

10 Faz com que o texto não tenha quebras de linhas e crie uma barra de rolagem horizontal para poder ver o texto inteiro. Coloca quebra de linhas no comando <NOBR>.a quebra de linha vai ser onde você colocou este comando. parágrafo. <P>: Força o fim de um parágrafo, ou seja, pula uma linha antes de iniciar outro Exite também um comando de preformatação (<PRE> texto a ser preformatado</pre>), ele é usado para que o browser aceite seus espaços grandes de uma letra para outra e o ENTER, Se você colocar a tag <PRE> do jeito que você digitar o texto será exatamente como aparecerá no Browser. Linhas horizontais são formas de deixar sua página com mais facilidade de encontrar coisas e também mais apresentável. Essas linhas são boas saídas para textos grandes em que os assuntos são diversos. <HR>: Inclui uma linah horizontal no texto, separando-o em blocos. Nesta tag podemos especificar: WIDTH - nº % do comprimento ou o nº em pixel - Ex.: <HR WIDTH=50%> ou <HR WIDTH=100>; SIZE - espessura do traço - Ex.: <HR SIZE=5>. Exemplo contendo os tags de formatação de texto: <TITLE>Exemplo das tags</title> <BODY BGCOLOR=White TEXT=Black> <CENTER>E X E M P L O</CENTER> <H6>Tamanho6</H6> <BR> Texto1 - <FONT COLOR=Blue>Cor Azul</FONT> <BR> Texto2 - <FONT FACE="Times New Roman">Fonte Times New Roman</FONT> <BR> Texto3 - <B>Negrito</B> <BR>

11 Texto4 - <I>Itálico</I> <BR> Texto5 - <T>Monoespaçado</T> <BR> Texto6 - <U>Sublinhado</U> <BR> Texto7 - <SUP>Sobscrito</SUP> <BR> Texto8 - <SUB>Subscrito</SUB> <BR> Texto9 - <S>Taxado</S> <P> Caracteres Especiais Alguns caracteres especiais são tratados de uma maneira diferente na Web, pelo fato de que nem todos os computadores ligados à Internet estão configurados para visualizar os acentos. Existe uma codificação que permite a qualquer equipamento interpretar os códigos e exibir na tela o caracter desejado. Os códigos funcionam da seguinte maneira: Primeiro colocamos o caracter &; Em seguida a letra que deverá ser acentuada; Coloque a acentuação desejada; Acrescente o ";" (ponto e virgula). Relacionamos abaixo alguns dos caracteres e acentos da HTML: Acentos e Caracteres Código Agudo &_acute; Grave &_grave; Circunflexo &_circ; Til &_tilde; Trema &_uml; Cedilha &_cedil; & & < < > > " " (espaço em branco) Âncoras e Links Âncoras (Links) Para inserir um link, ou seja, uma ligação de uma região do texto (ou imagem) a um outro documento é nescessário usar o tag <A>, da seguinte forma: <A HREF="arq_dest"> âncora </A> onde arq_dest é o URL do documento de destino, âncora é o texto ou imagem que servirá de ligação hipertexto do documento sendo apresentado para o documento de destino. Existem 3 caminhos para se referir um documento de destino: 1. Caminho relativo - Pode ser usado sempre que quiser fazer referência a um documento que esteja no mesmo servidor do documento atual. <A HREF="apresentacaodalicao.html"></A>. 2. Caminho Absoluto - Quando se quer fazer

12 referência a um documento que esteja em outro servidor. <A HREF="http://w.terravista.pt/ancora/30"></A>. 3. Ligação com trechos da mesma página - Desvia para o local do trecho desejado na mesma página. Colocarei um exemplo, como se você quisesse voltar para o início dessa página: o Coloque o nome em algum local que você quer que o link se dirija. Como esse comando colocado no início da página: <A NAME="inicio"></A>. o Agora faça o link para essa âncora, como a seguir: <A HREF="#inicio"></A>. NOTA: Para você colocar o endereço de seu na sua página você tem que colocar da seguinte forma: <A HREF="mailto:seu_ "> seu_ </A> Imagens e Animações Imagens Com relação de uso de imagens na Web temos que estas se dividem em duas categorias gerais que são as imagens in-line e as externas. As imagens in-line são apresentadas na página junto com os vínculos e com o texto e são carregadas automaticamente. Já as imagens externas são carregadas somente por demanda (download), através de vínculos. Independente de sua categoria, as imagens podem se apresentar em dois formatos:.gif e.jpg. GIF - Este padrão é mais conhecido e mais compatível com os navegadores existentes. Recomendado para ícones com menos de 256 cores, cores lisas, puras, preto e branco. Sua qualidade é bem superior ao formato JPG, pois o tamanho do arquivo é maior.suas imagens podem ser transparentizadas. JPG ou JPEG - Foi o padrão proposto pelo comitê ISO e é geralmente usado para imagens mais complexas (fotográficas). Permite alta taxa de compressão, por isso gera um arquivo menor, o que implica numa perda de informação e qualidade. O elemento IMG, ou seja, a tag <IMG>, insere as imagens que serão

13 apresentadas junto ao texto. Um atributo SRC, que é o mais importante dessa tag, deve estar presente da seguinte forma: Se a imagem estiver na mesma pasta que a sua página então a tag seria assim: <IMG SRC="nome_imagem.extenção"> Se a imagem estiver em uma pasta diferente da que sua página está, então você tem que colocar o endereço desta pasta e depois o arquivo que contém a sua imagem. Digamos que sua página esta na pasta "pagina" e a imagem (img.gif) que você vai colocar esta na pasta "imagens" que esta dentro da pasta "pagina", ou seja, essa imagem está dentro da pasta "\imagens\img.gif". Então a tag seria: <IMG SRC="imagens\img.gif"> DICA: Se você quiser colocar uma imagem que está em outra página, basta clicar com o botão direito do mouse em cima da imagem e seleciona o opção propriedades e copiar a endereço URL e colocar no atributo SRC. Juntamente com a tag <IMG> podemos usar alguns parâmetros como: BORDER - para determinar a moldura da imagem; WIDTH - para determinar a largura da imagem; HEIGHT - para determinar a altura da imagem; ALIGN - para alinhar as imagens de várias formas: LEFT - alinha a imagem a esquerda do texto; RIGHT - alinha a imagem a direita do texto; TOP - alinha o texto com o topo da imagem; MIDDLE - alinha o texto com o meio da imagem; BOTTOM - alinah o texto com a parte inferior da imagem. escreveu. ALT - quando a pessoa deixar o mouse sobre a imagem aparecerá o que você Por exemplo: <IMG ALT="explicação da imagem" BORDER=4 WIDTH=50 HEIGHT=20 ALIGN=Left> Uma imagem pode funcionar como vínculo, incluindo-se a tag <IMG> entre as

14 partes de abertura e fechamento de uma tag de vínculo <A>. Assim temos: <A HREF="arq.html"><IMG SCR="img.gif"></A> Para se projetar uma página deve-se procurar um equilíbrio com relação a quantidade de imagens e cores e a necessidade de transmissão de informações. O uso excessivo de imagens, imagens grandes, poinéis de fundo tornará a página mais lenta ao ser carregada e o que, em muitos casos, levará os usuários que tiverem uma conexão lenta de rede a desistirem de carregar esta página. Para que isso não aconteça, verifique a nexessidade do uso dessa ou daquela imagem, mantenha as imagens pequenas reutilize-as sempre que possível. Animações Com relação ao uso de mídias em HTML é necessário a utilização de vínculos correspondente ao caminho URL do arquivo externo que se deseja inserir em sua página.<a REF="arq_ext">Arquivo</A>. Neste contexto entram os arquivos de som e vídeo. Som O primeiro caso, o som, é utilizado para transmitir informações que não sejam na forma de ilustração ou palavras e até mesmo para desejar boas vindas ao usuário que acaba de carregar aquela página. Esses arquivos geralmente possuem extenção.waw e.mid. Agora vamos aos comandos: <EMBED> <BGSOUND> Como o comando <EMBED> não é aceito pelo IE 3.0 e alguns outros browsers desconhecidos, você terá que colocar o comando duas vezes, um com o <EMBED> para o Netscape e <BGSOUND> para outros Browsers. Esta tags pode conter os seguintes parâmetros: SRC - define o caminho para o arquivo de som; AUTOSTART - define que ao ser carregado ele já deve ser tocado ou que o visitante deve clicar no play para tocar, TRUE para tocar automaticamente e FALSE para quando o visitante apertar play.

15 AUTOLOAD - define que ele deve ser automaticamente começado a baixar o arquivo de som quando entrar na página, ou o visitante deve apertar o play para baixar o arquivo, TRUE para baixar automaticamente e FALSE para quando o visitante apertar play. LOOP - define o número de vez que a música será tocada, TRUE para tocar infinitas vezes. HIDDEN - define se você quer que o controle ficam sumidos ou não, TRUE para deixar invisível e caso queira os controles não precisa colocar FALSE. WIDHT e HIGHT define o tamanho dos controles. Então os comandos de sua página ficariam assim: <EMBED SCR="musica.mid" AUTOSTART="true" AUTOLOAD="true" LOOP="true" HIDDEN="true"> <BGSOUND SCR="musica.mid" AUTOSTART="true" AUTOLOAD="true" LOOP="true" HIDDEN="true"> Vídeo utilizar informações sobre o formato e o tamanho do arquivo de mídia externo A tag. Já os arquivos de vídeos fornecem informações que as imagens estáticas não são capazes de transmitir. Suas extensões são geralmente.mpg,.mov,.avi. É interessante <IMG> possui atributos que permitem a execução in-line de arquivos de som e vídeo. O atributo DYNSRC (para IE) inclui arquivos de vídeo: <IMG DYNSRC="arquivo.avi SRC="arquivo.gif ALT="[a arquivo]">. Letreiros Em HTML é possível a criação de letriros, ou seja, uma linha rolável que se moverá de um lado ao outro da página da Web. Para que este efeito seja possível basta alocar o texto que se deseja transformar em letreiro entre as tags de abertura e fechamento <MARQUEE> texto </MARQUEE>. Esta tag possui vários atributos: Atributo Utilização BEHAVIOR

16 1. SCROOL 2. SLIPE 3. ALTERNATE 1. Rola de um lado ao outro da tela e até desaparecer. 2. Rola o letreiro da direita para esquerda e para. 3. Faz o letreiro saltar de um lado da tela para outro. DIRECTION (somente se o letreiro for SCROOL) 1. Move o letreiro da esquerda para direita. 2. Move o letreiro da direita para 1. LEFT 2. RIGHT esquerda. LOOP Define o número de vezes que o letreiro ralará na tela. SCROLLAMOUNT Define o número de pixel para locação do letreiro. SCROLLDELAY Define o tempo da animação em milessegundos. BGCOLOR Define a cor de fundo da caixa que delimita o letreiro. HEIGHT Define a altura da caixa que delimita o letreiro. WIDTH Define a largura da caixa que delimita o letreiro. HSPACE Define o espaço entre as bordas esquerda e direita e o texto. VSPACE Define o espaço entre as bordas inferior e superior e o texto. Define o alinhamento do letreiro com relação ao texto. Listas As lista são utilizadas para organizar o texto quando necessário uma relação de itens ordenados ou não. A HTML define 3 tipos de listas: lista <OL>(inicializa uma lista) </OL>(finaliza uma lista) e cada item desta Listas Ordenadas ou Numeradas - essas listas são delimitadas pelas tags começa com a tag <LI>(sem o fechamento). São aquelas que possui um número. O atributo TYPE define o tipo de numeração da lista. Assim, A (letras maiúsculas), a (letras minúsculas), I

17 (algarismos romanos) e 1 (números arábicos). Exemplo: Código Saída no Browser <LI>item 2 1. item 1 2. item 2 marcadores ou outros símbolos. Estas listas são indicadas pelas tags </UL> Lista Não-Ordenadas ou com Marcadores - são aquelas que os itens são </UL>. Os elementos dessa lista também são separados por </LI>. Nesta lista o atributo TYPE define o tipo de marcadores de cada uma delas. Assim, disk (marcador preenchido), square (quadrado), circle (marcador vazado). Exemplo: Código Saída no Browser <LI>item 2 o item 1 o item 2 <DL> </DL>. As tags <DT> e <D>, unidirecionadas, respectivamente, indicam listas de Definição ou de Glosários - são aquelas em que cada item tem dois componetes, um termo e uma definição. Estas listas são indicadas pelas tags o termo a ser definido e a definição desse mesmo termo. Exemplo: Código Saída no Browser <D>item 2 <D>item 3 item 1 item 2 item 3 Tabelas As tabelas são usadas para organizar o conteúdo de uma página, ou seja, imagens em linhas e colunas. Com tag <TABLE> conteúdo da tabela </TABLE>

18 indicamos que se trata de uma tabela. <CAPTION> </CAPTION> - para acrescentar um título na tabela. <TR> </TR> - para informar onde começa (<TR>) e onde termina (</TR>) cada linha da tabela. <TH> </TH> ou <TD>... </TD> - para identificar o início e o fim de cada célula. A diferença entre <TH> e <TD> é que o conteudo da célula da tag <TH> é escrita em negrito e centralizada. Agora já podemos fazer uma tabela com estes comandos, que ficaria assim: Tabela célula 1 célula 2 célula 3 célula 4 Os comandos da tabela acima seria assim: <TABLE> <CAPTION> Tabela </CAPTION> <TH> célula 1 </TH> <TH> célula 2 </TH> <TD> célula 3 </TD> <TD> célula 4 </TD> Atributos para a tag <TABLE>: BORDER - define a espessura da borda; WIDTH - define a largura da tabela, pode ser definida em % ou valor absoluto (com números); ALIGN - alinhamento horizontal (Right, Center, Left); BGCOLOR - para alterar a cor de fundo; BACKGROUND - permite colocar uma imagem no fundo; CELLSPACING - define o espaço existente entre as células da tabela;

19 conteúdo; CELLPADDING - define o espaço existente entre as bordas da célula e seu BORDERCOLOR - usado para alterar a cor da borda. Atributos para as tags <TD> e <TH>: COLSPAN - especifica quantas colunas da tabela a célula vai ocupar; ROWSPAN - especifica quantas linhas da tabela a célula vai ocupar; WIDTH - define a largura de cada célula, pode ser definida em % ou valor absoluto (com números); HEIGHT - define a altura de cada célula, pode ser definida em % ou valor absoluto (com números); ALIGN - alinhamento horizontal (Right, Center, Left); VALIGN - alinhamento vertical (Top, Middle, Bottom); BGCOLOR - alterar a cor de fundo desse elemento. Uma tabela usando alguns elementos destes ficaria assim: célula 1 célula 2 célula 3 célula 4 Códigos da tabela acima; <TABLE BORDER=1 BORDERCOLOR=#fc0 BGCOLOR=#6f CELLSPACING=2 CELLPADDING=10 ALIGN=center> <TR> Frames Os frames permitem a divisão da tela em diferentes regiões onde pode-se apresentar diferentes páginas. Isso possibilita, por exemplo, que se determine a área da tela para ser a página principal e outras áreas para menus ou links. A tag <FRAMESET> cria um documento de definição de frames, que é onde será criado o layout de cada frame e indicado o nome dos documentos que serão

20 apresentados. Essa tag substitui a tag <BODY> quando for utilizada. Deve-se definir um dos dois atributos a tag <FRAMESET> para se ter o layout desejado: COLS e ROWS. Com o atributo COLS indicamos quantas colunas teremos na página - <FRAMESETCOLS="lagura_coluna, largura_coluna, *"> (a largura podde ser definida em porcentagem (%) ou em valor absoluto) - Assim, divide-se quantos frames foram indicados e pelo * (asterístico), definimos que o frame ocupará todo o espaço restante da tela. O atributo ROWS define quantas linhas a frame será dividida - <FRAMESET ROWS="50%, 50%"> - definimos que a página será dividida em 2 frames horizontais. O atributo SRC indica qual página será chamada em cada frame criado e o atributo NAME atribui o nome a esse frame. Existem ainda outros atributos que estão relacionados abaixo: Atributos Utilização MARGINWIDTH Determina as margens esquerda e direita do frame. MARGINHIGHT Determina as margens superior e inferior do frame. SCROLLING = YES, NO ou AUTO Configura a barra de rolagem, podendo aparecer ou não. Pode ainda, aparecer somente quando o texto ultrapassar o tamanho da célula (AUTO). NORESIZE Impede que as barras que delimitam os frames sejam redimensionados. O código de um documento HTML contendo frames ficaria assim: <TITLE> Título da Página </TITLE> <FRAME SCR="página que ficará no 1ª frame" NAME="nome do 1ª frame"> <FRAME SCR="página que ficará no 2ª frame" NAME="nome do 2ª frame">

21 A tag <NOFRAME> </NOFRAME> coloca o código que substituirá a página caso o que estiver entre tag de abertura e fechamento <NOFRAME> </NOFRAME> será Browser não dê o suporte ao recurso de frames. Caso o Browser entenda frames, tudo ignorado e o frame funcionará conforme programado. Exemplo: <TITLE> Título da Página </TITLE> <FRAME SCR="página que ficará no 1ª frame" NAME="nome do 1ª frame"> <FRAME SCR="página que ficará no 2ª frame" NAME="nome do 2ª frame"> Aqui fica sua página sem frames para quem não consegue ver sua frames. Além dos atributos já citados, temos também o TARGET. Quando iniciamos um frame, geralmente colocamos um nome para que possa ser identificado. Para acessar esse frame que colocamos nome, usamos TARGET, que define onde a página deverá ser carregada. O atributo tem quatro valores que são: TARGET="nome do frame" - carrega no frame especificado; TARGET="_top" - limpa a tela e abre o arquivo que esta sendo chamado; TARGET="_blank" - abre uma nova janela para exibir o documento; TARGET="_self" - carrega o documento no mesmo frame que o chamou. Exemplos: <A HREF="http://w.terravista.pt/ancora/30" TARGET="menuhtml"> <A HREF="apresentacaodalicao.html" TARGET="_top"> Formulários Os formulários em uma página WEB permitem coletar informações das pessoas que visitam a página. através de algumas diretivas especiais podemos definir as literais e o formato dos objetos de resposta. Também definimos que será tomada assim que o formulário for preenchido.

22 Para criar um formulário faz-se necessário o uso da tag <FORM> onde serão incluídos os elementos desse formulário. Essa tag contém dois atributos: METHOD e ACTION. 1) O atributo METHOD pode ter o valor GET ou POST, que determina a maneira como os dados do formulário serão enviados para processamento. A diferença entre os dois é a forma que cada um "empacota" esses dados. 2) O atributo ACTION é um ponteiro que indica o script que processa as informações que se obtém apartir do formulário. Deve conter a URL completa do programa que irá receber dados do formulário. Por exemplo Também tem o atributo TARGET que é opcional e só é necessário quando se utiliza frames, ele indica onde aparecerá a página de confirmação do formulário. A tag <INPUT> indica um elemento de formulário simples e possui dois atributos que são TYPE e NAME. 1) As opções que o atributo TYPE oferece são: rádio; TEXT - para campos de entrada de texto; Exemplo: RADIO - para botões de Exemplo: CHECKBOX - para caixas de verificação; Exemplo: PASSWORD - funciona da mesma forma que o atributo TEXT, exceto que todas as letras digitadas aparecem como um asterístico (*). Exemplo: 2) O atributo NAME, na maioria dos casos, define o nome do campo. 3) O atributo VALUE (valor), neste caso, pode ser usado se você quiser, ele define um valor prévio para cada campo, de tal forma que quando a página seja carregada este valor já esteja preenchido podendo ser alterado pelo visitante. 4) O atributo SIZE define o tamanho do campo e é definido no número de caracteres. Se você quiser um campo de 40 caracteres, você deverá definir como SIZE=40. Mas note que esse valor não limita o campo em 40 caracteres, ele define o tamanho que ele será mostrado na página. 5) O atributo MAXLENGHT (comprimento máximo) define o número máximo de caracteres que podem ser digitados nos campos. 6) O atributo CHECKED é usado para marcar as opções RADIO e CHECKBOX. Lembrando que a

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

Formatação de Textos

Formatação de Textos RESUMO DE HTML O Que é HTML??? HTML é a abreviatura de Hyper Text Markup Language, que pode ser traduzida como Linguagem de Hipertexto Baseada em Códigos. Define um conjunto de estilos como cabeçalhos,

Leia mais

Programação web Prof. Wladimir

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

Leia mais

HTML -- Criação de Home Page

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

Leia mais

PROGRAMAÇÃO WEB DO LADO DO CLIENTE

PROGRAMAÇÃO WEB DO LADO DO CLIENTE PROGRAMAÇÃO WEB DO LADO DO CLIENTE FORMULÁRIO Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets,

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

> 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

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

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário Introdução HyperText Markup Language HTML Formulário Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ O usuário interage com os serviços

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

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros.

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. Formulários Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. O formulário depende de outros programas no servidor, para receber e

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

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

DESENVOLVIMENTO WEB I - 7122

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

Leia mais

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

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

Leia mais

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

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

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

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

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

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

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

MÓDULO 1 - xhtml Básico

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

Leia mais

OPERAÇÃO DE SOFTWARE E APLICATIVOS

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

Leia mais

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

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

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web RNP REDE NACIONAL DE PESQUISA Centro Regional de Brasília CR/DF ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web Parte III - Hypertext

Leia mais

Desenvolvedor Web Docente André Luiz Silva de Moraes

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

Leia mais

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

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

Leia mais

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

Os componentes de um formulário são: Form, Input, Select e AreaText

Os componentes de um formulário são: Form, Input, Select e AreaText HTML Formulário O elemento FORM, da HTML, é o responsável por prover documentos interativos no ambiente WWW de forma que uma pagina web exibida a um usuário possa submeter um conjunto de dados, informados

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB

INTRODUÇÃO AO DESENVOLVIMENTO WEB INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que

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

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

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

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

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

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

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

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

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

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

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Formulários HTML Aula 07: Formulários e Frames HTML Os formulários HTML são utilizados, geralmente, como entradas de dados prépreenchimento,

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

1. Como criar uma conta

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

Leia mais

Desenvolvimento 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

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

Programação para Internet I

Programação para Internet I Programação para Internet I Aulas 09 e 10 Fernando F. Costa nando@fimes.edu.br Formulários O formulário representa o modo mais importante de interatividade que a linguagem HTML oferece. Um formulário pode

Leia mais

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:

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

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 Internet Internet é o conjunto de diversas redes de computadores que se comunicam entre si Internet não é sinônimo de WWW (World Wide

Leia mais

Introdução. História. Como funciona

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

Leia mais

HTML: Listas, Tabelas e Formulários CST Sistemas para Internet

HTML: Listas, Tabelas e Formulários CST Sistemas para Internet HTML: Listas, Tabelas e Formulários CST Sistemas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) Listas Listas de itens são bastante

Leia mais

Comandos Básicos de HTML

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ê

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

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

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web;

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; HTML Introdução Introdução ao HTML HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; É uma linguagem de hipertexto; Permite escrever texto de forma estruturada, que está

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

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

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

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

Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes

Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes Desenvolvimento Web XHTML Formulários Prof. Bruno E. G. Gomes 2014 Introdução Um recurso bastante utilizado no desenvolvimento Web é o envio de dados de uma página para o servidor quando fornecemos informações,

Leia mais

Programação Web Prof. Wladimir

Programação Web Prof. Wladimir Programação Web Prof. Wladimir HTML - Formulários @wre2008 1 Sumário Formulários HTML @wre2008 2 Formulários: Muitos elementos de um formulário html são definidos pela tag . Cada tipo de elemento

Leia mais

Mais sobre uso de formulários Site sem Ajax

Mais sobre uso de formulários Site sem Ajax Mais sobre uso de formulários Site sem Ajax Página com busca padrão 1 Página com o resultado da busca carregada no local da anterior (o formulário está vazio) Site com Ajax 2 Site usando Ajax para preencher

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

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

0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento.

0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento. IFES - Campus Cachoeiro de Itapemirim-ES Curso Técnico em Informática Disciplina: Programação Web Professor: Flávio Izo e Rafael Vargas Data: 07/04/2015 Aluno: GABARITO Valor: 12,5 Conteúdo: HTML + Formulários

Leia mais

COMO FUNCIONA UM FORMULÁRIO

COMO FUNCIONA UM FORMULÁRIO FORMULÁRIOS Constitui-se numa das formas de a máquina cliente enviar informações para que um programa no servidor receba estes dados, processe-os e devolva uma resposta ao usuário, por meio do navegador,

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

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário Sumário FORMULÁRIO EM HTML... 2 FORM... 2 ACTION... 2 METHOD... 2 INPUT... 2 INPUT TYPE TEXT... 2 INPUT TYPE PASSWORD... 2 CHECKBOX - Múltipla escolha... 4 RADIO - Escolha única... 4 Botões de açã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

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

Aula 4: Cores e Multimídia

Aula 4: Cores e Multimídia Aula 4: Cores e Multimídia Nesta quarta aula vamos entender os conceitos de cores na WEB. Veremos como definir a cor da página e dos textos. Aprenderemos a incluir recursos multimídia de som e vídeo em

Leia mais

Hospedagem de site. Prof. Marciano dos Santos Dionizio

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

Leia mais

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

Afinal o que é HTML?

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

Leia mais

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

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

APOSTILA DE FRONTPAGE 2000

APOSTILA DE FRONTPAGE 2000 APOSTILA DE FRONTPAGE 2000 Pagina 1 de 14 Introdução A cada dia verificamos que a informação é uma ferramenta de extrema necessidade em qualquer negócio. Sabendo disto, diversas empresas investem em tecnologias

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

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

OURO MODERNO www.ouromoderno.com.br. Web Designer APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo)

OURO MODERNO www.ouromoderno.com.br. Web Designer APOSTILA DE EXEMPLO. (Esta é só uma reprodução parcial do conteúdo) Web Designer APOSTILA DE EXEMPLO (Esta é só uma reprodução parcial do conteúdo) 1 Índice Aula 1 HTML... 3 Tags... 4 Estrutura de uma Página HTML... 4 Cores e fontes... 7 Código Hexadecimal de uma cor...

Leia mais

Tecnologia WEB I. Prof. Erwin Alexander Uhlmann. Dos princípios do HTML, estruturação com CSS e automação com Javascript

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

Leia mais

Linux. Educacional. Tutorial Buzzword

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

Leia mais

Web Design Aula 02: HTML

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

Leia mais

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

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

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

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

WWW - World Wide Web

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

Leia mais

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

LABORATÓRIO DE INTERNET FRONTPAGE

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

Leia mais

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

O código acima descreve o formulário com uma caixa de texto e dois botões

O código acima descreve o formulário com uma caixa de texto e dois botões Formulários Formulários permitem que os usuários interajam com um servidor Web passando informações. Assim, através da Web, se pode ler e gravar informações em Banco de Dados, gerando enormes possibilidades

Leia mais

Web Design Aula 09: Formulários

Web Design Aula 09: Formulários Web Design Aula 09: Formulários Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Roteiro Tag ... Tag Tag ... Rádio Checkbox Atributo name Form Um

Leia mais

Manual do Usuário. Sumário

Manual do Usuário. Sumário Manual do Usuário Sumário Login... 2 Tela inicial (Dashboard)... 3 Modelo Operacional... 4 Agrupamentos de Menus... 6 Conteúdos / Notícias / Eventos... 9 Capas... 14 Repositório de Arquivos... 17 Enquetes...

Leia mais

jquery Apostila Básica

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

Leia mais