Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • HTML

    Enviado por

    gabrielagomescezar
    1 visualizações20 páginas

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    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 PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    1 visualizações20 páginas

    HTML

    Enviado por

    gabrielagomescezar

    Direitos autorais:

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

    HTML

    POR SAMIR NETO E FELIPE CLARINDO


    O que é HTML?
    Em 1991 Tim Berners-Lee criou essa linguagem de marcação para
    melhorar a comunicação entre ele e seus colegas de trabalho no
    CERN, desde então já surgiram 5 versões e o HTML se tornou a base
    da web.
    Com o HTML definimos o significado e a estrutura do conteúdo da
    web e, além de texto, nossas páginas precisam de imagens, vídeos e
    vários outros formatos e para isso temos os elementos HTML.
    O que é tag?
    Um elemento HTML é formado pela tag de abertura e seus
    atributos, o conteúdo e uma tag de fechamento. E mais a frente
    veremos que existem elementos que não tem tag de fechamento.
    Com esses elementos podemos agrupar tipos de conteúdo,
    alterar tamanho e forma de fontes e adicionar diferentes mídias
    ao nossa página na web.
    <!DOCTYPE html>
    A primeira linha do documento deve ser o <!DOCTYPE html>, apesar
    de parecer um elemento HTML ela apenas diz ao navegador que ele
    está lidando com um arquivo do tipo HTML5. Os elementos HTML
    vem logo abaixo.
    <head></head>
    A tag head contém elementos que serão lidos pelo navegador, como os metadados - um exemplo é o charset, que é a
    codificação de caracteres e a mais comum é a UTF-8, o JavaScript com a tag script, o CSS através das tags style e link -
    veremos a diferença quando falarmos sobre CSS - e o título da página com a tag title.
    <meta charset=”UTF-8" />
    Define o conjunto de caracteres utilizado no documento como UTF-8, que suporta uma ampla gama de caracteres de diferentes idiomas e símbolos.

    <meta name=”viewport” content=”width=device-width,initial-scale=1.0" />


    Define a largura do viewport como a largura do dispositivo (width=device-width) e a escala inicial de zoom como 1.0 (initial-scale=1.0). Isso é importante para
    garantir que o layout do site seja responsivo e se ajuste adequadamente em dispositivos móveis.

    <link>
    Um elemento <link> em HTML é usado para vincular recursos externos ao documento, como arquivos de estilo (CSS), ícones (favicon), fontes, feeds RSS,
    scripts e outros documentos.
    O atributo rel define o tipo de relação entre o documento atual e o recurso vinculado, enquanto o atributo href especifica o URL do recurso externo.
    O elemento <link> é autossuficiente, o que significa que ele não possui uma tag de fechamento, e é colocado dentro da seção <head> do documento HTML.
    Link para um arquivo CSS externo
    <link rel="stylesheet" href="url do arquivo css">

    Link para um arquivo de ícone (favicon)


    <link rel="shortcut icon" href="url do favicon" type="image/x-icon">

    Link para um arquivo de fonte externo


    <link rel="stylesheet" href="url do arquivo de fonte>

    Link para um feed RSS


    <link rel="alternate" type="application/rss+xml" title="Feed RSS" href="url do feedl">

    Link para um arquivo de script externo


    <script src="url do script"></script>

    Link para um arquivo de pré-renderização


    <link rel="prerender" href="url do arquivo">

    Link para um arquivo de estilo alternativo


    <link rel="alternate stylesheet" href="url do estilo alternativo" title="Estilos alternativos">

    <title></title>
    Define o título do documento, que é exibido na barra de título do navegador ou na guia da página. É importante para identificar o conteúdo da página.
    <body></body>
    Dentro da tag body colocamos todo o conteúdo visível ao usuário: textos, imagens, vídeos.

    <header></header>
    É o cabeçalho da página ou de uma seção da página e normalmente contém logotipos, menus, campos de busca.

    <main></main>
    O elemento <main> define o conteúdo principal dentro do <body> em seu documento ou aplicação. Entende-se como conteúdo
    principal aquele relacionado diretamente com o tópico central da página ou com a funcionalidade central da aplicação.

    <nav></nav>
    O Elemento HTML de Navegação ( <nav> ) representa uma seção de uma página que aponta para outras páginas ou para outras
    áreas da página, ou seja, uma seção com links de navegação.

    <footer></footer>
    Esse elemento representa o rodapé do conteúdo ou de parte dele, pois ele é aceito dentro de vários elementos, como article e
    section e até do body. Exemplos de conteúdo de um <footer> são informações de autor e links relacionados.

    <section></section>
    Representa uma seção genérica de conteúdo quando não houver um elemento mais específico para isso.
    <div></div>
    O elemento de divisão **HTML <div> **é um container genérico para conteúdo de fluxo, que de certa forma não representa
    nada. Ele pode ser utilizado para agrupar elementos para fins de estilos (usando class ou id), ou porque eles compartilham
    valores de atributos, como lang. Ele deve ser utilizado somente quando não tiver outro elemento de semântica (tal como
    <article> ou <nav>).

    <span></span>
    O elemento HTML <span> é um conteiner generico em linha para conteúdo fraseado , que não representa nada por
    natureza. Ele pode ser usado para agrupar elementos para fins de estilo (usando os atributos class ou id ), ou para
    compartilhar valores de atributos como lang.

    <article></article>
    Representa um conteúdo independente e de maior relevância dentro de uma página, como um post de blog, uma notícia
    em uma barra lateral ou um bloco de comentários. Um article pode conter outros elementos, como header, cabeçalhos,
    parágrafos e imagens.

    <aside></aside>
    É uma seção que engloba conteúdos relacionados ao conteúdo principal, como artigos relacionados, biografia do autor e
    publicidade. Normalmente são representadas como barras laterais.
    Textos
    <h1-h6></h1-h6> - Texto em Destaque <mark> - Texto Marcado

    <p></p> - Parágrafo <small> - Texto Menor

    <b> - Texto em Negrito <del> - Texto Deletado

    <strong> - Texto Importante <ins> - Texto Inserido

    <i> - Texto em Itálico <sub> - Texto Subscrito

    <em> - Texto Enfatizado <sup> - Texto Sobrescrito

    <br> - Quebra de Texto


    <form></form>
    <input>
    É uma forma do usuário inserir dados ou escolher uma opção.

    TYPE
    Text (Texto):
    <input type="text" placeholder="Digite seu nome">

    Password (Senha):
    <input type="password" placeholder="Digite sua senha">

    Checkbox (Caixa de Seleção):


    <input type="checkbox" id="check"> <label for="check">Aceito os termos</label>

    Radio (Botões de Opção):


    <input type="radio" id="opcao1" name="opcao" value="opcao1">
    <label for="opcao1">Opção 1</label><br>
    <input type="radio" id="opcao2" name="opcao" value="opcao2">
    <label for="opcao2">Opção 2</label><br>
    Submit (Enviar):
    <input type="submit" value="Enviar">

    Reset (Limpar)
    <input type="reset" value="Limpar">

    File (Arquivo):
    <input type="file" accept="image/*">

    Number (Número):
    <input type="number" min="0" max="100" step="1" value="50">

    Email (E-mail):
    <input type="email" placeholder="Seu e-mail">

    Date (Data):
    <input type="date">
    <img>
    O elemento HTML <img> (ou HTML Image Element) representa a inserção de imagem no documento.

    <img src="imagem.jpg" alt="Minha Figura">

    src
    É a origem da imagem. Aqui você cola o caminho da imagem.

    alt
    Se por algum motivo, a imagem não estiver sendo obtida, a mensagem desse atributo irá aparecer ao lado de uma imagem
    simbolizando a imagem quebrada.
    Listas
    <ol></ol>
    Lista ordenada com números ou letras

    <ul></ul>
    Lista não ordenada com marcadores
    Usamos <li></li> para fazer os itens dessa lista.

    <dl></dl>
    Listas de Descrição

    <dt></dt>
    Listas de Termos
    Usamos <dd></dd> para fazer os itens dessa lista.
    <a></a>
    O elemento <a> em HTML (ou elemento âncora), com o atributo href cria-se um hiperligação nas páginas web, arquivos,
    endereços de emails, ligações na mesma página ou endereços na URL. O conteúdo dentro de cada <a> precisará indicar o
    destino do link.

    href
    Caminho que hospeda o link respectivo.

    target
    _blank
    Abre o documento vinculado em uma nova janela ou aba.
    _self
    Abre o documento vinculado no mesmo frame no qual ele foi clicado (esse é o padrão e, em geral, não precisa ser
    especificado).
    _parent
    Abre o documento vinculado no frame do elemento pai.
    _top
    Abre o documento vinculado no corpo completo da janela.
    framename
    Abre o documento vinculado em um frame nomeado e especificado.
    <table></table>
    O elemento <table> HTML representa dados tabulares — isto é, informações apresentadas em uma tabela bidimensional
    composta por linhas e colunas de células contendo dados .
    <tr></tr>
    Cria linhas.

    <th></th>
    Cria colunas.

    <td></td>
    Cria células.

    ATRIBUTOS
    align
    Este atributo enumerado (en-US) indica como a tabela deve ser alinhada dentro do documento que a contém. Pode ter os
    seguintes valores:

    left: a tabela é exibida no lado esquerdo do documento;


    center: a tabela é exibida no centro do documento;
    right: a tabela é exibida no lado direito do documento.
    bgcolor
    A cor de fundo da tabela. É um código RGB hexadecimal de 6 dígitos (en-US), prefixado por um '#'. Uma das [palavras-chave
    de cor] predefinidas (/pt-BR/docs/Web/CSS/named-color) também pode ser usada.

    border
    Este atributo inteiro define, em pixels, o tamanho do quadro ao redor da tabela. Se definido como 0, o atributo frame é
    definido como void.

    cellpadding
    Este atributo define o espaço entre o conteúdo de uma célula e sua borda, exibida ou não. Se o comprimento do
    preenchimento da célula for definido em pixels, esse espaço de tamanho de pixel será aplicado a todos os quatro lados do
    conteúdo da célula. Se o comprimento for definido usando um valor percentual, o conteúdo será centralizado e o espaço
    vertical total (superior e inferior) representará este valor. O mesmo vale para o espaço horizontal total (esquerda e direita).

    cellspacing
    Este atributo define o tamanho do espaço entre duas células em um valor percentual ou pixels. O atributo é aplicado
    horizontal e verticalmente, ao espaço entre o topo da tabela e as células da primeira linha, a esquerda da tabela e a primeira
    coluna, a direita da tabela e a última coluna e a parte inferior da tabela e a última linha.
    frame
    Este atributo enumerado define qual lado do quadro ao redor da tabela deve ser exibido.

    rules
    Este atributo enumerado define onde as rules, ou seja, as linhas, devem aparecer em uma tabela. Pode ter os seguintes
    valores:
    none, que indica que nenhuma regra será exibida; é o valor padrão;
    groups, que fará com que as regras sejam exibidas entre os grupos de linhas (definidas por <thead> (en-US), <tbody> (en-
    US) e <tfoot> elementos) e entre grupos de colunas (definidos apenas pelos elementos <col> (en-US) e <colgroup> (en-
    US));
    rows, que fará com que as regras sejam exibidas entre as linhas;
    cols, que fará com que as regras sejam exibidas entre as colunas;
    all, que fará com que as regras sejam exibidas entre linhas e colunas.

    summary
    Este atributo define um texto alternativo que resume o conteúdo da tabela. Use o elemento <caption> em vez disso.

    width
    Este atributo define a largura da tabela. Em vez disso, use a propriedade CSS width.
    Multimídia
    <video></video>
    O elemento HTML <video> é utilizado para incorporar conteúdo de vídeo em um documento
    HTML ou XHTML.

    <audio></audio>
    O elemento audio é utilizado para embutir conteúdo de som em um documento HTML ou
    XHTML.O elemento audio foi adicionado como parte do HTML5.

    Comentários
    Comentários em HTML são usados para adicionar notas ou explicações no código que não
    são exibidas na página renderizada. Eles são delimitados por <!-- -->.
    O que são Classes e IDs?
    ID
    É representado pelo símbolo # (hash) seguido de um nome para esse ID.

    Classe
    A classe é representada de forma parecida do ID, mas é precedida por um ponto em vez do hash.

    E a diferença mais importante entre eles é a forma como devem ser usados: o ID só pode ser usado
    uma vez em uma página HTML enquanto a classe não tem restrições.

    Atalhos
    Criação de Divs
    div.nomedaclasse
    Criação de IDs
    div#nomedoid
    Esse material foi feito de
    aluno para aluno.
    Se você encontrou algum erro ou acha que tem algo para
    melhorar, pode mandar mensagem, estamos abertos a isso.

    Você também pode gostar