Fundamentos do Desenvolvimento Web

FUNDAMENTOS DO
DESENVOLVIMENTO
WEB

Instrutor: Washington Silva
 Ciclo das Páginas Web
 HTML
 Principais TAGS
 Hiperlinks
 Tabelas
 Formulários
 Folhas de Estilos
Conteúdos

O QUE É HTML?
 HTML – é uma linguagem de marcação de
hipertexto.
 H - Hyper
 T – Text
 M - Markup
 L – Language

 HTML pode ser feito em qualquer editor de texto,
até mesmo o simples Bloco de Notas:

TAGS
 HTML pode ser feito em qualquer editor de texto,
até mesmo o simples Bloco de Notas.
 Tag é uma palavra-chave (comando) que define um
item (imagens, texto, hyperLink, etc.) que irá fazer
parte da página
 Lembrando que a grande maioria trabalha em
pares.
As tags são identificadas por
estarem entre os sinais < > e < />

TAGS
• <Comando> Seu Texto </Comando>

TAGS - PRINCIPAIS
<HTML> </HTML>
Marca o início e o fim do documento
<HEAD> </HEAD>
Marca o início e o fim do Cabeçalho
<TITLE> </TITLE>
Mostra o título na barra de título
<BODY> </BODY>
Determina o que vai ser o “corpo” do programa.

TAGS – NA PRÁTICA
• <HTML>
• <HEAD>
• <TITLE> Minha primeira Aula de HTML
• </TITLE>
• </HEAD>
• <BODY>
• Bom dia a todos, quem esta com sono
levanta a mão ..
• </BODY>
• </HTML>

 <HTML>
 <HEAD>
 <TITLE> Minha primeira Página </TITLE>
 </HEAD>

 <BODY>
 Sejam bem vindo ao mundo HTML!
 </BODY>
 </HTML>

TAGS - PRINCIPAIS
 <BODY>
<H1> Cabeçalho de tamanho 1 </H1>
<H6> Cabeçalho de tamanho 6</H6>
</BODY>

• <H1>
• Cabeçalho de tamanho 1
• <H2>
• <H3>
• <H6>

TAG – PARÁGRAFO <P>
• <HTML>
• <HEAD>
• <TITLE> Minha primeira Página </TITLE>
• </HEAD>
• <BODY>
• Sejam bem vindo ao mundo HTML, <P>agora viajaremos
• <P>no html<P>!!!!!
• </BODY>
• </HTML>

TAG – PARÁGRAFO <P>

TAG - QUEBRA DE LINHA <BR>
 O comando <br> faz uma quebra de linha. Este
comando também insere uma linha em branco no
seu local ou na linha seguinte á qual ele foi
inserido.

<HTML>
<HEAD>
<TITLE> Minha primeira página HTML </TITLE>
</HEAD>
<BODY>
Quando um comando <BR> é inserido em um local
do programa, o browser irá<BR> fazer uma quebra
de linha, <BR> posiciona-se na linha seguinte ao
comando.<BR>
</BODY>
</HTML>

Formatação Sintaxe Função
NEGRITO <b>texto</b> Aplica o estilo negrito
ITÁLICO <I>texto</I> Aplica o estilo itálico
SUBLINHADO <u>texto</u> Aplica um sublinhado
SMALL <small>texto</small> Reduz e altera a fonte
BIG <big>texto</big> Aumenta a fonte e aplica negrito
Cor da fonte <font color=?></font> Altera a cor da fonte

FORMATAÇÃO
TEXTO
<b></b> Texto negrito.
<i></i> Texto em itálico.
<tt></tt> Texto estilo máquina de
escrever, mono espaçamento.
<font size=?></font> Tamanho das letras.
<font color=?></font> Cor das letras.

 Mais algumas tags
FORMATAÇÃO
ATRIBUTOS DO CORPO
<body bgcolor=?> Cor de fundo.
<body text=?> Cor de texto.

FORMATAÇÃO
TEXTO
<b></b> Texto negrito.
<i></i> Texto em itálico.
<tt></tt> Texto estilo máquina de
escrever, mono espaçamento.
<font size=?></font> Tamanho das letras.
<font color=?></font> Cor das letras.

