SlideShare uma empresa Scribd logo
Prof. Carlos J. Costa, PhD
Professor Associado de Sistemas de Informação
ISEG (Lisbon School of Economics and Management), Universidade de Lisboa
Enquadramento
 Protocolos:
 HTTP (hipertext
Transfer Protocol)
 TCP (Transmission
Control Protocol )
 IP (Internet Protocol)
 Ethernet
Enquadramento
 Servidor de DHCP (Dynamic Host
Configuration Protocol)
 tem por propósito atribuição de IP
Enquadramento
 DNS (Domain Name System)
Enquadramento
2 – Pedido recebido
Pode existir: execução de programas,
acesso base de dados…
3- Reposta ao pedido
1 – Pedido HTTP (escrevendo URL
na barra de endereço)
4 – Recebido reposta (ficheiros
texto, imagens, etc)
5 – Interpretação do código
Enquadramento
Browser
 Fazer pedido HTTP
 Interpretar repostas
(HTML, CSS,
Javascript)
 Renderizar e Mostrar
no Ecã
 Também tem
ferramentas de
desenvolvimento
HTML
 Hypertext Markup Language,
 Linguagem padrão utilizada para acesso e
exibição de páginas Web.
 Linhas de código HTML são interpretadas pelo
browser que mostra o resultado final ao
utilizador,
 a linguagem HTML é constituída de:
 textos e
 códigos (marcas, etiquetas ou tags).
Estrutura de Ficheiro HTML
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
Corpo da página
</body>
</html>
Codificação
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
HTML5
<meta charset="UTF-8">
ISO-8859-1
 A codificação ISO usada em países de língua
oficial portuguesa é a ISO-8859-1.
 Também connhecida por ISO-Latin-1,
 A ISO-8859-1 engloba as línguas europeias
dos países ocidentais (Western Europe)
Fonte:http://www.linguateca.pt/codificacoes/
UTF-8
 É um sistema de codificação que procura congregar as
diversas codificações ISO numa única só, mantendo a sua
compatibilidade.
 Usa um único byte para codificar os primeiros 128 caracteres
da tabela (os caracteres US-ASCII),
 Usa dois bytes para os restantes caracteres, o que permite
incluir os restantes caracteres das restantes codificações (e.g.
latinos, eslavos ou gregos, até os caracteres cirílicos, árabes e
hindus).
 eg. a palavra 'pão' no sistema ISO-8859-1 ocupa 3 bytes,
enquanto que no sistema UTF-8 ocupa 4 bytes, uma vez que
a letra 'ã' é representada com dois bytes.
Fonte:http://www.linguateca.pt/codificacoes/
Elementos HTML
 Os documentos HTML são construidos com
elementos HTML.
 Os elmentos HTML são escritos com
 uma marca de início: <marca>
 uma marca de fim: </marca>
 o conteúdo entre eles: conteúdo
 Exemplo <h1>conteudo</h1>
Atributos HTML
 Um elemento HTML pode ter atributos
 Os atributos fornecem informação adicional
sobre um elemento
 Os atributos são sempre especificados na
marca inicial
 Os atributos vêm com um par nome/valor,
como por exemplo (nome=”valor”). Um
exemplo é o id
<p id=”paragrafo”>
Parágrafos, Headings
 <p></p>
 <br>
 <pre> </pre>
 <h1></h1>
 <h2></h2>
 <h3></h3>
 <hr>
Style e Formatação
 Atributo Style
 <body style="background-color:lightgrey;">
 <h1 style="color:blue;">This is a heading</h1>
 <p style="color:red;">This is a paragraph.</p>
 Formatação (tendência para se tornar obsoleto)
 <BODY text="#0000FF" link="#00FFFF" bgcolor="#66FF00" alink="#FF6600"
vlink="#FFFF66">
 Itálico ( <I>texto,</I>), negrito (<B>texto,</B>) sublinhado: <U>texto,</U>;
 <FONT SIZE=7 STYLE="font-size: 40pt">
 <FONT COLOR="#008000">texto.
 </FONT></FONT>
 <FONT FACE="Courier New, monospace">texto</FONT>.
Comentários e código
 <!-- comentário -->
 <code> </code>
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
Hiperligações
 As hiperligações representam-se assim:
