web

ITfest

@vtemian

11-13 Aprilie 2016

$ whoami

structura

11 Aprilie - Introducere în HTML și CSS

12 Aprilie - Introducere în Javascript

13 Aprilie - Pagini dinamice (PHP, Python sau Nodejs)

ne.ws

html

45 min

pauza

5 min

css

35 min

exercitii

35 min

pauza

15 min

pauza

5 min

exercitii

40 min

Ce se intâmplă când intri pe http://google.ro?

GET / HTTP/1.1
Host: google.com
Connection: close
[other headers]

200 OK
[response headers]


<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="en-RO">
    <head>
    <meta content="/images/branding/googleg/1x/googleg_standard_color_128dp.png" itemprop="image">
    <link href="/images/branding/product/ico/googleg_lodp.ico" rel="shortcut icon">
    <meta content="origin" id="mref" name="referrer">
    <title>Google</title>
   <script>(function()
.
.
.
.

<html>

</html>

<head>

<title>

</title>

<body>

<p>

html

hypertext markup language

sgml> html 2.0 >

html 3.2 > html 4.01 >

xhtml 1.0 > html 5 >

html 5.1

http://www.slideshare.net/busaco/25-de-ani-de-web

Bazat pe marcatori (tags)

<!DOCTYPE html>                                                                    
<html>          <!-- început de doc. (element obligatoriu) -->                     
                                                                                   
    <!-- început de antet (tag de început) -->                                     
    <head>                                                                         
    ...         <!-- includere de stiluri CSS, meta-date etc. -->                  
    </head>     <!-- sfârșit de antet (tag de final) -->                           
                                                                                   
    <!-- început de corp: date propriu-zise -->                                    
    <body>                                                                         
    ...         <!-- conținut redat de browser -->                                 
    </body>     <!-- sfârșit de corp -->                                           
                                                                                   
</html>         <!-- sfârșit de document -->

Lista elementelor HTML

referitoare la head

<head>
    <title>ne.ws</title>
</head>

Lista elementelor HTML

referitoare la head

<head>

    <base href="http://google.ro/">
</head>

<body>
    <p><a href="somePlace.html">This</a> will actually link to http://google.ro/somePlace.html.</p>
    <div><img src="someImage.jpg" alt="Some image"></div>
    <p> The location of the above image will be actually be http://google.ro/someImage.jpg.</p>
</body>

Lista elementelor HTML

referitoare la head

<head>

    <link href="eurasianLynx.css" rel="stylesheet">
    <link href="iberianLynx.css" rel="stylesheet" media="print">
    <link href="canadianLynx.css" rel="stylesheet" media="screen and max-width:640">
    <link href="kitty.ico" rel="icon" sizes="32x32 64x64">
    <link href="/about/" rel="author">
    <link href="Felis.html" rel="prev">
    <link href="Leopardus.html" rel="next">
</head>

Lista elementelor HTML

referitoare la head

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="utf-8">     
</head>

Lista elementelor HTML

referitoare la head

<head>

    <style media="print">
        /* Here be CSS applied exclusively when the page is printed */
    </style>    
</head>

<body>
    <div>
        <style scoped>
            /* Here be CSS applied exclusively to this element's parent */
        </style>
        <p>So this element, and everything in its parent div, will get special treatment.</p>
    </div>

Lista elementelor HTML

referitoare la head

<head>

    <script async src="somescript.js"></script>
    <script>
        function koala() {
            alert('KOALA! KOALA!');
        }
    </script>  
</head>

Lista elementelor HTML

vizând structura (sections)

<body>

    <h1>The Daily News</h1>

    <article>
        <h2>Man Eats House</h2>
        <!-- article content -->
    </article>

    <article>
        <h2>Martian Mice Invade Ecuador</h2>
        <!-- article content -->
    </article>
</body>

Lista elementelor HTML

vizând structura (sections)

<body>

    <h1>The Daily News</h1>

    <article>
        <h2>Man Eats House</h2>
        <!-- article content -->
    </article>

    <article>
        <h2>Martian Mice Invade Ecuador</h2>
        <!-- article content -->
    </article>
</body>

Lista elementelor HTML

vizând structura (sections)

<body>

    <nav id="main_nav">
        <ul>
            <li><a href="/tutorials/">Tutorials</a></li>
            <li><a href="/techniques/">Techniques</a></li>
            <li><a href="/examples/">Examples</a></li>
            <li><a href="/references/">References</a></li>
        </ul>
    </nav>
</body>

Lista elementelor HTML

vizând structura (sections)

<body>

    <section id="main_content">
         <h1>Tixall</h1>
         <!-- All about Tixall -->
         <aside>
             <h2>Tixall Obelisk</h2>
             <!-- A short note about Tixall Obelisk -->
         </aside>
         <!-- A bit more about Tixall -->
    </section>

</body>

Lista elementelor HTML

vizând structura (sections)

<body>

    <header>
        <!-- A header for the page. -->
    </header>

    <section>
        <header>
            <!-- A header for the section. -->
        </header>
    </section>

</body>

Lista elementelor HTML

vizând structura (sections)

<body>

    <section>
        <!-- stuff -->
        <footer>
            <!-- A footer for the section. -->
        </footer>
    </section>

    <footer>
        <!-- A footer for the page. -->
    </footer>

</body>

Lista elementelor HTML

vizând structura (sections)

<body>

    <main>
        <article>
            <!-- first article content -->
        </article>

        <article>
            <!-- second article content -->
        </article>
    </main>

</body>

Lista elementelor HTML

vizând structura (sections)

<body>

    <address>
        <p>Contact A. N. Author:</p>
        <ul>
            <li>0123-456-7890</li>
            <li><a href="mailto:an_author@noplaceinteresting.com">Email A. N. Author</a></li>
            <li><a href="http://www.noplaceinteresting.com/contactme/">A. N. Author's Site of Web on the Intertube</a></li>
        </ul>
    </address>

</body>

Lista elementelor HTML

grupare (grouping)

pre blockquote

ol ul li

dl dt dd

figure figcaption

div

Lista elementelor HTML

text

a em strong cite
q dfn abbr data
time code var samp
kbd mark ruby rb rt
rp rtc bdi bdo span
br wbr small i b

u s sub sup

Lista elementelor HTML

tabele

table

tr td th

caption
tbody thead

tfoot colgroup co

Lista elementelor HTML

forms

form input textarea
select option optgroup
datalist label fieldset
legend button output
progress meter keygen

Lista elementelor HTML

embedded

img embed object
param video audio
source track map area iframe

spațiile albe nu au semnificație

marcatorii trebuie să fie închiși și să se împerechieze corect

<div><q>Hello there!</div></q>

valorile atributelor trebuie să fie marcate între ghilimele

<input type=search placeholder= />

incorectitudinile semantice/sintactice nu vor fi semnalate de browser

http://htmldog.com/references/html/tags/

http://html5doctor.com

http://www.slideshare.net/busaco/html5-in-xxx-de-minute

http://www.slideshare.net/busaco/

break;

css

cascading style sheets

as old as html

folosit pentru a aplica un anumit stil documentului

introdus prin marcatorii <link> și <style>

<selector> {

proprietate: valoare;

}

Moșteniri

<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>

p {color:blue; text-decoration:underline}
strong {color:red}

Cascading Style Sheets

Moșteniri

<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>

p {color:blue; text-decoration:underline}
strong {color:red}

Cascading Style Sheets

Selectori

<p class="key" id="principal">

#principal {
  font-weight: bolder;
}

