Desenvolvimento de Software para WEB

•

UFC

Wellington Lucas

17/07/2014

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 3, do total de 63 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 6, do total de 63 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Você viu 9, do total de 63 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Desenvolvimento de Software para Web

1.591 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

Desenvolvimento de Software 
para WEB 
 
Fundamentos de HTML 
Prof. Regis Pires Magalhães 
regispires@lia.ufc.br 
Estrutura básica 
<!DOCTYPE html> 
<html> 
<head> 
<title>Title of document goes here</title> 
</head> 
 
<body> 
Visible text goes here... 
</body> 
</html> 
Elementos básicos 
<h1>Largest Heading</h1> 
<h2> . . . </h2> 
<h3> . . . </h3> 
<h4> . . . </h4> 
<h5> . . . </h5> 
<h6>Smallest Heading</h6> 
 
<p>This is a paragraph.</p> 
<br> (line break) 
<hr> (horizontal rule) 
<!-- This is a comment --> 
Elementos básicos 
Elementos em bloco e em linha 
• Elementos em bloco 
▫ Exibidos como se tivessem uma quebra de linha 
antes e depois do elemento. 
• Elementos em linha 
▫ Exibidos na linha dentro do fluxo do texto da 
página. 
Elementos em bloco 
Elementos em linha 
Elementos em Bloco 
Elementos em bloco 
Elementos in-line (1) 
Elementos in-line (2) 
Formatação 
<b>Bold text</b> 
<code>Computer code</code> 
<em>Emphasized text</em> 
<i>Italic text</i> 
<kbd>Keyboard input</kbd> 
<pre>Preformatted text</pre> 
<small>Smaller text</small> 
<strong>Important text</strong> 
 
<abbr> (abbreviation) 
<address> (contact information) 
<bdo> (text direction) 
<blockquote> (a section quoted from another source) 
<cite> (title of a work) 
<del> (deleted text) 
<ins> (inserted text) 
<sub> (subscripted text) 
<sup> (superscripted text) 
Sobre a tag <b> 
• Note: According to the HTML 5 specification, the <b> tag 
should be used as a LAST resort when no other tag is more 
appropriate. The HTML 5 specification states that headings 
should be denoted with the <h1> to <h6> tags, emphasized 
text should be denoted with the <em> tag, important text 
should be denoted with the <strong> tag, and 
marked/highlighted text should use the <mark> tag. 
 
• Tip: You can also use the CSS "font-weight" property to set 
bold text. 
 
• Fonte: http://www.w3schools.com/tags/tag_b.asp 
 
Sobre a tag <i> 
• Use the <i> element only when there is not a 
more appropriate semantic element, such as: 
▫ <em> (emphasized text) 
▫ <strong> (important text) 
▫ <mark> (marked/highlighted text) 
▫ <cite> (the title of a work) 
▫ <dfn> (a definition term) 
• Fonte: http://www.w3schools.com/tags/tag_i.asp 
Cores na Web 
Branco 
Cores na Web 
Uma cor cinza 
Cores na Web 
Uma cor laranja 
Cores na Web 
Valores numéricos entre 0 e 255. 
80% de 255 é 204, 
40% de 255 é 102 e 
0% de 255 é 0. 
#CC6600 
Cores na Web 
Cor em Hexadecimal 
CC = (12 x 16) + 12 = 204 
66 = (6 x 16) + 6 = 102 
00 = (0 x 16) + 0 = 0 
Cor pelo código hexadecimal 
• #FFF = #FFFFFF 
• #CF9 = #CCFF99 
• #cde = #ccddee 
• #49c = #4499cc 
 
• Ferramenta online: 
http://www.colorschemer.com/online.html 
Cor pelo código rgb 
• rgb é abreviatura para: 
▫ r = red (vermelha) 
▫ g = green (verde) 
▫ b = blue (azul) 
• Cor obtida com a mistura de uma quantidade 
xxx de vermelho com yyy de verde e com zzz de 
azul. 
• definições válidas: 
▫ rgb(145, 230, 50) 
▫ rgb(20%, 0%, 70%) 
• definição não válida: 
▫ rgb(255, 20%, 120) 
 
Cor por palavra-chave 
• As Recomendações para CSS 2.1 listam as 17 cores a 
seguir: 
Cores 
Cores 
Imagens 
<!DOCTYPE html> 
<html> 
<body> 
 
<img src="smiley.gif" alt="Smiley 
face" width="42" height="42"> 
 
</body> 
</html> 
<img src="URL" alt="Alternate Text" height="42" 
width="42"> 
Imagens 
Imagens (2) 
Imagens (3) 
Listas não ordenadas, ordenadas e 
de definição 
<ul> 
 <li>Item</li> 
 <li>Item</li> 
