INSTITUTO
SUPERIOR
DE CONTABILIDADE
E ADMINISTRAÇÃO
DO PORTO
Programação Web
HTML5
CSS 3
2018-2019
Maria José Angélico Gonçalves, 2019
Ana Paula Camarinha Teixeira, 2019
Linguagens de programação: HTML vs CSS 2
O HyperText Markup Language (Html) é é uma linguagem
de marcação utilizada na construção de páginas na Web.
Linguagem usada para estruturar e apresentar conteúdos
em páginas Web. As últimas versões para além de exercer
a função de estruturar o conteúdo tem também integradas
tags para apresentá-lo ao utilizador final.
O Cascading Style Sheets (CSS) é uma "folha de estilo"
composta por “camadas” e utilizada para definir a
apresentação (aparência) em páginas da internet que
adotam para o seu desenvolvimento linguagens de
marcação (como XML, HTML e XHTML). A sua maior
vantagem é efetuar a separação entre o formato e o
conteúdo de um documento.
3
HTML 5
HTML5 4
O que é HTML?
HYPERTEXT MARKUP LANGUAGE
Linguagem de marcação de hipertexto
Linguagem interpretada por um Browser
Descreve a estrutura e o conteúdo de um documento web
semântico (HTML5).
Permite a ligação com outros
documentos através de portais de
ligação conhecidos como links
Tags ou marcas 5
As Tags são colocadas entre < >
São normalmente utilizadas em pares, definindo o início e o
fim da tag
<tag> texto ou objecto </tag>
Existem algumas tags que não necessitam de ser finalizadas
<br>
A cada tag estão associadas opções que são colocadas na
abertura da tag
<tag opção1 opção2 ... opção n> texto </tag>
Elementos de HTML 6
“HTML is composed of a tree of HTML elements.
Elements can contain other elements and/or text.
They are defined using tags and can have attributes.
Browsers display each tag using a predefined style that can be
changed using CSS.”
Restivo, FEUP
Estrutura geral de um documento HTML 7
Instrução que indica ao browser qual o tipo de
<!DOCTYPE htm l> conteúdo que a página contém
<HTML>
<HEAD>
Cabeçalho do documento
<meta charset = “utf-8”>
Cabeçalho do documento
</HEAD>
<BODY>
Corpo do documento
Corpo do documento
</BODY>
</HTML>
<meta charset = “utf-8”> metatag responsável pela tabela de caracteres (padrão – tabela UNICODE)
Exemplo 8
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Título da página </title>
</head>
<body>
<p> O conteúdo do documento....</p>
</body>
</html>
Exemplo 9
<body>
<p id="first">Some <strong>text</strong></p>
<p>Some other text</p>
<img src="[Link]"></body>
Cabeçalhos 10
<h1>Title</h1> <!-- only one per document -->
<h2>Subtitle</h2> <!-- this is a comment btw -->
<h3>Section</h3>
<h4>Sub-section</h4>
<h5>Each one less important...</h5>
<h6>...than the other</h6>
HTML implementa 6 niveis de cabeçalhos. <h1> é o mais importante e
<h6> é o menos.
Parágrafos e quebras de linha 11
<p>This is a paragraph.</p>
<p>
This is another paragraph<br> <!-- empty tag -->
with a line break.
</p>
Formatação de texto 12
Negrito: <B> … </B>
Itálico: <I> … </I>
Sublinhado: <U> … </U>
Letra Grande: <BIG> … </BIG>
Letra Pequena: <SMALL> … </SMALL>
Inferior à linha: <SUB> … </SUB>
Superior à linha: <SUP> … </SUP>
Texto pré-formatado: <PRE> … </PRE>
Definição da fonte (de 1 a 7):
<FONT SIZE=+2>Mais 2 que o tamanho actual </FONT>
<FONT SIZE=-2>Menos 2 que o tamanho actual </FONT>
Definir cor: <FONT COLOR=#00FF00> Texto </FONT>
Centrar: <CENTER> </CENTER>
Links 13
<a href=“[Link] da W3schools</a>
<a href="[Link]
Abrir links numa nova janela
<a href="[Link] target="_blank">Visit W3Schools</a>
Imagens 14
<img src="[Link]" alt="A dog" width="300"
height="200">
(o ficheiro [Link] tem de estar disponível na pasta)
Alinhar imagens
<p><img src="[Link]" alt="A dog" width="300"
height="200“ align =“top”/”middle”/”bottom”>Texto
….</p>
HTML <figure> Tag 15
Use a <figure> element to mark up a photo in a document
Listas 16
Listas numeradas
<ol>
<li>An item</li> • Listas ordinárias e numeradas
<li>Another item</li> <ul>
<li>And another one</li>
<li>A list:
</ol>
<ol>
<li>Something</li>
<li>Something else</li>
Listas com ordinárias </ol>
<ul> </li>
<li>An item</li> <li>Another item</li>
<li>Another item</li> <li>And another one</li>
<li>And another one</li> </ul>
</ul>
Listas de definição 17
<dl>
<dt>A term</dt>
<dd>And its definition</dd>
<dt>This one</dt>
<dd>Has a different definition</dd>
<dd>Alternative definition</dd>
</dl>
Definir termos e descrições
Um termo pode ter várias descrições.
Vários termos podem ter a mesma descrição.
Tabelas 18
<TABLE> … </TABLE>
Atributos
align (center,left,right)
width (valor em pixels ou percentagem)
border (espessura do contorno da tabela em pixeis)
cellspacing (espaçamento das células da tabela)
cellpadding (espaçamento do texto ao contorno
da célula)
Parâmetros das tabelas 19
Adicionar contorno:
<TABLE BORDER=2>
Largura da tabela:
<TABLE WIDTH=50%>
<TABLE WIDTH=200>
Distância entre as células
<TABLE CELLSPACING=2>
Distância entre o conteúdo e o contorno:
<TABLE CELLPADDING=2>
Tabelas - tags 20
Inicia uma nova linha na tabela
<TR> </TR>
Define as células com os títulos de uma tabela
<TH> </TH>
Define as células da tabela
<TD> </TD>
Tabelas - Exemplo 21
<TABLE border="1">
<TR>
<TH> Cabeçalho 1</TH>
<TH> Cabeçalho 2</TH>
</TR>
<TR>
<TD> Linha 1<br>Coluna 1</TD>
<TD> Linha 1<br>Coluna 2</TD>
</TR>
<TR>
<TD> Linha 2<br>Coluna 1</TD>
<TD> Linha 2<br>Coluna 2</TD>
</TR>
</TABLE>
Parâmetros para tags de tabelas 22
Largura
<TH WIDTH=50%>
Alinhamento (CENTER, LEFT, RIGHT)
<TD ALIGN=CENTER>
Alinhamento vertical (TOP, BOTTOM, MIDDLE)
<TR VALIGN=BOTTOM>
Número de colunas que uma célula pode ocupar
<TD COLSPAN=2>
Número de linhas que uma célula pode ocupar
<TH ROWSPAN=2>
Elementos de HTML 23
Existem dois tipos de elementos de HTML de acordo com a maneira como eles são
exibidos no navegador:
Elementos inline ocupam apenas o espaço que precisam e não forçam
mudanças de linha. Exemplo: Strong, Font, ...
Elementos de bloco, por defeito, usam todo o espaço horizontal que podem
obter e forçam uma mudança de linha antes e depois de si mesmos. Exemplo: p,
h1, ...
Div 24
<div id="menu">
<ul>
<li><a>Home</a></li>
<li><a>Contacs</a></li>
<li><a>Register</a></li>
</ul>
</div>
Div is a generic block tag that can be used to define
sections of a website.
Span 25
<p>This book has been written
by <span class="author person">Arthur C. Clark</span>.</p>
Span is a generic inline tag that can be used, for example, to
mark specific parts of text
Elementos semânticos (HTML5) 26
Elementos semânticos 27
header
Represents a group of introductory or navigational aids. It may
contain some heading elements but also other elements like a
logo, wrapped section's header, a search form, and so on. Many
different elements can contain the header tag: body, section,
article, form, ....
nav
Represents a section of a page that links to other pages or to
parts within the page: a section with navigation links.
aside
Represents a section of the page with content connected
tangentially to the rest, which could be considered separate from
that content. These sections are often represented as sidebars or
inserts.
Elementos semânticos 28
section
Represents a generic section of a document, i.e., a thematic
grouping of content, typically with a heading (header).
article
Represents a self-contained composition in a document,
page, application, or site, which is intended to be
independently distributable or reusable, e.g., in syndication.
Each article should be identified, typically by including a
heading (header) as a child.
footer
Represents a footer for its nearest sectioning content or
sectioning root element. A footer typically contains information
about the author of the section, copyright data or links to
related documents. Many different elements can contain the
footer tag: body, section, article, form, ....
Referências 29
Frain Bem, Responsive Web Design with
HTML5 and CSS3 - Second Edition, Packt
Publishing Ltd., Birmingham, UK., 2015.
ISBN 978-1-78439-893-4
Restivo, A.(2019). FEUP
[Link]
30
CSS3
O que é CSS 31
O Cascading Style Sheets (CSS) é uma "folha de
estilo" composta por “camadas” e utilizada para
definir a apresentação (aparência) das páginas
da internet que adotam as linguagens de
marcação XML, HTML e XHTML.
O CSS define como serão exibidos os elementos
contidos no código de uma página.
A sua maior vantagem é efetuar a separação
entre o formato e o conteúdo de um documento.
CSS Syntax 32
Como posso aplicar estilos a documentos
33
HTML?
Na linha do código HTML
Introduzir uma folha de estilo no ficheiro HTML
[Link]
Criar uma folha de estilo externa
[Link]
Exemplo 1 34
Exemplo 2: 35
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<p>My mother has <span
style="color:blue">blue</span> eyes and my fhater has
<span style="color:green">green</span>eyes.</p>
</body>
</html>
Exemplo 3 36
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div style="color:blue">
<h1>This is a Blue Heading</h1>
<h3> This is a heading in a div element</h3>
<p> This is a some text in a div element. </p>
</div>
</body>
</html>
Seletores ID 37
Atingem os elementos pelo valor do seu ID.
O símbolo que identifica os seletores id é o (#).
Exemplo:
<li id=“catalog1234”>Happy face T-shirt</li>
li#catalog1234 { color: red; }
Atendendo a que os valores id são únicos é aceitável
descartar o nome do elemento
#catalog1234 { color: red; }
Seletores de Classe 38
Afetam elementos pertencentes a uma classe
O nome da class é indicado com um ponto final (.) noselector.
Exemplo:
Nome da classe
Nome do
elemento
[Link] { color: orange; }
Para aplicar a propriedade a todos os elementos de uma
class deve-se omitir o nome do elemento.
.special { color: orange; }
Seletores 39
The element Selector
The class Selector
[Link]
The id Selector
[Link]
[Link]
Seletores 40
Seletores 41
Links na mesma página 42
Link para uma parte específica de outra página
Especificidade 43
Seletores mais específicos têm mais peso quando se trata
de resolver conflitos de prioridade nas CSS.
Lista do mais para o menos especifico seletor:
ID selectors
Class selectors
Contextual selectors
Seletores individuais ao nível do elemento.
Cores 44
Escrever cores RGB em CSS 45
Unidades de medida 46
Unidades de medida 47
Formatação de texto 48
Propriedade Font
Family
Usar a propriedade font-family para especificar uma
fonte ou lista de fontes
Exemplo 49
<!DOCTYPE html>
<html>
<head>
<style>
p.a { font-family: "Times New Roman", Times, serif; }
p.b { font-family: Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<h1>The font-family Property</h1>
<p class="a">This is a paragraph, shown in the Times New Roman font.</p>
<p class="b">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
Especificar a dimensão da fonte
50
Exemplo:
<!DOCTYPE html>
<html>
<head>
<style>
div.a { font-size: 15px; }
div.b { font-size: large; }
div.c { font-size: 150%; }
</style>
</head>
<body>
<h1>The font-size Property</h1>
<div class="a">This is some text.</div>
<div class="b">This is some text.</div>
<div class="c">This is some text.</div>
</body>
Peso da fonte - Exemplo: 51
<!DOCTYPE html>
<html>
<head>
<style>
[Link] { font-weight: normal; }
[Link] { font-weight: lighter; }
[Link] { font-weight: bold; }
[Link] { font-weight: 900; }
</style>
</head>
<body>
<h1>The font-weight Property</h1>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>
Estilo da fonte- Exemplo 52
Múltiplas propriedades 53
Cor do texto 54
Peso da linha 55
Indentação de texto 56
Alinhamento do texto 57
Text decoration 58
Alterar capitalização de texto 59
Introdução de espaços
60
Outras propriedades do texto 61
Imagens
62
Modelo de caixa 63
Exemplo:
[Link]
[Link]
Tabelas 64
Cor do primeiro plano 65
A section that is quoted from another source:
Cor do 1º e 2º plano 66
Cor do 1º plano
Cor do 2º plano
Fundo
67
Exemplo de fundo 68
Outro exemplo
[Link]
Mover e posicionar 69
Posicionamento Normal
Numa página web que use CSS os elementos são
posicionados de cima para baixo e da esquerda
para a direita segundo a ordem que aparece no
código.
Os blocos ajustam-se uns a seguir aos outros e
preenchem a largura total da janela do browser
Quando um elemento é redimensionado, os
outros elementos expandem-se ou contraem em
função da nova largura.
Os elementos em linha ajustam-se à largura dos
elementos sempre que há alterações de
dimensão.
Posicionamento normal 70
Floating (elemento de imagem) 71
A propriedade float move um elemento tão
distante quanto possível para a esquerda ou direita
permitindo que o conteúdo ande à volta desse
elemento.
Exemplo: [Link]
Floating (elemento de texto) 72
Exemplo: [Link]
Floating a vários elementos 73
Limpar elementos flutuantes 74
Exemplo: [Link]
Posicionamento 75
A propriedade position indica que um elemento deve ser
posicionado e indica o método de posicionamento
Estático – Método normal
[Link]
Relativo – Move a caixa em relação à sua posição original
[Link]
elative
Absoluto – Os elementos são posicionados em relação a um
elemento de conteúdo.
[Link]
bsolute
Fixo - O elemento mantém-se fixo na janela
[Link]
n_fixed
Blocos de conteúdo 76
Stacking Order 77
Grid 78
A grid layout enables us to align elements into
columns and rows.
Veja o código:
[Link]
Grid container 79
An HTML element becomes a grid container by
setting the display property to grid or inline-grid.
Veja os exemplos:
[Link]
[Link]
Referências 80
Frain Bem, Responsive Web Design with
HTML5 and CSS3 - Second Edition, Packt
Publishing Ltd., Birmingham, UK., 2015.
ISBN 978-1-78439-893-4
Restivo, A.(2019). FEUP
[Link]