Logo Passei Direto
Buscar

Linguagem HTML parte 1

breadcrumb-separator

UNEMAT

User badge image
Daniel Faria

em

Ferramentas de estudo

Mostrar todas

Conteúdos escolhidos para você

ebook - Introducao Web Design [Etepac 2021] (3)
107 pág.

ebook - Introducao Web Design [Etepac 2021] (3)

UCBR

Primeiros passos com HTML CSS - Giulia Amaral
24 pág.

Primeiros passos com HTML CSS - Giulia Amaral

UNINORTE

Tags e Atributos em HTML
5 pág.

Tags e Atributos em HTML

Uniasselvi

Linguagem de marcação de hypertexto - HTML
51 pág.

Linguagem de marcação de hypertexto - HTML

HTML: Estrutura e Evolução
52 pág.

HTML: Estrutura e Evolução

UFBA

Perguntas dessa disciplina

Podemos utilizar formatações CSS de diferentes formas, como escrita direta no atributo da tag, de forma inline, em um trecho delimitado pela tag style

ESTÁCIO

Foram propostas centenas de padrões para interfaces do usuário nos últimos anos. Sobre a categoria de padrão chamada CardStack escolher qual altern...

FCV

Abaixo, estão listadas frases referentes à inserção de Rótulos e Arquivos. I. Rótulo é um recurso do Moodle que permite incorporar textos, imagens e v

UNIFAVENI

Questão 8/10 - Linguagem de Programação Ler em voz alta Você está desenvolvendo um trabalho acadêmico o qual envolve o desenvolvimento de um algoritmo

Muitas vezes podemos copiar os códigos ou digitar, mas, se interessar, principalmente, pelo conceito, o código em si pode ser encontrado em vários ...

Material
Buscar
páginas com resultados encontrados.
páginas com resultados encontrados.
left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

left-side-bubbles-backgroundright-side-bubbles-background

Crie sua conta grátis para liberar esse material. 🤩

Já tem uma conta?

Ao continuar, você aceita os Termos de Uso e Política de Privacidade

Conteúdos escolhidos para você

ebook - Introducao Web Design [Etepac 2021] (3)
107 pág.

ebook - Introducao Web Design [Etepac 2021] (3)

UCBR

Primeiros passos com HTML CSS - Giulia Amaral
24 pág.

Primeiros passos com HTML CSS - Giulia Amaral

UNINORTE

Tags e Atributos em HTML
5 pág.

Tags e Atributos em HTML

Uniasselvi

Linguagem de marcação de hypertexto - HTML
51 pág.

Linguagem de marcação de hypertexto - HTML

HTML: Estrutura e Evolução
52 pág.

HTML: Estrutura e Evolução

UFBA

Perguntas dessa disciplina

Podemos utilizar formatações CSS de diferentes formas, como escrita direta no atributo da tag, de forma inline, em um trecho delimitado pela tag style

ESTÁCIO

Foram propostas centenas de padrões para interfaces do usuário nos últimos anos. Sobre a categoria de padrão chamada CardStack escolher qual altern...

FCV

Abaixo, estão listadas frases referentes à inserção de Rótulos e Arquivos. I. Rótulo é um recurso do Moodle que permite incorporar textos, imagens e v

UNIFAVENI

Questão 8/10 - Linguagem de Programação Ler em voz alta Você está desenvolvendo um trabalho acadêmico o qual envolve o desenvolvimento de um algoritmo

Muitas vezes podemos copiar os códigos ou digitar, mas, se interessar, principalmente, pelo conceito, o código em si pode ser encontrado em vários ...

Prévia do material em texto

