HTML5 CSS3: Aula 20, espaçamento de texto

HTML5 CSS3: Aula 20, configurando o espaçamento de texto.

Nesse caso eu configurei a section, mas é indicado você criar uma configuração para todo o body (corpo do seu site).

Código fonte CSS:
section {
    margin: 10px;
    letter-spacing: 2px; /*espaço entre letras*/
    line-height: 20px; /*altura da linha*/
    word-spacing: 5px; /*espaço entre palavras*/
    text-indent:10px; /*margem da 1ª palavra*/
}

Aula 08, negrito, itálico e sublinhado (no HTML e no CSS)

HTML5 e CSS3: Aula 08, negrito, itálico e sublinhado (no HTML e no CSS).


Nesse vídeo vemos como inserir sublinhado, itálico ou/e negrito via HTML e via CSS.


Código fonte HTML:


 <!DOCTYPE html>


<html>
   <head>
       <title>Aula 8</title>
       <link rel="stylesheet" href="css/nis.css">
 </head>
 <body>

    <p>Texto em negrito: <b>Texto em negrito</b></p>
    <p>Texto em italico: <i>Texto em italico</i></p>
    <p>Texto sublinhado: <u>Texto sublinhado</u> </p>
    <p id="negrito">Texto em negrito</p>
    <p id="italico">Texto em italico</p>
    <p id="sublinhado">Texto sublinhado</p>

  </body>
</html>

Código fonte CSS:

 #negrito {
    font-weight: bold;
}
#italico {
    font-style: italic;
}
#sublinhado {
    text-decoration: underline;
}

HTML5 e CSS3: Aula 07, bookmark e mais um tipo link

HTML5 e CSS3: Aula 07, bookmark e mais um tipo link.

Código fonte html.

<!DOCTYPE html>

<html>
     <body>
          <h3>Linkando para outra página</h3>
          <p>Qualquer texto <a href="http://www.facebook.com/maktubtimaktubti"></a></p>
      
          <h3>Bookmark</h3>
          <p><a href="#identifica"></a></p>
          <p>Textos</p>
          <p>Textos</p>
          <p>Textos</p>
          <p>Textos</p>
          <p>Textos</p>
          <p>Textos</p>
          <p>Textos</p>
          <p>Textos</p>
          <p>Textos</p>
          <p>Textos</p>
          <p>Textos</p>
          <p>Textos</p>
          <p>Textos</p>
          <p>Textos</p>
          <p>Textos</p>
          <p>Textos</p>
          <p>Textos</p>
          <p>Textos</p>
          <p>Textos</p>
          <h1 id="#identifica">AQUI</h1>
     </body>
</html>

HTML5 e CSS3: Aula 12, resetando a configuração padrão de navegadores

A seguir temos o documento do Eric Meyer que reseta as configurações dos navegadores, assim sua página realmente terá o mesmo padrão.
A partir da linha de baixo, copie tudo e salve em um documento .css (inclusive os comentários).

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*http://meyerweb.com/eric/tools/css/reset/*/

HTML5 e CSS3: Aula 05, editando imagens

HTML5 e CSS3: Aula 05, editando imagens.
Nesse vídeo demonstro adicionar legenda, deixar ela em itálico, mudar a cor do fundo, adicionar borda, tirar a imagem do centro, corrigir o espaçamento entre a imagem e a borda da página, adicionar tamanho fixo entre a legenda e a imagem.

Tags utilizadas: figure, figcaption, img e utilizado ID no html.

Código fonte html:

 <!DOCTYPE html>

<html>
<head>
<link rel ="stylesheet" href="css/bordas.css">
</head>
<body>
<figure id="qualquerid"><!--Qualquer comentário-->
 <img src="css/imgcss/0218.jpg">
<figcaption>Legenda</figcaption>
</figure>
</body>
</html>

Código fonte CSS:
figure{
background-coloR: #F2EDED;
border: 1px solid #111111;
text-align: center;
}
figcaption {
font-style: italic;
}
figure {
padding: 5px;
}
#qualquerid {
float: left;
margin: 10px;
}
figcaption {
margin-top: 10px;
}

HTML5 e CSS3: Aula 04, tag sublinhado

HTML5 e CSS3: Aula 04, tag sublinhado.
Não é apenas em títulos que podemos sublinhar uma tag inteira, mas também, por exemplo em parágrafos.

Código fonte HTML:

 <!DOCTYPE thml>

<html>
<head>
 <link rel ="stylesheet" href="css/bordascss.css">
</head>
<body>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
</body>
</html>

Código fonte CSS:
h1{
border-bottom: 2px solid #111111;
}
h2{
 border-bottom: 3px dashed #222222;
}
h3{
 border-bottom: 4px dotted #333333;
}
h4{
border-bottom: 3px double #444444;
}
h5{
 border-bottom: 2px groove #555555;
}
h6{
border-bottom: 2px solid #666666;
}

HTML5 e CSS3: Aula 02. Título, imagem e tags filhos

Neste Vídeo vemos o uso da tag h1, como inserir imagens, breve explicação de tag pai e filho.
Tag p abre um paragrafo.
Durante essa vídeo aula você vê o uso de legenda para imagens, motores de busca como o Google e Bing leem essa legenda.
Identando (endentando ou indentando) o código.

<!DOCTYPE html>

<html>
   <head>
      <title>Olá Mundo</title>
   </head>
   <body>
      <p>Olá Mundo</p>


      <img src= "img/imagem.jpg" alt= "Legenda da imagem para quando ela não puder abrir">
   </body>

</html>