Download presentation
Presentation is loading. Please wait.
1
Writing HTML made easier Telerik School Academy http://academy.telerik.com 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 http://emmet.io/download/ http://emmet.io/download/
5
The cool thing about Emmet
6
Emmet has a special command for generation a HTML Document Outline: ! then TAB generates HTML 5 document ! <head> Document Document </head><body></body></html> TAB
7
Emmet is a tool for fast generating HTML Write an HTML tag name and press TAB: ul <ul></ul> div <div></div> TAB Emmet uses CSS-like syntax for #ID and.CLASS nav#main-nav TAB div.widget ul#tags-list.comma-list <ul id="tags-list" class="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} <header> Telerik School Аcademy Telerik School Аcademy </header> TAB
10
Tags can be nested using the ">" operator Just like in CSS header>h1>a{Telerik School Academy} <header> Telerik School Аcademy Telerik School Аcademy </header> TAB " { " and " } " mark content (text)
11
Much like the ">" Emmet the "+" operator marks siblings Just like in CSS #root>header+section+aside#widgets+footer </div> 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 </div> TAB
13
Live Demo
14
Emmet has a feature to multiply elements i.e. create N divs: ul>li.list-item*5 <ul> </ul> TAB And even easier: ul>.list-item*5 TAB <article> </article><article> </article>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) <header> Site Header Site Header </header> TAB
17
Live Demo
18
Emmet can number the values, IDs and classes Using the '$' symbol select>.city$$[value=$]*5 </select> TAB
![ Emmet can number the values, IDs and classes Using the $ symbol select>.city$$[value=$]*5 </select> TAB](http://images.slideplayer.com./12/3385321/slides/slide_18.jpg " Emmet can number the values, IDs and classes Using the $ symbol select>.city$$[value=$]*5 </select> 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
![ HTML attributes are set inside square brackets [ and ] a[href= # ] img[src= ninja.png ] input[type= radio name= numbers[] value= $ ]*3 TAB TAB TAB](http://images.slideplayer.com./12/3385321/slides/slide_20.jpg " 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# Николай Костов - блог за програмиране http://academy.telerik.com
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
Similar presentations
