Webdesign
Desenvolvimento de
AplicaçõesWeb
Carlos Cabral
[Link]
2
UX UI FE
USER EXPERIENCE USER INTERFACE FRONT-END DEVELOPMENT
Espírito Crítico, Capacidade de Domínio de Técnicas e HTML, CSS, Responsive, JS,
Análise, Wireframing e Ferramentas de Design, Programação
Prototipagem, Testes, etc… Tipografia, Cor, Sentido
Estético.
[Link]
exemplo HTML
3
[Link]
HTML 4 CONCEITOS FUNDAMENTAIS
4
Elementos Tags Atributos Aninhamento
[Link]
Os 4 conceitos fundamentais
5
• As páginas web são compostas por elementos
• Os elementos são os blocos que constituem o HTML
• Os elementos são representados por tags
• Tags HTML podem definir conteúdos tais como
títulos, parágrafos, tabelas, etc…
• Os Browsers não mostram as tags de HTML,
mas usam-nas para renderizar o conteúdo
da página;
• Os Atributos servem para definir características
de um elemento e são colocados no interior da
tag do mesmo.
[Link]
Os 4 conceitos fundamentais
6
• O Aninhamento (Nesting) refere-se ao facto de ser
comum elementos (pais) conterem outros
elementos (filhos)
exemplo:
inicio-a
inicio-b fim-b
inicio-c fim-c
fim-a
[Link]
HTML TAGS
7
funcionam em pares ex: <h1></h1> (salvo algumas exceções)
<tagname> conteúdo </tagname>
[Link]
Estrutura de uma página
8
<html>
<head>…</head>
<body>…</body>
</html>
[Link]
<!DOCTYPE> 9
<html>
<head>…</head>
<body>…</body>
</html>
[Link]
EXERCÍCIO 1
10
Cria uma simples página de HTML
[Link]
<TAGS>
[Link]
TÍTULOS HTML
12
Os títulos HTML são definidos com as tags <h1>...</h1> até ao <h6>...</h6>
h1 define o mais importante e o h6 define o menos.
Os motores de busca utilizam os títulos para indexar a estrutura e conteúdo da página
<h1> conteúdo </h1>
<h2> conteúdo </h2>
<h6> conteúdo </h6>
[Link]
Parágrafos HTML
13
Os parágrafos são definidos com a tag <p>...</p>
<p> conteúdo </p>
[Link]
Hiperligações(links) HTML
14
As Hiperligações são definidas com a tag <a>...</a>
<a href="[Link] conteúdo </a>
[Link]
Imagens HTML
15
As imagens são definidas com a tag <img>
<img src="[Link]" alt=“teste imagem” width="104" height="142">
A origem do ficheiro é definida pelo atributo src, o texto alternativo (caso não seja possível mostrar a imagem) pelo atributo alt.
[Link]
Botão HTML
16
Os botões são definidas com a tag <button>
<button> click me </button>
[Link]
Listas HTML
17
As listas são definidas pelas tags <ul> ou <ol>, seguidas pelas tags <li>
<ul>
<li>conteúdo</li>
<li>conteúdo</li>
</ul>
[Link]
Elementos vazios HTML
18
Elementos sem qualquer tipo de conteúdo são chamados de elementos vazios
<br>
Line Break
[Link]
atributos
[Link]
atributos HTML
20
•Todos os elementos podem ter atributos
•Providenciam informação adicional
•São sempre especificados na primeira tag
•atribute =“valor”
[Link]
[Link]
<head> HTML
21
•O elemento <head> é um
recipiente para metadata;
• Metadata é informação
sobre o documento html/
página;
•Metada não é renderizada
para o ecrã
[Link]
atributo style HTML
22
•O atributo style permite estilizar um determinado elemento
[Link]
23
OBRIGADO.
[Link]