Selectori

class

<p class="key" id="principal">

.key {
  color: green;
}

Selectori

atribute

[ disabled ] { .... }

[ type = 'button' ] { .... }

[ class ~= key ] { .... }

[ lang |= es ] { .... }

[ title *= "example" i ] { .... }

a [ href ^= "https://" ] { .... }

img [ src $= ".png" ] { .... }

Selectori

pseudo-clase

selector:pseudo-class {
  property: value;
}

:link
:visited
:active
:hover
:focus
:first-child
:last-child
:nth-child
:nth-last-child

:nth-of-type
:first-of-type
:last-of-type
:empty
:target

:checked
:enabled
:disabled

Selectori

bazați pe relații

A E

E descedendet a lui A

A > E

E descedendet direct (copil) a lui A

E:first-child

Orice element E, prim copil

B + E

Orice element E, primul `frate` (sibling) a lui B (următorul copil a aceluiași parinte)

Selectori

bazați pe relații

A E

E descedendet a lui A

A > E

E descedendet direct (copil) a lui A

E:first-child

Orice element E, prim copil

B + E

Orice element E, primul `frate` (sibling) a lui B (următorul copil a aceluiași parinte)

Content

A text where I need to <span class="ref">something</span>

.ref::before {
  font-weight: bold;
  color: navy;
  content: "Reference: ";
}

A text where I need to Reference: something

Content

a.glossary:after {
    content: " " url("../images/glossary-icon.gif");
}

web

ne.ws

Ce se intâmplă când intri pe http://google.ro?

html

Bazat pe marcatori (tags)

spațiile albe nu au semnificație

marcatorii trebuie să fie închiși și să se împerechieze corect

valorile atributelor trebuie să fie marcate între ghilimele

incorectitudinile semantice/sintactice nu vor fi semnalate de browser

http://htmldog.com/references/html/tags/

http://html5doctor.com

break;

css

cascading style sheets

as old as html

folosit pentru a aplica un anumit stil documentului

introdus prin marcatorii <link> și <style>

<selector> {

proprietate: valoare;

}

break;

web

More from Vlad Temian