Baixar para ler offline
Apresentação1.pptx
- 1. Construção de páginasweb Sistemas de Informação
- 2. HTML • Hiper TextMarkup Language – é a linguagem de marcação de hipertexto. • O HTML (HyperText Markup Language) é um conjunto estruturado de instruções, conhecidas por etiquetas ou tags (em inglês), que dizem a um browser como publicar uma página web, ou seja, o browser interpreta essas etiquetas e desenha a página no ecrã. Estes conjuntos de instruções estão agrupados em ficheiros de tipo texto, i.e., sem qualquer tipo especial de formatação. Prof. Sérgio Queirós 2
- 3. HTML - HyperTextMarkup Language • Linguagem simples baseada em hipertexto. • Utiliza marcadores ou tags. • Linguagem em que são escritas as páginas web (interpretada pelo navegador/browser)
- 4. O Código HTML •Formata os documentos no sentido de definir onde e com que aspecto é apresentada a informação. • É feito em ficheiros de texto simples, como por exemplo o Bloco de Notas. • No Internet Explorer, podemos visualizar o código HTML, no menu VER > Código fonte. 4
- 5. O Código HTML •Entre os elementos mais comuns que aparecem no corpo de uma página temos os seguintes: • Parágrafos de texto (texto simples, texto formatado, texto artístico (ex: wordart) • Tabelas • Links ou Hiperlinks (ligações no mesmo documento ou a outros documentos ou sites) • Imagens, animações gráficas, vídeo, som, etc. 5
- 6. Significados • Hipertexto: textocom ligações a outro texto. • Markup: Código baseado em marcas ou etiquetas (tags em inglês) • A maior parte das linguagens de programação utiliza expressões em inglês. 6
- 7. Tipos de sites •Hoje em dia, temos dois tipos distintos de Web sites: • Web sites estáticos: compostos por páginas ou documentos HTML. • Web sites dinâmicos: são constituídos por páginas em HTML ou DHTML (Dynamic HTML) ou outra linguagem como por exemplo Java, Java script, ASP-Active Server Pages, PHP- Personal Home Page ext. 7
- 8. Requisitos para desenvolvimentode uma página WEB • Conhecer a linguagem HTML para escrever o código fonte de uma página; • Possuir um Editor de texto para criar o código fonte (bloco de notas, FrontPage, Dremweaver, NotePAd++entre outros); • Um navegador de internet (browser) para visualizar as páginas (IE, Mozila, etc.) Prof. Sérgio Queirós 8
- 9. Tag´s • Os comandosHTML são chamados de TAG´s, compreendem marcas padrões que são utilizadas para fazer indicações a um browser • Os comandos tem uma sintaxe própria, e seguem algumas regras: • As TAG´s aparecem sempre entre sinais de “menor que” (<) e “maior que” (>); • Geralmente são utilizadas aos pares, sendo que a TAG de finalização de um comando qualquer é finalizada sempre com a precedência de uma barra (/). Exemplo <NOMEDATAG></NOMEDATAG> Prof. Sérgio Queirós 9
- 10. Estrutura Básica deum Documento em HTML <!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> A minha Primeira Página Html </body> </html> É uma instrução, que deve ser sempre a primeira a aparecer numa página HTML, para indicar ao browser qual a versão da linguagem em que a página esta escrita.
- 11. Estrutura Básica deum Documento em HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Document</title> </head <body> Primeira Página </body> </html> TAG O QUE FAZ <html> Marca o início e o fim do documento HTML. Com ele iniciamos e finalizamos a construção da página Web. <head> Marca o início e do fim do cabeçalho, ou seja, a área onde serão descritos cabeçalhos e o título da página <title> Marca o início e o fim do título do cabeçalho. O título da página aparecerá na barra superior do browser. <body> Marca o início e o fim do do corpo da página
- 12. Formatação de Texto •<FONT> - Permite mudar os parâmetros dos textos escritos. Ex: tamanho, cor e tipo de letra. <HTML> <BODY> <FONT FACE=”ARIAL” COLOR=”GREEN” SIZE=”5”> isto é um teste </FONT> </BODY> </HTML>
- 13. Atributos do <BODY> •Entre <body> e </body> fica tudo o que são configurações e informações da página. Nesta TAG podemos ainda acrescentar parâmetros como: • <body bgcolor=“…”> para definir uma cor de fundo para a página. Entre as aspas coloca-se o código da cor. • <body background=“…”> para definir uma imagem de fundo para a página. Entre aspas coloca-se o nome completo (nome e extensão, ex:fundo.jpg) ou o caminho para o ficheiro. 13
- 14. Atributos do <BODY> •<body text=“…”> para definir uma cor do texto para a página. Entre as aspas coloca-se o código da cor ou o nome em inglês. • <body link=“…”> para definir a cor dos links na página. Convém que os links sejam de cor diferente do resto do texto para se diferenciar. • <body vlink=“…”>para definir a cor dos links que já foram visitados. Convém que os links sejam de cor diferente do resto do texto para se diferenciar. 14
- 15. Atributos do <BODY> •Quando definimos uma cor pelo nome por exemplo Azul. • <body bgcolor=“blue”> • Podemos escurecer a tonalidade. • <body bgcolor=“darkblue”> • Podemos iluminar (aclarar) a tonalidade. • <body bgcolor=“lightblue”> 15
- 16. Exemplo <html> <head> <title> A minhaprimeira página </title> </head> <body bgcolor=“blue”> </body> </html> 16
- 17. Tamanho da letra Ostítulos implicam também uma separação em parágrafos, portanto, tudo o que for escrito dentro de <h1> e </h1> (ou qualquer outro títulos ) será colocado em um parágrafo independente. Podemos ver como se apresentam alguns títulos a seguir: <html> <head> <title>Todos os cabeçalhos</title> </head> <body> <h1> Isto é um título de 1º nível </h1> <h2> Isto é um título de 2º nível </h2> <h3> Isto é um título de 3º nível </h3> <h4> Isto é um título de nível 4</h4> <h5> Isto é um título de nível 5</h5> <h6> Isto é um título de nível 6</h6> </body> </html> 17
- 18. Formatação dos títulos Ostítulos podem ser alinhados ao Centro, direita ou esquerda. <h1 Align=Center>Isto é um título de 1ºnível e centrado </h1> <h4> Align=Right> Isto é um título de 4ºnível e alinhado à direita </h4> <h4> Align=left> Isto é um título de 4ºnível e alinhado à direita </h4> 18
- 19. Formatação de Texto Alteraro estilo do texto escrito: • <I> </I> - para colocar o texto em itálico. • <B></B> - para colocar o texto em negrito. • <U></U> - para sublinhar o texto. • <S></S> - para riscar o texto. <HTML> <BODY> <I> Texto em itálico </I> <B>Texo em negrito </B> <U>Texto sublinhado </U> <S> Texto riscado </S> </BODY> </HTML>
- 20. FORMATAÇÃO DA COR Acor do texto pode ser definida através do atributo cor. Cada cor é por sua vez definida por um número hexadecimal que está composto por três partes. Cada uma destas partes representa a contribuição do vermelho, verde e azul sistema RGB. Por outro lado é possível definir de uma maneira imediata algumas das cores mais utilizadas. 20
- 21.
- 22. Parágrafos • <P> -Inserir um parágrafo. A tag final é opcional. <HTML> <BODY> <P><FONT FACE=”ARIAL” COLOR=”GREEN” SIZE=”5”> isto é um teste </FONT></P> E isto já é outro teste </BODY> </HTML>
- 23. Mudança de Linha •<BR> - Efectua a mudança de linha. Funciona como um “Enter” no mesmo parágrafo. Não possui tag final. <HTML> <BODY> <P><FONT FACE=”ARIAL” COLOR=”GREEN” SIZE=”5”> isto é um teste </FONT></P> e isto <BR> já <BR> outro teste </BODY> </HTML>
- 24. Linha Horizontal • <HR>- Cria uma linha horizontal. Não possui tag final.
- 25. Listas • <UL> </UL>- Cria listas não ordenadas; • <OL></OL> - Cria listas ordenadas; • <LI></LI> - Cria os tópicos das listas. <HTML> <BODY> <UL> Disciplinas <LI> Português </LI> <LI> Matemática</LI> <LI> Inglês</LI> <LI> Filosofia</LI> </UL> </BODY> </HTML>
- 26. Tabelas • <TABLE></TABLE> -Cria uma tabela. • <TR></TR> - Define as linhas. • <TD></TD> - Define as colunas dessa mesma linha. <HTML> <BODY> <TABLE BORDER=”1”> <TR> <TD> Esta é a primeira linha, primeira coluna </TD> <TD> Esta é a primeira linha, segunda coluna </TD> </TR> <TR> <TD> Esta é a segunda linha, primeira coluna </TD> <TD> Esta é a segunda linha, segunda coluna </TD> </TR> </TABLE> </BODY> </HTML>
- 27. Comentários • <!— —>- Permite introduzir comentários no código. É muito útil, quando o código HTML é muito extenso uma vez que permite comentar o que está criado em vários pontos do script. <HTML> <BODY> <!-- isto que aqui está escrito não aparece no browser --> isto sim, já aparece no browser </BODY> </HTML>
- 28. Hiperligações • <A> </A>- Cria uma hiperligação para outra página. <HTML> <BODY> <A HREF=”outrapagina.html”>Consultar outra página</A> </BODY> </HTML>
- 29. Inserção de Imagem •<IMG> - Permite mostrar uma imagem no browser. <HTML> <BODY> <IMG SRC=”nomedaimagem.gif”> </BODY> </HTML> Caso a imagem esteja num directório diferente da do documento, é necessário indicar o directório através de "../nome_do_diretório". Ex: <IMG SRC="../figuras/carta.gif">
- 30. Estrutura básica doHTML <HTML></HTML> Inicializa/finaliza uma página. <HEAD></HEAD> Inicializa/finaliza o cabeçalho. <TITLE> </TITLE> Define o título da sua página na barra de título do Browser. <BODY></BODY> Inicializa/finaliza o corpo da página. <P> Define o início do parágrafo. Pode ou não ter par com </P> (é opcional).
- 31. Formatação de Textos <Hn>Texto </Hn> Cria cabeçalhos com diferentes formatações (onde n vai de 1 à 6). <BR> Realiza a quebra de linha. <HR> Cria uma linha horizontal. <B> Texto </B> Texto em negrito. <I> Texto </I> Texto em itálico. <U> Texto </U> Texto sublinhado. <S> Texto </S> Texto riscado.
- 32. Listas <UL> </UL> Crialistas não ordenadas. <OL> </OL> Cria listas ordenadas. <LI> </LI> Cria os tópicos das listas.
- 33. Tabelas <TABLE border=“1”> </TABLE> Cria umatabela. <TR> </TR> Define as linhas. <TD> </TD> Define as colunas.
- 34. Outros <IMG src=“../figuras/carta.gif”> Insere uma imagem.Não possui tag final. <A> </A> Insere uma hiperligação. <!– Isto é um comentário--> Insere um comentário.