Introducao HTML

Anlise e Desenvolvimento de Sistemas
Contedo: Introduo ao Desenvolvimento Web Prof.(a): Veronice de Freitas Semestre: 5
Introduo ao Desenvolvimento Web

Analise os cdigos e se possvel teste os exemplos copiando cada cdigo em um editor (pode ser o bloco de notas figura abaixo).
Salve cada exemplo em uma pasta com nome HTML (exemplo: codigo_01.html, codigo_02.html, ...).
Obs: para testar os cdigos poder clicar no arquivo com o boto direito do mouse e escolher o browser.
Obs: para desenvolver as atividades poder criar outra pasta exemplo: atividades e salvar cada cdigo com a extenso.html (exemplo: atividade_01.html, atividade_02.html,...).
Organizao do texto
TESTANDO HTML - W3SCHOOLS.COM ......................................................................................... 2 TABELA DE CORES EM HTML ........................................................................................................ 3 EXEMPLOS .......................................................................................................................................... 4 ATIVIDADE EM SALA ...................................................................... Erro! Indicador no definido.
UNOPAR VIRTUAL (pgina: 1)
TESTANDO HTML - W3SCHOOLS.COM

http://www.w3schools.com/html/html_examples.asp possvel testar os cdigos HTML usando w3schools.com (veja as indicaes nas figuras abaixo).
Exemplos cdigo HTML
http://www.w3schools.com/html/html_examples.asp Teste o cdigo
Informe o cdigo
TABELA DE CORES EM HTML

