Dicas Úteis

Lição 1

Pin
Send
Share
Send
Send


Na primeira lição, já examinamos um pequeno exemplo de criação de uma página html. Agora crie uma página mais complexa. Eu quero notar que vou explicar como fazer isso sem o uso de um software especial. Tudo o que é necessário para o trabalho é um bloco de notas normal do Windows. Para um trabalho mais conveniente, recomendo baixar o Notepad ++ (um notebook avançado com a capacidade de destacar tags html). Então vamos começar.

Abra o bloco de notas e copie o seguinte para ele:

Em seguida, clique em "salvar como", na caixa de tipo de arquivo, selecione "todos os arquivos" e escreva index.html no nome. Não se esqueça de incluir a extensão .html (não .txt) no final do nome, caso contrário, os navegadores não o interpretarão como um documento da web.

Se por algum motivo você não conseguir criar uma página html, você pode baixar o exemplo anterior no link: index.rar.

Agora, algumas palavras sobre as tags que usamos para criar essa página.

Descrição de tags.

A primeira tag é (essa tag é emparelhada, ou seja, a tag de fechamento é necessária) - ela é usada como um container, dentro da qual está localizado todo o conteúdo da página (texto, imagens, etc.). Embora essa (s) tag (s) seja opcional, seu uso fala de uma boa regra de tom. Portanto, eu aconselho você a usá-lo.

A próxima tag é. Esta é também uma tag emparelhada (s). Essa tag não aparece na página (exceto no título), mas é necessário indicar parâmetros de página adicionais - descrição da página (usada pelos mecanismos de pesquisa), palavras-chave (usadas pelos mecanismos de pesquisa), estilos, scripts, título e muito mais.

Tag (tag) emparelhada (s), necessária para indicar o título da página. Além disso, essa tag deve ser colocada somente dentro da tag!

E o último, em nosso código, tag é. Também tag emparelhado (e

Estudos de caso

Abra qualquer site e veja o código fonte. Isso pode ser feito diretamente no navegador usando o atalho de teclado Ctrl + U.

Agora você vê como profissionais escrevem código HTML e ganham muito dinheiro por isso. Diferente da nossa primeira página, certo? Mas isso também pode ser aprendido em poucos meses. E se você deseja obter uma educação completa com conhecimento de CSS e JavaScript, com um trabalho como programador júnior, você terá que estudar por um ano inteiro.

Suíte de tecnologia HTML5

O HTML5 é a versão mais recente e mais poderosa do padrão HTML, com novos elementos, novos atributos e novo comportamento. O termo HTML5 também significa um conjunto de tecnologias, permitindo que você crie uma variedade de sites e aplicativos da web.

De fato, o termo HTML5 é usado para significar mais de dez padrões separados. E algumas das tecnologias HTML5 ainda não foram finalizadas. Nem todos os navegadores os suportam (ou cada navegador é diferente).

Quando falamos de sites interativos e AJAX, estamos quase sempre falando sobre tecnologias HTML5.

O HTML5 possui interfaces de programação (APIs) para transmissão de vídeo e som, para bate-papos, incluindo chats de vídeo por meio de um navegador e muitas outras coisas interativas interessantes. O HTML5 permite que você crie jogos de navegador. Até o YouTube agora está trabalhando no HTML5, embora anteriormente fosse necessário o Flash.

Formalmente, mudar de HTML normal (HTML4) para HTML5 é muito simples: basta escrever a tag no início do código da página da web para indicar o tipo de documento.

Como aprender a escrever HTML

Você já aprendeu a escrever uma página simples em HTML. Apenas aprenda os elementos básicos - e experimente. Defina-se uma tarefa específica (por exemplo, fazer um site de cartão de visita para o seu IP) ou ter uma tarefa paga como freelancer e tentar implementá-lo.

Você pode espiar no diretório, google, pedir conselhos em fóruns e sites com perguntas e respostas. Ou encontre o site mais semelhante, abra seu código e entenda como ele funciona. Você pode alterá-lo para as suas necessidades, lembre-se de apagar os direitos autorais e os comentários dos autores.

Copiar e colar o trabalho de outra pessoa é um fenômeno normal na programação, aqui ela é chamada de Open Source, um fluxo muito moderno e avançado.

As pessoas compartilham entre si seus programas e trechos de código. Alguns desenvolvedores não querem abrir o código, criptografam (ofuscam) scripts em sites, mas também podem ser analisados ​​com ferramentas especiais.

Para criar sites interativos com funcionalidades mais complexas, com um design moderno e bonito, você precisa estudar CSS, JavaScript, web design e alguns outros assuntos. Aqui é necessária uma preparação mais fundamental.

O programa de treinamento anual Web Profession Profession é ideal para iniciantes que desejam uma linguagem limpa em HTML, estilos CSS, JavaScript e linguagens de programação PHP. Como resultado, você aprenderá a criar seus próprios projetos da Web e poderá reivindicar a posição de desenvolvedor júnior.

Um curso prático de um ano para aqueles que querem se tornar um desenvolvedor web profissional, lançar seu projeto de Internet ou serviço da web e receber seus primeiros pedidos de desenvolvimento.

  • Feedback ao vivo dos professores
  • Acesso ilimitado aos materiais do curso
  • Estágio em empresas parceiras
  • Projeto de graduação de um cliente real
  • Garantia de emprego em empresas parceiras para graduados que defenderam sua tese

Vamos precisar

1) Escolher editor de texto. Suficiente pela primeira vez Bloco de notas (bloco de notas) (nisto precisamos apenas de uma equipe Salvar como)

