Html уроки для чайников: HTML для чайников

Leave a Comment / Html / By /

Содержание

Уроки HTML для начинающих, новичков и чайников

Уроки по HTML Статьи по HTML


Что такое html, основные понятия

Автор Никита Иванов Дата 21 января 2013 16:53 Раздел Уроки / HTML

HTML — язык гипертекстовой разметки
( от англ. HyperText Markup Language — язык гипертекстовой разметки)
На языке HTML интернет-браузеру передаётся информация о том, какой текст и другие элементы (ссылки, изображения, таблицы, формы) и как нужно отображать на странице. На языке HTML верстают, а не программируют — особым образом размечают текст и объекты для публикации в интернете (где, какого цвета и тп).

Подробнее

 

Урок 1. Как создать простую страницу на html?

Автор Никита Иванов Дата 25 января 2013 15:14 Раздел Уроки / HTML

Создаём свою первую страницу на html! Что для этого нужно?

Подробнее

 

Урок 2. Структура html документа (страницы)

Автор Никита Иванов Дата 25 января 2013 17:08 Раздел Уроки / HTML

Как должна выглядеть структура html документа (страницы)?

1. Спецификация
2. Базовые теги
3. Пример страницы

Подробнее

 

Урок 3. Заголовки и форматирование текста

Автор Никита Иванов Дата 25 января 2013 17:13 Раздел Уроки / HTML

Заголовки в html
Форматирование текста в html

(параграфы, выравнивание, полужирный, курсив, подчёркивание, перечёркивание, текст в верхнем и нижнем индексах, разделительные черты, спецтекст)

Подробнее

 

Урок 4. Ссылки в html

Автор Никита Иванов Дата 30 января 2013 16:21 Раздел Уроки / HTML

Ссылка html — это одно из основных понятий в создании html-документов. Каждый пользователь интернета хотя бы раз ими пользовался. Каждый раз нажимая в интернете на зайти, просмотреть, прочитать, подробнее, переходя по новостям и прочее Вы пользуетесь ссылками! Страницы, по которым Вы переходите, могут находиться на абсолютно разных сайтах.

Подробнее

 

Урок 5. Работа с изображениями в html

Автор Никита Иванов Дата 30 января 2013 16:21 Раздел Уроки / HTML

1. Тег img
2. Адрес вставленного изображения (примеры)
3. Вставка фонового изображения

Подробнее

 

Урок 6. Специальные символы в html

Автор Никита Иванов Дата 30 января 2013 16:21 Раздел Уроки / HTML

© Знак copyright ® Знак зарегистрированной торговой марки
В таблице ниже представлены наиболее популярные и часто используемые специальные символы. Достаточно вставить данную конструкцию в html код и в браузере отобразится спецсимвол.

Подробнее

 

Урок 7. Создание списков в html

Автор Никита Иванов Дата 30 января 2013 16:31 Раздел Уроки / HTML

1. создание стандартного списка
2. создание нумерованного списка
3. создание списка с определениями
4. примеры

Подробнее

 

Урок 8. Таблицы в html

Автор Никита Иванов Дата 30 января 2013 16:33 Раздел Уроки / HTML

Таблица в html — один из основных и первых методов вёрстки web-страниц. До того, как CSS стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.
Таблица — Ваш первый шаг к понимаю

web-дизайна! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) — было содержанием ячеек большой таблицы.

Подробнее

 

Урок 9. Работа с формами в html

Автор Никита Иванов Дата 30 января 2013 16:35 Раздел Уроки / HTML

Форма в HTML нужна для создания форм отправки информации, например, при регистрации, отправки письма, тесте или опросе. Форма нужна для взаимодействия пользователя с базой данных сайта.

Тег form парный: обязательно наличие открывающего и закрывающего тегов. Внутри тега form можно располагаться поля для ввода текста, кнопки, ссылки и другие элементы.

Подробнее

 


Уроки по HTML учебник для чайников

Уроки по HTML предназначены для новичков в вебмастеринге. Также для тех, кто ищет в сети интернет различные уроки по html. Возможно вы также являетесь одним из них, и возможно вы станете нашим постоянным посетителем. На освение HTML5 у вас уйдет не очень много времени после чего необходимо практиковаться и переходить к урокам по css и урокам по Javascript

24

Авг,2019

15

Янв,2018

Как создать анимацию SVG

Здравствуйте! Сегодня я хочу рассказать о том как сделать анимацию в SVG. Вы уже многое знаете об SVG. На ппрошлом уроке мы с вами  разбирались как  рисовать  объекты в SVG,  задавать им стили и писать текст, но есть также еще очень классная штука — анимация. Вот  как анимировать SVG объекты, мы и поговорим в этой статье.

 

<svg>
  <rect x="0" y="0" fill="#0f0">
   <animate attributeName="width" from="0" to="150" dur="5s" />
  </rect>
</svg>

Просмотреть  пример

Для создания анимации используется тег animate. Атрибут attributeName принимает имя того атрибута, который будет анимироваться, from и to,  это  начальные и конечные значения, а в dur указывается длительность анимации в секундах.

Читать далее

15

Янв,2018

Как задать стили для SVG

Здравствуйте! Продолжим изучение svg и из этой статьи вы узнаете  как стилизовать svg с помощью стилей.

Задавать стили для  svg, используя