Exemplo tabela de cores (so utilizadas em alguns cdigos).
Fonte: http://www.ufpa.br/dicas/htm/htm-cor1.htm Outro link: http://www.problogger.com.br/tabela-decores-html-e-css-completa/
As cores em HTML so definidas em notao Hexadecimal pela combinao dos valores RGB (Red, Green e Blue). Os valores em hexadecimal so definidos em trs pares de nmeros de dois dgitos, comeando em 00 (0 decimal) e terminando em FF (255 em decimal). Cada smbolo hexadecimal comea sempre com uma cerquilha (#). Com a combinao dos trs valores decimais possvel obter mais de 16 milhes de cores (255 x 255 x 255). Voc pode criar uma cor personalizada em uma paleta de cores completa, clicando e selecionando abaixo:
Faa testes no endereo: http://www.activeinfo.c om.br/curso_html/tabela _de_cores_html.html
EXEMPLOS
Cdigo 01: cor de fundo Cdigo
<!DOCTYPE HTML> <html> <head> <title>Exemplo</title> </head> <body bgcolor="#33CCFF"> </body> </html>
seo body Resultado
Cdigo 02: exemplo pargrafo Cdigo

<!DOCTYPE HTML> <head> <title>Exemplo</title> </head> <body bgcolor="#FF0000"> <p>Demonstrao de um sem especificao de alinhamento.</p> </body> </html> pargrafo
Resultado
Cdigo 03: exemplo pargrafo (alinhamento) Cdigo

<!DOCTYPE HTML> <head> <title>Pargrafos</title> </head> <body bgcolor> <p>Este pargrafo utiliza a TAG P e alinhamento padro (esquerdo) </p> <p align="Right">Este pargrafo utiliza a TAG P e alinhamento direita</p> <p align ="center">Este pargrafo utiliza a TAG P e alinhamento centralizado</p> <p align ="justify">Este pargrafo utiliza a TAG P e alinhamento justificado. Para ver o resultado digite um texto grande o suficiente. Este pargrafo utiliza a TAG P e alinhamento justificado. Este pargrafo utiliza a TAG P e alinhamento justificado. Este pargrafo utiliza a TAG P e alinhamento justificado. </p> </body> </html>
Resultado

Cdigo 04: fonte Cdigo
<HTML> <HEAD> <TITLE>Curso de HTML - Fontes</TITLE> </HEAD> <BODY> <FONT SIZE="7" FACE="Times New Roman" COLOR="#FF0000"> Fonte Times New Roman com tamanho 7 e cor Vermelha.</FONT><BR> <FONT SIZE="6" FACE="Arial" COLOR="#CC33CC""> Fonte Arial com tamanho 6 e cor Pink.</FONT><BR> <FONT SIZE="5" FACE="Tahoma" COLOR="Blue"> Fonte Tahoma com tamanho 5 e cor Azul.</FONT><BR> <FONT SIZE="4" FACE="Verdana" COLOR="Gold"> Fonte Verdana com tamanho 4 e cor Gold</FONT><BR> <FONT SIZE="3" FACE="Helvetica" COLOR="DarkGreen"> Fonte Helvetica com tamanho 3 e cor Verde Escuro</FONT><BR> <FONT SIZE="2" FACE="Courier New" COLOR="Gray"> Fonte Courier New com tamanho 2 e cor Cinza</FONT><BR> <FONT SIZE="1" FACE="Impact" COLOR="#000000"> Fonte Impact com tamanho 1 e cor Preta</FONT><BR> </BODY> </HTML>
Fonte: http://www.albertoferes.com.br/menu_esquerdo/downloads/informatica/Apo_%20HTML.pdf

Cdigo 05: linhas Cdigo
<HTML> <HEAD> <TITLE>Curso de HTML - Linhas Horizontais</TITLE> </HEAD> <BODY> Espessura 5 <HR SIZE="05"> <BR> Largura 80% da pgina:<HR SIZE="05" WIDTH="80%"> <BR> Alinhamento direita:<HR SIZE="05" ALIGN="Right" WIDTH="30%"> <BR> Linha sem nenhum atributo:<HR> Linha com COR Vermelha:<HR NOSHADE COLOR="Red"> </BODY> </HTML>
Resultado
Cdigo 06: cabealho Cdigo

<!DOCTYPE HTML> <html> <head> <title>Exemplo</title> </head> <body bgcolor="#FF0000"> <H1>Ttulo</H1> <H2>Ttulo</H2> <H3>Ttulo</H3> <H4>Ttulo</H4> <H5>Ttulo</H5> <H6>Ttulo</H6> </body> </html>
Resultado
Cdigo 07: estilo da fonte Cdigo

<!DOCTYPE HTML> <html> <head> <head> <title>Exemplo</title> </head> <body> <font size=7> <u>Sublinhado</u> <i><p>Itlico</p></i> <b><p>Negrito</p></b> <b><i><p>Negrito / Itlico</p></i></b> </font> </body> </html>
Resultado
Cdigo 08: Lista no ordenada (no numerada) Cdigo <!DOCTYPE HTML> <html> <head> <title>Exemplo</title> </head> <body> <font size=5> <p>Minhas frutas preferidas:</p> <ul> <li>Manga</li> <li>Uva</li> <li>Melo</li> </ul></font> </body> </html>
Resultado

Cdigo 09: Lista no ordenada intercalada Cdigo
<!DOCTYPE HTML> <html> <head> <title>Exemplo</title> </head> <body> <UL> <LI> Estados da regio sul do Brasil: <UL> <LI> Rio Grande do Sul <LI> Santa Catarina </UL> <LI> Um estado da regio nordeste: <UL> <LI> Pernambuco </UL> </UL> </body> </html>
Resultado
Cdigo 10: Lista numerada Cdigo

<!DOCTYPE HTML> <html> <head> <title>Exemplo</title> </head> <body> <font size=5> <p>Minhas frutas preferidas:</p> <ol> <li>Manga</li> <li>Uva</li> <li>Melo</li> </ol> </font> </body> </html>
Resultado

Cdigo 11: Lista numerada - <ol type = "a" > Cdigo
<!DOCTYPE HTML> <html> <head> <title>Ttulo da pgina</title> </head> <body> <h1>Tag de listas</h1> <ol type = "a" > <li> Internet</li> <li> Computador</li> <li> Site</li> </ol> </body> </html>
Resultado
Fonte: http://www.ifpr.edu.br/pronatec/wp-content/uploads/2012/07/auxiliar-web-design-web1.pdf
Cdigo 12: lista intercalada Cdigo

<!DOCTYPE HTML> <html> <head> <title>Ttulo da pgina</title> </head> <body> <h1>Tag de listas</h1> <OL> <LI> Lista de frutas <OL TYPE=A> <LI> ma <LI> banana </OL> <LI> Lista de verduras <OL TYPE=A> <LI> tomate <LI> cenoura </OL> </OL> </body> </html>
Resultado
Fonte: http://www.ifpr.edu.br/pronatec/wp-content/uploads/2012/07/auxiliar-web-design-web1.pdf
Cdigo 13: Listas numerada - <OL START=4> Cdigo

<!DOCTYPE HTML> <html> <head> <title>Exemplo</title> </head> <body> <OL START=4> <LI> Arroz <LI> Feijo <LI> Massa </OL> </body> </html>
Resultado
Fonte: http://www.inf.pucrs.br/~lleite/cursohtml2/parte2.prn.pdf Cdigo 14: Listas de Definies Cdigo

<!DOCTYPE HTML> <head> <title>Exemplo</title> </head> <body> <DL> <DT> Anti-vrus <DD> Programa capaz de detectar vrus em computadores. <DT> Bit <DD> Menor unidade de informao em um computador. </DL> </body> </html>
Resultado
Fonte: http://www.cafw.ufsm.br/~elisa/editorgrafico/apostilaBasicaHTML.pdf Cdigo 15: Hiperlink Cdigo

<!DOCTYPE HTML> <html> <head> <title>Exemplo</title> </head> <body> <font size="5"> <p>Clique <a href="http://www.unopar.br"> aqui</a> para acessar a Unopar.</p> </font> </body> </html>
Resultado

Cdigo 16: Hiperlink - target="_blank" Cdigo
<!DOCTYPE HTML> <head> <title>Exemplo</title> </head> <body> <font size="5"> <p>Clique <a href="http://www.unopar.br" target="_blank"> aqui</a> para acessar a Unopar.</p> </font> </body> </html>>
Resultado
Cdigo 17: Hiperlink (Visualizar outra pgina e retornar) Cdigo Exemplo: codigo_17_links.html
<HTML> <HEAD> <TITLE>Curso de HTML - Links</TITLE> </HEAD> <BODY> <H3>Link Para Pgina Local</H3> <A HREF="codigo_17_Link_Local.html"> Clique aqui </a> para visualizar o contedo do arquivo: <b> codigo_17_Link_Local.html </b> </body> </html>
Resultado
Exemplo: codigo_17_Link_Local.html
<HTML> <HEAD> <TITLE>Curso de HTML - Links</TITLE> </HEAD> <BODY> <H3>Link Para Pgina Local</H3> <A HREF="codigo_17_links.html">Clique aqui</A> voltar pgina Links.htm </BODY> </HTML>
Fonte: http://www.albertoferes.com.br/menu_esquerdo/downloads/informatica/Apo_%20HTML.pdf (veja outro exemplo para links usando arquivos em outros diretrios (pastas))

Cdigo 18: Imagem Cdigo
<!DOCTYPE HTML> <head> <title>Exemplo</title> </head> <body> <img src="codigo_18_imagem.jpg"> </body> </html>
Resultado
Faa testes usando outras imagens.
Cdigo 19: Imagem como fundo da pgina Cdigo

<!DOCTYPE HTML> <html> <head> <title>Ttulo da pgina</title> <h1>Imagem de fundo</h1> </head> <body background = "codigo_19_gianeccini-8.png"> </body> </html>
Resultado
Cdigo 20: Tabela 2 linhas por 3 colunas Cdigo

<!DOCTYPE HTML> <HTML> <HEAD> <TITLE>Criando Tabelas</TITLE> </HEAD> <BODY> <TABLE BORDER=1> <! Inicia a tabela e coloca uma borda de espessura igual a 1> <TR> <! Cria a primeira linha da tabela> <TD>PRIMEIRA COLUNA </TD> <! Aqui foi criada uma clula> <TD>SEGUNDA COLUNA </TD> <TD>TERCEIRA COLUNA </TD> </TR> <! Fecha a primeira linha da tabela> <TR> <! Abre a segunda linha da tabela>
Resultado

<TD> PRIMEIRA COLUNA</TD> <TD>SEGUNDA COLUNA </TD> <TD>TERCEIRA COLUNA </TD> <TR> <! Encerra a Segunda linha da tabela> </TABLE> <! Encerra a tabela> </BODY> </HTML>
Fonte: http://www.ancibe.com.br/html/tabelas.html Cdigo 21: Tabela tamanho das colunas (WIDTH) Cdigo
<!DOCTYPE HTML> <HTML> <HEAD> <TITLE>Criando Tabelas</TITLE> </HEAD> <BODY> <TABLE BORDER=2> <TR> <TD WIDTH=100> WIDTH=100</TD> <TD ALIGN=MIDDLE WIDTH=200>WIDTH=200 (PIXELS)</TD> </TR> </TABLE> </BODY> </HTML>
Resultado
Cdigo 22: tabela (ROWSPAN) Cdigo

<!DOCTYPE HTML> <HTML> <HEAD> <TITLE>Criando Tabelas</TITLE> </HEAD> <BODY> <TABLE BORDER=2 CELLPADDING=2> <TR> <TD ROWSPAN=2>Exemplo do uso do ROWSPAN</TD> <TD>CLULA 1</TD> </TR> <TR> <TD>CLULA 2</TD> </TR> </TABLE> </BODY> </HTML>
Resultado

Cdigo 23 Exemplo de tabela (5 linhas x 3 colunas) Cdigo Resultado
<!DOCTYPE HTML> <html> <head> <title>Tabela de Preos de produtos</title> </head> <body> <p>Tabela de Preos de produtos:</p> <table border="1"> <tr> <td>Produto</td> <td>Preo Unitrio</td> <td>Quantidade em estoque</td> </tr> <tr> <td>HD SATA 80 GB</td> <td>R$ 85,00</td> <td>35</td> </tr> <tr> <td>Pen Drive 2 GB</td> <td>R$ 15,00</td> <td>150</td> </tr> <tr> <td>Impressora Laser Colorida</td> <td>R$ 613,99</td> <td>18</td> </tr> <tr> <td>Monitor LCD 17'</td> <td>R$ 309,00</td> <td>41</td> </tr> </table> </body> </html>
Fonte: http://denecir.blogspot.com.br/2010/08/criar-tabela-html.html
Cdigo 24: Exemplo tabela ( rowspan ) Cdigo

<!DOCTYPE HTML> <html> <head> <title>rowspan</title> </head> <body> <p>Nesta pgina vemos a utilizao do atributo rowspan com valor 4:</p> <table border="1"> <tr> <th>Curso</th> <th>Carga Horria</th> <th>Perodo</th> <th>Dia da Semana</th> </tr> <tr> <td>C# e ASP Net</td> <td>40 horas</td> <td>manh</td> <td rowspan="5">Sbado</td> </tr> <tr> <td>Desenvolvimento Android</td> <td>50 horas</td> <td>tarde</td> </tr> <tr> <td>Java Web </td> <td>60 horas</td> <td>manh</td> </tr> <tr> <td>Servidores Linux</td> <td>50 horas</td> <td>tarde</td> </tr> <tr> <td>Formao Hardware</td> <td>200 horas</td> <td>integral</td> </tr> </table> </body> </html>
Resultado
Fonte: http://www.activeinfo.com.br/curso_html/tabelas_html.html

Cdigo 25: Tabela Aninhada Cdigo
<!DOCTYPE HTML> <html> <head> <title>Tabela Aninhada</title> </head> <body> <p>Nesta pgina vemos tabelas aninhadas:</p> <table border="1"> <tr> <th>Aluno</th> <th>Curso</th> </tr> <tr> <td>Marcos Cesar</td> <td> <table border="4"> <tr> <th>Nome</th> <th>Turno</th> </tr> <tr> <td>Linux</td> <td>Noturno</td> </tr> <tr> <td>Programao</td> <td>Tarde</td> </tr> </table> </td> </tr> </table> </body> </html>
Resultado
Cdigo 26: Espaamento nas clulas de tabelas em HTML

O cellpadding especifica o espao entre a linha interna da clula e o seu contedo e definido em pixels. O cellspacing define o espao entre as clulas.

Cdigo
<!DOCTYPE HTML> <html> <head> <title>Tabela</title> </head> <body> <p>Nesta pgina vemos espaamento em clulas de tabelas HTML:</p> <table border="1" cellspacing="10" cellpadding="4"> <tr> <th>Aluno</th> <th>Curso</th> </tr> <tr> <td>Marcos Cesar</td> <td>Linux</td> </tr> </table> </body> </html>
Resultado
Fonte: http://www.activeinfo.com.br/curso_html/tabelas_html.html Cdigo 27: Tabela (Colspan) Cdigo

<html> <head> <title>Colspan</title> </head> <body> <table border="1"> <tr> <th colspan="3">Cursos Linux</th> </tr> <tr> <th>Descrio</th> <th>Carga Horria</th> <th>Dias da Semana</th> </tr> <tr> <td>Administrao de Sistemas Linux</td> <td>40 horas</td> <td>Sbados</td> </tr> <tr> <td>Administrao de Servidores Linux</td> <td>50 horas</td> <td>Sbados</td> </tr> </table> </body> </html>
Resultado
Colspan
EXEMPLOS
Atividade 01: Crie o cdigo HTML correspondente a figura 01 apresentada na segunda coluna. figura 01 Resposta
<html> <head> <title>Listagem</title> </head> <body> <h4>Vantagens do xhtml perante o HTML:</h4> <ul> <li>Padronizao;</li> <li>Compatibilidade com xml;</li> <li>Portabilidade;</li> </ul> </body> </html>
Atividade 02: Crie o cdigo HTML correspondente a figura 02 apresentada na segunda coluna. figura 02 Resposta
<html> <head> <title>Lista Ordenada</title> </head> <body> <h4>Existem vrios tipos de listas ordenadas:</h4> <ol> <li>Numrica (padro);</li> <li>Alfabtica minscula ("a");</li> <li>Alfabtica maiscula ("A");</li> <li>Numerao Romana minscula ("i");</li> <li>Numerao Romana maiscula ("I").</li> </ol> </body> </html>
Atividade 03: Crie uma pgina para apresentar os nveis de cabealho apresentados na figura 03: Figura 03 Resposta
<html> <head> <title>Ttulo da pgina</title> <h1>Tag de Cabealho 1</h1> <h2>Tag de Cabealho 2</h2> <h3>Tag de Cabealho 3</h3> <h4>Tag de Cabealho 4</h4> <h5>Tag de Cabealho 5</h5> <h6>Tag de Cabealho 6</h6> </head> <body> </body> </html>

Atividade 04: Crie uma pgina para apresentar a cor de fundo amarela e cor do texto vermelho (veja a figura 04 abaixo). Figura 04 Resposta
<html> <head> <title>Ttulo da pgina</title> </head> <body bgcolor = "yellow" text = "#FF0000"> Cor do fundo amarelo e cor do texto vermelho. </body> </html>
Atividade 05: crie a pgina (veja figura 05) usando as tags: cabealho-nvel 1 <h1>, pargrafo <p>, tag <br> para quebra de linha). Figura 05 Resposta
<html> <head> <title>Ttulo da pgina</title> </head> <body> <h1>Tags de Pargrafo</h1> <p>Primeiro Pargrafo</p> <p>Segundo Pargrafo</p> <p>Terceiro Pargrafo</p> <!Um comentrio qualquer--> <p>Este texto<br>possui<br>quebras de linha.</p> </body> </html>