GRAFISMO
<img src=“imagem.jpg"> Insere uma imagem.
<img src=“imagem.jpg“
align=?>
Alinha uma imagem em
relação ao resto do texto.
<img src=“imagem.jpg“
border=?>
Define a borda da imagem.
<img src=“ imagen"
width=“ %">
Define o tamanho da exibição da
Imagem.
Formatação

 Vamos montar uma nova pagina
 Inserir texto fomatar cor, fonte, tamanho da fonte
 Inserir 15 imagens
 Inserir 10 gif animados
Não quero que reste nenhuma duvida sobre inserir
imagem na pagina de vcs .....
EXERCÍCIO

ATIVIDADES
 Faça os exemplos

 Faça conforme o texto abaixo siga as orientações
cor sublinhado itálico

34
HIPERLINKS
 HTML usa a tag <a> (anchor) para criar um
link para outro documento.
 Um anchor (âncora) pode apontar para
qualquer recurso na Web: uma página HTML,
uma imagem, uma trilha sonora, um clipe, etc.
 Sintaxe para criação de uma âncora:
<a href="url”>Texto para ser
exibido</a>

35
A tag <a> é usada para criar uma
ligação (vínculo) ao link.
O atributo href é usado para
endereçar o documento ao qual o
endereço está apontando.
As palavras entre o abre e fecha
âncora será exibido como o
hyperlink.
HIPERLINKS

 Links Internos (Ancora):
HIPERLINKS
Possui dois comandos distintos: (<a href= "..." >,
comando de partida e <a NAME= "#..." > comando
de chegada) que possibilitam: saltos para pontos
diferentes em uma mesma página ou saltos para
pontos de uma página diferente mas que se
encontra no mesmo diretório da página que a
chama.

 Links Internos (Ancora) com imagem:
<a href="#Ponto da página onde quer ir"><img src=“Local da imagem"
title=“Texto aparecer com mouse encima"/></a>

 Links Externos Locais:
