Download "HTML уроки. HTML теги для КОНТЕНТА. Уроки HTML CSS JS. Урок №3"

"videoThumbnail HTML уроки. HTML теги для КОНТЕНТА. Уроки HTML CSS JS. Урок №3

0:00

Вступление

0:16

Продолжаем знакомство с HTML тегами.

0:35

Создаём новый проект

1:11

Теги заголовков от H1 до H6.

2:07

Тег P.

3:20

Отличие блочных эллементов от строчных.

4:15

Важное правило для строчных тегов.

5:50

Тег A.

8:15

Тега IMG.

10:20

Списки UL OL LI

11:12

Тег BR

11:40

Практика

[2023] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета

[2023] Основы верстки сайта с нуля! HTML5 и CSS3 - верстка макета

Channel: WAYUP & Андрій Гаврилов

250$ за проект. Верстка реального проекта с Upwork 2022. HTML / SCSS / JavaScript (JS) / Gulp.

250$ за проект. Верстка реального проекта с Upwork 2022. HTML / SCSS / JavaScript (JS) / Gulp.

Channel: Давай Попробуем: JavaScript

#4 ActiveBox - Верстка сайта с нуля для начинающих | HTML, CSS

#4 ActiveBox - Верстка сайта с нуля для начинающих | HTML, CSS

Channel: BrainsCloud

#1 ActiveBox - Верстка сайта с нуля для начинающих | HTML, CSS, уроки верстки

#1 ActiveBox - Верстка сайта с нуля для начинающих | HTML, CSS, уроки верстки

Channel: BrainsCloud

Верстка сайта с нуля на HTML и CSS для начинающих - Часть 1

Верстка сайта с нуля на HTML и CSS для начинающих - Часть 1

Channel: ВЕРСТАЧ

CSS синтаксис. Обнуление CSS стилей. Уроки HTML CSS JS. Урок №5

CSS синтаксис. Обнуление CSS стилей. Уроки HTML CSS JS. Урок №5

Channel: Фрілансер по життю

Верстка сайта с нуля из Figma для начинающих #2

Верстка сайта с нуля из Figma для начинающих #2

Channel: [DELETED]

HTML уроки. Первый урок по HTML верстке. Уроки HTML CSS JS. Урок №1

HTML уроки. Первый урок по HTML верстке. Уроки HTML CSS JS. Урок №1

Channel: Фрілансер по життю

Теги для контента

HTML теги для контента

html верстка

HTML теги

Бесплатные уроки HTML

html верстка сайта с нуля

верстка сайта html

фрилансер по жизни

верстка сайта с нуля

верстка сайта

верстка

верстка для начинающих

уроки html

Верстка с нуля уроки

верстка сайта с нуля для начинающих

html

html с нуля

верстка сайтов с нуля

html уроки

html уроки с нуля

уроки верстки

уроки верстки сайтов

бесплатные уроки html css

верстка с нуля

Уроки HTML CSS JS

фрилансерпожизни

обучение

00:00:02

time to share with you my

00:00:04

practical experience and life hacks,

00:00:06

I will do this in tutorials in a

00:00:09

separate playlist, let’s start with the very basics

00:00:11

and later we will layout entire

00:00:13

sites. We’re ready

00:00:15

then, let’s continue to get acquainted with

00:00:17

html tags and in this lesson we’ll talk about

00:00:20

tags to work with content, that is, the

00:00:22

contents of the page, text, pictures and

00:00:24

links, and so on, and we will also learn how to

00:00:27

write tags without closing

00:00:29

elements, we will talk about attributes and

00:00:31

analyze the differences between lowercase and

00:00:33

block, this is a scale, and so we do not waste

00:00:36

time, create a new project, I will copy the

00:00:39

previous one for those who for the first time

00:00:41

watching my lessons, I advise you to first

00:00:43

watch the first episode about preparing a

00:00:45

project for work, and so I change the name,

00:00:48

this is our part 2 by tags, I go in the same way

00:00:52

with the working folder and immediately

00:00:56

move it sablon open it, open

00:01:00

the index, change our title of the taithon

00:01:04

part 2

00:01:05

so that we understand what lessons we are in

00:01:08

