Aprenda a falar "internet": o seu guia para xhtml

Bem-vindo ao mundo do XHTML - Extensible Hypertext Markup Language - uma linguagem de marcação (semelhante ao de programação) que permite a qualquer um construir páginas web com muitas funções diferentes. Em muitos aspectos, é o idioma principal da Internet.

Então, por que nos preocupar?

Bem, não que você sempre quis ter seu próprio site? Ou fazer o seu próprio jogo? O papel deste guia é dar-lhe um gosto deste mundo poderoso. Se você tem alguma experiência de programação anterior, então você vai achar isso mais fácil, é claro, do que se você está apenas começando sua aventura de programação. De qualquer maneira, espero que explicar isso para até mesmo um novato pode entender.

Nós nos preocupamos com xHTML porque é um forte ponto de partida para aprender os blocos de construção básicos da web. sites de redes sociais como Facebook, MySpace e Twitter usar outro (server-side) linguagem de programação chamada PHP, mas é uma boa idéia para compreender os conceitos básicos antes de mergulhar de cabeça no mundo da programação. Este guia é sobre o básico.

Se você quiser saber mais sobre como a Internet funciona ou talvez como redes de computadores trabalhar com todo este material técnico ou mesmo apenas como os computadores podem ser construído, em seguida, tente estas grandes guias de seus amigos em MakeUseOf:

//makeuseof.com/pages/the-guide-build-your-own-pc

//makeuseof.com/pages/easy-guide-computer-networks

//makeuseof.com/pages/guide-file-sharing-networks

//makeuseof.com/pages/download-the-ultimate-windows-7-guide

//makeuseof.com/pages/download-how-the-internet-works

2. Introdução ao xHTML

Neste capítulo, você aprenderá como criar e personalizar sites em muitas maneiras diferentes, incluindo aprender a:

• Adicione imagens para páginas da web.

• Criar e usar hiperlinks para navegar em páginas Web.

• Configure listas de informações usando pontos de ponto e tal.

• Criar tabelas com linhas e colunas de dados aleatórios e ser capaz de controlar a formatação das referidas tabelas.

• Criar e usar formas que você pode realmente ter alguma interação com.

• Crie páginas Web acessíveis aos motores de busca.

Tudo isso será feito com programação XHTML. Não acredita? Leia. Você ficaria surpreso com o quanto você pode aprender com um pequeno guia tal.

Antes de realmente entrar na parte “codificação” deste guia, você vai precisar de algum software para usar de modo que você pode editar, testar e basicamente todo desenvolver seus programas. Ir para dreamspark.com e obter um dos seguintes programas de graça, supondo que você é um estudante:

• Microsoft Visual Studio 2010

• Expression Studio 4

Se você não for um estudante, você também pode usar Notepad ++, que você pode facilmente começar a partir notepad-plus-plus.org

Depois de conseguir um dos programas e instalá-lo, então você pode começar a sua experiência xHTML.

Você pode estar usando um Mac ou Linux em vez do Windows- você precisa encontrar um editor de texto que funciona para você nesse caso. Tente encontrar um que mostra a sua contagem de linha e código de cores para você.

• //makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/Leafpad - Um editor de texto Ultra-Leve [Linux]Leafpad - Um editor de texto Ultra-Leve [Linux]consulte Mais informação

• //makeuseof.com/tag/geany-great-lightweight-code-editor-linux/

Se você preferir não baixar quaisquer ferramentas dedicadas você ainda pode usar um editor de texto como Bloco de anotações ou Prancheta. No entanto, os programas acima são muito melhores ferramentas para testes e concepção, bem como ajudá-lo com sua codificação como ele solicitará que você se você cometer um erro ou se você está tentando lembrar a palavra correta para usar. Simples é melhor, certo? Eu pessoalmente uso Notepad ++ e Microsoft Visual Studio, embora eu tenha ouvido falar muitas coisas sobre Expression Studio 4. Você vai ter que decidir o que você mais gosta, mas todos eles trabalham muito bem.

