Carregar apresentação
A apresentação está carregando. Por favor, espere
1
Desenvolvimento Web com Banco de Dados
HTML
2
Ementa Arquiteturas Computacionais para Web.
Tecnologias da Informação para Desenvolvimento de Sistemas em Internet. Linguagens de Programação do ambiente Web. Banco de Dados para Web. Programação no ambiente Cliente-Servidor Web.
3
Objetivo Capacitar o aluno a conhecer as principais tecnologias usadas na Web bem como as linguagens de programação usadas no desenvolvimento de aplicações que são acessadas pela Internet.
4
Programa da Disciplina
Apresentação da disciplina e conceitos básicos A Internet e a Web Histórico da Web Arquitetura Web. Requisições HTTP. HTML / ASP / JavaScript / Cascading Style Sheets (CSS)
5
Programa da Disciplina
Desenvolvimento de Sistemas Baseados na Web Linguagem de programação para Web (C#) Banco de Dados para Web Conceitos Básicos SQL SQLServer Exemplo de Aplicações E-Commerce E-Business
6
A WEB Navegador WEB Servidor Servidor de BD
7
O que o navegador faz? Servidor Navegador Páginas
Acessa a informação na rede. Lida com a formatação e a exibição dos documentos.
8
Acessa a informação na rede
O que o navegador faz Acessa a informação na rede URL Uniform Resource Locators Servidor Navegador URL – É o ponteiro para algum dado na WEB, seja um documento WEB, um arquivo FTP, um endereço de ...
9
Lida com a formatação e a exibição dos documentos
O que o navegador faz Lida com a formatação e a exibição dos documentos HTML – Hipertext Markup Language Linguagem de marcação de hipertexto XHTML – XML - Extensible Markup Language Linguagem de marcação extensível DHTML – HTML Dinâmico Maior interação com o usuário e páginas de estilo
10
Terminologia Site da WEB – Conjunto de uma ou mais páginas, vinculadas de forma significativa. Servidor WEB – Um computador que armazena um ou mais sites da WEB. Páginas da WEB – Um único elemento de um site, geralmente uma página html, sendo a página html um conjunto de tags html. Home Page – (Página inicial) – Página de entrada para um site Web.
11
Programas para escrever em HTML
Macromedia Dreamweaver Macromedia HomeSite Microsoft Frontpage Hot Dog ... Vamos usar um editor de texto para ter uma idéia do que o html realmente é, antes de ir para um editor que oculte as tags.
12
Boa prática de programação 1
As marcas da HTML não distinguem letras maiúsculas ou minúsculas. Contudo, manter todas as letras em uma única caixa melhora a legibilidade do programa. Aconselha-se escrever em letras minúsculas. Dê nomes aos seus arquivos que descrevam sua funcionalidade. Essa prática pode ajudá-lo a identificar mais rapidamente os documentos. Também ajuda as pessoas que querem definir um link para a sua página, ao lhe fornecer um nome fácil de lembrar para o arquivo.
13
Observação Os erros em marcação HTML normalmente não são fatais. O navegador fará de tudo que puder para exibir sua página, embora não da maneira pretendida.
14
Boa prática de programação 2
Coloque comentários no seu código. Os comentários ajudam outros programadores a compreender o código, auxiliam na depuração e listam outras informações úteis que você não quer que sejam exibidas pelo navegador. <!-- O comentário vem aqui -->
15
Estrutura de um arquivo HTML
Um arquivo HTML é composto de três partes. Uma linha contendo informações da versão do HTML. Uma seção de cabeçalho declarativa (delimitada pelo elemento HEAD) Um corpo, o qual contêm o conteúdo do documento. O corpo pode ser implementado pelo elemento body ou pelo elemento frameset.
16
Estrutura de um arquivo HTML
A Tag <html> - A primeira tag da estrutura de página em qualquer página html, ela indica que o conteúdo do arquivo está na linguagem html. A Tag <head> - Prólogo para o restante do arquivo, apenas algumas tags entram na parte <head>, nunca colocar texto no head (cabeçalho). A Tag <body> - É o corpo da página, incluindo texto e outros conteúdos.
17
As sintaxes de uma tag <NOMETAG>Faculdade Hélio Rocha</NOMETAG> <NOMETAG ATRIBUTOS=“” >Faculdade Hélio Rocha</NOMETAG> <NOMETAG ATRIBUTOS=“” /> <NOMETAG>
18
Uma página HTML <html> <head>
<title> Uma página HTML </title> </head> <body> Esta é uma página HTML </body> </html>
19
Tag <TITLE> O elemento title nomeia sua página Web. O título normalmente aparece na barra colorida no topo da janela do navegador, e também aparecerá como o texto que identifica sua página se um usuário acrescentar sua página ao Bookmark. O título também é usado por mecanismo de busca para finalidades de catalogação.
20
Tag <TITLE>
21
Tags <H1> até <H6> (Header ou Cabeçalho)
A Tag <h?> - É uma linha de cabeçalho, sendo usada para dividir a seção de texto. Os números indicam os níveis ( h1 a h6 ). A tags <H?> podem ter o atributo align = “left” ou “justify” ou “right” ou “center”
22
Listas Listas de Definição <dl> <dt>ABC</dt>
<dd>DEF</dd> <dt>GHI</dt> <dd>JKL</dd> </dl>
23
Listas ORDENADAS <ol> <li> ... </li> </ol> NÃO ORDENADAS <ul> <li> ... </li> </ul> Você pode com o uso do atributo type modificar a numeração e os marcadores. Ex: <ol type=“xxxx”>....</ol> Na tag <UL> os tipos podem ser: square, disc ou circle. Na tag <OL> os tipos podem ser: i, I, a, A ou 1.
24
Listas Ordenadas
25
Listas Não Ordenadas
26
Separador - <P> Para separar blocos de texto, usamos o elemento <P>
27
Separador - <BR>
Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário quando queremos uma quebra de linha em determinado ponto, pois os browsers já quebram as linhas automaticamente para apresentar os textos.
28
Separadores - <P> e <BR>
<P> tem atributo de alinhamento, como os cabeçalhos. O atributo ALIGN pode ter os valores CENTER, LEFT, RIGHT, JUSTIFY As quebras de linha do texto fonte não são significativas na apresentação de documentos em HTML.
29
Separador - <HR>
A tag <HR> insere uma linha horizontal. Atributos: SIZE: Largura. WIDTH: Comprimento. ALIGN: Alinhamento NOSHADE: Sem efeito tridimensional. COLOR: Cor.
31
Links Referencia-se a outros recursos tais como: outra página html, arquivos, imagens etc. Texto ou Imagens podem atuar como hyperlink. <a href=" <a Rômulo</a>
32
Imagens Três formatos mais populares: <img src=“logotipo.jpg” />
Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Portable Network Graphics (PNG) <img src=“logotipo.jpg” /> Atributos: src – Caminho(path) da Imagem. align – Alinhamento da Imagem border – Borda da Imagem alt – Texto da Imagem height – Altura da Imagem width – Largura da Imagem
33
<html> <head> <title>Título da Página</title> </head> <body> <ol> <li>Link com Texto</li> <a href=" Paes</a> <br> <li>Link com Imagem</li> <a href=" <img src="logoFTC.jpg" alt="Faculdade de Tecnologia e Ciências" border="0"/> </a> <li>Link para </li> <a </ol> </body> </html>
34
Tabelas <table>
Tabelas implementam um conceito importante de layout: as “grades”, segundo as quais organizamos textos e ilustrações de maneira harmoniosa. Como já foi possível perceber, as tabelas contêm textos, listas, parágrafos, imagens, formulários e várias outras formatações - inclusive outras tabelas.
35
Tabelas – Alguns Atributos
Atributo border Especifica a borda da tabela em pixels. Atributo summary Descreve o conteúdo da tabela Atributo caption Título da tabela
36
Tabelas – Seções Seção Head (Definida pelo elemento thead)
Contêm informações como o nome das colunas. Elemento tr define uma linha da tabela. Elemento th define as colunas na seção head. Seção Foot (Definida pelo elemento tfoot) Seção Corpo (Definida pelo elemento tbody) Elemento td define as células que contêm dados.
37
Normalmente os desenvolvedores só usam tabela com sua estrutura mais simples:
<table> <tr> <td>Coluna</td> </tr> <td>Dado</td> </table>
40
Formulário <form ...>xxx</form>
Atributos method – Indica o modo pelo qual as informações coletadas no formulário serão enviadas para o servidor Web para processamento. post – Use em um formulário que produz mudanças nos dados no servidor. Os dados são enviado como uma variável de ambiente, que os scripts são capazes de acessar. get – Deve ser usado quando o seu formulário não causar mudanças nos dados do lado servidor. Os dados do formulário que usa o get são anexados no final da URL. action – Especifica para qual URL os dados serão enviados.
41
Input O elemento input é comum em formulários e sempre exige o atributo type que indica o tipo, name que fornece um identificador único para o elemento e value que indica o valor que o elemento envia para o servidor.
42
Input (text) A entrada type=“text” insere uma caixa de texto de uma linha no formulário. O elemento label fornece uma descrição para o elemento input. O atributo size especifica a largura do texto de entrada e o atributo maxlenght define o número máximo de caracteres que o texto a ser inserido aceitará.
43
Input (hidden) A entrada type=“hidden” insere uma caixa de texto oculta normalmente usada para enviar informações sem que o usuário perceba. Os seus atributos são similares ao text.
44
Input (submit e reset) SUBMIT – Exibe um botão que permite ao usuário submeter os dados inseridos no formulário ao servidor para processamento. RESET – Permite que o usuário restaure todos os elementos do formulário a seus valores default.
45
Input (text, hidden, submit, reset)
46
Input (password) O campo de entrada da senha fornece uma maneira para os usuários inserirem informações que eles não desejam que os outros sejam capazes de ler na tela.
47
Input (password)
48
Input (Checkbox e Radio)
As caixas de seleção podem ser usadas individualmente ou em grupos. Cada caixa de seleção em grupo deve ter o mesmo name. Isso notifica o script que está tratando o formulário de que todas as caixas de seleção estão relacionadas umas com as outras. Os botões de radio quanto a sua função são similares às caixas de seleção mas diferem pelo fato de que somente um elemento no grupo pode ser selecionado de cada vez. Insira o atributo checked para indicar quais botões de rádio você gostaria que fossem selecionados inicialmente.
49
Input (Checkbox e Radio)
50
Textarea O elemento textarea insere uma caixa de texto no formulário. E você especifica o tamanho da caixa com o atributo rows, o qual define o número de linha que vai aparecer na textarea. Com o atributo cols, você especifica qual a largura que deve ter a textarea. Qualquer texto default que você quer colocar dentro da textarea deve estar contido no elemento textarea.
51
Select O elemento select inserirá uma lista de itens selecionáveis dentro do seu formulário. Para adicionar um item à lista, adicione ao elemento select um elemento option contendo o texto a ser exibido. O atributo selected aplica uma seleção default à sua lista. Você pode mudar o número de opções visíveis da lista a um só tempo usando atributo size. Você pode usar o atributo multiple para pode selecionar mais de um.
53
Frames Os frames, quando usados adequadamente, podem deixar seu site mais legível e utilizável pelos usuários. O elemento frameset informa ao navegador que a página contém frames. O atributo cols ou rows fornece o leiaute do conjunto de frames. O elemento frame especifica quais arquivos comporão o conjunto de frames.
54
Frames
Apresentações semelhantes
