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

[MRX]

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

Разработка сайтов происходит в 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]

Круто !
Жду продолжения!

 

[batmanxx]

А где следующий пост?

 

[Xixixixixixixxi]

Вааау, жду ещёёёё

 

[knownaim]

Будут ещё уроки?

 

[MRX]

Будут ещё уроки?

решу вопрос с внешними ссылками на редактор кода и напишу вторую часть

 

[bbd]

вопрос не решен?

 

[Qw1ncky]

Спасибо, ждём продолжения

 

[Benst]

Достаточно интересно, хоть базу более менее знаю. Жду продолжение, думаю на 4-6 урок, будет гораздо интересней!

 

[bbd]

Всё ещё жду. Как успехи?

 

[tommac]

Для начала и без воды вполне приемлемо. Подождём продолжения.

 

[ItsOlegDm]

Как по мне, описание тегов не особо информативное:

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

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

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

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

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

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

 

[SKR]

Спасибо автору, ожидается ли продолжение?

 

[Plyxa]

Жду продолжения

 

[vBuPYCv]

Продолжения не будет получается

 

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

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, есть исключения, но лучше так не делать. Да код простой, других тегов кроме тех что представлены нет, но даже если верстать просто какую-то шапку сайта, она вроде и занимает ничего, но может иметь разного размера текст/лого/кнопку и т.п.

--- Добавлено позже: 14 Июл 2021 ---

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

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

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

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

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

Все также, как и с прошлым, состояние блока было изменено в теге style, с помощью метода color. Также изменен текст внутри тега-заголовка h1, а в частности шрифт на 18px, и отступ между строками 26px.

 

[telaje3219]

это для какого уровня тред ваще

 

[Wasilii]

Надеялся на раздачу книжек )

 

[ItsOlegDm]

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




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

--- Добавлено позже: 14 Июл 2021 ---

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



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



Все также, как и с прошлым, состояние блока было изменено в теге style, с помощью метода color. Также изменен текст внутри тега-заголовка h1, а в частности шрифт на 18px, и отступ между строками 26px.

Про стили да, согласен, провтыкал. Хз как так я смотрел.
Ну а про h4 h5 и h6
Я себе не ставил целью перечислить все варианты, я тогда написал просто пару штук тип он не один такой) да и используют их не часто

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

это для какого уровня тред ваще

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

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

 

[Beka504004]

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

Разработка сайтов происходит в 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 кода), установим
плагины для ускорения разработки. Создадим базовую структуру любой веб-страницы.

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

Спасибо за короткий гайд