Ir para conteúdo
uninerds

Playlist de como programar em HTML5 e CSS

Recommended Posts

Olá pessoal, estamos criando algumas vídeo aulas de programação em HTML5 e CSS e gostaríamos que vocês dessem críticas e sugestões do que podemos estar fazendo para melhorar
Segue o link da playlist com 22 vídeos de HTML5
https://www.youtube.com/playlist?list=PLi3qhjm7dbeeC5h0NDfUiRqEvE0v08Pdd

 

1 - O que é HTML, CSS e JavaScript?
É explicado o que é HTML, CSS e JavaScript e porque é necessário conhecer estas 3 linguagens para programar para Web

 

2 - Programas Necessários
É mostrado os programas necessários para começar a programar (estamos fazendo as vídeo aulas no sistema operacional Xubuntu)

 

3 - Primeiro HTML5
Começamos a mostrar de fato como começar a programar em HTML e como fazer para validar o código

 

4 - Hierarquia de títulos e linha horizontal
Como fazer hierarquia de títulos e colocar linha horizontal
Tags: h1 até h6 e hr

 

5 - Parágrafo, quebra de linha e texto pré-formatado
Como fazer parágrafo, quebra de linha e texto pré-formatado
Tags: p, br e pre

 

6 - Formatação de texto
Como fazer formatação de texto
Tags: b, strong, i, em, mark, small, sub, sup, ins e del
Atributos: cite e datetime das tags ins e del

 

7 - Citações
Como fazer citações
Tags: q, blockquote, cite, address, abbr e bdo
Atributos: title da tag abbr, dir da tag bdo e cite das tags q e blockquote

 

8 - Comentários e comentários condicionais
Como fazer comentário e para que serve

 

9 - Arquivo Externo
Como fazer referência de arquivo externo no HTML

 

10 - Links | Parte 1
Como fazer links para abrir outros HTML, enviar e-mail, executar JavaScript e direcionar para um local específico
Tag: a
Atributos: href, hreflang e type

 

11 - Links | Parte 2
Como criar links para download, diferentes formas de abrir no navegador e vulnerabilidade do target="_blank"
Tag: a
Atributos: download e target
Valores para o target: _self, _blank, _top e _parent

 

12 - Links | Parte 3
Como resolver vulnerabilidade do target="_blank" e o atributo rel
Tag: a
Atributo: rel
Valores para o rel: alternate, author, bookmark, prev, next, external, help, license, search, tag, nofollow, noreferrer, noopener

 

13 - Bloco e Linha
O conceito de tag de bloco e de linha
Tags: div e span

 

14 - Imagem | Parte 1
Como colocar imagem no HTML
Tag: img
Atributos: src, alt, width, height, crossorigin, ismap e longdesc
Valores para o crossorigin: anonymous e use-credentials

 

15 - Imagem | Parte 2
Como fazer mapeamento de imagem para colocar link dentro dela
Tags: img, map e area
Atributo da img: usemap
Atributo da map: name
Atributos da area: shape, coords e alt
Valores para o shape: circle, rect e poly

 

16 - Imagem | Parte 3
Como definir imagens diferentes para dispositivos com características de tela diferentes
Tags: img, picture e source
Atributos da img: srcset e sizes
Atributos da source: srcset, sizes, media e type

 

17 - Tabela | Parte 1
Como criar tabela em HTML
Tags: table, caption, tr, th e td
Atributos da th: abbr, sorted e scope
Atributos da th e da td: colspan, rowspan e headers
Valores para o scope: col, colgroup, row e rowgroup

 

18 - Tabela | Parte 2
Como altarar estilo de uma coluna inteira e definir cabeçalho, corpo e rodapé da tabela
Tags: colgroup, col, thead, tbody e tfoot
Atributo da colgroup e col: span

 

19 - Lista
Como criar lista não-ordenada, ordenada e de descrição
Tags: ul, li, ol, dl, dt e dd
Atributos da ol: type, reversed e start
Atributos da li quando estiver na ol: value
Valores para o type: 1, a, A, i e I

 

20 - Iframe
Como colocar uma página dentro de outra em HTML
Tag: iframe
Atributos: src, srcdoc, width, height, name e sandbox
Valores para o sandbox: allow-pointer-lock, allow-scripts, allow-forms, allow-top-navigation, allow-same-origin e allow-popups

 

21 - Atributo Class
Qual a importância do atributo class e como utilizar ele em CSS e JavaScript

 

22 - Atributo Id
Qual a importância do atributo id e como utilizar ele em CSS e JavaScript

 

Segue o link da playlist com 17 vídeos de CSS
https://www.youtube.com/playlist?list=PLi3qhjm7dbedkcSwqOrGYHD_E_0H7Nopj

 