Atividade 06: Crie uma pgina (figura 06) usando a tag <h1> para apresentar o ttulo HTML e a tag <p> para apresentar o texto. Figura 06 Resposta <HTML> <HEAD> <TITLE>Minha primeira pgina HTML</TITLE> </HEAD> <BODY> <H1> HTML</H1> <P>Pginas HTML podem ser criadas em qualquer editor de texto.</P> </BODY> </HTML> Atividade 07: crie uma pgina (figura 07) usando a tag <h1> para informar o ttulo, <FONT
FACE="ARIAL" SIZE=2> e <p> para o texto. Insira uma imagem usando a tag .<IMG SRC="atividade_07_internet.jpg" ALT="Internet" ALIGN="right"> e faa um hiperlink para o saiba mais: usando <A HREF="http://www.ricardobarcelar.com.br/aulas/dp/aptl_html.pdf">Saiba mais</A>
Figura 07
Resposta
<HTML> <HEAD> <TITLE>Trabalhando com Imagens</TITLE> </HEAD> <BODY> <H1>A Internet</H1> <FONT FACE="ARIAL" SIZE=2> Internet ("Entre-rede") uma rede de computadores, capaz de interligar todos os computadores do mundo atravs de vrias redes interligadas. Cada rede individual administrada, mantida e sustentada em separado por instituies educacionais particulares e por outras organizaes.<IMG SRC="atividade_07_internet.jpg" ALT="Internet" ALIGN="right"> A Internet evoluiu de uma rede de uso meramente acadmico e militar para se tornar a maior fonte global de informao, jamais vista, constituindo o maior frum mundial de corporaes e pessoas interessadas em comunicarem-se entre si. A rede das redes, como conhecida, est cada vez mais trazendo para perto de ns a to esperada revoluo nos meios de comunicao dentro da sociedade. <br><br>
Obs: o texto sobre Internet est na apostila: http://www.ricardobarcelar.com.br/ aulas/dp/aptl_html.pdf
Saiba mais: <A HREF="http://www.ricardobarcelar.com.br/aulas/dp/aptl_h tml.pdf">Saiba mais</A> </FONT> </BODY> </HTML>