<a href="url">texto da hiperligação</a>
Exemplo:
<html>
<head>
<title>Pagina 2</title>
</head>
<body>
Para chamar a página 1 clicar
<a href = "pagina1.htm"> aqui</a>.
</body>
</html>
Hiperligações
 <a href="http://www.iscte-iul.pt/" target="_blank">ISCTE!</a>
 O atributo target pode ter os seguintes valores:
 _blank abre o documento da hiperligação numa
nova janela ou tab
 _self abre o documento da hiperligação na própria
janela (situação por omissão)
 _parent abre o documento da hiperligação na
frame a cima
 _top abre o documento da hiperligação na janela
 framename abre o documento da hiperligação num
frame com nome especifico
Hiperligações
 Referência relativa -> indicação apenas do
caminho
 Referência absoluta -> link indicando URL e
caminho completo (com a expressão http://)
Imagens
 <img src="url" alt="algum texto">
<html>
<head>
<title>Página 1</title>
</head>
<body>
Para voltar à página 2 clicar <a href = "pagina2.htm"> aqui</a>
<img src="boneco.jpg" alt="boneco” style = "width:100px; height:100px;">
</body>
</html>
Imagens
 JPG
 GIF
 PNG
 SVG
Atenção não suportado:
 BMP
Imagens
SVG no próprio documento:
<html>
<body>
<h1>exemplo de SVG</h1>
<svg width="400" height="400">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
<rect x="100" y="20" width="30" height="100" style="fill:rgb(0,0,255);stroke-
width:3;stroke:rgb(0,0,0)" />
</svg>
</body>
</html>
Simbolos especiais
 á &aacute
 à &agrave
 ã &atilde
 â &acirc
 ç &ccedil
 A sua utilização tem vindo a desaparecer
devido à utilização de UTF 8
Listas
<h3>Lista não numerada</h3>
<ul>
<li> Primeiro item </li>
<li> Segundo item </li>
<li> Terceiro item </li>
</ul>
Listas com títulos
<dl>
<dt>Um título da lista</dt>
<dd>Um primeiro texto</dd>
<dt>Outro Título</dt>
<dd>Novo texto para a lista</dd>
</dl>
Listas numeradas
<h3>Lista numerada</h3>
<ol>
<li> Primeiro item da Lista </li>
<li> Segundo item da Lista </li>
<li> Terceiro item da Lista </li>
<li> Quarto item da Lista</li>
</ol>
Tabelas
 <TABLE> para iniciar tabela
 </TABLE> para fechar tabela;
 <tr> para iniciar uma linha;
 </tr> para findar uma linha;
 <th> para começar uma célula (table header);
 </th> encerrar uma célula
 <td> para iniciar uma célula (table data)
 </td> para fechar uma célula;
Blocos e Inline
 Um elemento ao nível do bloco começa sempre com uma nova linha
e utiliza todo o espaço disponível.
 Exemplo de elementos ao nível do bloco:
 <div>
 <h1> - <h6>
 <p>
 <form>
 Um elemento inline não começa no início da linha e apenas utiliza a
largura necessária.
 São exemplos de elementos inline:
 <span>
 <a>
 <img>
Div e Span
 <div> e <span> são elementos que funcionam
geralmente como contentores, permindo
agrupar outros elementos.
Formulários
 Formulários (ou forms)
 Iniciado com <form> e fechado com </form>.
 <input> : text (linha única para texto),
password, checkbox, radio, submit (button) e
reset (button);
 <select> : listbox, combobox;
 <textarea> : campo de texto de múltiplas
linhas.
Formulários
 Há dois métodos:
 post
 orientado para a transferência de grandes
quantidades de dados,
 get
 os dados fazem parte da URL associado à
consulta enviada para o servidor.
Formulários
<form method="post“ action="teste.php">
Digite o nome de sua cidade:
<input type="text" name="Cidades" value=Lisboa
size="15" maxlenght="15">
<input type="submit" value="enviar">
</form>
Formulários
Digite uma senha:
<input type="password" name="Senha"
value="minhasenha" size="10" maxlenght="10">
Formulários
CheckBox
Que outro curso pretende inscrever-se?<p>
<input type="checkbox" name="preferencia" value="mktg"
checked>Marketing
<input type="checkbox" name="preferencia"
value="grh">GRH<p>
<input type="checkbox" name="preferencia"
value="fin">Finanças
<input type="checkbox" name="preferencia"
value="ge">Gestão Estratégica<p>
Formulários
Radio
Em que curso se pretende inscrever?<p>
<input type="radio" name="preferencia" value="mktg"
checked>Marketing
<input type="radio" name="preferencia" value ="grh" >
GRH <p>
<input type="radio" name="preferencia" value="fin">
Finanças
<input type="radio" name="preferencia" value="ge">
Gestão Estratégica<p>
Formulários
Listbox
Em que curso se pretende inscrever?<p>
<select name="cursos" size = "10" multiple>
<option value="mktg" >Marketing</option>
<option value ="grh">GRH </option>
<option value="fin">Finanças </option>
<option value="ge">Gestão Estratégica </option>
</select>
Formulários
Combobox
Em que curso se pretende inscrever?<p>
<select name="cursos">
<option value="mktg" >Marketing</option>
<option value ="grh">GRH </option>
<option value="fin">Finanças </option>
<option value="ge">Gestão Estratégica </option>
</select>
Formulários
Área
<textarea name="opiniao" rows="5" cols="40">
Faça aqui um comentário ao funcionamento deste
curso
</textarea>
Formulários
Antes de fechar não esquecer:
<input type="reset">
<input type="submit“ value="enviar">
Molduras
<frameset> ... </frameset> é o comando HTML
responsável pela divisão da janela do browser em
duas ou mais partes
<frame>. é usado para carregar esses ficheiros
parâmetros:
src - define o ficheiro a ser carregado no frame;
name - define o nome do frame e possibilita o aparecimento
do conteúdo do link de um frame no outro.
Molduras
<HTML>
<head><title> frames</title></head>
<FRAMESET COLS = "308,100% " >
<FRAME SRC="pagina1.htm" NAME=“pagina 1">
<FRAME SRC="pagina2.htm" NAME=“pagina 2">
</FRAMESET>
<BODY>
</BODY>
</HTML>
Molduras
<HTML>
<head><title> frames 2</title></head>
<FRAMESET ROWS = "55,100% " border="0">
<FRAME SRC="frame.htm" NAME="Frame" SCROLLING="NO"
MARGINWIDTH="20" MARGINHEIGHT="0" NORESIZE>
<FRAMESET COLS = "108,100% " >
<FRAME SRC="pagina1.htm" NAME="pg1" RESIZE>
<FRAME SRC="pagina2.htm" NAME="pg2" RESIZE>
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>
Molduras
<CENTER>
<iframe src=“http://iscte-iul.pt" width=740 height=255>
</iframe>
</CENTER>
Referência
 Costa, C. J. (2007). Desenvolvimento para web.
ITML press/Lusocredito.
 Pereira, A., & Poupa, C. (2013). Linguagens
web, 5ª edicao, Edições Silabo
 Percivalm R. (2017) Confident Coding: Master
the Fundamentals of Code and Supercharge
Your Career (Confident Series) 1st Edition,
KognPage
 http://www.w3.org/

Mais conteúdo relacionado

Mais procurados

Html e css
Html e cssHtml e css
Html e css
maxrosan
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
Dra. Camila Hamdan
 
Css
Css   Css
Css Aula 1
Css   Aula 1Css   Aula 1
Css Aula 1
Clara Ferreira
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
Rodrigo Bueno Santa Maria, BS, MBA
 
Html
HtmlHtml
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Rodrigo Bueno Santa Maria, BS, MBA
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
Ester Razzo Fischer
 
HTML&CSS 2 - Intermediate HTML
HTML&CSS 2 - Intermediate HTMLHTML&CSS 2 - Intermediate HTML
HTML&CSS 2 - Intermediate HTML
Dinis Correia
 
Html 5 -_aula_2
Html 5 -_aula_2Html 5 -_aula_2
Html 5 -_aula_2
Pedro Neto
 
Css 3
Css 3Css 3
Css 3
Pedro Neto
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
Kundan Narendra
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
Salvador Torres
 
Workshop Web e WordPress
Workshop Web e WordPressWorkshop Web e WordPress
Workshop Web e WordPress
Haste Design
 
Projetando para WordPress
Projetando para WordPressProjetando para WordPress
Projetando para WordPress
Haste Design
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
Leonardo Soares
 
Aplicações rápidas para a Web com Django
Aplicações rápidas para a Web com DjangoAplicações rápidas para a Web com Django
Aplicações rápidas para a Web com Django
Freedom DayMS
 
HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5
ondazul
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
Léo Dias
 
HTML Básico
HTML BásicoHTML Básico

Mais procurados (20)

Html e css
Html e cssHtml e css
Html e css
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
 
Css
Css   Css
Css
 
Css Aula 1
Css   Aula 1Css   Aula 1
Css Aula 1
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Html
HtmlHtml
Html
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
 
HTML&CSS 2 - Intermediate HTML
HTML&CSS 2 - Intermediate HTMLHTML&CSS 2 - Intermediate HTML
HTML&CSS 2 - Intermediate HTML
 
Html 5 -_aula_2
Html 5 -_aula_2Html 5 -_aula_2
Html 5 -_aula_2
 
Css 3
Css 3Css 3
Css 3
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
 
Workshop Web e WordPress
Workshop Web e WordPressWorkshop Web e WordPress
Workshop Web e WordPress
 
Projetando para WordPress
Projetando para WordPressProjetando para WordPress
Projetando para WordPress
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
Aplicações rápidas para a Web com Django
Aplicações rápidas para a Web com DjangoAplicações rápidas para a Web com Django
Aplicações rápidas para a Web com Django
 
HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 

Semelhante a HTML

Introdução de web
Introdução de webIntrodução de web
Introdução de web
Sedu
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Eduardo Bertolucci
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
Pedro Gaspar
 
Php aula1
Php aula1Php aula1
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
Kaoru Hatake
 
Curso HTML módulo 2
Curso HTML módulo 2Curso HTML módulo 2
Curso HTML módulo 2
Michel Bernardes de Jesus
 
Curso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-endCurso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-end
Mario Sergio
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Cristofer Sousa
 
13 Java Script - Validação de formulário
13 Java Script  - Validação de formulário13 Java Script  - Validação de formulário
13 Java Script - Validação de formulário
Centro Paula Souza
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
Israel Messias
 
RCOM 11º Ano - HTML
RCOM 11º Ano - HTMLRCOM 11º Ano - HTML
RCOM 11º Ano - HTML
Escola Secundária de Vizela
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
Luis Gustavo Almeida
 
Introdução ao PHP Parte 1
Introdução ao PHP Parte 1Introdução ao PHP Parte 1
Introdução ao PHP Parte 1
Wellington Oliveira
 
Básico PHP: Introdução HTML
Básico PHP: Introdução HTMLBásico PHP: Introdução HTML
Básico PHP: Introdução HTML
Wellington Oliveira
 
html css js ajax exercícios de programação
html css js ajax exercícios de programaçãohtml css js ajax exercícios de programação
html css js ajax exercícios de programação
BrunoEmanuelJesusPir
 
O que é html
O que é htmlO que é html
O que é html
Eduardo Kiefer
 
Dream 06
Dream 06Dream 06
Dream 06
Anderson Maciel
 
Aula 1 apresentação + html (tags)
Aula 1   apresentação + html (tags)Aula 1   apresentação + html (tags)
Aula 1 apresentação + html (tags)
andreluizlc
 
Html
HtmlHtml
Apresentação para aula de HTML básico
Apresentação para aula de HTML básicoApresentação para aula de HTML básico
Apresentação para aula de HTML básico
Silvio Sales do Nascimento Júnior
 

Semelhante a HTML (20)

Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
Php aula1
Php aula1Php aula1
Php aula1
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
Curso HTML módulo 2
Curso HTML módulo 2Curso HTML módulo 2
Curso HTML módulo 2
 
Curso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-endCurso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-end
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
13 Java Script - Validação de formulário
13 Java Script  - Validação de formulário13 Java Script  - Validação de formulário
13 Java Script - Validação de formulário
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
 
RCOM 11º Ano - HTML
RCOM 11º Ano - HTMLRCOM 11º Ano - HTML
RCOM 11º Ano - HTML
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 
Introdução ao PHP Parte 1
Introdução ao PHP Parte 1Introdução ao PHP Parte 1
Introdução ao PHP Parte 1
 
Básico PHP: Introdução HTML
Básico PHP: Introdução HTMLBásico PHP: Introdução HTML
Básico PHP: Introdução HTML
 
html css js ajax exercícios de programação
html css js ajax exercícios de programaçãohtml css js ajax exercícios de programação
html css js ajax exercícios de programação
 
O que é html
O que é htmlO que é html
O que é html
 
Dream 06
Dream 06Dream 06
Dream 06
 
Aula 1 apresentação + html (tags)
Aula 1   apresentação + html (tags)Aula 1   apresentação + html (tags)
Aula 1 apresentação + html (tags)
 
Html
HtmlHtml
Html
 
Apresentação para aula de HTML básico
Apresentação para aula de HTML básicoApresentação para aula de HTML básico
Apresentação para aula de HTML básico
 

Mais de Carlos J. Costa

Generative AI
Generative AIGenerative AI
Generative AI
Carlos J. Costa
 
IA Generativa
IA GenerativaIA Generativa
IA Generativa
Carlos J. Costa
 
Machine Learning
Machine LearningMachine Learning
Machine Learning
Carlos J. Costa
 
Power BI Computing Languages
Power BI Computing LanguagesPower BI Computing Languages
Power BI Computing Languages
Carlos J. Costa
 
Python Scikit-Learn
Python Scikit-LearnPython Scikit-Learn
Python Scikit-Learn
Carlos J. Costa
 
Python Pandas
Python PandasPython Pandas
Python Pandas
Carlos J. Costa
 
Python Numpy
Python NumpyPython Numpy
Python Numpy
Carlos J. Costa
 
Open Source Robotics as Booster to Creativity
Open Source Robotics as  Booster to CreativityOpen Source Robotics as  Booster to Creativity
Open Source Robotics as Booster to Creativity
Carlos J. Costa
 
Introdução à Gestão de Projetos - Conceitos
Introdução à Gestão de Projetos - ConceitosIntrodução à Gestão de Projetos - Conceitos
Introdução à Gestão de Projetos - Conceitos
Carlos J. Costa
 
Pós-Graduação em Gestão de Projetos
Pós-Graduação em Gestão de ProjetosPós-Graduação em Gestão de Projetos
Pós-Graduação em Gestão de Projetos
Carlos J. Costa
 
Introdução à Gestão de Projeto
Introdução à Gestão de ProjetoIntrodução à Gestão de Projeto
Introdução à Gestão de Projeto
Carlos J. Costa
 
Usability
UsabilityUsability
Usability
Carlos J. Costa
 
Wordpress
WordpressWordpress
Wordpress
Carlos J. Costa
 
Client-Side Web Development - An Overview
Client-Side Web Development - An OverviewClient-Side Web Development - An Overview
Client-Side Web Development - An Overview
Carlos J. Costa
 
Web Page Development - An Overview
Web Page Development - An OverviewWeb Page Development - An Overview
Web Page Development - An Overview
Carlos J. Costa
 
ERP
ERPERP
Weka
WekaWeka
Modelo Relacional
Modelo RelacionalModelo Relacional
Modelo Relacional
Carlos J. Costa
 
Globalization
GlobalizationGlobalization
Globalization
Carlos J. Costa
 
Information systems organization
Information systems organizationInformation systems organization
Information systems organization
Carlos J. Costa
 

Mais de Carlos J. Costa (20)

Generative AI
Generative AIGenerative AI
Generative AI
 
IA Generativa
IA GenerativaIA Generativa
IA Generativa
 
Machine Learning
Machine LearningMachine Learning
Machine Learning
 
Power BI Computing Languages
Power BI Computing LanguagesPower BI Computing Languages
Power BI Computing Languages
 
Python Scikit-Learn
Python Scikit-LearnPython Scikit-Learn
Python Scikit-Learn
 
Python Pandas
Python PandasPython Pandas
Python Pandas
 
Python Numpy
Python NumpyPython Numpy
Python Numpy
 
Open Source Robotics as Booster to Creativity
Open Source Robotics as  Booster to CreativityOpen Source Robotics as  Booster to Creativity
Open Source Robotics as Booster to Creativity
 
Introdução à Gestão de Projetos - Conceitos
Introdução à Gestão de Projetos - ConceitosIntrodução à Gestão de Projetos - Conceitos
Introdução à Gestão de Projetos - Conceitos
 
Pós-Graduação em Gestão de Projetos
Pós-Graduação em Gestão de ProjetosPós-Graduação em Gestão de Projetos
Pós-Graduação em Gestão de Projetos
 
Introdução à Gestão de Projeto
Introdução à Gestão de ProjetoIntrodução à Gestão de Projeto
Introdução à Gestão de Projeto
 
Usability
UsabilityUsability
Usability
 
Wordpress
WordpressWordpress
Wordpress
 
Client-Side Web Development - An Overview
Client-Side Web Development - An OverviewClient-Side Web Development - An Overview
Client-Side Web Development - An Overview
 
Web Page Development - An Overview
Web Page Development - An OverviewWeb Page Development - An Overview
Web Page Development - An Overview
 
ERP
ERPERP
ERP
 
Weka
WekaWeka
Weka
 
Modelo Relacional
Modelo RelacionalModelo Relacional
Modelo Relacional
 
Globalization
GlobalizationGlobalization
Globalization
 
Information systems organization
Information systems organizationInformation systems organization
Information systems organization
 

HTML

  • 1. Prof. Carlos J. Costa, PhD Professor Associado de Sistemas de Informação ISEG (Lisbon School of Economics and Management), Universidade de Lisboa
  • 2. Enquadramento  Protocolos:  HTTP (hipertext Transfer Protocol)  TCP (Transmission Control Protocol )  IP (Internet Protocol)  Ethernet
  • 3. Enquadramento  Servidor de DHCP (Dynamic Host Configuration Protocol)  tem por propósito atribuição de IP
  • 5. Enquadramento 2 – Pedido recebido Pode existir: execução de programas, acesso base de dados… 3- Reposta ao pedido 1 – Pedido HTTP (escrevendo URL na barra de endereço) 4 – Recebido reposta (ficheiros texto, imagens, etc) 5 – Interpretação do código
  • 7. Browser  Fazer pedido HTTP  Interpretar repostas (HTML, CSS, Javascript)  Renderizar e Mostrar no Ecã  Também tem ferramentas de desenvolvimento
  • 8. HTML  Hypertext Markup Language,  Linguagem padrão utilizada para acesso e exibição de páginas Web.  Linhas de código HTML são interpretadas pelo browser que mostra o resultado final ao utilizador,  a linguagem HTML é constituída de:  textos e  códigos (marcas, etiquetas ou tags).
  • 9. Estrutura de Ficheiro HTML <!DOCTYPE html> <html> <head> <title>Título da página</title> </head> <body> Corpo da página </body> </html>
  • 10. Codificação <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> HTML5 <meta charset="UTF-8">
  • 11. ISO-8859-1  A codificação ISO usada em países de língua oficial portuguesa é a ISO-8859-1.  Também connhecida por ISO-Latin-1,  A ISO-8859-1 engloba as línguas europeias dos países ocidentais (Western Europe) Fonte:http://www.linguateca.pt/codificacoes/
  • 12. UTF-8  É um sistema de codificação que procura congregar as diversas codificações ISO numa única só, mantendo a sua compatibilidade.  Usa um único byte para codificar os primeiros 128 caracteres da tabela (os caracteres US-ASCII),  Usa dois bytes para os restantes caracteres, o que permite incluir os restantes caracteres das restantes codificações (e.g. latinos, eslavos ou gregos, até os caracteres cirílicos, árabes e hindus).  eg. a palavra 'pão' no sistema ISO-8859-1 ocupa 3 bytes, enquanto que no sistema UTF-8 ocupa 4 bytes, uma vez que a letra 'ã' é representada com dois bytes. Fonte:http://www.linguateca.pt/codificacoes/
  • 13. Elementos HTML  Os documentos HTML são construidos com elementos HTML.  Os elmentos HTML são escritos com  uma marca de início: <marca>  uma marca de fim: </marca>  o conteúdo entre eles: conteúdo  Exemplo <h1>conteudo</h1>
  • 14. Atributos HTML  Um elemento HTML pode ter atributos  Os atributos fornecem informação adicional sobre um elemento  Os atributos são sempre especificados na marca inicial  Os atributos vêm com um par nome/valor, como por exemplo (nome=”valor”). Um exemplo é o id <p id=”paragrafo”>
  • 15. Parágrafos, Headings  <p></p>  <br>  <pre> </pre>  <h1></h1>  <h2></h2>  <h3></h3>  <hr>
  • 16. Style e Formatação  Atributo Style  <body style="background-color:lightgrey;">  <h1 style="color:blue;">This is a heading</h1>  <p style="color:red;">This is a paragraph.</p>  Formatação (tendência para se tornar obsoleto)  <BODY text="#0000FF" link="#00FFFF" bgcolor="#66FF00" alink="#FF6600" vlink="#FFFF66">  Itálico ( <I>texto,</I>), negrito (<B>texto,</B>) sublinhado: <U>texto,</U>;  <FONT SIZE=7 STYLE="font-size: 40pt">  <FONT COLOR="#008000">texto.  </FONT></FONT>  <FONT FACE="Courier New, monospace">texto</FONT>.
  • 17. Comentários e código  <!-- comentário -->  <code> </code> <code> var x = 5; var y = 6; document.getElementById("demo").innerHTML = x + y; </code>
  • 18. Hiperligações  As hiperligações representam-se assim: <a href="url">texto da hiperligação</a> Exemplo: <html> <head> <title>Pagina 2</title> </head> <body> Para chamar a página 1 clicar <a href = "pagina1.htm"> aqui</a>. </body> </html>
  • 19. Hiperligações  <a href="http://www.iscte-iul.pt/" target="_blank">ISCTE!</a>  O atributo target pode ter os seguintes valores:  _blank abre o documento da hiperligação numa nova janela ou tab  _self abre o documento da hiperligação na própria janela (situação por omissão)  _parent abre o documento da hiperligação na frame a cima  _top abre o documento da hiperligação na janela  framename abre o documento da hiperligação num frame com nome especifico
  • 20. Hiperligações  Referência relativa -> indicação apenas do caminho  Referência absoluta -> link indicando URL e caminho completo (com a expressão http://)
  • 21. Imagens  <img src="url" alt="algum texto"> <html> <head> <title>Página 1</title> </head> <body> Para voltar à página 2 clicar <a href = "pagina2.htm"> aqui</a> <img src="boneco.jpg" alt="boneco” style = "width:100px; height:100px;"> </body> </html>
  • 22. Imagens  JPG  GIF  PNG  SVG Atenção não suportado:  BMP
  • 23. Imagens SVG no próprio documento: <html> <body> <h1>exemplo de SVG</h1> <svg width="400" height="400"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> <rect x="100" y="20" width="30" height="100" style="fill:rgb(0,0,255);stroke- width:3;stroke:rgb(0,0,0)" /> </svg> </body> </html>
  • 24. Simbolos especiais  á &aacute  à &agrave  ã &atilde  â &acirc  ç &ccedil  A sua utilização tem vindo a desaparecer devido à utilização de UTF 8
  • 25. Listas <h3>Lista não numerada</h3> <ul> <li> Primeiro item </li> <li> Segundo item </li> <li> Terceiro item </li> </ul>
  • 26. Listas com títulos <dl> <dt>Um título da lista</dt> <dd>Um primeiro texto</dd> <dt>Outro Título</dt> <dd>Novo texto para a lista</dd> </dl>
  • 27. Listas numeradas <h3>Lista numerada</h3> <ol> <li> Primeiro item da Lista </li> <li> Segundo item da Lista </li> <li> Terceiro item da Lista </li> <li> Quarto item da Lista</li> </ol>
  • 28. Tabelas  <TABLE> para iniciar tabela  </TABLE> para fechar tabela;  <tr> para iniciar uma linha;  </tr> para findar uma linha;  <th> para começar uma célula (table header);  </th> encerrar uma célula  <td> para iniciar uma célula (table data)  </td> para fechar uma célula;
  • 29. Blocos e Inline  Um elemento ao nível do bloco começa sempre com uma nova linha e utiliza todo o espaço disponível.  Exemplo de elementos ao nível do bloco:  <div>  <h1> - <h6>  <p>  <form>  Um elemento inline não começa no início da linha e apenas utiliza a largura necessária.  São exemplos de elementos inline:  <span>  <a>  <img>
  • 30. Div e Span  <div> e <span> são elementos que funcionam geralmente como contentores, permindo agrupar outros elementos.
  • 31. Formulários  Formulários (ou forms)  Iniciado com <form> e fechado com </form>.  <input> : text (linha única para texto), password, checkbox, radio, submit (button) e reset (button);  <select> : listbox, combobox;  <textarea> : campo de texto de múltiplas linhas.
  • 32. Formulários  Há dois métodos:  post  orientado para a transferência de grandes quantidades de dados,  get  os dados fazem parte da URL associado à consulta enviada para o servidor.
  • 33. Formulários <form method="post“ action="teste.php"> Digite o nome de sua cidade: <input type="text" name="Cidades" value=Lisboa size="15" maxlenght="15"> <input type="submit" value="enviar"> </form>
  • 34. Formulários Digite uma senha: <input type="password" name="Senha" value="minhasenha" size="10" maxlenght="10">
  • 35. Formulários CheckBox Que outro curso pretende inscrever-se?<p> <input type="checkbox" name="preferencia" value="mktg" checked>Marketing <input type="checkbox" name="preferencia" value="grh">GRH<p> <input type="checkbox" name="preferencia" value="fin">Finanças <input type="checkbox" name="preferencia" value="ge">Gestão Estratégica<p>
  • 36. Formulários Radio Em que curso se pretende inscrever?<p> <input type="radio" name="preferencia" value="mktg" checked>Marketing <input type="radio" name="preferencia" value ="grh" > GRH <p> <input type="radio" name="preferencia" value="fin"> Finanças <input type="radio" name="preferencia" value="ge"> Gestão Estratégica<p>
  • 37. Formulários Listbox Em que curso se pretende inscrever?<p> <select name="cursos" size = "10" multiple> <option value="mktg" >Marketing</option> <option value ="grh">GRH </option> <option value="fin">Finanças </option> <option value="ge">Gestão Estratégica </option> </select>
  • 38. Formulários Combobox Em que curso se pretende inscrever?<p> <select name="cursos"> <option value="mktg" >Marketing</option> <option value ="grh">GRH </option> <option value="fin">Finanças </option> <option value="ge">Gestão Estratégica </option> </select>
  • 39. Formulários Área <textarea name="opiniao" rows="5" cols="40"> Faça aqui um comentário ao funcionamento deste curso </textarea>
  • 40. Formulários Antes de fechar não esquecer: <input type="reset"> <input type="submit“ value="enviar">
  • 41. Molduras <frameset> ... </frameset> é o comando HTML responsável pela divisão da janela do browser em duas ou mais partes <frame>. é usado para carregar esses ficheiros parâmetros: src - define o ficheiro a ser carregado no frame; name - define o nome do frame e possibilita o aparecimento do conteúdo do link de um frame no outro.
  • 42. Molduras <HTML> <head><title> frames</title></head> <FRAMESET COLS = "308,100% " > <FRAME SRC="pagina1.htm" NAME=“pagina 1"> <FRAME SRC="pagina2.htm" NAME=“pagina 2"> </FRAMESET> <BODY> </BODY> </HTML>
  • 43. Molduras <HTML> <head><title> frames 2</title></head> <FRAMESET ROWS = "55,100% " border="0"> <FRAME SRC="frame.htm" NAME="Frame" SCROLLING="NO" MARGINWIDTH="20" MARGINHEIGHT="0" NORESIZE> <FRAMESET COLS = "108,100% " > <FRAME SRC="pagina1.htm" NAME="pg1" RESIZE> <FRAME SRC="pagina2.htm" NAME="pg2" RESIZE> </FRAMESET> </FRAMESET> <BODY> </BODY>
  • 45. Referência  Costa, C. J. (2007). Desenvolvimento para web. ITML press/Lusocredito.  Pereira, A., & Poupa, C. (2013). Linguagens web, 5ª edicao, Edições Silabo  Percivalm R. (2017) Confident Coding: Master the Fundamentals of Code and Supercharge Your Career (Confident Series) 1st Edition, KognPage  http://www.w3.org/