<!DOCTYPE>
Para um navegador exibir corretamente uma página web, devemos informar explicitamente
o tipo do documento. O tipo do documento é informado com a declaração <!DOCTYPE>.
<! DOCTYPE html >
<html>
Os elementos HTML, com exceção do DOCTYPE, devem ser inseridos no conteúdo do
elemento html. Esse elemento é aberto com a tag <html>, fechado com a tag </html> e
deve conter exatamente um elemento head seguido de exatamente um elemento body.
Diversos autores recomendam a utilização do atributo lang. Esse atributo indica a língua
utilizada no documento HTML ou na maior parte dele. Algumas ferramentas de leitura ou de
tradução de texto podem utilizar esse atributo para descobrir facilmente em qual língua os
textos contidos no documento HTML ou na maior parte dele foram escritos.
<!DOCTYPE html>
<html lang = "pt - br">
<head>
...
</ head >
< body >
...
</ body >
</ html >
tag <p>
No exemplo abaixo, utilizamos o elemento p para definir um parágrafo. De acordo com a
especificação da linguagem HTML, esse elemento deve ser utilizado justamente para definir
parágrafos. Portanto, ele foi aplicado corretamente.
<!DOCTYPE html>
<html lang = "pt - br">
<head>
<meta charset = “UTF -8">
<title> Exemplo de uso correto da semântica HTML </title>
</head>
<body>
<p> Este é um texto para mostrar o significado da tag p . </ p>
</body>
</html>
Tag H
Para inserir títulos em uma página web, devemos utilizar os elementos h1, h2, h3, h4, h5 e
h6. Os sufixos numéricos de 1 a 6 indicam o nível do título dentro da hierarquia de títulos do
documento.
<!DOCTYPE html>
<html lang="pt-br">
<!-- cabeçalho -->
<head>
<meta charset ="UTF-8" />
<title> Exemplo de Títulos </title>
</head>
<!-- corpo -->
<body>
<h1>Título 1 </h1>
<h2>Título 2 </h2>
<h3>Título 3 </h3>
<h4>Título 4 </h4>
<h5>Título 5 </h5>
<h6>Título 6 </h6>
</body>
</html>
Editores HTML
Documentos HTML podem ser criados em qualquer editor de texto básico. Contudo, para
ganhar produtividade, podemos utilizar ferramentas com mais recursos. Há diversas opções
de editores HTML, alguns gratuitos outros pagos.
https://netbeans.org/
http://www.aptana.com/
Ferramentas de Desenvolvimento Web
Hoje em dia, os principais navegadores possuem ferramentas para testar e depurar as
páginas web e a interação com os Web Servers. Nos exemplos dessa apostila, utilizaremos
Chrome DevTools do navegador Chrome. Outra ferramenta muito importante é o Firebug
do navegador Firefox.
Elemento I
A especificação da linguagem HTML 5 não é muito precisa na definição da semântica do elemento i. Ela indica a utilização desse elemento para definir nomes científicos, termos
técnicos,
expressões
idiomáticas
em
outras
línguas,
transliterações,
pensamentos.
Normalmente, os navegadores definem o i como inline-level element e exibem o seu
conteúdo em itálico.
<!DOCTYPE html>
<html lang="pt-br">
<!-- cabeçalho -->
<head>
<meta charset ="UTF-8" />
<title> Exemplo de Títulos </title>
</head>
<!-- corpo -->
<body>
<h1> Exemplo do elemento (i) </h1>
<p>
Desenvolvimento web é o termo utilizado para descrever o desenvolvimento de
sites, na <i> Internet </i> ou numa <i>Intranet</i>. Este é o profissional que trabalha
desenvolvendo websites, podendo ser um Web Designer (Desenvolvedor do Layout), ou Web
Developer(Desenvolvedor de sistemas).
</p>
</body>
</html>
Elemento B
A especificação da linguagem HTML 5 não é muito precisa na definição da semântica do ele-
mento b. Ela indica, por exemplo, a utilização desse elemento para definir as palavras
chave do resumo de um documento e o nome do produto em texto de avaliação. (usamos
para negrito).
<!DOCTYPE html>
<html lang="pt-br">
<!-- cabeçalho -->
<head>
<meta charset ="UTF-8" />
<title> Exemplo de (b) </title>
</head>
<!-- corpo -->
<body>
<h1> Exemplo do elemento (b) </h1>
<p>
Atualmente , praticamente todos os <b> sistemas corporativos </b> possuem <b>
interfaces web </b>.
Para quem deseja atuar no mercado de <b> desenvolvimento de software </b> , é
obrigatório o conhecimento
das linguagens : <b> HTML </b> , <b> CSS </b> e <b> JavaScript </b>.
</p>
</body>
</html>
Texto subscrito ou sobrescrito
Podemos
definir
textos
subscrito
ou
sobrescrito
com
os
elementos
sub
e
sup
respectivamente. Normalmente, os navegadores definem esses elementos como inline-level
elements.
<h1> Exemplo de texto subscrito ou sobrescrito </h1>
<p >
A cidade de São Paulo possui uma área de 1.523 km <sup>2 </sup>.
Em 2011 , São Paulo emitiu 16 ,430 milhões de toneladas de CO <sub> 2 </sub>
</p>
Texto importante ou enfatizado
Podemos definir textos importantes ou enfatizados com os elementos strong e em
respectivamente. Por padrão, nos navegadores, o conteúdo de um elemento strong é
exibido em negrito e o conteúdo de um elemento em é exibido em itálico. Normalmente, os
navegadores definem esses elementos como inline-level elements.
<h1> Exemplo de texto importante (strong) ou enfatizado (enfatizado) </h1>
<p>
<strong> Brasil </strong> é o único país que ganhou <em> cinco vezes </em>
a <strong> copa do mundo de futebol </strong >.
</p>
Imagens
Tag <img>
A tag <img> define uma imagem em uma página HTML e necessita de dois atributos
preenchidos: src e alt
O HTML 5 introduziu duas novas tags específicas para imagem: <figure> e <figcaption> . A
tag <figure> define uma imagem com a conhecida tag <img> . Além disso, permite
adicionar uma legenda para a imagem por meio da tag <figcaption> .
<figure>
<img src="img/foto1.png" alt="Foto a ser exibida Minha foto">
<figcaption>Roteiro do final de semana</figcaption>
</figure>
Listas não numeradas
<ul>
</ul>
<li> Macarrão instantâneo da sua marca favorita </li>
<li> 600 ml de água </li>
Listas numeradas
<ol>
<li> Macarrão instantâneo da sua marca favorita </li>
<li> 600 ml de água </li>
</ol>
Links
Um site é formado por um conjunto de páginas que estão interligadas. Para permitir que um
usuário navegue de uma página para outra, devemos utilizar os links.
<a href = "pagina2.html"> Exemplo de link com caminho relativo </a>
<a href = "outros/pagina3.html"> Outro exemplo de link com caminho relativo </a>
</a>
<a href = "http://www.americanas.com.br"> Exemplo de link com caminho absoluto
Links com IMAGENS
Um site é formado por um conjunto de páginas que estão interligadas. Para permitir que um
usuário navegue de uma página para outra, devemos utilizar os links.
<p>Exemplo de link com caminho relativo com Imagens</p>
<a href = "pagina2.html"> <img src="img/security-lock.jpg" /> </a>
<p> Outro exemplo de link com caminho relativo </p>
<a href = "outros/pagina3.html"> <img src="img/tecInformatica.jpg" /> </a>
<p>Exemplo de link com caminho absoluto</p>
<a href = "http://www.americanas.com.br"> <img src="img/ubuntu.jpg" /> </a>
Elemento - Table
Quando surge a necessidade de exibir dados de forma tabular em páginas web.
<table>
<tr>
<th> Marca </th>
<th> Modelo </th>
<th> Ano </th>
</tr>
<tr>
<td> Toyota </td>
<td> Corolla </td>
<td> 2010 </td>
</tr>
<tr>
<td> Honda </td>
<td> Civic </td>
<td> 2011 </td>
</tr>
<tr>
<td> Citroen </td>
<td> C3 </td>
<td> 2012 </td>
</tr>
</table>
CSS - (Cascading Style Sheets) O CSS é uma (folha de estilo em castata) utilizada para definir a apresentação de
documentos escritos em uma linguagem de marcação como HTML. Seu principal benefício é
prover a separação entre o formato e o conteúdo de um documento.
Assim como a linguagem HTML, a linguagem CSS é definida pelo W3C. Você pode consultar
a especificação do CSS no endereço http://www.w3.org/Style/CSS/specs. O W3C faz diversas
recomendações sobre como implementar as funcionalidades do CSS.
Todo elemento HTML, no corpo de uma página web, está contido em um box. Considere o
documento HTML abaixo.
O box de um elemento HTML é composto por conteúdo (content), margem interna
(padding), borda ( border) e margem externa (margin).
• Margem externa superior (margin-top)
• Borda superior (border-top)
• Margem interna superior (padding-top)
• Altura do conteúdo (height)
• Margem interna inferior (padding-bottom)
• Borda inferior (border-bottom)
• Margem externa inferior (margin-bottom)
Podemos aplicar regras de formatação para cada elemento HTML. Observe a estrutura de
uma regra CSS.
O seletor determina para quais elementos a regra de formatação deve ser aplicada. Por
exemplo, a propriedade font-size é utilizada para definir o tamanho da fonte utilizada
nos textos. Folha de estilho externa (External style sheet). Podemos separar o código HTML
do código CSS definido as regras de formatação em um arquivo
independente.
FOLHA DE ESTILO EXTERNA
<!DOCTYPE html>
<html lang="pt-br">
<!-- cabeçalho -->
<head>
<meta charset ="UTF-8" />
<title> Desenvolvimento Web </title>
<link rel="stylesheet" type="text/css" href="css/arquivo.css" />
</head>
// ------------------------------ HTML -------------<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Meu primeiro exemplo CSS </h1>
<p>Este é o primeiro paragrafo </p>
</body>
</html>
// ------------------------------ CSS -------------body {
background-color: #d0e4fe;
}
h1 {
color: orange;
}
text-align: center;
p{
font-family: "Times New Roman";
font-size: 20px;
}
CORES – HEXADECIMAL - Há diversas formas de escolher uma cor na linguagem CSS.
A quantidade de cores suportada pela linguagem CSS é 16.777.216. Como vimos apenas
147 cores foram nomeadas. Para escolher uma cor que não possui um nome, podemos
utilizar o código hexadecimal da cor desejada. Todas as cores possuem um código
hexadecimal. Veja o código hexadecimal das cores básicas.
http://html-color-codes.info/Codigos-de-Cores-HTML/
AGRUPAMENTOS DE SELETORES
Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Separe
cada seletor com uma vírgula. A cor de todos os cabeçalhos será verde.
h1, h2, h3, h4, h5, h6 { color: #00FF00; }
Seletor ( CLASS )
→ No HTML as regras seriam aplicadas conforme abaixo:
<p class = "sobre"> Este parágrafo está falando sobre a empresa. </p>
<p class = "venda"> Este parágrafo esta detalhando como comprar </p>
<p class = “venda”> Este parágrafo continua falando sobre venda </p>
→ No CSS as regras seriam aplicadas conforme abaixo:
p.sobre { color:#00FFFF;
p.venda { color:#0000FF;
/* azul claro - aqua */ }
/* azul – blue */ }
Seleletor ( ID )
O seletor ID é único. Um seletor ID só pode ser aplicado a um elemento HTML.
→ No HTML as regras seriam aplicadas conforme abaixo:
<p id = "anuncio"> Este parágrafo está falando sobre a empresa. </p>
<p id = "promocao"> Este parágrafo esta detalhando como comprar </p>
→ No CSS as regras seriam aplicadas conforme abaixo:
/* este é um comentário*/
#anuncio { color:#808000;
#promocao { color:#008080;
/* verde - olive */ }
/* verde – teal */ }
A PROPRIEDADE FONT
color:...................cor da fonte
font-family:..........tipo de fonte
font-size:.............tamanho de fonte
font-style:............estilo de fonte
font-variant:.........fontes maiúsculas de menor altura
font-weight:.........quanto mais escura a fonte é (negrito)
color – cor da font
→ No HTML as regras seriam aplicadas conforme abaixo:
<h1>Cabeçalho com letras vermelhas</h1>
<h2>Cabeçalho com letras verdes</h2>
<p>Parágrafo com letras azuis</p>
→ No CSS as regras seriam aplicadas conforme abaixo:
h1 {color: #FF0000;}
h2 {color: #00FF00;}
p {color: rgb(0,0,255);}
font-family - O tipo de fonte (aplicada no css)
→ No CSS as regras seriam aplicadas conforme abaixo:
h2 {font-family: arial, helvetica, serif;}
p {font-family: sans-serif;}
font-size - O tamanho de fonte (aplicada no css)
h1 {font-size: 14px;}
h2 {font-size: smaller;}
p {font-size: 100%;}
font-style - O estilo de fonte (aplicado no css )
h1 {font-style: italic;}
h2 {font-style: normal;}
p {font-style: oblique;}
/* um pouco mais deitado */
font-variant - fontes maiúsculas "menores" ( aplicado no css )
h3 {font-variant: normal;}
p {font-variant: small-caps;}
font-weight - Peso das fontes - negrito (intensidade da cor)
{font-weight: bold;}
BACKGROUND-COLOR
A propriedade background-color é utilizada para definir a cor do background dos elementos
HTML.
Exemplo: backgrond-color
background-color: yellow
background-color: #c1a4cd
Background-image
A propriedade background-image é utilizada para definir a imagem que deve ser utilizada
como background de um elemento HTML.
background-image: url(’bg-image.png’)
background-repeat
Por padrão, se uma imagem utilizada como background for menor do que o box do
elemento HTML correspondente, ela será replicada na horizontal e na vertical. A
propriedade background- repeat permite controlar como essa replicação deve ser realizada.
Essa propriedade aceita os seguintes valores:
Valor
Descrição
repeat
A imagem de background é replicada na horizontal e na vertical (padrão)
repeat-x
A imagem de background é replicada apenas na horizontal
repeat-y
A imagem de background é replicada apenas na vertical
no-repeat
A imagem não é replicada
Quebrar palavras grantes no texto
<wbr/> O recurso quebra uma palavra quando não cabe na página reduzida, assim não
será jogada para próxima linha abaixo. Informa que pode ser quebrado quando necessário.
<wbr/> Este recurso além de quebrar a palavra quando não couber ao reduzir página
é colocado um (-) hífen. Informa que pode ser quebrado quando necessário.
CRIANDO FORMULÁRIOS
<h1> Criando Formulários</h1>
<label> Telefone: </label>
<input type="tel" name="txtTel" size="15" maxlength="15" title="Digite seu telefone">
<label for="usu1"> Usuário 1 </label>
<input type="text" name="usu1" size="20" maxlength="20">
<label for="senha1"> Senha 1</label>
<input type="text" name="senha1" maxlength="8"> <br> </p>
<label for="usu2"> Usuário 2</label>
<input type="text" name="usu2" size="20" maxlength="20" readonly="">
<label for="senha2"> Senha 2</label>
<input type="password" name="senha2" maxlength="8"> </p>
<h2> Botões de rádio </h2>
<label> Selecione Cargo: </label>
<input type="radio" name="radCargo" value="vend">Vendedor
<input type="radio" name="radCargo" value="assi">Assistente
<input type="radio" name="radCargo" value="asse">Assessor
<h2> Caixas de seleção </h2>
<label> Interesses: </label> <br>
<input type="checkbox" name="ckcine" value="cine">Cinema <br>
<input type="checkbox" name="ckespe" value="espo">Esporte <br>
<input type="checkbox" name="ckviag" value="espo">viagem <br>
<input type="checkbox" name="ckleit" value="leit">Leitura <br>
<h2> Select - Combobox </h2>
<label id="labmod" for="mod"> Modalidade Ensino</label>
<select name="mod" id="mod">
<option value=""></option>
<option value="01">Presencial</option>
<option value="02">Distância </option>
<option value="03">Em curso</option>
<option value="04">Não Concluído</option>
</select>
<h2> Select - Combobox - GRUPOS </h2>
<label id="labsoft" for="soft">Selecione um Software</label>
<select name="soft" id="soft">
<optgroup label="Editores">
<option value="00" selected="selected">Escolha Software </option>
<option value="01">Editor de Texto</option>
<option value="02">NotePad++ </option>
<option value="03">Aptana</option>
<option value="04">NetBeans</option>
</optgroup>
<optgroup label="Navegadores">
<option value="05">Safari</option>
<option value="06">Firefox </option>
<option value="07">Opera</option>
<option value="08">Chrome</option>
</optgroup>
</select>
<h2> Fieldset - Caixa com borda </h2>
<fieldset>
<legend> Todas informações na caixa</legend>
<label for="usu1"> Usuário 1 </label>
<input type="text" name="usu1" size="20" maxlength="20">
</fieldset>
Download
