Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • API B - Guia Básico para HTML

    Enviado por

    CatarinaMoreira
    1 visualizações6 páginas

    Título original

    API B - guia básico para HTML

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    DOCX, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato DOCX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    1 visualizações6 páginas

    API B - Guia Básico para HTML

    Enviado por

    CatarinaMoreira

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato DOCX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 6

    ALTERAR A FORMATAÇÃO DA LETRA

    <b> ... </b> - negrito

    <s> ... </s> - cortado

    <i> ... </i> - itálico

    <u> ... </u> - sublinhado

    <big> ... </big> - letra grande

    <small> ... <small> - letra pequena

    <sub> ... </sub> - escrever abaixo (subscript)

    <sup> ... </sup> - potência (superscript)

    <font size="15"> ... </font> - alterar tamanho da letra

    <font color="green"> ... </font> - alterar cor da letra

    <font color="#00FF80"> ... </font> - alterar cor da letra

    <font face= "comic sans MS"> ... </font> - alterar tipo de letra

    PARA MUDAR A COR DE FUNDO

    <body bgcolor="chocolate">

    <body bgcolor="#00FF80">

    EXISTEM VARIAS FORMATAÇÔES DE TITULOS, POR EXEMPLO

    <h1> ... </h1>

    <h2> ... </h2>

    <h3> ... </h3>

    <h4> ... </h4>

    <h5> ... </h5>

    <h6> ... </h6>

    PARA FAZER PARAGRAFOS E ALINHAR TEXTO

    <p align= "left"> ... </p> - alinhado à esquerda

    <p align= "center"> ... </p> - alinhado à direita


    <p align= "right"> ... </p> - alinhado ao centro

    <p align= "justify"> ... </p> - texto justificado

    <p>&nbsp;</p> - parágrafo em branco

    PARA CENTRAR QUALQUER OBJETO OU TEXTO

    <center> ... </center>

    PARA MOSTRAR O TEXTO COM A MESMA FORMATAÇÃO COM QUE FOI ESCRITO

    <pre> ... </pre>

    PARA MUDAR DE LINHA (quando usamos o "pre", p.e.)

    ...<br>...

    PODEMOS ADICIONAR ESTILOS A TITULOS (h) E PARAGRAFOS (p). POR EXEMPLO:

    <h1 style="color:blue;"> ... </h1> - alterar cor

    <p style="font-family:courier;"> ... </p> - estilo de letra

    <p style="font-size:300%;"> ... </p> - tamanho de letra

    <h2 style="text-align:center;color:#4682B4;"> ... </h2> alinhamento e cor

    <p style="background-color:#FADBD8;"> ... </p>- cor de fundo

    PODEMOS FAZER LISTAS ORDENADAS

    <ol type= "a" start="3"> - (a- marcador de abecedário)(3- começar no item 3(letra c))

    <li> ... </li>

    <li> ... </li>

    <li> ... </li>

    </ol>

    OU LISTAS NÃO ORDENADAS

    <ul type ="square"> - (square/circle/etc. - tipo de marcador)

    <li> ... </li>


    <li> ... </li>

    <li> ... </li>

    </ul>

    LINHAS HORIZONTAIS AO LONGO DO ECRÃ

    <hr width="20%" color="blue" size="3" align="right" /> - (width é o comprimento)

    <hr color="blue" size="3" align="right" /> - (se não especificarmos o comprimento, a


    linha vai de um lado ao outro do ecrâ)

    PARA ADICIONAR IMAGENS

    <img src="nomedaimagem.jpg" > - imagem local

    <img src="http://linkdaimagem.png" > - imagem remota (por link)

    EDITAR A APRESENTAÇÃO DAS IMAGENS

    <img src="nome.jpg" align="right" border="8" style="width:259 px;

    height:195px" title="nomequeapareceaopassarorato" />

    PARA MUDAR A IMAGEM DE FUNDO

    <body background="C:\Users\Aluno\Desktop\ex2lara\montanha.jpg"> ... </body>

    <body background="caminhoentreaspas"> ... </body>

    PARA APRESENTAR TEXTO NO LUGAR DAS IMAGENS QUANDO ESTAS NÃO CARREGAM

    <img src="nomedaimagem" alt="texto alternativo da imagem">

    LINKS

    <a href="linkhttpsdosite"> ...(palavra que terá o link)... </a>

    iFRAMES - ADICIONAR UM QUADRADO COM UM HTML DIFERENTE DENTRO DO SITE (MT


    USADO COM PUBLICIDADE)

    <iframe src= "https://linkdaquiloquequeresmostrarnoquadrado"></iframe> - podemos


    adicionar atributos tipo width e height
    TABELAS

    <table border="2" align="center"> ... </table> abrir e fechar tabela

    <tr> ... </tr> fazer linha nova (entre os "table" e "/table")

    <th> ... </th> inserir cabeçalho em célula (entre os "tr" e "/tr")

    <td> ... </td> inserir texto em célula (entre os "tr" e "/tr")

    TABELAS - MERGE

    <td colspan="3"> ... </td> (o colspan agrega linhas (o “3” indica o nº de células))

    <td rowspan="2"> ... </td> (o rowspan agrega colunas (o “2” indica o nº de células))

    CSS - estilos internos - exemplo

    <style>

    body {background-color: powderblue}

    h1 {color:blue; font-size:300%}

    p {color:red; font-family:courier}

    </style>

    CSS - estilos externos - exemplo

    <link rel="stylesheet" href="ex 1.css">

    TAG SPAN

    <span style= "color:darkolivegreen; font-weight:bold"> ... </span>

    CLASSES - exemplo com div

    <style>

    .cidade{

    background-color: tomato;

    color:white;
    border: 2px solid black;

    margin:20px;

    padding:20px;}

    </style>

    ...

    <div class="cidade">

    ... texto afetdo pela DIV ...

    </div>

    CLASSES - exemplo com span

    <style>

    .nota{

    font-size:120%;

    color:red;}

    </style>

    ...

    ...texto não afetado... <span class="nota">...texto afetado...</span> ...texto não afetado...

    CLASSES

    <style>

    #meutitulo{

    background-color:lightblue;

    padding:40px;

    text-align:center;}

    </style>

    <h1 id="meutitulo"> ...texto afetado... </h1>

    FORMULÁRIOS

    - CAIXA DE TEXTO

    <input type="text" value="Textbox" />


    - BOTÃO

    <input type="button" value="Botão" />

    <input type="submit" value="Botão" />

    <input type=“reset" value="Botão" />

    <button>Botão</button>

    - ESCOLHA ÚNICA

    <input type="radio" /> Radiobutton

    - ESCOLHA MÚLTIPLA

    <input type="checkbox" checked /> Checkbox

    - LISTA

    <select name="lista">

    <option value="op0">Dropbox</option>

    <option value="op1">1</option>

    <option value="op2">2</option>

    </select>

    - CRIAR MOLDURA, ADICONAR TÌTULO E TEXTO NAS CAIXAS DE TEXTO

    <fieldset>

    <legend align="left"> ...titulo...</legend>

    <textarea cols="40" rows="5">...Mensagem...</textarea>

    </fieldset>

    Você também pode gostar