Atividade 08: Qual o resultado do cdigo abaixo? Cdigo
<HTML> <HEAD> <TITLE> Exemplo que mostra os possveis variaes com fontes. </TITLE> </HEAD> <BODY> <FONT SIZE=1 FACE=arial COLOR=#FF0000> Arial, tam. 1 </FONT> <BR> <FONT SIZE=3 FACE=helvetica COLOR=#00FF00> Helvetica, tam. 3 </FONT> <BR> <FONT SIZE=5 FACE=times COLOR=#0000FF> Fonte de tamanho 5 </FONT> <BR> <FONT SIZE=7 COLOR=#FF00FF> Times o padro</FONT> </BODY> </HTML>
Resultado
Atividade 09: Qual o resultado do cdigo abaixo? Cdigo Resultado

<html> <head> <title> Exemplo - Tabela </title> </head> <body> <table width="467" border="1px"> <tr> <td width="101" height="40">Nome</td> <td width="113">Telefone</td> <td width="140">Endereo</td> <td width="85">Cep</td> </tr> <tr> <td height="40">Ricardo</td> <td>(21) 9999-9999</td> <td>Rua Dois, casa 3.</td> <td>99999-999</td> </tr> </table> </body> </html>
fonte: http://www.linhadecodigo.com.br/artigo/3573/tabela-htmlestilizando-tabelas.aspx