css вы можете аналогично, как и  для html элементов, но есть небольшие нюансы. Например, для того  чтобы задать цвет фона,  необходимо использовать  такое свойство как fill, а рамка для элемента  задаётся с помощью такого свойства как stroke. Все другие  свойства можно посмотреть на  официальном сайте  w3.org.

 

Читать далее

14

Янв,2018

Что такое SVG

Поздравляю всех с Новым Годом!  И сегодня я пишу первый пост из серии, посвященной SVG из которой вы узнаете, что такое SVG и где его собственно можно применять.

SVG — это  специальный язык для описания 2-ой графики, в основе которого лежит  XML. Эта технология очень быстро набирает обороты, и связано это вот с такими факторами:

  • При изменении размеров  svg фигуры всегда  будут перерисовываются, поэтому вы всегда будете видеть изображение без пикселизации, в отличие от растрового изображения.
  • Браузеру не надо загружать картинку с  сервера, т.е. он сам её нарисует, соответственно  повышается быстродействие и страничка загружается быстрее, а это положительно сказывается на пользовательских факторах сайта
  • Можно задавать стили  с помощью CSS, как для html элементы, или с помощью скриптов  JavaScript
  • Есть возможгость  редактирования или анимирования используя CSS и JavaScript
  • Уменьшается размер изображений

 

Читать далее

14

Янв,2018

Семантические элементы в HTML5.

  Здравствуйте!  В этой статье разговор пойдет о семантических элементах в HTML5. Эти элементы помогают веб-разработчику  разметить страницу на основные части и также поисковику будет легче  распознавать  отдельные части страницы. До  HTML5 в разметке страниц  использовался тег  <div>, которому присваивали классы  или реже  идентификаторы id для структурирования и организации разметки страницы.

Таким образом на веб-странице  располагали  хедер, боковые панели, навигацию, подвал (футер)  и многое другое. Новый стандарт HTML5 предоставил разработчикам  новые теги  для структурирования, организации содержимого и разметки страницы. Новые семантические элементы HTML5 позволили структурировать документ по отдельным частям, чего так раньше не хватало.

Читать далее

14

Янв,2018

Метатеги для сайта

Здравствуйте! В этой статье я расскажу о мета-тегах для сайта. Собственно мета-теги размещаются в верхней части веб-страницы, как правило между тегами <head> и </head>, и браузер их не отображает (кроме тега «title»).

  Но нужны мета-теги в  первую очередь  для роботов  поисковых системах (о том что такое seo я писал в этой статье) именно их распознают роботы поисковых систем.

Читать далее

13

Янв,2018

Как добавить форму на сайт

Здравствуйте! В этом уроке поговорим о формах и о том как добавить форму на сайт. Формы предназначены для ввода информации пользователями. Это и формы регистрации и различные тесты, опросы и прочие формы.

Для всего этого и предназначены HTML-формы. И сейчас мы рассмотрим как создать форму и  из каких полей состоят HTML-формы. Также следует отметить что HTML позволяет только создать форму а вот обрабатывать данные  формы язык HTML  не умеет для этого используются такие языки как JavaScript( про него читайте здесь), php и др.


Читать далее

13

Янв,2018

Как вставить ссылку на сайт

Здравствуйте! В этой статье  я расскажу о том что такое ссылка и как ее ссылку вставить на сайт.   Ссылки являются неотъемлемой частью Интернета и они позволяют переходить с сайта на сайт.  Причем сама ссылка может вести не только на веб-страницу а на документ любого типа то есть это может быть рисунок, видео, вордовский файл, презентация.

Самое главное, чтобы документ на который ведет ссылка существовал и к нему был открыт доступ иначе ничего не получится.


Читать далее

13

Янв,2018

Как вставить видео на сайт

Здравствуйте!  В этом уроке разберем как вставить видео на сайт.  Существуют 2 способа вставки видео на сайт. Это используя сервис видеохостинга как например ютуб, рутуб и им подобные, а второй используя тег video, который появился в HTML5.
Самый простой  это конечно же первый способ.  Если вы хотите  загрузить видео  с видеосервиса  то вам придется  выполнить 3 пункта:
1.  Сперва надо зарегистрироваться на видеосервисе (Например: Youtube)
2. После регистрации вы сможете  загрузить видео
3. Остается получить код видео и собственно вставить его на свой сайт

Читать далее

10

Янв,2018

Как добавить картинку на сайт

Здравствуйте!  В этом уроке я расскажу о том как добавить картинку на сайт.  Сам процесс добавления изображений на сайт как бы происходит в 2 этапа. Сначала в любом редакторе для работы с изображениями (кстати вот вам уроки по Фотошопу) подготавливается изображение, а затем оно размещается на веб-странице с помощью тега <img>.

При подготовке и размещении изображений вам следует учитывать такие моменты:

  1. Поскольку изображения являются замещаемыми элементами и загружаются по сети, то размер изображения влияет на скорость загрузки сайта. Для этого все изображения, которые вы планируете размещать на сайте, следует подвергнуть процедуре сжатия.
  2. Качество изображений.  Следует учитывать, что при сжатии изображений вы можете потерять в качестве, поэтому здесь следует придерживаться золотой середины.

Читать далее

Фреймворки для чайников

Ликбез для UX-дизайнеров, которые хотят проектировать не просто так, а под конкретную технологию.


Собака Павлова

ТЕХНОЛОГИИ


Пере Боррель дель Казо, «Бегство от критики»

