Este tutorial descreve um site usando HTML e CSS, abrangendo todas as fases: desenvolvimento de sites,
a criação de uma conta em uma hospedagem gratuita e, finalmente, fazer upload de arquivos nosso site em que a hospedagem, hospedagem gratuita é um método rápido de colocar um website nosso on-line dentro de alguns minutos, a desvantagem deste método é que vamos ter alguns anúncios exibidos em todos os momentos na parte superior (cabeçalho acima).
Qualquer pessoa que queira abrir um site, você precisa saber HTML e CSS, não precisa ser um especialista em HTML (HYper Text MArkupe Lidioma), mas algumas informações de código são absolutamente essenciais para entender como essas coisas funcionam.
Mesmo se você construir um site, você ainda tem que não tem idéia do que está acontecendo através desses arquivos vai exigir a correção periódica de erros ou a realização de mudanças.
Muitas pessoas fogem do código, muitas comparam o código aos hieróglifos, alguém nunca disse: "O CÓDIGO É POESIA", ele estava certo, quando você vê que algo nasce de uma série de linhas de código, você se sente maravilhoso, constrói um mundo virtual apenas com teclado e mouse.
Usamos aplicativos criados por empresas de software por um longo tempo, fizemos apenas a operação do computador, é hora de programar, na verdade não é uma linguagem de programação, é uma "linguagem de marcação", mas vamos nos referir a é como uma linguagem de programação, porque soa uma "linguagem de marcação" bem estranha, o HTML é uma das linguagens de programação mais fáceis usadas atualmente, vemos HTML em qualquer site, muitos softwares possuem eles componentes do HTML, essa linguagem de programação está em todo lugar, é hora de aprender.
A primeira vez pode ser menos assustador, mas se você for cuidadoso do que você vai entender imediatamente que nem tudo é tão difícil coisas simples e belas, criamos algo com nossas mãos, que é a coisa mais importante.
Vamos aprender o básico, então nós aprender a digitar um texto em uma página web, em seguida, vamos organizar e vai colorir o texto, usamos uma CSS estilo de página (cascading style sheets) com o qual vamos colocar todos os elementos da página HTML em tudo para que você vai colocar no nosso site é feito para olhar como uma peça.
Você vai aprender técnicas simples, HTML básico e CSS, embora estas são coisas básicas em HTML e CSS, irá criar uma visão agradável.
Para este tutorial, você deve cuidadosamente armado com paciência, este tutorial é aquele que podemos dar ao luxo de levar pouco, se retroceder alguns segundos você pode perder algo muito importante e você vai ver depois que não iria entrar em vigor, a concentração A informação é extremamente alta e é por isso que eu peço que você seja muito, muito cuidado.
Após este tutorial, eu diria mesmo curso intensivo, você terá uma idéia melhor do que HTML e CSS, você pode controlar o código que você bem entender completamente um documento sentimento HTML HTML que não é apenas uma linha de heroglife dissipará, você sabe o que é quando você olha para um documento ou CSS HTML.
Aprendemos sobre as tags (etiquetas), temos aqui alguns exemplos de tags (etiquetas) que você pode usar em um documento HTML, não se preocupe, não há necessidade de armazená-los todos, só precisa aprender o básico na primeira tabela o resto pode ser encontrado aqui no site ou na internet quando você precisar deles.
Mesmo as tabelas são ordenadas essas marcas, são feitas usando HTML.
Elementos básicos (tags).
| Definir um formato de arquivo da Web | |
| Cabeçalho do Documento | |
| Documento Tilul | |
| O corpo da página HTML | |
| BGCOLOR = cor | A cor de fundo da página |
| TEXT =cor | Página de texto Cor |
| = Linkcor | Unvisited cor do link da página |
| Vlink =cor | Cor do link visitado da página |
| ALINK =cor | Ligação cor durante o clique do usuário exacutat |
| BACKGROUND = url | Imagem de fundo para a página |
| Parágrafo | |
| <Hn> <Hn> | Nível subtítulo do documento (n = 1-6) |
| Especifica os atributos de texto enquadradas | |
| SIZE =n | O tamanho do texto é 1-7 |
| ENFRENTAR ="A, b" | Especifica a fonte: aSe estiver disponível, ou b |
| COLOR =s | Cor do texto: um nome de cor ou valor RGB |
| Newline | |
| Informações pré-formatado | |
| HTML Comenatriu | |
| Material atravessa a página | |
| Régua horizontal | |
| SIZE =x | Régua altura em pixels |
| WIDTH =x | Largura Régua em pixels ou porcentagens |
| Noshade | Desativar sombra exibição régua horizontal |
| ALIGN =x | Alinhe régua horizontal na página (esquerda, centro, direita) |
| COLOR =x | A cor da régua horizontal (IE only) |
| Marca Anchor | |
| HREF =url | Hypertext Referência |
| HREF =# Name | A referência a uma âncora interna |
| Name =nome | Definição de âncoras internas |
Listas de elementos .
| Descrição definição | |
| Definição do tipo de lista | |
| Definição de prazo | |
| Lista de recursos | |
| <OL | Lista ordenada (numerada) |
| TYPE =tipo | Digite numeração. Valores possíveis: A, A, I, i, 1 |
| INICIAR =x | Número a partir da lista ordenada |
| <UL | Lista não ordenada (s) |
| TYPE =forma | Forma da marcação. Os valores possíveis: círculo, quadrado, disco. |
Elementos de formatação de caracteres .
| Colar o texto em negrito | |
| Colar o texto em itálico | |
| Colar o texto realçado | |
| Texto Minivan fonte | |
| Citação bibliogarfica | |
| Listagem de programa | |
| Estilo destaque lógicas | |
| Texto a partir do teclado | |
| Destaque lógica poderosa | |
| Programa ou variável | |
| <BASEFONT SIZE = n> | Especifica o tamanho de fonte padrão da página |
Elementos para quadros .
| Definindo a página escrita | |
| COLS =x | O número e tamanho relativo das colunas |
| ROWS =x | O número e as dimensões relativas das linhas |
| BORDER =x | Especifica o status "ativado" ou "desativado" para o quadro FRAMESET (1 ou 0) |
| Frameborder = x | Especifica o tamanho do quadro |
| Framespacing = x | A quantidade de espaço entre dois quadros adjacentes |
| A definição de um certo quadro | |
| SRC =url | Framework de código URL |
| Name =nome | Nome do quadro (usado em conjunto com TARGET = nome como parte da marca de âncora |
| Scrolling =SCRL | Definir opção possível bar derulare.Valori: on (ativado), off (desativado), auto (automático) |
| Frameborder =x | Borda em torno do tamanho do quadro |
| Marginheight =x | Espaço extra acima e abaixo de um determinado quadro |
| Marginwidth =x | Unidade de espaço adicional para a esquerda e para a direita de um determinado quadro |
| Seção da página exibida para usuários que não podem ver o quadro | |
| Estrutura interna (para (IE) | |
| SRC =url | Framework de código |
| Name =s | Janela Nome (útil para TARGET) |
| HEIGHT =x | Altura de embutidos |
| WIDTH =x | Largura da moldura embutido |
Itens para tabelas .
| Tabela HTML | |
| BORDER =x | Mesa Box |
| Cellpadding =x | Espaço adicional no interior das células de tabela |
| CellSpacing =x | Espaço extra entre as células da tabela |
| WIDTH =x | Largura imposta mesa |
| FRAME =valor | Ajuste fino da tabela |
| REGRAS =valor | Ajuste fino dos governantes tabela |
| CorDaBorda = cor | Especifica a cor da borda da tabela |
| BORDERCOLORLIGHT = cor | A cor mais clara das duas cores especificadas |
| BORDERCOLORDARK = cor | A cor mais escura das duas cores especificadas |
| ALIGN =esquerda | Alinhe a mesa no lado esquerdo da página eo texto flui lado direito |
| ALIGN =certo | Alinhe a tabela no lado direito da página, eo texto flui para a esquerda |
| Hspace =x | Unidade de espaço horizontal adicional em volta da mesa |
| Vspace =x | Unidade de espaço vertical adicional em torno da mesa |
| COLS =x | Especifica o número de colunas de um quadro |
| Define um conjunto de definições de coluna usando marcação | |
| <COL WIDTH =x> | Definir uma largura da coluna em pixels |
| Define o título da tabela | |
| Define o corpo da tabela | |
| Mesa linha | |
| BGCOLOR =cor | Especifica a cor de fundo para toda a linha |
| ALIGN =alinhamento | Alinhe as células na linha atual (esquerda, centro, direita) |
| A célula dos dados da tabela | |
| BGCOLOR =cor | Especifica a cor de fundo para os dados da célula |
| Colspan =x | Número de colunas que se estende sobre os dados actuais da célula |
| Rowspan =x | Número de linhas de dados, abrangendo a célula atual |
| ALIGN =alinhamento | Alinhando o tecido do possível célula date.Valori (esquerda, direita, centro) |
| Valign =alinhamento | Alinhamento vertical do date.Valori material celular possível: (superior, inferior, médio) |
| BACKGROUND =url | Especifique a imagem de fundo para a célula da tabela |
| Nowrap | Não permita que as linhas de separação de texto dentro de uma célula |
| ALIGN =baseline | Alinhe as células com dados de base ao texto adjacente |
| ALIGN =personagem | Alinha uma coluna a um caractere específico (o caractere padrão é ".") |
| ALIGN =justificar | Alinhe a borda da borda esquerda e direita do texto |
Adicionar elementos de imagem.
| <IMG | Marcação de imagens de entrada |
| SRC =url | O arquivo gráfico fonte |
| ALT =texto | O texto alternativo para exibir se necessário |
| ALIGN =alinhamento | Alinhamento de imagem na página. Valores possíveis: superior (top), médio (meio), inferior (parte inferior), à esquerda (à esquerda), direito (à direita) |
| HEIGHT =x | Altura da imagem (em pixels) |
| WIDTH =x | Largura da imagem |
| BORDER =x | A moldura em torno da imagem, quando ele é utilizado como uma hiperligação |
| Hspace =x | Espaço horizontal adicional ao redor da imagem (em pixels) |
| Vspace =x | Espaço vertical adicional ao redor da imagem (em pixels) |
Elementos formas.
| Formulário HTML ativo | |
| ACTION =url | Programa CGI no servidor que recebe os dados |
| METHOD =método | Como os dados são enviados para o servidor (GET ou POST) |
| <ENTRADA | Campo de texto ou outra entrada |
| TYPE =opção | Tipo de campo de entrada . Valores possíveis: texto, senha, caixa de seleção, oculto, arquivo, rádio, enviar, redefinir imagem. |
| Name =nome | O nome simbólico do campo de valor |
| VALUE =valor | Conteúdo padrão do campo de texto |
| Checked = opção | Botão / caixa marcada Padrão |
| SIZE =x | Número de caracteres em um campo de texto |
| SIZE =x | O número máximo de caracteres permitidos |
| Caixas de seleção Grupo | |
| Name =nome | O nome simbólico do campo de valor |
| SIZE =x | O número de itens de menu que são exibidos uma vez (default = 1) |
| MÚLTIPLO =x | Permite a seleção de vários itens de menu |
| <OPÇÃO | Escolha particular em um campo |
| VALUE =valor | O valor resultante das seleções no menu |
| Texto Acampamento reforço em várias linhas | |
| Name =nome | O nome simbólico do campo de valor |
| ROWS =x | Número de linhas na caixa de texto |
| COLS =x | Número de colunas (caracteres) por linha de caixa de texto |
| Formulário de participação em partes lógicas | |
| Nome associado um conjunto de campos (fieldset) | |
| ALIGN =s | Especifica o alinhamento da legenda (explicação) exibido (superior, inferior, esquerda, direita) |
| Tabindex =x | Especifica a ordem dos elementos quando o usuário pressiona a tecla Tab |
| ACCESKEY =c | Especifica que fornece tecla de atalho no teclado de um elemento particular |
| DEFICIENTES | Elemento está inativo, mas é exibida na tela |
| Readonly | Item é exibida no ecrã, mas não pode ser editado |
Elementos avançados.
| Informações específicas sobre os estilos de modelo | |
| TYPE =onda | O tipo de modelo de estilo. Geralmente "texto / css" |
| Normalmente inclui um script Javascript no webpage | |
| LANGUAGE =linguagem | A linguagem utilizada |
| EVENT =evento | Evento que desencadeia a execução de scripts específicos |
| PARA =numeobiect | Nome do objeto da página em que o script funciona |
Se você quiser conferir feitas em tutorial, você pode acessar o endereço: http://www.videotutorial.150m.com.
Recomendamos que você descompacte o arquivo anexado e estudar os três arquivos HTML ou arquivos CSS usando o Notepad + + ou outro programa para editar páginas da web, desta forma você pode fazer alterações cau pode até mesmo fazer anotações durante a mesma, você vai aprender html sem o seu conta.
Desejo-lhe uma agradável e recebê-lo nos seguintes tutoriais desta série e além.
Ver Comentários (333)
Muito bom, toneladas de informações neste tutorial.
Este tutorial pode ser chamado de: infusão de HTML e CSS.
Talvez você não começa a aprender em poucos meses você pode aprender aqui em uma hora ou assim, eu vi tudo isso antes de ser publicado e posso dizer que me impressionou informações citação pode caber em um tutorial.
Em um momento eu senti a necessidade de beber água, mesmo que eu só vi o tutorial, nem quero pensar, citações Dan bebeu água depois disso.
Há algo que não é para aprender HTML e / ou CSS após este tutorial.
Aoleu, o que venho tentando aprender há cerca de 3 meses, aparentemente não tenho tempo ...
Muito obrigado, eu assisti-lo com cuidado!
sim você está certo cristi mas estou decepcionado porque pensei que você faria o tutorial :( mas enfim bravo dan muito bom tutorial
Não é legal o que você disse e sinceramente digo isso, esse homem lutou por cerca de uma hora e meia para ensiná-lo a criar um site do zero e você diz que está desapontado porque ele não conseguiu. Você pode imaginar quanto trabalho o homem dedicou e quanto tempo perdeu para nos ensinar o básico de html e css, pense antes de abrir a boca que não seria adequado enviar trabalho e deixar outros comentários desnecessários, como você está decepcionado que ele não colocou, alguém criou este tutorial, obrigado que você tem onde aprender;)
O que você acha que a série sobre "Como criar um site" acabou.
No próximo tutorial vou ser eu.
Porque o que o próximo tutorial vou precisar para ser visto este tutorial feito por Dan.
O que eu apresento é diferente do tutorial eu percebi aza Dan, mas a informação será essencial para o bom entendimento das coisas.
Existem várias maneiras de publicar conteúdo na web, mas todos têm um denominador comum, HTML e CSS, sem eles você não pode fazer nada.
Oi Cristi, eu culpo uma série de php ou js?
Falamos sobre tudo, mas também PHP e JS local liga-se a HTML, sem o HTML não pode.
O PHP é usado mais para extrair dados de bancos de dados, as páginas da web ainda estão em HTML, se estamos falando de sites dinâmicos (php, dhtml, asp, jsp, cf) ou se estamos falando de um site estático, vamos usar HTML, nada pode ser feito sem ele.
Muitas pessoas cometem um grande erro "Não quero mais um site HTML, quero um site php dinâmico", é um grande erro, o HTML é usado em quase todos os lugares, se estamos falando de sites dinâmicos ou estáticos.
JS (Java Script) não é o mesmo com JSP (Java Server Pages) que depende de um servidor, sites de JS são usados para determinados scripts, sem necessidade de qualquer servidor, JS scripts podem funcionar em qualquer navegador, sem a necessidade componente de servidor, e neste tutorial, Dan usou uma série de scripts JS (galeria de fotos) para o material off usa JS, existem sites inteiros com JS vez são sites completos utilizando Java Server Pages, que é outra coisa, embora eles parecem o mesmo.
Eu sei que você começou a estudar o "código" há muito tempo, este tutorial é uma excelente ajuda, Dan fez uma coisa extraordinária com este tutorial, você nem percebe o quanto esse tutorial é valioso, no tutorial você tem quase todas as tags ) usado em HTML, você pode usá-los, principalmente porque cada um tem uma descrição.
Não deixe seu ALEX, quebrar o código, ele se baseia.
Confie em mim, você perde potencial NÃO!
wow muitas informações muito bem estruturadas para que qualquer um possa entender.Eu pessoalmente olhei para o tutorial apenas para descobrir algo novo e, à medida que o tutorial avançava, fiquei impressionado com a facilidade de criação de um site, não muito carregado e muito agradável de se ver. Parabéns por este tutorial, mas também por todos os outros. Estou ansioso pela próxima "infusão" (palavras de cristi) com informações.
Parabéns!! Muito bom tutorial, será uma Romênia cheia de web designers :) (espero !!)
quando é um tutorial dreamweaver? Ou não use dreamweaver dc em seus tutoriais?
Parabéns por todos os tutoriais ... você é o mais forte;)
Olá .. o tutorial é realmente ótimo, existem "toneladas" de informações .. e eu que acho que tive que aprender o html básico na página 98 'fazendo dezenas de testes tirados de livros da biblioteca porque não tinha net naquela época e agora eu posso assistir a um tutorial que explica tudo o que eu preciso saber .. é claro que eu evoluí :))) .. gostei do fato de que foi explicado passo a passo e que eles foram colocados no site todos os comandos básicos + um exemplo que pode ser trabalhado ... é claro que você sabe o que está fazendo, são verdadeiros professores !!
No entanto maioria das pessoas que trabalham no projeto web usando programas que fazem automaticamente as ordens ea minha pergunta é vai fazer um tutorial tal programa?
Sei que você criou este tutorial para entender os comandos e, assim, uma melhor compreensão dos programas de design da web ... mas ainda estou curioso para ver o que você continuará com esta série de tutoriais, porque há muita conversa sobre esse assunto, mesmo que alguns o considerem chato quando se trata de tutoriais como o de Dan, que felicito nesta ocasião pelo tutorial ...