1 - O que é HTML, CSS e JavaScript?
É explicado o que é HTML, CSS e JavaScript e porque é necessário conhecer estas 3 linguagens para programar para Web

 

2 - Programas Necessários
É mostrado os programas necessários para começar a programar (estamos fazendo as vídeo aulas no sistema operacional Xubuntu)

 

3 - Primeiro CSS
Como fazer a integração entre HTML e CSS

 

4 - Cores
Como definir cor por nome, hexadecimal, RGB, HSL, RGBA e HSLA

 

5 - Initial e Inherit
Como utilizar os valores initial e inherit para propriedades em CSS

 

6 - Consulta de mídia
Como definir estilos diferentes para tipos de dispositivos diferentes e mesmo tipo de dispositivo com características diferentes

 

7 - Borda | Parte 1
Como fazer bordas em CSS
Propriedades: border, border-color, border-radius, border-style e border-width
Valor para border-color: transparent
Valores para border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset e outset
Valores para border-width: medium, thin e thick

 

8 - Borda | Parte 2
Como alterar as propriedades da borda em cada lado
Propriedades: border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-left, border-left-color, border-left-style, border-left-width, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-right, border-right-color, border-right-style, border-right-width, border-top, border-top-color, border-top-style e border-top-width

 

9 - Largura e Altura
Como definir largura e altura em CSS e também valor mínimo e máximo para cada uma
Propriedades: width, height, min-width, max-width, min-height e max-height

 

10 - Margem
Como colocar margem em CSS, centralizar conteúdo e um cuidado que deve ter ao utilizar margem
Propriedades: margin, margin-top, margin-right, margin-bottom e margin-left

 

11 - Preenchimento
Como colocar preenchimento em CSS
Propriedades: padding, padding-top, padding-right, padding-bottom e padding-left

 

12 - Excesso
O que fazer quando o conteúdo de uma tag é maior que a largura e/ou altura
Propriedades: overflow, overflow-x e overflow-y
Valores para as propriedades: visible, hidden, scroll e auto

 

13 - Modelo de Caixa
Qual é o conceito de modelo de caixa e porque é importante conhecer ele para montar o layout de uma página

 

14 - Fundo
Como alterar a cor de fundo, colocar imagem como fundo e definir a posição da mesma
Propriedades: background, background-color, background-image, background-repeat, background-attachment e background-position
Valores para background-repeat: repeat, repeat-x, repeat-y, no-repeat, space e round
Valores para background-attachment: scroll, fixed e local
Valores para background-position: left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom

 

15 - Contorno
Como colocar contorno no conteúdo utilizando CSS
Propriedades: outline, outline-color, outline-style, outline-width e outline-offset
Valor para outline-color: invert
Valores para outline-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset e outset
Valores para outline-width: medium, thin e thick

 

16 - Formatação de Texto | Parte 1
Como fazer formatação de texto utilizando CSS
Propriedades: color, direction, unicode-bidi, letter-spacing, line-height, text-align, text-indent, text-transform, word-spacing e text-shadow
Valores para direction: ltr e rtl
Valores para unicode-bidi: normal, embed, bidi-override, isolate, isolate-override e plaintext
Valor para line-height: normal
Valores para text-align: left, right, center e justify
Valores para text-transform: none, capitalize, uppercase e lowercase
Valor para word-spacing: normal

 

17 - Formatação de Texto | Parte 2
Como fazer formatação de texto utilizando CSS
Propriedades: text-decoration-line, text-decoration-color, text-decoration-style, text-decoration, white-space, vertical-align e text-overflow
Valores para text-decoration-line: none, underline, overline e line-through
Valores para text-decoration-style: solid, double, dotted, dashed e wavy
Valores para white-space: normal, nowrap, pre, pre-line e pre-wrap
Valores para vertical-align: baseline, sub, super, top, text-top, middle, bottom e text-bottom
Valores para text-overflow: clip e ellipsis

 

PS:
- Como temos nossos serviços seculares que é como conseguimos o sustento não teremos como responder todos os comentários de imediato, mas de qualquer forma agradecemos desde já a ajuda

