• Читаемое за неделю
  • Последние ответы
  • Новые темы

Веб-разработка для начинающих. Урок 1.

MRX

Новорег

MRX

Новорег
Статус
Offline
Регистрация
23 Мар 2021
Сообщения
0
Реакции
4
Добро пожаловать в мир веб-разработки. Пишу для новичков и без воды.
Со мной вы поймёте принцип изучения и продолжите учиться сами.
Опытные ребята проходите мимо, ничего нового вы здесь не найдёте.

Разработка сайтов происходит в 4 этапа:
  1. Написание структуры веб-страницы;
  2. Стилизация этой же самой структуры;
  3. Программирование поведения страницы и её отдельных элементов;
  4. Бекенд или работа с отправкой/принятием каких-либо данных.
Первые 2 этапа происходят одновременно. Они самые лёгкие. В коде
вы сообщаете браузеру, что существует какой-то элемент, затем говорите,
как он выглядит. Это происходит с помощью двух языков:
  • HTML или язык гипертекстовой разметки.
  • CSS или каскадные таблицы стилей.


HTML элементы выглядят так:
Код:
<названиеЭлемента>Что-то между тегами</названиеЭлемента>

У них есть открывающий тег <> и закрывающий </>
Между ними содержатся другие элементы или какой-либо текст.

Код:
<div>
    <h1>Привет, HardTM</h1>
    <p>Вы учитесь основам веб-разработки</p>
</div>


Стили выглядят по-другому:
Код:
названиеЭлемента {
    параметр: значение;
}

Сперва ты сообщаешь браузеру, к какому элементу они относятся. Затем передаёшь
параметры и сообщаешь их значение. Давай рассмотрим реальный пример:
Код:
<div>
    <h1>Привет, HardTM</h1>
    <p>Вы учитесь основам веб-разработки</p>
</div>

<style>
div {
    width: 100%;
}
h1 {
    font-size: 18px;
    line-height: 26px;
}
p {
    color: #323232;
}
</style>

Не задумывайся о том, что значат <div>, <h1> и <p>. Мы изучим это позже.
Просто пойми логику — сообщаем о элементе и как он выглядит, на этом
основывается вся веб-разработка.

В примере выше мы сообщили браузеру:
  • <div> занимает всю доступную ширину вокруг себя;
  • <h1> имеет размер текста 18 пикселей и расстояние между строками 26 пикселей;
  • <p> имеет почти чёрный цвет текста.
В следующем уроке поговорим о софте для вёрстки (написания HTML и CSS кода), установим
плагины для ускорения разработки. Создадим базовую структуру любой веб-страницы.

В комментариях принимаю обратную связь, отвечаю на вопросы.
 

Sava

Новорег

Sava

Новорег
Статус
Offline
Регистрация
20 Мар 2021
Сообщения
0
Реакции
1
Круто !
Жду продолжения!
 

batmanxx

Новорег

batmanxx

Новорег
Статус
Offline
Регистрация
22 Мар 2021
Сообщения
3
Реакции
3
А где следующий пост?
 

bbd

Новорег

bbd

Новорег
Статус
Offline
Регистрация
4 Апр 2021
Сообщения
0
Реакции
2
вопрос не решен?
 

Qw1ncky

Новорег

Qw1ncky

Новорег
Статус
Offline
Регистрация
22 Мар 2021
Сообщения
0
Реакции
1
Спасибо, ждём продолжения
 

Rаmpage

Новорег

Rаmpage

Новорег
Статус
Offline
Регистрация
17 Апр 2021
Сообщения
1
Реакции
3
Достаточно интересно, хоть базу более менее знаю. Жду продолжение, думаю на 4-6 урок, будет гораздо интересней!
 

bbd

Новорег

bbd

Новорег
Статус
Offline
Регистрация
4 Апр 2021
Сообщения
0
Реакции
2
Всё ещё жду. Как успехи?
 

tommac

Пользователь

tommac

Пользователь
Статус
Offline
Регистрация
30 Май 2021
Сообщения
1
Реакции
40
Для начала и без воды вполне приемлемо. Подождём продолжения.
 

ItsOlegDm Plus

