WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML...

25
WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP

Transcript of WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML...

Page 1: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW e HTML

HTML - Básico

Curso de Formação de Usuários WWW e Projetistas de Paginas HTMLOrganização: LSI - EPUSP

Page 2: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 2

HTML

Hypertext Markup Language (HTML) linguagem para criação de páginas Web permite a formatação do lay-out da página interpretado pelo browser para apresentação da página

Page 3: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 3

HTML

elementos de um documento HTML <TAG> texto </TAG> <TAG Atributo = “argumento”> texto </TAG> <TAG>

o documento HTML é composto por um único elemento do tipo:

• <HTML> … </HTML> documento tipo HTML que por sua vez é composto pelos seguintes elementos:

• <HEAD> … </HEAD> cabeçalho do documento• <BODY> … </BODY> corpo do documento

Page 4: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 4

HTML

elementos colocados no cabeçalho do documento HTML <title> … </title>

• título do documento – apresentado na barra da janela do browser

<base href = “URL_do_documento”>• determina a base para endereços relativos presentes no

documento <isindex>

• especifica que o documento descreve uma base de dados– usado para implementar mecanismos de busca

<link rev = “Relação” rel = “Relação” href= “URL”>• especifica relações entre o documento HTML e sua URL

Page 5: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 5

HTML

elementos colocados no cabeçalho do documento HTML <style> … </style>

• estilo do documento – reservado para futuras versões

<script> … </script>• reservado para ser usado com scripts

– reservado para futuras versões <meta>

• meta informações do documento – name / value

Page 6: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 6

HTML

exemplo

<HTML><HEAD>

<TITLE> Título do Documento </TITLE><BASE ref = “Algum_Endereço_URL”><ISINDEX><LINK rev=“Relação” rel=“Relação”

href=“Endereço_URL”></HEAD></HTML>

Page 7: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 7

HTML

elementos colocados no corpo do documento HTML - blocos <p align=“alinhamento”> … </p>

• parágrafo (formatado antes de ser apresentado) <br>

• break (muda de linha) < hr size=“largura” >

• barra de separação <pre> … </pre>

• texto pre-formatado em outro sistema (apresenta como é) <div> … </div>

• divisão do documento <blockquote> … </blockquote>

Page 8: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 8

HTML

elementos colocados no corpo do documento HTML - blocos <listing> … </listing>

• arcaico <plaintext>

• arcaico <xmp> … </xmp>

Page 9: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 9

HTML

elementos colocados no corpo do documento HTML - headers <h1> “Texto do Cabeçalho” </h1> (cabeçalho principal)

<h2> “Texto do Cabeçalho” </h2> <h3> “Texto do Cabeçalho” </h3>

...<h6> “Texto do Cabeçalho” </h6> (cabeçalho menor)

Page 10: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 10

HTML

elementos colocados no corpo do documento HTML - Estilo Físico <b> “Texto Qualquer” </b> (Bold) <i> “Texto Qualquer” </i> (italico) <u> “Texto Qualquer” </u> (sublinhado) <tt> “Texto Qualquer” </tt> (typewriter fonte)

Page 11: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 11

HTML

elementos colocados no corpo do documento HTML - Estilo Lógico <em> “Texto Qualquer” </em> (enfase) <strong> “Texto Qualquer” </strong> (forte enfase) <code> “Texto Qualquer” </code> (código de programas) <samp> “Texto Qualquer” </samp> (saída de programas) <kbd> “Texto Qualquer” </kbd> (entrada pelo usuário) <var> “Texto Qualquer” </var> (define variável) <dfn> “Texto Qualquer” </dfn> (definição) <cite> “Texto Qualquer” </cite> (citação)

Page 12: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 12

HTML

elementos colocados no corpo do documento HTML - Lista Não Ordenada <ul> ... </ul> (delimita a lista) <li> “Elemento da Lista” (elementos da lista)

elementos colocados no corpo do documento HTML - Lista Ordenada <ol> ... </ol> (delimita a lista) <li> “Elemento da Lista” (elementos da lista)

elementos colocados no corpo do documento HTML - Menu <menu> ... </menu> (delimita o menu) <li> “Elemento do Menu” (elementos do menu)

Page 13: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 13

HTML

elementos colocados no corpo do documento HTML - Diretório <dir> ... </dir> (delimita o diretório) <li> “Elemento do Diretório” (elementos do

diretório) elementos colocados no corpo do documento HTML - Glossário

<dl> ... </dl> (define o glossário) <dt> “Termo” (termo a ser definido)

(1.) <dd> “Definição do Termo” (definição do termo)

(2.)

Page 14: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 14

HTML

elementos colocados no corpo do documento HTML - Tabelas <TABLE border=size cellpadding=size cellspacing=size>

<CAPTION align=“center”> “titulo” </CAPTION> <TR> <TH> “nome_elem” <TH> “nome_elem” <TR> <TD> “elem_1.1” <TD> “elem_1.2” <TR> <TD> “elem_2.1” <TD> “elem_2.2”

<TR> <TD> “elem_3.1” <TD> “elem_3.2”</TABLE>

• <CAPTION> cabeçalho da tabela• <TR> linhas da tabela• <TH> elementos da tabela (BOLD)• <TD> elementos da tabela

Page 15: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 15

HTML

