style é um atributo usado para adicionar estilos a um elemento, por exemplo, cor, fonte , tamanho etc. <p style=”color:red;background-color:blue;”> Paragrafo vermelho fundo azul</p> Porém colocar estilos em cada uma das tags HTML não é um boa pratica de desenvolvimento hoje me dia. Pois teríamos a necessidade de alterar os estilos em varias tags da nossa pagina, caso fosse necessário. Então podemos fazer os estilos de forma mais organizada e centralizando essa personalização em uma tag <style></style> e indicando quais tags terão estilos.
A sintaxe desse método é bem simples :
indicamos qual será o seletor , depois qual propriedade iremos alterar e incluímos o valor desejado. O p é o nosso seletor , color a propriedade e blue seu valor. Existem propriedades que possuiem subpropriedade como é o caso do background-color onde background é propriedade e color é a subpropriedade.
<style> p { color: blue; background-color: yellow; } </style>
Experimente as seguinte propriedades para cada parágrafo
<!DOCTYPE html>
<html>
<head>
<title>Titulo da Página</title>
</head>
<body>
<h1>Titulo</h1><!-- titulos podem ter o tamanho de h1 até h6!-->
<p title="teste">Parágrafo</p> <!-- o atributo title apresenta o texto quando o mouse fica em repouso no parágrafo
<p> Parágrafo com quebra<br> de linha</p>
</body>
</html>
Então temos uma construção organizada de tags HTML onde na maioria dos casos se abrimos uma tag ela terá um tag de fechamento.
A tag !DOCTYPE html define para o navegador o tipo de documento para que consiga apresentar os elementos corretamente.
Ela deve aparecer no topo da pagina antes das tags HTML. Esta tag nao diferencia letras maiúsculas e minúsculas.
Uma declaração para uma pagina HTML 5 dever estar no seguinte formato: <!DOCTYPE html>
Atributo lang
Podemos adicionar o atributo lang na tag <html> para indicar em qual lingua estará a nossa página ex:
<html lang=”en”>
Meta tag
<meta charset="utf-8">
Indica qual a codificação queremos em nossa página. É usado pelo navegador para que ele possa entender os caracteres especiais como cedilha e acentos. Esta tag deve ser inserida dentro da tag <head>
Quebra de Linha, itálico ,negrito e sublinhado
<br> Produz uma quebra de linha onde for inserido. com espaçamento menor que um parágrafo <p>
<i> Marca o texto como itálico, ex. <i>itálico</i>
<b> Marca o texto como negrito, ex. <b>negrito</b>
<u> Sublinha o Texto marcado ex. <u>sublinhado</u>
Os links em html são definidos da seguinte forma: <a href=”www.etecjk.com”>site da ETEC JK</a> ,
Onde o atributo href pode indicar uma pagina ou um endereço de internet, o link que aparece é o que fica entre a abertura e fechamento da tag <a>, em nosso exemplo http://www.etecjk.com
Imagens na página HTML
As imagens em uma pagina html são definidas com a seguinte tag:
<img src=”etec.jpg” alt=”Escola Técnica” width=”104″ height=”142″>, onde width é a largura e height a altura da imagem.
Alternativamente é possível também na propriedade src inserir uma url por exemplo, <img src=”http://www.etecjk.com/imagem.jpg” alt=”Escola Técnica” width=”104 height=”142″>, mas atenção a maioria das imagens que estão disponíveis na internet possuem direitos autorais, então não utilize urls de imagens que você não direito ou permissão para usar!
A atributo ALT apresenta o texto alternativo quando a origem(src) da imagem não esta disponível.
Tabelas
As tabelas são tags html que permitem tabular informações para que fiquem mais organizadas abaixo temos um exemplo de tabela que podemos criar. Inicia-se pela tag <table> para informar ao navegador que iremos criar uma tabela, agora iremos usar a tag <tr> para que seja iniciada uma linha na tabela, lembre-se que tabelas são formadas por células , isto é, o cruzamento de uma linha com uma coluna forma a célula, então ao abrir uma tag <tr> você estará indicando uma linha, e nesta linha terá as colunas, as colunas são criadas usando a tag <td>. Tanto as tags <tr> quanto as tags <td> possuem uma tag de fechamento por ex., <tr><td></td></tr>. Normalmente um uma tabela temos a primeira linha como cabeçalho da coluna indicando quais informações a coluna possui, para isso podemos usar a tag <th></th>, esta tag ira deixar o conteúdo da célula em negrito para melhor visualização. Podemos também para melhorar a visualização da tabela colocando uma espessura nas bordas da tabela usando a propriedade border ex., <table border=”1″>.
<table> <tr> <th>cabecalho 1</th> <th>cabecalho 2</th> <th>cabecalho 3</th> </tr> <tr> <td>conteudo 1 linha 1</td> <td>conteudo 2 linha 1</td> <td>conteudo 3 linha 1</td> </tr> <tr> <td>conteudo 1 linha 2</td> <td>conteudo 2 linha2</td> <td>conteudo 3 linha 2</td> </tr> </table>
Alternativamente você pode usar CSS para poder colocar estilos diferentes de bordas na tabela.
Forms
São tags Html para geração de formulários em html, são utilizados para interagir com o navegante/usuário da sua pagina. Elas permitem enviar dados/informações para outras páginas e/ou sistemas. Pense bem, quando você entra em um site de compras, existe a necessidade de fazer uma autênticação no sistema para que o sistema permita que você faça compras, então nesse momento quando queremos entrar no sistema, uma página com um formulário deve ser preenchido, normalmente com um usuário e senha. Após digitação dos dados você deve enviar os dados para o sistema da loja para que ele possa verificar se as informações estão corretas. Qualquer site que precise receber dados do usuário deve apresentar um formulário para ser preenchido. Para criação usamos a seguinte tags:
Entre as tags de abertura e fechamento do form, devemos especificar os campos que o usuário deve preencher.
<input type=”text” name=”” id=””> Esta tag cria um campo para ser preenchido pelo usuario. Podemos observar que esta tag tem atributos, o atributo type serve para informar o tipo de campo o usuário vai preencher, neste caso está atribuido o tipo text que serve para qualquer informação, porém temos vários tipos que podem ser utilizados ex., checkbox, button, color, date, email, file, hidden, image, month, number, password, radio, reset, search, submit, tel, time, url etc.
Em especial dois atributos são importantes na tag <input>, são eles o submit e o reset. O tipo submit é utilizado para enviar o formulário e o tipo reset é utilizado para limpar o formulário.
Além do elemento input existem outros elementos para auxiliar a criação de formulários ex., <label>, <select>, <button>, <fieldset>, <legend>, <datalist>, <output>, <option>, <optgroup>, para mais informações acesse :https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element
