Scribd Logo
Upload

Welcome to Scribd!

  • Atividade Laboratório

    Uploaded by

    Urccoviche Fernando
    7 views10 pages
    Ativiade em html 5 no visual studio 2017

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Ativiade em html 5 no visual studio 2017

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views10 pages

    Atividade Laboratório

    Uploaded by

    Urccoviche Fernando
    Ativiade em html 5 no visual studio 2017

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 10

    Inicie o Visual Studio 2017.

    Tela Inicial do Visual Studio.

    Vamos criar um projeto.


    Clique no menu Arquivo → Novo → Projeto.
    Agora vamos realizar as configurações iniciais de nosso projeto.
    Siga as instruções na imagem abaixo.

    Selecione Visual C#
    WEB
    Aplicativo Web ASP.NET
    Nome do projeto: Aulas HTML
    Local: Z:\LIP2 (sua pasta de rede).
    Pressione OK

    Continua ...

    Selecione a opção Vazio


    Desmarque todas as pastas e
    referencias
    Pressione ok
    Após pressionar ok, poderá legar alguns segundos para que o ambiente esteja
    preparado. Abaixo a imagem ilustra a ambiente carregado (pode ser diferente).

    Do lado direito do ambiente, temos o


    gerenciador de solução, essa janela nos
    mostra os arquivos e as referências de
    nosso projeto. Alguns arquivos padrões
    dessa janela serão explicados adiante.

    Com o botão direito do mouse, cline no


    nome do projeto (AulasHTML). Irá abrir um
    menu de opções.

    No menu selecione as opções:


    Adicionar
    Pagina HTML
    Veja a imagem abaixo
    Irá abrir uma janela para especificar o nome do arquivo, digite Exemplo01.

    Pressione ok .

    Ira abrir o editor de


    código.

    Veja que no
    Gerenciador de
    Soluções, agora
    aparece o arquivo
    Exemplo01.html
    Vamos editar e executar nosso primeiro projeto. Deixe o código como a imagem abaixo:

    Pronto! Depois de digitado vamos executa-lo, a fim de nos acostumarmos com o ambiente realizaremos a execução
    pelo próprio visual Studio. Clique no ícone na barra de ferramentas:

    ou pressione F5 do teclado.

    Resultado (pode variar de acordo com a resolução do monitor ou navegador).

    Ao fechar o navegador o visual Studio irá para a execução, caso não pare clique no botão parar na barra de
    ferramentas. Imagem abaixo:
    Adicionar uma folha de Estilo (CSS).
    Para criar um arquivo, clique com o botão direito em cima do nome do seu projeto, no
    menu selecione Adicionar → Folha de Estilos

    Nomeie como estilo.css

    Pressione OK.
    Irá abrir o editor de código no centro, e no gerenciador de soluções irá aparecer o novo
    arquivo. Veja imagem abaixo:
    Vamos definir algumas propriedades par o Body e para a tag <p>, o parágrafo.

    Agora volte para o arquivo HTML Exemplo01 e adicione a referência ao


    arquivo CSS entre as Tag´s <head></head>.

    Adicionar imagens
    Primeiro passo é ser organizado, vamos criar uma pasta em nosso projeto onde ficarão
    salvas as imagens utilizadas.
    Clique com o botão direito do mouse em cima do nome do seu projeto, no menu selecione
    Adicionar → Nova Pasta.
    Nomeie a pasta com o nome imagens.
    Para adicionar as imagens em seu projeto
    você pode arrasta-las para dentro da pasta
    imagens ou clicar com o botão direito em
    cima da pasta imagens → adicionar →
    itens existentes.
    Para adicionar a imagem em nossa pagina basta inserir a tag <img> com o caminho da
    imagem.

    Execute seu projeto, deverá ficar como a imagem abaixo:


    Aplicando um pouquinho de CSS.
    Abra o arquivo estilo.css e adicione estilos a tag img:

    Execute e confira o resultado.

    You might also like