Tutorial de como criar uma página em html.

Seg maio 06, 2019 8:28 pm

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

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 “http://imagem.com/imagem.jpg” 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-gamex.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 #00FF00, 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-gamex.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.