Tecnologia web de front-end

Name: Tecnologia web de front-end
Author: Paul Poteete

Neste módulo, examinamos o código técnico que constitui o que é chamado de “tecnologia da web de front-end”. Demonstramos o código html ao vivo em execução em…

Preview the first lesson free — get full access to all 8 lessons.

Solicitar uma demonstração Entrar

Curso: sob demanda

Nesta lição, discutiremos a linguagem de marcação de hipertexto. Linguagem de marcação de hipertexto ou HTML, é a principal linguagem usada na internet. Esta linguagem foi introduzida no início de 1990 por Sir Tim Berners-Lee, e incluiu recursos como hiperlinks que hoje tomamos como certo. Vamos ver HTML e algumas das novas convenções que surgiram nos últimos anos. Vou deletar o HTML que temos aqui. E vamos começar de novo com o tipo de documento. Podemos realmente começar com HTML. Agora, se começarmos apenas com HTML, como você vê o elemento HTML na página agora. Ah, a propósito, muitas vezes você ouvirá elementos HTML chamados tags. Uma maneira de pensar nisso é um elemento HTML é um conjunto completo de tags. Neste caso, se colocarmos um parágrafo e o anexarmos com duas tags P ou tags de parágrafo, então pronto, temos um elemento de parágrafo. Alguns elementos podem ser considerados coisas como endereço, rodapé, cabeçalho, e outras coisas dentro do HTML. Neste caso, vamos considerar elementos HTML e tags HTML para serem sinônimos. Usaremos tags às vezes, às vezes usaremos elementos. Então, vamos começar usando algumas tags. Primeiro, vamos começar com uma declaração DOCTYPE. Então vamos em frente e inserir a exclamação de ângulo DOCTYPE HTML. E isso nos diz que estamos usando algo depois do ano 2000 em HTML, apenas digitar HTML por si só irá renderizar seu documento de uma forma peculiar que seria algo como a renderização de documentos da década de 1990. Agora isso não é ruim. Você pode realmente digitar todo o seu HTML no padrão de hoje e apenas use HTML no topo e isso vai ficar bem. No entanto, existem algumas tags, alguns elementos que não são suportados na década de 1990, e você pode ver como isso pode se tornar confuso. Então, para evitar isso, usamos o ponto de exclamação, que as pessoas chamam de bang e DOCTYPE HTML. Após a declaração inicial de que estamos usando DOCTYPE HTML, iremos em frente e iniciaremos nossa codificação HTML. Agora, primeiro com HTML, teremos o que você teria normalmente em um documento. Então, em HTML, teremos uma seção de cabeçalho e também teremos uma seção de corpo. Então vamos em frente. Eu vou fazer o corpo assim. Então, teremos uma seção de cabeça e uma seção de corpo. Agora vou fechar cada uma dessas tags, cada um desses elementos. E aqui com corpo você vai ver isso Vou fechá-lo apenas com uma barra. Então temos HTML head, head, body, body, assim e podemos fechar nosso HTML. Agora o editor que estou usando coloca o texto na tabulação direita ou no espaçamento certo do lado, isso é muito conveniente. E nossos futuros editores estarão procurando no código do visual studio, e esse código VS lhe dará muito mais opções do que você pode ver bem aqui na tela. O que estamos digitando na tela é HTML bruto e é exatamente assim que um documento é criado. Devo observar que DOCTYPE não é necessário para ser maiúscula aqui, podemos realmente fazer tudo desta minúscula, que é muito mais fácil você encontrará quando estiver digitando. Em seguida, sob a seção de cabeça, podemos realmente colocar em nosso título da nossa página. Então eu vou salvar isso muito rápido e vamos ver o que temos até agora. Agora temos um documento em branco. Se você olhar para isso, temos muito código para um documento em branco, mas temos um documento em branco com um título que diz página da web. Então, se olharmos aqui no topo, veremos que a página da web é de fato o título no topo. Três dos elementos ou tags que vamos usar hoje são título, parágrafo, quebra de linha, fonte da imagem, um link de URL, então isso vai ser algo onde você tem um link para outro site onde você quer ir para esse link e uma lista onde você tem uma lista não numerada e, finalmente, uma tabela. Para ver como é isso, vamos em frente e entrar em nosso corpo e mais no corpo, vamos em frente e criar um parágrafo. Então o P ali é a tag para o parágrafo. E você vai dizer que isso é um parágrafo. Agora, uma vez que digitamos que este é um parágrafo, você não precisa de espaços como depois do elemento lá. Então podemos salvar isso. Certifique-se de salvá-lo no servidor antes de recarregá-lo. E você verá que este é um parágrafo que surge. Bem, antes de seus parágrafos normalmente você terá títulos. Então vamos para o corpo aqui e vamos olhar para H1. Agora H1 é o maior título. Se você já criou um documento, e este não é qualquer tipo de processador de texto, você sabe que tem o título do documento, em seguida, abaixo do título, você terá o primeiro título e digitará, às vezes você terá um subtítulo e um subtítulo etc. Bem, isso é a mesma coisa. Então aqui podemos dizer que este é o título um, e eu vou fazer um H1 assim. Vamos salvá-lo e atualizá-lo, você verá que temos um título, este é um parágrafo. Bem, vamos em frente e colocar um título dois lá. Então vamos descer aqui H2 e chamaremos isso de forma bastante interessante, chamaremos isso de título dois. Também ajuda a vê-lo na tela. Então, encabeçando dois assim e eu quero fazer esses dois, não um, então vemos o título dois. Vamos salvá-lo e recarregá-lo aqui mesmo na tela. E você verá que temos o título um e o título dois, e então este é um parágrafo abaixo disso.

