<!DOCTYPE> Para um navegador exibir corretamente uma página web, devemos informar explicitamente o tipo do documento. O tipo do documento é informado com a declaração <!DOCTYPE>. <! DOCTYPE html > TAG DE ABERTURA <html> Os elementos HTML, com exceção do DOCTYPE, devem ser inseridos no conteúdo do elemento html. Esse elemento é aberto com a tag <html>, fechado com a tag </html> e deve conter exatamente um elemento head seguido de exatamente um elemento body. Diversos autores recomendam a utilização do atributo lang. Esse atributo indica a língua utilizada no documento HTML ou na maior parte dele. Algumas ferramentas de leitura ou de tradução de texto podem utilizar esse atributo para descobrir facilmente em qual língua os textos contidos no documento HTML ou na maior parte dele foram escritos. <!DOCTYPE html> <html lang = "pt-br"> <head> <meta charset = UTF-8"> <title> Exemplo de uso correto da semântica HTML </title> </ head > < body >... </ body > </ html > PARÁGRAFO Tag <p> No exemplo abaixo, utilizamos o elemento p para definir um parágrafo. De acordo com a especificação da linguagem HTML, esse elemento deve ser utilizado justamente para definir parágrafos. Portanto, ele foi aplicado corretamente. <!DOCTYPE html> <html lang = "pt-br"> <head> <meta charset = UTF -8"> <title> Exemplo de uso correto da semântica HTML </title> </head>
<body> <p> Este é um texto para mostrar o significado da tag p. </ p> </body> </html> TÍTULOS E SUBTÍTULOS Tag <h> Para inserir títulos em uma página web, devemos utilizar os elementos h1, h2, h3, h4, h5 e h6. Os sufixos numéricos de 1 a 6 indicam o nível do título dentro da hierarquia de títulos do documento. <!DOCTYPE html> <html lang="pt-br"> <!-- cabeçalho --> <head> <meta charset ="UTF-8" /> <title> Exemplo de Títulos </title> </head> <!-- corpo --> <body> <h1>título 1 </h1> <h2>título 2 </h2> <h3>título 3 </h3> <h4>título 4 </h4> <h5>título 5 </h5> <h6>título 6 </h6> </body> </html>
Editores HTML Documentos HTML podem ser criados em qualquer editor de texto básico. Contudo, para ganhar produtividade, podemos utilizar ferramentas com mais recursos. Há diversas opções de editores HTML, alguns gratuitos outros pagos. https://netbeans.org/ http://www.aptana.com/ Ferramentas de Desenvolvimento Web Hoje em dia, os principais navegadores possuem ferramentas para testar e depurar as páginas web e a interação com os Web Servers. Nos exemplos dessa apostila, utilizaremos Chrome DevTools do navegador Chrome. Outra ferramenta muito importante é o Firebug do navegador Firefox. ITÁLICO Elemento <i> A especificação da linguagem HTML 5 não é muito precisa na definição da semântica do elemento i. Ela indica a utilização desse elemento para definir nomes científicos, termos técnicos, expressões idiomáticas em outras línguas, transliterações, pensamentos. Normalmente, os navegadores definem o i como inline-level element e exibem o seu conteúdo em itálico. <!DOCTYPE html> <html lang="pt-br"> <!-- cabeçalho --> <head> <meta charset ="UTF-8" /> <title> Exemplo de Títulos </title> </head> <!-- corpo --> <body> <h1> Exemplo do elemento (i) </h1> <p> Desenvolvimento web é o termo utilizado para descrever o desenvolvimento de sites, na <i> Internet </i> ou numa <i>intranet</i>. Este é o profissional que trabalha desenvolvendo websites, podendo ser um Web Designer (Desenvolvedor do Layout), ou Web Developer(Desenvolvedor de sistemas). </body> </p> </html>
NEGRITO Elemento <b> A especificação da linguagem HTML 5 não é muito precisa na definição da semântica do elemento b. Ela indica, por exemplo, a utilização desse elemento para definir as palavras chave do resumo de um documento e o nome do produto em texto de avaliação. (usamos para negrito). <!DOCTYPE html> <html lang="pt-br"> <!-- cabeçalho --> <head> <meta charset ="UTF-8" /> <title> Exemplo de (b) </title> </head> <!-- corpo --> <body> <h1> Exemplo do elemento (b) </h1> <p> Atualmente, praticamente todos os <b> sistemas corporativos </b> possuem <b> interfaces web </b>. Para quem deseja atuar no mercado de <b> desenvolvimento de software </b>, é obrigatório o conhecimento das linguagens : <b> HTML </b>, <b> CSS </b> e <b> JavaScript </b>. </p> </body> </html> Texto subscrito <sub> ou sobrescrito <sup> Podemos definir textos subscrito ou sobrescrito com os elementos sub e sup respectivamente. Normalmente, os navegadores definem esses elementos como inline-level elements. <h1> Exemplo de texto subscrito ou sobrescrito </h1> <p > </p> A cidade de São Paulo possui uma área de 1.523 km <sup>2 </sup>. Em 2011, São Paulo emitiu 16,430 milhões de toneladas de CO <sub> 2 </sub> IGUAL NEGRITO - Texto importante ou enfatizado Tag <strong> Podemos definir textos importantes ou enfatizados com os elementos strong e em respectivamente. Por padrão, nos navegadores, o conteúdo de um elemento strong é exibido em negrito e o conteúdo de um elemento em é exibido em itálico. Normalmente, os navegadores definem esses elementos como inline-level elements.
<h1> Exemplo de texto importante (strong) ou enfatizado (enfatizado) </h1> <p> <strong> Brasil </strong> é o único país que ganhou <em> cinco vezes </em> a <strong> copa do mundo de futebol </strong >. </p> Imagens Tag <img> A tag <img> define uma imagem em uma página HTML e necessita de dois atributos preenchidos: src e alt O HTML 5 introduziu duas novas tags específicas para imagem: <figure> e <figcaption>. A tag <figure> define uma imagem com a conhecida tag <img>. Além disso, permite adicionar uma legenda para a imagem por meio da tag <figcaption>. <figure> <img src="img/foto1.png" alt="foto a ser exibida Minha foto"> <figcaption>roteiro do final de semana</figcaption> </figure> Listas não numeradas <ul> <ul> <li> Macarrão instantâneo da sua marca favorita </li> <li> 600 ml de água </li> </ul> Listas numeradas <ol> <ol> <li> Macarrão instantâneo da sua marca favorita </li> <li> 600 ml de água </li> </ol>
Links Um site é formado por um conjunto de páginas que estão interligadas. Para permitir que um usuário navegue de uma página para outra, devemos utilizar os links. <a href = "pagina2.html"> Exemplo de link com caminho relativo </a> <a href = "outros/pagina3.html"> exemplo de link com caminho relativo </a> <a href = "http://www.americanas.com.br"> Exemplo caminho absoluto </a> Links com IMAGENS Um site é formado por um conjunto de páginas que estão interligadas. Para permitir que um usuário navegue de uma página para outra, devemos utilizar os links. <p>exemplo de link com caminho relativo com Imagens</p> <a href = "pagina2.html"> <img src="img/security-lock.jpg" /> </a> <p> Outro exemplo de link com caminho relativo </p> <a href = "outros/pagina3.html"> <img src="img/tecinformatica.jpg" /> </a> <p>exemplo de link com caminho absoluto</p> <a href = "http://www.americanas.com.br"> <img src="img/ubuntu.jpg" /> </a> TABELAS Elemento <table> Quando surge a necessidade de exibir dados de forma tabular em páginas web. <table> <tr> <th> Marca </th> <th> Modelo </th> <th> Ano </th> </tr> <tr> <td> Toyota </td> <td> Corolla </td> <td> 2010 </td> </tr>
<tr> <td> Honda </td> <td> Civic </td> <td> 2011 </td> </tr> <tr> <td> Citroen </td> <td> C3 </td> <td> 2012 </td> </tr> </table> CSS - (Cascading Style Sheets) - O CSS é uma (folha de estilo em castata) utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação como HTML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento. Assim como a linguagem HTML, a linguagem CSS é definida pelo W3C. Você pode consultar a especificação do CSS no endereço http://www.w3.org/style/css/specs. O W3C faz diversas recomendações sobre como implementar as funcionalidades do CSS. Todo elemento HTML, no corpo de uma página web, está contido em um box. Considere o documento HTML abaixo.
O box de um elemento HTML é composto por conteúdo (content), margem interna (padding), borda ( border) e margem externa (margin).
Margem externa superior (margin-top) Borda superior (border-top) Margem interna superior (padding-top) Altura do conteúdo (height) Margem interna inferior (padding-bottom) Borda inferior (border-bottom) Margem externa inferior (margin-bottom) Podemos aplicar regras de formatação para cada elemento HTML. Observe a estrutura de uma regra CSS. O seletor determina para quais elementos a regra de formatação deve ser aplicada. Por exemplo, a propriedade font-size é utilizada para definir o tamanho da fonte utilizada nos textos. Folha de estilho externa (External style sheet). Podemos separar o código HTML do código CSS definido as regras de formatação em um arquivo independente. FOLHA DE ESTILO EXTERNA <!DOCTYPE html> <html lang="pt-br"> <!-- cabeçalho --> <head> <meta charset ="UTF-8" /> <title> Desenvolvimento Web </title> <link rel="stylesheet" type="text/css" href="css/arquivo.css" /> </head>
// ------------------------------ HTML -------------- <!DOCTYPE html> <html> <head> </head> <body> <h1>meu primeiro exemplo CSS </h1> <p>este é o primeiro paragrafo </p> </body> </html> // ------------------------------ CSS -------------- body { } background-color: #d0e4fe; h1 { color: orange; text-align: center; } p { font-family: "Times New Roman"; font-size: 20px; }
CORES HEXADECIMAL - Há diversas formas de escolher uma cor na linguagem CSS. A quantidade de cores suportada pela linguagem CSS é 16.777.216. Como vimos apenas 147 cores foram nomeadas. Para escolher uma cor que não possui um nome, podemos utilizar o código hexadecimal da cor desejada. Todas as cores possuem um código hexadecimal. Veja o código hexadecimal das cores básicas. http://html-color-codes.info/codigos-de-cores-html/ AGRUPAMENTOS DE SELETORES Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Separe cada seletor com uma vírgula. A cor de todos os cabeçalhos será verde. h1, h2, h3, h4, h5, h6 { color: #00FF00; } Seletor ( CLASS ) No HTML as regras seriam aplicadas conforme abaixo: <p class = "sobre"> Este parágrafo está falando sobre a empresa. </p> <p class = "venda"> Este parágrafo esta detalhando como comprar </p> <p class = venda > Este parágrafo continua falando sobre venda </p> No CSS as regras seriam aplicadas conforme abaixo: p.sobre { color:#00ffff; /* azul claro - aqua */ } p.venda { color:#0000ff; /* azul blue */ }
Seleletor ( ID ) O seletor ID é único. Um seletor ID só pode ser aplicado a um elemento HTML. No HTML as regras seriam aplicadas conforme abaixo: <p id = "anuncio"> Este parágrafo está falando sobre a empresa. </p> <p id = "promocao"> Este parágrafo esta detalhando como comprar </p> No CSS as regras seriam aplicadas conforme abaixo: /* este é um comentário*/ #anuncio { color:#808000; /* verde - olive */ } #promocao { color:#008080; /* verde teal */ } A PROPRIEDADE FONT color:...cor da fonte font-family:...tipo de fonte font-size:...tamanho de fonte font-style:...estilo de fonte font-variant:...fontes maiúsculas de menor altura font-weight:...quanto mais escura a fonte é (negrito) color cor da font No HTML as regras seriam aplicadas conforme abaixo: <h1>cabeçalho com letras vermelhas</h1> <h2>cabeçalho com letras verdes</h2> <p>parágrafo com letras azuis</p> No CSS as regras seriam aplicadas conforme abaixo: h1 {color: #FF0000;} h2 {color: #00FF00;} p {color: rgb(0,0,255);}
font-family - O tipo de fonte (aplicada no css) No CSS as regras seriam aplicadas conforme abaixo: h2 {font-family: arial, helvetica, serif;} p {font-family: sans-serif;} font-size - O tamanho de fonte (aplicada no css) h1 {font-size: 14px;} h2 {font-size: smaller;} p {font-size: 100%;} font-style - O estilo de fonte (aplicado no css ) h1 {font-style: italic;} h2 {font-style: normal;} p {font-style: oblique;} /* um pouco mais deitado */ font-variant - fontes maiúsculas "menores" ( aplicado no css ) h3 {font-variant: normal;} p {font-variant: small-caps;} font-weight - Peso das fontes - negrito (intensidade da cor) {font-weight: bold;} BACKGROUND-COLOR A propriedade background-color é utilizada para definir a cor do background dos elementos HTML. Exemplo: backgrond-color background-color: yellow background-color: #c1a4cd
Background-image A propriedade background-image é utilizada para definir a imagem que deve ser utilizada como background de um elemento HTML. background-image: url( bg-image.png ) background-repeat Por padrão, se uma imagem utilizada como background for menor do que o box do elemento HTML correspondente, ela será replicada na horizontal e na vertical. A propriedade background- repeat permite controlar como essa replicação deve ser realizada. Essa propriedade aceita os seguintes valores: Valor repeat repeat-x repeat-y no-repeat Descrição A imagem de background é replicada na horizontal e na vertical (padrão) A imagem de background é replicada apenas na horizontal A imagem de background é replicada apenas na vertical A imagem não é replicada
Quebrar palavras grantes no texto <wbr/> O recurso quebra uma palavra quando não cabe na página reduzida, assim não será jogada para próxima linha abaixo. Informa que pode ser quebrado quando necessário. <wbr/> Este recurso além de quebrar a palavra quando não couber ao reduzir página é colocado um (-) hífen. Informa que pode ser quebrado quando necessário. CRIANDO FORMULÁRIOS <h1> Criando Formulários</h1> <label> Telefone: </label> <input type="tel" name="txttel" size="15" maxlength="15" title="digite seu telefone"> <label for="usu1"> Usuário 1 </label> <input type="text" name="usu1" size="20" maxlength="20"> <label for="senha1"> Senha 1</label> <input type="text" name="senha1" maxlength="8"> <br> </p> <label for="usu2"> Usuário 2</label> <input type="text" name="usu2" size="20" maxlength="20" readonly=""> <label for="senha2"> Senha 2</label> <input type="password" name="senha2" maxlength="8"> </p> <h2> Botões de rádio </h2> <label> Selecione Cargo: </label> <input type="radio" name="radcargo" value="vend">vendedor <input type="radio" name="radcargo" value="assi">assistente <input type="radio" name="radcargo" value="asse">assessor
<h2> Caixas de seleção </h2> <label> Interesses: </label> <br> <input type="checkbox" name="ckcine" value="cine">cinema <br> <input type="checkbox" name="ckespe" value="espo">esporte <br> <input type="checkbox" name="ckviag" value="espo">viagem <br> <input type="checkbox" name="ckleit" value="leit">leitura <br> <h2> Select - Combobox </h2> <label id="labmod" for="mod"> Modalidade Ensino</label> <select name="mod" id="mod"> <option value=""></option> <option value="01">presencial</option> <option value="02">distância </option> <option value="03">em curso</option> <option value="04">não Concluído</option> </select> <h2> Select - Combobox - GRUPOS </h2> <label id="labsoft" for="soft">selecione um Software</label> <select name="soft" id="soft"> <optgroup label="editores"> <option value="00" selected="selected">escolha Software </option> <option value="01">editor de Texto</option> <option value="02">notepad++ </option> <option value="03">aptana</option> <option value="04">netbeans</option> </optgroup> <optgroup label="navegadores"> <option value="05">safari</option> <option value="06">firefox </option> <option value="07">opera</option> <option value="08">chrome</option> </optgroup> </select>
<h2> Fieldset - Caixa com borda </h2> <fieldset> <legend> Todas informações na caixa</legend> <label for="usu1"> Usuário 1 </label> <input type="text" name="usu1" size="20" maxlength="20"> </fieldset>