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

Статус
В этой теме нельзя размещать новые ответы.

MRX

Новорег

MRX

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

Разработка сайтов происходит в 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
Лайки
2
Круто !
Жду продолжения!
 

batmanxx

Новорег

batmanxx

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

bbd

Новорег

bbd

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

Qw1ncky

Новорег

Qw1ncky

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

Benst

Новорег

Benst

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

bbd

Новорег

bbd

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

tommac

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

tommac

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

ItsOlegDm

Местный
Друг HARD-TM

ItsOlegDm

Местный
Друг HARD-TM
Статус
Offline
Регистрация
27 Июн 2021
Сообщения
20
Лайки
251
Как по мне, описание тегов не особо информативное:

Во первых: <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
Лайки
36
Продолжения не будет получается 🤣
 

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

Местный
Местный

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

Местный
Местный
Статус
Offline
Регистрация
19 Мар 2021
Сообщения
49
Лайки
103
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

Местный
Друг HARD-TM

ItsOlegDm

Местный
Друг HARD-TM
Статус
Offline
Регистрация
27 Июн 2021
Сообщения
20
Лайки
251
"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 кода), установим
плагины для ускорения разработки. Создадим базовую структуру любой веб-страницы.

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