<p>Curso de Desenvolvimento de</p><p>Aplicações Web - Parte 1</p><p>Linguagem HTML</p><p>Daniel da Costa e Faria</p><p>Linguagem HTML</p><p>• Linguagem de Marcação de Hipertextos</p><p>• Documentos que possuem ligações (links) para outros</p><p>documentos.</p><p>• Atualmente na versão 5</p><p>• Estruturadas a partir de tags (<tag></tag>), que</p><p>definem os elementos presentes no documento.</p><p>• Tags principais: head,body,p,table,form,a,img,input</p><p>HTML as tags</p><p>• Tags são como contêiners, elas indicam qual é o tipo do conteúdo</p><p>entre suas tags de abertura e de início</p><p>• Tags HTML são iniciadas por < (menor que), seguidas pelo texto da</p><p>tag e terminadas em > (maior que).</p><p>• A maior parte das tags HTML possui uma tag idêntica, mas com a</p><p>barra invertida (/) na frente, indicando onde o bloco de conteúdo da</p><p>tag termina. Ex.: <p></p>,<a href=””></a>,<h1></h1></p><p>Estrutura básica de uma página HTML</p><p>• Tudo começa em <!DOCTYPE html>, que diz ao navegador como ler a</p><p>página, no caso, como HTML versão 5.</p><p>• Em seguida a tag <html>, que marca o início do documento</p><p>• Depois de <html> vem a tag <head>, onde inserimos informações</p><p>sobre o site, como título, autor do site e assunto, e onde anexamos</p><p>arquivos de folhas de estilo CSS e Javascript</p><p>• Depois vem a tag <body>, que indica que seu conteúdo deve ser o</p><p>• Por último a tag </html>, que marca o fim do documento</p><p>Começo do cabeçalho</p><p>Conjunto de carcateres da página. Em resumo, resolve</p><p>problema de acentos.</p><p>Fim do cabeçalho</p><p>Começo do corpo do documento</p><p>Fim do corpo do documento</p><p>Final do documento</p><p>Aqui informamos ao navegador que tipo de documento estamos criando</p><p>Início do documento</p><p>Tags HTML e seus atributos</p><p>• Atributos são propriedades que usamos para adicionar</p><p>informações sobre uma tag</p><p>• Inserimos atributos nas tags digitando espaço, depois o</p><p>nome do atributo, seguido de igual (=) e por aspas duplas</p><p>(“ “). Dentro das aspas duplas digitamos o valor do atributo.</p><p>Por exemplo, para um link temos o seguinte</p><p><a href="http://www.olamundo.com.br">Site do Olá, Mundo</a></p><p>AtributoTag Tag de fimValor do atributo</p><p>Outros exemplos de atributos</p><p><form action="processa.php"></form></p><p><link rel="stylesheet" href="estilos.css"></p><p><video src="meu-video.mp4"></video></p><p>Tags de conteúdo da HTML - Titulos</p><p>• HTML possui seis níveis de cabeçalhos</p><p>• São eles h1,h2,h3,h4,h5 e h6</p><p>• h1 é usado para o título principal</p><p>• h2 é utilizado para subtítulos</p><p>• Se o capítulo tiver mais sub-divisões, utiliza-se h3, e assim por diante.</p><p>• h1 apresenta o texto maior, enquanto h6 apresenta o menor</p><p>Tags de conteúdo da HTML - Parágrafos</p><p>• Inicados pela tag <p> e terminados pela tag </p>. Cada par dessas</p><p>tags representa um parágrafo do texto. Ex.:</p><p><p>Júpiter é o maior planeta do sistema solar. Responde por mais de</p><p>70% da massa de todos os 8 planetas, com raio de 69.911 km.</p></p><p><p>O segundo em tamanho no Sistema Solar é Saturno, com raio de</p><p>58.232 km.</p></p><p>Tags de conteúdo HTML : negrito, itálico,</p><p>subscrito e sobrescrito</p><p>• Para escrever textos em negrito inserimos o texto dentro das tags <b></p><p>e </b></p><p>• Textos entre <i> e </i> aparecerão em itálico</p><p>• Textos entre <sub> e </sub> aparecerão subscritos</p><p>• Textos entre <sup> e </sup> aparecerão sobescritos</p><p>Usando span</p><p>• Usamos a tag span quando queremos marcar uma parte do texto do</p><p>parágrafo.</p><p>• Sozinho ele não faz efeito nenhum, apenas quando associamos ele ao</p><p>CSS (folhas de estilo) para dar um destaque no meio da frase.</p><p>Este span vai aparecer diferente apenas</p><p>por que recebeu uma classe para CSS</p><p>No span que recebeu a classe destaque foi aplicado um código em CSS</p><p>para definir uma borda azul e um espaço interno (padding) para dar</p><p>uma folga entre a palavra e a borda.</p><p>O outro span que não recebeu nada (a palavra continente) não mostra</p><p>nenhuma mudança na tela</p><p>Listas</p><p>• HTML possui 3 tipos de listas: ordenadas, não ordenadas e listas de</p><p>definição</p><p>• Listas ordenadas possuem ordem nos elementos, por exemplo, abc,</p><p>123, i, ii,iii. O tipo de indicador da lista depende do atributo type.</p><p>• Uma lista criada com <ol type=”a”> mostrará marcadores em letras</p><p>mínusculas, já com <ol type=”A”> mostrará marcadores com letras</p><p>maíusculas</p><p>HTML : Listas</p><p>• As listas não-ordenadas não apresentam ordem de elementos,</p><p>apenas um marcador, que pode ser quadrado (square), circulo (circle,</p><p>apresenta um circulo branco com uma borda preta) ou disco(disc,</p><p>que é o padrão, uma bolinha preta em cada linha)</p><p>• Para definir o tipo de marcador, utilizamos o elemento type</p><p>HTML Listas de definição</p><p>• Listas de definição são usadas para inserir um termo acompanhado</p><p>do sua definição. Possui tres elementos: dl, dt e dd</p><p>• <dl> cria a lista</p><p>• <dt> contem o termo que queremos definir</p><p>• <dd> contem a definição do termo</p><p>HTML Inserindo mídia</p><p>• Podemos inserir imagens, áudio e vídeos em nossas páginas HTML</p><p>• Para inserir uma imagem, utilizamos o elemento img que possui o</p><p>atributo src (source, fonte da imagem) escrevendo da forma</p><p>• <img src=”endereco_da_imagem” alt=”Texto alternativo”>, onde</p><p>• img é a tag</p><p>• src é o endereço onde a imagem está salva</p><p>• alt=”Texto alternativo” é um texto que aparece na tela do usuário</p><p>caso o endereço em src estiver errado ou a imagem não esteja no</p><p>local indicado</p><p>Repare que a imagem do CSS não</p><p>aparece, pois o arquivo indicado no src</p><p>não existe. O que aparece é o texto do alt</p><p>HTML - Inserir áudio</p><p>• Para inserir música na página utilizamos a tag <audio> com o atributo</p><p>controls (adiciona os botões).</p><p>• Dentro da tag <audio> inserimos a tag source com atributo src</p><p>seguido de igual(=) e dentro das aspas duplas o local do arquivo de</p><p>música.</p><p>• Por uma questão de licença, cada navegador implementou um grupo</p><p>de tipos de áudio suportados.</p><p>• Tipos mais suportados: mp3, ogg e wav</p><p>• Dica: na tag audio se quiser que ele execute sozinho, adicione o</p><p>atributo autoplay. Se quiser que repita, adicione o atributo loop</p><p>Inserindo vídeos</p><p>• Para inserir vídeos temos a tag <video>, que é escrita quase igual à</p><p>tag <audio></p><p>• Também possui o atributo controls e autoplay</p><p>• Também dentro dela inserimos a tag <source> com o atributo src, que</p><p>indica onde o video está salvo</p><p>• Para rodar, o formato do vídeo deve ser mp4 ou wbem</p><p>Exemplo de código</p><p>Resultado da tag <video></p><p>Livros indicados</p>

Mais conteúdos dessa disciplina