Atividade 10: Crie uma tabela contendo a estrutura apresentada na figura abaixo. Figura Resposta
<TABLE BORDER=1> <TR> <TH COLSPAN=2>Colunas 1 e 2</TH> </TR> <TR> <TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD> </TR> <TR> <TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD> </TR> <TR> <TH ROWSPAN=3>3 linhas</TH><TD>uma linha</TD> </TR> <TR> <TD>duas linhas</TD> </TR> <TR> <TD>tres linhas</TD> </TR> </TABLE>
Atividade 11: Crie uma pgina contendo o contedo apresentado na figura abaixo (nesse exemplo contm uma tabela de 1 linha x 2 colunas, uma lista de marcadores na primeira clula da tabela e uma imagem na segunda clula da tabela). Figura Resposta
<html> <head><title>Exemplo</title> </head> <body> <h1>Trabalhando com tabela / marcadores / imagens</h1> <table border = "1"> <tr> <td valign="top" width="46%"> Veja se consegue enxergar, as seguintes imagens na figura ao lado: <ul> <li>O rosto de um velho</li> <li>Uma moa</li> <li>Um cachorro</li> <li>Um outro velho</li> <li>Um pssaro</li> <li>E algo mais</li> </ul> </td> <td align = "center"> <img src="atividade_11_imagem.jpg"> </td> </tr> </table> </body> </html>
Atividade 12: analise o cdigo abaixo e estruture o resultado: Cdigo Resposta <html> <head> <title>Lista Aninhada</title> </head> <body> <h4>Aqui vemos tcnicas de aninhamento em listas padro. </h4> <ul> <li>Este o primeiro nvel <ul> <li>Aqui estamos em um nvel mais interno</li> <li>Podemos notar que o marcador mudou automaticamente <ul> <li> possvel entrar em nveis ainda mais internos.</li> <li>E constatamos que o tipo de marcador continua mudando</li> </ul> </li> </ul> </li> <li>Voltamos ao nvel mais externo</li> </ul> <h4> Aqui vemos tcnicas de aninhamento em listas ordenadas (numricas). </h4> <ol> <li>Voltamos ao nvel mais externo <ol> <li>Nesta lista figuras</li> <li>Ao invs dos marcadores padro <ol> <li>Mesmo em nveis mais internos</li> </ol> </li> </ol> </li> </ol> </body> </html>
Material de apoio:
WEB DESIGNER PASSO A PASSO PARA INICIANTES Neilon Mrcio http://www.gns1.com/webdesignerparainiciantes.pdf HTML Srgio Nunes http://web.fe.up.pt/~ssn/2012/cdi/slides/05-html.pdf Apostila Web Design http://www.idepac.org.br/apostilas/web_designer2005.pdf HTML Fabiano Flores http://diegolopes.net/downloads/1INF/2824_HTML.pdf HTML http://www.facunte.com.br/livros/dw7/livro_delphi_web_capitulo_5.pdf Listas http://www.inf.pucrs.br/~lleite/cursohtml2/parte2.prn.pdf HTML / CSS (CSS ser abordado na teleaula 02) http://www.ifpr.edu.br/pronatec/wp-content/uploads/2012/07/auxiliar-web-design-web1.pdf

