Tutorial HTML

Conceitos Básicos
Prof. Dr. José Reinaldo Silva
reinaldo@usp.br
O Uso dos computadores

Cada turma tem um acesso diferente nas máquinas do LAB:

Console VM passwd MySQLuser Passwd

clicar em
console ReqVMw pmr3304 aluno pmr3304
epusp User: aluno
 3

HyperText Markup Language

Hypertext

computer

Qual é a “dimensão” de um documento?

PMR 3304 Prof. Dr. José Reinaldo Silva

 4

Hipertexto em perspectiva

Em 1945, Vannevar Bush publicou, na revista americana Atlantic Monthly,

o artigo "As we may think"6, onde descreve uma máquina, chamada
Memex, capaz de propiciar leitura e escrita não-lineares e armazenar uma
biblioteca multimídia de documentos. Segundo Bush, a humana não
funciona de forma linear, e sim por associação.
Claudio Augusto Dias: Hipertexto: evolução histórica e efeitos sociais, Ci. Inf. vol.28 n.3 Brasilia Sept./Dec. 1999

PMR 3304 Prof. Dr. José Reinaldo Silva

 5

The first hypermedia application was the Aspen Movie Map in 1977. In
1980, Tim Berners-Lee created ENQUIRE, an early hypertext database
system somewhat like a wiki. The early 1980s also saw a number of
experimental hypertext and hypermedia programs, many of whose features
and terminology were later integrated into the Web. Guide was the first
significant hypertext system for personal computers. In 1983, a hypermedia
authoring tool, Tutor-Tech, designed for Apple II computers, was produced
for educators.

In 1987, Apple Computer released HyperCard for the Macintosh

line at the MacWorld convention. Its impact, combined with interest in
Peter J. Brown's GUIDE (marketed by OWL and released earlier that year)
and Brown University's Intermedia, led to broad interest in and enthusiasm
for hypertext and new media. The first ACM Hypertext academic
conference took place in November 1987, in Chapel Hill NC, where many
other applications, including the hypertext literature writing software
Storyspace were also demoed[2]
Wikepedia

PMR 3304 Prof. Dr. José Reinaldo Silva

 6

Histórico

1969 – Projeto DARPA Internet

1991 – Criação da linguagem HTML

Tim Berners-Lee, CERN

PMR 3304 Prof. Dr. José Reinaldo Silva

 7

Fusão HTML - HTTP

