Перейти к содержимому

Фотография

Теги HTML

Теги HTML

Сообщений в теме: 31

#1 it.donor Отправлено 12 Май 2013 - 00:52

it.donor

    Постоянный

  • Пользователи
    • Регистрация: 01-05-2013
    • Публикаций: 129
    • Создал тем: 31

Опять смотрим наш каркас и начинаем разбор тегов, которые мы видим :

 <html>

<head>

<title></title>

</head>

<body>

Привет от social-master.ru !

</body>

</html>

 

 

Первый тег мы обсудили в теме Введение в HTML. Далее идем по порядку :

Тег HEAD. HEAD имеет закрывающий тег </head>. Его предназначение - определение заголовка страницы и контейнер для технической информации, которая должна быть указана для страницы. Как на примере - в HEAD находится техническая информация о названии страницы (тег TITLE)

Тег TITLE. Данный тег указывает имя всей страницы (всего документа). Отображается в названии вкладки в браузере. Читается поисковыми системами. Имеет закрывающий тег.

Тег BODY. Данный тег обозначает начало "тела" страницы. Вся информация, которая находится в пределах этого тега - это содержание нашей страницы, которое отображается в браузере (в отличии от HEAD). Имеет закрывающий тег.

 

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


  • 0

#2 Larik Отправлено 04 Июль 2013 - 12:37

Larik

    Прохожий

  • Пользователи
    • Регистрация: 27-05-2013
    • Публикаций: 68
    • Создал тем: 10

Очень хорошее начало рассказа о тегах. Просто и понятно. Хотелось бы прочитать и продолжение, ведь тегов много, и подкупает обещание автора показывать все на конкретных примерах. Надеюсь, что повествование продолжится :)


  • 0

#3 Mr.Freeman Отправлено 30 Июль 2013 - 09:19

Mr.Freeman

    Веб-разработчик

  • Модераторы
    • Регистрация: 01-05-2013
    • Публикаций: 224
    • Создал тем: 60

Немного продолжу :)
Теперь более сложней! ;)

<html>
<meta charset="utf-8">
<head>
<title>Social-Master.Ru</title>
<body bgcolor="Yellow">
<center><h1><font color="Red" face="Comic Sans MS">Social-Master.Ru - Форум о социальных сетях!</font></h1></center>
<hr>
<center><a href="about.html"><font face="Comic Sans MS" size="4">О Проекте</a> | <a href="news.html">Новости</font></a><br></center>
<center><img src="logo.png"></img></center>
</body>
</head>
</html>

Теперь поясню :bv:

<meta charset="Utf-8">  -  Кодировка страницы.

 

<title><title>  -  То что отображается вверху вкладки.

<center></center> - Текст по центру.
<h1></h1> - Размер Заголовка.
<font color="Цвет"></font> - Цвет текста.              \

<font face="Шрифт"></font> - Стиль шрифта.       -  или так: <font color="Цвет" face="шрифт" size="размер">Текст</font>

<font size="Размер"></font> - Размер текста.       /

<hr> - Полоска ниже текста! Или тег, применяемый при создании таблицы!
<a href="Ссылка или путь до страницы">Текст</a> - Ссылка на страницу или же на сайт!
<br> - Тег, для перехода на новую строку(небольшое расстояние).
<p> - Тег, для перехода на новую строку(большое расстояние).
<img src="имя.png(jpg,gif...)"></img> - Тег, для вставки изображения на страницу!
 

Вот собственно скрин, что у нас получилось:

Скрытый текст


  • 2

#4 Larik Отправлено 31 Июль 2013 - 07:59

Larik

    Прохожий

  • Пользователи
    • Регистрация: 27-05-2013
    • Публикаций: 68
    • Создал тем: 10

О! Продолжение, и с примерами, давно его жду. Хоть и сложнее немного на этот раз, однако все максимально понятно. Спасибо, Mr.Freeman!


  • 0

#5 Mr.Freeman Отправлено 14 Август 2013 - 09:58

Mr.Freeman

    Веб-разработчик

  • Модераторы
    • Регистрация: 01-05-2013
    • Публикаций: 224
    • Создал тем: 60

И снова Здравствуйте. :ay: 
В этот раз простите, будет очень мало нового.
Но всё же выложу, что написал за 5 минут. :bv: 
В этот раз, мы рассмотрим следующий образ тегов  html.

 
Теперь собственно поясню, всё как есть, и как оно работает: :eh:
 
  -  Данный тег, поможет вам поставить необходимую картинку на фон. (путь и имя файла указывайте свой).
 