Average Plastic Memories fan
Местный

ItsOlegDm Plus

Average Plastic Memories fan
Местный
Статус
Offline
Регистрация
27 Июн 2021
Сообщения
10
Реакции
115
Как по мне, описание тегов не особо информативное:

Во первых: <h1> - текстовый заголовок первого уровня, есть ещё <h2> и <h3> (Заголовки второго, и третьего уровня соответственно)

Во вторых: <div> это контейнер для других тегов, который вовсе не обязательно занимает все доступное пространство вширь.

Ну и в третьих: стоило бы написать что <p> - тег обозначающий абзац текста.
А, и цвет у него абсолютно чёрный(#000), как и у любого текста (если, естественно, не поменяешь)

--- Добавлено позже: ---


Блин капец я тупой
Только в декабре заметил что там стили прописаны, и челик написал что позже объяснит что к чему..

Кстати, что-то второй части таки нет)
Ниужели так важно именно приложить ссылку? Можно уже было просто написать название...
 
Последнее редактирование:

SKR

Новорег

SKR

Новорег
Статус
Offline
Регистрация
29 Июн 2021
Сообщения
0
Реакции
3
Спасибо автору, ожидается ли продолжение?
 

Plyxa

Новорег

Plyxa

Новорег
Статус
Offline
Регистрация
4 Июл 2021
Сообщения
1
Реакции
0
Жду продолжения
 

vBuPYCv

Куратор флудильни.

vBuPYCv

Куратор флудильни.
Статус
Offline
Регистрация
22 Мар 2021
Сообщения
3
Реакции
35
Продолжения не будет получается 🤣
 

Всадник Удалено

Пользователь

Всадник Удалено

Пользователь
Статус
Offline
Регистрация
19 Мар 2021
Сообщения
10
Реакции
49
HTML элементы выглядят так:
Код:
<названиеЭлемента>Что-то между тегами</названиеЭлемента>

У них есть открывающий тег <> и закрывающий </>
Между ними содержатся другие элементы или какой-либо текст.
"HTML-элементы" - это и есть теги, а вот скобочки - это скобочки, также не все теги требуют закрытия. Необязательно чтобы между открывающим и закрывающим что-то было, это может быть лишь открывающий и закрывающий тег.


Сперва ты сообщаешь браузеру, к какому элементу они относятся. Затем передаёшь
параметры и сообщаешь их значение. Давай рассмотрим реальный пример:
Код:
<div>
    <h1>Привет, HardTM</h1>
    <p>Вы учитесь основам веб-разработки</p>
</div>

<style>
div {
    width: 100%;
}
h1 {
    font-size: 18px;
    line-height: 26px;
}
p {
    color: #323232;
}
</style>

В CSS лучше не использовать обращение к глобальным тегам, для этого есть class/id, есть исключения, но лучше так не делать. Да код простой, других тегов кроме тех что представлены нет, но даже если верстать просто какую-то шапку сайта, она вроде и занимает ничего, но может иметь разного размера текст/лого/кнопку и т.п.
--- Добавлено позже: ---

Во первых: <h1> - текстовый заголовок первого уровня, есть ещё <h2> и <h3> (Заголовки второго, и третьего уровня соответственно)
А 4, 5, 6 куда делись? :oops:


Во вторых: <div> это контейнер для других тегов, который вовсе не обязательно занимает все доступное пространство вширь.
Он прописал в теге style ему width: 100%


Ну и в третьих: стоило бы написать что <p> - тег обозначающий абзац текста.
А, и цвет у него абсолютно чёрный(#000), как и у любого текста (если, естественно, не поменяешь)
Все также, как и с прошлым, состояние блока было изменено в теге style, с помощью метода color. Также изменен текст внутри тега-заголовка h1, а в частности шрифт на 18px, и отступ между строками 26px.
 
Последнее редактирование:

telaje3219

Новорег

telaje3219

Новорег
Статус
Offline
Регистрация
25 Авг 2021
Сообщения
0
Реакции
1
это для какого уровня тред ваще
 

Wasilii

Новорег

Wasilii

Новорег
Статус
Offline
Регистрация
6 Ноя 2021
Сообщения
0
Реакции
0
Надеялся на раздачу книжек )
 