A fusão do HTML (HiperText Markup

Language e do HTTP (HiperText Transfer
Protocol) permitiu que tags pudessem ser
acessadas por links para outros
computadores, expandindo as
possibilidades do HTML.

PMR 3304 Prof. Dr. José Reinaldo Silva

 8

O avô dos Browsers

PMR 3304 Prof. Dr. José Reinaldo Silva

 9

Evolução do HTML
1992 - Primeira aparição do HTML.
1993 - HTML+ Algumas definições da aparência, tabelas, formulários.
1994 - HTML v2.0 Padronização para os características principais.
1994 - HTML v3.0 Uma extensão do HTML+ entendido como um rascunho de padrão.
1995 - HTML v3.2 Netscape e Internet Explorer definem seus próprios padrões baseados nas
implementações correntes.
1995 - JavaScript criada por Brendan Eich da Netscape como uma extensão do HTML para o browser
Navigator v2.0. JavaScript é uma linguagem de roteiro (script) baseada em objetos e permite que sejam
manipulados através de eventos dinâmicos que faltavam ao HTML
1996 - CSS1 Em dezembro deste ano é apresentada pela primeira vez a Folha de Estilo, criada para
complementar a linguagem HTML. Possuía uma formatação simples e cerca de 60 propriedades.
1997 - HTML v4.0 São lançados os browsers Netscape v4.0 (agosto) e Internet Explorer v4.0 (outubro)
que apresentaram um conjunto de tecnologias (CSS, JavaScript/VBScript e DOM) que juntas
disponibilizaram diversos recursos tornando o HTML dinâmico. Surge então o DHTML.
1998 - CSS2 Em maio é lançado a segunda versão da Folha de Estilo que, além de incluir todas as
propriedades do CSS1 ainda apresenta por volta de 70 novas propriedades.
1999 - HTML v4.01 Alguma modificações da versão anterior.
2000 - XHTML v1.0 É criado e consiste de uma versão XML do HTML v4.01.

PMR 3304 Prof. Dr. José Reinaldo Silva

 10

Versões recentes

HTML5 WHATWG Primeira versão pública 2008

HTML5 WHATWG Versão Padrão 2012

HTML5 WHATWG Versão Final 2014

WHATWG : Web Hypertext Application Technology

Working Group (2004)

PMR 3304 Prof. Dr. José Reinaldo Silva

 11

A evolução para as meta markup

languages

— SGML → HTML 1.0 → HTML xx → XML → HTML 4.01 →

XHTML

PMR 3304 Prof. Dr. José Reinaldo Silva

 12

XML : modelando informação

Exemplo:
<dataset>
<table>
<record>
<id>1</id>
Estrutura <nome>Antonio Carlos</nome>
(DOM – Data Object Model) <idade>25<idade>
</record>
<record>
<id>2</id>
Dados (descrição) <nome>Maria Clara</nome>
<idade>22</idade>
</record>
</table>
</dataset>

PMR 3304 Prof. Dr. José Reinaldo Silva

 13

Construindo um site

Um site é um conjunto de páginas “linkadas” que utilizam

um servidor web para se propagar pela rede.

Uma página especial marca a entrada para o conjunto. Na

maioria dos casos se chama

index.html (htm funciona em especial nos PC’s)

ou ainda

default.html

PMR 3304 Prof. Dr. José Reinaldo Silva

 14

Mapa do site
Reinaldo’s site

Index.html

Cursos de Cursos de
graduação Artigos publicados
Pós-graduação

Material de suporte

Software de apoio Leitura suplementar

PMR 3304 Prof. Dr. José Reinaldo Silva

 15

Recomendação

Mantenha todo o site em um mesmo diretório, de forma estruturada

diferenciando os diferentes níveis e documentos de apoio para
download (se existirem).

Para endereçar outras páginas através de links, NUNCA use

referências locais como c:\ ou outro diretório que se pressupõe
ser o mesmo em todos os computadores onde a página poderá rodar.

PMR 3304 Prof. Dr. José Reinaldo Silva

 16

Construindo interfaces

PMR 3304 Prof. Dr. José Reinaldo Silva

 17

Procure o editor de texto padrão do Windows, o

NOTEPAD

PMR 3304 Prof. Dr. José Reinaldo Silva

 18

PMR 3304 Prof. Dr. José Reinaldo Silva

 19

Inserindo o título
<!— PMR 3304 - Laboratóro —>
<!— Tutorial HTML - 2016 —>
<!— ===================== —>
<html>
teste.html <head>
<title> Laborat&oacute;rio de PMR 3304 - 2016 </title>
</head>

PMR 3304 Prof. Dr. José Reinaldo Silva

 20
erikasarti.net

PMR 2490 Prof. Dr. José Reinaldo Silva

 21

Introduzindo um cabeçalho
<html>
<head>
<title> Laborat&oacute;rio de PMR 3304 - 2016 </title>
</head>
teste.html <body>
<h1> Tutorial HTML </h1>
<h2> Conceitos B&aacute;sicos </h2>
</body>
</html>

PMR 3304 Prof. Dr. José Reinaldo Silva

 22
teste.html

...
<body>
<h1> Tutorial HTML </h1>
<h2> Conceitos B&aacute;sicos </h2>
<p> O Texto em HTML pode ser apresentado em formato normal, como nesta
linha <br>
<b> em negrito, como nesta linha </b> <br>
<i> em it&aacute;lico, como nesta linha </i> <br>
<font size=+3> com caracteres aumentados </font><br>
<font size=-5>com caracteres reduzidos </font> <br>
<tt> ou imitando o tipo de uma m&aacute;quina de escrever, al&eacute;m de
outros v&aacute;rios tipos de fonte </tt></p>
</body>
</html><h1> Tutorial HTML </h1>
<h2> Conceitos Básicos </h2>

PMR 3304 Prof. Dr. José Reinaldo Silva

 23
<!— PMR 2490 - Laboratóro —>
<!— Tutorial HTML - 2015 —>
<!— ===================== —>
<html>
<head>
<title> Laborat&oacute;rio de PMR 2490 - 2015 </title>
</head>
<body>
<h1> Tutorial HTML </h1>
<h2> Conceitos B&aacute;sicos </h2>
<p> O Texto em HTML pode ser apresentado em formato normal, como
nesta linha <br>
<b> em negrito, como nesta linha </b> <br>
<i> em it&aacute;lico, como nesta linha </i> <br>
<font size=+3> com caracteres aumentados </font><br>
<font size=-5>com caracteres reduzidos </font> <br>
<tt> ou imitando o tipo de uma m&aacute;quina de escrever, al&eacute;m de
outros v&aacute;rios tipos de fonte </tt></p>
</body>
</html>
PMR 3304 Prof. Dr. José Reinaldo Silva
 24

PMR 3304 Prof. Dr. José Reinaldo Silva

 25

Vamos dar um passo atrás!

<html>
<head>
<title> Laborat&oacute;rio de PMR 3304 - 2016 </title>
</head>
teste.html <body>
<h1> Tutorial HTML </h1>
<h2> Conceitos B&aacute;sicos </h2>
</body>
</html>

PMR 3304 Prof. Dr. José Reinaldo Silva

 26

Introduzindo imagens e texto

<p> Introduzindo imagens simples : encontro dos CSF. </p>

<img src=”csf-meeting.jpg" width="200" height="150" alt=”csf-meet" >

<p> outras partes de texto <em> importantes </em> podem ser inseridas </p>

PMR 3304 Prof. Dr. José Reinaldo Silva

 27

teste.html

<html>
<head>
<title> Laborat&oacute;rio de PMR 2490 - 2015 </title>
</head>
<body>
<h1> Tutorial HTML </h1>
<h2> Conceitos B&aacute;sicos </h2>
<p> Introduzindo imagens simples : encontro dos CSF. </p>
<img src=”csf-meeting.jpg" width="200" height="150" alt=”csf-meet" >
<p> outras partes de texto <em> importantes </em> podem ser inseridas </p>
</body>
</html>

PMR 3304 Prof. Dr. José Reinaldo Silva

 28

PMR 2490 Prof. Dr. José Reinaldo Silva

 29

Introduzindo referências

<p> Mas a função do hipertexto é poder inserir referências de modo

que ao referirmos a <a href="ferias.html">férias</a> uma
página apropriada possa ser chamada </p>

PMR 3304 Prof. Dr. José Reinaldo Silva

 30

teste.html
<html>
<head>
<title> Laborat&oacute;rio de PMR 2490 - 2015 </title>
</head>
<body>
<h1> Tutorial HTML </h1>
<h2> Conceitos B&aacute;sicos </h2>
<p> Introduzindo imagens simples : encontro dos CSF. </p>
<img src=”csf-meeting.jpg" width="200" height="150" alt=”csf-meet" >
<p> outras partes de texto <em> importantes </em> podem ser inseridas </p>
<p> Mas a função do hipertexto é poder inserir referências de modo
que ao referirmos a <a href="ferias.html">férias</a> uma
página apropriada possa ser chamada </p>
</body>
</html>

PMR 3304 Prof. Dr. José Reinaldo Silva

 31

PMR 3304 Prof. Dr. José Reinaldo Silva

 32

Verificando o conteúdo de férias

PMR 3304 Prof. Dr. José Reinaldo Silva

 33

View source (view-> developer-

>source)

PMR 3304 Prof. Dr. José Reinaldo Silva

 34

O diretorio fica assim

PMR 3304 Prof. Dr. José Reinaldo Silva

 Inserindo linhas horizontais 35

<!— PMR 2490 - Laboratóro —>

<!— Tutorial HTML - 2015 —>
<!— ===================== —>
<html>
<head>
<title> Laborat&oacute;rio de PMR 2490 - 2015 </title>
</head>
<body>
<h1> Tutorial HTML </h1>
<h2> Conceitos B&aacute;sicos </h2>
<p> Introduzindo imagens simples : encontro dos CSF. </p>
<img src=csf-meeting.jpg width=“300" height=“250" alt=”csf-meet" >
<p> outras partes de texto <em> importantes </em> podem ser inseridas </p>
<hr size=5 noshade>
<p> Mas a fun&ccedil;&atilde;o do hipertexto &eacute; poder inserir refer&ecirc;ncias de
modo que ao referirmos a <a href="ferias.html">f&eacute;rias</a> uma p&aacute;gina
apropriada possa ser chamada </p>
</hr>
</body>
</html>
PMR 3304 Prof. Dr. José Reinaldo Silva
 36

...e o resultado

PMR 3304
Prof. Dr. José Reinaldo Silva
 37

Inserindo contato via e-mail

<p> Para maiores informações sobre férias no Nordeste

contacte o <a href=mailto:reinaldo@usp.br>Prof.
Reinaldo</a></p>

PMR 3304 Prof. Dr. José Reinaldo Silva

 38

...e o resultado

PMR 3304 Prof. Dr. José Reinaldo Silva

 39

Mudando a cor de fundo

<html>
<head>
<title>Laboratório de PMR 2490 - 2015 </title>
<h1> Tutorial HTML </h1>
<h2> Conceitos Básicos </h2>
</head>
<body BGCOLOR=#ABCDEF>

...

<hr>
</body>
</html>

PMR 3304 Prof. Dr. José Reinaldo Silva

 40

...e fica agora

PMR 3304 Prof. Dr. José Reinaldo Silva

 41

Tutorial HTML

PMR 2490 Prof. Dr. José Reinaldo Silva

 42

Tabela de cores de fundo

PMR 2490 Prof. Dr. José Reinaldo Silva

 43

Falando sério ...

Vamos introduzir na nossa página um formulário (muito comum

nas aplicações de sistemas de informação que temos em mente).

Um formulário é uma seção do documento que deve ser preenchida

pelo usuário, contendo elementos chamados de controles (botões,
checkboxes, etc.). O usuário modifica os controles preenchendo
os boxes com texto, clicando em botões, etc. e submete o form a
um outro agente para processamento (um servlet por exemplo).

PMR 3304 Prof. Dr. José Reinaldo Silva

 44

Um pequeno exemplo ...

<FORM action=“http://www.sitedoMarcos.br/formtest” method=“post”>
<p>
<LABEL for=“nome”> Nome: </LABEL>
<INPUT type=“text” id=“nome”><BR>
<LABEL for=“sobrenome”> Sobrenome:</LABEL>
<INPUT type=“text” id=“sobrenome”><BR>
<LABEL for=“email”> e-mail: ><BR>
<INPUT type=“text” id=“email”><BR>
<INPUT type=“radio” name=“sexo” value=“masculino”> masculino<BR>
<INPUT type=“radio” name=“sexo” value=“feminino”>feminino<BR>
<INPUT type=“submit” value=“Send”><INPUT type=“reset”>
</FORM>

PMR 3304 Prof. Dr. José Reinaldo Silva

 45

PMR 3304 Prof. Dr. José Reinaldo Silva

 46

Fim

PMR 3304 Prof. Dr. José Reinaldo Silva