NOTA: Para testar um site criado a partir de bloco de notas ou Wordpad:

Com o arquivo aberto, clique em Arquivo gt; gt; Salvar como
o que é xhtml
No final do nome do arquivo digitado.html e clique Salve 

Abra o arquivo recém-salvo (ele vai, aberta no seu navegador de Internet padrão)

2.1 Conhecer “o mundo”

Tudo bem, aqui está o início da viagem. Vamos começar com apenas colocando algo na tela neste Web page. Primeiro você precisa saber o que estamos. código XHTML usa início e tags de fim de resolver o que está acontecendo com cada elemento da página.

Aqui está um exemplo de uma marca de início:

Aqui está um exemplo de uma tag final:

Veja a diferença? Um deles tem o nome do elemento entre colchetes pontudos e o outro é o mesmo, mas tem uma barra antes do nome do elemento.

IMPORTANTE: É necessário fechar uma tag depois de abri-lo em algum momento no código. Também tags devem ser aninhados, isto é, o que significa que você não pode fazer o seguinte:

- deveria ser . Veja como as marcas se encaixam uns dentro dos outros? Pense neles como caixas: você não pode colocar algo sólido em uma caixa e meia.

A melhor maneira de conhecer como programar é de realmente fazê-lo, a teoria de modo suficiente. Só por um ponto de referência, eu estou indo para rotular cada linha de código com um número para que eu possa explicar linha por linha o que está acontecendo.
o que é xhtml
Na linha 1 já afirmei o código html e na linha 5 Tenho terminou. Dentro de tag é a , e no interior da há um número (linha 3,

). Se você abrir esta em um navegador da web, em seguida, você verá o seguinte se deparar com a tela:
o que é xhtml
Se você quiser alterar o título da página do ponto de vista (. Ex firstpage.html) do navegador, então você pode facilmente adicionar a seguinte linha de código:

Video: 9 Segredos Para Aprender Inglês | Mairo Vergara

Insira o título aqui

Isso fará com que sua página olhar mais profissional.

2.2 A partir do e trabalhar para baixo a

Na maioria dos casos, dentro do tag há um e uma .
o é geralmente usado para scripting em CSS (Seção 3) e javascript (explicado em um próximo manual), enquanto que o é geralmente o conteúdo da página.

Alguns conteúdos podem ser alterados usando o script no , mas o geralmente é o conteúdo que é imutável na página. Um exemplo seria um curto discurso sobre o site que você está visitando.

Você pode fazer alterações para a formatação do conteúdo usando CSS (Seção 3) no . No entanto, você também pode fazer alterações para a formatação no .
Um conjunto comumente usado de tags que são usados no corpo são as fontes de cabeçalho. Estas fontes de cabeçalho variam em tamanho e força / coragem. Basta ver por si mesmo a seguir:
programação xhtml

2.3 É a sua imagem vale por mil palavras? - Imagens

Até agora, nós só falamos sobre texto e que ele pode fazer em um site, mas ainda há mais. Quer fazer o seu site olhar ainda mais atraente do que fontes apenas fantasia? Tente obter algumas boas imagens para fazer o seu site realmente dar ao público algo para olhar. Tenha cuidado com as leis de copyright though- melhor para tirar suas próprias fotos, se você pretende colocar seu site na Internet.

Você pode precisar usar o Photoshop ou algumas habilidades de imagem digital para criar uma grande imagem ou talvez melhorar a sua própria imagem e torná-la ainda mais incrível. Experimente estas guias para algumas ótimas dicas e insight:

• //makeuseof.com/pages/download-idiot-guide-photoshop

• //makeuseof.com/pages/guide-to-digital-photography

Os formatos de imagem mais populares são os seguintes:

• GIF Format = Graphics Interchange

• JPEG = Joint Photographic Experts Group

• PNG = Portable Network Gráficos

Dê uma olhada no código abaixo e eu vou explicar seguinte o que meios- isto é, como adicionar imagens em sua página.
programação xhtml

