Como criar seu próprio site

Um site básico pode ser criado usando o HyperText Markup Language (HTML). Os scripts podem ser escritos no Bloco de Notas ou em um documento de texto, dependendo do sistema operacional usado. As ferramentas básicas para criar um site começam com o uso de tags HTML e elementos HTML. Os primeiros costumam passar informações sobre a unidade do conteúdo e os últimos são usados para formatar ferramentas para a página da web. Durante a codificação, os atributos e valores HTML são usados para fornecer informações como posicionamento, altura etc. para o conteúdo. Além desses, é possível usar tags de cor, tags de imagem e tags de divisão HTML para criar uma página da web viva.

Como criar seu próprio site

O que é HTML?
Requisitos
- Exemplo 1:
Tags HTML
Elementos HTML
Tags HTML básicas para lembrar
- Exemplo 2
Atributos e valores de HTML
- Exemplo 3
Tags de cor
- Exemplo 4
Formatação de texto
- Exemplo 5
Tags de divisão HTML
- Exemplo 6
Tags de imagem
- Exemplo 7
Linkando Tags
- Exemplo 8
Tags de tabela
- Exemplo 9
Tags de quadro HTML
- Exemplo 10
Software WYSIWYG

Ao criar um site, muitas pessoas optam por obter ajuda de um web designer. No entanto, existem maneiras simples de aprender como criar um site básico e elas serão explicadas neste artigo.

O que é HTML?

Para criar um site, você precisará aprender o básico do HTML. HTML é o acrônimo para HyperText Markup Language, que é a linguagem de programação usada para criar documentos de hipertexto na World Wide Web. A linguagem é composta de um conjunto de códigos e símbolos que gerarão texto, imagens, sons, quadros e animações nas páginas do seu navegador.

Duas formas comuns de iniciar seu website são:

Criando seus próprios códigos em um editor de texto simples e salvando-os como um arquivo .htm
Usando o software gerador de HTML

Requisitos

Para aqueles que usam o Windows, comece abrindo um novo documento do Bloco de Notas .

Para aqueles que executam MAC, abra um novo documento SimpleText .

Para usuários do OSX, abra o TextEdit e faça as seguintes alterações:

1. Abra o menu "Format" e escolha "Texto Simples"

2. No menu "Text Edit", abra a janela "Preferences" e escolha a opção "Ignore rich text commands em arquivos HTML".

Exemplo 1:

Depois de ter seu documento em branco, você pode começar digitando:

Este é o título da sua página

Aqui é onde todo o seu conteúdo aparecerá

Nota:

1. Sempre salve seus documentos com uma extensão .htm ou html para exibi-los em seu navegador da web. (por exemplo, index.htm).

2. Para editar seu documento de origem, selecione a opção "Visualizar" na sua barra de ferramentas na janela do navegador e selecione "Origem".

3. Não se esqueça de salvar todas as alterações feitas no seu documento.

4. Para visualizar as modificações feitas no documento na janela do navegador, atualize a página usando a tecla F5.

Tags HTML

Uma tag HTML é definida como uma marcação adicionada em um documento HTML para fornecer mais informações sobre o conteúdo. Uma tag HTML é colocada entre colchetes e precisa de uma tag de fechamento. (por exemplo ).

Elementos HTML

Elementos são tags de marcação usadas para formatar algumas seções de uma página da web. Um exemplo de um elemento HTML é a tag, usada para negrito o texto exibido no navegador.

é usado para informar ao seu navegador que o arquivo é composto de dados codificados em HTML. é usado no final do documento para informar ao seu navegador que o conteúdo HTML termina aí.

contém a primeira parte do documento e é onde o título da sua página do navegador será encontrado. Também pode conter os comandos usados para formatar a exibição do seu navegador (por exemplo, chamadas CSS). é então usado para terminar esta seção. Esta parte não será exibida no seu navegador.

será usado para rotular seu website. é, portanto, usado para indicar o final desse comando.

define todo o conteúdo que será exibido no seu navegador.

Tags HTML básicas para lembrar

Cabeçalhos

Os cabeçalhos são usados para indicar o assunto do seguinte conteúdo na sua página da web. Em HTML, eles podem variar em tamanho, de

Parágrafos

Os parágrafos são usados para separar blocos de texto em sua página da web. Em HTML, eles são definidos com o

tag. Um parágrafo terá uma tag de abertura

e uma tag de fechamento

Esta seção definiu tags HTML

Quebras de linha

Em HTML, as quebras de linha NÃO exigem uma tag de fechamento. Assim, eles são simplesmente definidos com o

tag.

Esta seção definiu tags HTML

Comentários

Comentários são inseridos em uma página HTML para localizar as diferentes seções em uma página da Web por seu designer. Eles são definidos com o tag. As tags de comentário não são exibidas no navegador e, portanto, podem ser usadas em qualquer lugar do documento sem afetar o formato da página da Web.