Исторически сложилось, что все браузеры, мобильные и десктопные, на всех платформах понимают всего лишь три вещи: HTML, CSS и JavaScript (не путать с Java!).

Были попытки подружить браузеры с другими технологиями: Visual Basic, Java, ActiveX, — но все они провалились, потому что производители железа и браузеров не смогли договориться об открытых стандартах. Остались только открытые стандарты, разрабатываемые публичными консорциумами и рабочими группами. Например, W3C разрабатывает HTML и CSS.

Итак, у нас есть три технологии.

  • HTML отвечает за структуру страницы.
  • CSS — за ее оформление (визуальное и адаптив для разных экранов).
  • JavaScript — за взаимодействие страницы с пользователем (по изначальной задумке; сейчас-то уже практически вообще за все).

Каждая технология развивается независимо, у каждой есть несколько версий. Самые свежие на сегодня версии: HTML5, CSS3, ECMAScript 2018 (это стандарт JavaScript).

Браузеры тоже развиваются независимо. Кто-то (то Internet Explorer, то Safari) отстает от стандартов, кто-то (обычно Chrome или Firefox) бежит впереди и внедряет экспериментальные фичи.

Отсюда постоянная головная боль фронтенд-разработчиков: сайт должен выглядеть во всех браузерах одинаково (причем именно так, как его придумал дизайнер). Плюс работать быстро, безопасно и в соответствии со спецификацией.

Вдобавок HTML и CSS — это не языки программирования, а языки разметки: один лишь синтаксис, набор команд — конструкций и правил — для представления содержимого страницы. Ну, к примеру, в них нет как таковых классов, объектов, функций, методов, присущих языкам программирования.

Чтобы наделить веб-сайт функциональностью и бизнес-логикой, приходится подключать язык программирования на стороне сервера или на стороне клиента (в браузере), а чаще всего — и там и там.

Стандартный Javascript — не самый эффективный и приятный для работы язык программирования. Специалисты критикуют его за то, что даже для самых простых операций приходится писать очень много строчек кода, постоянно повторяться.

Это замедляет разработку. Потому верстальщики и программисты ищут способы использовать продвинутые инструменты вместо «чистых» JavaScript, HTML и CSS.

Пример с таблицей

Чтобы проиллюстрировать пример неэффективности всей этой связки, возьмем такую простую конструкцию, как таблица.

В HTML есть набор тегов для создания таблицы (основные из них — table, th, tr, td). С их помощью можно создать только сетку таблицы с минимальными настройками внешнего вида: задать ширину колонок, размеры ячеек и в принципе всё.

Добавив CSS, можно (изрядно помучавшись) придать ей пристойный вид и при должном старании адаптировать для разных экранов. Но мы все равно не сможем сортировать таблицу по одной или нескольким колонкам, показать порядок сортировки, добавлять или удалять колонки и столбцы, перетаскивать данные из одной ячейки в другую, использовать формулы для подсчета сумм по строкам и столбцам, применить условное форматирование ячеек (подсветить отрицательные, например) и т. п.

Всё это на HTML и CSS невозможно сделать, потому что в HTML нет такого объекта, как таблица, и нет методов работы с ней, которые поддерживались бы любым браузером. Разработчики стандарта 20 лет назад не предполагали, что пользователи захотят работать с содержимым веб-страницы.

Похожие проблемы у нас будут, если мы захотим отправить на сайт пачку файлов (например, добавить несколько вложений к письму в веб-почте), выбрать интервал времени (например, запланировать встречу в календаре) или представлять одну и ту же информацию разными способами (например, показывать товары в интернет-магазине по желанию пользователя карточками или строками).

Для всего этого в HTML и CSS нет подходящих решений, потому на помощь приходит JavaScript — язык программирования, который может манипулировать объектами в структуре HTML и применять к ним стили CSS.

Когда-то для этого использовали другие языки (Visual Basic, например), пытались применять другие технологии (Adobe Flash, например), но JavaScript всех вытеснил. И не в последнюю очередь благодаря JavaScript-библиотекам.

Библиотеки

Каждый раз писать код на JavaScript, чтобы сделать ту же сортировку таблиц, — это, разумеется, не подход джедая.

И появились библиотеки — наборы готовых функций на JavaScript, выполняющие типовые операции с HTML-кодом страницы. Пример такой библиотеки — jQuery.

Этих библиотек за двадцать с лишним лет существования JavaScript появилось великое множество. Программистам приходилось комбинировать библиотеки, дружить их между собой, обновлять (ведь каждая развивается своим чередом), следить за совместимостью. Да еще самим код писать — не все же есть в библиотеках.

Подход с библиотеками до сих пор живет. В небольших проектах достаточно подключить одну-две библиотеки для конкретных улучшений. Например, чтобы рисовать красивые графики, подключаем бесплатный Chart.js или платный AmCharts. Если нужна анимация и отзывчивость интерфейса — тот же jQuery, для работы с элементами интерфейса есть смысл взглянуть на Sencha Ext JS и т. п.

И тут появились фреймворки

Для HTML+CSS тоже стали появляться подобные «полуфабрикаты» — заготовки из кусков кода, которые решают типовые проблемы верстки. Например, многоколоночная верстка, закрепленный на странице хедер или футер и прочие типовые задачи, которые выгоднее решить один раз, а потом применять в новых проектах.

Так появились первые фронтенд-каркасы разработки, или фреймворки.