and clean our container, the first

00:01:12

thing we will do is get acquainted with the heading tags

00:01:14

h1 to h6 from h1 we already dealt with in the very

00:01:18

first lesson these are block tags and always

00:01:21

start on a new line and also have

00:01:23

closing elements as you already know

00:01:25

for the record then just write down his

00:01:28

name and press then

00:01:29

h1 h2 and so on until 6. It is

00:01:37

very important that type h 1 is written

00:01:41

only once on the page, all

00:01:43

other tags can be repeated and so

00:01:47

we filled them with some text,

00:01:49

save our document and see what

00:01:52

we got for this we go into the

00:01:54

project as usual and open it using

00:01:57

a browser,

00:01:59

so we see our hierarchy of headings

00:02:01

from the largest and most important to the

00:02:05

smallest, and

00:02:07

then we’ll get acquainted with the tag p, it

00:02:09

defines a text paragraph

00:02:11

so it’s block-based, so it will also

00:02:13

start on a new line each time,

00:02:15

let’s write down some text for

00:02:18

we will type this in lore and click as we

00:02:21

did in the last lesson and we will get

00:02:24

this paragraph of the text of paragraph number one,

00:02:28

copy and paste paragraph number

00:02:31

two again for clarity, save the document,

00:02:34

go to our page, click refresh and

00:02:38

we have these two

00:02:39

wonderful paragraphs each with a new

00:02:41

line, we once again pay attention

00:02:44

because our next tank is so blocky, this

00:02:47

expander and attention is our first

00:02:50

lowercase one, it is intended to

00:02:53

highlight a piece of text, let’s

00:02:56

write down a few spans and look at the

00:02:59

difference between lowercase tags and block ones,

00:03:04

go to the browser, click refresh and

00:03:07

see that our span tags are lined up in

00:03:12

a line, unlike block togaf ones,

00:03:15

which each start on a new line,

00:03:17

span tags go in one line,

00:03:20

why this happens is because it’s

00:03:22

block-based, so it occupies the entire width of the

00:03:25

screen, regardless of how much

00:03:28

text it contains or whatever other

00:03:31

information is lowercase, but its width

00:03:35

depends on the size of the content inside

00:03:39

it, for example in this case the text, that

00:03:42

is, the width because spam number one is

00:03:45

exactly the same as the

00:03:48

text here, for example, let's create another span

00:03:52

with some long text,

00:03:58

let's look and see that we start on the

00:04:03

same line as the previous spans and

00:04:06

end here, that is, the line

00:04:10

tags go on one line after another,

00:04:13

the difference from a flea and immediately an important rule

00:04:17

inside the lowercase taiga in their content

00:04:20

cannot be a block tag, for example, Stepan,

00:04:24

which is lowercase, we cannot

00:04:26

place the like.

00:04:27

this would be a mistake, also we can’t

00:04:29

place a header like this, which

00:04:32

is also block-level, and we can’t

00:04:35

put a div like this from the last lesson

00:04:38

because it’s also block-level, and

00:04:40

so on, but inside block tags we

00:04:44

can place block-level elements,

00:04:47

for example, a div, we can place a view like this

00:04:50

and lowercase inside we can put

00:04:53

spam, this is wrong, this is correct with

00:04:59

differences, I think it’s clear now

00:05:02

we’ll use the span for its intended purpose, for example,

00:05:04

we’ll select this piece of text like this, as a

00:05:12

result we won’t see anything for

00:05:14

one simple reason because in

00:05:16

order for the span to work, for example we

00:05:19

will want to highlight this piece of text with a

00:05:22

yellow color and a yellow background in order for

00:05:24

this to happen we need we need a

00:05:27

cascading css style sheet that we have

00:05:30

yet to learn but for

00:05:32

demonstration I will now add a little

00:05:35

css magic and see how it will

00:05:37

look here is a more visual example of how the

00:05:39

lowercase works then, gentlemen, of course,

00:05:45

we will definitely study the properties of the css that we applied here in the lessons

00:05:47

dedicated to cascading tables, but

00:05:50

today we are moving on and we have

00:05:53

one of the most important ones next in line because in all html

00:05:56

and is intended for creating links to a