Exemplo 2

Tudo sobre HTML

HTML é o acrônimo para HyperText Markup Language

Atributos e valores de HTML

Atributos HTML são informações adicionadas aos elementos e usadas para incluir uma característica específica nos elementos HTML. Os atributos HTML são sempre escritos em conjunto com um valor (por exemplo, name = "value" ) e são colocados na tag de início de um elemento HTML.

Por exemplo, se você quiser que o cabeçalho seja colocado no centro da página em vez de ser exibido à esquerda por padrão, adicione o atributo align à tag:

HTML é o acrônimo para HyperText Markup Language

Tags de cor

As tags de cor permitem modificar a cor do texto exibido na janela do navegador. é um exemplo de como modificar a cor do texto se você desejar.

Em HTML, você também pode usar códigos de cores para obter cores específicas usando códigos hexadecimais. Os chamados trigêmeos hexadecimais correspondem às cores vermelho, verde e azul (RGB). Assim, a tag de cor em hexadecimal será algo como . Você pode obter os códigos e nomes de cores seguindo este link: //www.computerhope.com/htmcolor.htm

Você também pode usar tags de cor para modificar a cor do plano de fundo do seu site adicionando o atributo BGCOLOR . Conseqüentemente, mudará a cor de fundo de seu branco padrão.

Exemplo 4

Tudo sobre HTML

HTML é o acrônimo para HyperText Markup Language

Nota:

1. É aconselhável não escolher cores marcantes como amarelo ou rosa para o seu texto, uma vez que estas cores tendem a ser perturbadoras para os olhos.

2. Além disso, tente usar um máximo de 4 tons de cores ligeiramente correspondentes que correspondam à atmosfera do seu site para um melhor resultado de harmonização.

3. Não faça combinações de cores estranhas como texto rosa em um fundo azul para sites formais, pois parecerá estranho.

Formatação de texto

As tags de formatação de texto permitem que você modifique sua exibição de texto na janela do navegador. Por exemplo, para negrito um texto, você pode usar o tag. (por exemplo, este texto terá uma fonte em negrito ). Abaixo está a lista de tags comuns de formatação de texto que você pode usar para alterar sua exibição de texto:

1. Tag em negrito

Este texto estará em negrito

2. Tag Itálico

Este texto estará em itálico

3. Marca de sublinhado

Este texto será sublinhado

4. Enfatize Tag

Isso enfatizará seu texto

5. Tag Forte

Este texto será forte

6. Tag Grande

Isso definirá o texto grande

7. Tag Pequeno

Isso definirá texto pequeno

8. Tag Subscript

_{Este texto será subscrito}

9. Tag Sobrescrito

Este texto será sobrescrito

10. Tag do Centro

Este texto será centrado

11. Tag Esquerda

Este texto será exibido no lado esquerdo da tela

12. Tag da Direita

Este texto será exibido no lado direito da tela

13. Tag de lista não ordenada

Esta é uma lista não ordenada

Esta é uma lista não ordenada

14. Tag da Lista Ordenada

Este é o número 1 da minha lista

Este é o número 2 na minha lista

Nota:

1. Essas tags também podem ser combinadas. Se você quiser um texto em negrito sublinhado, você pode usar Este texto será negrito e sublinhado

2. No entanto, sempre feche a primeira tag que você abriu por último. No exemplo acima, o foi aberto PRIMEIRO, antes do tag, mas foi fechado em LAST.

Exemplo 5

Tudo sobre HTML

HTML é o acrônimo para HyperText Markup Language

A linguagem é composta de um conjunto de códigos e símbolos que irão gerar:

texto,

imagens,

sons

quadros

animação nas páginas do seu navegador.

Duas formas comuns de iniciar seu website são:

para criar seus próprios códigos em um editor de texto simples e salvá-los como um arquivo .htm. ou

use um software gerador de HTML.

Tags de divisão HTML

Regra Horizontal

As regras horizontais são usadas para dividir ou subdividir seções da sua página da web. o

tag é usada para criar uma linha horizontal e pode ser alterada para criar diferentes tipos de linhas, modificando seu tamanho, cor ou largura.

Por exemplo

Linha sólida

tag é usada para criar uma linha sólida. Ele se altera ligeiramente a partir da tag de regra horizontal, pois produz a linha sem o recorte 3D gerado pela

tag.

Exemplo 6

Tudo sobre HTML

HTML é o acrônimo para HyperText Markup Language

A linguagem é composta de um conjunto de códigos e símbolos que irão gerar:

texto,

imagens,

sons

quadros

animação nas páginas do seu navegador.

Duas formas comuns de iniciar seu website são:

