fala webmasters tudo bem
a idéia do vídeo de hoje é criar um site html
da maneira mais simples e prática possível sem utilizar nenhum programa
sofisticado neste vídeo tem foco para iniciantes e
você junto comigo vamos criar um site html do zero por um passo a passo em seu
computador se instalar nenhum programa novo e se você tem interesse em aprender
mais sobre html em questões de teoria por exemplo aqui em cima estou te
indicando um vídeo para te explicar beleza? então bora criar o site, o site que vamos
criar é esse com apenas o básico do html porém você
vai ver como é interessante aprender em seu computador
o primeiro passo é criar uma pasta e coloque o nome site
depois clique com o botão direito do mouse e crie um arquivo de texto txt e
não precisa colocar nenhum nome por enquanto
abra este arquivo com um bloco de notas e vamos desenvolver a página principal
como isso é um site html todas as páginas de html iniciam com a tag html
para indicar os navegadores isso é uma página então devemos abrir a
tag e depois fechar com a barra seguido do mesmo nome
esse é um processo de fechar o raciocínio lógico de cada tag a próxima
tag e é a meta que vai definir a categoria de letras, acentos, etc
então coloque o charset =aspas UTF hífen 8 isso evita que todo o
texto inserido em seu site fique quebrado não importa em que parte do mundo seja
acessado agora vamos criar duas partes da
estrutura da página na cabeça que no caso é a tag head onde vamos inserir
informações no topo do site e o corpo a tag body onde vamos inserir
informações no meio do site e vamos colocar nossa primeira informação no
head o h1 e cria o maior título do html e
pode ser o seu nome por exemplo e agora no body a tag h2 um título menor para um
sobre agora vamos em arquivo e vai em salvar como agora vamos transformar isso
em um site muda o tipo pra todos os arquivos apaga todo o nome do arquivo e
escreve index.html e salva voltando na pasta o arquivo de texto
pode apagar e abra o index e assim que está o nosso site no momento mas ainda
tem bastante trabalho eu vou pegar dois arquivos aqui se você
quiser esses arquivos tem um link na descrição para baixar, dai coloca na mesma pasta site com a index, tá bom. Vou inserir essa imagem no topo do site. e eu quero que esta imagem fique acima o
título h1 ricardo então vamos criar a tag I M G de imagem espaço src de Source ou recurso aí coloco igual e entre aspas o nome do
arquivo bg.png e aí fecha tag a tag imagem dá pra fechar desse jeito
aqui e vamos salvar e dar uma olhadinha veja que a imagem está muito grande e se
a gente mexe na janela a imagem fica presa e ela não se ajusta
então vamos adicionar nossos primeiros parâmetros para criar um site responsivo
exatamente quer ver voltando ao index veja com atenção nesse
local vamos colocar o parâmetro height que é a
altura é width que a largura aqui podemos colocar números inteiros ou
porcentagem para deixar o site responsivo então vamos colocar 50% de
altura e 100% de largura vamos salvar e conferir
olha aí agora dá para mexer o site de qualquer jeito que a imagem fica
responsiva o tempo todo acho que agora ficou mais claro né
voltando ao index vamos inserir mais uma foto no head que a foto do autor do site
é bom você renomear a sua imagem pra igual à minha
para facilitar e vamos colocar os parâmetros de tamanho
aqui eu quero deixar essa imagem pequena então 30% de altura e 15% de largura e
agora salvar e conferir e está funcionando responsivo também ótimo
vamos começar a brincar com o estilo da página agora no body
vamos colocar o parâmetro Style aí coloca background hífen color e a cor purple que é roxo inglês assim a gente muda toda cor do corpo da
página na tag body e pronto tá tudo roxo mas as letras ainda estão ruins de ler e
por isso vamos voltar e continuar usando esse parâmetro style e mudar a cor dos
textos então aqui no h1 vamos adicionar
Cyan que esse Ciano copiar esse mesmo parâmetro de estilo para o h2 e assim os
textos ficam visíveis além da cor existem dezenas de coisas a
serem configurados nas tags uma delas é o alinhamento com isso vamos
utilizar o parâmetro align que é alinhamento porque algumas vezes você precisa usar
middle e meio outras vezes tem que usar o center que é sem
no caso dos H1 se utiliza center vou colocar o mesmo código no h2
os dois assim vão ficar no meio ea imagem da foto vamos alinhar ela para
left que é esquerda ainda está bagunçado mas adicionando
mais elementos no site vai ficar organizado e é exatamente o que vamos
inserir agora no arquivo para inserir simples textos
usamos a tag p de parágrafo aqui vou colocar um texto de exemplo só para
preencher e fechar a tag, agora vamos colocar o mesmo estilo dos títulos nesse
texto estamos evoluindo com o site
vamos alinhar esse texto agora para a direita com align right continuando
então o preenchimento do site e agora usar essa tag br ea break online quebra
de linha ele pula uma linha no site e agora vamos
inserir mais um h2 com a cor ciano alinhado pra direita e esse vai ser o
contato como já criamos os principais elementos podemos apenas copiar e colar
pra repetir você pode digitar para ja ir exercitando em sua memória as
configurações de cada tag até o momento está assim acredito que agora com esse
conhecimento sua criatividade vai culminar e você vai criar um site html
do seu jeito acho que esse contato não tá legal ali
na direita vamos mandar pro meio e pronto ta melhorando quase finalizando
vamos criar mais uma estrutura do site como criamos a cabeça que é o head o corpo é
o body e agora os pés o footer, no footer vamos criar um
parágrafo com estilo na cor ciano e coloca assim feito por e coloca seu nome
e fecha tag agora o outro p com estilo cor ciano coloque E-mail
agora aqui pessoal essa é a parte mais complexa desse vídeo veja com atenção
depois desses dois pontos crie uma tag chamada a com estilo dessa vez white é
branco pra ficar diferente e agora vamos criar um link com esse href
nesse href vamos pedir que o link seja enviar um e mail pra nós
aí colocamos mailto insira seu email exatamente como está
aqui e depois dessa chave veja só coloque a chave desse a ainda não
fechei e ai escreve de novo seu e-mail e só agora fecha tag a e depois a tag p beleza agora salvar e olha como está lá
embaixo com o seu contato se clicar ali já pede pra abrir alguma
ferramenta de e mail legal né.
Resumo da Postagem
Como Criar um Site HTML 2020 – Passo a Passo Fácil
agora pra finalizar mesmo
última configuração tá vendo essa aba aqui? a gente pode
editar até isso aqui sabia então aqui no head
vamos criar a tag title que é título e colocar meu site html e fechar a tag e
pronto agora sim uma página html básica e acredito que tenha sido bem produtivo
para exercitar o html ou aprender os primeiros passos né
agora como seu site html pronto você pode colocar ele na internet utilizando
a hospedagem da Hostinger nós temos planos com preços imperdíveis e ainda pode ganhar
um registro de domínio grátis clique neste link e adquira agora e com
isso eu finalizo vídeo de hoje e tenho certeza que esses poucos passos no html
já atiçou a sua criatividade que você vai partir daí criando um monte de sites
se você gostou do vídeo deixa o seu like e apoia nosso canal inscreva-se que toda
semana tem vídeo novo sobre como criar sites blogs loja virtual e clique no
sininho para receber todas as notificações até semana que vem.
como criar site html, como criar um site em html, como criar um site html no bloco de notas, criar site html bloco de notas, criando site do zero, criando site html, criando site no bloco de notas, criar site bloco de notas, criar site responsivo html5, criar site html, como criar um site html, como montar um site html, como montar um site html passo a passo
Poderá ver o vídeo no youtube Aqui