00:05:59

particular document, site or file, it

00:06:02

is also a line tag and is used

00:06:05

together with a number of attributes; in fact, the

00:06:07

most important of them is the itc.ua attribute

00:06:10

value and indicate where we will

00:06:14

go or what we will download by clicking on our

00:06:18

own links in the value of the href attribute

00:06:21

can be another html page site

00:06:24

image path or another file in the

00:06:27

very content of the tag, or it can be both

00:06:30

text and other line tags

00:06:33

such images another frequently

00:06:36

used attribute is the targa attribute,

00:06:43

namely, it is often used with

00:06:45

the value “form” means that when you

00:06:50

click on our link, the

00:06:52

contents of the href attribute will open in a

00:06:56

new browser window,

00:06:58

let’s fill ours with some

00:07:00

content and

00:07:03

in the id attribute we’ll indicate the chief, let’s say the

00:07:08

google site will save, update our page and

00:07:16

here, since we have it so

00:07:18

lowercase in one line with the

00:07:22

previous span tags

00:07:24

and when you click on our link, the google website will open in a

00:07:28

new browser window in a new tab, which is exactly

00:07:30

what

00:07:33

we indicated in the RF id attribute and

00:07:38

it worked because we indicated bidding in the attribute,

00:07:41

we can also embed this link in

00:07:43

our paragraph here, for example, here are these

00:07:46

first three words, when we click on

00:07:49

them, we should open google in a new new

00:07:53

tab, add this here, this

00:07:58

has turned into a link, our first three

00:08:00

words and when clicked, it will actually open

00:08:02

if we remove the target blank,

00:08:06

delete this thus, when

00:08:11

we click, the google knife will open in the same window, the

00:08:14

next no less interesting t t

00:08:18

t t t m g

00:08:19

it is intended for inserting images

00:08:21

into our web page, this is lowercase, so there

00:08:24

is a significant difference from it is

00:08:26

written without closing elements

00:08:30

heart and alt this required attributes

00:08:33

of this tag

00:08:34

heart is the path of the picture that we

00:08:37

want to connect and alt is used to

00:08:40

write alternative text

00:08:42

that will appear if our picture for

00:08:44

some reason does not load, let's

00:08:47

now try to connect which

00:08:48

picture

00:08:51

for this I take any picture and

00:08:55

place it in the folder Angie of

00:08:58

our project, in this way, now I

00:09:05

’ll stop at the place of the parameter,

00:09:08

the value of the src attribute, select

00:09:12

Angie’s daddy and see my picture that I

00:09:16

copied there, click no, save and

00:09:21

update our page and now our

00:09:23

picture has appeared on our page,

00:09:27

now let’s look at the action of

00:09:30

the attribute and here we can specify

00:09:32

some text of the

00:09:34

oh picture is not

00:09:40

saved, we update now

00:09:44

nothing will happen, but if we take and

00:09:46

remove our picture, we will simulate its loss,

00:09:50

just rename it and update it, and now

00:09:55

we will have an icon for this picture and

00:09:58

our alternative text that we

00:10:00

wrote down, although the alt attribute is

00:10:04

mandatory, but it can be empty,

00:10:06

that is, the record can

00:10:09

look like this, in this case we won’t have any text,

00:10:12

no pictures, no text, so

00:10:15

the user won’t even understand that there

00:10:17

should have been something here. Let’s

00:10:19

move on and look at several tags at once.

00:10:22

It’s marked. list gender a

00:10:25

numbered list

00:10:26

gender and each element of any of the lists

00:10:29

should be closed in a crucible, this is

00:10:32

what it should look like,

00:10:35

for example, create a bulleted list

00:10:38

enter and inside we should have a crucible

00:10:42

with some text, we can also

00:10:45

add another item another item for the

00:10:49

same The most important thing concerns agapes,

00:10:52

whether some of their contents can also

00:10:56

be saved a lot, we look at what we

00:11:00

got right away, we can immediately see that the street is a floor

00:11:04

or are block tags and each of

00:11:07

them starts on a new line,

00:11:09

well, before we start practicing

00:11:12

where of some layer - then the text and I’ll tell you more

00:11:14

about tb.