para criar seus próprios códigos em um editor de texto simples e salvá-los como um arquivo .htm. ou

use um software gerador de HTML.

Tags de imagem

Documentos HTML permitem inserir imagens usando tags de imagem. Você pode navegar em uma imagem de um URL on-line ou de seu próprio computador. A tag de imagem significa "fonte de imagem"; Portanto, o caminho da imagem deve ser definido após o atributo. Se a imagem for encontrada na mesma pasta que o documento de origem, não será necessário inserir o diretório de caminho inteiro.

Por exemplo

ou ou

Tag de alinhamento

Mais uma vez, você pode usar o atributo ALINHAR para exibir a imagem no centro, no lado direito ou no lado esquerdo do navegador.

Eg1

Nota: No entanto, pode acontecer que o seu navegador não suporte esta tag. Você pode, portanto, usar a tag antes da tag de imagem para centralizar sua imagem no navegador.

Eg2

Tamanho da imagem

O tamanho da sua imagem exibida pode ser modificado usando o atributo WIDTH e HEIGHT. Você pode usar porcentagem ou pixels para dimensionar sua imagem.

Eg1

Eg2

Borda da imagem

Se você quiser inserir uma borda em sua imagem, você pode usar o atributo BORDER para fazer isso.

Por exemplo

Espaço de Runaround

O espaço de contorno refere-se ao espaço vazio em torno da imagem. Esta é uma tag muito útil quando você tem texto em torno de sua foto. Ele é definido usando o atributo VSPACE para os lados superior e inferior e o atributo HSPACE é usado para os lados esquerdo e direito.

Por exemplo

Exemplo 7

Tudo sobre HTML

HTML é o acrônimo para HyperText Markup Language

A linguagem é composta de um conjunto de códigos e símbolos que irão gerar:

texto,

imagens,

sons

quadros

animação nas páginas do seu navegador.

Duas formas comuns de iniciar seu website são:

para criar seus próprios códigos em um editor de texto simples e salvá-los como um arquivo .htm. ou

use um software gerador de HTML.

Códigos de cor

Você pode usar códigos de cores hexadecimais fornecidos pela Theodora para criar sua própria atmosfera de site

Este é o exemplo que você tem com o atributo vspace e hspace

Linkando Tags

Em HTML, as tags de vinculação são usadas para saltar de uma seção da página para outra ou de uma página para outra. Eles são chamados de links internos, se permitirem que você pule de uma seção ou da página do seu próprio site para outra e do link externo quando abrirem uma nova janela do navegador em outro site. A principal vantagem de vincular tags é que elas permitem criar um site dinâmico em vez de criar uma página da Web de rolagem.

link externo

exibirá o "link de endereço da Web" como um hiperlink em sua página da Web e quando o usuário clicar no texto, ele carregará a página www.webaddress.com

Link Interno

Existem duas maneiras específicas de inserir um link interno:

1. Para saltar da página atual para outra página no mesmo site

2. Para saltar da seção atual da página para outra seção na mesma página.

Para poder saltar de uma seção para outra, você deve primeiro dar um nome à seção para que a tag possa localizá-la quando ela estiver sendo chamada. Por exemplo, se a seção referente a Links HTML precisar ser inserida na seção superior da página, logo acima do título "Links HTML", insira a tag . O valor "links" se referirá à seção que deve ser localizada; portanto, se uma seção da sua página da Web for baseada em gatos, insira a tag logo acima do cabeçalho dos gatos.

Após esse processo, você também deve inserir o link do qual deseja pular. Neste exemplo, se você quiser pular do topo da página para o local de "Links HTML" encontrado na parte inferior da página, insira Tags de vinculação . O texto com hiperlink "Linking Tags" aparecerá e quando o usuário clicar nele, saltará de sua localização atual para a seção indicada.

Exemplo 8

Tudo sobre HTML

Códigos de cor

Linkando Tags

HTML é o acrônimo para HyperText Markup Language

A linguagem é composta de um conjunto de códigos e símbolos que irão gerar:

texto,

imagens,

sons

quadros

animação nas páginas do seu navegador.

Duas formas comuns de iniciar seu website são:

para criar seus próprios códigos em um editor de texto simples e salvá-los como um arquivo .htm. ou

use um software gerador de HTML.

Códigos de cor

Você pode usar códigos de cores hexadecimais fornecidos pela Theodora para criar sua própria atmosfera de site

Este é o exemplo que você tem com o atributo vspace e hspace

Você pode encontrar uma útil para visitar o site da Microsoft, clicando neste link

Linkando Tags

Esta seção discutirá sobre a importância de vincular tags no seu site.

Nota:

Estes são apenas exemplos de como você pode fazer uso das tags de vinculação. É claro que você pode alterar a colocação deles para tornar seu site mais fácil de usar e atraente.

Janela de segmentação

