Главная Форум Файлы Статьи СОСТАВ ZH&ZHS О НАС GITHUB КАНАЛ YouTube BlackList WhiteList
Добро пожаловать на уникальный игровой портал ZETA-HACK TEAM! Здесь Вы сможете найти самые интересные новости из мира игровой индустрии, найти самые свежие сотфины для различных онлайн игр, общаясь на форуме получать мнения специалистов и помогать тем кто не смог получить нужный ответ в той или иной сфере!
Авторизация Регистрация
Последние обсуждаемые темы на форуме
Последние комментарии к новостям
Топ-10 форумчан
Заработок на файлообменниках 3... =AlexDrift= 0
"Халява" оператор мт... =AlexDrift= 0
Enigma+Protector+v5.20+x86+-+[... =AlexDrift= 0
Исходник FakeBots by daddy_pie... =AlexDrift= 0
AntiBanIP - FrostyVPN =AlexDrift= 0
Исходник собейта для GTA 5 =AlexDrift= 0
hATez0r атакир сайтов =AlexDrift= 0
SAMP-Firewall =AlexDrift= 0
socks5+proxy примеры на С++ =AlexDrift= 0
AntiSerialBans для SAMP =AlexDrift= 0
Приватный чит для Rust Experimental 21.11.2018
Приватный чит для Rust Experimental 21.11.2018
PS4-эксклюзив Spider-Man за четыре недел... 13.10.2018
[0.3e]Игровой мод сервера Street Workout... 12.10.2018
[0.3e]Игровой мод сервера Street Workout... 12.10.2018
PS4-эксклюзив Spider-Man за четыре недел... 12.10.2018
Новый вид крашинга 11.10.2018
PS4-эксклюзив Spider-Man за четыре недел... 11.10.2018
Новый вид крашинга 20.08.2018
Новый вид крашинга 08.08.2018
1. =AlexDrift= 502
2. Pahanch1kkk 45
3. InFerNo 34
4. R4DUGA 32
5. d1amondl1on 27
6. [NACIONAL]IST_BERZ 23
7. Julia 21
8. AdCKuY_DpO4uLa 20
9. Lil_Jonson 17
10. Effect 15
Витрина ссылок Купить ссылку (4 р.) » | Ваша ссылка | Ваша ссылка | Ваша ссылка | Ваша ссылка | Ваша ссылка | Ваша ссылка | Ваша ссылка

  • Страница 1 из 1
  • 1
Форум » Программирование » HTML » Изучаем HTML (Урок 3)
Изучаем HTML (Урок 3)
14.07.2018 в 17:08
#1
d1amondl1on
Статус: Offline
Регистрация: 12.05.2017
Сообщения: 27
Репутация: 19
Что бы добавить медаль "Легенда портала" добавляем в ?if "or 1111='ID пользователя'"
Что бы добавить медаль "Золотой страж" добавляем в ?if "or 1111='ID пользователя'"
В прошлом уроке, мы с вами изучали что такое "Параграфы, комментарии, форматирование текста и горизонтальные линии", сегодня же мы с вами приступим уже к более важному, это ЭлементыИзображения и Атрибуты!

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

HTML - документ может состоять из вложенных друг в друга HTML - элементов.

Пример: 

Код<html>
 <head>
     <title>Тестовая страница</title>
 </head>
     <body>
      <p>Первый параграф.<br /></p>
 </body>
</html>

Как мы видим, тег переноса строки, не требует открытия и закрытия, он сразу предоставляется в виде <br/>. 

Из чего же всё таки состоят элементы - они состоят из открывающего, закрывающего тегов и содержимого.

Некоторые элементы очень короткие. Так как нельзя поместить содержимое внутрь тега переноса строки и так как нет открывающего и закрывающего тега переноса строки, то тег <br/> можно считать единым элементом.

Можно также сказать, что в языке разметки HTML сценарии пишутся с помощью элементов внутри элементов.

Пример:

Код<html>
    <head>
        <title>Тестовая страница</title>
    </head>
   <body>
      <p>Первый параграф.</p>
      <p>Тут <br/> перенос строки.</p>
   </body>
</html>

Я думаю с элементами понятно, теперь мы перейдём к Атрибутам

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


Код
<p align="center"> 
Этот текст выровнен по центру.
</p>

В этом примере, значение атрибута "center" указывает на то, что содержимое элемента <p>, должно быть выровнено по центру. 

Атрибуты всегда пишутся в открывающем теге и имеют следующую парную структуру name="value".

Какова роль атрибута в HTML?! - Атрибут изменяет тег. 

Единицы измерений в атрибутах:

В качестве примера давайте возьмём и добавим в HTML - документ горизонтальную линию, размером в 50 px (px - это пиксели).

Для этого нам понадобиться атрибут ширины "width"
Ширина элемента, может измеряться не только в пикселях, но также и в "%".

Пример: 


Код
<hr width="50px" /> или же <hr width="50%" />

Посмотрим на это наглядно




Атрибут выравнивания: 

Атрибут выравнивания указывает на то, как текст будет выровнен в документе.
В приведённом ниже примере, будет показано, как параграф будет выровнен по центру, а строка текста будет выровнена по левой стороне. 

Код<p align="center">Параграф выровненный по центру.<br />
<hr width="50px" align="left" />Строка текста, выровненная по левой стороне.



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

Код<p align="center">
Просто текст. <hr width="50%" align="left" />

</p>

Сработает первый атрибут, который был написан в открывающем теге элемента. 

Я думаю, уже достаточно ознакомились с атрибутами, теперь настало время перейти к Изображениям!

Изображения:
Изображения в HTML - документе используют тег <img> (он является единым элементом, а также содержит в себе атрибуты)

Синтаксис для добавления изображения выглядит следующим образом.

Код
<img src="image.jpg" [i]<!-- Путь к изображению --> />

Ссылка на изображение или же по другому путь к файлу, отображается с помощью атрибута "src" (<img src="" />) 

Месторасположение изображения:

Месторасположение изображения указывается в кавычках атрибута "src". Если у вас к примеру изображение с названием logo или ещё что нибудь и лежит это в корне каталога файлов, то тогда мы указываем вот такой путь. 
Атрибут alt обязателен 


Код
<img src="logo.png" [i]<!-- Путь к изображению --> alt="" [i]<!-- Текстовое описание изображения, в случае если атрибут src не смог отобразить его --> />

Также изображению можно присвоить свой размер, делается это при помощи атрибутов "heigth" & "width" (высота и ширина)
Насколько мы помним в атрибутах размеров мы можем указывать их, как в пикселях, так и в процентах.

Пример:


Код
<img src="logo.png" height="150px" width="150px" alt="" /> [i]<!-- или же вот так --> <img src="logo.png" height="60%" width="40%" alt="" />

Тоесть, в 1-м случае, у нас изображение будет отображено размером 150х150, в другом же 60% высоты, на 40% ширины. 

А также, не забывайте, что изображения больших размеров, иногда могут долго грузиться, поэтому не забывайте присваивать ему размеры!

Рамка вокруг изображения: 

По умолчанию изображение не имеет рамки. Рамка отображается при помощи атрибута "border", данный атрибут помещается внутрь тега изображения. (Также его используют со значениям в пикселях)


Код
<img src="logo.png" height="150px" width="150px" border="1px" alt="" />

1. Обычное изображение с использованием стандартных атрибутом элементам, 2-е изображение, с доп.атрибутами размеров. 3-е изображение, с атрибутами размеров и атрибутом border - рамка.



Ну а на этом наш с вами урок подходит к концу, сегодня мы с вами изучили, что такое "Элементы, Атрибуты, Изображения". 
Не забывайте постоянно практиковаться, что-то пытаться делать своё, для того чтобы укрепить знания у себя в голове!
Форум » Программирование » HTML » Изучаем HTML (Урок 3)
  • Страница 1 из 1
  • 1
Поиск:

условия предоставления информации
Авторские права и контакты
счетчики
счетчики
счетчики
Новости и публикации в новостной ленте предоставлены исключительно в ознакомительных целях. Все материалы принадлежат исключительно их владельцам! Администрация портала не несет ответственности за последствия использования вами сторонних материалов, опубликованных на форуме, каталоге файлов, каталоге статей, но гарантирует отсутствие вредоносного кода в новостях и публикациях на главной.
  • Основатель портала - AlexDrift
  • Автор дизайна, разработчик - Lil Jonson
  • По возникшим вопросам дизайна - [email protected]
  • По всем возникшим вопросам - vk.com/alexdrift1137
  • Уникальный игровой портал ZETA-HACK.RU ® 2011 - 2019
  • Сайт создан в системе uCoz

  • Яндекс.Метрика
    Рейтинг@Mail.ru