Результати пошуку за запитом: html
Web Frontend | Урок 14. Колонки в Sublime Text 3.
Реализация отображения сразу 2 файлов - HTML и CSS на экране. Для чего и как это делается, в этом уроке.
Пример и реализация в Sublime Text 3.
Посещайте видео блог ITVDN, где, несомненно, найдете для себя нужные и полезные уроки.
004. Основы CSS - Павел Горобцов
Объяснение CSS как языка стилей, которые определяет отображение HTML-документов. Толкование работы CSS с цветом, шрифтами, полями, шириной, строками, высотой, фоновым изображением, позиционированием элементов. Изъяснение основных этапов развития CSS.
Видеокурс ASP.NET MVC 3 Framework. Использование AJAX
Объяснение приложения AJAX – Asynchronous JavaScript and XML. Разъяснение обновление той части страницы, которая определена. Толкование Популярности AJAX, реализация веб приложений. Объяснение создания, названия, расположения проекта - приложения. HTML форма.
Bootstrap 4
Автор: Илья Краевский
Bootstrap – это CSS-фреймворк для разработки кроссбраузерных веб-ориентированных интерфейсов. Он представляет собой набор инструментов, созданный для облегчения разработки веб-приложений и сайтов. Использует CSS и HTML для типографии, форм, кнопок, таблиц, сеток, навигации и т. д., а также дополнительные расширения JavaScript, которые упрощают работу веб-разработчика. Продуманная структура кода HTML, JavaScript и CSS даст вам возможность создавать множество самых разнообразных элементов интерфейса и сетку сайта.
Twitter Bootstrap 3
Автор: Сергій Швайцер
Twitter Bootstrap – это CSS фреймворк для разработки кроссбраузерных веб-ориентированных интерфейсов. Bootstrap представляет собой набор инструментов от Twitter, созданный для облегчения разработки web-приложений и сайтов, и который использует CSS и HTML для типографии, форм, кнопок, таблиц, сеток, навигации и т. д., а также дополнительные расширения JavaScript, упрощающие работу веб-разработчика. Продуманная структура кода HTML, JavaScript и CSS даст вам возможность создавать множество самых разнообразных элементов интерфейса и сетку сайта.
V з MVC. Знайомство з переглядами. Templates. Assets pipeline. Webpack
Автор: Євген Кушвід
Після розгляду принципів організації взаємодії з Контролерами, буде розглянуто відображення даних у HTML і пов'язаних форматах. Буде розглянуто форматування та функціонування веб-сторінок. Приділяється увага принципу повторного використання коду на основі механізмів layout-ів та partial-ів. Поглиблено розглядаються принципи роботи прекомпіляторів html, css & js. Буде виконано оптимізацію завантаження зовнішніх бібліотек та виконано процес прекомпіляції.
HTML5 Web Components
Автор: Дмитро Охріменко
"HTML5 Web Components" - це відео курс, який буде корисний будь-якому веброзробнику. Він присвячений розгляду набору технологій, що дозволяють створювати повторно використовувані HTML-елементи та шаблони, інкапсулювати частини DOM-дерева та легко підключати сторонні бібліотеки. Все це дозволяє уникнути конфліктів стилів, дублювання коду і прискорить веброзробку. Серед вимог до курсу - знання HTML, CSS та JavaScript.
Погляд у HTML6
Автор: Редакція ITVDN
Введение
HTML – простой язык веб-разработки, продолжающий развиваться и обновляться. Сейчас идет работа над шестой версией языка. HTML5, текущая версия HTML, считается одним из самых популярных релизов по сравнению с предыдущими версиями HTML.
Обзор HTML5
В HTML5 появились очень интересные функции, например, поддержка аудио и видео, а также возможность создания оптимизированных для смартфонов сайтов. Кроме того, он освободил разработчиков от использования атрибута type в тегах
и. Он позволил систематизировать контент, используя новые метки
,,и т. д. Однако, HTML5 все еще находится на стадии развития и не является законченным продуктом.
Понимание концепции HTML6
Представьте себе использование тега для присвоения логотипа веб-странице или тега . Было бы удобно, если бы Вы могли использовать тег
без использования нескольких идентификаторов, а сразу использовать или напрямую. Проще говоря, вместо использования
Вы можете просто использовать .
HTML6 – шестой релиз HTML с такой же структурой пространств имен, как у XML. Пространства имен XML помогут Вам использовать тот же тег, не конфликтуя с любым другим тегом. Например, тег, используемый в XHTML DOCTYPE:
xmlns:xhtml="http://www.w3.org/1999/xhtml"
В HTML6 можно будет отходить от определенных спецификаций тегов и использовать теги более понятные и удобные для разработчика.
Пример HTML6
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>Взгляд в HTML6html:title>
<html:meta type="title" value="Заголовок страници">
<html:meta type="description" value="Пример заголовка">
<html:link src="css/mainfile.css" title="Styles" type="text/css">
<html:link src="js/mainfile.js" title="Script" type="text/javascript">
html:head>
<html:body>
<header>
<logo>
<html:media type="image" src="images/xyz.png">
logo>
<nav>
<html:a href="/img1">
a>
<html:a href="/img2">
a>
nav>
header>
<content>
<article>
<h1>Заголовокh1>
<h2>Подзаголовкиh2>
<p>[...]p>
<p>[...]p>
article>
<article>
<h1>Концепт HTML6h1>
<h2>Понимание основh2>
<p>[...]p>
article>
content>
<footer>
<copyright>© 2014copyright>
footer>
html:body>
html:html>
В примере кода HTML6 Вы видите теги . Эти новые элементы с двоеточиями принадлежат к спецификации W3C и HTML6. Например, элемент будет изменять заголовок в браузере, а покажет определенное изображение на экране. Все эти элементы определяются специально для пользователей и не имеют ничего общего с браузером. Они не более чем крюки для JavaScript и таблицы стилей. Они помогут сделать Ваш код более семантичным и правильным.
HTML6 APIs
В HTML6 теги будут содержать двоеточия, например, или и т.д. Давайте посмотрим на каждый тег, использованный в примере выше.
1.
<!DOCTYPE html>
<html:html>
// этот тег эквивалентен тегу
<html>
в предыдущих версиях
HTML документа -->
html:html>
2.
Этот тег – эквивалент тегу . Его цель – получение данных и скриптов, управляющих отображением контента в теге .
<!DOCTYPE html>
<html:html>
<html:head>
<html:title> -->
html:head>
html:html>
3.
Этот тег изменяет заголовок документа HTML в браузере. Он похож на тег
Порівнюємо браузерні двигуни
Автор: Редакція ITVDN
Введение
В данной статье сравнивается четыре самых популярных браузерных движка для WinForms, а именно WebBrowser, Gecko, Awesomium и OpenWebKitSharp.
Исходники для работы:
WebBrowser - 75.9 KB
Awesomium - 16.7 MB
GeckoFX - 9.9 MB
OpenWebKitSharp - 24.6 MB
Небольшие сравнительные характеристики
WebBrowser
Стандартный браузерный движок .NET фреймворка.
Ядро – MSHTML + Active-X, включающий в себя COM IWebBrowser2 MSHTML IWebBrowser2.
Может использоваться для Winforms и WPF.
Gecko
Сторонний браузерный движок.
Ядро – XULRunner, используемый в браузере Firefox.
Имеет только поддержку Winforms.
Awesomium WebControl
Сторонний браузерный движок с настраиваемым внешним ядром.
Ядро - .NET, WebKit.
Поддерживается Mono, WPF и Winforms.
OpenWebKitSharp
Сторонний браузерный движок.
Ядро – WebKit, используемый в браузерах Safari и Chromium (Chrome).
Имеет только поддержку Winforms.
WebBrowser
Gecko
Awesomium
OpenWebKitSharp
Лицензия
Бесплатная
Бесплатная. Open-source: MPL 1.1/GPL 2.0/LGPL 2.1
Бесплатная, если Ваш проект имеет прибыть в $100 тис. (можно купить за $2900)
Бесплатная
Платформы
Winforms, WPF
Winforms
Winforms, WPF, Unity, Mono, SDL
Winforms
Тип процессора
Любой
?
X86
?
Скорость загрузки страницы
Низкая
Средняя
Высокая
Высокая
Требуемые размеры библиотеки DLL
0MB
22.4MB
40.5MB
64.6MB
Остановка GUI при загрузке страницы
Нет
Нет
Да
Да
Минимальная требуемая версия .NET
.NET 2.0 или более ранняя
.NET 2.0 или более ранняя
.NET 4.0
?
Объект, метод, свойство модели
-
WebBrowser-identical
Не WebBrowser-identical
WebBrowser-identical, но многие методы и свойства не работают
Использование контента DOM – set HTML
Да
Да
Да
Только с помощью JS
Использование контента DOM – get HTML
Да
Да
Да, но не работают с отключенным JS
Только с помощью JS
DOM – GetElementById
Да
Да
Только с помощью JS
?
DOM – GetElementsByClassName
Только с помощью JS
Да
Только с помощью JS
?
DOM – GetElementsByTagName
Да
Да
Только с помощью JS
?
Встраивание JavaScript
Да
Да
Да
Да
Отключение JavaScript
Нет
Да
Да
?
Настройка прокси-сервера
Нет
Да
Да
?
Встроенный визуальный редактор HTML
Да
?
Нет
Нет
Проверка HTML синтаксиса
Нет
?
Да
Да
Встроенный менеджер загрузок
?
?
?
Да
Использование WebBrowser
Встроенный визуальный редактор HTML
webBrowser1.Document.DomDocument.GetType().GetProperty("designMode").SetValue
(webBrowser1.Document.DomDocument, "On", null);
Программная вставка HTML элемента
// appends:
//
//
// src="http://dj9okeyxktdvd.cloudfront.net/App_Themes/CodeProject/Img/logo250x135.gif" />
//
var mylink = webBrowser1.Document.CreateElement("a");
mylink.Id = "mylink";
mylink.SetAttribute("href", "http://codeproject.com/");
var myimg = webBrowser1.Document.CreateElement("img");
myimg.Id = "myimg";
myimg.SetAttribute("src",
"http://dj9okeyxktdvd.cloudfront.net/App_Themes/CodeProject/Img/logo250x135.gif");
mylink.AppendChild(myimg);
webBrowser1.Document.Body.AppendChild(mylink);
Выбор DOM элемента – GetElementById
var id = "mylink";
var el = webBrowser1.Document.GetElementById(id);
if (el != null) {
MessageBox.Show("Element with id=\"" + id + "\" has innerHTML: " + el.InnerHtml);
}
else {
MessageBox.Show("Element with id=\"" + id + "\" not found.");
}
Выбор DOM элемента – GetElementsByTagName
var tag = "img";
var elz = webBrowser1.Document.GetElementsByTagName(tag);
if (elz.Count > 0) {
MessageBox.Show(elz.Count + " elements with tag <" + tag + "> found.");
}
else {
MessageBox.Show("No elements with tag <" + tag + "> found.");
}
Использование контента DOM – set HTML
webBrowser1.DocumentText = "<html><head><script>alert('check!');
script>head><body>lorembody>html>";
Встраивание JavaScript
var head = webBrowser1.Document.GetElementsByTagName("head")[0];
var scriptEl = webBrowser1.Document.CreateElement("script");
scriptEl.SetAttribute("text", "function sayHello() { alert('hello') }");
head.AppendChild(scriptEl);
webBrowser1.Document.InvokeScript("sayHello");
Использование Gecko
Использование контента DOM – set HTML
geckoWebBrowser1.Document.DocumentElement.InnerHtml =
"<html><head>head><body>
<a class=\"link\">fa>body>html>";
Выбор DOM элемента – GetElementsByClassName
(geckoWebBrowser1.Document.GetElementsByClassName("link")[0] as
Skybound.Gecko.GeckoElement).InnerHtml = "tt";
Использование Awesomium WebControl
Использование контента DOM – set HTML
webControl1.HTML = "<html><head><script>alert
('check!');script>head><body>lorembody>html>";
Использование контента DOM – get HTML
var allhtml = webControl1.ExecuteJavascriptWithResult
("document.documentElement.outerHTML");
Встраивание JavaScript
webControl1.ExecuteJavascript
("document.body.innerHTML += 'Hello, World!';");
Отключение JavaScript
var ws = WebCore.CreateWebSession(new WebPreferences() { Javascript = true });
webControl1 = new Awesomium.Windows.Forms.WebControl() { WebSession = ws };
this.Controls.Add(webControl1);
Настройка прокси-сервера
var ws = WebCore.CreateWebSession(new WebPreferences()
{ ProxyConfig = "255.255.255:8080" });
webControl1 = new Awesomium.Windows.Forms.WebControl() { WebSession = ws };
this.Controls.Add(webControl1);
Использование OpenWebKitSharp
Использование контента DOM – set HTML
webKitBrowser1.GetScriptManager.EvaluateScript("document.body.innerHTML='';");
Выводы
В каждом движке есть свои + и –, с которыми можно столкнутся при разработке браузера. В любом случае, только Вам решать, какой из движков подойдет под Ваш стиль разработки.
Источник: http://www.codeproject.com/Tips/825526/Csharp-WebBrowser-vs-Gecko-vs-Awesomium-vs-OpenWeb?PageFlow=Fluid
Вартість пакету "Frontend Starter" знижено
Автор: Редакція ITVDN
23 мая ITVDN снизил стоимость популярного пакета подписки для начинающих веб разработчиков – «Frontend Starter». Новая цена - $18.
В пакете «Frontend Starter» на 90 дней предоставляется полный доступ к видео курсам, с которых начинается изучение основ веб разработки:
HTML & CSS (renewed)
How to HTML&CSS
JavaScript Essential
How To JavaScript
Twitter Bootstrap 3
Создание адаптивного сайта с Bootstrap 3
Также в пакете подписки «Frontend Starter» доступны такие сервисы:
Тренажер по курсам HTML, CSS и JavaScript
Скачивание учебных материалов
Тестирование по курсам
Консультация с тренером (30 минут)
Электронный сертификат
После успешного изучения технологий, представленных в этом пакете, Вы можете углубить и дополнить Ваши знания, пройдя обучение по программе «FrontEnd Pro», в которой представлены видео курсы по JavaScript фреймворкам, шаблонам JS и HTML5, CSS3.