Почему они не библиотеки? Потому что это не набор готовых функций, которые можно добавить к проекту и использовать точечно на отдельных страницах.

Каркас (фреймворк) предполагает, что весь проект будет следовать заданной им структуре. То есть он задает ограничения, которых нужно придерживаться, чтобы ускорить разработку, точнее следовать стандартам, снизить порог вхождения разработчиков в проект и т. п.

Самый известный образец HTML+CSS-фреймворка — Bootstrap (вот примеры, вот один из компонентов — карусель, вот другой — кнопки).

Важно, что все сделано на стандартных HTML и CSS и будет работать (и работать более или менее одинаково) во всех браузерах.

Фреймворки уже содержат подогнанные друг к другу совместимые библиотеки, так что разработчику не нужно ничего обновлять, помнить про ограничения и заботиться о совместимости. Так, многие компоненты Bootstrap содержат код на JavaScript с использованием библиотеки jQuery.

Другой известный фреймворк, Foundation, кроме jQuery использует библиотеки Modernizr и FastClick.

Два фреймворка в приложении будут конкурировать за базовые вещи. К примеру, один захочет 12-колоночную сетку, другой — 16-колоночную; они могут использовать одинаковые названия методов JavaScript для разных целей и т. д.

Поэтому между собой фреймворки несовместимы: нужно определиться и выбрать один. Если у вас проект на Bootstrap, а вам нужны вот такие вот звездочки из Foundation — то поженить их не получится. (Но можно самому запилить звездочки для Bootstrap и поделиться ими как плагином. Конечно же, кто-то это уже сделал.)

Так вот, идем дальше

Главная проблема современного веба — разрозненность технологического стека. Невозможно выучить все технологии, знать и уметь их правильно готовить.

Программисты в какой-то момент поделились на фронтенд и бэкенд. А еще необходимы дизайнеры и верстальщики, не говоря уже про админов БД, сисадминов, архитекторов и прочих важных и нужных людей.

В общем, для разработки одного приложения требуется столько разных специалистов, что возникло вполне естественное желание как-то объединить некоторые технологии. Если гомогенизировать технологический стек — расширить набор HTML-компонент и тесно подружить их с бэкендом — то фулстек-программист сможет взять на себя всю разработку, от хранения данных до обработки пользовательского взаимодействия.

В то время (речь сейчас идет о передовой мысли десятилетней давности) страницу из структуры и данных собирал сервер. Брал данные из БД, брал шаблон страницы, заполнял его, показывал нужные пользователю контролы и отправлял браузеру.

Стали появляться серверные фреймворки, позволяющие писать на бэкенде код, автоматически генерирующий верстку:

  • GWT и Vaadin — специализированы для Java;
  • Telerik — для .NET;
  • Kivy — для Python;
  • Shoes — для Руби и т. д.

JavaScript наступает

И вот в 2009 году — весьма важная веха в истории веб-разработки — появился NodeJS, программная платформа, которая существенно расширила возможности JavaScript.

И когда еще через пару лет сформировались комьюнити, стандарты и т. п., программисты смогли использовать один язык программирования и на стороне сервера, и на клиенте. Это укрепило позиции JavaScript, хотя мейнстримом для серверной разработки он так и не стал.

На фронтенде тем временем началась борьба за качество кода. Типичный код клиентской части на JavaScript с использованием jQuery обычно не отличался хорошей организацией: писать легко, чинить сложно. JavaScript-фреймворки должны были исправить это: они навязывали разработчику структуру кода, взамен позволяя удобнее управлять им.

Фреймворки, специализированные под определенный бэкенд, оказались не очень удачным экспериментом. Даже PhoneGap — библиотека под «Андроид» — тихонько умирает, вытесняемая ReactNative (до него мы еще дойдем). Хотя вот специализированные Vaadin и Telerik выжили и развиваются своим чередом.

Реактивные фреймворки

Лет пять назад появилась вполне здравая идея — поскольку большинство сайтов и мобильных приложений оперируют ограниченным набором шаблонов, разумно отделить представление данных от собственно данных.

Пусть бэкенд занимается только хранением, обработкой и безопасностью данных (извлекает их из хранилища, проверяет наличие прав доступа, передает их на фронтенд), а всё остальное поручим клиенту (браузеру). Дадим ему пачку данных и шаблон — набор инструкций по превращению данных в верстку. Фреймворк на клиенте будет подставлять данные в шаблон, реализовывать бизнес-логику и вообще манипулировать страницей, наводить красоту и т. п.

Такие фреймворки называются реактивными, потому что в них состояние интерфейса автоматически реагирует на изменение данных. Если сказать «вот эта переменная управляет цветом вон той кнопки», а потом поменять переменную — цвет кнопки изменится сам, перекрашивать ее вручную не надо.

NB: Реактивное программирование — вариант многопоточного, при котором вместо системы «запрос — ожидание ответа — получение ответа — обработка» работает принцип «запрос (послали и забыли) — ответ — обработка ответа».

Примеры: React, Angular, Vue и еще десятки менее известных.

Итак, на бэкенде можно использовать любой язык программирования, добывать им данные, упаковывать их в JSON, XML или что угодно другое машинно-читаемое и отдавать на фронт.

А на фронтенде JS-фреймворк делает всю чистовую работу: рисует контролы, анимирует их, проверяет данные, представляет их в соответствии с локальными настройками пользователя и реализует бизнес-логику.