<a hreftitle="X-Admin - Forum for Sys.Admin's">logo.png - Тут собственно содержится аж 2 тега, которые работаю вместе! Обьясню, a href=  данный тег позволяет добавить на какой либо сайт или страницу. titleпозволяет добавить текст, который будет выводиться при указывании мышкой на ссылку!  закрывает первый тег(ссылка и текст). logo.png данный тег, позволяет добавить картинку на страницу ну или использовать картинку в виде шапки.  закрывает данный тег. Что же я сделал в этих тегах, я сделал так, чтобы при нажатии на картинку, браузер переходил на сайт(страницу). То есть, мы использовали картинку в виде линка на другой сайт(страницу html).
 

  -  Данный тег зачастую используется для создания таблиц в html, но в этот раз, я  его использовал как полоску, разделяющую шапку сайта с разделами форума, в этом вы убедитесь на скриншоте. Теперь обьясню, как это работает,  hr обычно используется по умолчанию, то есть, если ставить 

 то получится обычная полоска по стандарты без цвета и с размером по умолчанию! Но в этот раз, я сделал полоску в голубом цвете, то есть использовал color="Orage" , после данного тега, я поставил size="3" он означает размер вашей полоски, размер указывается таким образом( size="размер(не более 7)").
 
  -  Данный тег, используется для обьемного создания так называемой кнопочки. Обычно впереди этого тега, я указываю ссылку на страницу(сайт) например: [url=http://x-admin.ru] и далее наш тег, который поможет сделать кнопочку .

  • [url=http://x-admin.ru]  -  Ещё, один не менее интересный тег, который поможет создать вам жирненькую точечку. Собственно, её вы увидите на скриншоте ниже.

    Спасибо за внимание! Искренне Ваш, Mr.Freeman!

Прикрепленные файлы


  • 1

#6 it.donor Отправлено 15 Август 2013 - 10:54

it.donor

    Постоянный

    Топикстартер
  • Пользователи
    • Регистрация: 01-05-2013
    • Публикаций: 129
    • Создал тем: 31

Для тех, кто учится на данных примерах - имеет место человеческий фактор. Если скопировать и вставить последний пример - он не будет работать. Т.е. будет вести Вас на несуществующую страницу. Все дело в том, что протокол HTTP, а в примере - HTPP


  • 1

#7 Black_Kot Отправлено 15 Август 2013 - 12:51

Black_Kot

    Гл.модератор

  • Главный модератор
    • Регистрация: 05-05-2013
    • Публикаций: 161
    • Создал тем: 5

Для тех, кто учится на данных примерах - имеет место человеческий фактор. Если скопировать и вставить последний пример - он не будет работать. Т.е. будет вести Вас на несуществующую страницу. Все дело в том, что протокол HTTP, а в примере - HTPP

Зря ты спалил..
Мало ли ошибка специально сделана чтобы сами ее нашли и научились чему то.
  • 1

#8 Mr.Freeman Отправлено 15 Август 2013 - 17:42

Mr.Freeman

    Веб-разработчик

  • Модераторы
    • Регистрация: 01-05-2013
    • Публикаций: 224
    • Создал тем: 60

Для тех, кто учится на данных примерах - имеет место человеческий фактор. Если скопировать и вставить последний пример - он не будет работать. Т.е. будет вести Вас на несуществующую страницу. Все дело в том, что протокол HTTP, а в примере - HTPP

Саша, ну зачем ты спалил. Я специально для новичков сделал, пускай хоть чему то учатся и ищут ошибки.  А так, если тупо будут копировать, они нечему не научатся! :eh:


  • 1

#9 it.donor Отправлено 15 Август 2013 - 19:10

it.donor

    Постоянный

    Топикстартер
  • Пользователи
    • Регистрация: 01-05-2013
    • Публикаций: 129
    • Создал тем: 31

Ну я могу сказать так : даже если-бы ошибки не было - люди все равно заменяют текс, ссылки, урлы. Научатся они в любом случае) А вот зайдет на форум человек, не заметит ошибки и обидится. И лет через 10 создаст протакол HTPP, который вытеснит HTTP. :ag:


  • 0

#10 Mr.Freeman Отправлено 15 Август 2013 - 19:31

Mr.Freeman

    Веб-разработчик

  • Модераторы
    • Регистрация: 01-05-2013
    • Публикаций: 224
    • Создал тем: 60

Ну я могу сказать так : даже если-бы ошибки не было - люди все равно заменяют текс, ссылки, урлы. Научатся они в любом случае) А вот зайдет на форум человек, не заметит ошибки и обидится. И лет через 10 создаст протакол HTPP, который вытеснит HTTP. :ag:

