Sítios Web I

<html> Formatação, lista e tabela

ProfºEduardo Pezutti

http://maverick.td.utfpr.edu.br/slides/sw1 link

HTML 5

Formatação de texto

Listas

Tabelas

Formatação em HTML

▼

Marcações de formatação de texto

Tag Description
<b> Defines bold text
<em> Defines emphasized text 
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text

Marcação de citação e definição (Cont)

<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text

Marcações de código

Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text 
<samp> Defines sample computer code
<var> Defines a variable
<pre> Defines preformatted text

Marcação de citação e definição

Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<q> Defines an inline (short) quotation
<cite> Defines the title of a work
<dfn> Defines a definition term

Listas Não Ordenadas, Ordenadas e Definições

▼

As marcações de lista sempre terá uma tag pai(definição da lista) e filhos(conteúdo - itens)

Lista Não Ordenadas <ul>

Marcação HTML para ciar uma lista não ordenada, marcada, por padrão, com "pontos" (pequenos círculos pretos). Tem a tag filho <li> 


<ul>
    <li>Café</li>
    <li>Leite</li>
</ul>
Exemplo <ul>

Lista não ordenada e seus estilos

Style Description
list-style-type: disc The list items will be marked with bullets (default)
list-style-type: circle The list items will be marked with circles
list-style-type: square The list items will be marked with squares
list-style-type: none The list items will not be marked

Lista Ordenadas <ol>

Marcação HTML de lista ordenada, os itens serão numerados. Tem a tag filho <li>

Apresenta os atributos type, start e reversed(HTML 5) 


<ol>
    <li>Café</li>
    <li>Leite</li>
</ol>
Exemplo <ol>
Exemplo <ol> com type

Lista ordenadas e seus tipos

Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

Lista de Definição <dl>

Marcação HTML para criar uma lista de definições. Será utilizada 2 tags filho:
<dt> (termo) e <dd> (descrição): 


<dl>
    <dt>Café</dt>
    <dd>Bebida Quente e escura.</dd>
    <dt>Leite</dt>
    <dd>Bebida fria e clara.</dd>
</dl>
Exemplo <dl>

Tabelas <table>

▼

É a estrutura mais complexa de organização (Avôs, Pais e Filhos)!

Isso acontece, pois temos que escrever um texto (tags) que organiza as informações em colunas!

Vamos usar 3 tags:

  • <table> - O Pai
  • <tr> - A linha (row)
  • <td> - Os dados da linha

<table border="1">
    <tr>
        <td>Linha 1, Campo 1</td>
        <td>Linha 1, Campo 2</td>
    </tr>
    <tr>
        <td>Linha 2, Campo 1</td>
        <td>Linha 2, Campo 2</td>
    </tr>
</table>

Cabeça da Tabela <th>


<table border="1">
    <tr>
        <th>Coluna 1</th>
        <th>Coluna 2</th>
    </tr>
    <tr>
        <td>Linha 1, Campo 1</td>
        <td>Linha 1, Campo 2</td>
    </tr>
    <tr>
        <td>Linha 2, Campo 1</td>
        <td>Linha 2, Campo 2</td>
    </tr>
</table>

ProfºEduardo Pezutti

epsantos@utfpr.edu.br link