HTML é a linguagem de marcação amplamente usada para criar uma estrutura de página da web. Ele fornece tags diferentes que são utilizadas para adicionar elementos diferentes à página da web, como , ,
, e . Essas tags são definidas no editor de texto e visíveis no navegador. Este artigo discutirá:
Pré -requisitos para criar um site Como criar uma página HTML? Como construir o site HTML com código? Como estilizar elementos HTML através do CSS? Pré -requisitos para criar um site
Os pré -requisitos para criar um site são:
Um editor de texto Navegador da web O que é um editor de texto?
Um editor de texto é um programa de software de computador que permite aos usuários editar, armazenar e imprimir texto. Esses editores são frequentemente conhecidos como software notepad. Existem vários editores de texto, como:
Bloco de anotações Código do Visual Studio Texto sublime Observação: Usaremos o Visual Studio Code Editor para a demonstração. Os usuários podem instalar qualquer um dos editores de texto de acordo com suas preferências.
Como criar uma página HTML?
O procedimento passo a passo para criar um site no Código do Visual Studio é explicado abaixo.
Etapa 1: Crie uma pasta de projeto
Primeiro, crie uma pasta e nomeie -a como quiser. Por exemplo, especificamos o nome do arquivo como “Html ”. Dentro desta pasta, criaremos subestimados e arquivos para o nosso projeto:
Etapa 2: Pasta aberta
Abra a pasta do projeto, clique com o botão direito do mouse e selecione o “Aberto com código ”Opção do menu de contexto:
Como resultado, a seguinte janela será exibida:
Etapa 3: crie um novo “.arquivo html ”
O, crie um novo arquivo clicando no ícone do novo arquivo, como mostrado na imagem abaixo:
Salve o arquivo com o “.html Extensão.
Etapa 4: Adicione o código HTML
Adicione o código HTML necessário no arquivo:
Vamos executar um exemplo para ver como o código HTML é executado e exibe o site no navegador.
Como construir um site em html?
Para construir um site a partir do zero, confira as etapas abaixo do ritmo abaixo.
Etapa 1: Crie um contêiner "div"
Em HTML, crie uma div chamada “recipiente ”. Dentro desta div, adicionaremos elementos para criar um site:
Etapa 2: Adicione os elementos "cabeçalho" e "Nav"
Dentro do contêiner div, coloque um “" marcação. O elemento do cabeçalho inclui uma imagem e uma barra de navegação. Mais especificamente, a barra de navegação exibe uma lista de links para várias seções do nosso site:
Etapa 3: Adicione “Banner de Seção”
Adicione um “” Tag com o nome da classe “bandeira ”. Esta seção contém um
Tag para o cabeçalho:
Etapa 4: Crie seção "Aboutus"
Então, crie um “sobre nós ”Seção que conterá informações sobre o nosso site. Vamos criá -lo adicionando primeiro um título com um “
Sobre nós
Linuxhint é o melhor site de tutorial online. Daqui você pode aprender diferente
Consulte Mais informação Vamos seguir em direção à próxima etapa.
Etapa 5: Faça a seção “nossos serviços”
Em seguida, adicione uma seção para “Nossos serviços ”. Esta seção conterá as informações de serviço sobre o nosso site.
Vamos criá -lo adicionando dois divs dentro de uma div chamada “Nossos serviços ”. O primeiro div “Serviços “Conterá divs de árvores com o nome“serviço “Cada um com informações diferentes. Cada "serviço ”Div contém os valores de atributo diferentes,
e tags de botão:
Fornecemos educação de qualidade ao mundo.
Exibir serviço Fornecemos ao mundo conhecimento de tecnologias emergentes.
Exibir serviço Feliz em ajudar o mundo.
Exibir serviço Etapa 6: Defina o elemento "rodapé"
Para fazer um rodapé do site, use o “" marcação. Este elemento contém uma tag para mostrar conteúdo com texto menor:
(c) direitos autorais - todos os direitos reservados A estrutura do nosso site é Don. Agora, vamos para o CSS para estilo.
Como estilizar elementos HTML através do CSS?
Agora, confira como vamos estilizar nosso site usando propriedades CSS.
Estilo todos os elementos (*)
* O asterisco “ * ”É usado no CSS para selecionar um ou todos os tipos de elementos e aplicar as seguintes propriedades:
““margem ”A propriedade é utilizada para dar espaço ao redor do elemento. ““preenchimento ”É usado para dar espaço ao redor do conteúdo do elemento. ““tamanho de caixa ”Determina o método para calcular a altura e largura geral do elemento. ““família de fontes ”Define o estilo de fonte. Tag de estilo “H2”
H2 O " ““tamanho da fonte ”É usado para definir o tamanho da fonte. ““espessura da fonte ”Especifica a espessura da fonte. Elemento de “seção” de estilo
seção Para estilizar “seção ”, Aplique as propriedades abaixo estatadas:
““Top-top ”É utilizado para dar espaço no topo do conteúdo. ““Botting-Bottom ”Aplicará espaço na parte inferior do conteúdo. Elemento de "botão" de estilo
botão Cada botão do nosso site manterá as seguintes propriedades:
““cor de fundo ”Aplica a cor ao fundo do botão. ““cor ”Propriedade define uma cor para a legenda do botão. ““fronteira ”A propriedade aplica uma borda ao botão especificando a largura, o tipo e a cor. ““preenchimento ”A propriedade é usada para dar espaço ao redor do conteúdo do texto. ““tamanho da fonte ”Define o tamanho da fonte. ““cursor ”Especifica o ponteiro do mouse no mouse. Estilo “contêiner” div
.contêiner Aqui:
““largura máxima ”Propriedade define a largura máxima do elemento. ““margem ”A propriedade é utilizada para dar espaço ao redor do elemento. Tag de "cabeçalho" de estilo
cabeçalho De acordo com o snippet de código fornecido:
““Top-top ”É utilizado para dar espaço no topo do conteúdo. ““Botting-Bottom ”Está definido como espaço na parte inferior do conteúdo. ““cor de fundo ”Está definido para aplicar a cor ao fundo do elemento. ““mostrar ”Especifica o comportamento da exibição. O valor flexível é usado para fazer um layout flexível. ““Justify-Content ”Colocará elementos flexíveis de acordo com o valor dado a ele. ““alinhado-itens ”Define o alinhamento do item dentro de um recipiente flexível. Estilo “cabeçalho
cabeçalho ul A lista não ordenada da etiqueta do cabeçalho está associada às seguintes propriedades:
““estilo de lista ”É usado para dar estilo à lista. No exemplo, definimos seu valor como “nenhum ”Para remover o sublinhado da lista. ““mostrar ”A propriedade é utilizada para especificar o comportamento de exibição das tags. O valor flexível é usado para fazer um layout flexível. Tag de estilo “A”
cabeçalho ul li a Os elementos âncora da etiqueta do cabeçalho são fornecidos com os seguintes estilos:
““decoração de texto ”A propriedade é usada para decorar o texto com diferentes estilos de linha. ““preenchimento ”É usado para dar espaço ao redor de cada etiqueta de âncora. ““cor ”A propriedade está definida para aplicar a cor no texto da tag âncora. Estilo “banner” div
.banner A div com nome “bandeira ”Está estilizado da seguinte maneira:
““imagem de fundo ”Esta propriedade recebe o URL da imagem de fundo. ““posição de fundo ”É a posição da imagem como o centro. ““fundo de repetição ”Propriedade define a imagem como nenhuma repetição. ““tamanho de fundo ”É definido como a capa, o que significa que a imagem se encaixa na div. ““Top-top ”Dá espaço ao topo do conteúdo. ““Botting-Bottom ”Dá espaço na parte inferior do conteúdo. Estilo “h2” tag de banner div
.banner h2 O
A tag do banner div é aplicada com estas propriedades:
““cor ”Propriedade define a cor do texto. ““alinhamento de texto ”Com o Centro de Valor, definirá o texto como o centro alinhado. ““tamanho da fonte ”Propriedade define o tamanho da fonte do elemento. Estilo “aboutus” div
.sobre nós O ".sobre nós ”É usado para acessar a classe sobreus. O "alinhamento de texto ”Propriedade está definida o texto do elemento no centro.
Tags de estilo “H2” e “P” de “emerus” div
.sobreus h2,Então, defina o “Botting-Bottom "Propriedade como"20px ”Para ambos
e
Tag.
Estilo “nossos serviços” div
.Nossos serviços A div “OurServices” é fornecida com “cor de fundo " como "#efefef ”.
Div "Serviços" de estilo
.Nossos serviços .Serviços A criança div “Serviços "Do pai divino"OurSevices ”Está estilizado com as propriedades descritas abaixo:
““mostrar ”A propriedade é utilizada para definir o comportamento da exibição. O valor flexível faz um layout flexível. ““Justify-Content ”Propriedade alinha horizontalmente os itens do elemento flexível. Estilo “serviço” div
.Nossos serviços .serviço O ".Nossos serviços .serviço ”Refere -se à criança div.“serviço "De Div Parent"Nossos serviços ”Div. Cada serviço é definido com o alinhamento de texto da propriedade com o Centro de Valor.
Elemento de "botão" de estilo
.botão OurServices A propriedade "margin-top ”É utilizado para definir o espaço em cima do elemento do botão.
Elemento de "rodapé" de estilo
ROONO A etiqueta do rodapé é estilizada da seguinte maneira:
““Top-top ”Está definido para dar espaço no topo do conteúdo do rodapé. ““Botting-Bottom ”Está definido para dar espaço na parte inferior do conteúdo do rodapé. ““cor de fundo ”Está definido para aplicar a cor na parte de trás do rodapé. ““cor ”Especifica a cor da fonte. ““alinhamento de texto ”Está definido como o centro. Etapa 5: salve o arquivo HTML e abra -o no navegador
Salve o arquivo HTML usando a combinação de chave “Ctrl+s "Ou salvar selecionando o"Salvar ”Opção do menu de arquivo no canto superior esquerdo do editor. Em seguida, clique com o botão direito do mouse na janela de trabalho do Código do Visual Studio e clique no “Aberto com servidor ao vivo ”Opção do menu suspenso, como mostrado abaixo:
Observação: Se você não instalou a extensão do servidor ao vivo, siga nossa outra postagem dedicada.
Como você pode ver, criamos e estilizamos com sucesso nosso site:
Isso se tratava de criar um site com código HTML e CSS.
Conclusão
A linguagem de marcação de hipertexto é o padrão para fazer páginas da web. Existem centenas de elementos usados em arquivos HTML. Cada elemento é utilizado para algumas tarefas específicas para o aplicativo da web. Para escrever o código HTML, é essencial usar um editor de texto como texto sublime, código do Visual Studio, bloco de notas ++ ou mais. Este artigo explicou com sucesso o procedimento passo a passo para criar um site HTML no código do Visual Studio.