Ну вот те же самые таблицы. Что с ними делала, например, библиотека jQuery — и как поступают реактивные фреймворки?

  • jQuery: таблица вместе с данными и дизайном была заполнена на сервере, а в браузере jQuery только манипулировала этой таблицей (например, сортировала ее).
  • React, Angular, Vue: структура таблицы генерируется фреймворком прямо на клиенте, в нее вставляются пришедшие с сервера данные.

Между браузером и сервером передаются только данные и иногда — новые куски шаблона и правила. Реактивные фреймворки незаменимы для реализации концепции Single Page Application, когда всё происходит на одном экране.

Надстройки

JS-фреймворки сразу же обросли библиотеками GUI-компонентов, или надстройками, которые решают конкретные вопросы отзывчивого и богатого GUI в рамках конкретного фреймворка.

Примеров множество: KendoUI — набор UI-компонент для jQuery, React, Angular и Vue, ReactStrap — Bootstrap для React, ReactNative — GUI фреймворк от «Фейсбука» и т. д.

Некоторые надстройки реализованы для нескольких фреймворков, Onsen, например, или тот же KendoUI. Если клиент собирается разрабатывать мобильное приложение современным способом (то есть в виде HTML5 SPA / HybridApp), но пока не знает, будет ли он использовать React, Angular или Vue, то нужна одна из таких универсальных надстроек.

Итак, вот как теперь выглядит веб-проект или мобильное приложение:

  • бэкенд на любом языке программирования;
  • фронтенд, обычно состоящий из JS-фреймворка (React, Angular, Vue) и надстроек.

Вот пример, как KendoUI реализует работу с таблицей. Компонент Grid можно вставить в любой проект на React и получить сразу и фильтрацию, и сортировку, и экспорт в Excel и PDF, и всё что угодно. Использовать это можно «из коробки» в любом проекте с любым языком программирования на бэкенде, лишь бы на фронте был React.

Вот тут можно почитать про надстройки (GUI-библиотеки) подробнее:

  • Hacker Noon: 23 Best React UI Component Libraries And Frameworks;
  • Bits and Pieces: 11 Angular Component Libraries You Should Know In 2018;
  • Bits and Pieces: 11 Vue UI Component Libraries You Should Know In 2018.

8 апреля 2019

Собака Павлова

[email protected]

Дизайн сложных интерфейсов

Дизайн под фреймворки Bootstrap и Vaadin от «Собаки Павловой»

Многомодульная система бронирования круизных и паромных перевозок • Бора

Упростили интерфейс сложной системы бронирования: провели быстрый UX-аудит, нашли самые проблемные места и сделали точечный редизайн системы.

Дизайн системы электронного документооборота для пивоваренного концерна

Упростили интерфейс системы документооборота на крупном пивоваренном предприятии, предложили два варианта оформления и сверстали UI-kit.

Дизайн цифрового рабочего места страхового агента • Альфастрахование

Разработали единый профессиональный интерфейс для разных типов сотрудников Альфастрахования, повысили скорость системы и снизили порог вхождения для новых страховых агентов.

Другие статьи

Как уследить за трендами технологий, если вы не программист

Не надейтесь на книги — пока их напишут, технологией будут владеть все, кому надо. На русский язык тоже не надейтесь — переводить будут еще дольше. И можете не следить за СМИ.

Хайпануть на блокчейне

Блокчейн решает задачу византийских генералов — и это его ключевое достоинство. Если у стартапа нет таких задач, скорее всего, ему и не нужен блокчейн.

Бот в инструментах no code. Детали реализации

Рассказываем, как собрали чат-бота на сервисах автоматизации, который каждый день присылает по одной статье из архива и просит оценить материал.

Уроки программирования с нуля. Си-шарп для чайников

Привет! Хочешь научиться программированию? Ты в этом новичок или совсем без опыта? Ты попал на мой сайт, где ты найдешь максимально понятные уроки программирования на языке Си-шарп для чайников. Читай уроки, делай домашние задания, если что-то не получается — задавай вопросы в комментариях, обязательно помогу. Удачи!


В прошлом уроке были рассмотрены самые простые HTTP-запросы, при помощи которых мы можем получить доступ к общедоступным данным, а в этом уроке мы рассмотрим, как получать авторизованный доступ, а также отправлять данные на сервер.

Для этого урока нам понадобится программа, которая осуществляет сетевой анализ трафика. А конкретно Fiddler, скачать бесплатно вы можете…читать полностью

28 июл 2016 20:53

просмотры 87835   комментарии 356

В этом уроке будет рассмотрен протокол HTTP и базовая работа с ним в Си-шарп.

HTTP (HyperText Transfer Protocol) – это протокол передачи данных (изначально гипертекстовых данных в формате HTML, потом произвольных данных) прикладного уровня, используемый в World Wide Web (WWW).

Протокол HTTP работает по технологии клиент-сервер. Клиентом обычно выступает веб-браузер,…читать полностью

19 апр 2015 19:45

просмотры 96339   комментарии 33

Несколько следующих уроков будут посвящены теме сетевого программирования. Это достаточно большая область программирования, и для начала ее освоения необходимо разобраться с базовыми понятиями и терминологией.

Компьютерная сеть – это система компьютеров, или другого вычислительного оборудования, которые объединены между собой теми или иными каналами связи, и могут обмениваться…читать полностью

