: incorpora código JavaScript para adicionar interatividade à página da web.
  • : Inclui o conteúdo que ficará visível para os usuários na página da web.

    • Elementos HTML comumente usados

    Aqui estão alguns elementos HTML básicos que você usará com frequência:

    Criando seu primeiro arquivo HTML

    Para criar um arquivo HTML, você pode usar qualquer editor de texto, como Notepad ou VS Code. Aqui está um exemplo simples:

    1. Abra seu editor de texto e digite o seguinte código:
      HTML Tutorial  
    Example Number 1
      
    Hello, world!
    1. Salve o arquivo com uma extensão .html (por exemplo, index.html)
    2. Abra o arquivo em seu navegador para ver sua primeira página HTML em ação!
    3. Para inspecionar seu código, pressione Ctrl Shift C no Google Chrome para abrir as Ferramentas do desenvolvedor e explorar a estrutura do DOM.
    4. Vá para a guia de rede nas Ferramentas do desenvolvedor e atualize a guia do navegador.

    Você pode descobrir que há uma solicitação no nome que você salvou como nesta imagem.
    \\\"Develop

    Na aba de resposta, você encontrará o código que escreveu como na imagem a seguir
    \\\"Develop

    Agora, o que aconteceu é que, assim que você abriu o arquivo que salvou como html, o computador começou a rodar o arquivo no navegador. O navegador queria mostrar algo, então fez uma chamada de solicitação para o arquivo a partir do qual foi iniciado. O arquivo forneceu ao navegador seu código e ele foi encontrado na seção de resposta. Por se tratar de um arquivo html, o navegador começa a ler o código HTML de cima para baixo. Este processo é conhecido como análise. Durante a análise, o navegador encontra diferentes tags HTML (como , , , etc.) e começa a construir uma estrutura chamada DOM com base nessas tags. À medida que o navegador cria o DOM, ele renderiza simultaneamente o conteúdo da sua tela.

    Criando uma tabela

    Vamos dar um passo adiante criando uma tabela simples em HTML:

    1. Abra o mesmo arquivo HTML e adicione o seguinte código dentro da tag :
    Table Example
      
        Name    Power    Is Kurama Present  
      
        Naruto    Rasengan    Yes  
      
        Sasuke    Sharingan    No
    1. Salve o arquivo e atualize seu navegador para ver a tabela exibida.

    Observe que o título está sendo renderizado pela tag de parágrafo. Alternativamente, você também pode usar a tag , que centralizará o título da tabela. Experimente a tag de legenda e atualize para ver as alterações.

    Observe que a tag só deve ser usada imediatamente após a tag de abertura

    .

    Agora você criou com sucesso uma tabela básica em HTML. Sinta-se à vontade para experimentar linhas e colunas adicionais para se sentir mais confortável com a sintaxe HTML.

    Conclusão

    Parabéns por concluir seus primeiros passos no desenvolvimento web com HTML! A chave para dominar HTML é a prática. Experimente diferentes elementos, crie suas próprias páginas da web e não tenha medo de cometer erros – cada erro é uma oportunidade de aprendizado.

    Lembre-se, isso é apenas o começo. À medida que você continua a desenvolver essa base, em breve poderá criar sites mais complexos e dinâmicos. Vamos tornar a web um lugar melhor, uma linha de código por vez.

    Este artigo foi escrito por Anantha Krishnan, profissional com experiência em TI e Engenharia Mecânica. Com experiência em desenvolvimento full stack e paixão por sistemas mecânicos e elétricos, Anantha Krishnan agora está focado na criação de conteúdo educacional para ajudar iniciantes em áreas de sua especialização.

    ","image":"http://www.luping.net/uploads/20240820/172415124366c475cb37fe7.png","datePublished":"2024-08-20T18:54:03+08:00","dateModified":"2024-08-20T18:54:03+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
    "Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
    Ferramentas on-line
    Tutorial de software
    Navegação no site
    Programação
    Primeira página > Programação > Desenvolva-se para construir UIs da Web: Parte Compreendendo HTML

    Desenvolva-se para construir UIs da Web: Parte Compreendendo HTML

    Publicado em 2024-08-20
    Navegar:937

    Desenvolvimento Web é uma das habilidades mais exigidas atualmente. Envolve a criação de sites fáceis de usar e envolventes que podem ser acessados ​​por meio de um navegador. O primeiro passo para se tornar um desenvolvedor web é entender HTML.

    Develop yourself to build Web UIs: Part Understanding HTML

    HTML (Linguagem de marcação de hipertexto) é a espinha dorsal de qualquer página da web. É a linguagem padrão usada para estruturar uma página web, determinando como o conteúdo é exibido no navegador. Embora a aparência de uma página seja decidida por CSS (Cascading Style Sheets) e sua funcionalidade por JS (Javascript), HTML é responsável pelo esqueleto ou estrutura fundamental.

    Antes de mergulhar nesta parte do curso, é importante entender jargões famosos e recorrentes que serão usados ​​em sua jornada. Isso ajudará você a entender os conceitos à medida que avançamos (e também tornará mais fácil para o autor explicar as coisas ;-)).

    Compreendendo os jargões

    1. Linguagem de programação: Um conjunto de instruções escritas em uma sintaxe específica (forma de uma linguagem de programação) que um computador pode executar. Lembre-se que o computador entende apenas código binário (1 ou 0), agora, para fazer o computador entender a lógica e também para encontrar uma solução de compromisso, nós (humanos) criamos uma linguagem de programação tal que seja fácil para para nós codificarmos e também para o computador entender.
    2. Compilador: Uma ferramenta que traduz código escrito em uma linguagem de programação em linguagem de máquina que um computador pode entender e executar.
    3. Sintaxe: As regras que definem a estrutura de uma linguagem de programação. Pense nisso como a forma como as palavras são organizadas em uma frase para fazer sentido.
    4. Comentários: notas dentro do código que explicam o que certas partes do código fazem. Os comentários ajudam outros desenvolvedores (ou você mesmo no futuro) a entender a lógica por trás do seu código.
    5. DOM (Modelo de Objeto de Documento): O DOM é uma representação em forma de árvore do documento HTML. Cada tag no seu HTML se torna um nó nesta árvore. Por exemplo, se o seu HTML tiver uma tag com um

      (parágrafo) dentro dela, o navegador criará um nó de corpo com um nó de parágrafo como filho.

    6. Crianças: Você entenderá isso à medida que avança. Elementos aninhados em outro elemento. Por exemplo, em HTML, uma tag de parágrafo (

      ) dentro de uma tag div (

      ) seria considerada filha de div.
    7. Elemento de nível de bloco: você conhecerá esse jargão à medida que avança. Este termo geralmente descreve a característica do elemento que ocupará toda a largura disponível.

      8. Começando com HTML

      HTML significa Linguagem de marcação de hipertexto

      • Hipertexto: Refere-se à capacidade do HTML de vincular diferentes documentos.

      • Linguagem de marcação: utiliza tags para anotar o texto, definindo como ele deve ser exibido em um navegador.

      Aqui está a estrutura básica de um documento HTML:

      
  
    HTML Tutorial
  
  
    
      Hello, world!

      • Tags: Em HTML, tags são usadas para definir elementos. As tags são colocadas entre colchetes angulares, como ou

        .

      • Elementos: Consistem em uma tag de abertura e uma tag de fechamento, que podem conter conteúdo. Por exemplo,

        Olá, mundo!

        é um elemento de parágrafo.

      Estrutura do documento HTML

      Todo documento HTML segue uma estrutura básica:

      1. : Declara o tipo de documento e a versão do HTML.
      2. : O elemento raiz que inclui todos os outros elementos HTML.
      3. : Contém metainformações sobre o documento, como título e links para folhas de estilo.
      4. : Define o título da página web, exibido na barra de título ou guia do navegador.
      5. : Fornece metadados sobre o documento HTML, como conjunto de caracteres, autor e configurações da janela de visualização. É uma tag de fechamento automático.
      6. : Incorpora código CSS para estilizar os elementos HTML.
      7. : incorpora código JavaScript para adicionar interatividade à página da web.
      8. : Inclui o conteúdo que ficará visível para os usuários na página da web.

      Elementos HTML comumente usados

      Aqui estão alguns elementos HTML básicos que você usará com frequência:

      • : Define um parágrafo.
      • : um elemento em nível de bloco usado para agrupar outros elementos.
      • : um elemento embutido usado para agrupar texto para fins de estilo.
      • : Representa o conteúdo introdutório ou links de navegação de uma seção.

      • a
        : Títulos, sendo

        o nível mais alto e

        o mais baixo.

      • : Insere uma quebra de linha (tag de fechamento automático — o que significa que não há necessidade de fechar a tag).
      • : Usado para criar um formulário HTML para entrada do usuário.
      • : Cria um campo de entrada, normalmente usado em um formulário.
      • : Cria uma lista suspensa.
      • : associa um rótulo de texto a um elemento de formulário.
    : Define uma tabela.
  • : Define uma linha em uma tabela.
  • : Define uma célula em uma linha da tabela.
  • : Define uma célula de cabeçalho em uma linha da tabela.
  • : Define uma lista não ordenada (com marcadores).
    • : Define uma lista ordenada (numerada).
    2. : Define um item da lista.

      Criando seu primeiro arquivo HTML

      Para criar um arquivo HTML, você pode usar qualquer editor de texto, como Notepad ou VS Code. Aqui está um exemplo simples:

      1. Abra seu editor de texto e digite o seguinte código: 
      

  HTML Tutorial


  
      Example Number 1
      
  
      Hello, world!
      1. Salve o arquivo com uma extensão .html (por exemplo, index.html)
      2. Abra o arquivo em seu navegador para ver sua primeira página HTML em ação!
      3. Para inspecionar seu código, pressione Ctrl Shift C no Google Chrome para abrir as Ferramentas do desenvolvedor e explorar a estrutura do DOM.
      4. Vá para a guia de rede nas Ferramentas do desenvolvedor e atualize a guia do navegador.

      Você pode descobrir que há uma solicitação no nome que você salvou como nesta imagem.
      Develop yourself to build Web UIs: Part Understanding HTML

      Na aba de resposta, você encontrará o código que escreveu como na imagem a seguir
      Develop yourself to build Web UIs: Part Understanding HTML

      Agora, o que aconteceu é que, assim que você abriu o arquivo que salvou como html, o computador começou a rodar o arquivo no navegador. O navegador queria mostrar algo, então fez uma chamada de solicitação para o arquivo a partir do qual foi iniciado. O arquivo forneceu ao navegador seu código e ele foi encontrado na seção de resposta. Por se tratar de um arquivo html, o navegador começa a ler o código HTML de cima para baixo. Este processo é conhecido como análise. Durante a análise, o navegador encontra diferentes tags HTML (como ,

      , , etc.) e começa a construir uma estrutura chamada DOM com base nessas tags. À medida que o navegador cria o DOM, ele renderiza simultaneamente o conteúdo da sua tela.

      Criando uma tabela

      Vamos dar um passo adiante criando uma tabela simples em HTML:

      1. Abra o mesmo arquivo HTML e adicione o seguinte código dentro da tag : 
      Table Example
      Name Power Is Kurama Present
      Naruto Rasengan Yes
      Sasuke Sharingan No
      1. Salve o arquivo e atualize seu navegador para ver a tabela exibida.

      Observe que o título está sendo renderizado pela tag de parágrafo. Alternativamente, você também pode usar a tag

      , que centralizará o título da tabela. Experimente a tag de legenda e atualize para ver as alterações.

      Observe que a tag

      só deve ser usada imediatamente após a tag de abertura .

      Agora você criou com sucesso uma tabela básica em HTML. Sinta-se à vontade para experimentar linhas e colunas adicionais para se sentir mais confortável com a sintaxe HTML.

      Conclusão

      Parabéns por concluir seus primeiros passos no desenvolvimento web com HTML! A chave para dominar HTML é a prática. Experimente diferentes elementos, crie suas próprias páginas da web e não tenha medo de cometer erros – cada erro é uma oportunidade de aprendizado.

      Lembre-se, isso é apenas o começo. À medida que você continua a desenvolver essa base, em breve poderá criar sites mais complexos e dinâmicos. Vamos tornar a web um lugar melhor, uma linha de código por vez.

      Este artigo foi escrito por Anantha Krishnan, profissional com experiência em TI e Engenharia Mecânica. Com experiência em desenvolvimento full stack e paixão por sistemas mecânicos e elétricos, Anantha Krishnan agora está focado na criação de conteúdo educacional para ajudar iniciantes em áreas de sua especialização.

      3. Declaração de lançamento Este artigo está reproduzido em: https://dev.to/marina_labs/develop-yourself-to-build-web-uis-part-1-understanding-html-4of9?1 Se houver alguma violação, entre em contato com study_golang@163 .com para excluí-lo
      Tutorial mais recente Mais>
      ClassificaçãoMais>
      Aprenda japonês Aprender coreano Aprenda chinês Aprender língua estrangeira Jogo Problema comum Periféricos de tecnologia IA Tutorial de software Programação Artigo

      Estude chinês

      FerramentaMais>
      Decodificação de imagem base64
      pinyin chinês
      Codificação Unicode
      Compressão de criptografia de ofuscação JS
      Ferramenta de criptografia hexadecimal de URL
      Ferramenta de conversão de codificação UTF-8
      Ferramentas online de codificação e decodificação Ascii
      Ferramenta de criptografia MD5
      Ferramenta on-line de criptografia e descriptografia de texto Hash/Hash
      Criptografia SHA on-line

      Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

      Copyright© 2022 湘ICP备2022001581号-3