Principiante Fornecedor : Paul Poteete 8 lições · 45m em Árabe, Alemão, Inglês, Espanhol, Francês, Português, Chinese

Descrição do curso

Neste módulo, examinamos o código técnico que constitui o que é chamado de “tecnologia da web de front-end”. Demonstramos o código html ao vivo em execução em um servidor da web popular. Também demonstramos como as folhas de estilo em cascata podem fazer teu site pessoal ou organizacional parecer mais consistente e profissional. Por fim, discutimos como o JavaScript permite que um web designer execute programas específicos dentro do navegador de um visitante.

Objetcivos de aprendizagem:

O Que Você Vai Aprender

Explorar as tecnologias web front-end que compõem sites
Escrever e executar código HTML ao vivo em um servidor web popular
Aplicar folhas de estilo em cascata (CSS) para fazer um site parecer consistente e profissional
Usar JavaScript para executar programas personalizados dentro do navegador web de um visitante
Projetar sites usando HTML, CSS e JavaScript juntos

Principais Conclusões

Tecnologia web front-end refere-se ao código técnico que compõe a parte visível voltada para o navegador de um site.
Folhas de estilo em cascata ajudam sites pessoais e organizacionais a parecerem mais consistentes e profissionais.
JavaScript permite que um designer web execute programas personalizados dentro do navegador web de um visitante.
O módulo demonstra código HTML ao vivo em execução em um servidor web popular.

Perguntas Frequentes

Quais tópicos este curso abrange?

O módulo examina o código técnico por trás da tecnologia web front-end, demonstrando código HTML ao vivo em um servidor web popular, como folhas de estilo em cascata tornam um site mais consistente e profissional e como JavaScript executa programas personalizados dentro do navegador web de um visitante.

O que vou aprender neste curso?

Você aprenderá sobre tecnologias web front-end e como JavaScript é usado ao projetar sites.

Como o curso é estruturado?

O curso é organizado em oito lições cobrindo HTML (Partes 1-3), CSS (Partes 1-3) e JavaScript (Partes 1-2).

Quais habilidades este curso ajuda a desenvolver?

Oferece suporte a habilidades incluindo Engenharia Front-End, Engenharia Web, Aplicativo HTML, Componentes HTML e Scripts HTML.