Como foi ensinado nas seções anteriores nós sempre começar com o e as marcas co. Em seguida, o tag é aberta na linha 5. Vamos pular para baixo para as coisas importantes ...

Após o parágrafo que está sendo aberto na linha 9 é neste ponto que as imagens são inseridas para o site. Para adicionar foto / imagem de que você deve usar começar com. Em seguida, você precisa para sugerir onde o arquivo está. Normalmente você iria tentar e ter esse arquivo na mesma pasta que o website arquivos mais você terá que digitar o caminho da pasta que ele existe. No caso acima eu usei . Isto significa que a fonte (SRC) do quadro reside na mesma pasta eo nome do arquivo de imagem é picture.jpg. Fácil né?

Você não tem que adicionar algo mais do que para criar uma imagem com uma alt propriedade, mas você pode adicionar propriedades a ele para fazer algumas alterações.

Também conhecido como texto alternativo, o valor da propriedade é exibido quando você passa o mouse sobre a imagem.

Você pode notar que na linha 10 eu comecei a tag com e terminou com / Gt;. Esta é outra maneira de abertura e fechamento. Esta é a maneira usual de criar imagens, porque você pode escolher as diferentes propriedades da imagem, como a largura e altura, como mostrado no exemplo acima.

Em linhas 11 e 12 uma outra imagem é inserido mas este está a utilizar outro método para a abertura e fechamento. Linha 10 cria a imagem em um uso muito mais puro moda- que em vez do método nas linhas 11 e 12.

2.4 hiperlinks onde eles podem ir?

2.4.1 Movendo-se “o mundo”

Quer mostrar a seus amigos alguns sites interessantes sobre o seu site, mas não sabe como? Você veio ao lugar certo, continue a ler ...

Ter um olhar para o código abaixo e veja se você pode adivinhar o que estou fazendo antes de eu explicar.
programação xhtml
É isso mesmo, estou criando hiperlinks para alguns grandes e úteis sites. Basicamente a hiperligação para uma determinada página web que tem um endereço web que você simplesmente usar a sintaxe a seguir:

[O que você quer hyperlink]

Não parece muito difícil, não é? Você poderia facilmente basta colocar texto lá como o código de exemplo acima. No entanto, não há nenhuma razão para que você não poderia usar algo mais como uma imagem. Só por um pouco de informação extra: a URL é um Uniform Resource Locator, basicamente, o endereço web.

2.4.2 Pictures lembrá-lo de onde você está e levá-lo lá novamente

Aqui está um exemplo de como usar uma imagem como um hiperlink:

Tenho certeza que se você está leia as partes anteriores desta seção que você soltar que este é simplesmente misturando criando imagens e hiperlinks. A sintaxe é definido para ter a hyperlinking do lado de fora e a imagem do lado de dentro, pelo que a colocação de uma hiperligação da imagem inserida.

2.4.3 Você tem mail - Hyperlinking para um endereço de e-mail

Isto é simplesmente uma repetição da última parte, mas se você não tem prestado atenção que muito em seguida, basta ter um olhar para o código abaixo:

