Revisão - Programação para Internet (HTML, CSS)

•

UFPE

0

Claudio

02/11/2018

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Programação Web

1.863 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

PROGRAMAÇÃO PARA 
INTERNET I
Curso Superior de Tecnologia em Análise e 
Desenvolvimento de Sistemas
Prof. Edécio Fernando Iepsen
Faculdade de Tecnologia Senac Pelotas
Estrutura HTML
<!DOCTYPE html>
<html>
<head>
<title> Título da Página </title>
<meta charset="UTF-8">
</head>
<body>
<!-- Conteúdo -->
</body>
</html>
Imagens / Links
<img src="html.jpg" alt="Linguagem HTML"/> 
<a href="tabelas.html"> Dicas sobre Tabelas </a> 
<a href="formularios.html"> Dicas sobre Formulários </a>
Tabela de Cores Web
Listas
<ol>
<li> Programação para Internet </li>
<li> Programação Estruturada </li>
<li> Inglês Instrumental </li>
</ol>
<br/>
<p> Salas de Aula Utilizadas: </p>
<ul>
<li> Lab. 201 </li>
<li> Lab. 205 </li>
<li> Sala 204 </li>
</ul>
Tabelas
<table>
<tr class="cab">
<td colspan="3"> Jogos de Quarta-Feira </td>
</tr> 
<tr class="impar"><td> Grêmio </td>
<td> x </td>
<td> Cruzeiro </td>
</tr>
<tr class="par"><td> Flamengo </td>
<td> x </td>
<td> Santos </td>
</tr> 
</table>
Campos de Formulário
<fieldset>
<legend> Dados Cadastrais </legend>
<form>
<p><label for="nome"> Nome: </label>
<input type="text" name="nome" size="30" id="nome"/>
</p>
<p><label for="senha"> Senha: </label>
<input type="password" name="senha" size="12" id="senha"/>
</p>
Campos de Formulário
<p> Sexo:
<label for="sexom"> 
<input type="radio" name="sexo" 
id="sexom" value="m"/> Masculino
</label>
<label for="sexof">
<input type="radio" name="sexo"
id="sexof" value="f"/> Feminino
</label>
</p>
<p> Interesse:
<label for="prog">
<input type="checkbox" name="prog" id="prog"
value="x"/> Programação
</label>
Campos de Formulário
<label for="obs"> Observação: </label>
<textarea cols="40" rows="5" name="obs" id="obs"> 
Deixe aqui seu comentário...
</textarea>
<p><input type="submit" value="Enviar"/>
<input type="reset" value="Limpar"/>
</p> 
</form>
</fieldset>
Novos Campos de Formulário (HTML 5)
Modelos de Conteúdo
• Elementos de Linha
• <img>, <a>, <input>, <label>, <span>
• São inseridos um após o outro na mesma linha (não causam uma 
quebra de linha) 
• Elementos de Bloco
• <h1>, <h2> ..., <p>, <div>, <ul>
• Causam uma quebra de linha ao serem inseridos
Estilos:
display: block; <!-- faz o elemento ocupar um bloco -->
display: inline; <!– se comporta como em linha --> 
Formas de Aplicar Estilos
• Estilos inline
<p style=“font-size: 12px; color: red”> Linha 1 </p>
• Estilos incorporados
Dentro da seção <HEAD>
<style type=“text/css”>
p {
font-size: 14px;
}
</style>
• Estilos Externos
• Em um arquivo contendo as regras de estilo (forma recomendada).
Ligação com Folhas de Estilo (CSS)
<link rel="stylesheet" href="estilos.css"/>
estilos.css
h1 {
color: #0000ff; 
}
p.titulo { 
font-family: Tahoma; 
font-weight: bold; 
}
.center { 
display: block; 
margin-left: auto; 
margin-right: auto;
}
DOM e seletores CSS
• DOM (Document Object Model)
• Árvore do documento 
• Elementos-pai, irmão, filho, ancestral e descendente
• Tabela dos seletores CSS
http://www.maujor.com/tutorial/guia-completo-seletores-css3.php
Esquemas de Posicionamento CSS
• Fluxo normal: é o posicionamento padrão dos boxes
• Flutuado: quando o box continua no fluxo normal e é 
posicionado à esquerda ou à direita, tal como se 
estivesse “flutuando” no conteúdo
• Absoluto: quando o box é retirado do fluxo normal e 
posicionado em um sistema de coordenadas.