Mais populares

Clique aqui para eleger os artigos mais populares. Em 1 de Janeiro 2020 iremos contabilizar os votos. Ainda não temos dados suficientes para eleger os mais populares.

Newsletter


Como fazer um site do zero: Tutorial I

12 de Dezembro 2019

    Este é o primeiro dum conjunto de tutoriais que indicam, passo a passo, como criar um site do zero. Neste tutorial falaremos de aprender a parte do HTML. Informação:  Neste tutorial só vão ser referidas as coisas verdadeiramente essenciais para a criação de um site:
    Então, começemos pelo princípio. Primeiro temos que instalar o editor de código. Temos o Sublime Text, o Brackets, o Notepad++, etc. Recomendamos o Brackets, mas dentro do nosso site usamos predominantemente o Sublime Text 3. Fica à sua escolha.
Clique nos links da frase anterior para instalar. Após clicar o processo é muito fácil nos dois editores de código. No brackets é só clicar em "Download" e prosseguir, e no Sublime Text 3 é só escolher o seu Sistema Operativo e prosseguir com a instalação.     Depois desta breve explicação, começemos a aprender HTML. O HTML funciona através de tags. Cada tag tem uma função. A estrutura de um HTML básico seria assim:


< html >
< head >
< title >Título que aparece no separador< / title >
< meta charset="UTF-8" >
< meta name="title" content="Titulo que aparece quando se pesquisa a pagina no google" >
< meta name="description" content="Descricao que aparece quando se pesquisa a pagina no google" >
< link content="vamosaprofundarmaisisto" href="noproximotutorial.css" >
< link href="logo.ico" rel="icon" >
< link href="logo.ico" rel="apple-touch-icon" >
< / head >
< body >
< nav >
< ul >
< li >Menu do site< / li >
< li >Página 1< / li >
< li >Página 2< / li >
< li >Página 3< / li >
< / ul >
< / nav >
< content >
< h1 >Título grande da página< /h1 >
< h2 >Título médio da página< /h2 >
< h3 >Subtítulo grande da página< /h3 >
< h4 >Subtítulo médio grande da página< /h4 >
< h5 >Subtítulo médio pequeno da página< /h5 >
< h6 >Subtítulo pequeno da página< /h6 >
< p >Descricão da página: blablablablablabla +"#$%!&"("&#%#/)=< /p >
< img alt="Descrição da imagem que vai aparecer quando a imagem não está disponível" src="logo.ico">
< iframe src="https://youtube.com">
< input placeholder="ola" pattent="1" type="text">< /input >
< /content>
< aside >
< p >Barra lateral da página< /p >
< /aside >
< footer >
< p >*Iremos posicionar, colorir e dimensionar tudo com o css!< /p >
< /footer >
< /body >
< /html >

     A tag html indica que todo o código que está no seu interior, é escrita na linguagem HTML (HyperText Markup Language).     Dentro dela, estão as tags head e body. A tag head indica que o que está dentro dela não é visível no conteúdo da página (mas faz diferença no conteúdo indiretamente). A body é o que está visível.
    No interior da head encontramos as tags meta, title 3 tags link. A meta charset é usada para que o HTML permita assentos gráficos e alguns sinais de pontuação na página ou cara. A title é para pôr um título no separador. A 1º tag link será mais esclarecida no próximo tutorial. A 2ª e a 3ª são os ícones que aparecem no separador. As outras 2 tags meta são para descrever e pôr um título à página quando se pesquisa no google.
    A body contém as tags nav, content, aside e footer. Quando estilizarmos a página a tag nav vai ser o menu do site localizado no topo. A tag content vai ser o conteúdo da página constituído pelas tags h1, h2, h3, h4, h5, h6, p, img, iframe e input. A função das nove primeiras está escrita no próprio código. A função da última pode ter várias funções. Existem vários tipos de input. Servem para recolher dados de várias formas. Passando para a aside, composta apenas pela tag p, tal como a footer. A aside é a barra lateral, e a footer é onde estão escritos os direitos de autor do site,... Visualize os próximos 2 tutoriais deste conjunto de tutoriais até ao fim desta semana!

*Colocamos espaços entre o carater "<" ou ">" e a sua letra para o código html não ser reconhecido pelo browser

Pode ver aqui o resultado do código apresentado acima (apenas das coisas da tag body, e com os estilos próprios deste site)
Se quiser coisas mais específicas, contacte-nos. Solução garantida em menos de 72 horas.