Baixe o app para aproveitar ainda mais
Prévia do material em texto
WEB DESIGN INTRODUÇÃO AO HTML A declaração <!DOCTYPE> A declaração <!DOCTYPE html> identifica o tipo de documento que o navegador deverá ler. Essa declaração deve aparecer no topo do código. Versões do HTML Versão Ano HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2014 Como escrever html? As páginas de html podem ser criadas ou modificadas usando editores profissionais de html como o ADOBE DREAMWEAVER, mas de qualquer modo, para aprendizado, é recomendável que você inicie usando editores de texto simples, como o bloco de notas do Windows ou editores de código como o Sublime Text, Notepad++, etc. Estrutura de pastas de um site + NOME_DO_SITE (pasta) Index.html (arquivo) + assets (pasta) + js (pasta) + css (pasta) +img (pasta) Paragrafos <p>This is a paragraph.</p> <p>This is another paragraph.</p> Links <a href="https://www.w3schools.com">This is a link</a> Adicionar images <img src="w3schools.jpg" alt="W3Schools.com“ width="104" height="142"> Uso de tags em minúsculo Por padrão o html não é caso-sensitivo, isso significa que <P> é o mesmo que <p>. No padrão do HTML5, não é requerido o uso de tags em lowercase ou uppercase, mas a W3C recomenda usar lowercase, para não conflitar com documentos que usam o padrão XHTML. Atributos em tags Atributos adicionam informação adicional sobre os elementos de html. Todos os elementos podem usar atributos Atributos sempre são especificados na linha inicial após a identificação da tag Atributos geralmente vem em par com o nome/valor: Exemplo: name=“value”; O atributo href define um endereço para a tag <a>: <a href="https://www.etecylgallindo.com">isso é um link</a> O atributo src define uma imagem para a tag <img>: <img src=“nude.jpg"> As imagens em html devem ser especificadas com atributos de tamanho colocando largura(width) e comprimento(height). <img src="img_girl.jpg" width="500" height="600"> O atributo alt define um texto alternativo para explicar a imagem, em caso de leitores de tela, para pessoas com limitação visual. O que possibilita ao usuário “ouvir” a imagem proposta. <img src="img_girl.jpg" alt=“a imagem está mostrando uma garota vestida com um casaco"> O atributo style permite alterar o estilo do elemento com cores, fontes, tamanho... <p style="color:red">um paragrafo da cor vermelha</p> Existem várias propriedades que podem ser usadas juntamente com o atributo style: Alterar cor de fundo: <body style="background- color:powderblue;"> Alterar cor do texto: <h1 style="color:blue;">This is a heading</h1> alterar as fontes: <h1 style="font-family:verdana;">This is a heading</h1> alterar tamanho das fontes: <h1 style="font-size:300%;">This is a heading</h1> Alterar alinhamento do texto <h1 style="text-align:center;">Centered Heading</h1> O atributo lang deve ser declarado na tag <html> para especificar a linguagem usada para leitores de tela e engines de pesquisa (indexadores) <!DOCTYPE html> <html lang="en-US"> <body> </body> </html> O atributo title deve ser usado com a tag <p>. Esse valor adicionado ao título, será mostrado como uma janela de dica quando o mouse for passar acima do elemento. <p title=“sou uma janela de dica sob o parágrafo"> This is a paragraph. </p>
Compartilhar