HIPERLINKS
Possui dois comandos distintos: (<a href= "..." >,
comando de partida e <a NAME= "#..." >,
comando de chegada que possibilitam: saltos para
pontos diferentes em uma mesma página ou saltos
para pontos de uma página diferente mas que se
encontra no mesmo diretório da página que a
chama.

 Sintaxe de links externos locais:
HIPERLINKS
<a href=OutraPagina.html> Outra página do mesmo arquivo
</a>

 Links para e-mail:
HIPERLINKS
Para criar um link para um e-mail, apenas coloque como valor do
comando href o prefixo mailto (em português, e-mail para),
seguido de dois pontos (:), mais o endereço de email.
Exemplo:
<a href="mailto:maik@maikbasso.com.br">Envie um e-mail
para o Maik</a>

 Links Externos para Web:
HIPERLINKS
Para abrir um link em uma nova aba vamos utilizar o
comando target com o valor igual a _blank (abre o link
em uma nova aba do navegador).
Exemplo:
<a href = "http://www.maikbasso.com.br/"
target="_blank" >Abre o site em uma nova aba.</a>

Construindo Tabelas
A TAG <TABLE> é utilizada para a representação de dados tabulares. A
estrutura e o conteúdo da tabela devem ficar dentro das TAGs <TABLE>
</TABLE>
A TAG <TH> é usada para especificar as células de cabeçalho da
tabela. Essas células são diferentes das outras, pois seu conteúdo
aparece geralmente em negrito.
A TAG <TR> indica o início e o fim de uma linha na tabela
A TAG <TD> especifica a células de dados de uma tabela. Por se tratar
de dados comuns (e não cabeçalhos), essas células possuem seu
conteúdo escrito em fonte normal, sem nenhum destaque e
alinhamento à esquerda
Web Master – Módulo HTML

Construindo Tabelas (Exemplo)
<TABLE>
<CAPTION> Nota da primeira avaliação </CAPTION>
<TR>
<TH>Alunos</TH>
<TH>Eduardo</TH>
<TH>Ana Lúcia</TH>
</TR>
<TR>
<TD> Notas </TD>
<TD> 8,0 </TD>
<TD> 9.3 <TD>
</TR>
<TR>
<TD> No de Inscrição </TD>
<TD> 376234809 </TD>
<TD> 387349048 </TD>
</TR>
</TABLE>

Atributos para tabelas
BORDER Um atributo opcional para ser usado com TABLE é o
atributo BORDER. Se ele estiver presente, a tabela será
formatada com linhas de borda
ALIGN Este atributo pode ser aplicado a TH, TD ou TR e
controla o alinhamento do texto dentro de uma célula,
com relação as bordas laterais.
VALIGN Pode ser aplicado a TH e TD e define o alinhamento do
texto em relação às bordas superior e inferior.
WIDHT Responsável pelo tamanho da tabela
CELLSPACING Responsável pela espessura da linha da tabela
CELLPADDING Responsável pela margem dentro da célula
COLSPAN Usado só no TD e no TH. Responsável pelo
agrupamento de colunas na tabela
ROWSPAN Usado só no TD e no TH. Responsável pelo
agrupamento de linhas na tabela

Atributos para tabelas – Exemplo
<TABLE WIDTH="70%" BORDER="1" CELLSPACING="10" CELLPADDING="5">
<TR>
<TD COLSPAN="2">CELULA 1 </TD>
<TD>CELULA 2 </TD>
</TR>
<TR>
<TD>CELULA 3 </TD>
<TD>CELULA 4 </TD>
<TD>CELULA 5 </TD>
</TR>
<TR>
<TD>CELULA 6 </TD>
<TD>CELULA 7 </TD>
<TD ROWSPAN="2">CELULA 8 </TD>
</TR>
<TR>
<TD>CELULA 9 </TD>
<TD>CELULA 10 </TD>
</TR>
</TABLE>
CELULA 1 CELULA 2
CELULA 3 CELULA 4 CELULA 5
CELULA 6 CELULA 7 CELULA 8
CELULA 9 CELULA 10

TÍTULO DA TABELA
COLUNA 1 COLUNA 2
VALOR 1 VALOR 2 VALOR 3 VALOR 4
Exercício

Exercício – Solução
<TABLE >
<TR>
<TD COLSPAN="4"><CENTER>TITULO DA TABELA </CENTER></TD>
</TR>
<TR>
<TD COLSPAN="2"><P ALIGN="CENTER">COLUNA 1</P> </TD>
<TD COLSPAN="2" ALIGN="CENTER">COLUNA 2 </TD>
</TR>
<TR>
<TD>VALOR 1 </TD>
<TD>VALOR 2 </TD>
<TD>VALOR 3 </TD>
<TD>VALOR 4 </TD>
</TR>
<TR>
<TD>VALOR 5 </TD>
<TD>VALOR 6 </TD>
<TD>VALOR 7 </TD>
<TD>VALOR 8 </TD>
</TR>
</TABLE>

TÍTULO DA TABELA
VALOR 5 VALOR 6 VALOR 7
VALOR 12 VALOR 13 VALOR 14
VALOR 19 VALOR 20
Exercício

Exercício – Solução
<TABLE BORDER="1">
<TR>
<TD COLSPAN="4">TITULO DA TABELA </TD>
</TR>
<TR>
<TD ROWSPAN="2">VALOR 1 </TD>
<TD>VALOR 2 </TD>
<TD>VALOR 3 </TD>
<TD>VALOR 4 </TD>
</TR>
<TR>
<TD>VALOR 5 </TD>
<TD>VALOR 6 </TD>
<TD>VALOR 7 </TD>
</TR>
<TR>
<TD>VALOR 8 </TD>
<TD>VALOR 9 </TD>
<TD>VALOR 10 </TD>
</TR>
<TR>
<TD>VALOR 12 </TD>
<TD>VALOR 13 </TD>
<TD>VALOR 14 </TD>
</TR>
<TR>
<TD>VALOR 15 </TD>
<TD>VALOR 17 </TD>
</TR>
<TR>
<TD>VALOR 19 </TD>
<TD>VALOR 20 </TD>
</TR>
</TABLE>

• FINALIDADE: Os formulários fazem então o papel de
interface do nosso sistema, no qual sua única finalidade é
receber os dados do usuário e repassá-los de forma
organizada para outra página contendo uma linguagem
de programação, podendo essa linguagem ser em php,
java, asp, etc.
• CRIANDO UM FORMULÁRIO: Todos os formulários em
HTML devem, sem exceção, possuir a tag <form> de
abertura e a sua correspondente de fechamento, a tag
</form>.
• O primeiro atributo é o action, o único objetivo desse
atributo é informar para aonde serão enviados os dados
do formulário e esse arquivo que receberá os dados,
criado em linguagem php, por exemplo, ficará
responsável por analisar, processar e/ou armazenar as
informações.

• O segundo atributo também obrigatório em um formulário é
o method, que serve para especificarmos a forma de envio
dos dados, podendo ser do tipo GET ou POST. Segue
abaixo a definição de ambos:
GET – método que envia as variáveis digitadas pelo usuário pela URL,
ou seja, podemos ver as variáveis sendo passadas pela URL da página
de destino. Não é muito aconselhável o uso do método GET, pois ele
expõe os nomes e os valores das variáveis.
POST – método que envia as variáveis digitadas pelo corpo da
página, sendo completamente transparente para o usuário. É o
método mais aconselhável.
<form action="gravar_dados.php" method="post" >
// campos do formulário
</form>

Campos de entrada de dados: campo de texto, campo de senha e botão de envio.
<p>Nome:<input type="text" name="nome" /></p>
<p>Senha:<input type="text" name="senha“ size="15" maxlength="5"
value="Entre com a senha"/></p>
Campo de senha: <p>Senha:<input type="password" name="senha" /></p>

Observações: 1-) O campo senha não possui nenhum tipo de criptografia, apenas
coloca uma máscara (o asterisco) no texto inserido; 2-) os
atributos size e maxlength funcionam da mesma forma na tag <input> quando
utilizamos o valor “password” no atributo type.
Botão de envio
<input type="submit" name="enviar" value="Enviar" />