- Sempre que tiver vídeo novo atualizaremos este tópico

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Paulo Ladeira
      Qual o problema nas instruções de envio ao parâmetro data do Ajax?
      Já fiz outro teste com a tag input e deu certo! Já com o texto, não vai...!
       
      <div class="container-fluid">
            <div class="row">
                 <div class="col-md-2"></div> 
                 <div class="col-md-8">
                     <form method="POST" id="seleciona">      
                           <a href="#" name="acessorio1">VIDRO ELÉTRICO</a><br />
                           <a href="#" name="acessorio2">AR CONDICIONADO</a><br />
                      <input type="submit" value="Submit">
                     </form> 
                 </div>  
           </div>
       </div>
       <div class="div"></div>
       
      $(document).ready(function(){
         $("#seleciona a").click(function() {
           var txt = $(this).serialize();    
       
         $.ajax({
           type:'POST',
           url:'ajax3.php',
           data: txt,
           success:function(resultado) {
               $('.div').html("Resultado: "+resultado);
           },
           error:function() {
               alert("ocorreu um erro");
           }
          });   
        });
      });
       
      [ ajax3.php ]
      <?php
      echo $_POST['acessorio1'];
      echo $_POST['acessorio2'];
      ?>
    • Por wellingtonmelo
      Olá turma, beleza?
       
      Tenho bom conhecimento em HTML, CSS, mas não sei fazer coisas dinâmicas com javascript, jquary etc.
       
      Eu estou montando um projeto, estou responsável pelo design e um amigo pela programação.
       
      A página do produto vende em grosso, ao invés de adicionar 1 produto ao carrinho, adiciona 12.
       
      Desses 12, precisa definir os tamanhos das sandálias, são 3 tamanhos disponíveis.
      35/36
      37/38
      39/40
      Dai o usuário precisa dizer quantos pares de cada tamanho ele deseja, precisa fechar em 12.
      Montei o HTML com bootstrap, ficou assim:
       
      O usuário insere a quantidade e o campo QNT DISPONIVEL subtrai o valor do 12, exemplo:
      QNT DISPONIVEL: 9
      35/36 = 3
      37/38 =
      39/40 =
       
      QNT DISPONIVEL: 4
      35/36 = 3
      37/38 = 5
      39/40 =
       
      QNT DISPONIVEL: 0
      35/36 = 3
      37/38 = 5
      39/40 = 4
       
      E se não for pedir demais, alguma limitação para o usuário não poder inserir um valor maior que o permitido. Algum ninja do javascript ou outra linguagem consegue me dar uma dica sobre isso? Realmente não sei javascript.
       

       
      Segue o código que estou utilizando:
      <div class="form-contato"> <form action="" method="post" name="formcontato" onSubmit="return validar();" class="form-horizontal"> <script language="JavaScript" src="javascripts/cadastro.js" type="text/javascript"></script> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">QNT. DISPONÍVEL</label> <div class="col-sm-9"> <input type="number" class="form-control" id="cad_nome2" value="12" name="cad_nome" size="2" disabled> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">Tamanho 35/36</label> <div class="col-sm-9"> <input type="number" class="form-control" id="cad_sobrenome" name="cad_sobrenome" size="2" placeholder="Informe a quantidade..."> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">Tamanho 37/38</label> <div class="col-sm-9"> <input type="number" class="form-control" id="cad_sobrenome" name="cad_sobrenome" size="2" placeholder="Informe a quantidade..."> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-3 control-label" style="font-family: Lato, sans-serif!important;">Tamanho 39/40</label> <div class="col-sm-9"> <input type="number" class="form-control" id="cad_sobrenome" name="cad_sobrenome" size="2" placeholder="Informe a quantidade..."> </div> </div> </form> <br><br> <div class="btn-group"> <div class="adicionar-ao-carrinho"> {botao} </div> </div> </div>  
      Gratidão!!!
    • Por Robson Augusto
      Bom dia não sei se alguém pode me ajudar, pois nao conheço sobre programação, mas me identifico....
       Meu problema é seguinte tenho uma site que configurei no app osclass, site de anúncios, tem opção de anúncios Premium e destacar o anúncio, mas a função destacar tem que fazer configuração conforme se pede abaixo....
       
       
       
      Configurando seu tema
      Para poder usar a característica destacar anúncio, você precisa fazer algumas mínimas modificações no seu tema.:
      Na página de pesquisa do template, você precisa adicionar o seguinte atributo classe na div do anúncio
                         class="<?php osc_run_hook("highlight_class"); ?>"
                    
       
      o que sei é que essa class deve trabalhar em armonia com    <div class="estate"> , mas qdo coloco o código que se pede junto dela, o anúncio se destaca mas há uma desconfiguração dos anúncios...
       
       

       
      <?php $i = 0; ?>
              <?php while(osc_has_items()) { $i++; ?>

                     <div class="estate">
                         <div class="left" >
        
                            <?php if( osc_price_enabled_at_items() ) { ?><div class="price"><?php echo osc_item_formated_price() ; ?></div> <?php } ?>
                         <a href="<?php echo osc_item_url() ; ?>"><?php if( osc_images_enabled_at_items() ) { ?>
                             <?php if( osc_count_item_resources() ) { ?>
                                 <img src="<?php echo osc_resource_thumbnail_url() ; ?>" title="<?php echo osc_item_title(); ?>" alt="<?php echo osc_esc_html(osc_item_title()); ?>"/>
                             <?php } else { ?>
                                 <img src="<?php echo osc_current_web_theme_url('images/no_photo.gif') ; ?>" />
                             <?php } ?>
                   
                         <?php } ?>
                         </a>
                     </div>
                     <div class="right">
                         <div class="title">
                             <h3><a href="<?php echo osc_item_url() ; ?>"><?php if(strlen(osc_item_title()) > 101){ echo mb_substr(osc_item_title(), 0, 100,'UTF-8').'...'; } else { echo osc_item_title(); } ?></a></h3> </div>
                              <div class="list_des">
                              <?php if(strlen(osc_item_description()) > 351){ echo strip_tags( mb_substr(osc_item_description(), 0, 350,'UTF-8').'...'); } else { echo strip_tags (osc_item_description()); } ?>
                              </div>
                          <div class="more" style="display:inline;">
                         
                         <div class="city" style="float:left;">&nbsp;&nbsp;<i class="fa fa-map-marker fa-lm2"></i>&nbsp;<?php echo osc_item_city();?></div>
                         <div class="data" style="float:right;"><i class="fa fa-clock-o fa-lm2"></i>&nbsp;<?php echo osc_format_date(osc_item_pub_date()); ?></div>
                             

                          </div>
                     </div>
                 </div>
                  <?php if( $i == 5 ) { ?>
                  <?php osc_run_hook('search_middle'); ?>
      <?php } ?>
             <?php } ?>
              <br>


       
       
    • Por Ygor Guedes
      Pessoal, boa tarde. Gostaria de uma ajuda; tenho a seguinte consulta no mysql:
      select * from equipamento_cadastro WHERE numero_serie like '%16%' AND marca_equipamento like '%Choice%' AND modelo_equipamento like '%Choice%' AND nome_equipamento like '%Computador%' AND meio_obtencao like '%Compra%' AND situacao_equipamento like '%Ativo%' AND tipo_equipamento like '%Computador embarcado%' AND data_compra BETWEEN '2018-12-04' AND '2018-12-05';
      O problema que está dando é que não retorna nada do meu BD quando a data_compra fica em branco.
      Fico no aguardo se alguém puder me ajudar
    • Por carloselsb
      Estou com um projeto em que após o login, carrego todos os dados primordiais do usuário em um localStorage. Uma vez logado, esse objeto JSON armazenado como string criptografada pode ser acessado offline, inclusive. Porque trata-se de um projeto web embarcado em um webview Java Android. Pois bem. Estou com um cliente que excedeu esse limite por ter mais de 30K linhas de informação especifica que é transformada em string e posteriormente criptografada. Lógico que isso excedeu o limite do localStorage.
       
      localStorage.setItem('corexmr', GARRA.Const.Criptografia.set(JSON.stringify(GARRA)));
      Minha primeira dúvida foi saber se o limite era empregado a unidade do localStorage usado ou se esse limite é do uso do LS no projeto. Tirei essa duvida porque criei uma função de empilhamento de LS, monitorando o limite distribuido em cada. Então, se seu fizesse um armazenamento, eu poderia realizar um stringfy, criptografar, mensurar o tamanho e dividir pelo limite em storages como 'core', 'core1', 'core2', ...
       
      GARRA: { Methods: { localStorage: { limitcharacter: 5000000, set: function(nome, obj) { var objString = GARRA.Const.Criptografia.set(JSON.stringify(obj)); if (GARRA.Methods.localStorage.limitcharacter > objString.length) { localStorage.setItem(nome, objString); } else { var calc = (objString.length / GARRA.Methods.localStorage.limitcharacter), i = 0, start = 0; while (i <= calc) { localStorage.setItem((i === 0) ? nome : nome + i.toString(), objString.substr(start, GARRA.Methods.localStorage.limitcharacter)); start = (start + GARRA.Methods.localStorage.limitcharacter); i++; } } }, load: function(nome) { var end = false, i = 0, content = ''; while (!end) { if (localStorage.getItem((i === 0) ? nome : nome + i.toString()) == null) { end = true; } else { content += localStorage.getItem((i === 0) ? nome : nome + i.toString()); } i++; } return JSON.parse(GARRA.Const.Criptografia.load(content)); } } } }
      Mas mesmo assim cheguei ao limite. 
      Pergunta:
      - Existe uma solução alternativa, para quem quer continuar a armazenar localmente no cliente sob regime de persistência?
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.