Introducao HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Introducao HTML

Caricato da

Copyright:

Formati disponibili

Anlise e Desenvolvimento de Sistemas

Contedo: Introduo ao Desenvolvimento Web Prof.(a): Veronice de Freitas Semestre: 5

Introduo ao Desenvolvimento Web

UNOPAR VIRTUAL (pgina: 1)

Anlise e Desenvolvimento de Sistemas

TESTANDO HTML - W3SCHOOLS.COM

Exemplos cdigo HTML

http://www.w3schools.com/html/html_examples.asp Teste o cdigo

UNOPAR VIRTUAL (pgina: 2)

Anlise e Desenvolvimento de Sistemas

TABELA DE CORES EM HTML

Fonte: http://www.ufpa.br/dicas/htm/htm-cor1.htm Outro link: http://www.problogger.com.br/tabela-decores-html-e-css-completa/

UNOPAR VIRTUAL (pgina: 3)

Anlise e Desenvolvimento de Sistemas

seo body Resultado

Cdigo 02: exemplo pargrafo Cdigo

Cdigo 03: exemplo pargrafo (alinhamento) Cdigo

UNOPAR VIRTUAL (pgina: 4)

Anlise e Desenvolvimento de Sistemas

UNOPAR VIRTUAL (pgina: 5)

