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>

https://developer.mozilla.org/en/docs/Web/HTML/Element/link

CSS működése

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works

CSS működése

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

p {
  color: red;
}

CSS működése

http://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left

Validátor

https://validator.w3.org/nu/?doc=https%3A%2F%2Fmomecode.github.io%2Fpresentations-2017-spring%2F

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+

https://developers.facebook.com/docs/sharing/webmasters#markup

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

https://www.otpbank.hu/portal/hu/fooldal

Facebook share

https://developers.facebook.com/

MOME CODE #4 - HTML/CSS alapok

By Péter Schmíz

Made with Slides.com

MOME CODE #4 - HTML/CSS alapok

HTML, CSS, CSS működése, validálás, SEO, social

  • 579

More from Péter Schmíz