</ul> 
<ol> 
 <li>First item</li> 
 <li>Second item</li> 
</ol> 
<dl> 
 <dt>Item 1</dt> 
 <dd>Describe item 1</dd> 
 <dt>Item 2</dt> 
 <dd>Describe item 2</dd> 
</dl> 
Listas ordenadas 
<!DOCTYPE html> 
<html> 
<body> 
 
<ol> 
 <li>Coffee</li> 
 <li>Tea</li> 
 <li>Milk</li> 
</ol> 
 
<ol start="50"> 
 <li>Coffee</li> 
 <li>Tea</li> 
 <li>Milk</li> 
</ol> 
 
</body> 
</html> 
Listas não ordenadas 
<!DOCTYPE html> 
<html> 
<body> 
 
<h4>An Unordered List:</h4> 
<ul> 
 <li>Coffee</li> 
 <li>Tea</li> 
 <li>Milk</li> 
</ul> 
 
</body> 
</html> 
Links 
<!DOCTYPE html> 
<html> 
<body> 
 
<a href="http://www.w3schools.com">Visit 
W3Schools.com!</a> 
 
</body> 
</html> 
Links 
<a href="http://www.example.com/">Link-text goes 
here</a> 
 
<a href="http://www.example.com/"><img src="URL" 
alt="Alternate Text"></a> 
 
<a href="mailto:webmaster@example.com">Send e-
mail</a>Bookmark: 
 
<a id="tips">Tips Section</a> 
<a href="#tips">Jump to the Tips Section</a> 
Links relativos, internos, email 
Links internos 
Links para email, chat 
Divs e Spans – Containers Genéricos 
• Em um documento, servem para: 
▫ Definir uma seção. 
▫ Agrupar elementos. 
• <div> 
▫ Elemento em bloco. 
▫ Define uma divisão ou seção no documento. 
▫ Usado para agrupar elementos em bloco a fim de 
formatá-los com CSS. 
• <span> 
▫ Elemento em linha. 
 
 <div>A block-level section in a document</div> 
<span>An inline section in a document</span> 
div 
<!DOCTYPE html> 
<html> 
<body> 
 
<p>This is some text.</p> 
 
<div style="color:#0000FF"> 
 <h3>This is a heading in a div element</h3> 
 <p>This is some text in a div element.</p> 
</div> 
 
<p>This is some text.</p> 
 
</body> 
</html> 
span 
<!DOCTYPE html> 
<html> 
<body> 
<p>My mother has <span style="color:blue;font-
weight:bold">blue</span> eyes and my father has 
<span style="color:darkolivegreen;font-
weight:bold">dark green</span> eyes.</p> 
</body> 
</html> 
Divs e Spans 
Divs e Spans 
Tabelas 
<table border="1"> 
 <tr> 
 <th>table header</th> 
 <th>table header</th> 
 </tr> 
 <tr> 
 <td>table data</td> 
 <td>table data</td> 
 </tr> 
</table> 
Tabelas 
<!DOCTYPE html> 
<html> 
<body> 
 
<table border="1"> 
 <tr> 
 <th>Month</th> 
 <th>Savings</th> 
 </tr> 
 <tr> 
 <td>January</td> 
 <td>$100</td> 
 </tr> 
 <tr> 
 <td>February</td> 
 <td>$80</td> 
 </tr> 
</table> 
 
</body> 
</html> 
Tabelas 
Tabelas – colspan e rowspan 
Formulário 
<form action="demo_form.asp" method="post"> 
 <input type="text" name="email" size="40" maxlength="50"> 
 <input type="password"> 
 <input type="checkbox" checked="checked"> 
 <input type="radio" checked="checked"> 
 <input type="submit" value="Send"> 
 <input type="reset"> 
 <input type="hidden"> 
 
 <select> 
 <option>Apples</option> 
 <option selected="selected">Bananas</option> 
 <option>Cherries</option> 
 </select> 
 
 <textarea name="comment" rows="60" cols="20"></textarea> 
</form> 
Formulário 
<!DOCTYPE html> 
<html> 
<body> 
 
<form action="demo_form.asp"> 
First name: <input type="text" name="FirstName" value="Mickey"><br> 
Last name: <input type="text" name="LastName" value="Mouse"><br> 
<input type="submit" value="Submit"> 
</form> 
 
</body> 
</html> 
Formulário 
Formulário 
type: 
• button, checkbox, color, date, datetime, datetime-local, 
email, file, hidden, image, month, number, password, radio, 
range, reset, search, submit, tel, text, time, url, week 
Formulário: <select>, <option> 
<!DOCTYPE html> 
<html> 
<body> 
 
<select> 
 <option value="volvo">Volvo</option> 
 <option value="saab">Saab</option> 
 <option value="opel">Opel</option> 
 <option value="audi">Audi</option> 
