Hyper Text Markup Language / Linguagem de Marcação de Hipertexto - Linguagem de marcação utilizada para estruturar documentos de texto e de multimídia e criação de links de hipertexto entre documentos. - Códigos incorporados no texto que definem páginas da web. - Hipertexto: texto ao qual se agregam outros conjuntos de informação (Wikipédia). <tag abertura> Conteúdo </tag fechamento> <a> Conteúdo </a> <p> Conteúdo </p> <strong> Conteúdo </strong> <h1> Conteúdo </h1> <img/> <br/> <hr/> Tags vazias 1
Hyper Text Markup Language / Linguagem de Marcação de Hipertexto Estrutura básica/inicial <html> <head></head> <body></body> </html> 2
Estrutura básica/inicial <html> <head> Aqui dentro vão algumas instruções para o funcionamento da página. </head> <body> Aqui dentro vão os conteúdos que aparecem na página/site. </body> </html> 3
Sobre organização do código <html> <head> Aqui dentro vão algumas instruções para o funcionamento da página. </head> <body> Aqui dentro vão os conteúdos que aparecem na página/site. </body> </html> É igual a <html><head>aqui dentro vão algumas instruções para o funcionamento da página.</head><body>aqui dentro vão os conteúdos que aparecem na página/site.</body></html> 4
Estrutura básica/inicial com conteúdos <html> <head> <title>título da página</title> </head> <body> <p>este é o primeiro parágrafo.</p> <p>este é o segundo parágrafo.</p> <p>este é o terceiro parágrafo.</p> </body> </html> 5
Estrutura básica/inicial com conteúdos <html> <head> <title>título da página</title> </head> <body> <h1>título da página (conteúdo).</h1> <p>este é o primeiro parágrafo.</p> <p>este é o segundo parágrafo.</p> </body> </html> 6
Estrutura básica/inicial com conteúdos <html> <head> <title>título da página</title> </head> <body> <h1>este é um título</h1> <p>este é o primeiro parágrafo com uma palavra em <b>negrito</b>.</p> </body> </html> 7
Exemplo de parágrafo <p>a loja de aplicativos do Google passará por algumas mudanças que devem torná-la mais eficiente. Ela ganhará uma zona familiar, com aplicativos apropriados para crianças pequenas e com aplicativos de personagens populares, como Bob Esponja. Ele também ganhará um novo sistema de busca, que agrupa os resultados em subcategorias quando for adequado. Por exemplo, os resultados da busca por compras poderão ser agrupados em categorias como moda e cupons.</p> 8
Exemplo de parágrafo com outras marcações internas <p>a loja de aplicativos do <b>google</b> passará por algumas mudanças que devem torná-la mais eficiente. Ela ganhará uma <p> zona familiar </b>, com aplicativos apropriados para crianças pequenas e com aplicativos de personagens populares, como <b>bob Esponja</b>. Ele também ganhará um novo sistema de busca, que agrupa os resultados em subcategorias quando for adequado. Por exemplo, os resultados da busca por compras poderão ser agrupados em categorias como moda e cupons.</p> 9
Exemplo de parágrafo com outras marcações internas <p>a loja de aplicativos do <a>google</a> passará por algumas mudanças que devem torná-la mais eficiente. Ela ganhará uma <b> zona familiar </b>, com aplicativos apropriados para crianças pequenas e com aplicativos de personagens populares, como <b>bob Esponja</b>. Ele também ganhará um novo sistema de busca, que agrupa os resultados em subcategorias quando for adequado. Por exemplo, os resultados da busca por compras poderão ser agrupados em categorias como moda e cupons.</p> 10
Exemplo de parágrafo com outras marcações internas (com URL) <p>a loja de aplicativos do <a href= https://play.google.com >Google</a> passará por algumas mudanças que devem torná-la mais eficiente. Ela ganhará uma <p> zona familiar </b>, com aplicativos apropriados para crianças pequenas e com aplicativos de personagens populares, como <b>bob Esponja</b>. Ele também ganhará um novo sistema de busca, que agrupa os resultados em subcategorias quando for adequado. Por exemplo, os resultados da busca por compras poderão ser agrupados em categorias como moda e cupons.</p> 11
Sobre TAGS, atributos e valores <a href= https://play.google.com >Texto do Link</a> Tag de abertura Nome do Atributo Valor do Atributo Conteúdo que será visualizado e servirá como link Tag de fechamento <a href= https://play.google.com target= _blank >Texto do Link</a> <img src= endereço-da-imagem /> 12
Exemplo de parágrafo com outras marcações internas <p>a loja de aplicativos do Google passará por algumas mudanças que devem torná-la mais eficiente. Ela ganhará uma zona familiar, com aplicativos apropriados para crianças pequenas e com aplicativos de personagens populares, como Bob Esponja. <br/>ele também ganhará um novo sistema de busca, que agrupa os resultados em subcategorias quando for adequado. Por exemplo, os resultados da busca por compras poderão ser agrupados em categorias como moda e cupons.</p> 13
Encontre o erro <p>a loja de aplicativos do <b>google</b> passará por algumas mudanças que devem torná-la mais eficiente. Ela ganhará uma <i> zona familiar </i>, com aplicativos apropriados para crianças pequenas e com aplicativos de personagens populares, como <b>bob Esponja</p>. <br/>ele também ganhará um novo sistema de busca, que agrupa os resultados em subcategorias quando for adequado. Por exemplo, os resultados da busca por </a> compras <a> poderão ser agrupados em categorias como moda e cupons.</a> 14