Scribd Logo
Upload

Welcome to Scribd!

  • SIW Aula04

    Uploaded by

    Ednaldo Cunha
    17 views38 pages

    Original Title

    SIW_Aula04

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    17 views38 pages

    SIW Aula04

    Uploaded by

    Ednaldo Cunha

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 38

    Sistemas Web

    Prof.: Cssio Prazeres (prazeres@dcc.ufba.br) HTML

    O que HTML?
    Linguagem para descrever pginas Web Significa: HyperText Markup Language
    Verso atual: 4.01

    Linguagem de marcao
    No uma linguagem de programao Conjunto de marcas (tags) para descrever pginas Web

    Marcas HTML
    Palavras-chave entre <>
    <html>

    Normalmente aparecem em pares


    <b> e </b> A primeira chamada de marca inicial e a segunda de marca final
    Ou marca de abertura e marca de fechamento

    Todas as marcas HTML


    http://www.w3schools.com/tags/default.asp

    Documentos HTML
    Conjunto de marcas HTML e texto que descrevem uma pgina Web
    Tambm chamados de pgina Web

    Navegadores leem documentos HTML e os exibe como pginas Web


    <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

    Criando documentos HTML


    O que voc no precisa
    Editor HTML, servidor Web e Web site

    Pode-se usar um simples editor de texto


    Notepad ou Gedit

    Extenso: htm ou html?


    No tem diferena

    HTML bsico (1)


    Cabealhos
    Definidos pelas marcas <h1> a <h6> Extremamente importante
    Mquinas de busca
    <html> <body> <h1>This <h2>This <h3>This <h4>This <h5>This <h6>This </body> </html> is is is is is is heading heading heading heading heading heading 1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6>

    HTML bsico (2)


    Pargrafos
    Definidos pela marca <p>
    <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>

    HTML bsico (3)


    Linhas
    Definidos pela marca <hr />
    <html> <body> <p>The hr tag defines a horizontal rule:</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> </body> </html>

    HTML bsico (4)


    Quebras de linha
    Definidos pela marca <br />
    <html> <body> <p>This is<br />a para<br />graph with line breaks</p> </body> </html>

    HTML bsico (5)


    Imagens
    Definidos pela marca <img>
    <html> <body> <img src="w3schools.jpg" width="104" height="142" /> </body> </html>

    Elementos HTML
    Tudo que est entre uma marca de incio e uma marca de fim
    Inclusive as prprias marcas Podem conter atributos Podm conter outros elementos (aninhados) Importante: no esquecer a marca final (fechamento) Use caixa baixa: <b> em vez de <B>

    Alguns elementos HTML so vazios


    <br> ou <br /> <img src="w3schools.jpg />

    Atributos HTML
    Elementos HTML podem conter atributos
    Informao adicional sobre o elemento Especificado na marca de incio do elemento Pares nome/valor: name=value Sempre use as aspas Use caixa baixa: width=10 em vez de WIDTH=10 ou Width=10

    Atributos padres
    http://www.w3schools.com/tags/ref_standardattribut es.asp

    Formatao de texto
    <html> <body> <p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><big>This text is big</big></p> <p><i>This text is italic</i></p> <p><em>This text is emphasized</em></p> <p><code>This is computer output</code></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> <p>This is <del>deleted</del> and <ins>inserted</ins> texts</p> </body> </html>

    http://www.w3schools.com/html/html_formatting.asp

    Fontes (1)
    <html> <body> <p> <font size="5" face="arial" color="red"> This paragraph is in Arial, size 5, and in red text color. </font> </p> <p> <font size="3" face="verdana" color="blue"> This paragraph is in Verdana, size 3, and in blue text color. </font> </p> <p>The font element is deprecated in HTML 4. Use CSS instead!</p> </body> </html>

    Fontes (2)
    A marca <font> foi depreciada (deprecated) no HTML 4 e removida do HTML 5 Segundo a W3C, deve-se usar CSS para definir a fonte e outras propriedades de exibio nos diversos elementos HTML

    Estilos (1)
    CSS (Cascading Style Sheets)
    Folha de estilo em cascata

    Com HTML
    Em um arquivo CSS separado Em um elemento <style> na seo <head> do HTML Em um atributo style diretamente no elemento HTML

    Estilos (2)
    <html> <body style="background-color:PowderBlue;"> <h1>Look! Styles and colors</h1> <p style="font-family:verdana;color:red;"> This text is in Verdana and red</p> <p style="font-family:times;color:green;"> This text is in Times and green</p> <p style="font-size:30px;">This text is 30 pixels high</p> <h1 style="text-align:center;">Centeraligned heading</h1> </body> </html>

    Elos e ncoras (1)


    Em HTML um elo (link ou hyperlink) uma palavra, um grupo de palavras ou uma imagem, que permite a navegao para outro documento HTML ou para uma nova seo dentro do documento atual Definidos pela marca <a>
    Criar um elo para outro documento usando o atributo href Criar uma ncora dentro de um documento usando o atributo name

    Elos e ncoras (2)


    <html> <body> <p> <a href="http://www.w3schools.com"> This is a link</a> </p> <p> <a name="anchor"> This is an anchor</a> </p> </body> </html>

    Tabelas
    <html> <body> <table border="1"> <tr> <th>Header <th>Header </tr> <tr> <td>row 1, <td>row 1, </tr> <tr> <td>row 2, <td>row 2, </tr> </table> </body> </html>

    1</th> 2</th>

    cell 1</td> cell 2</td>

    cell 1</td> cell 2</td>

    Listas
    <html> <body> <h4>An Unordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> </ul> <h4>An Ordered List:</h4> <ol> <li>Coffee</li> <li>Tea</li> </ol> <h4>A Definition List:</h4> <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </body> </html>

    Formulrios (1)
    Definidos pela marca <form> Usados para passar dados para um servidor Pode conter elementos de entrada de dados
    text fields, checkboxes, radio-buttons, submit buttons, etc.

    Formulrios (2)
    <html> <body> <form> <table border="0"> <tr> <td>Login:</td> <td><input type="text" name="name" /></td> </tr> <tr> <td>Password:</td> <td><input type="password" name="pwd" /> </td> </tr> </table> <input type="submit" value="Submit" /> </form> </body> </html>

    Formulrios (3)
    <html> <body> <form> <p>Name: <input type="text" name="name" /> </p> <p> Sex: <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female </p> <p> Preferences: </p> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike <br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car <br /> <input type="checkbox" name="vehicle" value="Car" /> I have a horse </form> </body> </html>

    Frames HTML
    Permite exibir mais que um documento HTML em uma nica janela do navegador
    Cada documento chamado de frame Cada frame independente dos outros

    Desvantagens (porque no usar)


    No devem ser suportados nas prximas verses do HTML Difceis de utilizar (Ex.: imprimir a pgina inteira) O desenvolvedor Web deve controlar mais de um documento Web por vez
    http://www.icmc.usp.br/ensino/material/html/frames.html

    Frames internos (iframe)


    Usado para exibir uma pgina Web dentro de outra pgina Web
    <html> <body> <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p> <p><b>Note:</b> Because the target of the link matches the name of the iframe, the link will open in the iframe.</p> </body> </html>

    Cores (1)
    Combinao RGB: RED, GREEN e BLUE
    Notao hexadecimal
    Exemplo: #000000 (preto)

    Notao RGB
    Exemplo: rgb(0,0,0) (preto)

    16 milhes de cores
    Combinao red, green e blue com valores de 0 a 255 (255,255,255): 255 em hexa FF
    Cor branca: #FFFFFF ou rgb(255,255,255)

    Cores (2)

    Cores (3)
    <html> <body> <p style="background-color:#FFFF00"> Color set by using hex value </p> <p style="backgroundcolor:rgb(255,255,0)"> Color set by using rgb value </p> <p style="background-color:yellow"> Color set by using color name </p> </body> </html>

    http://www.w3schools.com/html/html_colornames.asp

    HTML head (1)


    Continer para todos os elementos de cabealho
    <title>: define um ttulo para o documento <base>: especifica um endereo padro ou um destino padro para todos os elos em uma pgina <link>: define a relao entre um documento e um recurso externo <meta>: fornece metadados sobre o documento HTML <script>: usado para definir um script do lado do cliente, como um JavaScript <style>: usado para definir informaes de estilo para um documento HTML

    HTML head (2)


    <html> <head> <title>Title of the document</title> <base href="http://www.w3schools.com/images/" /> <base target="_blank" /> <link rel="stylesheet" type="text/css" href="mystyle.css" /> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> <script type="text/javascript"> document.write("Hello World!") </script> </head> <body> The content of the document...... </body> </html>

    HTML meta (1)


    Sempre vai dentro do elemento head
    Pode ter mais de um elemento meta em head

    Fornece metadados sobre o documento HTML


    Metadados no sero exibidos na pgina, poder ser processado por mquina

    So normalmente usados para especicar descrio da pgina, palavras-chave, autor do documento e outros metadados Pode ser usado por navegadores, motores de busca (palavras-chave), ou outros Servios Web
    Uso indevido da marca meta, para uma classificao mais elevada nas buscas
    como repetir palavras-chave ou usar palavras-chave errada a maioria dos motores de busca tm parado de usar meta para indexar classificar as pginas

    HTML meta (2)


    <html> <head> <title>Title of the document</title> <meta name="description" content="Free Web tutorials on HTML, CSS, XML" /> <meta name="keywords" content="HTML, CSS, XML" /> </head> <body> The content of the document...... </body> </html>

    XHTML (1)
    Extensible HyperText Markup Language uma reformulao da linguagem de marcao HTML, baseada em XML XHTML vs. HTML
    Quase idntico ao HTML 4.01 Verso mais rigorosa e limpa do HTML HTML definido como uma aplicao XML Suortado pela maioria dos navegadores

    XHTML (2)
    Porque XHTML?
    Muitas pginas na Web contm bad HTML
    Os navegadores precisam corrigir os erros
    <html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML <p>This is a paragraph </body>

    XHTML HTML 4.01 em forma de XML


    Deve ser bem escrito e bem formado

    Diferenas mais importantes entre XHTML e HTML (1)


    Os elementos html, head, title e body so obrigatrios Elementos XHTML devem estar corretamente aninhados
    Errado: <b><i>This text is bold and italic</b></i> Correto: <b><i>This text is bold and italic</i></b>

    Elementos XHTML devem estar sempre fechados


    Errado: <p>This is a paragraph Correto: <p>This is a paragraph</p>

    Elementos vazios tambm devem ser fechados


    Errado: <br> Correto: <br />

    Elementos XHTML devem estar em letras minsculas

    Diferenas mais importantes entre XHTML e HTML (2)


    Documentos XHTML devem ter um elemento raiz
    <html> ... </html> o elemento raiz

    Nomes de atributos devem estar em minsculas Valores de atributos devem estar entre aspas Minimizao atributo proibida
    Errado: <input type="checkbox" checked> Correto: <input type="checkbox" checked="checked" />

    Um documento XHTML deve ter uma declarao DOCTYPE


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Referncias dessa aula


    Todos os exemplos dessa aula so do W3Schools
    HTML Basic Tutorial (4.01)
    http://www.w3schools.com/html/default.asp

    XHTML
    http://www.w3schools.com/html/html_xhtml.asp

    Sugestes de leitura
    Deitel, P. J., Deitel, H. M. Ajax, rich internet applications e desenvolvimento web para programadores. Pearson, 1. Edio, 2008.
    Captulo 2: Introduo XHTML

    HTML5 Tutorial
    http://www.w3schools.com/html5/default.asp

    You might also like