</select> 
 
</body> 
</html> 
Formulário: <optgroup> 
<!DOCTYPE html> 
<html> 
<body> 
 
<select> 
 <optgrouplabel="Swedish Cars"> 
 <option value="volvo">Volvo</option> 
 <option value="saab">Saab</option> 
 </optgroup> 
 <optgroup label="German Cars"> 
 <option value="mercedes">Mercedes</option> 
 <option value="audi">Audi</option> 
 </optgroup> 
</select> 
 
</body> 
</html> 
Formulário: <textarea> 
<!DOCTYPE html> 
<html> 
<body> 
 
<textarea rows="4" cols="50"> 
At w3schools.com you will learn 
how to make a website. We offer 
free tutorials in all web 
development technologies. 
</textarea> 
 
</body> 
</html> 
Formulário: <label> 
<!DOCTYPE html> 
<html> 
<body> 
<p>Click on one of the text labels to toggle the related 
control:</p> 
 
<form action="demo_form.asp"> 
 <label for="male">Male</label> 
 <input type="radio" name="sex" id="male" value="male"><br> 
 <label for="female">Female</label> 
 <input type="radio" name="sex" id="female" value="female"><br><br> 
 <input type="submit" value="Submit"> 
</form> 
 
</body> 
</html> 
Formulário: <fieldset> 
<!DOCTYPE html> 
<html> 
<body> 
 
<form> 
 <fieldset> 
 <legend>Personalia:</legend> 
 Name: <input type="text"><br> 
 Email: <input type="text"><br> 
 Date of birth: <input type="text"> 
 </fieldset> 
</form> 
 
</body> 
</html> 
Formulário: accesskey e tabindex 
Tipo de Documento - <!DOCTYPE> 
• A declaração <!DOCTYPE> é obrigatória e deve 
ser a primeira coisa em um documento HTML. 
• <!DOCTYPE> não é uma tag, mas uma instrução 
ao browser sobre a versão do HTML usado na 
página. 
• Transitional x Strict 
▫ Strict é um conjunto de regras muito rígidas que 
definem o que pode e o que não pode ser escrito em 
HTML. 
▫ Transitional é um conjunto um pouco mais flexível e 
permite escrever algum HTML mais antigo e para 
algumas peculiaridades próprias de navegadores. 
 
<!DOCTYPE> de um XHTML 1.0 Transitional 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8" /> 
 <title>Exemplo 01</title> 
 <link rel="stylesheet" href="estilo.css" /> 
 </head> 
 <body> 
 <h1>Exemplo 01</h1> 
 <p>Estamos criando uma página HTML básica. 
 </body> 
</html> 
Validadores 
• Validador HTML do W3C 
▫ http://validator.w3.org/ 
• Validador CSS do W3C 
▫ http://jigsaw.w3.org/css-validator/ 
 
<!DOCTYPE> de um HTML5 
<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8" /> 
 <title>Exemplo 01</title> 
 <link rel="stylesheet" href="estilo.css" /> 
 </head> 
 <body> 
 <h1>Exemplo 01</h1> 
 <p>Estamos criando uma página HTML básica. 
 </body> 
</html> 
Definição de metadados - <meta> 
<head> 
 <meta name="description" content="Free Web tutorials"> 
 <meta name="keywords" content="HTML,CSS,XML,JavaScript"> 
 <meta name="author" content="Ståle Refsnes"> 
 <meta http-equiv="refresh" content="30"> 
 <meta charset="UTF-8"> 
</head> 
Codificação de caracteres – HTML 4.01 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8" /> 
 <title>Exemplo 01</title> 
 <link rel="stylesheet" href="estilo.css" /> 
 </head> 
 <body> 
 <h1>Exemplo 01</h1> 
 <p>Estamos criando uma página HTML básica. 
 </body> 
</html> 
Codificação de caracteres – HTML5 
<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8" /> 
 <title>Exemplo 01</title> 
 <link rel="stylesheet" href="estilo.css" /> 
 </head> 
 <body> 
 <h1>Exemplo 01</h1> 
 <p>Estamos criando uma página HTML básica. 
 </body> 
</html> 
Referências e Links importantes 
• Vídeos da Universidade XTI 
• www.w3schools.com 
• www.gimp.org 
• FREEMAN Eric & FREEMAN Elisabeth. Use a Cabeça! 
HTML com CSS e XHTML. Alta Books, 1ª Edição, 
2006. 
• Apostila da K19 - Desenvolvimento Web com HTML, 
CSS e Javascript. 
• RODRIGUES, Andréa. Desenvolvimento para 
Internet. 1ª Edição, Editora do Livro Técnico, 
2010.