Anlise e Desenvolvimento de Sistemas

Cdigo 06: cabealho Cdigo

UNOPAR VIRTUAL (pgina: 6)

Anlise e Desenvolvimento de Sistemas

Cdigo 07: estilo da fonte Cdigo

UNOPAR VIRTUAL (pgina: 7)

Anlise e Desenvolvimento de Sistemas

Cdigo 10: Lista numerada Cdigo

UNOPAR VIRTUAL (pgina: 8)

Anlise e Desenvolvimento de Sistemas

Cdigo 12: lista intercalada Cdigo

UNOPAR VIRTUAL (pgina: 9)

Anlise e Desenvolvimento de Sistemas

Cdigo 13: Listas numerada - <OL START=4> Cdigo

Fonte: http://www.inf.pucrs.br/~lleite/cursohtml2/parte2.prn.pdf Cdigo 14: Listas de Definies Cdigo

Fonte: http://www.cafw.ufsm.br/~elisa/editorgrafico/apostilaBasicaHTML.pdf Cdigo 15: Hiperlink Cdigo

UNOPAR VIRTUAL (pgina: 10)

Anlise e Desenvolvimento de Sistemas

UNOPAR VIRTUAL (pgina: 11)

Anlise e Desenvolvimento de Sistemas

Faa testes usando outras imagens.

Cdigo 19: Imagem como fundo da pgina Cdigo

Cdigo 20: Tabela 2 linhas por 3 colunas Cdigo

UNOPAR VIRTUAL (pgina: 12)

Anlise e Desenvolvimento de Sistemas

Cdigo 22: tabela (ROWSPAN) Cdigo

UNOPAR VIRTUAL (pgina: 13)

Anlise e Desenvolvimento de Sistemas

UNOPAR VIRTUAL (pgina: 14)

Anlise e Desenvolvimento de Sistemas

Cdigo 24: Exemplo tabela ( rowspan ) Cdigo

Anlise e Desenvolvimento de Sistemas

Cdigo 26: Espaamento nas clulas de tabelas em HTML

UNOPAR VIRTUAL (pgina: 16)

Anlise e Desenvolvimento de Sistemas

Fonte: http://www.activeinfo.com.br/curso_html/tabelas_html.html Cdigo 27: Tabela (Colspan) Cdigo

UNOPAR VIRTUAL (pgina: 17)

Anlise e Desenvolvimento de Sistemas

UNOPAR VIRTUAL (pgina: 18)

Anlise e Desenvolvimento de Sistemas

UNOPAR VIRTUAL (pgina: 19)

Anlise e Desenvolvimento de Sistemas

Obs: o texto sobre Internet est na apostila: http://www.ricardobarcelar.com.br/ aulas/dp/aptl_html.pdf

Saiba mais: <A HREF="http://www.ricardobarcelar.com.br/aulas/dp/aptl_h tml.pdf">Saiba mais</A> </FONT> </BODY> </HTML>