Tela de login
<html>
<head>
<title>Formulários</title>
</head>
<body>
<form action="gravar_dados.php" method="post">
<p>Nome:<input type="text" name="nome" /></p>
<p>Senha:<input type="password" name="senha" size="15" /></p>
<input type="submit" name="enviar" value="Enviar" />
</form>
</body>
</html>

Exercício: Ficha de inscrição
Utilizando-se do conteúdo estudado nessa aula, escreva um código HTML que
reproduza um formulário de inscrição semelhante ao da imagem abaixo.

O elemento ComboBox – tag <select>
<p>Escolaridade:
<select name="escolaridade">
<option value="em"> Ensino Médio </option>
<option value="nt"> Nível Técnico </option>
<option value="ns"> Nível Superior </option>
</select>
</p>

O elemento Área de Texto – tag <textarea>
<p>Observações:<textarea name="obs" cols="20"
rows="5"></textarea></p>

O elemento “Botão Radio” – tag <input type=”radio”>
<input type="radio" name="cargo" value="1" checked /> Gerência
<input type="radio" name="cargo" value="2" /> Financeiro
<input type="radio" name="cargo" value="3" /> Recepção
<input type="radio" name="cargo" value="4" /> Administrativo

O elemento “Botão de Checagem” – tag <input type=”checkbox “>
<input type="checkbox" name="area1" value="com" /> Computação
<input type="checkbox" name="area2" value="eng" /> Engenharia
<input type="checkbox" name="area3" value="bio" /> Biologia
<input type="checkbox" name="area4" value="psi" /> Psicologia

O Botão Reset – tag <input type=”reset”>
<input type ="reset" value="Limpar" />

As tags <label>, <fieldset> e <legend>
<label>Escolaridade:
</select>
</label>

<p>Dados pessoais</p>
<label>Nome:<input type="text" name="nome" /></label><br />
<label>Idade:<input type="text" name="idade" /></label><br />
<p>Dados profissionais</p>
</select>
</label>
<br />
<label>Área de atuação
<input type="radio" name="cargo" value="1" checked>
Gerência
<input type="radio" name="cargo" value="2" > Financeiro
<input type="radio" name="cargo" value="3" > Recepção
</label>

