colocando linha de separação. <hr>
PROJETO EDUCAR É UMA COPERATIVA DE PROFISSIONAIS PREPARADO PARA AJUDAR A POPULAÇÃO MAIS CARENTE COM UM VALOR DE PREÇO MAIS EM CONTA
<hr>
<CENTER> VAMOS COLOCAR ALGUMAS PAGINAS EM UMA SO PAGINA</CENTER> <iframe src="DOWNLOAD.HTML" width="300"
height="200">WWW.GOOGLE.COM</iframe> <iframe src="FOTOS.html" width="300" height="200">WWW.GOOGLE.COM</iframe> <iframe src="VIDEOS.html" width="300" height="200">WWW.GOOGLE.COM</iframe> <svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg> <CENTER><p>VIDEO CANAL7<P>
<video width="320" height="240" controls> <source src="video4.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> COLOCANDO VIDEO COM IMAGENS
</video><IMG SRC=CANAL1.PNG width="320" height="240"> </video><IMG SRC=CANAL2.PNG width="320" height="240"> <p>VIDEO CANAL7<P>
<video width="320" height="240" controls> <source src="video5.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag.
</video><IMG SRC=CANAL3.PNG width="320" height="240"> </video><IMG SRC=CANAL4.PNG width="320" height="240"> <p>VIDEO CANAL7<P>
<video width="320" height="240" controls> <source src="video3.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg">
acabamos
agora vamos organizar todas as paginas do nosso site
home colocar um pouco de cada pagina.
vídeo na pagina de vídeo fotos na pagina de fotos musicas na pagina de musicas
<HTML>
<HEAD><img src=BANNER1.JPG height=300 width=1050><p> </HEAD> <TITLE>FOTOS</TITLE>
<BODY> </BODY>
</HTML>
<a href=home.html> HOME </a> <a href=albuns.html> ÁLBUNS </a> <a href=noticias.html> NOTICIAS </a> <a href=fotos.html> FOTOS </a>
<a href=download.html> DOWNLOAD </a> <a href=videos.html> VIDEOS </a>
<a href=ideias.html> IDEIAS </a> <a href=saude.html>AUDE</a>
<a href=esportes.html> ESPORTES </a> <a href=blogs.html>BLOGS</a>
<a href=quem somos.html> QUEM SOMOS </a><p> <img src=FOTO1.jpg height=100 width=100>
<img src=FOTO2.jpg height=100 width=100> <img src=FOTO3.jpg height=100 width=100> <img src=FOTO4.jpg height=100 width=100> <img src=FOTO5.jpg height=100 width=100> <img src=FOTO6.jpg height=100 width=100> <img src=FOTO7.jpg height=100 width=100> <P>
<img src=GIF1.GIF height=100 width=100> <img src=GIF2.GIF height=100 width=100> <img src=GIF2.GIF height=100 width=100> <img src=GIF3.GIF height=100 width=100> <img src=GIF4.GIF height=100 width=100> <img src=GIF5.GIF height=100 width=100> <img src=GIF6.GIF height=100 width=100>
<P><CENTER>
<a href=home.html> <img src=VOLTAR.JPG height=100 width=100></a> <a href=home.html> <img src=INICIAL.JPG height=100 width=100></a> <a href=home.html> <img src=AVANÇAR.JPG height=100 width=100></a>
20 01
MAGENS COMUNS .JPG, .PMB, <img src=FOTO1.jpg height=100
width=100>
IMAGENS COM ANIMAÇÃO .GIF
<img src=GIF1.GIF height=100 width=100>
IMAGENS CLICAVEIS <a href=home.html> <img src=VOLTAR.JPG height=100
width=100></a>
DEPOIS DE TANTO TRABALHO E CONHECIMETO AGORA VAMOS COLOCAR OS LINKS NOS BOTÕES.: <a href=home.html><img src=BT1.PNG height=30 width=100></a>
Obs: vamos substuir os nomes dos botões de bt1 para os nomes da paginas btHome.png
TABELAS
Tabelas - As tags HTML <table>, <td>, <tr>, <th> e <caption>
A tag <td> é utilizada para demarcar o conteúdo de uma célula de tabela. A tag <tr> é utilizada para demarcar o conteúdo de uma linha de tabela. Exemplo:
<table> <tr> <td>
<a href=home.html> HOME </a><P> <a href=albuns.html> ÁLBUNS </a><P> <a href=noticias.html> NOTICIAS </a><P> <a href=fotos.html> FOTOS </a><P>
<a href=download.html> DOWNLOAD </a><P> <a href=videos.html> VIDEOS </a><P>
<a href=ideias.html> IDEIAS </a><P> <a href=saude.html <SAUDE/a><P>
<a href=esportes.html> ESPORTES </a><P> <a href=blogs.html <BLOGS/a><P>
<a href=quem somos.html> QUEM SOMOS </a><p>
</td> <td>
<MARQUEE>
TAMBEM PODE COLOCAR ANIMAÇÃO COMO VOCÊ ESTA VENDO </MARQUEE>
BASTANTE TEXTO NESTA AREA OU IMAGENS <P> <img src=NOTICIAS1.JPG height=300 width=300> <img src=NOTICIAS2.JPG height=300 width=300> <img src=NOTICIAS3.JPG height=300 width=300> <p> </td> </tr> </table> ESPAÇO DA 1ª COLUNA COLOCAMOS OS BOTÕES ESPAÇO DA 2ª COLUNA COLOCAMOS ANIMAÇÃO, IMAGENS E TEXTOS
NESTE TIPO DE TABELA AS LINHAS NÃO APARECEM HOME ÁLBUNS NOTICIAS FOTOS DOWNLOAD VIDEOS IDEIAS ESPORTES QUEM SOMOS
PODE CONTINUAR COM TEXTO
Tabela com cores <table border=1 bgcolor='pink'>
<tr><td rowspan=2>1ª linha da 1ª coluna</td> </tr>
<tr><td>2ª coluna - 1ª linha</td><td>3ª coluna - 1ª linha</td> </tr></table>
LINKS INTERNOS: são aqueles que ligam uma seção de uma página com uma
outra seção da mesma página. Por exemplo, se eu quiser fazer uma referência para a seção Hipertexto dessa nossa apostila, basta que eu primeiro defina um nome para a seção Hipertexto e então adicione um link pra ela. Isso é feito da seguinte forma:
1 - Vou até o início da seção Hipertexto e adiciono o seguinte código, ao invés de simplesmente escrever o título da seção:
<a name="Hipertexto">Hipertexto</a>
2 - Adiciono o link pra essa seção com o seguinte código, <a href="#Hipertexto">Vá para a seção hipertexto</a>
O atributo name serve apenas para dar um nome para uma posição de uma página html. O valor de name pode ser qualquer um (nesse caso eu coloquei "Hipertexto").
Quando você fizer uma referência a um link interno utilizando o atributo href, você precisa necessariamente adicionar o caractere # (jogo da velha) antes
OBS: COLOQUE OS COMANDOS DE PARAGRAFOS PARA QUE OS NOMES FIQUEM UM ABAIXO DO OUTRO.
VAMOS PERSONALIZAR CADA PAGINA
HOME: tem um pouco de cada pagina, ÁLBUNS: Fotos e relatos das fotos NOTICIAS: imagens e noticias, DOWNLOAD: arquivo para baixar
VIDEOS: vídeos e relato dos vídeos, IDEIAS: interatividade SAUDE: fotos e assunto de saúde, ESPORTES: atualidade de esporte
BLOGS: site de fotos, QUEM SOMOS: um pouco da empresa. <HTML>
<HEAD><img src=BANNER1.JPG height=300 width=1050> </HEAD> <TITLE>HOME</TITLE>
<BODY> </BODY>
</HTML>
<a href=home.html> HOME </a> <a href=albuns.html> ÁLBUNS </a> <a href=noticias.html> NOTICIAS </a>
<a href=fotos.html> FOTOS </a> <a href=download.html> DOWNLOAD </a>
<a href=videos.html> VIDEOS </a> <a href=ideias.html> IDEIAS </a>
<a href=saude.html <SAUDE/a> <a href=esportes.html> ESPORTES </a>
<a href=blogs.html <BLOGS/a> <a href=quem somos.html> QUEM SOMOS </a><P>
VAMOS COLOCAR UM TEXTO AQUI NESTA AREA
</BODY> </HTML>
<img src=NOTICIAS1.JPG height=300 width=300> <img src=ESPORTE1.JPG height=300 width=300>
<img src=VIDEO1.JPG height=300 width=300> <img src=IDEIAS1.JPG height=300 width=300> <img src=BLOG1.JPG height=300 width=300> <img src=DOWNLOAD1.JPG height=300 width=300>
<img src=SAUDE1.JPG height=300 width=300> <img src=FOTOS1.JPG height=300 width=300> <img src=QUEMSOMOS1.JPG height=300 width=300>
16 05
A href (vai chamar a
pagina)home.html (a pagina que
será chamada)HOME (o botão que será
clicado para ligar a pagina) (espaçamento)Img src (comando que vai
chamar a imagem)NOTICIAS1.JPG
(imagem que será
chamada
)Height
(altura da imagem)Width
(largura da imagem)cada botão tem que estar na pasta e tem que corresponder com os mesmo nomes e extensão (png, jpg
ou gif)
ENTENDA QUE CADA BOTÃO VAI LIGAR COM UMA PAGINA
COLOCANDO ANIMAÇÃO NA PAGINA
Marquee é a tag de animação tanto para texto como para imagens Como funciona
<marquee>atenção últimos dias para inscrição do curso de web design</marquee>
As opções de direction são:
- “right”, da esquerda para direita; <marquee direction=right></marquee> - “lef” vice-versa da anterior; <marquee direction=left></marquee>
- “up”, de baixo pra cima e <marquee direction=up></marquee> - “down” de cima pra baixo. <marquee direction=down></marquee>
COLOCANDO UMA IMAGEM NO MARQUEE
<marquee direction=right><img src=minha foto.jpg></marquee> COLOCANDO COR NO MARQUEE
<marquee bgcolor=red>natalino</marquee> Há também outros atributos como velocidade:
<marquee scrolldelay="45" truespeed>CORRA QUE ESTA CHEGANDO O FIM DO MUNDO</marquee>
<marquee down ="45" truespeed>VOCÊ ESTA GOSTANDO DO CURSO DIGA PARA O SEU PROFESSOR. EU ESTOU GOSTANDO DO CURSO</marquee>
<marquee scrolldelay=down>VAMOS TREINAR</marquee>
<marquee style=slide direction="right">DA ESQUERDA PARA A DIRETA</marquee>
<marquee direction=up <P align="center"><center> <font color=#7B68EE>OSVALDO NATALINO DUARTE DOS
SANTO</font></p></marquee>
<marquee behavior="alternate"><img src=amigo2.jpg></marquee> O atributo behavior="alternate" faz com que o elemento movimentado vá e
volte.
12 09
para colocar os nomes nos botões use o photoshop ou outro editor de gráfico.
