Your SlideShare is downloading. ×
Tutorial html
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Tutorial html

365
views

Published on

Published in: Technology, Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
365
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Edited by Foxit Reader Copyright(C) by Foxit Corporation,2005-2009 For Evaluation Only.Índice1. HTML Básico I -2. HTML Básico II3. Listas4. Refresh Page5. Tabelas6. INPUT7. CSS 1
  • 2. 1. HTML Básico I HTML significa Hypertext Markup Language e é a linguagem de descrição dedocumentos usada na World Wide Web. Ela é orientada por marcadores ou TAGs. TAGs são os comandos utilizados pela linguagem HTML. Cada TAG informa ao programa visualizador ou Browser, como ele deveráformatar o texto e deve estar dentro dos sinais de menor que (<) e maior que (>).Exemplo: <HTML>, <BODY>, etc. Os TAGs podem ser únicos ou duplos, com início e fim. Exemplos:TAG único: <BR> TAG duplo: <P>....</P>1.1 - INICIANDO UM DOCUMENTO Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>.Temos duas seções básicas:HEAD Contém parâmetros de configuração do documento.BODY Contém o documento em si. A estrutura de um documento HTML é:<HTML><HEAD><TITLE>Título da Home Page</TITLE></HEAD><BODY BACKGROUND="imagem">*** Conteúdo da Home Page ***</BODY></HTML>1.2 - TAGS USADOS NO INÍCIO DO DOCUMENTO<HTML>...</HTML> Envolvem todas as seções de um documento (HEAD e BODY).<HEAD>...</HEAD> Envolvem a seção de cabeçalho do documento.<TITLE>...</TITLE> Indica o título do documento para o Browser. Geralmente os Browsersapresentam este título na barra de título da sua Janela no Windows.<BODY>...</BODY> Envolvem a seção de corpo do documento. Aqui fica o conteúdo principal daHome Page. Opcionalmente podemos indicar um arquivo de imagem para formar ofundo, usando a opção: BACKGROUND.1.3 - TÍTULOS E SUBTÍTULOS Para demarcar títulos e subtítulos, use os TAGs de HEADER (H1 a H6),juntamente com as opções CENTER ou BLINK. Veja alguns exemplos: Texto inserido entre <H1> e </H1>: 2
  • 3. Texto inserido entre <H2> e </H2>: Texto inserido entre <H3> e </H3>: Texto inserido entre <H3><CENTER> e </CENTER></H3> :Observações: As TAGs CENTER e BLINK têm a função de deixar o cabeçalho ou textocentralizado e pulsante (piscando), respectivamente.1.4 - FORMATAÇÃO DE TEXTOS Além das TAGs <CENTER>...</CENTER> e <BLINK>...</BLINK> existem asseguintes TAGs que podem ser utilizadas para a formatação de um texto.<B>...</B> - Aplica o estilo negrito.<I>...</I> - Aplica o estilo itálico.<U>...</U> - Aplica o estilo sublinhado (nem todos os browser o reconhecem).<SUP>...</SUP> - Faz com que o texto fique sobrescrito.<SUB>...</SUB> - Faz com que o texto fique subscrito.<PRE>...</PRE> - Utiliza a pré-formatação, ou seja, deixa o texto da maneira em que foi digitado.2. HTML Básico II2.1 - IMAGENS Podemos inserir imagens dentro de um documento HTML, mas devemos ter omáximo de cuidado, para não onerara transmissão para o usuário. Os formatos mais usados são o GIF e o JPG, ambos com compactação depixels. Para inserir uma imagem, uso o TAG: <IMG>, que é único, não exigindo umTAG finalizado. Exemplo:<IMG SRC="figura1.gif"> Os arquivos com as imagens deverão estar armazenados no seu Provedor deAcesso, juntamente com o documento HTML.2.2 - LINKS Os Links servem para criar Palavras Quentes, que permitem a interligação entredocumentos HTML e outros documentos ou até arquivos FTP.Veja o seguinte exemplo:<ul><li><a href=#inicio>Para o próprio documento</a></li> 3
  • 4. <li><a href="ivl.htm#inicio">Para outro documento</a></li><li><a href="http://www.nome_da_página.com.br/">Para minha Home Page</a></li><li><a href="filme1.jpg">Âncora para imagem externa</a></li></ul>Use: <A HREF=destino>Texto ou imagem</A><A NAME=nome>...</A> O parâmetro NAME serve para marcar um ponto para possíveis desvios.Quando desviamos para um determinado ponto dentro de um documento, indicamoseste nome com um "#". Por exemplo:<A NAME="AQUI">Aqui é um ponto para desvios</A>...<A HREF="#AQUI">Desviapara o ponto "AQUI"</A>3. Listas3.1 - CRIANDO LISTAS ORDENADAS Listas ordenadas, são também denominadas listas numeradas, pois, quando umnavegador encontra uma TAG, iniciando uma lista ordenada, ele passa a mostrar cadaitem utilizando números, como 1, 2, 3, e assim sucessivamente.Listas ordenadas são iniciadas pela TAG <OL>.Cada item utiliza a TAG <LI>.Finalmente,</OL>.Exemplo:<OL><LI>É facil fazer uma Home Page<LI>Tem que ter paciência<LI>Bons recursos<LI>E não exagerar em imagens</OL>Resultado:1. É facil fazer uma Home Page2. Tem que ter paciência3. Bons Recursos4.E não exagerar em imagens. 4
  • 5. 3.2 - CRIANDO LISTAS NÃO ORDENADAS Listas não ordenadas são muito parecidas com as ordenadas. A única diferençaé o fato de elas não definirem explicitamente uma ordem, como é no caso as numeradas. Eles são formados por símbolos, que podem ser bola, quadrado,e uma bola vazia. Elas são iniciadas com a TAG <UL> e são respectivamenteterminadas com </UL>. E seus elementos são que nem as numeradas: com <LI>Exemplo:<UL><LI>Internet<LI>Intranet<LI>BBS</UL> 5
  • 6. 3.3 - ATRIBUTOS ADICIONAIS DO ELEMENTO UL O Netscape introduziu o atributo TYPE também em listas ordenadas. Elerecebe o tipo do marcador que será utilizado ao lado dos itens da lista, o qual podeser CIRCLE, SQUARE OU DISC.4. Refresh Page São páginas normalmente sem links, que chamam outras depois de umdeterminado tempo dentro dela, sem nenhuma interferência do internauta. Para fazer uma página desta basta colocar no documento a seguinte linha decomando:Ex.:<HTML><HEAD><META HTTP-EQUIV="REFRESH" CONTENT="segundos; URL=Documento.htm"><TITLE> Título </TITLE></HEAD><BODY>Corpo do Documento</BODY></HTML>5. Tabelas Tabelas correspondem a um ótimo formato para originar informações, e é poressa razão que eles foram acrescentados à linguagem HTML 6
  • 7. 5.1 - CONSTRUINDO TABELAS COM O ELEMENTO TABLE A TAG <TABLE> é utilizada para a representação de dados tabulares. Aestrutura e o conteúdo da tabela devem ficar dentro das TAGs <TABLE> </TABLE>5.1.1 - O TÍTULO DA TABELA (ELEMENTO CAPTION) A TAG <CAPTION> especifica o título de uma tabela. Por exemplo:<CAPTION>Notas da primeira avaliação</CAPTION>5.1.2 - TABLE HEADINGS (ELEMENTO TH) A TAG <TH> é usada para especificar as células de cabeçalho da tabela.Essas células são diferentes das outras, pois seu conteúdo aparece geralmente emnegrito. O elemento TH pode ser apresentado sem conteúdo algum: issocorresponde a uma célula em branco. As tabelas podem ainda conter mais de umTH para uma dada coluna, ou linha, ou simplesmente não conter nenhum elementoTH, isto é, não conter em nenhuma célula em destaque. O TAG dela é:<HT>texto em destaque</HT>Observações: Elas devem ficar, assim como todas, dentro da TAG <TABLE>.5.1.3 - TABLE DATA (ELEMENTO TD) A TAG <TD> especifica a células de dados de uma tabela. Por se tratar dedados comuns (e não cabeçalhos), essas células possuem seu conteúdo escrito emfonte normal, sem nenhum destaque e alinhamento à esquerda. Assim como o TH,pode-se construir células em branco, usando o elemento TD, como no exemplo aseguir:<TD>Células de dados</TD>Observações: A TAG de terminação, <TD>, também é opcional.5.1.4 - END OF TABLE ROW (ELEMENTO TR) A TAG <TR> indica o fim de uma linha na tabela. Cada linha da tabela podeconter várias células, e portanto, é necessário que se faça uso de uma marcaçãoque indique exatamente o ponto de quebra de uma linha e início de outra. Todalinha deve terminar com um <TR>, com exceção da última linha da tabela, quedispensa o TR porque o uso da própria marcação de fim de tabela </TABLE> tornaimplícito o fim da linha. 7
  • 8. 5.2 - ATRIBUTOS PARA A TABELA As marcações das tabelas podem apresentar resultados diferentes, seacompanhadas de alguns atributos. Os principais são:6 . - INPUT A TAG <INPUT> especifica uma variedade de campos editáveis dentro deum formulário. Ele pode receber diversos atributos que definem o tipo demecanismo de entrada (botões, janelas de texto, etc.), o nome da variávelassociada com o dado da entrada, o alinhamento e o campo do valo mostrado. Oatributo mais importante do INPUT é o NAME. Ele associa o valor da entrada doelemento. Por exemplo, quando você for receber os dados, já, processados, irá vir oname : =resposta dada pelo visitante. Outro atributo importante é o TYPE. Eledetermina o campo de entradas de dados. Veja como se usa este atributo:<INPUT TYPE="TEXT" NAME="nome"> Para mudar o tamanho, da janela padrão, você tem que colocar o comandoSIZE. Por exemplo:<INPUT TYPE"TEXT" NAME="nome" SIZE=8>(ou número desejado) Outro comando importante é o VALUE. Ele acrescenta uma palavra digitadano comando à janela. Por exemplo:<INPUT TYPE"TEXT" NAME="nome" SIZE=8 VALUE="texto.">Olhe como ficaria:6.1 - TIPOS DE ELEMENTOS TYPE Você pode fazer várias coisas com o elemento TYPE. Por exemplo, para serum campo de senha, que quando digitado, apareça o símbolo "*", ao invés dasletras, você deve escrever o seguinte:<INPUT TYPE"PASSWORD" NAME="nome" SIZE=8>6.2 - TYPE="RADIO" Quando o usuário deve escolher uma resposta em uma única alternativa, deum conjunto, utiliza-se o RADIOButtons. Um exemplo típico do uso de tais botões, écuja resposta pode ser SIM ou NÃO. É preciso que todos os rádios buttons es ummesmo grupo, ou seja, referentes a mesma pergunta, tenham o mesmo atributo 8
  • 9. NAME. Para esse tipo de entrada, os atributos NAME e VALUE, são necessários.Veja a seguir:<INPUT TYPE="RADIO" NAME="você gostou dessa home page?"VALUE="sim">sim<p><INPUT TYPE="RADIO" NAME="você gostou dessa home page?"VALUE="nao">não<p>Repare:6.3 - TYPE ="PASSWORD" Este comando serve para fazer uma campo de senhas! Quando a pessoadigitar, aparecerá o sinal de "*"! O comando é:<INPUT TYPE="PASSWORD" NAME="SENHA" MAXLENGHT=6>6.4 - TYPE="CHECKBOX" Esse comando é válido quando apenas uma resposta, é esperada. Mas nemsempre está é a situação...O tipo CHECKBOX provê outros botões através dosquais mais de uma alternativa, pode ser escolhida. Definição dos checkboxs:<INPUT TYPE="CHECKBOX" NAME="netscape" VALUE="net">Netscape<p><INPUT TYPE="CHECKBOX" NAME="Explorer" VALUE="exp">InternetExplorer<p><INPUT TYPE="CHECKBOX" NAME="Mosaic" VALUE="mos">Mosaic<P><INPUT TYPE="CHECKBOX" NAME="Hot Java" VALUE="hot"> Hot Java<P> Veja o resultado: 9
  • 10. 6. 5 - TYPE="SUBMIT" Esse é o botão que submete os dados do formulário quando pressionados,ou seja, possibilitam, o envio, dos dados para o script que vai tratá-los. Veja comose adiciona o botão:<INPUT TYPE="SUBMIT" VALUE="enviar">Veja como ficará:6. 6 - TYPE="R ESET" No caso dos botões RESET, quando o botão é clicado, ele automaticamentelimpa todos os campos já preenchidos no formulário, voltando à situação inicial.<INPUT TYPE="RESET" VALUE="Limpar">Veja como ficará:6. 7 - TEXTAREA Para se limitar o tamanho do campo mostrado na tela, faz-se o uso dosatributos COLS e ROWS que especificam, respectivamente, o número de colunas elinhas que se deseja mostrar para o usuário. O atributo NAME é obrigatório, eespecifica o nome da variável, que será associada à entrada do cliente(navegador)O atributo value não é aceito nesse elemento, mas você pode colocar jáum texto da seguinte maneira. Veja como ele é colocado:<TEXTAREA NAME="nome" COLS=20 ROWS=3>texto</TEXTAREA> 10
  • 11. 6. 8 - SELECT Embora os usuários não precisem digitar sempre suas respostas, mostrarcada opção através de botões consegue um bom espaço, e facilidade. Veja comoele funciona:<SELECT><OPTION>opção1</SELECT> Veja o resultado:6.3 - EXEMPLO COMPLETO Abaixo, temos um exemplo completo de uma página com um formulário.<form action="http://www.uki.edu/cgi-bin/AnyForm.cgi" method="post"><input type="Hidden" name="AnyFormModle" value="Mail"><input type="Hidden" name="AnyFormDisplay" value="http://www.gun.com.br"><input type="Hidden" name="AnyFormTo" value="gun@gun.com.br"><input type="Hidden" name="AnyFormSubject" value="Dados do Formulário deHTML"> Qual o seu nome?<input type="Text" name="Nome" size="40"><br> Qual o seu E-mail?<input type="Text" name="E-mail" size="40"><p>Você gostou da minha Home Page?<input type="Radio" name="Gostou"value="Sim">sim <input type="Radio" name="Gostou" value="Mais ouMenos"CHECKED> 11
  • 12. Mais ou Menos <input type="Radio" name="Gostou" value="Não">Nem umpouco!<P> Qual a página que você mais gostou??<select name="MelhorPágina"><option value="Interface">Interface</option><option value="Imagens, som, etc.">Imagens, som, cores, comandos básicos,etc.</option><option value="Frames">Frames</option><option value="Ferramentas">Ferramentas</option><option value="Formulários">Formulários</option><option value="CGI">CGI</option><option value="JAVA">JAVA</option><option value="Java Script">Java Scipr</option><option value="VRML">VRML</option><option value="CHAT">CHAT</option><option value="Onde colocar">Onde colocar</option><option value="Onde divulgar">Onde Divulgar</option><option value="Bombas em Java Script">Bombas em Java Script</option><option value="Contadores de Acesso">Contadores de Acesso</option><option value="Organizando às informações">Organizando às informações</option></select><P> Deixe seus comentários sobre a minha Home Page:<textareaname="Comentários" cols="28" rows="5"></textarea><br> O que está faltando? <input type="Text" name="O que estáfaltando?"Value="o que falta?"><br>Essa Home Page lhe ajudou?<input type="Radio" name="Ajudou?"value="sim">Sim <input type="Radio" name="Ajudou?" value="Não!">Não!<p><input type="Submit" value="Enviar "><input type="Reset" value="Limpar Dados">7. CSSA CSS traz para a WEB a mesma conveniência de “um só lugar” para definir 12
  • 13. os estilos que estãodisponíveis na maioria dos editores de texto. Você pode definir uma CSS em umalocalização centralpara afetar a aparência das tags HTML em uma única página da WEB ou em todoum site da WEB.Embora a metodologia da CSS funcione com a HTML, não é HTML. Em vez disso, aCSS é um códigoseparado que amplia as capacidades da HTML, permitindo que você redefina omodo como as tagsHTML funcionam.VERSÕES DA CSSA CSS evoluiu nos últimos anos sob a orientação do W3C ( www.w3.org/Style/CSS/) até a sua versãoatual a 2(dois). Embora a maioria dos browsers modernos suporte a versão maisrecente, os browsersmais antigos suportam as combinações das versões antigas da CSS. Elas são:CSS - 1O W3C lançou a primeira versão oficial da CSS em 1996. Essa primeira versãoincluía a capacidade denúcleo associada às CSS, tais como a capacidade de formatar texto, definir fontes emargens.CSS – Positioning (CSS-P)Os criadores da WEB precisavam de uma forma de posicionar os elementos na telade forma precisa. ACSS 1 já havia sido lançada e a CSS-2 ainda estava distante, de modo que a W3Clançou uma soluçãointermediária: A CSS- Positioning. Esse padrão de destinava a ser uma propostaque seria discutidapelas várias partes envolvidas antes de ele ser oficializado. A Netscape e aMicrosoft assumiram essaspropostas, porém, e incluíram as idéias preliminares nas versões 4 de seusnavegadores. Embora amaioria dos recursos básicos sejam suportados em ambos os browsers comoo nome de “marca”diversos recursos forma deixados de fora.CSS – 2A versão mais recente da CSS surgiu em 1998. O nível 2 inclui todos os atributosdas duas versõesanteriores mais uma ênfase maior na facilidade de acesso e na capacidadede especificar CSSsespecificas de mídia. A partir do IE e Netscape 6 suportam CSS 2.CSS – 3Este padrão ainda está em desenvolvimento, e mesmo após o lançamentogeralmente leva alguns anos 13
  • 14. para que os navegadores suportem o padrão. Sem dúvida, a nova adiçãoserá o Scalable VectorGraphics (SVG). Esse é um formato que permite incluir formas (linhas, círculos,curvas e outras), comovetores e não bitmaps, levando o poder dos gráficos baseados no vetor e natipografia à WEB.REGRAS DA CSSO melhor da folha de estilo em cascata é que ela é incrivelmente fácil de configurar.Não exige plug-insou softwares diferente – apenas regras.Podemos definir regras que dizem a uma tag HTML especifica o seu conteúdo, oupode criar regrasgenéricas e, em seguida, aplicá-las às TAGS como quiser. Existem três etapas na regras da CSS.Seletor HTML: A parte de texto de uma TAG HTML se chama seletor. Exemplo:p {font: bold 12pt times;}Classe: Uma classe é uma regra de “agente livre” que pode ser aplicada aqualquer tag HTML deacordo com a sua vontade. Você pode dar à classe o nome que quiser. Uma classeé o tipo de seletormais versátil. Exemplo:.minhaclasse{font bold 12pt times;}ID: As regras de ID funcionam como os seletores de classe, porque podem seraplicadas, a qualquerTag HTML. Os seletores de ID, porém, geralmente são aplicados somenteuma vez na página adeterminada TAG HTML para criar um objeto para ser usado com uma funçãoJavaScript. Exemplo:#objeto{font bold 12pt times;}INCLUINDO CSS NO DOCUMENTOEmbora a CSS signifique nunca ter que definir a aparência de cada tagindividualmente, você aindatema liberdade de definir os estilos dentro das TAGS individuais. Isso éparticularmente útil parasubstituir cada um dos outros estilos que estão definidos para a página.Veja o exemplo abaixo:<html><head><title>CSS</title></head><body style="background-color:black;"><br><h1 style="color:red">A Bruxa de Blair</h1><h2 style="color:yellow">O Filme</h2> 14
  • 15. <BR><P style="color:White">o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme ofilme o filmeo filme o filme <br>o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme ofilme o filmeo filme o filme o filme <br>o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme o filme ofilme o filmeo filme o filme</p></body></html>DEFININDO CLASSESuso de seletor de classes permite configurar um estilo independente quevocê pode aplicar em seguida a qualquer TAG HTML Para definir um seletor declasse digite um ponto (.) e um nome de classe. Em seguida, abra a suadefinição com uma chave ({) O nome da classe pode ser o que você quiser, desdeque use letras e números. Por exemplo podemos criar uma classe chamada .copy{. Ela é uma classe independente e você pode usá-la com qualquer TAG HTML, com uma condição: as propriedades definidas para a classe devem funcionar com o tipo de tag com a qual você a usa.Para aplicar a sua classe a uma tag HTML inclua class=”nome” na tag na qual vocêdeseja aplicar a classe. Exemplo:<p class=”copy”>...</p>.DEFININDO IDSAssim como o seletor de classe, o seletor de ID pode ser usado para criar estilosexclusivos que são independentes de qualquer TAG HTML em particular. Assimsendo, eles podem ser designados a qualquer TAG HTML que se aplique. Asregras de ID sempre começam com (#) e, sem seguida, o nome do ID. Onome pode ser uma palavra ou qualquer conjunto de letras ou números quevocê quiser. Digite as suas definições para essa classe separando-as com umponto e vírgula. Você pode usar um ID com qualquer tipo de propriedade,mas o melhor uso para os seletores de ID é para definir os objetos exclusivos natela. Um ID não funcionará até ser especificada com uma TAG HTML individualdentro de um documento.Exemplo: #area{color:red;margin-left:9em;position:relative;}<P id=”area”>...</p>. 15

×