00:11:15

it is used to break the line in

00:11:17

the place where it is installed, it does not

00:11:20

have a closing element, for example,

00:11:22

let's take it and insert it after this

00:11:25

point in our first paragraph in

00:11:27

this way, save and update and

00:11:31

we see that in this place after . we

00:11:33

had a line translation, let's put

00:11:37

our newly acquired knowledge into

00:11:39

practice and make up some

00:11:40

arbitrary text,

00:11:41

here at hand I found a piece of

00:11:44

the script from the Freelance or Office issue

00:11:47

written in Arbi, of course, in the

00:11:49

future we will do the layout from

00:11:52

design layouts

00:11:53

just now for practice, we will

00:11:55

use this exact text

00:11:57

here we have a numbered list, a

00:11:59

bulleted list of

00:12:01

headings and a picture that we

00:12:04

stand up and so clean the knife so our

00:12:09

container body, for convenience, I will

00:12:14

place the editor on this side

00:12:19

and our actual text, our source code for

00:12:22

today, is on this side so let's

00:12:26

go, it's obvious that this is our main

00:12:28

heading, we copy it and create our

00:12:32

main h1 heading, I'll remind you that there

00:12:35

can't be two h1 headings on a page, there

00:12:38

should be only one h1 heading like

00:12:42

this, they're already 11 times on the page,

00:12:46

it's clear, and then we have a certain one paragraph

00:12:50

of text p to

00:12:54

copy this paragraph, we also have the next

00:12:59

paragraph, somehow select it,

00:13:05

select its spam to wrap a piece of

00:13:12

text or some object in t, you need to

00:13:17

select the object and hold down shift and alt w and

00:13:21

it will turn away by default, etc. .

00:13:24

here we can write love in this

00:13:26

case, spa,

00:13:27

we have this construction of a

00:13:30

paragraph inside of which there is a span inside of

00:13:34

which the text is moreover in this text

00:13:37

which is highlighted there is clearly a link to the

00:13:40

releases by the way these specialists from scratch

00:13:42

so in fact this is the name of

00:13:46

the release we will wrap the

00:13:49

link we will make it click the link,

00:13:52

select the text, press shift al w

00:13:55

write a space and add the attribute evening

00:13:59

and equals and quotes inside we can

00:14:03

place a link to our issue, then

00:14:06

again we have a paragraph with the text,

00:14:11

create p, insert, then we have

00:14:15

a certain heading,

00:14:16

create a heading h2 and insert

00:14:21

this there the text is next, we have a

00:14:24

numbered list, we remember that it

00:14:27

is written as it is and each of the items

00:14:30

should be in its own tags, shouldn’t we create and

00:14:34

insert there only this one

00:14:39

we no longer need on the stock I’m shaking

00:14:43

[music]

00:14:48

great, we have the heading here again h2

00:14:53

headings, all except h1 can be

00:14:55

used many times, then again we have

00:14:58

some paragraph with text,

00:15:02

insert it, then we have a picture,

00:15:06

I have already moved this picture to the

00:15:09

project folder and MJ here it is and now we will

00:15:13

insert it using the

00:15:16

image tag m&g write tab and here here is

00:15:22

the value of the src attribute, we select our

00:15:25

m&g folder and our desired file like

00:15:28

benji is then we have two more paragraphs of

00:15:35

text

00:15:40

inserted into pasted

00:15:49

I am left-handed I use the control keys

00:15:51

insert shift in so for copying and

00:15:54

pasting but all right-handed people would use

00:15:56

kontrol and control and

00:15:58

as in any other Windows program, and

00:16:01

we move on, we again insert the title

00:16:11

and here we have a bulleted

00:16:14

list

00:16:15

written as a floor and actually

00:16:19

move each item into a separate line,

00:16:30

and finally we have the last title and

00:16:34

[music]

00:16:36

another paragraph of text

00:16:39

[music ]

00:16:40

only here we see that after the point

00:16:43

our text

00:16:44

is translated from a new line, so after

00:16:47

that the desired point we put tbn further

00:16:52

after was the text can continue to go to the

00:16:55

same line like this, well, you have

00:16:58

absolutely no meaning to them and the

