Hostwinds Tutoriais
Resultados da busca por:
Índice
Como criar uma página de destino personalizada usando HTML e CSS
Tag: Web Site
Este guia aprenderá como criar a página básica de desembarque em construção usando HTML e CSS.
Para criar uma página de destino, você precisará ter um editor de texto, ou o fornecido no seu gerenciador de arquivos cPanel, notepad ++ ou qualquer editor de texto de sua escolha funcionará bem a seguir neste guia.Se você estiver usando um painel de controle, como o CPanel, você adicionará esses arquivos para o diretório Public_HTML ou a raiz do documento para o nome do seu domínio.Se você não estiver usando um painel de controle, provavelmente adicionaria esses arquivos ao seu / var / www / html, embora o local da raiz do documento do seu domínio possa variar.
Criando o arquivo do seu site
Vamos começar criando um arquivo index.html e abri-lo no seu editor de texto.
Por que o índice?
A maneira como o Apache é configurado em sua pasta de domínio (ou public_html), ele lê seu directorIndEx, como index.htm, index.html ou index.php se esses arquivos existirem e servirem esse arquivo como a página inicial da sua pasta.Se não houver um desses arquivos, ele mostrará uma listagem de índice.Você pode alterar seu índice de diretório através do seu arquivo .htaccess.
Seu HTML é essencialmente a estrutura da página do seu site, então você precisará ter certeza de que está configurado corretamente.
Para este exemplo, você precisará identificar o script, cabeçalho e corpo HTML.Você pode fazer isso usando as seguintes "tags"
<html>
<head></head>
<body></body>
</html>
As tags são como identificamos elementos diferentes em nosso documento HTML e geralmente vêm em pares.A maioria das tags terá um começo \ <> e uma extremidade \, algumas tags não terão a segunda tag e terminará com um /> Isso é chamado de 'elemento vazio', visto principalmente em links e imagens.
A tag principal
É aqui que você armazena os dados que não estão contentes, como metadados do site, o título do documento, o conjunto de caracteres, os estilos inline, os links de script e outras informações do META.Vamos usar duas tags diferentes em nossa seção de cabeça:
TAG TAG - Esta tag mudará o que é exibido na guia
Tag de link - É aqui que você anexaria qualquer estilo ou scripts externos.Nós estaremos usando isso para adicionar uma folha de estilo ao nosso site
The body Tag
É aqui que o conteúdo do seu site irá.Se quiséssemos, poderíamos adicionar testes diretamente.Por exemplo, se adicionarmos "Hello World!"Em nosso HTML, será assim:
<!DOCTYPE html>
<HTML>
<head></head>
<body>Hello World!!</body>
</HTML>
Esta é a aparência da página da web após adicionar este código e visitar seu nome de domínio com seu navegador:
Em seguida, vamos conectar a folha de estilo em seu HTML.Como mencionamos acima, você pode anexar uma folha de estilo adicionando vinculando sua folha de estilo à cabeça do seu documento HTML.Depois de terminar, deve ficar assim:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
</body>
</html>
Adicionar contêineres e conteúdo
Para ajudar a organizar melhor seu conteúdo, você pode usar tags para especificar objetos diferentes, como contêineres, imagens, cabeçalhos, etc. Você ligará para essas tags diferentes no final da sua folha.
Para este exemplo, eu estarei usando um recipiente div e
e \
Tag.
<!DOCTYPE html>
<html>
<head>
<title>Coming Soon</title>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
<div>
<h1>This Site is Under Construction</h1>
<p>Content Coming December 2018</p>
</div>
</body>
</html>
Esta é a aparência da página da web antes de adicionarmos na folha de estilo:
Adicionando estilo ao seu site
Crie e edite sua folha de estilo 'css.css'
Agora, vamos criar um arquivo .css.Isso deve corresponder ao nome do arquivo que você acima, então o nosso exemplo é CSS.CSS.Você pode ligar para os diferentes elementos que você rotulou por meio de tags em seu documento HTML em sua folha de estilo.
Neste exemplo, temos 4 elementos diferentes: corpo, div, h1 e p. Abaixo, podemos ver como você pode usar essas tags para alterar o plano de fundo, centralizá-lo e alterar o dimensionamento do texto. Também demonstraremos como adicionar uma sombra de texto para ajudar com clareza.
Aqui está nosso arquivo CSS.css:
body {
background-image:url('background-background-image-blue-sky-1054218.jpg');
background-size: 100%, 100%;
}
div {
font-family: verdana;
color:black;
text-align: center;
margin-top:250px;
}
h1{
text-align:center;
font-size: 75px;
margin:0px;
padding:0px;
text-shadow: 2px 1px 1px grey;
}
p{
font-size: 40px;
text-shadow: 1px 1px 3px lightgrey;
}
Há muitos atributos diferentes que você pode adicionar à sua folha de estilo. Neste artigo, apenas cobrimos algumas opções básicas.
Muitas propriedades diferentes exigem uma estrutura ligeiramente diferente, dependendo do que está mudando.
Teste seu site
Agora você pode conferir sua nova página de destino!Se você ainda não apontou seu domínio para sua hospedagem, você pode usar um site de teste, como hosts.cx ou seu endereço IP dedicado para visualizar seu site.
Escrito por Hostwinds Team / novembro 24, 2018