Se você quiser começar imediatamente a programar em editores de texto especializados, preste atenção em:
1) para Windows
NotePad ++ (faça o download ou aqui)
Intype (download)

Sua diferença em relação aos editores de texto convencionais é que eles recuam automaticamente! Tornar possível salvar novamente o arquivo em uma codificação diferente (note que você o encontrará no futuro), tags de cores em várias cores, como o código na parte inferior da lição. Em um editor regular, será da mesma cor.

2) Qualquer navegador de internet, por exemplo, Explorador da Internet para janelas ou Safári para Mac OS X e iOS. Sim sim você também pode Mozilla, Google Chrome, Ópera, Yandex e Mail navegadores e assim por diante.

Vamos criar uma página HTML

1) criar uma pasta na área de trabalho html . Faremos isso para que as lições sejam estruturadas e contidas em um só lugar.

2)Criar nosso arquivo em um editor de texto, por exemplo, no bloco de notas (bloco de notas). Próxima Salvar como.

A codificação é melhor escolher UTF-8, em seguida, escolha todos os tipos de arquivo e selecione o nome do arquivo com .html no final, por exemplo index.html

Nós escolhemos como diretório (pasta) onde salvar nosso html
Empurrar salvar. Feito!

Muitas vezes, faço a pergunta que extensão de arquivo não visível. Vamos pegá-lo em ordem

Extensão de nome de arquivo - uma sequência de caracteres adicionados ao nome do arquivo e destinada a identificar o tipo (formato) do arquivo. Simplificando, isso é .txt .doc .exe .jpg e assim por diante no final do nome do arquivo

A capacidade de ver as extensões de arquivo pode ajudar a determinar com precisão o tipo de arquivo e permite que você manualmente (com o comando renomear) altera não apenas a extensão, mas também o tipo de arquivo (por exemplo, de txt para html)

não deve ser assim: foto, documento de texto, jogo
Deve ficar assim: photo.jpg, texto document.txt, game.exe

Mas se você ainda tiver os nomes dos arquivos na primeira versão (SEM, por exemplo, .txt, jpg, .exe no final do nome do arquivo), faça o seguinte:

Nós olhamos para as configurações de arquivos e pastas:

Para Win XP Abra qualquer pasta - Ferramentas (no painel superior) - Propriedades da pasta - Ver - Esconder extensões para arquivos registrados (desmarque) - Aplicar

Para Ganhar 7 Abra qualquer pasta - Organize - Arquivo e opções de pesquisa - Exibir - Ocultar as extensões para os tipos de arquivo registrados (desmarque) - Aplicar

Para Mac OS Clique na área de trabalho - Localizador - Preferências (Avançado) - Avançado - marque a caixa de seleção em Mostrar todas as extensões de arquivo (Aplicar extensões)

3) insira nele todo o código (junto com os comentários) indicado abaixo:

4) abra o arquivo. Você pode escolher outro navegador para abrir este arquivo, para isso, clique com o botão direito em nosso arquivo index.html - Abra com e selecione um navegador da lista, por exemplo, Internet Explorer, Google Chrome, Mozilla, Navegador Yandex, etc.

Como resultado, abrir o navegador da Internet resultante index.html Você deve ver uma página deste tipo:


Figura 1

On Figura 1 vemos como, como resultado, o navegador exibiu sua página. O texto dos seguintes elementos é destacado em vermelho:

No código apresentado abaixo, você pode ver o mínimo básico do documento html. É necessário aprender e não confundir as tags de abertura e fechamento nos lugares.


Tag cabeça destaca o chefe do documento. Ele prescreve elementos que são principalmente associados com a ajuda do Navegador no processamento dos elementos da sua página (nome, palavras-chave, autoria, etc.). Falaremos sobre o seu conteúdo mais tarde.

Tag titulo significa Nome da Página. Esta é a única tag contida em cabeçaque é exibido na página. O que entrar depois da abertura e antes da tag de fechamento será o título da sua página na Internet

Todos os recuos à esquerda das tags nos exemplos são opcionais. Eles são feitos para ilustração para que você veja um par de tags.

Tag corpo indica o corpo da página. O que inserir depois das tags de abertura e fechamento corpo e será o conteúdo da sua página


Quase todas as tags em HTML abrindo e fechando (exceção, por exemplo, da tag img, que indica a inserção de uma imagem).


Mais uma vez, recordo que é importante não esquecer de escrever tags de fechamento para todos os outros tipos de tags, caso contrário, o Navegador não entenderá exatamente onde você queria terminar esse ou aquele elemento. Como abaixo:


Após a palavra negrito, intencionalmente esquecemos a tag de fechamento b. Como resultado, o navegador exibiu o seguinte

Quero destacar o texto negrito, e este já é em itálico

Como você pode ver, o texto será destacado em negrito até o final, e o que estava implícito em itálico será negrito e itálico. Então tenha cuidado!

5) Se você quiser editar algo no seu arquivo index.html (e agora é aberto por padrão apenas pelo navegador), clique no botão direito do mouse em nosso arquivo index.html - escolha Abra com e da lista nós selecionamos um editor de texto, ele irá Bloco de notas (em inglês Notepad)ou outro editor de texto que você instalou.

Em princípio, explicou o básico. Enquanto a página html parece simples o suficiente, mas nas próximas lições eu lhe direi em detalhes sobre esses e outros elementos e sua finalidade - vamos inserir imagens, fazer links e muito mais)

Pin
Send
Share
Send
Send