Vamos então modificar o exemplo anterior utilizando agora as tags <fieldset> e
<legend>.
<fieldset>
<legend>Dados pessoais</legend>
<label>Nome:<input type="text" name="nome" /></label><br />
<label>Idade:<input type="text" name="idade" /></label><br />
</fieldset>
<fieldset>
<legend>Dados profissionais</legend>
</select>
</label>
<br />
<label>Área de atuação
<input type="radio" name="cargo" value="1" checked> Gerência
<input type="radio" name="cargo" value="2" > Financeiro
<input type="radio" name="cargo" value="3" > Recepção
</label>
</fieldset>

Exercício
Seguindo o modelo da imagem abaixo, crie um formulário utilizando os elementos que
aprendemos nessa sétima aula do curso de desenvolvimento web com HTML.

CSS
•Cascading Style Sheets
•Estilos definem como elementos html devem ser
apresentados
•Permite a separação entre definição de conteúdo e
formatação em HTML
•Style sheets externos são definidos através de
arquivos CSS
•Atualmente é o padrão para inserção de estilo na
construção de páginas html

CSS
•Formato geral:
seletor { propriedade: valor }
•Uma definição de estilo em CSS será composta por
uma sequência de definições como esta acima
•Exemplos:
• body { color: black }
• p { font-family: “Verdana”; text-align: center; color: red }
• h1,h2,h3,h4,h5,h6 { color: green }
• p {margin-left: 20px}

Incluindo CSS na página
• Existem três formas para incluir o código CSS em seu projeto.
• Inline
A primeira forma de aplicar CSS a uma página é utilizando o atributo style em
elementos do HTML:
<html>
<head</head>
<body style=“color: sienna;
text-align: center”>
Esta é minha primeira página.
</body>
</html>

CSS
Como definir (2/3)
• Internamente (dentro da própria página HTML a ser exibida)
<html>
<head>
<style type="text/css“>
hr {color: sienna}
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")}
</style>
</head>
<body>
</body>
</html>

CSS
Como definir (1/3)
• Existem 3 maneiras se definir um CSS para um documento HTML
• Criando um link externo
<html>
<head><link rel="stylesheet"
type="text/css" href="mystyle.css" /></head>
<body>
</body>
</html>
/* Conteúdo do arquivo mystyle.css */
hr {color: sienna}
p {margin-left: 20px}
body {background-image:

A Tag <div> </div>
•O nome div vem de divisão, e esta tag vai lhe dar o
simples poder de dividir qualquer trecho de seu
código. Isso mesmo, você pode criar um bloco, uma
divisão, e dentro deste bloco ter uma imagem, links,
textos e o que mais você quiser.
•E qual a vantagem disso? Você vai poder aplicar o CSS
nesse bloco, e tudo que estiver dentro da div, seja
imagem, texto, link ou o que mais for, vai receber
aquelas regras de estilo.

A Tag <div> </div>
•É bem comum dizer que a tag <div> é um container
para armazenar diversos elementos.
•As divs são IMPORTANTÍSSIMAS para estruturar, criar
uma ordem lógica e organizar um site.
•Você cria uma div para o cabeçalho, outra para o
conteúdo, outra div para os menus e uma última para
o rodapé, então usa o CSS para estilizar cada uma
dessas divs separadamente.
•Você também poderá criar outras divisões dentro
destas divs.

Seletor class
•As classes são uma forma de identificar um grupo de
elementos. Através delas, pode-se atribuir formatação
a VÁRIOS elementos de uma vez.

Seletor id
•As ids são uma forma de identificar um elemento, e
devem ser ÚNICAS para cada elemento. É como se
fossem impressões digitais de nossos dedos ou RGs.
Através delas, pode-se atribuir formatação a um
elemento em especial.

Fundamentos do Desenvolvimento Web

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Fundamentos do Desenvolvimento Web

Semelhante a Fundamentos do Desenvolvimento Web (20)

Mais de JoberthSilva

Mais de JoberthSilva (20)

Fundamentos do Desenvolvimento Web