Em vez de usar um URL (por exemplo http://something.com.) Aqui eu estou usando um endereço de e-mail que envolve colocar a seguinte sintaxe após o sinal de igual:

“Mailto: [youremailaddress]”

Linha 10 é o exemplo básico deste conceito. Então, quem você vai enviar e-mail? Ghostbusters!

2.4.4 Começar em torno de seu mundo - Hyperlinking Interno

Agora você pode ver como você iria ficar em torno de seu próprio site. Isto é feito simplesmente usando seu nome de arquivo como o URL. Portanto, você pode ter uma configuração de sites como é mostrado no diagrama abaixo. A sintaxe que você estaria usando seria algo como isto:

Próxima página

2.5 É você especial? Estes personagens são ...

Quando você digita informações que vai aparecer no site como conteúdo, então você pode precisar para colocar em algo como um símbolo, como o símbolo de copyright: © ou talvez um menor ou maior do que o símbolo. Mas desde que os símbolos normais são usados pela sintaxe de codificação, então tinha que haver outra maneira de obter passado este pequeno obstáculo, e a solução foi usar um e comercial (&.) E depois de um código curto depois para dizer ao computador o símbolo para colocar em Abaixo está uma tabela com alguns exemplos de caracteres especiais de codificação:

Por exemplo, você poderia dizer:

tem <- seis linhas na tabela acima, mas >-2 linhas

tem lt; 6 filas no quadro anterior, mas gt; 2 linhas

Se você quer uma lista maior dos caracteres especiais, em seguida, visite o seguinte site: w3.org/TR/REC-html40/shml/entities.html

2,6 listas, listas e mais listas

Certo agora vamos ter que organizar algumas coisas, como uma lista de compras. Existem dois tipos de listas. Eles são o:

• Lista Ordenada (números, alfabetos, numerais romanos)

• Lista não ordenada (pontos de bala)

Para uma lista ordenada você usaria os seguintes tags =

Para uma lista desordenada você usaria os seguintes tags =

Por exemplo:

No exemplo acima, eu incluído ambos os tipos de lista sem ordem e ordenada. Mas você notou que mais eu fiz? Eu também incluiu uma técnica chamada Listas aninhadas. Estas listas aninhadas pode ser usado para representar relações hierárquicas, como a lista de ingredientes no Obter Ingredientes etapa da receita acima.

Você pode ver que eu comecei a lista inteira como uma lista ordenada na Linha 10 e terminou na Linha 23. Entre você veria o

e marcas que tenho usado. estes denote lista de itens. Os itens da lista são as palavras que aparecem como em Linha 21: Cozinhe o molho
. As palavras Cozinhe o molho iria aparecer ao lado do número 5, uma vez que é o quinto item da lista em uma lista ordenada.

Se você quer ir para o próximo nível hierárquico de pontos de pontos ou números, em seguida, ninho dentro de si como este:

2.7 Tabelas ... Não, não matemática

É este tão difícil como suas tabelas de multiplicação? Claro que não, se você vai fazer sobre isso da maneira certa. Se você está apenas começando com este conceito e eu supor que você é, em seguida, geralmente é melhor para desenhar a tabela que você quer fazer em um pedaço de papel como eu fiz abaixo:

Agora olhar para ele no código abaixo:

Agora misturá-los juntos e o visor abaixo deve ajudar a compreender como a tabela está estruturada:

UMA

ou muitas tabelas também pode ser útil como quadros em páginas da web, um para o menu, um para o conteúdo e uma para o cabeçalho.

e negrito a primeira e última fileira, respectivamente, para chamar mais atenção para essas partes da tabela. A maioria das pessoas iria olhar para o total no rodapé da tabela primeira à direita?

é os dados da tabela nas linhas da tabela.

é as linhas da tabela que começam e terminam em cada linha de código para o asseio. é bom ter certeza de que sua mesa não é apenas um conjunto de informações sem uma razão para isso existente.

2,8 formulários digitais (canetas de distância)

Ao navegar na net você terá que interagir com as páginas da web que você encontrar. Por exemplo, no makeuseof.com você precisa digitar o seu endereço de e-mail como circulados abaixo para assinar as atualizações do boletim de notícias e diários de MakeUseOf. Depois de inserir o seu endereço de e-mail você deve pressionar Junte-se e isso iria enviar as informações (seu email) na caixa de texto ao lado do botão, quer um banco de dados ou talvez um outro endereço de e-mail. formas são usados para fazer isso, que é o que você vai aprender neste capítulo.

Abaixo está um formulário que é usado para colocar apenas seu nome e clique em Enviar ou Claro:

Aqui está o código por trás dos bastidores, que vou explicar isso com mais detalhes em breve:

Em primeiro lugar a coisa mais importante no script acima é a linha 10. Este é o início do formulário. O método é geralmente tanto postar ou obter. bastante auto-explicativo, mas postar está enviando as informações em algum lugar para fazer um registro, como um endereço de e-mail ou banco de dados. Por exemplo: postar uma pergunta no Respostas MakeUseOf. Obter, por outro lado, envia as informações que você forneceu e retorna com informações de feedback, como um motor de busca, enviando as palavras-chave de busca e retornando com os resultados.

O bloco de codificação acima é um exemplo de um formulário de postagem em que você deve digitar o seu endereço de e-mail e seria enviado para a propriedade oculta com um endereço de e-mail depois de clicar no botão Enviar. o tag em linhas 19-21 cria a caixa de texto na página e dá-lhe os caracteres no máximo disponível para ser usado nesse campo.

Linhas 22-25 lugar a Submeter e Repor / Limpar botões na página abaixo da caixa de texto. o Restabelecer botão simplesmente exclui qualquer texto inserido na caixa de texto ou caixas nessa forma. o Enviar botão segue as instruções das partes ocultas da forma que são criados nas linhas 14 - 18. O tipo escondido normalmente assumir por algo automático ou uma parte de algo mais a ser utilizado na forma atual. Neste caso, é este último dando a postarinformações ed um destino, neste caso [email protected], com o conjunto de sujeitos, neste caso “Subscribe-mail”, e então redireciona para outra página, neste caso, a página principal ou “index.html”.

2,9 meta quê? Por quê?

Já se perguntou como motores de busca encontrar sites? Bem, basicamente é isso que eles usam: elementos meta. Os motores de busca geralmente catalogar sites seguindo links para páginas em sites que encontram. Estes elementos meta tem informações sobre a página sobre eles. Dê uma olhada no seguinte excerto de algum código para um exemplo:

Como você pode ver acima, as informações meta vai na tag e tem os tipos: palavras-chave e descrição. O conteúdo é a outra parte do meta-informação que é tanto as palavras-chave ou a descrição como mostrado no exemplo.

Video: Aprender inglês | Por onde começar?

3. Projete com CSS

A maioria das pessoas tempo que olham para guias como estes só acontecerá a gostar de jogar jogos de vídeo. CSS, contudo, não é Counter Strike Source, nem é um First Person Shooter (FPS) de todo. CSS é uma tecnologia que trabalha com XHTML e significa Cascading Style Sheets. XHTML é muito chato por conta própria, mas se você adicionar uma porção justa de CSS a formatação e apresentação de sua criação é muito mais interessante. Os autores podem fazer alterações em elementos em uma página web, tais como fontes, espaçamento, cores-isso é feito separadamente da estrutura do documento (cabeça, corpo, etc.- isso será explicado em capítulos posteriores). xHTML foi realmente concebido para especificar o conteúdo e estrutura de um documento. Não é como xHTML não poderia fazer alterações na formatação do conteúdo. No entanto, esta configuração é muito mais benéfico, pois ele pode ser controlado a partir de um único local, se necessário. Por exemplo, se o formato de um site é determinada inteiramente por uma folha de estilo em anexo, um web designer pode simplesmente colocar no lugar uma outra folha de estilo para alterar fortemente a apresentação do site.

3,1 estilos de dança inline

Como mencionado acima, esta seção é sobre formatação e estilos. Uma vez que existem muitas maneiras de mudar o estilo de seu conteúdo e página, eu pensei que seria bom começar com a técnica para a frente mais reta, que é Estilos inline. Isto é realizado, colocando o código na seção de propriedade de um guia que abrange o conteúdo. Como isso:

Som muito difícil? Deixe-me dar um exemplo:

Nota: A cor é soletrado cor quando se utiliza este código desde que foi criado em algum lugar não tão fria como a Austrália ou Canadá- Espero que ele não incomodá-lo muito.

A informação em negrito no exemplo acima é a formatação que está a ser processado no conteúdo englobados no

tag. Para obter uma lista de códigos hexadecimais para cores diferentes simplesmente pesquisar no Google ou usar este site: codes.com/ // html-cor-: http

3.2 sheets inseridos (Cheat Sheets são win)

Usando os estilos inline na seção anterior pode ser uma dor, se você tem um grande site. Mas se você quiser usar os mesmos estilos uma e outra vez, então por que não usar um Folha de estilos incorporada? Esta alternativa permite que você crie seus próprios estilos no tag do código e, em seguida, você se referir a eles no código quando inserir algum conteúdo na sua página. Muito complicado? Aqui está um exemplo:

Veja como o texto muda de cor, tamanho ou formato dependendo da folha de estilo no topo? Isso não é muito difícil de entender certo?

Na linha 7, onde apresentamos o início da marcar com o tipo: text / css isso é chamado de MIME (Multipurpose Internet Mail Extensions) do tipo que descreve o conteúdo existente naquela tag / arquivo. documentos CSS sempre usar o texto MIME text / css. javascript, que será abordado em outro volume deste manual, utiliza o text / javascript Tipo de MIME. Existem muitos tipos MIME diferentes, porém os principais são javascript e CSS.

Linha 16 usa o .xtra classe que foi feito anteriormente. A forma como isto funciona é que ele acrescenta na xtra classe para qualquer estilo que ele é aberto em, pelo qual substituir quaisquer propriedades que o xtra classe usa. Por exemplo: se um estilo tem tamanho de fonte 20pt e é a cor verde, e uma classe é colocar mais nele que tem um tamanho diferente de fonte, em seguida, o novo tamanho da fonte irá substituir o antigo, mas o velho cor verde vai continuar como é.

3.3 Estilos em guerra (conflitantes estilos)

Existem três níveis de estilos e são eles:

• Usuário (ver o site)

• Autor (do site)

• User Agent (browser)

Os estilos se fundem de tal forma que cria a melhor configuração possível a partir da posição do usuário. O quadro seguinte mostra a hierarquia dos três níveis:

3,4 a partir de folhas de estilo para além (externo)

Você não acha que seria chato ter que escrever sempre a mesma folha de estilo em cada novo arquivo de codificação? Há uma solução: Folhas de estilo externas. Você pode criar outro arquivo com o objetivo de usá-lo para formatting- é um “.css" Arquivo. Para usá-lo em outro arquivo simplesmente digite o seguinte trecho:

Substituir nome do arquivo com o nome do seu arquivo CSS e lá vamos nós, eles estão ligados. Certifique-se de que seu arquivo CSS está na mesma pasta que o arquivo (s) ligado.
arquivo CSS Amostra:

Antes de continuar eu esqueceu de mencionar que em faz. Acima você verá na última linha que eu pus “ul ul {font-size: .8em-}” e isso significa que o tamanho da fonte será alterado para o parente 0,8 ou 80% do tamanho normal que o usuário quer que ele seja usando sua própria folha de estilo carregado em seu navegador. A maioria das pessoas não usam uma folha de estilo definida pelo usuário então não vamos preocupar com isso.

Video: Aprenda francês com diálogos # 20 dialogues

3.5 Posicionamento Elements (onde seguir?)

Quando você coloca uma imagem em uma página da web que você realmente não quer que apenas ir a qualquer lugar. você não gostaria de ter uma palavra a dizer isso? Bem, isso é como fazê-lo, bem, é realmente um exemplo e eu vou explicar isso em breve:

Em linhas 9 a 13 você vai notar que é uma classe com o ID como fgpic e tem algumas propriedades nela utilizadas. o posição propriedade é definida como absoluto o que significa que não importa como o usuário muda, a imagem vai ficar onde seu (o autor) coloca-lo com o seu código. o topo e esquerda Propriedades designar um ponto em que o elemento (por exemplo. de imagem / texto) vai ser colocado. o z-índice propriedade é uma ferramenta muito poderosa, porque ele define o nível de empilhamento, como mostrado na imagem abaixo:

Veja como a imagem de fundo é na parte de trás com valor z-index de 1 e o texto está na frente com valor z-index de 3, enquanto a imagem de primeiro plano está no meio, com um valor de índice z 2. Torna olhar muito bom, na verdade, se você jogar seus cartões para a direita

3.6 Mente seu entorno (fundo)

Sites ficar bem com fundos não é? Não seria muito chato se todos os sites só tinha um fundo branco ou preto? Por que não colocar uma imagem lá e mudar a cor um pouco? Existem algumas propriedades que você pode usar para fazer o fundo de sua página se destacar um pouco mais e dar a página de algum alargamento. Ter um olhar para o código a seguir e veja se você pode descobrir o que as propriedades destacadas fazer:

você deu certo o que ele faz? Basicamente, a imagem de fundo é o que vamos usar no fundo, o caminho da imagem vai na colchetes / parênteses como esta gt; url (AQUI). Você pode pensar nisso como tendo valor z-index 0, uma vez que é sempre bem no fundo da página. A posição da imagem de fundo foi definido para o canto inferior esquerdo, bastante auto-explicativo certo? Em seguida, a imagem de fundo tem sido repetida em todo o eixo x da página (repetir-x) e não só isso, mas é fixado à parte inferior da janela (background-attachment). Finalmente, a cor foi definida aleatoriamente para ser principalmente vermelho. Dê uma olhada abaixo para o resultado:

3.7 Qual o tamanho que você acha? (Dimensões de elementos / limites de texto)

Se você acha que é tudo o CSS tem para oferecer, você está muito enganado. regras CSS pode especificar as dimensões reais de cada elemento da página. Vamos pegar o exemplo de uma caixa de texto. Você quer escrever um texto que não percorrer todo o caminho em toda a tela, ou talvez fazer uma caixa de texto que pode ser rolado sem mover a página? Isto é onde você deve ser seguida. Veja a imagem abaixo para o que acabo de descrever:

Agora vamos dar uma olhada no código por trás das cenas:

Apenas uma nota menor: linha 6 adiciona uma borda marginal na parte inferior de cada uma das caixas de texto. Muito legal, né? Mas mais sobre fronteiras na próxima seção.

3.8 O que vai, volta (fronteiras)

Eu não acho que isso precisa de uma explicação, mas vou dar uma de qualquer maneira. Basicamente, você pode colocar bordas ao redor praticamente qualquer coisa por isso vamos dar uma olhada em como fazê-lo. Então, aqui está o código:

Aqui está o que o código faz, basicamente, uma variedade de fronteiras que cercam o nome / s do tipo de borda a ser utilizado. Tenha em mente que o oposto do sulco é cume eo oposto de inserção é início.

3,9 de flutuação e de fluxo Elementos

É geralmente muito chato apenas para ver rubrica, em seguida, texto, em seguida, indo em seguida texto. Apesar de não fazê-lo parecer um pouco mais agradável? Há um método que pode ser usado chamada flutuando, e agora eu vou mostrar-lhe como fazer exatamente isso. Flutuante permite mover um elemento para um lado da tela enquanto outro conteúdo no documento, então, flui ao redor do elemento flutuado. O elemento flutuou poderia ser uma imagem ou um título ou até mesmo um outro bloco de texto. Agora vamos ter um olhar para o que parece:

Muito bom para algumas situações bastante, agora este é o código que constrói este projeto:

Não é incrível o que você pode fazer se você acabou de encontrar o método certo?

3.10 Não deixe cair para baixo o menu - exemplo

Se você está pensando em criar um site, você vai provavelmente precisar de um menu, certo? Bem, este pode ser o lugar certo para que você vá se você quer algo que não é apenas sentado ali. elementos dinâmicos tornar as páginas olhar melhor e dar uma sensação melhor para o site em geral.

Um dos meus tipos favoritos de menus tem de ser um menu suspenso então agora vamos dar uma olhada em como fazer um usando CSS. Confira o código abaixo:

Eu sei que isso parece um pouco difícil no começo, mas se você ser paciente e apenas continue a ler, você vai entender em breve.

A linha 15 diz: quando eu tiver uma lt;divgt; tag com class = “cardápio”Eo mouse está flutuaring sobre ele exibição a quadras no seu interior.

Linhas 16-21 diz: quando eu tiver uma lt;divgt; tag com class = “cardápio" e um lt;umagt; tag, em seguida, definir esses formatos. Tenha em mente que estas linhas de escolher o formato para os botões de menu ocultos. Linhas 9-14 configurar os formatos para o botão de menu para rolar sobre para mostrar o resto do menu.

Linha 22 diz: quando eu tiver uma lt;divgt; tag com class = “cardápio" e um lt;umagt; tag e eu flutuar mais de um destes elementos, em seguida, definir o cor de fundo para um verde diferente.

Dê uma olhada abaixo para o produto final:

Style Sheets 3,11 Usuários (você é o centro do universo)

Os usuários podem definir a sua própria folhas de estilo do usuário para tornar as páginas olhar como eles querem. Só para distinguir entre Style Sheets usuário e Folhas Autor Estilo. Estilos usuário são folhas de estilo externas que os usuários podem criar-se que são simplesmente feitas como arquivos CSS sem a maior parte da codificação. Aqui eu vou mostrar-lhe um:

Não era isso extremamente simples?

Se você quiser saber como configurá-lo em seu próprio navegador, você poderia simplesmente ir para Ferramentas gt; gt; opções de Internet gt; gt; Geral gt; gt; Acessibilidade gt; gt; Em seguida, definir o seu próprio arquivo A Folha de Autor estilo é definido dentro do código entre .

4. Mais informações

4.1 Por que usar o xHTML e co. sobre o projeto e outras aplicações?

Antes de olhar para isto como fato ou algo semelhante a isso, você deve saber que este é simplesmente um ponto de vista dependendo de onde você está e como tecnicamente espírito você pode ser. Gosto de usar linguagens de programação para completar meus projetos porque significa que você pode entender o que está por trás dos projetos, enquanto que utilizam aplicações de design como o Adobe Dreamweaver e Microsoft FrontPage permitem que você crie seu site usando apenas as ferramentas disponíveis nos menus. Portanto, os aplicativos de design são limitadas à opção de menu fornecido a você. Em conclusão, é completamente óbvio que o uso de linguagens de programação iria construir o site ou produto completo em algo muito mais atraente como a sua funcionalidade é limitada apenas pela habilidade do programador com o idioma designado (por exemplo. javascript, CSS, XHTML). Eu sei que você provavelmente está pensando que eu sou preconceituoso, mas você terá que apenas tentar ambos e decidir o quanto de esforço que você deseja colocar em seu trabalho, em seguida, escolher suas ferramentas apropriadas para chegar ao seu destino. Você pode até optar por usar tanto uma vez que ambos Dreamweaver e FrontPage tem uma “visão de codificação” e um “modo de design”.

Há outras maneiras que você pode criar sites como o uso de Joomla e WordPress.

4.2 Joomla

Joomla é um grande Content Management System (CMS) com muita flexibilidade e com uma interface de usuário fácil de usar que um monte de gente ficar intimidado sobre quando eles percebem como muitas opções e configurações estão disponíveis. Joomla é uma plataforma baseada em PHP e MySQL. Este software é open-source que você pode obter de http://joomla.org/download.html

Se você quer na guia detalhado sobre Joomla tentar este guia de MakeUseOf: //makeuseof.com/pages/download-the-complete-beginners-guide-to-joomla

4.3 WordPress

WordPress é um Content Management System (CMS), que permite aos usuários criar e manter um site através de uma interface administrativa, incluindo uma estrutura de navegação automatically- gerado, sem precisar saber HTML ou aprender qualquer outra ferramenta. WordPress é um pedaço de software de código aberto criado por milhares de programadores ao redor do mundo e colocar em domínio público, para que você não tem que pagar para usá-lo. WordPress é um aplicativo baseado na web, escrito em PHP e MySQL, projetado para rodar em servidores Linux: PHP é uma linguagem de programação para aplicações web, MySQL é um banco de dados relacional (como MS Access), e Linux é um sistema operacional para web servidores - todos estes são também de código aberto. WordPress é, de longe, o CMS mais popular com mais de 200 milhões de sites em todo o mundo a partir de finais de 2009.