00:17:01

document is maintaining control with and Let's see

00:17:06

what we got, update, look at the

00:17:09

heading, paragraph, our text, with a link,

00:17:14

paragraph, heading, numbered list,

00:17:18

heading, paragraph, picture, a couple more

00:17:21

paragraphs,

00:17:22

heading, bulleted list, and the

00:17:24

last heading from the paragraph, in fact,

00:17:27

everything is the same as in our document, except for

00:17:31

highlighting our second paragraph in yellow,

00:17:35

and like last time for clarity

00:17:37

Naturally, I’ll show you for an hour how it will

00:17:40

look in the end, that’s all, here’s your

00:17:43

homework, find any text at home and

00:17:45

I’ll try to type it up using

00:17:48

the tags we learned today, I’m sure you’ll

00:17:50

succeed, the third lesson on

00:17:52

layout has come to an end,

00:17:53

of course, I plan to shoot

00:17:55

practically issues and gave and do it and

00:17:58

I want it to be as high-quality and

00:17:59

interesting as possible, so I will be very

00:18:02

grateful for your constructive criticism

00:18:03

in the comments, I’m really very

00:18:05

interested in your opinion about everything in the world,

00:18:08

sounds, method of presenting information, frequency

00:18:11

of releases, and so on, so write all your

00:18:13

comments in the comments and don’t

00:18:16

forget to like and subscribe

00:18:18

in the next lesson we will get acquainted with

00:18:20

form tags learn develop and remember

00:18:24

live work free time

00:18:27

[music]

Description:

HTML уроки. HTML теги для КОНТЕНТА. Уроки HTML CSS JS. Урок №3. Продолжаем учить HTML с нуля и сегодня у нас HTML теги для контента. В этом уроке поговорим о тегах для работы с контентом то есть с содержимым страницы, текстом картинками и так далее. Изучим теги H1-H6, A, SPAN, P, IMG, UL\OL\LI и BR. А также научимся записывать теги без закрывающих элементов, поговорим об атрибутах и разберем отличия строчных от блочных тегов. 🔴 БЕСПЛАТНЫЙ курс и уроки по HTML CSS JS верстке: https://www.youtube.com/playlist?list=PLM6XATa8CAG4F9nAIYNS5oAiPotxwLFIr Архив с файлами урока ищи в телеграм канале https://t.me/freelancer_lifestyle Или качай по ссылке: https://fls.guru/files/tutorials/htmltags_2.zip 00:00 Вступление 00:16 Продолжаем знакомство с HTML тегами. 00:35 Создаём новый проект 01:11 Теги заголовков от H1 до H6. 02:07 Тег P. 03:20 Отличие блочных эллементов от строчных. 04:15 Важное правило для строчных тегов. 05:50 Тег A. 08:15 Тега IMG. 10:20 Списки UL OL LI 11:12 Тег BR 11:40 Практика Спасибо Mr. Blet 🔴 Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle 🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat) 🔴 Facebook: https://www.facebook.com/unsupportedbrowser 🔴 Instagram: https://www.facebook.com/unsupportedbrowser 👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle 🤟 Живи, а работай в свободное время! ©

Preparing download options

Popular

HD video

Only sound

All

* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."

** — Link intended for online playback in specialized players

Questions about downloading video

How can I download "HTML уроки. HTML теги для КОНТЕНТА. Уроки HTML CSS JS. Урок №3" video?

http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

Which format of "HTML уроки. HTML теги для КОНТЕНТА. Уроки HTML CSS JS. Урок №3" video should I choose?

The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

Why does my computer freeze when loading a "HTML уроки. HTML теги для КОНТЕНТА. Уроки HTML CSS JS. Урок №3" video?

The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

How can I download "HTML уроки. HTML теги для КОНТЕНТА. Уроки HTML CSS JS. Урок №3" video to my phone?

You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

How can I download an audio track (music) to MP3 "HTML уроки. HTML теги для КОНТЕНТА. Уроки HTML CSS JS. Урок №3"?

The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

How can I save a frame from a video "HTML уроки. HTML теги для КОНТЕНТА. Уроки HTML CSS JS. Урок №3"?

This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

What's the price of all this stuff?

It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.