HTML - USP
Propaganda
Edberto Ferneda INFORMÁTICA INSTRUMENTAL Histórico e Características INTERNET E WEB Internet 1957 – Sputnik (primeiro satélite artificial) - URSS 1958 – ARPA (Advanced Research Projects Agency) ◦ Mobilização de pesquisas (universitárias) para alcançar a superioridade tecnológica militar em relação à União Soviética Histórico 1969 - ARPANET (Advanced Research Projects Agency) Paul Baran e Donald Davies: construção de um sistema militar de comunicações capaz de sobreviver a um ataque nuclear. Internet 1969 – Os primeiros nós da rede ◦ UCLA (Universidade da Califórnia – Los Angeles), ◦ SRI (Stanford Research Institute), ◦ UCSB (Universidade da Califórnia – Santa Bárbara), ◦ Universidade de Utah 1973 – Robert Kahn (ARPA) e Vint Cerf (Stanford) ◦ Arquitetura básica Internet 1975 – 15 nós ◦ Centros universitários Histórico 1978 – TCP TCP/IP 1983 – MilNET, Arpa-Internet 1990 – ArpaNET retirada de operação Década de 90 – privatização da Internet Internet 1990 – World Wide Web (www) ◦ Tim Berners-Lee Navegadores (browsers) ◦ Mosaic (1993) ◦ Netscape (1994) ◦ Internet Explorer (1995) Histórico 1995 – Java (Sun Microsystems) ◦ Applets WEB Características Unidades de informação: páginas ◦ Esquema de endereçamento: URL (Universal Resource Locator) ◦ Protocolo comum: HTTP (Hypertext Transfer Protocol) ◦ Padrão para especificação de páginas: HTML (Hypertext Markup Language) WEB URL (Universal Resource Locator) arquivo acessado utilizando o protocolo HTTP (http://) armazenado no computador chamado www.eca.usp.br Características ◦ “.br” indica que este computador está localizado no Brasil. No diretório (pasta) /graduaca/infogera/ deste computador está localizado o arquivo com o nome index.htm. A extensão “.htm” (ou .html) indica que se trata de um arquivo no formato HTML. WEB HTTP: protocolo de transferência de páginas Web. ◦ Permite ao browser “conversar” com o servidor, fazendo pedidos e recebendo respostas em forma de página Web, geralmente escritas em HTML. Browser Características Endereço ( URL ) Página ( HTML) Usuário Servidor WEB HTML (Hypertext Markup Language) Características ◦ Conjunto fixo de marcações (tags) ◦ Permite utilizar janelas (frames), imagens e tabelas e ligações entre páginas Web. <html> <head> <title>O Mundo é Grande</title> </head> <body> <p style="margin-top: 0; margin-bottom: 10"> <b><img border="0" src="drumlyra.gif" align="left" width="122" height="190">O Mundo é Grande</b></p> <p style="margin-top: 0; margin-bottom: 0"> O mundo é grande e cabe<p style="margin-top: 0; margin-bottom: 5"> nesta janela sobre o mar.<p style="margin-top: 0; margin-bottom: 0"> O mar é grande e cabe<p style="margin-top: 0; margin-bottom: 5"> na cama e no colchão de amar.<p style="margin-top: 0; margin-bottom: 0"> O amor é grande e cabe<p style="margin-top: 0; margin-bottom: 0"> no breve espaço de beijar.<p> <b>Carlos Drummond<b> <a href=http://www.carlosdrummond.com.br>Home Page </body> </html> Visualizar A LINGUAGEM HTML A linguagem HTML HTML - HyperText Markup Language ◦ Linguagem de marcação ◦ Divide o texto em várias partes, identificadas por tags (etiquetas). HTML nome do autor da página cabeçalho da página uma imagem uma tabela um link Os browsers (ou navegadores) são softwares que interpretam e exibem as páginas HTML, ◦ Mosaic ◦ Netscape ◦ Internet Explorer A linguagem HTML Tags (marcação, etiqueta) ◦ São indicações apresentadas entre os caracteres de menor e maior ( < > ) que representam os elementos de uma página. DIgitação de uma página HTML ◦ Utilizar qualquer editor de texto ◦ Gravar o arquivo com texto normal (ASCII) HTML “Somente texto” ou “Texto sem formatação” ou outro tipo de arquivo equivalente. ◦ Gravar o arquivo com extensão .htm ou .html A linguagem HTML <HTML> </HTML> ◦ Informa o inicio e o final de uma página escrita em HTML; <HEAD> </HEAD> ◦ identificam o inicio e o término de uma área de descrições gerais da página tais como título, autor, etc. ◦ <TITLE> </TITLE> Responsável por exibir o titulo da página. Alguns navegadores exibem o título da página no título da janela onde está o browser. Tags <BODY> </BODY> ◦ É o corpo da página, onde estão as informações que se deseja apresentar; Tags A linguagem HTML Estilo Sintaxe Negrito <B> Texto </B> Itálico <I> Texto <I> Sublinhado <U> Texto </U> Letreiro <MARQUEE > Texto </MARQUEE> <html> <head> <title> Meu primeiro HTML </title> </head> <body> <h1>Esta é minha primeira página em HTML</h1> <B> Negrito </B> <p> <I> Itálico <I> <p> <U> Sublinhado </U> <p> <MARQUEE> Letreiro </MARQUEE> <p> </body> </html> Visualizar A linguagem HTML Cabeçalhos Tags ◦ <H1> </H1> - tag de cabeçalho de nivel 1 ◦ Os números indicam o nível do cabeçalho (de H1 a H6). ◦ Quando apresentados, apresentam letras maiores e em negrito, dependendo do nível <html> <head> <title>Exemplo de cabeçalhos</title> </head> <body> <h1>Cabeçalho de nível 1</h1> <h2>Cabeçalho de nível 2</h2> <h3>Cabeçalho de nível 3</h3> <h4>Cabeçalho de nível 4</h4> <h5>Cabeçalho de nível 5</h5> <h6>Cabeçalho de nível 6</h6> </body> </html> Visualizar A linguagem HTML Listas numeradas ◦ <OL> <LI> <LI> ... </OL> Listas com marcações Tags ◦ <UL> <LI> <LI> ... </UL> Visualizar <html> <head> <title>Receita de pão de queijo</title> </head> <body> <h1>Pão de Queijo</h1> <p>Aprenda esta receita nada mineira, mas que dá ótimos resultados: é rápida, fácil e tem um bom rendimento.</p> <h2>Ingredientes</h2> <ul> <li>uma e meia xícara de chá de polvilho azedo <li>uma xícara de chá de maizena <li>uma colher de chá de fermento em pó <li>meia xícara de chá de leite <li>meia xícara de chá de água <li>meia xícara de chá de óleo <li>uma e meia colher de chá de sal <li>um ovo <li>uma xícara de chá de queijo tipo Minas ralado </ul> <h2>Modo de preparo</h2> <ol> <li>Misture e peneire os ingredientes secos (menos o queijo). <li>Após peneirar, junte o queijo e misture bem, acrescente os demais ingredientes e amasse até obter uma massa lisa e uniforme; <li>Faça bolinhas e coloque numa assadeira untada e enfarinhada. <li>Leve ao fogo quente (200º C) por 25 minutos. </ol> </body> </html> A linguagem HTML Permite a utilização de um conjunto restrito de marcações (tags) Preocupação com o aspecto visual das páginas Web. Não permite uma definição clara e precisa das informações contidas em uma página. Resumindo A LINGUAGEM XML A linguagem XML HTML Visualizar <html> <body> <b><font size="4">Micromputador Pentium 4</font></b> <p>1.5 GHz,</p> <p>256MB de RAM,</p> <p>Monitor 17 polegadas,</p> <p>mouse, teclado, estabilizador.</p> </body> </html> XML Visualizar <?xml version='1.0' encoding='ISO-8859-1'?> <microcomputador> <modelo>Pentium 4</modelo> <velocidade>1.5 GHz</velocidade> <ram>256Mb de memória</ram> <monitor>17 polegadas</monitor> <teclado>Sim</teclaco> <mouse>Sim</mouse> <estabilizador>Sim</estabilizador> <impressora>Não</impressora> </microcomputador> A linguagem XML <?xml version='1.0' encoding='ISO-8859-1'?> <microcomputador> <modelo>Pentium 4</modelo> <velocidade>1.5 GHz</velocidade> <memória> <ram>256</ram> <cache>128</cache> <vídeo>64</vídeo> </memória> <monitor> <tamanho>17</tamanho> <marca>Sansung</marca> </monitor> <teclado>Sim</teclado> <mouse>Sim</mouse> <estabilizador> <KVA>2.5</KVA> <marca>SMS</marca> </estabilizador> <impressora> <tipo>LaserJet</tipo> <marca>HP</marca> </impressora> </microcomputador> Visualizar MusicXML A linguagem XML <?xml version="1.1" encoding="UTF-8" standalone="no"?> <!DOCTYPE score-partwise PUBLIC "-//Recordare//DTD MusicXML 1.1 Partwise//EN" "http://www.musicxml.org/dtds/partwise.dtd"> <score-partwise> <part-list> <score-part id="P1"> <part-name>Music</part-name> </score-part> </part-list> <part id="P1"> <measure number="1"> <attributes> <divisions>1</divisions> <key> <fifths>0</fifths> </key> <time> <beats>4</beats> <beat-type>4</beat-type> </time> <clef> <sign>G</sign> <line>2</line> </clef> </attributes> <note> <pitch> <step>C</step> <octave>4</octave> </pitch> <duration>4</duration> <type>whole</type> </note> </measure> </part> </score-partwise> Visualizar A linguagem XML Permite a utilização de um número ilimitado de marcações Permite a definição clara e precisa das informações contidas em uma página. Não permite a definição do aspecto visual da página Resumindo... Texts
