MOME CODE #4

HTML/CSS alapok

HTML, CSS kapcsolat

HTML = struktúra
CSS = stílus


<header class="main"></header>

<header class="main left"></header>

<header id="featured"></header>

<header id="featured" class="main left"></header>

<header data-kacsa="majom"></header>

<header data-teve></header>

<header><header> element.</header>

HTML alapok

Class, Id other attributes

HTML, CSS kapcsolat

<!doctype html>
<html lang="en">
  <head>
    <title>How She Got There</title>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet">
    <link rel="stylesheet" href="style/style.css">
  </head>
  <body>
    ...
  </body>
</html>

CSS működése

CSS működése

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

CSS működése

Validátor

SEO

  • mikor indexelte be az oldalt a kereső
  • az oldalra mutató oldalak minősége, megbízhatósága
  • tartalom (minőség és hossz)
  • sebesség
  • mobil támogatás
  • kulcsszavak, de okosan
  • microdata

SEO

Social

  • Facebook
  • Twitter
  • G+

Meta tagek


<meta charset="utf-8">
<meta property="og:image" content="/logo.jpg" />
<meta property="og:image" content="/logo.jpg" />
<meta http-equiv="refresh" content="30">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="Best course ever!">
<meta name="author" content="Kovats Bela">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="googlebot" content="noindex" />

Accessibility

  • WCAG 2.0
  • a11y, i18n, l10n
  • Voiceover, JAWS

Facebook share

Made with Slides.com