Cada site tem uma aparência e funcionalidade diferente, mas com o que ele está conectado e em que idioma a página está escrita? Folhas de estilo em cascata e HTML são usados para tudo isso. Você mesmo pode dar uma olhada no código desta linguagem se inspecionar os objetos no navegador. Especificamente, falaremos sobre o que é HTML neste artigo.
Nosso artigo é voltado principalmente para iniciantes, por isso esperamos a compreensão dos leitores regulares do blog!
A postagem será dividida nos seguintes itens:
O que é uma página HTML
Uma linguagem de marcação chamada HTML é usada para definir o estilo de todos os elementos de uma página, incluindo tabelas, imagens e texto. Você pode ler o código e tentar entendê-lo se usar algum navegador moderno, basta clicar com o botão direito na página e no menu clicar na linha "código-fonte da página" ou "código HTML". Depois disso, você verá algo como um editor, no qual existem muitas inscrições e símbolos incompreensíveis, esse é o código HTML.
Cada documento WWW possui um texto rico e bem formatado, bem como hiperlinks e imagens que o proprietário do site seleciona. Para trabalhar com esses elementos, os programadores criaram uma linguagem chamada HTML (Hyper Text Markup Language), que significa linguagem de marcação de hipertexto. Cada navegador funciona de maneira diferente e renderiza HTML de maneira diferente, por isso é renderizado de maneira diferente em navegadores diferentes, especialmente em versões mais antigas Internet Explorer.
Todos os documentos HTML são semelhantes - este é o padrão arquivo de texto, que contém tags de marcação do idioma fornecido, juntamente com textos que serão lidos pelos visitantes do site. Com a ajuda de tags, é criada uma página, e é ela que o navegador lê ao carregá-la. Graças à definição das tags e ao seu design, você pode colocar um artigo ou outro material em um determinado local da página, adicionar arquivos gráficos e fotografias, bem como hiperlinks para outras páginas do site. Inicialmente Arquivo HTML não é um documento da web, ele só se torna um após ser lido por um navegador.
Claro, o código HTML padrão tem suas desvantagens e desvantagens. Você terá que se esforçar para organizar os parágrafos com o texto da página, porque para fazer a marcação e tudo mais, você precisa prescrever certas propriedades para todo o texto e para cada parágrafo individual. Se o seu site tiver 50 páginas e cada uma tiver de 10 a 20 parágrafos, você terá que formatar o texto por um longo tempo e inserir as mesmas tags a cada vez. Isso não apenas cansa o proprietário do site, mas também afeta negativamente o peso da página do site. É por esta razão que mais tarde eles criaram folhas de estilo em cascata, elas são chamadas de CSS, que significa Cascading Style Sheets, graças a elas você pode estilizar o texto rapidamente. Você pode atribuir uma tag e definir certas características a ela, por exemplo, cor do texto, tamanho, fonte e assim por diante, e então aplicá-la aos parágrafos. Neste caso, o arquivo com a folha de estilo é armazenado separadamente, pode ser carregado em um site ou em vários de uma vez. Em seguida, os principais elementos da página são escritos em HTML, o texto é inserido e, em seguida, o CSS é conectado e todo o texto assume o design que você precisa. Também reduz o peso da página, o que é muito importante. 
Usando CSSé aconselhável se o site tiver muitas páginas que terão o mesmo design. Você pode definir a formatação de texto específica para todos os parágrafos se escrever várias linhas no documento com o código CSS. Durante a criação do site, os designers criam o layout principal em HTML, com foco no layout criado no Photoshop. Mas depois que o site parece inacabado, você precisa criar uma aparência atraente, e isso é conseguido por folhas de estilo em cascata. Isso é fácil de aprender se você tiver muito tempo livre, já que a aparência geral de todos os sites é aproximadamente a mesma, você pode ter um layout com vários blocos e "ajustar" outros sites a ele. Como regra, as folhas de estilo em cascata são muito mais complicadas do que CSS, e é ainda mais difícil editar um site usando blocos em vez de tabelas. Além disso, nos estágios iniciais, você pode encontrar um problema como uma exibição diferente do site nos navegadores. É para não perder tempo e ganhar dinheiro com sites que o CMS foi criado - layouts prontos sites que podem ser gratuitos ou pagos e possuem um sistema de gestão específico.
O que é HTML5. Diferenças e vantagens
O novo padrão O HTML5 ajuda os proprietários de sites e os isenta da responsabilidade de usar o formato Adobe Flash bem como outros programas. Graças a este padrão você pode alterar a exibição de texto nas páginas e simplificar a introdução de informações no preenchimento de formulários eletrônicos. Se dividirmos todas as inovações desta linguagem, podemos destacar os seguintes pontos:
- Após entrar no site, as pessoas poderão assistir a vídeos e ouvir áudio pelo navegador, para isso, é criado um botão separado para reprodução.
- É muito mais fácil fazer upload de novas fotos através deste idioma, você pode até criar galerias de imagens. Você nem precisa fazer download adicional Programas.
- Você pode localizar texto e marcar blocos de texto. Você também pode formatar o texto de maneira adequada para facilitar a leitura.
- Se antes no HTML4 uma pessoa notava um erro após inserir os dados apenas ao enviar um formulário, agora o navegador reporta imediatamente um erro se a pessoa preencher o formulário incorretamente. Isso é muito conveniente para os usuários, porque eles não precisam preencher as mesmas seções de dados várias vezes.
- Desnecessário de usar módulos de software, porque com a ajuda do HTML5, você pode realizar qualquer ideia sobre o site. Somente se o site for exclusivo e você precisar criar algo especial, módulos de software adicionais serão instalados.
- Antes, as pessoas normalmente não podiam navegar no site por meio de um tablet ou smartphone, já que o padrão HTML4 não tem compatibilidade com navegadores para dispositivos móveis e outros sistemas operacionais... Usando HTML5, são criadas páginas perfeitamente legíveis em todos os dispositivos em alta velocidade.
Se você tiver alguma dúvida, escreva nos comentários, teremos o maior prazer em respondê-la!
O que é HTML e para que serve - 3,7 de 5 com base em 3 votos
Antes de começar a estudar, proponho considerar o que é html e para que se destina.
HTML significa Hyper Text Markup Language, que pode ser traduzido como Hypertext Markup Language. Com a ajuda desta linguagem, páginas da web são criadas.
HTML não é uma linguagem de programação. Destina-se a marcar documentos de texto. Ou seja, em geral, nós o usamos para formatar o texto.
Então, como podemos editar texto usando HTML? O fato é que a linguagem HTML consiste em tags. Cada tag define como o texto aparecerá em sua página.
Em outras palavras, cada tag dá um comando específico ao seu navegador (o programa com o qual você navega na Internet), o navegador entende esse comando e exibe um texto pronto na tela, formatado de uma determinada maneira.
Portanto, você não vê o código em si, o navegador exibe texto formatado e gráficos prontos para uso na tela do monitor. Se você quer ver por si mesmo Código HTML e tags, com a ajuda das quais ocorre a formatação do texto que você está lendo agora, vá para o seu navegador de internet Explorer para Menu> Exibir e, na lista suspensa, selecione> Fonte. Olha a foto.
Isso abrirá uma janela contendo o código. Semelhante ao que você pode ver na segunda foto. Você pode rolar e ver este código, ele consiste principalmente em tags, dentro das quais na maioria dos casos há texto. Assim, sem entrar em detalhes, podemos dizer que cada tag define onde, como, com qual fonte, com que cor ficará seu texto.
Mas, na verdade, as tags HTML não podem apenas formatar texto, com a ajuda delas você pode inserir uma imagem em uma página, criar tabelas, criar links e muito mais.
Cada tag executa suas próprias funções específicas e, para aprender como criar páginas da web, você precisa saber para que serve esta ou aquela tag. Acho que agora você entendeu um pouco o que é html.
Primeiro, vamos dar uma olhada no que é uma tag. Para simplificar, as tags consistem em caracteres ou palavras comuns em inglês, apenas essas letras e palavras são decoradas de uma determinada maneira.
Cada tag consiste em colchetes angulares,< >dentro do qual certos símbolos são colocados. A maioria deles está aberta e fechada.
Por exemplo, a tag - abertura, e- fechamento. Como você pode ver, eles diferem na presença de uma barra / no caractere de fechamento. Se você colocar alguma palavra entre eles, por exemplo, Ei então será exibido em negrito... Tudo o que está entre colchetes angulares, neste caso, não é mostrado na tela, mas é uma espécie de comando do navegador para que a palavra entre essas tags seja mostrada em negrito.
Claro, existem muitas tags e cada uma delas executa suas próprias funções específicas. Todas as outras tags e todo o CTML como um todo funcionam aproximadamente de acordo com este princípio. Quando você solicita qualquer documento da Internet, seu navegador baixa o código html, interpreta-o corretamente e exibe texto formatado, gráficos, tabelas etc. na tela.
O objetivo deste tutorial é dar uma ideia do que é HTML, nas próximas lições começaremos a aprender esta linguagem de marcação. Para facilitar a assimilação do material, recomendo começar a estudar as lições das mais simples, passando suavemente para as mais complexas, por exemplo, na seguinte seqüência: no início, estude como é um documento usado, com a ajuda do qual eles são configurados e produzidos, aprenda a configurar, etc. para mais complicado.
Para criar páginas HTML, você pode usar programas especiais, como, mas você pode criar páginas usando um editor de texto simples que está disponível em qualquer versão do Windows.
Html- significa HyperText Markup Language, que é a linguagem mais amplamente usada para escrever páginas da web.
- Hipertexto refere-se à maneira como as páginas da web (documentos HTML) são vinculadas. Assim, um link disponível em uma página da web é denominado hipertexto.
- Como o nome sugere, HTML é uma linguagem de marcação, o que significa que você usa HTML para simplesmente “marcar” um documento de texto com tags que informam ao navegador da web como estruturá-lo para exibição.
O HTML foi originalmente desenvolvido com o objetivo de definir a estrutura dos documentos, como cabeçalhos, listas, parágrafos e assim por diante, para facilitar a troca. informação científica entre pesquisadores.
HTML agora é amplamente usado para formatar páginas da web usando as várias tags disponíveis na linguagem HTML.
Documento HTML
O exemplo a seguir mostra um documento HTML em forma mais simples:
Cabeçalho
Aqui está o conteúdo do documento ...
Vamos salvar o código em um arquivo HTML document.html usando seu editor de texto favorito. E abra o arquivo com um navegador da web como o Internet Explorer, Google Chrome ou Firefox et al. Ele deve mostrar a seguinte saída:
Tags para criar um documento HTML
Conforme declarado anteriormente, HTML é uma linguagem de marcação e usa uma variedade de tags para formatar o conteúdo. Essas tags estão entre colchetes angulares. A maioria das tags possui tags finais correspondentes, com exceção de algumas tags. Por exemplo, a tag tem uma tag de fechamento e a tag tem uma tag de fechamento de outros.
O exemplo acima usa as seguintes tags para gerar um documento HTML:
| Marcação | Descrição | ||||||
| Esta tag define o tipo de documento e a versão HTML. | |||||||
| Esta tag cobre um documento HTML completo e consiste principalmente no título do documento, que é representado por tags ... e o corpo do documento, que é representado por tags ... . | |||||||
| Esta tag representa o título do documento, que pode conter outras tags html, como Exploraremos todas as tags de título e corpo nas lições subsequentes, agora vamos dar uma olhada no que é a tag de declaração do documento. DeclaraçãoTag de declaraçãoé usado pelo navegador da web para entender a versão HTML usada no documento. Versão Atual HTML-5 e usa a seguinte declaração:
Existem muitos outros tipos de anúncios que podem ser usados em um documento HTML, dependendo da versão do HTML que você está usando. Veremos mais detalhes sobre isso ao discutir a tag.junto com outras tags HTML. Olá pessoal!. A segunda lição vamos dedicar à questão - o que é HTML e como trabalhar com ele. Nele, você aprenderá sobre os recursos da linguagem de programação web mais popular e compreenderá claramente sua essência. De como você o domina, será mais fácil para você seguir em frente e então você pode facilmente (embora não, você ainda tem que trabalhar duro) para assumir a conquista de linguagens mais complexas para a criação de sites, por exemplo, o mesmo PHP. Portanto, vamos ao que interessa. O que é HtmlHTML (linguagem de marcação de hipertexto) é uma linguagem de marcação de hipertexto na vida cotidiana. A linguagem de marcação padrão para documentos da Internet na World Wide Web. É uma das linguagens de construção de sites mais populares. Também é considerado o mais fácil em termos de carregamento em navegadores. Não possui nenhuma "confusão" complexa como no PHP, que, antes de exibir a página no navegador, primeiro faz uma solicitação ao banco de dados MySql, para depois exibir apenas o conteúdo ao usuário. Não vou falar sobre longos prelúdios verbais sobre como foi criado, porque não é interessante por muito tempo. Para todos esses pontos - a grande Wikipedia irá ajudá-lo. Queremos aprender a criar sites rapidamente, certo? Multar! Então, vamos prosseguir e compreender todos os meandros desta ciência da web. Noções básicas da linguagem HTML. Conceito de tagNão se pode ir a lugar nenhum sem conhecer uma base sólida, ninguém cancelou a "parte matemática" (o "fundamento" de nenhuma disciplina). E não nos desviaremos das tradições e regras. O básico do HTML são as tags ou, para ser mais preciso, um conjunto de tags. Eles são designados assim.<тег>... As tags estão sempre emparelhadas e exibidas assim <тег>.
Cada um deles executa estritamente função específica para exibição em navegadores. Alguns exibem uma imagem, outros um link, outros são responsáveis por parágrafos, os quartos fazem uma tabela e assim por diante. Podemos escrever qualquer texto dentro deles. Gosto de chamá-los de containers, para maior clareza, por assim dizer. Mas também existem os solteiros, vamos estudá-los nas próximas lições. E também entenda por si mesmo um ponto importante... V essa lingua o princípio de Pareto opera, ou seja, como em qualquer área da vida, atividade, e onde quer que esteja, existe uma regra 80/20. O que isto significa? Isso nos diz que 20% (no nosso caso é html) da linguagem fazem 80% do trabalho principal. A lógica é que não é necessário aprender todas as tags, uma vez que muitas delas simplesmente não são usadas ou são usadas muito raramente. Portanto, em nossas aulas nos concentramos nas mais frequentes e importantes. E você fez um ótimo trabalho com isso! Estrutura do documento HTMLA estrutura de qualquer documento html se parece com isto
Agora vamos descrever cada ponto com mais detalhes: O que é Doctype e seus significadosO elemento doctype é usado para indicar o tipo de nossa página da web. Esta é a chamada "declaração do tipo de documento" ou Declaração do tipo de documento. Essa tag deve sempre vir primeiro em todas as páginas. É um componente-chave de páginas da web que afirmam ser compatíveis com os padrões: sem ele, seu código não passará na validação do validador. O validador de documentos da web é programa de computador, que verifica a correspondência de qualquer documento, fluxo de dados ou parte do código com um determinado formato, verifica a correção sintática do documento ou arquivo (de acordo com a Wikipedia). Vários valores Doctype se destacam:
Estou usando a segunda opção. É mais conveniente trabalhar com ele, pois não restringe o desenvolvedor. O leitor fica confuso sobre qual é a diferença e qual é a melhor para usar? Deixe-me explicar a diferença entre eles. A versão de transição não atende estritamente aos padrões de validação do W3C (ou em russo, verifique), ou seja, o navegador exibirá o conteúdo do documento da web da mesma forma, mesmo que contenha desatualizado, obsoleto e outros não variações de código padrão. Mas a versão Strict segue exatamente todos os padrões, ou seja, na prática, se você esqueceu de colocar o símbolo apropriado (por exemplo, uma barra /) em algum lugar do código, você receberá um aviso na verificação. Esta é a aparência de um documento da web usando a versão estrita:
Aconselho a usar a segunda opção e não a vapor, pois é a mais conveniente. Agora examinaremos outras partes de nossa página. - ou tag "head", contém as tags mais importantes que explicam ao navegador o que precisa ser feito na página e quais mecanismos executar. Ele define um documento da web e seu conteúdo. Muitas vezes, é carregado com vários scripts que lançam vários chips na página e também há um "contêiner" importante para a promoção de SEO - a tag Não entraremos em detalhes e na história do que é HTML, mas vamos direto aos pontos principais. HTML é a base para construir qualquer site! Ao estudar o tópico de construção de sites, você deve começar com ele. Não há nada difícil aqui. Absolutamente TODOS podem dominar esta tecnologia! Quero observar imediatamente que esta NÃO é uma linguagem de programação, mas uma linguagem de marcação. Por que é fácil aprender HTML? Para falar fluentemente em língua Inglesa você não precisa saber todas as palavras que estão em inglês. Então, aqui, você só precisa aprender algumas das tags básicas e aprender a trabalhar com elas. E então você só precisa praticar e desenvolver uma habilidade. Vamos começar a explorar essa tecnologia simples e divertida. Um pouco de teoria ...Qualquer página consiste em tags. Ou seja, a página não parece realmente que estamos acostumados a vê-la, mas consiste em muitas tags, cada uma das quais desempenhando uma função específica. Parece uma grande parede de tijolos. Se todos os tijolos forem colocados corretamente, toda a parede ficará linda. Portanto, ao escrever a estrutura da página, é necessário estar atento a cada tag, pois é um "bloco de construção" para a nossa futura página. Mas o que é uma tag em HMTL?Esse Elemento HTML página que de alguma forma afeta a exibição e o layout da página. É muito difícil entender isso em palavras, então você precisa olhar tudo de uma vez na prática e se acostumar com o código. Dê uma olhada na imagem abaixo: Esta é a estrutura da página mais simples. Mas essas palavras repetidas entre colchetes triangulares são as marcas. Se você abrir o seu editor de texto e escrever este código e, em seguida, salvá-lo no formato HTML, então você obterá uma página HTML. Ainda não está claro o que é HTML? 🙂 A partir desta estrutura, você pode ver as tags que devem estar presentes. Estas são as tags:
Para ficar mais claro, destaquei-os em laranja na imagem abaixo: Tudo o que escrevemos entre as tags e não veremos em nossa página. Essas tags podem informar ao navegador sobre a codificação, sobre o título de nossa página, aqui eles podem conectar vários estilos, scripts e assim por diante. Você verá tudo isso nas próximas lições.E aqui estão todas as tags que vamos escrever entre as tags e, dependendo de sua finalidade, afetará precisamente a estrutura de nosso Páginas HTML.Bem, ficou mais claro o que é HTML? 😉 Mas a gente não pára e segue em frente ... Algumas tags podem ter uma tag final e outras não. Por exemplo, a tag há uma tag de fechamento... Como você deve ter adivinhado, as tags são fechadas com uma barra.É muito importante observar as tags de abertura e fechamento. Para que não haja erros. O navegador pode não mostrar um erro, mas a estrutura de suas páginas estará incorreta mesmo durante o trabalho posterior com estilos (onde iremos aparência), haverá grandes problemas. Portanto, se uma tag possui uma tag final, ela deve estar presente no local correto. Vamos dar um exemplo de como NÃO fechar as tags e em que ordem isso deve ser feito. Um exemplo de duas tags: CÓDIGO HTML correto O que você vê acima é esta é a ordem correta de gravação das tags finais... Mas pode haver tal situação ERRO NO CÓDIGO HTML Então feche as tags é estritamente proibido! Pratique para entender o que é HTML ...Você só pode aprender mais sobre o que o HTML é na prática. Você pode usar qualquer editor de texto para isso. Até um caderno. Mas eu recomendo usar o Notepad ++, porque há muito mais funcionalidade para trabalhar com HTML aqui. Você pode baixá-lo usando o link Baixar Notepad ++. Este editor tem todas as possibilidades para criar e editar páginas HTML. Vamos começar. Depois de abrir o programa, você verá uma janela como esta: Para criar uma página HTML, você precisa inserir o "corpo" da página nesta janela. Você pode copiar o texto abaixo e apenas colá-lo. Mas é melhor entrar em tudo com as mãos. Isso ajudará você a se lembrar e se acostumar com as tags mais rapidamente. Então, você deve ter algo assim: Em seguida, você precisa salvar esta página em formato HTML. Para fazer isso, clique no menu "Arquivo", aqui clique em "Salvar como ...". Insira o nome da página HTML. Eu o chamei de index.html. Então, nós apenas salvamos em local confortável no meu computador. Depois disso, a luz de fundo aparecerá Tags HTML, porque o editor Notepad ++ entenderá que é Documento HTML... E é muito mais agradável trabalhar com retroiluminação. RecomendadoPontos turísticos e lugares interessantes de Trencin: visão geral e fotosHá uma cidade bonita e interessante no oeste da Eslováquia. Esta cidade é Trencin. No meio dela ergue-se uma grande rocha, e nela está um castelo, construído em ...
|
