Sumário 1. O QUE É HTML? O QUE É QUE ESTÁ DENTRO DE UM ARQUIVO HTML? COMO É QUE O NAVEGADOR FAZ A APRESENTAÇÃO DAS PÁGINAS?...
|
|
|
- Antônia Aldeia Gentil
- 8 Há anos
- Visualizações:
Transcrição
1
2 Sumário 1. O QUE É HTML? O QUE É QUE ESTÁ DENTRO DE UM ARQUIVO HTML? COMO É QUE O NAVEGADOR FAZ A APRESENTAÇÃO DAS PÁGINAS? QUEM É RESPONSÁVEL PELA DEFINIÇÃO DOS PADRÕES DA WEB? CRIANDO O PRIMEIRO ARQUIVO HTML COMPOSIÇÃO DO HTML TIPO DE DOCUMENTO (DOCTYPE) ESTRUTURA BÁSICA DE UMA PÁGINA DE WEB TAG META CONTEÚDO DO <BODY> CORES NO HTML COR DE FUNDO NA PÁGINA IMAGEM NO FUNDO NA PÁGINA FORMATAÇÃO DE TEXTOS E PARÁGRAFOS A TAG <P> A TAG <DIV> A TAG <BR> ACENTOS E CARACTERES ESPECIAIS NO HTML A TAG <H> (CABEÇALHOS) FORMATAÇÃO DO TEXTO A TAG <FONT> O ATRIBUTO FACE O ATRIBUTO SIZE O ATRIBUTO COLOR: COR DA FONTE COMENTÁRIOS LISTAS LISTAS NÃO ORDENADAS LISTAS ORDENADAS... 20
3 5.9.3 LISTAS DE DEFINIÇÕES INSERINDO IMAGENS O ELEMENTO <IMG> E O ATRIBUTO SRC O ATRIBUTO ALT OU TITLE LINKS A TAG <A> (ÂNCORA) E O ATRIBUTO HREF CORES DOS LINKS TIPOS DE LINKS ESPECIFICANDO A JANELA DE DESTINO DE UM LINK CRIANDO O LINK SOBRE UMA IMAGEM CRIANDO ÂNCORAS: TABELAS ELEMENTOS BÁSICOS DE UMA TABELA CORES NA TABELA MESCLANDO CÉLULAS IFRAMES LINKS PARA IFRAME FORMULÁRIOS CRIAR UM FORMULÁRIO ATRIBUTO ACTION E MÉTODO ELEMENTOS PARA FORMULÁRIOS INPUTS CAMPO DE SENHA "RADIO BUTTONS" CHECKBOXES MENU DE SELEÇÃO ÚNICA (<SELECT>) BOTÕES DE ENVIO E APAGAR Escola Alcides Maya 3
4 1. O que é HTML? HTML significa HyperText Markup Language (Linguagem de Marcação por Hipertexto). Este nome significa que o HTML é constituído por um texto especial, utilizando um recurso chamado hipermídia. A linguagem HTML sofreu várias atualizações no decorrer dos anos, desde a sua criação e hoje está na versão O que é que está dentro de um arquivo HTML? Um arquivo HTML é constituído por um texto que define os elementos da linguagem HTML usando Tags de Marcação. As Tags de Marcação dão instruções ao navegador sobre a estrutura do documento e sobre forma como a página deve ser apresentada graficamente. As Tags são representadas pelos sinais de < e > em volta da respectiva Tag, e na sua grande maioria possuem um fechamento com o mesmo nome da Tag. Exemplo: <tag>... </tag> Os arquivos HTML podem ser escritos usando um simples editor de texto (como o Bloco de Notas) e os seus nomes devem ter a extensão.html ou.htm. 1.2 Como é que o navegador faz a apresentação das páginas? As páginas contêm instruções que descrevem a forma como devem ser mostradas. O navegador lê as instruções e usa-as para desenhar uma representação gráfica do conteúdo da página. A forma usada para escrever essas instruções baseia-se nas TAGS da linguagem HTML. 1.3 Quem é responsável pela definição dos padrões da Web? O órgão que define as regras para a Web é o World Wide Web Consortium (W3C), que conta com a participação ativa dos líderes da indústria e de meios acadêmicos. O W3C define as especificações técnicas que formam os padrões da Web. Escola Alcides Maya 4
5 Os padrões mais importantes da Web são: HTML, CSS e XML. Existe também a linguagem chamada de XHTML. Esta é uma reformulação baseada no HTML 4.01 que obedece aos requisitos de regras do XML. Os padrões do XHTML já estão em processo de descontinuação, mas continuam sendo utilizados como a ponte de ligação entre o HTML 4.01 e a nova versão, o HTML 5, ainda sem data prevista para lançamento oficial. 2. Criando o primeiro arquivo HTML Para que o navegador interprete corretamente um arquivo HTML, deve ser escrito e salvo como arquivo de texto puro. Isso significa que você deve usar um processador de texto simples, como o Bloco de Notas do Windows. Se for feito em algum outro editor, deve-se ter o cuidado de salvar o arquivo como texto puro (não formatado). Os arquivos devem ter extensão HTM, ou HTML. Abra o BLOCO DE NOTAS, do Windows. Para salvar como HTML, basta clicar no menu Arquivo, Salvar Como, trocar na caixa Tipo Documento de Texto por Todos os Arquivos. Na caixa nome, digite o nome do arquivo seguido de um ponto e a extensão html. Não esqueça de que é obrigatório que os nomes sejam em minúsculo e sem espaços entre os nomes. Evite utilizar caracteres especiais nos nomes, como acentos, espaços ou outros caracteres. Para nomes duplos tipo Porto Alegre, use a estrutura: porto_alegre.html, já com nomes com outros caracteres, como Natação, use a estrutura: natacao.html. Escola Alcides Maya 5
6 3. Composição do HTML 3.1 Tipo de documento (Doctype) Não existe um só tipo de HTML, atualmente existem vários: HTML 4.01, XHTML, e muitos outros. Cada um destes tipos está definido em especificação própria no W3C, mas também está definido em linguagem de máquina especificando a estrutura legal, os elementos e os atributos próprios do tipo de HTML. Uma definição assim é chamada de "Document Type Definition", (Definição do Tipo de Documento) ou simplesmente DTD. Ferramentas para processar documentos, tais como Web navegadores, precisam saber qual é a DTD que o documento HTML usa: esta é razão porque documentos HTML precisam conter logo no seu início uma declaração do doctype. O mais importante de uma declaração de doctype é que uma família considerável de navegadores não ficará tentando resolver ou "adivinhar" como renderizar o código e ao contrário entrará logo em modo de parseamento "standard", no qual o entendimento (e em consequência a apresentação) do documento é não só mais rápida como também isenta de uma má apresentação ao qual estão sujeitos os documentos sem uma declaração de Doctype. Ao utilizarmos um código HTML limpo e sem misturar tecnologias, usando o HTML básico ou com CSS podemos apresentar o doctype como nos exemplos abaixo: Este é o modo básico de apresentação (Recomendado) <!DOCTYPE html public "-//w3c//dtd html 4.01//en" Este é o modo com as informações completas (Em fase de descontinuação) 3.2 Estrutura básica de uma página de web Uma página Web, criada em HTML possui uma estrutura dividida em 4 TAGs básicas: <html> <title>...</title> <body>... Onde: <html>... - são usadas para delimitar os comandos HTML, indicam o início e o fim de um documento. O navegador reconhece a TAG <html> e identifica que o documento que virá a seguir deve ser interpretado como HTML. Na tag <HTML. Também podemos colocar a língua utilizada na nossa página, no caso do português colocamos lang= pt-br define o cabeçalho de um documento HTML. Nesta seção, são inseridas informações de configuração, como o título que é exibido na barra de títulos do navegador, descrição da página, palavras-chave para buscadores, etc. <title>...</title> - definem o título da página que é exibido na barra de títulos do navegador. Estas TAGs devem estar sempre dentro das TAGs. <body>... - define a seção mais importante de um documento HTML. Tudo o que estiver entre esta Tag é interpretado como o corpo do documento e será exibido na tela do navegador. Exemplo: <title>web I Escola Alcides Maya</title> <body> Aqui vai o corpo da página Escola Alcides Maya 6
7 3.2 TAG Meta As Tags Meta (ou Meta tags) tem a função de, entre outras coisas, descrever o conteúdo da página para os mecanismos de busca. É nelas que podemos inserir as palavras-chave e a descrição do site para facilitar as pesquisas. Por meio delas, podemos também definir a codificação dos caracteres (no caso do português, devido aos acentos, utilizamos o charset="utf-8") e também "assinar" o site, declarando sua autoria sobre o código fonte. Exemplos: Codificação dos caracteres com acentos: Definindo o autor do site: <meta name="author" content="escola Alcides Maya"> Fornecendo a descrição do site: <meta name="description" content="meta Tags - O que são e como utilizá-las"> Fornecendo as palavras-chave: <meta name="keywords" content="sites, web, HTML, tags, curso"> Exemplo de uma estrutura completa de HTML: <meta name="author" content="escola Alcides Maya"> <meta name="description" content="descrição completa do site"> <meta name="keywords" content="sites, web, HTML, tags, curso"> <title>web I Escola Alcides Maya</title> <body> Aqui vai o corpo da página 4. Conteúdo do <body> Todo o conteúdo inserido ou digitado entre as tags <body> automaticamente fará parte do conteúdo da página a ser visualizado no navegador. Dentro do <body> podemos ter textos, parágrafos, listas, imagens, tabelas, links, elementos flash e uma série de outros recursos compatíveis com a linguagem HTML. 4.1 Cores no HTML As cores mostradas na tabela seguinte têm nomes que são reconhecidos por todos os navegadores famosos. A utilização destes nomes é muito conveniente porque nos permite evitar o uso códigos hexadecimais, mas infelizmente eles não estão definidos em nenhum padrão do W3C. Se quiser que as suas páginas estejam em conformidade com as recomendações do W3C deve usar os códigos hexadecimais equivalentes em vez dos nomes. Para entender melhor os códigos hexadecimais basta dividir os seis números em 3 grupos. Escola Alcides Maya 7
8 Exemplo: # (os dois primeiros números representam a cor vermelha, os dois números do meio representam a cor verde e os dois últimos números representam a cor azul). A mistura dos valores RGB dá todas as outras cores. Há uma grande possibilidade de arranjos de cores, para facilitar isso trabalhamos com um número de 216 cores, que ficam divididas as intensidades da seguinte forma: 00 = zero cor (preto) 33 = intensidade muito fraca 66 = intensidade fraca 99 = intensidade média CC = intensidade alta FF = intensidade máxima Sempre que tivermos um valor igual nos 3 grupos de cores teremos como resultado as cores branca, preta ou um tom de cinza. Segue abaixo a tabela completa com as 216 cores e seus respectivos códigos hexadecimais: Escola Alcides Maya 8
9 4.2 Cor de fundo na página Para que a nossa página possa ter uma cor de fundo, devemos utilizar o parâmetro bgcolor a cor desejada dentro da tag <body>, como nos exemplos abaixo: <body bgcolor="#ff0000"> teremos a página com um fundo VERMELHO <body bgcolor="#00ff00"> teremos a página com um fundo VERDE <body bgcolor="#0000ff"> teremos a página com um fundo AZUL <body bgcolor="#ffcc00"> teremos a página com um fundo LARANJA Exemplo de uma página com o fundo amarelo: <body bgcolor="#ffff00"> Um fundo colorido 4.3 Imagem no fundo na página Para que a nossa página possa ter uma IMAGEM ao invés de uma cor de fundo, devemos utilizar o parâmetro background e o caminho da imagem desejada dentro da tag <body>, como mostra nos exemplos que vemos a seguir: <body background="fundo.jpg"> fundo com uma imagem extensão JPG <body background="imagem.gif"> fundo com uma imagem extensão GIF <body background="papel.png"> fundo com uma imagem extensão PNG Como vimos nos exemplos acima, os formatos de imagem mais recomendados são o JPG, o GIF e o PNG por questões do peso das imagens de da compatibilidade com os navegadores, outros formatos de imagens apesar de serem visualizados em alguns navegadores, não são recomendados. Se a imagem estiver dentro de uma subpasta devemos colocar o caminho desta junto com o nome da imagem, como nos exemplos. <body background="imagens/foto.jpg"> Aqui temos uma subpasta chamada imagens <body background="fotos/paisagens/natureza.jpg"> Aqui temos duas subpastas, uma chamada fotos e outra chamada paisagens. Escola Alcides Maya 9
10 Ao inserirmos uma imagem de fundo devemos ter uma série de cuidados para que a sua visualização esteja correta, afinal temos diferentes resoluções utilizadas nos computadores (800x600, 1024x768, 1280x1024) e ainda monitores de formato quadrado (escala 4:3) e monitores formato wide (escala 16:9). Os monitores wide por serem mais alongados trabalham com resoluções diferentes das vistas acima, sendo as mais comuns as de 1024x600, 1280x768 e 1366x800, podendo ainda ter várias outras resoluções de tela alternativas de acordo com o tamanho e o formato do monitor. Assim, para que uma imagem ocupe TODA a tela independente de sua resolução, temos duas alternativas: 1. Utilizarmos uma imagem com uma grande resolução (tipo 1920x1080) isso fará com que a imagem sempre apareça em tela cheia seja qual for a resolução do monitor, mas em resoluções menores do que a resolução da imagem, a foto será cortada. 2. Utilizarmos uma imagem pequena como um padrão que vai se repetindo e preenchendo todo o fundo da tela, dando uma idéia infinita. A única desvantagem é que isso só é possível com imagens que já estejam preparadas para esta auto-repetição, normalmente sendo de imagens abstratas, não podendo utilizar fotos de paisagens, pessoas, etc. Vejamos abaixo dois exemplos de imagens de fundo na página, uma com uma imagem inteira e outra com uma imagem que se repete: <body background="foto.jpg"> Imagem sólida no fundo da página <body background="foto2.jpg"> Imagem que se repete no fundo da página O atributo BGPROPERTIES quando usado com o valor FIXED, especifica que a imagem de plano de fundo permanecerá fixa na tela, não acompanhando a rolagem da página. Isto é útil quando queremos que a imagem de fundo fique estática e somente o conteúdo do site tenha rolagem. Exemplo: <body background="paisagem.jpg" bgproperties="fixed"> Escola Alcides Maya 10
11 OBS.: Sempre devemos ter cuidado ao utilizarmos imagens de fundo na nossa página. Muitas vezes temos dificuldades de ler um texto sobre uma imagem de fundo, dificultando a compreensão e a leitura dos conteúdos presentes dentro da página. Então sempre escolha imagens que não tenham cores em excesso e que não prejudiquem a leitura do texto. 5. Formatação de textos e parágrafos O HTML possui um bom número de tags para formatação de textos e parágrafos. Estas tags resolvem a maior parte do necessário normalmente para exibir textos, cabeçalhos, listas de itens, parágrafos e também de cores e fontes. 5.1 A TAG <p> É responsável pela quebra de parágrafos, finaliza o parágrafo e insere automaticamente uma linha em branco entre os parágrafos. Também responsável pelo alinhamento dos parágrafos. <p align="posição">texto do parágrafo</p> A posição pode ser: Left = Alinhamento à esquerda Center = Alinhamento centralizado Right = Alinhamento à direita Justify = Alinha o texto na esquerda e direita Exemplo: <body> <p>este parágrafo utiliza o alinhamento padrão dos navegadores (à esquerda). </p> <p align="left">este parágrafo utiliza o alinhamento à (esquerda). </p> <p align="right">este parágrafo utiliza o alinhamento à (direita). </p> <p align="center">este parágrafo utiliza o alinhamento (centralizado). </p> <p align="justify">este parágrafo utiliza o alinhamento (esquerda) e (direita). Um recurso muito usado nos processadores de texto é o alinhamento tanto à esquerda quanto à direita da margem do documento Chamado Justificar.</p> Resultado: Escola Alcides Maya 11
12 5.2 A TAG <div> Usando isoladamente, sua utilidade é próxima à tag <p>, ou seja, todo o texto entre <div> e </div> será exibido como um parágrafo. A diferença é que <div> insere somente uma quebra de linha simples e depois do parágrafo, e não uma linha em branco como na tag <p>. O <div> é mais utilizado no alinhamento de elementos diversos e não somente de caracteres de texto, como no <p>. O <div> tem a sua funcionalidade aumentada quando é utilizada formatada através da CSS. 5.3 A TAG <br> Se você deseja forçar a quebra de linha em texto de parágrafos use esta tag, que não precisa ser fechada. No HTML ela é utilizada somente na forma <br> e no XHTML é utilizada na forma < /br> na sua abertura e sem fechamento. Exemplo: <body> Resultado: <p>existem muitas variações das passagens<br> do Lorem Ipsum disponíveis, mas a maior parte<br> sofreu alterações de alguma forma, pela injeção de humor,<br> ou de palavras aleatórias que nem sequer parecem ter sentido.</p> </HTML> Resultado: Escola Alcides Maya 12
13 5.4 Acentos e caracteres especiais no HTML Às vezes ao digitarmos o texto em um arquivo HTML, quando visualizamos no navegador, alguns caracteres, como acentos ou ç são substituídos por outros caracteres ou por um?. Isso acontece quando a codificação dos caracteres não está da forma correta (como vimos nas tags meta). Para corrigir isso, a linguagem HTML permite que caracteres especiais sejam representados por seqüências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caractere desejado, e um ; final. Assim devemos substituir os caracteres acentuados pelo seu respectivo código HTML. Exemplo: Para aparecer um á, coloque á no código HTML. Acentos: ABAIXO SEGUE A TABELA DE CARACTERES: á á Á Á ã ã Ã Ã â â Â Â à à À À é é É É ê ê Ê Ê í í Í Í ó ó Ó Ó õ õ Õ Õ ô ô Ô Ô ú ú Ú Ú ü ü Ü Ü ç ç Ç Ç Caracteres Comerciais: copyright marca registrada ® trade mark libra esterlina centavo euro iene (yen) símbolo monetário Escola Alcides Maya 13
14 Caracteres Especiais: Espaço forçado & e comercial & > maior que > < menor que < ˆ acento circunflexo ˆ acento til acento trema acento agudo &cute; cedilha " aspas duplas " e aspas duplas (esquerda e direita) e e aspas simples (esquerda e direita) e e aspas angulares simples (esquerda e direita) e «e» aspas angulares duplas (esquerda e direita) «e» º ordenal masculino º ª ordinal feminino ª travessão en travessão em macron reticências barra vertical marcador (bullet) parágrafo parágrafo legal Escola Alcides Maya 14
15 Caracteres Matemáticos e Lógicos: ¹ elevado a um ¹ ² ao quadrado ² ³ ao cubo ³ ½ fração um meio ½ ¼ fração um quarto ¼ ¾ fração três quartos ¾ ⅛ fração um oitavo ⅛ ⅜ fração três oitavos ⅜ ⅝ fração cinco oitavos ⅝ ⅞ fração sete oitavos ⅞ > maior que > < menor que < ± mais ou menos ± sinal de subtração sinal de multiplicação sinal de divisão asterisco barra de fração por-mil sinal de integral somatório PI raiz quadrada infinito quase igual aproximadamente Escola Alcides Maya 15
16 5.5 A TAG <h> (Cabeçalhos) A tag <h> (Header, ou cabeçalho) é parecida com a dos parágrafos, mas cria um destaque maior no texto. Esta tag possui seis tamanhos diferentes. O tamanho do corpo dos caracteres vai de h6 (menor nível) a h1 (maior nível). A tag <h> também suporta os mesmos parâmetros de alinhamento que a tag <p>. Exemplo: <body> <h1>texto formatado com H1</h1> <h2>texto formatado com H2</h2> <h3>texto formatado com H3</h3> <h4>texto formatado com H4</h4> <h5>texto formatado com H5</h5> <h6>texto formatado com H6</h6> 5.6 Formatação do texto A linguagem HTML define vários elementos para se formatar um texto, como por exemplo, escrever em negrito, itálico, sublinhado, etc. O quadro abaixo mostra alguns deles: Elemento <b> <em> <i> <strong> <sub> <sup> <u> Descrição Define texto escrito em negrito Define texto enfatizado (outro tipo de itálico) Define texto escrito com caracteres itálicos Define texto forte (outro tipo de negrito) Texto subscrito (alinhado um pouco mais abaixo) Texto sobrescrito (alinhado um pouco mais acima) Texto sublinhado 5.7 A TAG <font> Através da tag <font> poderemos formatar o tipo de fonte utilizada (face) o tamanho da fonte (size) e a cor da fonte (color), a formatação da cor segue exatamente os mesmos parâmetros utilizados na formatação da cor de fundo da página. Escola Alcides Maya 16
17 5.7.1 O atributo FACE: Tipo de fonte - Neste atributo você informa o nome da fonte a ser usada, que deve estar instalada no computador do usuário. Se a fonte informada não estiver presente, você pode especificar uma lista de outras fontes alternativas, separando-as por vírgula. Se o navegador não encontrar a primeira fonte da lista, tentará a segunda e assim por diante. Exemplo: <body> <p><font face="tahoma">este é o tipo de fonte TAHOMA.</font><p> <p><font face="arial Black">Este é o tipo de fonte ARIAL BLACK.</font></p> <p><font face="book Antiqua">Este é o tipo de fonte BOOK ANTIQUA.</font></p> <p><font face="courier New">Este é o tipo de fonte COURIER NEW.</font></p> <p><font face="georgia">este é o tipo de fonte GEORGIA.</font></p> <p><font face="verdana, Arial, Helvetica">Através desse grupo, ele usará a fonte VERDANA, mas caso não tenha, tentará usar as outras nesta ordem (Verdana, Arial, Helvetica)</font></p> Resultado: OBS.: Segundo o W3C, a formatação das fontes via a tag <font> e os atributos face, size e color está em desuso, não sendo a forma mais correta de procedimento para a formatação das fontes. Atualmente, o modo ideal de formatação das fontes é através dos recursos de CSS. Escola Alcides Maya 17
18 5.7.2 O atributo SIZE Informa qual o tamanho da fonte. Este tamanho é um nº entre 1 a 7. O valor padrão é 3. É possível também utilizar os valores pequenos (-1 a -7) ou grandes (+1 a +7) <body> <p><font size="1"> Este é um texto com tamanho 1. </font></p> <p><font size="2"> Este é um texto com tamanho 2. </font></p> <p><font size="3"> Este é um texto com tamanho 3. </font></p> <p><font size="4"> Este é um texto com tamanho 4. </font></p> <p><font size="5"> Este é um texto com tamanho 5. </font></p> <p><font size="6"> Este é um texto com tamanho 6. </font></p> <p><font size="7"> Este é um texto com tamanho 7. </font></p> Resultado: Escola Alcides Maya 18
19 5.7.3 O atributo COLOR: Cor da fonte O sistema de cores para as fontes segue exatamente o mesmo esquema das cores para o fundo da página, podendo ser utilizado o nome da cor ou o código hexadecimal. Como no exemplo a seguir: <body> <h2> <font color="#0000ff">texto da cor Azul</font><br> <font color="#ff0000">texto na cor Vermelha</font><br> <font color="#00ff00">texto na cor Verde</font><br> <font color="#ffff00">texto na cor Amarela</font><br> <font color="#000000">texto na cor Preta</font><br> <font color="#999999">texto na cor Cinza claro</font><br> <font color="#666666">texto na cor Cinza escuro</font><br> <font color="#330033">texto na cor Violeta</font><br> <font color="#663300">texto na cor Marrom</font><br> <font color="#ff00ff">texto na cor Rosa</font><br> <font color="#000000">texto na cor Preta</font><br> <font color="#99cc00">texto na cor Verde Oliva</font><br> </h2> Resultado: Escola Alcides Maya 19
20 5.8 Comentários As tags de comentário são especiais porque não se escrevem da mesma forma que as tags que representam elementos normais. Os comentários servem para dizer ao navegador que o seu conteúdo é um comentário e não pode ser apresentado graficamente. Usa-se essas tags para fazer anotações que explicam a forma como o código fonte está feito para que mais tarde consigamos compreender aquilo que fizemos antes. O exemplo seguinte mostra um comentário: <!-- Isto é um comentário --> 5.9 Listas A linguagem HTML contém elementos que permitem criar listas de definições, listas ordenadas e listas não ordenadas Listas Não Ordenadas Uma lista não ordenada contém vários itens marcados todos com o mesmo símbolo (normalmente um círculo pequeno ou um quadrado pequeno). Para criar uma lista não ordenada usa-se o elemento <ul> ("unordered list") Dentro desse elemento os vários itens são criados com o elemento <li> ("list item") O exemplo seguinte mostra uma lista simples: <ul> <li>janeiro</li> <li>fevereiro</li> <li>março</li> </ul> Este é o aspecto com que ficará no seu navegador: Janeiro Fevereiro Março A tag <ul> pode ter parâmetros adicionais, como modificar o marcador da lista, para isso temos 3 tipos de marcadores (quadrado, círculo e disco). Abaixo vemos os exemplos com os 3 marcadores: <ul type="circle"> Lista com marcador tipo círculo (padrão) <ul type="square"> Lista com marcador tipo quadrado <ul type="disc"> Lista com marcador tipo disco (círculo vazado) Listas Ordenadas Uma lista ordenada contém vários itens numerados e é criada com o elemento <ol> ("ordered list"). Os itens da lista definem-se com o elemento <li> ("list item"). O exemplo seguinte mostra uma lista ordenada: <ol> <li>brasil</li> <li>argentina</li> <li>uruguai</li> <li>paraguai</li> </ol> Este é o aspecto com que ficará no seu navegador: 1. Brasil 2. Argentina 3. Uruguai 4. Paraguai A tag <ol> também tem parâmetros adicionais, onde podemos definir que tipo de numerador representará a lista, se numérico, alfabético, romano e se é minúsculo ou maiúsculo. Podemos definir também em que número iniciará a contagem da lista. Escola Alcides Maya 20
21 Exemplos: <ol type="1"> Lista ordenada por números (padrão) <ol type="1" start="20"> Lista ordenada por números começando no nº 20 <ol type="i"> Lista ordenada por números romanos maiúsculos <ol type="i"> Lista ordenada por números romanos minúsculos <ol type="a"> Lista em ordem alfabética maiúscula <ol type="a"> Lista em ordem alfabética minúscula Listas de Definições Uma lista de definições não é constituída por uma série de itens mas sim por vários termos acompanhados de descrições dos seus significados. As listas de definições criam-se com o elemento <dl> ("definition list"). O nome de cada termo fica dentro de um elemento <dt> ("definition term") e a sua descrição fica num elemento <dd> ("definition description"). Exemplo: <dl> <dt>dreamweaver</dt> <dd>programa de edição visual da linguagem HTML XHTML e CSS</dd> <dt>fireworks</dt> <dd>programa de edição de vetores e imagens para Web.</dd> <dt>flash</dt> <dd>programa de animação multimídia para Web.</dd> </dl> Resultado no navegador: OBS.: As listas de definição podem ser formatadas via CSS ficando com um visual extremamente rico e podendo ser utilizado para um grande número de outros recursos. 6. Inserindo Imagens Usar imagem em sua página pode ser um grande diferencial de atratividade. A tag que utilizaremos para inserir uma imagem é <img> (image) e veremos os seus atributos, tais como altura, largura, borda e dimensões. Escola Alcides Maya 21
22 6.1 O elemento <img> e o atributo src A inserção de imagens num documento se faz com o elemento <img>. Este elemento tem conteúdo vazio, o que significa que ele apenas possui atributos e também não tem fechamento. A escolha da imagem para mostrar na página se faz através do atributo src (que é uma abreviação de source", ou origem) o qual indica o nome e o local em que pode ser encontrado o arquivo que contém a imagem. As imagens devem estar nos formatos JPG, GIF ou PNG. <body> <img src="firefox.png"> O exemplo seguinte ilustra o uso deste elemento: O src pode apontar para um arquivo local ou para uma URL (endereço web) onde o arquivo está hospedado, em qualquer um dos casos a imagem será visualizada normalmente. É possível também mudarmos as dimensões da imagem através dos atributos width (largura) e height (altura), podendo até mesmo mostrar uma mesma imagem de tamanhos diferentes na mesma página. Exemplo: <body> <img src="chrome.jpg" width="150" height="150"> <img src="chrome.jpg" width="300" height="300"> Escola Alcides Maya 22
23 6.2 O atributo alt ou title Os atributos alt e title usam-se para definir "texto alternativo" à imagem. Este texto será mostrado em vez da imagem no caso de o browser não conseguir apresentá-la, e usa-se assim: <img src="firefox.png" alt="ícone do Mozilla Firefox"> <img src="chrome.jpg" title="ícone do Google Chrome"> É importante ressaltar a diferença entre alt e tile. O atributo alt funciona somente no Internet Explorer, já o atributo title é usado no Mozilla. Para evitar problemas com a utilização desses atributos, utilize-os juntamente como no exemplo: <img src="w3c.png" alt="ícone do W3C" title="ícone do W3C"> Os atributos alt e title devem conter uma descrição daquilo que a imagem contém para que seja possível compreender o seu conteúdo mesmo sem a ver. A utilização dos atributos alt e title é recomendada porque melhora a acessibilidade das páginas. Este atributo pode ser lido em voz alta pelo software de leitura utilizado pelas pessoas que têm deficiências visuais. Nesses casos, sem os atributos alt e title o conteúdo das imagens seria sempre um mistério. 7. Links O HTML usa ligações de hipertexto ("hyperlinks") para ligar as páginas da Web umas às outras. 7.1 A Tag <a> (âncora) e o atributo href A tag <a> serve para criar uma ligação ("link") para outro documento. O link pode apontar para qualquer recurso disponível na Web: uma página escrita em HTML, uma imagem, um arquivo de som, um filme, etc. Sintaxe para criar um link: <a href="url">texto a mostrar</a> O atributo href contém o endereço (URL) do recurso ao qual se faz o link. O texto que fica entre as tags <a> é o local visível sobre o qual se deve clicar para entrar no link. O Link a seguir vai para o site da escola: <a href=" Alcides Maya</a> 7.2 Cores dos links Geralmente o navegador apresenta os links em azul e sublinhados, mas é possível alterar isso através dos parâmetros opcionais do elemento <body>. LINK: Define a cor dos links ainda não visitados. VLINK: Define a cor dos links já visitados. ALINK: Define a cor dos links no instante em que são clicados pelo usuário. 7.3 Tipos de links Link para uma página web: <a href=" do Google</a> Link para um documento HTML: <a href="pagina.html">página 2</a> Link para uma imagem: <a href="imagem.jpg">abre a imagem</a> Link para um endereço de <a href="mailto:nome@ .com.br">mande um </a> Escola Alcides Maya 23
24 7.4 Especificando a janela de destino de um link Por padrão, o navegador exibe a página destino de um hyperlink na mesma janela, substituindo a página atual. Usando o atributo TARGET, podemos especificar outra janela. target="_blank" Como no exemplo: <a href=" target="_blank">google</a> Visualizando no navegador: <body> <a href=" Maya</a> <a href="mailto:nome@ .com.br">mande um </a> 7.5 Criando o link sobre uma imagem É possível utilizar os links não apenas com o texto, mas também utilizar os links em imagens, botões, banners, etc. Para que possamos ter um link sobre uma imagem é necessário que a tag <a> envolva a tag <img> que fornece o caminho da imagem. A sintaxe do código para criar links em imagens ficará assim: <a href="pagina.html"><img src="imagem.jpg"></a> Escola Alcides Maya 24
25 Ao criarmos o link sobre a imagem ela ficará marcada com uma borda azul (que identifica os links), Essa borda pode ser retirada se utilizarmos o atributo border="0" dentro da tag da imagem. Veja os exemplos: <body> <p><a href="alcides.html"><img src="alcides.jpg"></a></p> <p><a href="alcides.html"><img src="alcides.jpg" border="0"></a></p> Escola Alcides Maya 25
26 7.6 Criando âncoras: Âncoras nada mais são do que links para dentro da própria página, permitindo que se navegue por dentro de uma página, quando ela possui um conteúdo muito extenso, é permitido também criar links para cada capítulo e ainda links para voltar ao topo da página. Para definirmos uma âncora também utilizamos a tag <a> mas sem o atributo href, ao invés disso utilizamos o atributo name, que posteriormente será a referência do link. A sintaxe para a criação de uma âncora ficará assim: <a name="ancora">texto da âncora</a> A âncora pode ser criada em qualquer ponto do código HTML (mas normalmente é definida em pontos mais abaixo na página, e o link serve para que cheguemos rapidamente neste determinado ponto. Para fazermos um link até a âncora usamos o seguinte código: <a href="#ancora">vai até âncora</a> Onde o sinal de # representa que o link será para a própria página, mas que deve procurar nela a respectiva âncora. No caso de querermos criar um link de volta para o topo da página, não é necessária a criação de uma âncora para isso, basta criarmos um link com o código: <a href="#top">voltar para o topo</a> O link para #top sempre remeterá automaticamente para o topo da página 8. Tabelas As tabelas definidas em HTML têm permitido apresentar dados em forma tabular e construir layouts. Apesar de as recomendações modernas darem preferência à utilização das Folhas de Estilos em Cascata (CSS) ao invés das tabelas quando se trata de fazer layouts complexos. A verdade é que as tabelas continuam a ser muito utilizadas para dados tabulares e a utilização para ajustes de layout por tabelas, apesar de não ser o recomendado pelo W3C, pode ser feito como forma de exercício de formatação. 8.1 Elementos básicos de uma tabela A tabelas definem-se com a tag <table>. A estrutura básica tabela divide-se em linhas (com o elemento <tr>, que o nome vem de table row ), e cada linha divide-se em células (definidas com o elemento <td>, que o nome vem de table data ). É possível inserir também um cabeçalho de texto com a tag <th>, que o nome vem de table header. Uma célula pode conter dados, texto, imagens e outros elementos do HTML. Atributos Básicos de uma tabela: Border: Define o número de pixels da borda principal da tabela. Cellpadding: Define, em pixels, o espaço entre as bordas da célula e o conteúdo da mesma. Cellspacing: Define o espaço entre as bordas (em pixels). Align: Alinha horizontalmente a tabela em relação ao seu entorno. Valign: Controla o posicionamento do conteúdo dentro das células. Height: Define a altura da tabela em pixels ou porcentagem. Width: Define a largura da tabela em pixels ou porcentagem. Background: Permite-nos colocar um fundo para a tabela desde um link a uma imagem. Bgcolor: Dá cor de fundo à tabela. Rowspan: Define quantas linhas uma célula pode mesclar. Colspan: Define quantas colunas uma célula pode mesclar. Escola Alcides Maya 26
27 Exemplo de uma tabela simples: <body> <table border= 1 width= 400 > <tr> <td>célula 1</td> <td>célula 2</td> </tr> <tr> <td>célula 3</td> <td>célula 4</td> </tr> </table> No exemplo acima criamos uma tabela com borda 1 (caso a borda não fosse definida não ficaria visível), com 400 pixels de largura e com duas linhas <tr>. Na primeira <tr> colocamos as células 1 e 2 e na segunda <tr> colocamos as células 3 e Cores na tabela Para trabalharmos com cores de fundo na tabela, utilizamos o parâmetro bgcolor e o código da cor. O bgcolor pode ser colocado como atributo da tag <table> se quisermos que toda a tabela tenha essa cor de fundo. Se quisermos que somente uma linha receba determinada cor de fundo, colocamos o bgcolor na tag <tr> e se for somente e uma célula, colocamos o bgcolor na tag <td>. <body> <table border="1" width="400" bgcolor="#ffff66"> <tr bgcolor="#ff0000"> <td>célula 1</td> <td>célula 2</td> </tr> <tr> <td bgcolor="#00ff00">célula 3</td> <td bgcolor="#0000ff">célula 4</td> </tr> <tr> <td>célula 5</td> <td>célula 6</td> </tr> </table> Escola Alcides Maya 27
28 8.3 Mesclando células Para mesclar linhas utilizamos o parâmetro rowspan e o número de linhas desejadas, já para mesclar colunas utilizamos o parâmetro colpan e o número de colunas. Exemplos: <td colspan= 2 > Mescla duas colunas <td rowspan= 4 > Mescla quarto linhas Segue abaixo um exemplo de tabela com células mescladas <body> <table border="1" width="400"> <tr> <td rowspan="4">4 células mescladas</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> 9. IFRAMES iframes (inline frames) é um recurso muito utilizado em websites. Consiste na inserção de páginas web (arquivos) dentro de páginas web (arquivos). A tag <iframe> é extremamente útil quando queremos criar uma rolagem em um local específico do site, não deixando o site inteiro muito longo. Os parâmetros da tag <iframe> são: name = nome dado ao iframe, servirá como o target dos links src = é a página que abrirá inicialmente dentro do iframe width = largura que o iframe terá, definida em pixels height = altura largura que o iframe terá, definida em pixels frameborder = borda do frame (se não quisermos borda, basta colocar 0 ) scrolling = se haverá barra de rolagem no iframe ou não (as opções são yes, no e auto ) Para utilizarmos um iframe, devemos inserir no local desejado o seguinte código por exemplo: <iframe name="iframe" src="pagina.html" width="600" height="400" frameborder="0" scrolling="no"></iframe> Escola Alcides Maya 28
29 9.1 Links para Iframe Para determinarmos um iframe como destino do hiperlink, ou seja, podemos fazer com que uma página especificada no atributo href da tag <a> seja exibida em um iframe. Vejamos um exemplo: <body> <p><a href="exemplo1.html" target="iframe"> brasil </a></p> <p><a href="exemplo2.html" target="iframe"> porto alegre </a></p> <div><iframe name="iframe" src="pagina.html" width="600" height="400" frameborder="0" scrolling="no"></iframe></div> 10. Formulários Os formulários servem para recolher dados introduzidos pelos usuários e enviá-los para processamento em um banco de dados ou para envio em um Criar um formulário Um formulário é uma seção da página HTML que contém elementos que permitem ao usuário introduzir dados (elementos <textarea> e vários tipos de elementos <input>, <option> e <select>.) Estes elementos permitem inserir dados numéricos, textos curtos, textos extensos, selecionar elementos numa lista com várias escolhas, responder facilmente com respostas do tipo "sim" ou "não", selecionar rapidamente uma opção num grupo pequeno, etc. Os formulários criam-se com o elemento <form>. Dentro desse elemento principal colocamos diversos elementos para a inserção dos dados. A tag <form> sempre deve ter um nome atribuído à ela. <form name="dados"> <input>... <input> </form> O elemento <form> por si só não faz com que o browser desenhe nada na página nem permite inserir dados. Ele contém elementos que recolhem os dados e possui atributos que dizem ao browser como e para onde deve enviar os dados para processamento. Escola Alcides Maya 29
30 10.2 atributo action e Método Para que o conteúdo de um formulário possa ser processado, dentro da tag <form> deverá haver um atributo chamado action= onde dentro das aspas deverá ter o arquivo que processará o formulário. Este arquivo pode ser de extensão php, asp, cgi, pl, dependendo do sistema que foi utilizado. Também devemos definir o método do formulário, que pode ser get quando buscamos informações ou post quando enviamos informações. É possível também criarmos uma página de resposta em html, apenas para testar se o formulário foi construído com sucesso. Esse exemplo ficaria assim: <form name="dados" method="post" action="resposta.html"> 10.3 Elementos para Formulários <form> Define um formulário para recolher dados inseridos pelo usuário <input> Insere um campo para introduzir dados <textarea> Define uma área de texto (permite inserir texto com várias linhas) <label> Define um nome para um elemento <fieldset> Agrupa elementos num formulário <legend> Define uma legenda para um grupo de elementos do formulário <select> Define uma lista com várias opções selecionáveis <option> Insere mais uma opção numa lista com várias opções selecionáveis <button> Define um botão que pode ser pressionado 10.4 Inputs O elemento que encontramos com maior freqüência em formulários é o elemento <input>. Os campos <input> SEMPRE devem ter um nome atribuído para si, para sua identificação. O exemplo seguinte mostra um formulário simples com dois elementos input: <form name="dados" method="post" action="resposta.html"> Primeiro nome: <input type="text" name="primeiro_nome"><br> Último nome: <input type="text" name="ultimo_nome"> </form> Aspecto do formulário quando visualizado no seu navegador: Escola Alcides Maya 30
31 Campo de senha Podemos atribuir a um campo a função específica de campo de senha, para que não mostre os caracteres que foram digitados. Para isso devemos formatar o campo de texto da seguinte forma: Senha: <input type="password" name="senha"> Um exemplo no navegador: "Radio Buttons" Os "Radio Buttons" ou Botões de Rádio são usados para criar um grupo (pequeno) de opções em pode-se selecionar apenas uma das opções. Nos "Radio Buttons", para que isso funcione, todos eles devem ter o mesmo nome, além disso é importante que o atributo value corresponda á resposta marcada. <form name="dados" method="post" action="resposta.html"> Primeiro nome: <input type="radio" name="time" value="gremista"> Gremista<br> <input type="radio" name="time" value="colorado"> Colorado </form> No navegador visualiza-se assim: Escola Alcides Maya 31
32 Checkboxes As caixas de validação ("checkboxes") devem ser usadas sempre que queremos que o usuário aprove (ou não) itens dentro de um pequeno grupo. É permitido validar mais do que uma opção simultaneamente. <form name="dados" method="post" action="resposta.html"> <input type="checkbox" name="roller">eu ando de roller<br> <input type="checkbox" name="skate">eu ando de skate <form> No navegador visualiza-se assim: 10.5 Menu de Seleção única (<select>) Estes tipos de menus, são particularmente práticos pois possibilita a inclusão de listas de opções longas, ocupando pouco espaço na tela. Esse tipo de controle é criado pela tag <select>...</select>, de fechamento obrigatório. Cada opção do menu é identificada pela tag <option>... </option> e dentro de cada option devemos ter o atributo value com a resposta referente a cada item. Desta maneira: <form name="dados" method="post" action="resposta.html"> <p>escolha a cidade que deseja visitar</p> <select name="cidades"> <option>escolha</option> <option value="porto_alegre">porto Alegre</option> <option value="florianopolis">florianópolis</option> <option value="curitiba">curitiba</option> <option value="sao_paulo">são Paulo</option> <option value="rio_de_janeiro">rio de Janeiro</option> <option value="salvador">salvador</option> <option value="fortaleza">fortaleza</option> </select> </form> É possível também criar uma lista de opções rolável. Ela possui exatamente a mesma estrutura das tags do menu de seleção única, a diferença é a presença do atributo SIZE na tag <SELECT>...</SELECT>, que define o número de linhas a serem exibidas simultaneamente no menu. Se o nº de opções for maior que o valor definido em no atributo size, o navegador ativa automaticamente, uma barra de rolagem. Escola Alcides Maya 32
33 10.6 Botões de Envio e Apagar Quando o usuário clica sobre o botão "Enviar" (ou "Submit",) as repostas e texto inseridos no formulário são enviados para processamento. O atributo action do elemento <form> contém o endereço (URL) do recurso da Web que está encarregado de realizar esse processamento. É para lá que o conteúdo do formulário é enviado. Já o botão de Apagar (ou Reset ) limpa todos os campos do formulário para uma nova consulta ou inclusão de dados <form name="dados" method="post" action="resposta.html"> Nome de usuário: <input type="text" name="usuario"><br> <br> <input type="submit" value="enviar"> <input type="reset" value="apagar"> <form> Visualizando no navegador: Escola Alcides Maya 33
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
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
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
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
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
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
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,
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
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):
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.
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
> 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
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
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
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
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.
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
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;
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
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
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,
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
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
Coleção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Introdução Nesta quinta edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos o estudo do Windows Mail, um cliente
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:
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
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
Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados
Tutorial Plone 4 Manutenção de Sites Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados Sumário Introdução 1 Como fazer a autenticação do usuário 1.1 Através do
Programação e Designer para WEB
Programação e Designer para WEB html Prof. Rodrigo Rocha prof.rodrigorocha@yahoo.com http://www.bolinhabolinha.com Apresentação Onde Estamos Introdução a hipertexto. A linguagem. Ambientes para programação
WEBDESIGN. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira
WEBDESIGN Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 1 CDI - Curso de Webdesign - Prof. Paulo Trentin Objetivos para esta aula Debater sobre
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
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
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
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
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
Portal da Prefeitura de São Paulo SECOM. MANUAL DO WARAM v. 1.5 Secretarias
SECOM MANUAL DO WARAM v. 1.5 Secretarias WARAM 1.5 Ferramenta de atualização do Portal da Prefeitura de São Paulo. Use preferencialmente o navegador Internet Explorer superior ou igual a 7.0. No campo
Coleção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos do webmail
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
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
02 - Usando o SiteMaster - Informações importantes
01 - Apresentação do SiteMaster - News Edition O SiteMaster foi desenvolvido para ser um sistema simples de gerenciamento de notícias, instalado em seu próprio computador e com configuração simplificada,
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
Manual do Publicador. Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web
Manual do Publicador Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web Sumário Painel de Administração... 3 1 - Inserção de post... 5 2 Publicação de post com notícia na área headline (galeria de
Técnicas e processos de produção. Profº Ritielle Souza
Técnicas e processos de produção Profº Ritielle Souza INTRODUÇÃO HTML Sigla em inglês para Hyper Text Markup Language, traduzindo daria algo como Linguagem para marcação de Hipertexto. E o que seria o
Claudio Damasceno. Avançar
Claudio Damasceno Conteúdo Alinhamento Âncoras, Links Tabelas Formatação Próximo Capítulo HTML prof.claudiodamasceno@hotmail.com 2 Recapitulando - Estrutura básica título DA PÁGINA
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
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
Coleção - Análises de email marketing em clientes de email
Coleção - Análises de email marketing em clientes de email Introdução Nesta sexta e penúltima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes
Barra de ferramentas padrão. Barra de formatação. Barra de desenho Painel de Tarefas
Microsoft Power Point 2003 No Microsoft PowerPoint 2003, você cria sua apresentação usando apenas um arquivo, ele contém tudo o que você precisa uma estrutura para sua apresentação, os slides, o material
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:
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
Bem vindo ao ajuda do software QUICKFISH para criação de sites.
Bem vindo ao ajuda do software QUICKFISH para criação de sites. SUMÁRIO 1 Exemplo de site criado no software QUICKFISH...02 2 Salvando Seu Site...03 3 Publicando Seu Site...03 4 Visão inicial do Software
Dicas para usar melhor o Word 2007
Dicas para usar melhor o Word 2007 Quem está acostumado (ou não) a trabalhar com o Word, não costuma ter todo o tempo do mundo disponível para descobrir as funcionalidades de versões recentemente lançadas.
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
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
SIMULADOS & TUTORIAIS
SIMULADOS & TUTORIAIS TUTORIAIS HTML Como criar formulários em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte por quaisquer
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,
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,
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...
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
Quem sou eu? Ana Paula Alves de Lima. Formação: E-mail: paulapeniel@gmail.com
Introdução a Linguagem HTML: Conceitos Básicos e Estrutura ANA PAULAALVES DE LIMA INFORMÁTICA E METODOLOGIA - SUBSEQUENTE 1 Quem sou eu? Ana Paula Alves de Lima Formação: Bacharel em Sistemas de Informação;
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
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
Manual da Administração do site Abrasel 2.0
Manual da Administração do site Abrasel 2.0 Caro usuário, Você está recebendo o manual que lhe dará acesso ao administrador do site 2.0 onde será possível fazer as seguintes alterações: Inserir notícias
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
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
Manual de Gerenciamento de Conteúdo
Manual de Gerenciamento de Conteúdo 1 Sumário 1) O que é um Gerenciador de Conteúdo...3 2) Como o Site está Estruturado...3 3) Como Gerenciar o Conteúdo do Site...5 3.1) Adicionar Itens no Menu de Navegação...6
NTI Núcleo de Tecnologia de Informação / UNIFAL-MG Drupal Manual do Usuário DRUPAL MANUAL DO USUÁRIO
DRUPAL MANUAL DO USUÁRIO Primeiros passos para inserir conteúdo no site. 1. Logar-se no site através de seu usuário e senha. 2. Criar um novo menu. 3. Ativar o menu criado, colocando-o em alguma região
Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT.
![Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT.](/thumbs/22/1603074.jpg "Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT.")
Tutorial WEB CONTENT MANAGEMENT [WCM] Obtenha benefícios a partir das aplicações customizadas da ADMT. PÁGINA: 2 de 21 Nenhuma parte deste documento pode ser utilizado ou reproduzido, em qualquer meio
Manual de configuração do sistema
Manual de configuração do sistema (v.1.5.x Beta) Rua México, 119 Sala 2004 Centro Rio de Janeiro, RJ www.doctors-solution.com.br www.simdoctor.com.br contato@simdoctor.com.br Sumário 1. Fazendo seu primeiro
HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).
HTML / JAVASCRIPT Estamos iniciando o estudo do HTML através das TAGS (comandos) para construir formulários. Isso facilitará a continuidade dos nossos estudos da linguagem de programação JavaScript, a
Vamos criar uma nova Página chamada Serviços. Clique em Adicionar Nova.
3.5 Páginas: Ao clicar em Páginas, são exibidas todas as páginas criadas para o Blog. No nosso exemplo já existirá uma página com o Título Página de Exemplo, criada quando o WorPress foi instalado. Ao
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
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
MANUAL JOOMLA 2.5 PORTAL INTERNET. Ministério do Esporte
MANUAL JOOMLA 2.5 PORTAL INTERNET Ministério do Esporte SUMÁRIO 1.0 - Módulo Administração... 1 2.0 Banner randômico... 2 2.1 Adicionar novo slide... 2 2.2 Excluir slide... 6 3.0 Artigos... 7 3.1 Adicionar
Programação para Internet
Programação para Internet Aula 07 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos
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
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á
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
FCT Faculdade de Ciências e Tecnologia Serviço Técnico de Informática STI SGCD Sistema Gerenciador de Conteúdos Dinâmicos
FCT Faculdade de Ciências e Tecnologia Serviço Técnico de Informática STI SGCD Sistema Gerenciador de Conteúdos Dinâmicos Manual do Usuário Presidente Prudente, outubro de 2010 Índice 1. Introdução e Instruções
Instrução de Trabalho Base de Conhecimento
Aprovado por Comitê da Qualidade Analisado criticamente por Dono do processo 1. OBJETIVOS Esta instrução de trabalho tem como objetivo orientar os colaboradores da SINFO, de como a será mantida e acessada.
ASSOCIAÇÃO CRISTÃ DE MOÇOS DO RIO GRANDE DO SUL DEPARTAMENTO DE TECNOLOGIA DA INFORMAÇÃO
MANUAL MEDIAWIKI Manual Media Wiki Página 2 Sumário O que é MediaWiki... 4 Acesso ao sistema... 5 Criação do índice principal... 7 Criação de página... 14 Bloqueio/Proteção de página... 17 Manual Media
Como incluir artigos:
Como incluir artigos: O WordPress é uma ferramenta muito flexível, com muitas variações e ajustes que podem torná-lo algo muito simples e também muito sofisticado conforme os recursos que são configurados
Universidade Federal do Mato Grosso - STI-CAE. Índice
CAPA Universidade Federal do Mato Grosso - STI-CAE Índice 1. Página da área administrativa... 1.1 Botões e campo iniciais... 2. Explicar como funcionam as seções... 2.1. Seções dinâmicos... 2.1.1 Como
Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo.
Manual de Instruções ECO Editor de Conteúdo Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo. O ECO é um sistema amigável e intui?vo, mas abaixo você pode?rar eventuais dúvidas e aproveitar
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
Sumário. 1 Tutorial: Blogs no Clickideia
1 Tutorial: Blogs no Clickideia Sumário Introdução... 2 Objetivos... 2 Instruções para utilização do Tutorial... 2 Acesso ao Portal e a Home Blog... 3 Página Inicial da área do Blog... 4 Apresentação da
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
Programação para Internet
Programação para Internet Aula 09 Os direitos desta obra foram cedidos à Universidade Nove de Julho Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos
Logo abaixo temos a Barra de Menus que é onde podemos acessar todos os recursos do PHP Editor.
Nessa aula iremos estudar: A anatomia da janela do PHP Editor Iniciando o servidor Web O primeiro exemplo de PHP Anatomia da janela do PHP Editor Barra de Títulos: É a barra azul que se encontra na parte
Portal do Projeto Tempo de Ser
Sumário Portal do Projeto Tempo de Ser O que é um Wiki?...2 Documentos...2 Localizando documentos...3 Links...3 Criando um Documento...4 Criando um link...4 Editando um Documento...5 Sintaxe Básica...5
FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT)
FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT) Formulários (FORMS): Um formulário é uma área que pode conter elementos de formulário. Elementos de formulário são elementos que permitem ao usuário
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
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).
Word 1 - Introdução 1.1 - Principais recursos do word 1.2 - A janela de documento 1.3 - Tela principal
Word 1 - Introdução O Word para Windows ou NT, é um processador de textos cuja finalidade é a de nos ajudar a trabalhar de maneira mais eficiente tanto na elaboração de documentos simples, quanto naqueles
CADERNOS DE INFORMÁTICA Nº 1. Fundamentos de Informática I - Word 2010. Sumário
CADERNO DE INFORMÁTICA FACITA Faculdade de Itápolis Aplicativos Editores de Texto WORD 2007/2010 Sumário Editor de texto... 3 Iniciando Microsoft Word... 4 Fichários:... 4 Atalhos... 5 Área de Trabalho:
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
1 2 3 W O R K S H O P 4 5 6 W O R K S H O P 7 W O R K S H O P 8 9 10 Instruções gerais para a realização das Propostas de Actividades Para conhecer em pormenor o INTERFACE DO FRONTPAGE clique aqui 11 CONSTRUÇÃO