ItsOlegDm Plus

Average Plastic Memories fan
Местный

ItsOlegDm Plus

Average Plastic Memories fan
Местный
Статус
Offline
Регистрация
27 Июн 2021
Сообщения
10
Реакции
115
"HTML-элементы" - это и есть теги, а вот скобочки - это скобочки, также не все теги требуют закрытия. Необязательно чтобы между открывающим и закрывающим что-то было, это может быть лишь открывающий и закрывающий тег.




В CSS лучше не использовать обращение к глобальным тегам, для этого есть class/id, есть исключения, но лучше так не делать. Да код простой, других тегов кроме тех что представлены нет, но даже если верстать просто какую-то шапку сайта, она вроде и занимает ничего, но может иметь разного размера текст/лого/кнопку и т.п.
--- Добавлено позже: ---


А 4, 5, 6 куда делись? :oops:



Он прописал в теге style ему width: 100%



Все также, как и с прошлым, состояние блока было изменено в теге style, с помощью метода color. Также изменен текст внутри тега-заголовка h1, а в частности шрифт на 18px, и отступ между строками 26px.
Про стили да, согласен, провтыкал. Хз как так я смотрел.
Ну а про h4 h5 и h6
Я себе не ставил целью перечислить все варианты, я тогда написал просто пару штук тип он не один такой) да и используют их не часто
--- Добавлено позже: ---

это для какого уровня тред ваще
Для тех кто вообще не шарит. Совсем.

Ну, вернее должен был быть)
Но автор решил что продолжение не нужно
 

Beka504004

Новорег

Beka504004

Новорег
Статус
Offline
Регистрация
18 Дек 2021
Сообщения
0
Реакции
0
Добро пожаловать в мир веб-разработки. Пишу для новичков и без воды.
Со мной вы поймёте принцип изучения и продолжите учиться сами.
Опытные ребята проходите мимо, ничего нового вы здесь не найдёте.

Разработка сайтов происходит в 4 этапа:
  1. Написание структуры веб-страницы;
  2. Стилизация этой же самой структуры;
  3. Программирование поведения страницы и её отдельных элементов;
  4. Бекенд или работа с отправкой/принятием каких-либо данных.
Первые 2 этапа происходят одновременно. Они самые лёгкие. В коде
вы сообщаете браузеру, что существует какой-то элемент, затем говорите,
как он выглядит. Это происходит с помощью двух языков:
  • HTML или язык гипертекстовой разметки.
  • CSS или каскадные таблицы стилей.


HTML элементы выглядят так:
Код:
<названиеЭлемента>Что-то между тегами</названиеЭлемента>

У них есть открывающий тег <> и закрывающий </>
Между ними содержатся другие элементы или какой-либо текст.

Код:
<div>
    <h1>Привет, HardTM</h1>
    <p>Вы учитесь основам веб-разработки</p>
</div>


Стили выглядят по-другому:
Код:
названиеЭлемента {
    параметр: значение;
}

Сперва ты сообщаешь браузеру, к какому элементу они относятся. Затем передаёшь
параметры и сообщаешь их значение. Давай рассмотрим реальный пример:
Код:
<div>
    <h1>Привет, HardTM</h1>
    <p>Вы учитесь основам веб-разработки</p>
</div>

<style>
div {
    width: 100%;
}
h1 {
    font-size: 18px;
    line-height: 26px;
}
p {
    color: #323232;
}
</style>

Не задумывайся о том, что значат <div>, <h1> и <p>. Мы изучим это позже.
Просто пойми логику — сообщаем о элементе и как он выглядит, на этом
основывается вся веб-разработка.

В примере выше мы сообщили браузеру:
  • <div> занимает всю доступную ширину вокруг себя;
  • <h1> имеет размер текста 18 пикселей и расстояние между строками 26 пикселей;
  • <p> имеет почти чёрный цвет текста.
В следующем уроке поговорим о софте для вёрстки (написания HTML и CSS кода), установим
плагины для ускорения разработки. Создадим базовую структуру любой веб-страницы.

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

Сверху