JackSli

JackSli

на Пикабу
поставил 34 плюса и 43 минуса
212 рейтинг 50 подписчиков 50 комментариев 4 поста 0 в горячем
1 награда
5 лет на Пикабу
6

Строим ВебПриложение.HTML+знакомство с DOM

И так, сегодня самое базовое по HTML.


Иерархия думаю всегда будет такая:

1)Ссылки на материалы для углубленного изучения

2)Мой текст

3)Ссылка на git с исходниками из текста


Для дальнейшего изучения(зачастую сам туда подглядываю). - HTMLbook

Подробно что такое DOM- тут

И так в двух словах- что такое DOM:
Если совсем просто- это иерархия вашего документа(каркаса), который состоит из головы и тела

<!DOCTYPE html>

<html>


<head>

</head>


<body>

</body>


</html>

Это и есть DOM если применять эту модель непосредственно к HTML(другого мы пока касаться и не будем).

Строим ВебПриложение.HTML+знакомство с DOM Web-Программирование, Web, HTML, Учимся, Длиннопост

HTML- это наш скелет, как писал выше, он состоит из головы и тела, остановимся тут поподробнее:

<!DOCTYPE html> - тут мы указываем тип документа, который будем использовать для HTML-кода, в данном случае HTML5

<html> - говорим какой язык разметки документа используем, как Вы догадались тут это html

<head> - голова, тут мы храним данные непосредственно для браузера, они не будут участвовать в визуальной отрисовке.

<body> - тело нашего документа, все что будет внесено сюда, будет отрисовано непосредственно в окне браузера


!!!Почти каждый тег в HTML должен закрываться: т.е. если мы открыли <head>, написали внутри него что-то(например <title>Теги на котиках</title>), то мы должны его закрыть </head>. Исключением являются теги типа link , meta , img (о них поговорим позже).

Вот пример простого HTML документа:


<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<title>Теги на котиках</title>

</head>

<body>

<div class="container">

<h1>Заголовок кота</h1>

<h2>Подзаголовок кота</h2>

<p>Параграф кота</p>

<div>

<p>Список кота в контейнере div</p>

<ul>

<li>Раз кот</li>

<li>Два кот</li>

<li>Три кот</li>

</ul>

</div>

<b>Жирный кот</b>

<br>

<strong>Тоже жирный кот</strong>

<br>

<i>Кот под наклоном</i>

<br>

<em>Тоже наклонный кот</em>

<br>

<a href="images/cat.jpg">Ссылка на кота</a>

<br>

<img src="images/cat.jpg" alt="Сам кот">

<br>

<span>Текстовый контейнер кота</span>

<hr>

<input type="text" name="" value="" placeholder="Мяу?">

<button type="button" name="button">Мяу</button>

</div>

</body>

</html>

*<meta charset="utf-8"> - устанавливает кодировку нашего документа в формат UTF-8(если этого не сделать, то мы попросту не сможем использовать кириллицу )


*<a href="images/cat.jpg">Ссылка на кота</a> -тут обратите внимание на href="images/cat.jpg"

тык

в href мы указываем путь от файла документа(в данном случае index.html) до картинки cat.jpg
*<img src="images/cat.jpg" alt="Сам кот"> - тут аналогично <a href=" ">, просто у изображений и линков указывается путь к исходникам(source), сокращенно src=" "


Он же на картинке:

Строим ВебПриложение.HTML+знакомство с DOM Web-Программирование, Web, HTML, Учимся, Длиннопост

Все существующие теги можно посмотреть на HTMLbook, по ссылке вверху поста.


У меня к Вам есть вопрос, какое приложение Вы бы хотели построить к концу серии постов(пишите в комментарии)?

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

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

Git статьи: https://github.com/loisoj/pikabuless/tree/master/less1

P.S.

Для работы с DOM,CSS3,JS я предпочитаю atom.io
есть множество других вариантов, тут нужно подбирать непосредственно под себя.


Если нужна будет помощь с настройками

Показать полностью 2
10

Строим ВебПриложение.Анонс

Меня зовут Владимир, я являюсь уже как 1 год и 4 месяца ведущим веб разработчиком в IT студии. В этой серии статей хотел бы поделиться с Вами шагами, которые помогут войти в эту профессию. Обещаю излагать максимально кратко и понятно :) (Сейчас как раз обучаю человека фактически с нуля, по этому буду тестировать сначала на нем, потом делиться с Вами). Надеюсь будет интересно :)

Собственно это пост анонс, благодаря которому я хочу понять- на сколько актуальна тут эта тема. Если одобрите, будем поэтапно разбирать след. технологии:

1. Каркас
1.1. HTML(поговорим о DOM )
1.2. CSS3

2.FrontEnd JavaScript
2.1.JS и с чем его едят
2.2.jQuery(фреймворк для работы с DOM)

3.Серверный язык
*тут все сложно, думаю к этому моменту определимся с тем к какому приложению хотят придти интересующиеся, но базово должен осветить как минимум 3(на мой взгляд востребованные технологии)
3.1. PHP7(пока голенький без всяких reactPHP итд что бы не путать)
3.2. NodeJS(Нативно больше подходит для написания реалТайм приложений, например месенджеров)
3.3.Golang(это просто многопоточное чудо, замечателен для микросервисов)

___

На этом основная часть думаю будет закончена, дальше(если это дальше вообще будет, зависит только от вас)- уже будем разбирать всевозможные библиотеки, фреймворки и другие вкусности :3

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

52

FOnline:EL передаю эстафету

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

Ссылка на финальную альфа версию сборки: https://yadi.sk/d/xnc_aVMk34vzrh


Я еще вернусь, но уже с проектом написанным с чистого листа :)


FOnline:EL передаю эстафету Fallout, Fallout Online, Sdk, Free, Developer, Angel script, Servers, Game server
43

Помогите с альфо-тестом. FOnline:EL

Думаю всем уже известно что такое FOnline. Если кого то эта информация обошла стороной, расскажу: Это многопользовательская онлайн вселенная, действия которой происходят после 2 части игры.

На данный момент есть небольшое кол-во активных серверов.
https://fonline-status.ru/ru/  (тут можно посмотреть их статусы и кол-во игроков)

Я же на данный момент проектирую свой сервер- "Easy Life"

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

Вот хар-ки сервера, если вдруг кому интересно:

проц.: Intel Xeon E3-1220v3 4 ядра, 3400 МГц

опер.: 16GB 1600MHz ECC

HDD: 1Tb
SSD:120Gb

канал: 1 гбит/сек

Работает 24/7

скачать кл-т: https://yadi.sk/d/Z_34psvjvkRYB
группа со всей инф. о грядущих нововведениях: https://vk.com/fonlineel

//В комментариях могу ответить на все вопросы связанные с сервером.
//Сразу оговорюсь, проект сырой и это не в коем случае не реклама, скорей анонс.

Помогите с альфо-тестом. FOnline:EL Fallout, Fonline, Сервер, Тест, Игры, Онлайн, Онлайн-Игры
Отличная работа, все прочитано!