Curso Celke

Anotações referentes as aulas: O que é HTML; Requisitos; Sintaxe básica do HTML; Como trabalhar com texto no HTML; Como usar cores no HTML.

O que é HTML O HTML (Hyper Text Markup Language), é uma linguagem de marcação usada para estruturar e organizar o conteúdo de páginas.   Requisitos Para programar HTML, é preciso utilizar algum editor de texto (como Notepad++ ou o próprio Bloco de Notas), também é preciso de um Browser (Navegador). Não esqueça: sempre salve o arquivo com a extensão .html.   Sintaxe básica do HTML Temos as tags de abertura <> e tags de fechamento . Além de serem chamadas de tags, podemos chama-las de marcas ou etiquetas. As marcas não são Case Sensitive, ou seja, podemos escrever os comandos sem se importar com letras maiúsculas ou minúsculas (recomendado). Geralmente são escritas assim... Exemplo: comando1="atributo1" /comando p id="parágrafo" /p Lembrando que é possível usar mais de um atributo. !DOCTYPE html, indica que é uma página HTML. meta charset="UTF-8", permite que a página tenha caracteres especiais. Um código indentado facilita a visualização.   Como trabalhar com texto no HTML Há várias formas para implementar textos em páginas HTML. Forma mais simples hx, x corresponde a um número de 1 a 6, sendo 1 o maior e 6 o menor. Não esqueça: não é possível usar hx mais de uma vez. br, usado para quebra de linha. Também é possível escrever br/ ou /br. p /p, usado para criação de parágrafo. !--comentário--, permite escrever um comentário.   Tags para formatação de texto: b /b, usado para escrever em negrito. i /i, usado para escrever em itálico. sub /sub, usado para escrever em subscrito. sup /sup, usado para escrever em sobrescrito.   Lorem Ipsum é um gerador de textos e parágrafo que gera palavras aleatórias.   Como usar cores no HTML As cores podem ser escritas em inglês ou codificadas em números hexadecimais, mistura de cores RGB (1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f) Exemplo: "#550000" ou "White". Atenção: em inglês pode ocorrer problemas em alguns navegadores. https://img.ibxk.com.br/2016/10/25/25130612440085.jpg?ims=328x        

Anotações referentes as aulas: Como criar lista ordenada com HTML; Como criar lista não ordenada com HTML; Tipo de listas; Como inserir imagem com HTML; Como criar link com HTML.

Como criar lista ordenada com HTML Para criar listas ordenadas usaremos a tag OL e a tag LI que define os itens da lista. https://1.bp.blogspot.com/-8ph_SYYwZdo/UPN3BbLWv7I/AAAAAAAAAY4/JFv9YhSN5RM/s1600/IMG14.png   Como criar lista não ordenada com HTML Para criar listas não ordenadas usaremos a tag UL e a tag LI que define os itens da lista. Esse tipo de lista é muito utilizado para implementar menus. https://image.slidesharecdn.com/aula5-141124154058-conversion-gate02/75/aula5-listas-html-5-4-2048.jpg?cb=1671639939   Tipo de listas Para listas ordenadas temos os tipos: type="1", os itens da lista serão numerados com números (padrão). type="A", os itens da lista serão numerados com letras maiúsculas. type="a", os itens da lista serão numerados com letras minúsculas. type="I", os itens da lista serão numerados com números romanos em letras maiúsculas. type="i", os itens da lista serão numerados com números romanos em letras minúsculas. Para listas não ordenadas temos os estilos: list-style-type:disc, os itens da lista serão marcados com círculos preenchidos (padrão). list-style-type:circle, os itens da lista serão marcados com círculos. list-style-type:square, os itens da lista serão marcados com quadrados. list-style-type:none, nenhum dos itens da lista serão marcados. Atenção: o último estilo apresentado pode ser utilizado em menus.   Como inserir imagem com HTML A imagem é inserida utilizando a tag IMG. Nesta tag podemos definir o tamanho, alinhamento, a borda etc. img src ="foto.png" height="200" width="250" width, define a largura da imagem. height, define a altura da imagem. Para colocarmos precisamos identificar o nome do destino da imagem, seu diretório. tag alt, para texto alternativo (caso a imagem não carregue, esse texto aparecerá). tag title, para título da imagem (identificador do que está sendo apresentado). Para subir um diretório: img src="../foto.png" e acessar um diretório: img src="../11-teste/foto.png". Quando acessamos um diretório que está no mesmo nível do arquivo html: img src="imagem/foto.png" .   Como criar link com HTML Link de site para site Para criar links utilizaremos a tag A junto com o atributo href ="página_redirecionada.html ", a palavra apresentada ao usuário e o fechamento da tag A. target="_blank", o atributo target e valor _blank geram uma nova página ao clicar no link. Link entre páginas de um mesmo site Criação de mais de um arquivo .html. Você pode usar a tag UL para implementar um menu. Link para determinado ponto de uma página Colocamos o #, que indica o ID: a href="#elemento" ,ou seja, esse link o redirecionará para o local que o ID elemento. Criando o local com o ID elemento: span id="elenco" /span Criando link para uma imagem Dentro da tag A, escreva a tag IMG, indicando os diretórios.                    

Anotações referentes as aulas: Como criar formulário com HTML; Como criar campo checkbox e radio com HTML; Como criar campo select e textarea com HTML; Como usar as TAG do HTML para criar o layout.

Como criar formulário com HTML Para criação de formulários é utilizado a tag FORM. A tag INPUT é utilizada para criar campos dentro do formulário. Exemplo: INPUT TYPE = "TEXT"   LABEL, indica o que o usuário deve preencher. PLACEHOLDER, permite mostrar um texto no campo em que o usuário preenche. SUBMIT, utilizado para submeter (criar um botão).   Atenção: Pesquise os TYPES de INPUT.   Como criar campo checkbox e radio com HTML INPUT TYPE = "CHECKBOX" Essa tag ´permite que o usuário selecione zero ou mais opções (ou todas). VALUE = "a", indica o valor que será enviado.   RADIO, define um botão de opção. Apenas um termo pode ser selecionado. CHECKED , define um termo pré-selecionado (é possível selecionar mais de um quando usamos checkbox).   Como criar campo select e textarea com HTML SELECT, define uma lista. OPTION, define as opções da lista. SELECTED, deixa qualquer termo pré-selecionado.   TEXTAREA, define um campo de entrada de várias linhas. Exemplo: TEXTARE ROWS="5" COLS='30' ROWS, refere-se as linhas e COLS, refere-se as linhas.   BUTTON, define um botão (quando não é preciso submeter o formulário). ONCLICK, é uma função Javascript (permite transmitir mensagens). Atenção: é recomendável usar o formato INPUT TYPE.   Como usar as TAG do HTML para criar o layout O HTML possui vários elementos que definem diferentes partes de uma página web: HEADER, define um cabeçalho para um documento ou seção. NAV, define um conjunto de links de navegação (menu). SECTION, define uma seção em um documento. ARTICLE, define um conteúdo. ASIDE, define o conteúdo complementar (como uma barra lateral) FOOTER, define um rodapé para um documento ou seção. DETAILS, define detalhes adicionais que o usuário pode abrir e fechar sob demanda SUMMARY, define um título para o DETAILS elemento.