02 мар 2015 21:37

просмотры 76124   комментарии 18

В этом небольшом уроке мы поговорим об альтернативе классам — структурах.

Структура – это более простая версия классов. Все структуры наследуются от базового класса System.ValueType и…читать полностью

21 дек 2014 22:43

просмотры 79421   комментарии 37

Ссылочные типы и типы значений, которые рассматривались в предыдущем уроке, имеют еще одно отличие. Ссылочные типы могут принимать значение null, типы значений – нет.

Null указывает на то, что значение неизвестно, или, другими словами, значения нет.

Значение null вы уже встречали, думаю, не раз. Например, когда объявляли массив и пытались работать с ним, не создав…читать полностью

30 сен 2014 22:08

просмотры 59163   комментарии 53

В языке Си-шарп все типы данных делятся на две категории – ссылочные типы, и типы значений. Они отличаются способом хранения в памяти, производительностью и другим. В этом уроке мы поговорим, что это всё означает, а также о передаче параметров в метод по ссылке (ключевые слова ref и…читать полностью

26 авг 2014 17:04

просмотры 78520   комментарии 11

В уроке 9 была. ..читать полностью

30 июн 2014 22:33

просмотры 97759   комментарии 46

Перечисление (Enumeration) – это определяемый пользователем целочисленный тип, который позволяет специфицировать набор допустимых значений, и назначить каждому понятное имя.

Для объявления перечисления используется ключевое слово enum. Общая структура объявления перечисления выглядит так:
читать полностью

20 май 2014 16:51

просмотры 63602   комментарии 59

1 2 3 4 5 

Научись программировать на C# уже сейчас

Кликни по ссылке ниже для получения подробнейшего видеокурса

Получить курс

Подпишись на курс по программированию, и узнавай первым о новых уроках!

* Электронный адрес указан некорректно


Ошибка в тексте? Выделите ее мышкой и нажмите Ctrl+Enter

Поблагодарить автора: Номер карты (ПриватБанк)
5168 7572 4170 8660
WebMoney
R372544961915 U685637142028 Z999792764387

Самоучитель html для чайников с нуля

HTML для чайников с нуля, Создать блог на Blogger, Создать сайт на WordPress07 Ноя. 0

  Справочник тегов и атрибутов HTML | Полный список всех тегов и атрибутов по алфавиту     Справочник тегов и атрибутов HTML | Таблица Теги (тэги) название Краткое описание тегов <a> Используется для создания ссылок и якорей. <abbr> Применяется для вставки аббревиатуры. По умолчанию пунктирное подчеркивание. <acronym> <address> <applet> <area> <b> <base> <basefont> <bdo> <bgsound> <big> <body> <blink> <blockquote> <br> <button> <caption> <center> <cite> <code> <col> <colgroup> <comment> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <embed> <fieldset> <font> <form> <frame> <frameset> …

Читать далее

HTML для чайников с нуля, Создать блог на Blogger, Создать сайт на WordPress15 Июл. 2

  Здравствуйте дорогие читатели сайта «Я блоггер». А вы знаете как сделать таблицу в html? Сегодня расскажу вам как создать таблицу в html, какой тег используется для создания таблиц, как вставить таблицу в блог или на сайт. В редакторе сообщений заходим на вкладку HTML или Текст, вставляем маленький код:   <table border=»2″><tr><td>Строка 1 ячейка 1</td><td>Строка 1 ячейка 2</td></tr><tr><td>Строка 2 ячейка 1</td><td>Строка 2 ячейка 2</td></tr><tr></table>     Каждая таблица состоит из строк и столбцов. Теги из которых состоит таблица:   <table> открывающийся тег, …

Читать далее

HTML для чайников с нуля03 Июн. 0

    Здравствуйте дорогие читатели и гости Я блоггер. В предыдущей  статье мы научились создавать таблицу html. В этой публикации опишу как разделить текст на 2 и 3 колонки.   Начнем с тега <table>. Принцип тот же что и при создании таблицы. Открываем редактор сообщения в режиме html и вставляем код:   <table border=»0″ cellpadding=»0″ cellspacing=»10″><tr> <td valign=»top»>Текст первой колонки</td><td valign=»top»><div style=»background-color: snow; border-left: 2px solid #ff0000; height: 150px; padding-left: 10px; width: 400px;»>Текст второй колонки</div></td></tr></table>   height: 150px —  высота вертикальной линии …

Читать далее

HTML для чайников с нуля28 Апр. 0

    Раньше я считала что Юникод ( Unicode) и UTF-8 разные форматы кодирования символов. Но я очень ошибалась. Юникод — стандарт кодирования всех символов, уникальный код для любого символа не зависит от платформы, программы и языка. UTF-8 это восьми битный формат преобразования юникода, который используется при верстке HTML сайтов.   Содержание статьи: Таблица символов юникода Конвертер символов юникода Плюсы и минусы применения спецсимволов Использование специальных символов в Html   Информацию о кодировке можно увидеть как только откроем исходный код сайта Ctrl …

Читать далее

HTML для чайников с нуля, Все для Blogger (Blogspot), Оформление блога24 Фев. 11

  Бегущая строка- элемент в  веб-дизайне для привлечения внимания, чаще используется в рекламных целях. Бегущая строка это просто напросто текст который движется, слева направо, справа налево или вверх вниз.   В бегущую строку можно вставить новость, объявление, приветствие, отобразить текущее время и дату и много много другой интересной информации.     Читайте также: Как сделать бегущую строку html Бегущая строка в html с картинками Как вставить ссылку в бегущую строку Как вставить бегущую строку в Blogger Как добавить бегущую строку в WordPress …

Читать далее

HTML для чайников с нуля, Онлайн сервисы25 Дек. 0

В этой статье, дорогие мои читатели, я собрала все интересные сайты рунета и буржунета онлайн-генераторов и всевозможные инструменты для работы с кодами цветов.   Википедия.Таблица цветов   Таблица безопасных цветов студии Артемия Лебедева   htmlka Справочник по html http://htmlka.com/ На этом сайте не только генераторы цветов, а много другой интересной и полезной информации по html.   Adobe Цвет CC или  Adobe Kuler (старое название)   Пожалуй самый распространенный и известный онлайн генератор цвета.   ColorExplorer   Colors on the Web   COLOURlovers …

Читать далее

HTML для чайников с нуля, Все для Blogger (Blogspot), Онлайн сервисы25 Дек. 1

Что бы получить код цветовых схем для упрощения программисты создали множество генераторов с помощью которых можно быстро получить нужный код цвета. Услугами пользуются не только профессиональные вебмастера, но и начинающие блогеры. Эти восхитительные помощники в разы облегчают нам жизнь.   Онлайн генератор цвета для сайта     Один из самых распространенных генераторов цвета я покажу и расскажу как добавить в блог на ВLogger. Если будете устанавливать для личного пользования, то советую создать отдельную страницу.   И так: Заходим в административную панель блога, …

Читать далее

Если бы я учил Frontend сегодня. Советы начинающим / Хабр

Мой путь в веб-разработке начался 5 лет назад. За это время я успел испробовать множество технологий, а в последние 3 года развиваюсь в направлении frontend.

В этой статье я бы хотел ясно изложить, какие технологии необходимо изучить новичку, а также поделиться методами их освоения. Гайд ориентирован на людей, которые делают свои первые шаги в веб-разработке, и в нем я постараюсь подробно пояснять суть каждой технологии. Также в конце я расскажу, куда двигаться дальше.

Итак, ты хочешь стать Frontend разработчиком. Что для этого нужно?



HTML и CSS

Эти две технологии необходимы для верстки сайта. Верстка – это расположение текста, изображений, кнопок и других элементов интерфейса на странице.

С помощью HTML мы можем добавлять и описывать эти элементы. Изначально они будут «сырыми», со стандартным внешним видом. Для изменения стиля используется CSS. Он позволяет задавать цвет, размер, расположение и десятки других параметров внешнего вида элемента.

Как освоить

В первую очередь стоит ознакомиться с обзорной статьей или видеороликом об этих технологиях. Так ты поймешь их суть.

Затем верстку удобнее всего осваивать и совершенствовать на практике. Пробуй верстать макеты страниц или отдельных элементов. Также, можно попробовать смотреть на Youtube процесс верстки страницы и повторять за автором.

Поначалу будет сложно, и придется часто обращаться в гугл за решением очередной проблемы. Но со временем ты научишься быстро находить у себя в голове правильную структуру HTML и необходимые CSS свойства для верстки элемента.

Где брать идеи и макеты для верстки?

Я использовал Dribbble и CollectUI, но также можно поискать на Behance и One Page Love.

Также можно брать настоящие макеты из UI Store Design. Я советую верстать макеты из Figma, т.к. её используют многие дизайнеры, и в будущем ты вероятнее всего будешь работать именно с ней. А еще она бесплатна и работает в браузере.

JavaScript

С этого языка начинается программирование в вебе. Он позволяет управлять элементами на странице, описывать и контролировать взаимодействие с интерфейсом.

Если с HTML и CSS мы верстали страницу, то JavaScript отвечает за динамическую часть страницы: анимации, отображение данных, обработка действий и многое другое.

Зачем мне он нужен?

Простой пример. Предположим, есть страница, на которой по нажатию кнопки нужно отобразить модальное окно. HTML и CSS позволят нам сделать верстку самой страницы и модального окна. Однако зафиксировать и обработать нажатие на кнопку эти технологии не могут.
Здесь нам и нужен JavaScript. С помощью него мы описываем поведение на странице. В коде мы обозначаем: если пользователь нажал на кнопку, то нужно показать модальное окно.

Вот пример такой реализации и использованием JQuery:

С помощью JavaScript можно производить практически любые операции со страницей. Однако его возможности не ограничиваются окном браузера. С помощью платформы Node.js этот язык можно использовать для серверной разработки, сборки проектов, и многого другого. В будущем тебе это будет нужно, чтобы работать с большими проектами, собирая из через Webpack. Однако я советую сперва научиться использовать язык внутри браузера.

Как освоить

Лучше всего будет начать изучение на learn. javascript.ru. Это прекрасный ресурс, который является базой знаний как для новичков, так и для продвинутых разработчиков.

Здесь важно понять основы самого JavaScript, а также особенности его работы в браузере. Если какие-то темы покажутся тебе слишком сложными (к примеру, прототипы), то можешь пропустить их и вернуться позже.

Не стоит слишком увлекаться одной лишь теорией JavaScript. Я рекомендую параллельно с изучением пробовать свои силы и писать простые скрипты. Можно также пробовать разбирать чужие участки кода на Codepen.

Постепенно изучай новые плагины и библиотеки. Одной из самых популярных и простых для понимания является JQuery. С ней значительно проще взаимодействовать с содержимым страницы, и её можно довольно быстро освоить на базовом уровне.

По большому счету, ты часто будешь прибегать к использованию сторонних библиотек в своих проектах. Чтобы лучше понять, как это делается, рекомендую попробовать форматировать даты с помощью Luxon или сделать карусель через Owl Carousel.

Что дальше?

С базовыми навыками в HTML, CSS и JavaScript можно сделать красивый лендинг, сверстать страницы интернет-магазина или блога. Этим я и советую заниматься, чтобы закрепить знания в веб-разработке.

По большому счету, на этих технологиях можно написать почти любой интерфейс. Вопрос только в том, какая специфика будет у приложения, которое ты разрабатываешь. Чем оно больше и сложнее – тем больше различных библиотек, плагинов и технологий тебе потребуется, чтобы справиться с задачей.

Рекомендую ознакомиться с Frontend Roadmap. Здесь описаны технологии разработки интерфейсов, которые будут нужны тебе в дальнейшем.

В дальнейшем тебе наверняка будут интересны реактивные фреймворки, вроде React или Vue. Для сборки приложений на них ты освоишь Webpack, а для ускорения процесса верстки изучишь препроцессоры PUG и SASS. Или может быть захочешь углубиться в графику и научишься работать с D3 или WebGL.

Как ты уже понял, frontend в веб-разработке очень многогранен и богат различными технологиями для совершенно разных задач. Изучай, пробуй, экспериментируй и получай удовольствие от созидания красивых и удобных интерфейсов для любых целей. За это мы и любим фронтенд.

P.S. Каждую технологию в этой статье я сопровождал ссылкой на документацию или примеры использования. Ты можешь ознакомиться с ними, чтобы получить более широкое представление об веб-разработке.

Изучите основы HTML для начинающих всего за 15 минут

Если вы хотите создать веб-сайт, первым языком, который вам нужно выучить, является HTML.

В этой статье мы рассмотрим основы HTML. В конце мы собираемся создать базовый веб-сайт, используя только HTML.

Вот видео, которое вы можете посмотреть, если хотите дополнить эту статью:

Если вы предпочитаете видео, вы можете посмотреть его здесь

Что такое HTML?

HTML (Hypertext Markup Language) — довольно простой язык. Он состоит из различных элементов, которые мы используем для структурирования веб-страницы.

Что такое HTML?

Что такое элементы HTML?

Элементы HTML

Элемент обычно начинается с открывающего тега, состоящего из имени элемента. Он заключен в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где начинается элемент.

Подобно открывающему тегу, закрывающий тег заключен в открывающую и закрывающую угловые скобки. Но он также включает косую черту перед именем элемента.

Все, что находится внутри открывающего и закрывающего тегов, является содержимым.

Но не все элементы следуют этому шаблону. Мы называем те, которые не пустые элементы. Они состоят только из одного тега или открывающего тега, который не может иметь никакого содержания. Эти элементы обычно используются для вставки или внедрения чего-либо в документ.

Например, элемент используется для встраивания файла изображения или элемент используется для вставки ввода на страницу.

В приведенном выше примере элемент состоит только из одного тега, который не имеет никакого содержимого. Этот элемент используется для вставки файла изображения из Unsplash в документ.

Как вложить элементы HTML 

 

   
Мой список:
 
  <ул>
     
  • Яблоко
    • 
     
  • Оранжевый
    • 
     
  • Банан
    •

    Элементы могут быть размещены внутри других элементов. Это называется вложением. В приведенном выше примере внутри элемента

    у нас есть элемент
    и
      или элемент неупорядоченного списка. И точно так же внутри элемента
        есть 3
      • или элементы списка.

        Основы вложения довольно просты для понимания. Но когда страница становится больше, вложение может усложниться.

        Поэтому, прежде чем работать с HTML, подумайте о структуре макета, которую вы хотели бы иметь. Вы можете нарисовать его на листе бумаги или в уме. Это очень поможет.

        Что такое атрибуты HTML?

        Элементы также имеют атрибуты, которые содержат дополнительную информацию об элементе, которая не будет отображаться в содержимом.

        В приведенном выше примере элемент имеет 2 атрибута: src или source для указания пути к изображению и width для указания ширины изображения в пикселях.

        В этом примере можно увидеть следующие характеристики атрибутов:

        • Между атрибутами и именем элемента есть пробел
        • Атрибуты добавляются в открывающий тег
        • Элементы могут иметь много атрибутов
        • Атрибуты обычно имеют имя и значение: name=»value»

        Но не каждый атрибут имеет одинаковый шаблон. Некоторые могут существовать без значений, и мы называем их логическими атрибутами.

        В этом примере, если мы хотим отключить кнопку, все, что нам нужно сделать, это передать атрибут disabled без каких-либо значений , Это означает, что наличие атрибута представляет истинное значение, в противном случае отсутствие представляет ложное значение

        Общие элементы HTML

        Всего элементов более 100. Но в 90% случаев вы будете использовать только около 20 самых распространенных, я разбил их на 5 групп:

        Элементы раздела 
         
        , , 
        , 
        ,

        Эти элементы используются для организации содержимого в различные разделы. Обычно они говорят сами за себя, например,

        обычно представляет собой группу раздела введения и навигации,