Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • HTML Basico

    Enviado por

    Isabel Coutinho
    9 visualizações81 páginas

    Título original

    html basico

    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
    9 visualizações81 páginas

    HTML Basico

    Enviado por

    Isabel Coutinho

    Direitos autorais:

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

    Html

    HyperText Markup Language

    Prof. Luiz Claudio


    Estrutura Básica de um site em HTML
    Começo e Final
    Diferença entre as tags iniciadora e
    finalizadora é /
    Cabeçalho
    Bloco do Corpo do site
    Exemplo
    Salvar o arquivo do bloco de notas
    Site gerado do html
    h1
    Site do html
    Site gerado do html
    Site gerado do html
    Texto em itálico
    Site gerado do html
    Outro Exemplo!
    Site gerado do html
    Para a próxima linha, usar o br
    Site gerado do html
    <b> </b> -> Negrito
    Site gerado do html
    Outro exemplo com o br
    Site gerado do html
    Trabalhando com fontes
    Site gerado do html
    Faça seu site ficar assim!
    Inserir um parágrafo -> <p>
    Foi inserido uma linha!
    Link
    Site do google exibido, quando
    clicamos no link!
    Agora quero o link na palavra link!
    O novo link ficará assim!
    Crie uma página com os produtos
    abaixo:
    Crie uma Página para o Mercado
    Sacolão
    Html do Mercado
    Html dos Produtos
    Se o link estivesse em outra pasta, por
    exemplo: na pasta loja?

    <h1>
    O Mercado sacolão possui os seguintes

    <a href=“loja/produtos.htm">produtos</a> em promoção para


    a sua econômia

    </h1>
    Âncora (link na mesma página)
    Link para outro site na mesma
    página
    <html>
    <head>

    <title>Minha primeira página Html</title>


    </head>
    <body>

    <h1>
    link para o Google
    </h1>

    <a href="http://www.google.com">link para o google</a>

    </body>
    </html>
    Link para outro site em outra página
    <html>
    <head>

    <title>Minha primeira página Html</title>


    </head>
    <body>

    <h1>
    link para o Google
    </h1>

    <a href="http://www.google.com" target = "_blank">link para o


    google</a>

    </body>
    </html>
    Inserir imagem na página
    <html>
    <head>

    <title>Minha primeira página Html</title>


    </head>
    <body>

    <h1>
    link para o Google
    </h1>

    <a href="http://www.google.com" target = "_blank">link para o google</a>

    <img src="http://h.imguol.com/1212/10video2_m.jpg"

    </body>
    </html>
    Veja como ficou a página!
    Para adicionar cor de fundo
    Negrito, Itálico, Centralizado
    Atividade 1
    Desenvolva uma Página Web em Html sobre o
    artesanato de Icoaraci que contenham os seguintes
    recursos:

    1- Imagem
    2- Texto em Negrito, Centralizado e Itálico
    3- Link para a mesma Página (Âncora) e para outra
    Página
    4- Cor de fundo
    5- Título na Página
    Listas Ordenadas
    Listas não Ordenadas
    Parâmetros para marcação da lista

    disc: o marcador é um ponto (padrão utilizado pelos navegadores,


    não precisa indicar);
    square: o marcador é um quadrado;
    circle: o marcador é um ponto.
    Tabelas

    TR -> Quebra de Linha


    TH -> Destaque
    TD -> Não Destacado
    Alinhamento
    Bordas

    O TABLE BORDE ESPECIFICA A ESPESSURA DA BORDA DA TABELA


    Css
    CSS significa Cascading Style Sheetes (Folhas de
    Estilo em Cascata). Não seria ótimo fazer layouts
    na sua página sem ter que alterar o HTML toda
    vez você desejasse altera-la?
    Exemplo:
    • No exemplo, todos os cabeçalhos da página
    serão em fonte Arial e tamanho 30px.
    • Todos os subtítulos serão em fonte Courier
    tamanho 15. E, todos os textos dos parágrafos
    serão em fonte Times New Roman tamanho 8.
    No navegador será exibido
    Imagem de outra página como fundo
    com Css
    Deverá ficar assim!
    Linhas de Código
    Imagem à esquerda/direita (left/Right)
    Left
    Posicionamento no navegador
    Linhas de Código
    Aplicando CSS a um documento HTML
    onde colocamos o código CSS?
    • Método 1: In-line (o atributo style)

    • Método 2: Interno (a tag style)

    • Método 3: Externo (link para uma folha de


    estilos)
    Método 1: In-line (o atributo style)
    Método 2: Interno (a tag style)
    Método 3: Externo (link para uma
    folha de estilos)
    Uma folha de estilos externa é um simples
    arquivo de texto com a extensão .css. Tal como
    com qualquer outro tipo de arquivo você pode
    colocar uma folha de estilos tanto no servidor
    como no disco rígido.
    Vamos Praticar a terceira forma!
    O Método 3 é a melhor!
    O método externo além de ser menos
    confuso para trabalhar por não estar
    junto com o HTML ele não ficará amostra
    se alguém olhar o código fonte da sua
    página pelo browser, pois estará
    ‘escondido’ no servidor onde está
    hospedando o seu site.

    Você também pode gostar