Tech Gamers
Seja bem vindo ao Tech Gamers.
Ainda não é registrado? Se registre-se e fique por dentro de tudo.
Já é registrado? Por favor entrem com seu nome de usuário e senha.
Tech Gamers

Encontre aqui notícias, dicas e demais conteúdos sobre tecnologia, games e informática.


Você é novo no fórum e deseja ser popular? Apresente-se aqui e permaneça ativo.

Siga sempre as regras para manter sempre o ambiente saudável.

Ajude a divulgar nosso fórum compartilhando nas redes sociais.

Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

#1
 Spider

Spider
Administrador
Administrador
Bem, nesse tutorial irei falar sobre a famosa linguagem em HTML, então, o que seria HTML?

[Você precisa estar registrado e conectado para ver esta imagem.]
     
     Criado em 1991, HTML significa “Hypertext Markup Language”, (linguagem de marcação de texto), ou seja, “Links”. Possuía 18 tags. Se você deseja criar uma página na World Wide Web, ou www, você precisa primeiro aprender mais sobre essa linguagem. Essa não é nada mais nada menos uma linguagem web que permite o usuário criar e remodelar páginas da internet.

    A linguagem é elaborada nos seguintes elementos:
    - Texto;
    - Hiperlinks;
    - Imagens;
    - Tabelas e muito mais.

    Os elementos mais utilizados são os elementos de bloco e os de linha, na qual os de bloco utilizam todo o espaço que está disponível e de linha utiliza apenas o que for necessário.

    HTML atualmente é considerado uma linguagem padrão para todos websites, todos websites hoje em dia têm como base o HTML.

     Hoje em dia estamos na versão HTML 5 criado em 2014, a qual permite você adicionar novas tags, como article, header e footer. Agora podemos colocar áudio e vídeo nativamente em vez de utilizar o recurso do Flash Player. Para incorporar um áudio, basta aceder a tag <audio></audio> e vídeo <video></video>, fora varias compatibilidade com outros recursos como svg e muito mais.

     Para você criar uma página da internet em HTML, precisara obedecer a algumas regras, como por exemplo: <tag> conteúdos </tag>. Quando você abre alguma tag, você precisa fechar se não o código não faz efeito algum.

     Por exemplo: quero deixar palavra em negrito, preciso escrever assim: <b>Texto</b>.

     HTML são um tipo de arquivo com as seguintes extensões: .html e .htm, e são aceitos em qualquer tipo de navegador atualmente. Simplesmente o navegador lê os códigos e interpreta na tela para o usuário visualizá-lo. Para cria-lo basta abrir o bloco de notas e escrever os códigos e salvar no formato acima.

Tutorial:



     Cabeçalho:

     Começando pelo cabeçalho, ele possui até seis níveis por exemplo: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Quanto maior o número, maior será a fonte.

Código:



    <h1> Minha primeira página HTML. </h1>



     Parágrafos:

     São colocadas as tags <p>, </p> como vimos acima:

 
Código:
    <p> Hoje é um lindo dia. </p>



     O segundo parágrafo acede a seguinte tag, <a></a> que serve para colocar um link ou imagem, ou os dois com os atributos src para imagens e alt para descrição.

Código:
<img src=”http://imagem.com/imagem.jpg” alt=”Imagem1”> </img>


     Onde “[Você precisa estar registrado e conectado para ver este link.]” seria o link da imagem sem as aspas.


     
     O atributo href serve para direcionar um link, veja a seguir:


     
Código:
<a href=”http://tech-gamers.forumbrasil.net/”>Link1</a>




     Se você quiser um fundo com imagem ou cor sólida em seu site, basta colocar esse código: “<style>”. Esse comando serve para você colocar alguma informação de estilo para seu website, ou parte dele ou ele inteiro, por exemplo:

Colocando fundo com Imagem:


Código:
<style>


body {background-image: url("imagem1");


}


</style>




     Fundo com cor sólida:


Código:
<body style="background-color:#FF0000;"> </body>


Onde #FF0000 é o código hexadecimal da cor que você escolheu, por exemplo, essa cor é vermelho.




     Colorindo um texto:


Código:



<style>


body {


       color: red;


}


h1 {


       color: #00FF00;


}


p {


       color: rgb(0,0,255)


}


</style>




     Onde red é a cor geral do texto do documento, h1 é referente ao título, que contém a cor [Você precisa estar registrado e conectado para ver este link.], e p é referente aos parágrafos.  Deve ser posto entre as tags <head></head>.

     Pra você criar um bloco ou um blockquote acede a seguinte tag:

Código:



<blockquote> Bloco 1 </blockquote>


     Se quiser dividir conteúdos de conteúdos maiores contendo parágrafos, imagens, blockquotes, poderemos fazer isso com o seguinte comando:


Código:
<div>Tutorial de HTML</div>


     Para listas ordenadas aceda <ul>, e desordenadas <ol> e itens individuais na lista <li> como:

Código:



<ul>Lista1</ul> <ol>Lista2</ol> <li> Lista3</li>


     Os dois tipos de elementos:

     Elementos de bloco são:

     - <html>, essa é a tag com maior nível na linguagem HTML;
     - <head>, possui informações sobre o titulo da página;
     - <body>, engloba todos os elementos da página.

Como por exemplo:

Código:
<html>


<head>Site de moda</head>


<body>


<img src=”/” alt=”Imagem1”> </img>


</body>


</html>



     Tags de elementos linhas:

     São usadas para formatação de texto como por exemplo:
     - <strong> para negrito;
     - <em> para itálico;
     - <left> para colocar o texto para esquerda;
     - <center> centraliza o texto;
     - <right> coloca o texto para direita.

     Segue um exemplo de uma página html criada por mim:

Código:



<html>


<head>Tech World


<style>


body {


       color: red;


}


h1 {


       color: #00FF10;


}


p {


       color: rgb(0,0,255)


}


</style> </head>


<body style="background-color:#00000;"> <h3><center>Compartilhe nosso tutorial</center></h3>





<p> Este fórum trata de conteúdos tecnológicos como games, informática e conteúdos relacionados. </p>


<p><a> Hoje é um grande dia.</a> </p>


<p>Lista de compra no supermercado:</p>





<ul>Lista1</ul>


Café, açucar e sal.


<ol>Lista2</ol>


Arroz, macarrão e feijão.


<p><center>


<a href=”http://tech-gamers.forumbrasil.net”><img src=”


https://i.ibb.co/QnV5JJf/BANNER.jpg”


alt”/></a>


</center></p>


</body>


</html>


     Aqui vemos um modelo de página em html.
Espero que tenham gostado.

     Curta, comente e compartilhe se você gostou, e não se esqueça de se cadastrar.


Fontes: Hostinger, Godaddy.

https://tech-gamers.forumbrasil.net

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum

(0)