A janela de destino carregará a página vinculada em outra janela do navegador para que o usuário possa permanecer na página atual do seu site e exibir o endereço com hiperlink em outro navegador.

Tags de tabela

Inserir tabelas em seu site pode ser muito útil para exibir as informações de maneira ordenada. Ele também permitirá que você manipule seus textos e gráficos com mais precisão.

A tag de abertura

é usado para informar ao seu navegador que a tabela na página começa lá e termina com o

tag. Você também pode modificar a cor, o tamanho e o tamanho da borda da sua tabela.

O tamanho da mesa pode ser alterado usando o

tag. Você pode usar os pixels ou a porcentagem para alterar o tamanho da tabela.

Você pode fazer uso da tag

por exemplo, para criar uma borda invisível no seu navegador.

tag é usada para criar uma lacuna de espaço entre o texto e a linha interna da borda da tabela.

tag é usada para inserir uma lacuna de espaço entre as linhas interna e externa das bordas da tabela.

Uma tabela é composta de células que são definidas pelas colunas e linhas dentro da tabela. Uma célula será o espaço onde seu conteúdo será inserido. A tag de coluna é definida como o

tags e as linhas são definidas como o eTag. Para modificar a largura da célula, você pode usar o e para alinhar uma coluna, insira a tag

tag. O tamanho pode ser definido na porcentagem ou no pixel.

Você também pode alinhar suas linhas e colunas adicionando o atributo ALIGN nas suas tags. Portanto, para alinhar uma linha específica, por exemplo, insira a tag

Para alinhar sua célula, você pode usar o atributo VALIGN .

colocará a célula no centro superior da sua página.

Para abranger uma coluna, você pode usar a tag

para definir o número de colunas que a célula deve abranger. Observe que o valor padrão é definido como 1.

Além disso, para estender uma célula a um número de linhas, use o

tag.

Exemplo 9

Tudo sobre HTML

Códigos de cor

Tags de tabela

HTML é o acrônimo para HyperText Markup Language

A linguagem é composta de um conjunto de códigos e símbolos que irão gerar:

texto,

imagens,

sons

quadros

animação nas páginas do seu navegador.

Duas formas comuns de iniciar seu website são:

para criar seus próprios códigos em um editor de texto simples e salvá-los como um arquivo .htm. ou

use um software gerador de HTML.

Códigos de cor

Você pode usar Códigos de Cores Hexadecimais fornecidos pela Theodora para criar sua própria atmosfera de site.

Mais texto pode ser adicionado aqui.

Tags de mesa

Esta seção lhe dará mais detalhes sobre tags de tabela

Título
Esta é outra parte do conteúdo
Coluna 1	Coluna 2	Coluna 3
Cell Spanning em 3 linhas (2ª e 3ª mescladas)	Cell Spanning em 2 linhas (1ª e 2ª célula mescladas)	1ª célula
		2ª célula
		3ª célula
	3ª célula	4ª célula

Tags de quadro HTML

Quadros HTML permitem que você crie janelas independentes dentro de uma página da web. Eles são muito úteis, pois permitem exibir mais de um documento em uma página da Web.

Para fazer uso dos quadros, você deve ter pelo menos dois arquivos .htm diferentes, um dos quais será denominado index.htm . O arquivo index.htm será onde todas as janelas serão exibidas. A tag de quadro é definida como e a tag é usada para definir o conjunto de quadros que estão sendo usados no arquivo index.htm.

Exemplo 10

Experimente as tags de quadro

irá configurar o tamanho das linhas que serão exibidas no seu navegador.

irá configurar o tamanho das colunas que serão exibidas no seu navegador.

o A tag nomeará o quadro e será usada para vinculá-los à janela principal.

tag será usada para definir uma borda para seus quadros. Configurar para 0 garantirá que seja compatível com todos os navegadores.

irá definir um espaço entre os quadros mais próximos.

irá definir o espaço de largura em ambos os lados dos quadros. O tamanho deve ser definido em pixels.

irá definir o tamanho da margem superior e inferior em pixels.

o A tag permite a barra de rolagem vertical ou horizontal no seu quadro. Seu valor deve ser definido como "yes", "no" ou "auto".

Software WYSIWYG

Existem programas de software chamados WYSIWYG (o que você vê é o que você obtém), que codificam para você, no entanto isso não deve impedi-lo de aprender um mínimo de conceitos html para evitar surpresas desagradáveis! Com este software, você coloca o texto e as imagens, e o software gera o código HTML correspondente simultaneamente. Também tornará o trabalho a inclusão de animações ou scripts mais fáceis. Existem, por exemplo:

Dreamweaver, não é livre, mas muito abrangente e fácil de usar com um tutorial bem desenhado

Editor de Photoshop GoLive

Para livre WYSIWYG, podemos mencionar: