Profª. Elizangela M. F. da Silva Responsável: Carlos Alberto da Silva INTRODUÇÃO O que é uma Página Web? - Página Web - textos e códigos especiais (tags). - Além da informação textual, esse documento pode conter imagens, som, animação e vídeo. - A página pode conter links ou ligações para outras páginas armazenadas no seu micro ou qualquer local da web (home page). BROWSERS Como se acessa uma Página Web? O acesso de uma página Web é feito através de um programa chamado browser. EDIÇÃO DE DOCUMENTOS HTML Personalização do Dreamweaver CONFIGURAÇÃO DE UM SITE LAYOUT GERENCIAR ARQUIVOS E PROPRIEDADES DO SITE HTML? COMO É A LINGUAGEM HTML A HTML ( Hypertext Markup Language) , na sigla em inglês, significa Linguagem de Marcação de Hipertexto. É uma linguagem dedicada à construção de páginas Web. COMO SÃO OS TAGS HTML? - As tags podem ser apresentadas em pares ou individuais. - Os tags são identificados por serem envolvidos pelos sinais “<>” ou “</>”. O formato genérico de um tag é: <Nome da tag>texto</Nome da tag> DOCUMENTO HTML COMPONENTES BÁSICO <html> <head> <title>Título da Página</title> </head> <body> Área para os comandos da linguagem.... </body> </html> E SEUS EXEMPLO I SALVE COMO: .HTM <html> <head> <title>Minha Primeira Página</title> </head> <body> Meu Curso de HTML e Dreamweaver. </body> </html> OU HTML ALINHAR O TEXTO Marca uma divisão lógica de um documento e é uma formatação bastante usada atualmente. <div> e </div> O atributo de alinhamento é: align . As opções de alinhamento são: center - texto centralizado right - texto à direita left - texto à esquerda EXEMPLO II SALVE COMO: .HTM OU HTML <html> <head> <title>Minha Primeira Página</title> </head> <body> <div align="center"> Meu Curso de HTML e Dreamweaver.</div> <div align=“right"> Estou aprendendo meus primeiros comandos. .</div> <div align=“left"> </body> </html> Aprendi agora o comando div. .</div> SEPARADORES QUEBRA DE LINHA Quando queremos mudar de linha, usamos o elemento <BR>. EXEMPLO III SALVE COMO: .HTM <html> <head> <title>Minha Primeira Página</title> </head> <body> Só existem dois dias no ano em que nada pode ser feito. <br> Um chama-se "ontem" e o outro "amanhã". <br> Portanto, "hoje "é o dia certo para amar, acreditar, fazer <br> e principalmente viver. </body> </html> OU HTML PARÁGRAFOS Não é possível adicionar parágrafo em HTML apenas pressionando a tecla Enter. A tag de parágrafos são: <p> e</p> O atributo de alinhamento é: align . As opções de alinhamento são: center - texto centralizado right - texto à direita left - texto à esquerda EXEMPLO IV SALVE COMO: .HTM OU HTML <html> <head> <title>Minha Primeira Página</title> </head> <body> <P ALIGN=CENTER> Assim como os trens, as boas idéias às vezes chegam com atraso. </P> <P ALIGN=RIGHT> Assim como os trens, as boas idéias às vezes chegam com atraso. </P> <P ALIGN=LEFT> Assim como os trens, as boas idéias às vezes chegam com atraso. </P> </body> </html> CABEÇALHOS O cabeçalho é uma tag que define o tamanho de cada linha de um texto da página. O tamanho do cabeçalho pode ser diferenciado. As tags de parágrafos são: <Hn> e </nH> n – deve ser substituído por um número de 1 a 6. <h1> <h2> <h3> <h4> <h5> <h6> cabeçalho cabeçalho cabeçalho cabeçalho cabeçalho cabeçalho de de de de de de nível nível nível nível nível nível 1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6> EXEMPLO V SALVE COMO: .HTM <html> <head> <title>Minha Primeira Página</title> </head> <body> <h1> Cabeçalho de nível 1 </h1><br> <h2> Cabeçalho de nível 2</h2><br> <h3> Cabeçalho de nível 3</h3><br> <h4> Cabeçalho de nível 4</h4><br> <h5> Cabeçalho de nível 5</h5><br> <h6> Cabeçalho de nível 6</h6><br> </body> </html> OU HTML ESTILOS DE TEXTO Todos os comandos que alteram o estilo do texto são do tipo liga-desliga, ou seja, precisam ser especificados em pares, marcando o início e o fim do texto que sofrerá a formatação. - Negrito - <B></B> - aplica o estilo negrito. Itálico - <i></i> - aplica o estilo itálico. Sublinhado - <u></u> - aplica um sublinhado. Big - <BIG></ BIG > - aumenta a fonte e aplica negrito. Small - <SMALL></ SMALL > - reduz e altera a fonte. Sobrescrito - <SUP></SUP>- eleva o texto na linha e diminui seu corpo. Subscrito - <SUB></SUB> - rebaixa o texto na linha e diminui seu corpo. Pulsante - <BLINK></BLINK> - Faz com que o texto pisque. EXEMPLO VI SALVE COMO: .HTM OU HTML <html> <head> <title>Minha Primeira Página</title> </head> <body> <p>Bem vindos à minha página estilizada! <p>Minha página não contém <i>imagens</i>, mas pelo menos está <b>estilizada</b>. <p>Deveria haver mais textos aqui porém eu ainda não decidi o que escrever.<br> </body> </html> Exercício: Escolha um texto e aplique os efeitos aprendidos em sala (alinhamento de texto , quebra de linha, parágrafos, cabeçalhos, estilo de texto), não esqueça de postar no moodle. Sugestão: Hino da Gloriosa PONTE PRETA ... Conhecida como a MACACA. Dedicatoria: como o time mais antigo do Brasil ... 1905 !!!
Download