Это меня довольно таки огорчит :ag:


  • 0

#11 Mr.Freeman Отправлено 26 Август 2013 - 16:12

Mr.Freeman

    Веб-разработчик

  • Модераторы
    • Регистрация: 01-05-2013
    • Публикаций: 224
    • Создал тем: 60

Здравствуйте, уважаемые пользователи форума X-Admin.RU!

Вот собственно сделал новый исходник на html. Но подключение css файлов я не осуществил, но в следующей версии обязательно css будет "подключено".

В этот раз не стал всё сюда кидать, а заархивировал в .zip файл, и не стал всё расписывать(обьяснять).

Практикуйтесь, создавайте что-то своё, удачи!!!

Прикрепленный файл  Temolatemo.zip   11,37К   0 Количество загрузок:


  • 0

#12 Mr.Freeman Отправлено 26 Август 2013 - 23:08

Mr.Freeman

    Веб-разработчик

  • Модераторы
    • Регистрация: 01-05-2013
    • Публикаций: 224
    • Создал тем: 60

И снова здравствуйте! :eh:

Не успел придти новый день, и я уже написал новый исходник для изучения html & css стилей!
Как я Вам и обещал, в данном исходнике я подключил css стили, и дизайн страницы стал на много красивей!

Как Вы уже заметили, я нечего не поясняю, потому что хочу, чтобы Вы сами во всём разобрались, собственно как и Я год тому назад.
Единственное, к чему я добавлял комментарии, так это к css стилям, т.к. они для Вас новые!

В следующем исходнике, предлагаю разобрать таблицы, которые сделаны с помощью css стилей, они более красивей, чем в html!
 

Ну собственно желаю Вам удачи в изучении. :by:
 

Прикрепленный файл  Templatemo 3.zip   133,98К   2 Количество загрузок:


Сообщение отредактировал Mr.Freeman: 26 Август 2013 - 23:38
заменил исходник(обновление)!

  • 0

#13 Mr.Freeman Отправлено 28 Август 2013 - 07:33

Mr.Freeman

    Веб-разработчик

  • Модераторы
    • Регистрация: 01-05-2013
    • Публикаций: 224
    • Создал тем: 60

Кол-во загрузок 2, а спасибо 0. Обидно..

Но всё же, пишу новый исходник, но как то вдохновения что ли нет, ну всё-же что-то написал, сегодня немного подкорректирую и обязательно выложу!
Немного информации, что я сделал:
 

(+) Добавил комментарии, почти к каждому тегу;

(+) Теперь исходник подключается к файлу style.css, где расположены все стили;

(+) Теперь разделы в округлённой рамке;

(+) Разделы(названия), помещены в кнопочки(цвет кнопок вы можете поменять сами в файле style.css;

(+) Внизу страницы, добавил свои "копирайты" :ah:

(~) Ещё думаю, делать ли страницу авторизации... :bk:  Она имеется, но я пока что её скрыл.

Ну пока все секреты раскрывать не буду. Кстати, свои идеи Вы можете предложить мне, написав Личное сообщения, или в ICQ(Вечером в сети, в 22:00 по МСК).


  • 0

#14 it.donor Отправлено 28 Август 2013 - 10:32

it.donor

    Постоянный

    Топикстартер
  • Пользователи
    • Регистрация: 01-05-2013
    • Публикаций: 129
    • Создал тем: 31

Интересно, как ты при помощи HTML и CSS страницу авторизации сделаешь)


  • 0

#15 Mr.Freeman Отправлено 28 Август 2013 - 17:22

Mr.Freeman

    Веб-разработчик

  • Модераторы
    • Регистрация: 01-05-2013
    • Публикаций: 224
    • Создал тем: 60

Интересно, как ты при помощи HTML и CSS страницу авторизации сделаешь)

безусловно, буду использовать файлы js. html & css тут не обойтись)


  • 0





Темы с аналогичным тегами Теги, HTML

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных


Тему посетили 34 пользователь(и)


    Arthurnam, EdwardGliva, vingo, Ruzanamit, Donalddah, AnnaAbepe, MichaelFam, bubNeodo, RussellJuB, Stephenrof, Bobbygah, CraigScefs, Steklobanki-Don, Thomaserupt, JeffreyLaulk, DennisOxync, Kamorkaspa, Petrbaing, Georgerhini, Rozaliagen, RobertTig, WilliamTef, SuS74, it.donor, igor777, RocKsi, Mr.Freeman, Black_Kot, WilliamCof, AV-Server, ALex@r, иннот, sc_, Larik