elementos colocados no corpo do documento HTML - ancora <A name= “ReferenciaLocal”> “texto” </A>

• define um ponto de referencia dentro do documento <A href= “Referência”> “texto” </A>

• identifica a referencia externa <A href= “Referência#ReferenciaLocal”> “texto” </A>

• identifica a referencia no documento externo elementos colocados no corpo do documento HTML - imagem

<IMG src= “Nome_do_Arquivo_da_Imagem” alt= “Nome_Alternativo_(texto)” alignment=“posicao”width=“largura” height=“altura” border=“size”hspace=“size” vspace=“size”>

Page 16: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 16

HTML

name=localhref=#local

name=local

href=#local

href=doc_1doc_1 doc_2

href=doc_1#local

href=doc_1vhref=doc_2#local

Page 17: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 17

HTML

elementos colocados no corpo do documento HTML - applet (Java) <APPLET code=“code” codebase=“r” ...> ….. </APPLET>

elementos colocados no corpo do documento HTML - fonte <FONT size=“size” color=“cor”> ….. </FONT>

elementos colocados no corpo do documento HTML - endereços <ADDRESS> “endereço eletrônico do autor” </ADDRESS>

Page 18: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 18

HTML

<title> Criando paginas em HTML</title><body bgcolor=#ffffff><center> <h2>HTML: Criando paginas na WWW</h2> </center><hr size=5>HTML (Hypertext Markup Language) e a linguagem que permite a criacao de paginasna WWW (World Wide Web) utilizando recursos de multimedia e hipertexto.<p><ul>

<li><a href="intro.html">Introducao</a><li><a href="comandos.html">Listagem dos comandos</a>

</ul><p>

Page 19: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 19

HTML

<ol><li><a href="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html">"A Beginner's Guide to HTML"</a><li><a href=http://union.ncsa.uiuc.edu:80/HyperNews/get/www/html/lang.html>The HTML Language</a>

</ol><p><hr><i><a href="/usp/rod/rod.html">O Webmaster</a></i> ([email protected])<p><a href=http://www.lsi.usp.br/><img src="/icones/lsi2.gif" alt="LSI">

Laboratorio de Sistemas Integraveis</a><p><a href=http://www.usp.br/><img width=109 height=50

src="http://www.usp.br/usponline/image/logusp1.gif" alt="USP" border=0></a> Universidade de Sao Paulo

Page 20: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 20

HTML

Formulários <FORM action=“URL” method=“metodo”> ….. </FORM>

– o método pode ser post ou get• <INPUT type=“tipo_da_variável”

name=“nome_simbolico_da_entrada” value=“valor_da_entrada” checked size=“largura” maxlenght= “comprimento_maximo”>

– tipos podem ser text, checkbox, radio, submit, reset, hidden e image

– determina variáveis de entrad, cujo valor será definido pelo usuário

Page 21: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 21

HTML

• <SELECT name=“nome_simbolico_da_entrada” listlenght=“no_de_itens_apresentados” multiple > ….. </SELECT>

– define um conjunto opcional de itens, dos quais o usuário pode escolher um ou mais

• <OPTION selected> “nome da opcao”– usado em conjunto com select– selected identifica o valor default da opção

• <TEXTAREA name=“nome_simbolico_desta_area” rows=“no._linhas” col=“no._colunas”> “texto no formulário”. </TEXTAREA>

– define uma área de texto dentro do formulário

Page 22: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 22

HTML

exemplo

<title>Teste de Formularios </title>

<h2> Teste de Formularios </h2>

<form action="file:testando" method=post><input type=text name=tex1> campo de texto </input><br>

<hr size=4> rad1 <br>

<input type=radio name=rad1 value=1> rad_1 </input><br><input type=radio name=rad1 value=2> rad_2 </input><br><input type=radio name=rad1 value=3> rad_3 </input><br>

<p>

Page 23: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 23

HTML

chk1 <br><input type=checkbox name=chk1 value=1> chk_1 </input><br><input type=checkbox name=chk1 value=2> chk_2 </input><br><input type=checkbox name=chk1 value=3> chk_3 </input><br>

<hr size=2> rad2 <br>

<input type=radio name=rad2 value=1> rad_1 </input><br><input type=radio name=rad2 value=2> rad_2 </input><br><input type=radio name=rad2 value=3> rad_3 </input><br>

<p> chk2 <br>

<input type=checkbox name=chk2 value=1> chk_1 </input><br><input type=checkbox name=chk2 value=2> chk_2 </input><br><input type=checkbox name=chk2 value=3> chk_3 </input><br>

Page 24: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 24

HTML

<select name=sel1 listlenght=3 multiple><option> "laranja"<option selected> "banana"<option> "maca"

</select><br>

<textarea> isto e uma area especial para entrada de texto </textarea><br>

</form>

Page 25: WWW e HTML HTML - Básico Curso de Formação de Usuários WWW e Projetistas de Paginas HTML Organização: LSI - EPUSP.

WWW & HTML - 25

HTML

referencias (páginas sobre HTML) http://www.uerj.br/www_tutor/inichtml.html http://www.w3.org/pub/WWW/MarkUp/Wilbur/features.html http://search.netscape.com/assist/net_sites/html_extensions_3.html

http://www.lsi.usp.br/usp/html/facil.html