Presentation is loading. Please wait.

Presentation is loading. Please wait.

Writing HTML made easier Telerik School Academy HTML, CSS and JavaScript.

Similar presentations


Presentation on theme: "Writing HTML made easier Telerik School Academy HTML, CSS and JavaScript."— Presentation transcript:

1 Writing HTML made easier Telerik School Academy HTML, CSS and JavaScript

2  Emmet Coding  Overview  Installation and usage  Editor support  Emmet Coding Features

3 Overview and Supported editors

4  Emmet coding is a set of plugins providing high- speed coding and editing of HTML, XML and XSL  Started in 2008 by the name Zen coding  Its latest version is renamed to Emmet coding  Emmet coding is supported in most web development environments:  Visual Studio, Subline Text, Brackets, WebStorm/PhpStorm, Eclipse, Komodo Edit, etc…  Full list of support can be found at

5 The cool thing about Emmet

6  Emmet has a special command for generation a HTML Document Outline:  ! then TAB generates HTML 5 document ! Document Document TAB

7  Emmet is a tool for fast generating HTML  Write an HTML tag name and press TAB: ul

    div
    TAB  Emmet uses CSS-like syntax for #ID and.CLASS nav#main-nav TAB div.widget ul#tags-list.comma-list
      class="comma-list">

      8 Live Demo

      9  Tags can be nested using the ">" operator  Just like in CSS header>h1>a{Telerik School Academy}

      Telerik School Аcademy Telerik School Аcademy
      TAB
    TAB
    TAB"> " Emmet the "+" operator marks siblings  Just like in CSS #root>header+section+aside#widgets+footer
    TAB">  Much like the " Emmet the "+" operator marks siblings  Just like in CSS #root>header+section+aside#widgets+footer
    TAB" title=" Much like the ">" Emmet the "+" operator marks siblings  Just like in CSS #root>header+section+aside#widgets+footer
    TAB">

    12  The "^" operator climbs up the elements #root>header>h1{Telerik Academy} ^section>article ^footer>h2>{The Footer} Telerik Academy Telerik Academy The Footer The Footer

    TAB
    TAB">  The header>h1{Telerik Academy} ^section>article ^footer>h2>{The Footer} Telerik Academy Telerik Academy Th" title=" The "^" operator climbs up the elements #root>header>h1{Telerik Academy} ^section>article ^footer>h2>{The Footer} Telerik Academy Telerik Academy Th">

    13 Live Demo

    14  Emmet has a feature to multiply elements  i.e. create N divs: ul>li.list-item*5

    TAB  And even easier: ul>.list-item*5 TAB
    article*2>header+div+footer TAB

    15 Live Demo

    16  Grouping allows to group an expression  Without taking part of the whole layout  Groups are created using brackets '(' and ')' header>(h1>a{Site Header})+(nav>ul>li*3)

    Site Header Site Header
    TAB

    17 Live Demo

    18  Emmet can number the values, IDs and classes  Using the '$' symbol select>.city$$[value=$]*5 TAB

    19 Live Demo

    20  HTML attributes are set inside square brackets '[' and ']' a[href="#"] img[src="ninja.png"] input[type='radio' name='numbers[]' value='$']*3 TAB TAB TAB

    21 Live Demo

    22 форум програмиране, форум уеб дизайн курсове и уроци по програмиране, уеб дизайн – безплатно програмиране за деца – безплатни курсове и уроци безплатен SEO курс - оптимизация за търсачки уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop уроци по програмиране и уеб дизайн за ученици ASP.NET MVC курс – HTML, SQL, C#,.NET, ASP.NET MVC безплатен курс "Разработка на софтуер в cloud среда" BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране, книги – безплатно от Наков безплатен курс "Качествен програмен код" алго академия – състезателно програмиране, състезания ASP.NET курс - уеб програмиране, бази данни, C#,.NET, ASP.NET курсове и уроци по програмиране – Телерик академия курс мобилни приложения с iPhone, Android, WP7, PhoneGap free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране

    23 1. Create Emmet expression to generate the HTML from the homework-1.html file 2. Create Emmet expression to generate the HTML from the homework-2.html file 3. Create Emmet expression to generate the HTML from the homework-3.html file 4. Create Emmet expression to generate the HTML from the homework-4.html file 5. Create Emmet expression to generate the HTML from the homework-5.html file


    Download ppt "Writing HTML made easier Telerik School Academy HTML, CSS and JavaScript."

    Similar presentations


    Ads by Google